babylon.quarks-editor 0.18.1 → 0.19.0

package/README.md

@@ -13,17 +13,17 @@ npm install babylon.quarks-editor babylon.quarks @babylonjs/core react @heroicon
 ## Usage
 
 ```tsx
-import {EffectBinding, EffectHistory} from "babylon.quarks-editor";
-import {EffectEditor} from "babylon.quarks-editor/react";
+import {EffectBinding, EffectHistory} from 'babylon.quarks-editor';
+import {EffectEditor} from 'babylon.quarks-editor/react';
 
-const binding = new EffectBinding(particleSystem);   // your babylon.quarks ParticleSystem
+const binding = new EffectBinding(particleSystem); // your babylon.quarks ParticleSystem
 const history = new EffectHistory();
 history.attach(binding);
 
 <EffectEditor binding={binding} />;
 
 // Serialize to Quarks JSON (round-trips through QuarksLoader):
-const json = binding.exportJSON("MyEffect");
+const json = binding.exportJSON('MyEffect');
 ```
 
 Modules: Main, Emission (bursts), Shape (7 emitter types), Speed/Limit Speed/Force/Rotation over Lifetime, Gravity, Color over Lifetime (gradient), Size over Lifetime (curve), Noise, Sub Emitters, Texture Sheet Animation, Renderer. Multi-system hierarchy with add/remove/rename, undo/redo via `EffectHistory`.
@@ -39,9 +39,9 @@ an opinion on your CDN, asset pipeline, or loader (`@babylonjs/loaders`, your ow
   "Load from file…" in the Renderer module) into whatever object you assign as `system.texture`.
 - `resolveGeometry(file) => Promise<GeometryData>` — turns a picked file (from "Load from file…"
   in the Mesh render mode's geometry dropdown) into vertex buffers: `{positions, indices?, uvs?,
-  normals?}` (typed arrays or plain number arrays).
+normals?}` (typed arrays or plain number arrays).
 - `textureOptions?: {label, url}[]` / `geometryOptions?: {label, positions, indices?, uvs?,
-  normals?}[]` — preset lists shown alongside "Custom URL…" / "Load from file…".
+normals?}[]` — preset lists shown alongside "Custom URL…" / "Load from file…".
 
 **Signature differs by entry point** — a common source of "works in the demo, throws in my
 host" bugs:

package/dist/core/binding.d.ts

@@ -1,5 +1,5 @@
-import type { ParticleSystem } from 'babylon.quarks';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { ParticleSystem } from 'babylon.quarks';
 import type { EffectTreeNode } from './effectTree';
 export type EditorListener = () => void;
 /**

package/dist/core/colors.d.ts

@@ -1,5 +1,5 @@
-import { ColorOverLife, Gradient, Vector4 } from 'babylon.quarks';
 import type { Behavior } from 'babylon.quarks';
+import { ColorOverLife, Gradient, Vector4 } from 'babylon.quarks';
 /** One RGBA stop of the editable gradient (all channels 0..1, pos 0..1). */
 export interface GradientStop {
     pos: number;

package/dist/core/defaultEffect.d.ts

@@ -1,5 +1,5 @@
-import type { Scene } from '@babylonjs/core/scene';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
 import { ParticleSystem } from 'babylon.quarks';
 import type { GalleryEntry } from './loadEffectGallery';
 export interface CreateGalleryDefaultOptions {

package/dist/core/effectTree.d.ts

@@ -1,5 +1,5 @@
-import type { ParticleSystem } from 'babylon.quarks';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { ParticleSystem } from 'babylon.quarks';
 /** A node in the editor's effect hierarchy: a Group (organizational) or a ParticleEmitter. */
 export interface EffectTreeNode {
     node: TransformNode;

package/dist/core/effectTree.js

@@ -1,6 +1,6 @@
-import { ParticleEmitter } from 'babylon.quarks';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { Matrix, Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { ParticleEmitter } from 'babylon.quarks';
 import { isEditorSceneNode } from './editorScene';
 /** Walks a loaded root TransformNode into the editor tree (groups + emitters). */
 export function buildEffectTree(root, depth = 0) {
@@ -51,7 +51,11 @@ function serializeNode(tree, meta, fallbackUuid) {
         children: children.length > 0 ? children : undefined,
     };
     if (tree.system) {
-        return { ...base, type: 'ParticleEmitter', ps: tree.system.toJSON(meta, { useUrlForImage: true }) };
+        return {
+            ...base,
+            type: 'ParticleEmitter',
+            ps: tree.system.toJSON(meta, { useUrlForImage: true }),
+        };
     }
     return { ...base, type: 'Group' };
 }
@@ -92,10 +96,20 @@ function finishEnvelope(object, meta) {
     const textures = [];
     for (const [uuid, tex] of Object.entries(meta.textures)) {
         const url = tex?.url ?? tex?.name;
+        const invertY = typeof tex?.invertY === 'boolean' ? tex.invertY : undefined;
+        const isEnvAtlas = tex?.name === 'quarksEnvAtlas' || (typeof tex?.name === 'string' && tex.name.endsWith('_envAtlas'));
         if (url) {
             const imageUuid = `${uuid}-image`;
             images.push({ uuid: imageUuid, url });
-            textures.push({ uuid, image: imageUuid });
+            const entry = {
+                uuid,
+                image: imageUuid,
+            };
+            if (invertY === false || isEnvAtlas) {
+                entry.invertY = false;
+                entry.noMipmap = true;
+            }
+            textures.push(entry);
         }
         else {
             textures.push({ uuid });

package/dist/core/emitterShapeWireframe.d.ts

@@ -1,5 +1,5 @@
-import type { ParticleSystem } from 'babylon.quarks';
 import type { Scene } from '@babylonjs/core/scene';
+import type { ParticleSystem } from 'babylon.quarks';
 /**
  * Optional wireframe overlays for every emitter shape in the current effect.
  * Geometry follows quarks.core spawn math (local XY spawn plane, +Z emit axis).

package/dist/core/emitterShapeWireframe.js

@@ -2,8 +2,8 @@ import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { getShapeType, readShapeParams } from './shapes';
 import { EDITOR_SCENE_NODE_METADATA } from './editorScene';
+import { getShapeType, readShapeParams } from './shapes';
 const LINE_COLOR = new Color3(0.45, 0.82, 1);
 const DIRECTION_COLOR = new Color3(0.75, 0.92, 1);
 /**

package/dist/core/galleryDropMarker.js

@@ -1,5 +1,5 @@
-import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';

package/dist/core/galleryScene.d.ts

@@ -1,6 +1,6 @@
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import type { Scene } from '@babylonjs/core/scene';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
 import type { BatchedRenderer } from 'babylon.quarks';
 import type { GalleryEntry } from './loadEffectGallery';
 /** Clears live particles and freezes simulation for one placed catalog entry. */

package/dist/core/galleryTree.js

@@ -9,7 +9,10 @@ export function buildGalleryTree(entries) {
     const roots = [];
     for (const entry of entries) {
         const normalized = entry.path.replace(/\\/g, '/');
-        const segments = normalized.replace(/\.json$/i, '').split('/').filter(Boolean);
+        const segments = normalized
+            .replace(/\.json$/i, '')
+            .split('/')
+            .filter(Boolean);
         const fileName = segments.pop() ?? entry.name;
         let level = roots;
         let pathSoFar = '';

package/dist/core/loadEffect.d.ts

@@ -1,6 +1,6 @@
-import type { BatchedRenderer, ParticleSystem } from 'babylon.quarks';
-import type { Scene } from '@babylonjs/core/scene';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer, ParticleSystem } from 'babylon.quarks';
 export interface LoadEffectOptions {
     /** Registers systems with the batched renderer (default true). */
     registerRenderer?: boolean;

package/dist/core/loadEffect.js

@@ -1,5 +1,5 @@
-import { ParticleEmitter, QuarksLoader, QuarksUtil } from 'babylon.quarks';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { ParticleEmitter, QuarksLoader, QuarksUtil } from 'babylon.quarks';
 /** `ParticleEmitter`'s constructor default (see babylon.quarks/src/ParticleEmitter.ts) — the
  * name every emitter gets when the source JSON didn't give it one of its own. */
 const DEFAULT_EMITTER_NAME = 'particleEmitter';

package/dist/core/loadEffectGallery.d.ts

@@ -1,6 +1,6 @@
-import type { ParticleSystem } from 'babylon.quarks';
-import type { Scene } from '@babylonjs/core/scene';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
+import type { ParticleSystem } from 'babylon.quarks';
 import { EffectBinding } from './binding';
 export interface GalleryEntry {
     name: string;

package/dist/core/shapes.d.ts

@@ -1,6 +1,6 @@
+import type { Mesh } from '@babylonjs/core/Meshes/mesh';
 import type { EmitterShape } from 'babylon.quarks';
 import { EmitterMode } from 'babylon.quarks';
-import type { Mesh } from '@babylonjs/core/Meshes/mesh';
 export type ShapeType = 'point' | 'sphere' | 'hemisphere' | 'cone' | 'circle' | 'donut' | 'rectangle' | 'grid' | 'mesh_surface';
 export declare const SHAPE_TYPES: Array<{
     value: ShapeType;

package/dist/core/shapes.js

@@ -1,5 +1,4 @@
-import { CircleEmitter, ConeEmitter, DonutEmitter, GridEmitter, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
-import { EmitterMode } from 'babylon.quarks';
+import { CircleEmitter, ConeEmitter, DonutEmitter, EmitterMode, GridEmitter, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
 export const SHAPE_TYPES = [
     { value: 'cone', label: 'Cone' },
     { value: 'sphere', label: 'Sphere' },
@@ -31,7 +30,7 @@ export function getShapeType(shape) {
 }
 export function readShapeParams(shape) {
     const anyShape = shape;
-    const num = (key, fallback) => (typeof anyShape[key] === 'number' ? anyShape[key] : fallback);
+    const num = (key, fallback) => typeof anyShape[key] === 'number' ? anyShape[key] : fallback;
     return {
         radius: num('radius', DEFAULT_SHAPE_PARAMS.radius),
         mode: num('mode', DEFAULT_SHAPE_PARAMS.mode),
@@ -65,9 +64,21 @@ export function createShape(type, params) {
         case 'point':
             return new PointEmitter();
         case 'sphere':
-            return new SphereEmitter({ radius: params.radius, arc: params.arc, thickness: params.thickness, mode: params.mode, spread: params.spread });
+            return new SphereEmitter({
+                radius: params.radius,
+                arc: params.arc,
+                thickness: params.thickness,
+                mode: params.mode,
+                spread: params.spread,
+            });
         case 'hemisphere':
-            return new HemisphereEmitter({ radius: params.radius, arc: params.arc, thickness: params.thickness, mode: params.mode, spread: params.spread });
+            return new HemisphereEmitter({
+                radius: params.radius,
+                arc: params.arc,
+                thickness: params.thickness,
+                mode: params.mode,
+                spread: params.spread,
+            });
         case 'cone':
             return new ConeEmitter({
                 radius: params.radius,
@@ -78,7 +89,13 @@ export function createShape(type, params) {
                 spread: params.spread,
             });
         case 'circle':
-            return new CircleEmitter({ radius: params.radius, arc: params.arc, thickness: params.thickness, mode: params.mode, spread: params.spread });
+            return new CircleEmitter({
+                radius: params.radius,
+                arc: params.arc,
+                thickness: params.thickness,
+                mode: params.mode,
+                spread: params.spread,
+            });
         case 'donut':
             return new DonutEmitter({
                 radius: params.radius,
@@ -89,9 +106,19 @@ export function createShape(type, params) {
                 spread: params.spread,
             });
         case 'rectangle':
-            return new RectangleEmitter({ width: params.width, height: params.height, mode: params.mode, spread: params.spread });
+            return new RectangleEmitter({
+                width: params.width,
+                height: params.height,
+                mode: params.mode,
+                spread: params.spread,
+            });
         case 'grid':
-            return new GridEmitter({ width: params.width, height: params.height, column: params.column, row: params.row });
+            return new GridEmitter({
+                width: params.width,
+                height: params.height,
+                column: params.column,
+                row: params.row,
+            });
         case 'mesh_surface':
             return new MeshSurfaceEmitter(params.mesh);
     }

package/dist/core/systems.d.ts

@@ -1,5 +1,5 @@
-import { ParticleSystem } from 'babylon.quarks';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { ParticleSystem } from 'babylon.quarks';
 import type { EffectBinding } from './binding';
 export interface ChildSystemOptions {
     name?: string;

package/dist/core/systems.js

@@ -15,7 +15,9 @@ export function createChildSystem(parent, options = {}) {
         startSize: new IntervalValue(0.05, 0.2),
         startColor: new ConstantColor(new Vector4(1, 0.9, 0.6, 1)),
         emissionOverTime: new ConstantValue(oneShot ? 0 : 30),
-        emissionBursts: oneShot ? [{ time: 0, count: new ConstantValue(8), cycle: 1, interval: 0.01, probability: 1 }] : [],
+        emissionBursts: oneShot
+            ? [{ time: 0, count: new ConstantValue(8), cycle: 1, interval: 0.01, probability: 1 }]
+            : [],
         shape: new ConeEmitter({ radius: 0.1, angle: Math.PI / 3 }),
         renderMode: RenderMode.BillBoard,
         texture: parent.texture ?? undefined,

package/dist/core/timeline.d.ts

@@ -1,6 +1,5 @@
-import type { ParticleSystem } from 'babylon.quarks';
-import type { FunctionValueGenerator, ValueGenerator } from 'babylon.quarks';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { FunctionValueGenerator, ParticleSystem, ValueGenerator } from 'babylon.quarks';
 import type { EffectBinding } from './binding';
 export type TimelineRow = {
     kind: 'group';

package/dist/core/values.d.ts

@@ -1,5 +1,5 @@
-import { PiecewiseBezier } from 'babylon.quarks';
 import type { FunctionValueGenerator, ValueGenerator } from 'babylon.quarks';
+import { PiecewiseBezier } from 'babylon.quarks';
 export type ScalarGenerator = ValueGenerator | FunctionValueGenerator;
 export type ScalarMode = 'constant' | 'random' | 'curve';
 /** Editable snapshot of a scalar value generator. */

package/dist/index.d.ts

@@ -1,17 +1,17 @@
 export { EffectBinding } from './core/binding';
 export type { EditorListener } from './core/binding';
-export { EffectHistory } from './core/history';
-export { createChildSystem } from './core/systems';
-export { buildEffectTree, collectSystems, serializeEffectTree, serializeEffectForest } from './core/effectTree';
-export type { EffectTreeNode } from './core/effectTree';
-export type { ChildSystemOptions } from './core/systems';
-export { readScalar, buildScalar, sampleCurve, readPieces, buildCurve, splitPieces, mergePieces } from './core/values';
-export type { ScalarGenerator, ScalarMode, ScalarValueState, CurvePiece } from './core/values';
-export { DEFAULT_GRADIENT_STOPS, buildGradient, buildColorOverLife, rgbaToVector4, stopToCss, stopsToCssGradient, hexToRgb, rgbToHex, findBehavior, } from './core/colors';
-export type { GradientStop } from './core/colors';
-export { SHAPE_TYPES, SHAPE_PARAM_KEYS, DEFAULT_SHAPE_PARAMS, getShapeType, readShapeParams, createShape, } from './core/shapes';
-export type { ShapeType, ShapeParams } from './core/shapes';
 export { GroundPlaneResolver, ensureGroundResolver } from './core/collision';
+export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } from './core/colors';
+export type { GradientStop } from './core/colors';
+export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree';
+export type { EffectTreeNode } from './core/effectTree';
+export { EffectHistory } from './core/history';
 export { applyRendererMaterial, getMaterialLabel } from './core/material';
 export type { RendererMaterialPatch } from './core/material';
+export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes';
+export type { ShapeParams, ShapeType } from './core/shapes';
+export { createChildSystem } from './core/systems';
+export type { ChildSystemOptions } from './core/systems';
 export { ensurePortableTextureUrl } from './core/textureExport';
+export { buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces } from './core/values';
+export type { CurvePiece, ScalarGenerator, ScalarMode, ScalarValueState } from './core/values';

package/dist/index.js

@@ -1,10 +1,10 @@
 export { EffectBinding } from './core/binding';
-export { EffectHistory } from './core/history';
-export { createChildSystem } from './core/systems';
-export { buildEffectTree, collectSystems, serializeEffectTree, serializeEffectForest } from './core/effectTree';
-export { readScalar, buildScalar, sampleCurve, readPieces, buildCurve, splitPieces, mergePieces } from './core/values';
-export { DEFAULT_GRADIENT_STOPS, buildGradient, buildColorOverLife, rgbaToVector4, stopToCss, stopsToCssGradient, hexToRgb, rgbToHex, findBehavior, } from './core/colors';
-export { SHAPE_TYPES, SHAPE_PARAM_KEYS, DEFAULT_SHAPE_PARAMS, getShapeType, readShapeParams, createShape, } from './core/shapes';
 export { GroundPlaneResolver, ensureGroundResolver } from './core/collision';
+export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } from './core/colors';
+export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree';
+export { EffectHistory } from './core/history';
 export { applyRendererMaterial, getMaterialLabel } from './core/material';
+export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes';
+export { createChildSystem } from './core/systems';
 export { ensurePortableTextureUrl } from './core/textureExport';
+export { buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces } from './core/values';

package/dist/react/CurveEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CurvePiece } from '../core/values';
 /**
  * Multi-segment piecewise-bezier curve editor. Drag keys/handles vertically,
@@ -9,4 +8,4 @@ export declare function CurveEditor(props: {
     pieces: CurvePiece[];
     onChange: (pieces: CurvePiece[]) => void;
     maxValue?: number;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/CurveEditor.js

@@ -70,8 +70,16 @@ export function CurveEditor(props) {
         }
         props.onChange(next);
     };
-    const selectedPoint = selected ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx) : null;
-    return (_jsxs("div", { children: [_jsxs("svg", { ref: svgRef, width: WIDTH, height: HEIGHT, style: { background: 'rgba(5, 8, 18, 0.85)', border: `1px solid ${theme.border}`, borderRadius: 8, touchAction: 'none', display: 'block' }, onPointerMove: (e) => applyDrag(e.clientX, e.clientY), onPointerUp: (e) => {
+    const selectedPoint = selected
+        ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx)
+        : null;
+    return (_jsxs("div", { children: [_jsxs("svg", { ref: svgRef, width: WIDTH, height: HEIGHT, style: {
+                    background: 'rgba(5, 8, 18, 0.85)',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    touchAction: 'none',
+                    display: 'block',
+                }, onPointerMove: (e) => applyDrag(e.clientX, e.clientY), onPointerUp: (e) => {
                     drag.current = null;
                     e.target.releasePointerCapture?.(e.pointerId);
                 }, onDoubleClick: (e) => {
@@ -95,7 +103,10 @@ export function CurveEditor(props) {
                                 if (Number.isNaN(parsed)) {
                                     return;
                                 }
-                                const next = pieces.map((piece) => ({ start: piece.start, p: [...piece.p] }));
+                                const next = pieces.map((piece) => ({
+                                    start: piece.start,
+                                    p: [...piece.p],
+                                }));
                                 const { piece, idx } = selectedPoint.ref;
                                 if (idx === 0 && piece > 0) {
                                     next[piece - 1].p[3] = parsed;

package/dist/react/EffectEditor.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { ParticleSystem } from 'babylon.quarks';
+import React from 'react';
 import { EffectBinding } from '../core/binding';
 import type { GeometryData, GeometryOption, TextureOption } from './modules';
-import type { ParticleSystem } from 'babylon.quarks';
 export interface EffectEditorProps {
     binding: EffectBinding;
     /** Currently selected system, lifted up so the timeline panel and this module stack agree. */

package/dist/react/EffectEditor.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useSyncExternalStore } from 'react';
 import { EffectBinding } from '../core/binding';
-import { ObjectModule } from './ObjectModule';
-import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
 import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
+import { ObjectModule } from './ObjectModule';
 import { SubEmittersModule } from './SubEmittersModule';
 import { theme } from './theme';
 /**

package/dist/react/EffectEditorHost.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Scene } from '@babylonjs/core/scene';
 import { BatchedRenderer } from 'babylon.quarks';
+import React from 'react';
 import { EffectBinding } from '../core/binding';
 import { EffectHistory } from '../core/history';
 import type { GeometryData, GeometryOption, TextureOption } from './modules';