babylon.quarks-editor 0.18.0 → 0.19.0

package/src/core/emitterShapeWireframe.ts

@@ -1,13 +1,13 @@
-import type {ParticleSystem} from 'babylon.quarks';
 import {Color3} from '@babylonjs/core/Maths/math.color';
 import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh';
+import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Scene} from '@babylonjs/core/scene';
-import {getShapeType, readShapeParams} from './shapes';
+import type {ParticleSystem} from 'babylon.quarks';
 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);
@@ -125,7 +125,11 @@ function buildEmitterWireframe(system: ParticleSystem, scene: Scene): Mesh[] {
             for (let i = 0; i <= spokeCount; i++) {
                 const theta = (i / spokeCount) * arc;
                 const rim = arcPoint(radius, theta);
-                const dir = new Vector3(Math.sin(angle) * Math.cos(theta), Math.sin(angle) * Math.sin(theta), Math.cos(angle));
+                const dir = new Vector3(
+                    Math.sin(angle) * Math.cos(theta),
+                    Math.sin(angle) * Math.sin(theta),
+                    Math.cos(angle)
+                );
                 const travel = preview / Math.max(Math.cos(angle), 0.05);
                 lines(`wf-cone-ray-${i}`, [rim, rim.add(dir.scale(travel))], DIRECTION_COLOR);
             }

package/src/core/galleryDropMarker.ts

@@ -1,6 +1,6 @@
+import {StandardMaterial} from '@babylonjs/core/Materials/standardMaterial';
 import {Color3} from '@babylonjs/core/Maths/math.color';
 import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import {StandardMaterial} from '@babylonjs/core/Materials/standardMaterial';
 import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
@@ -15,7 +15,11 @@ export class GalleryDropMarker {
 
     constructor(scene: Scene) {
         this.root = new TransformNode('gallery-drop-root', scene);
-        this.disc = MeshBuilder.CreateDisc('gallery-drop-fill', {radius: 1, tessellation: 48, sideOrientation: Mesh.DOUBLESIDE}, scene);
+        this.disc = MeshBuilder.CreateDisc(
+            'gallery-drop-fill',
+            {radius: 1, tessellation: 48, sideOrientation: Mesh.DOUBLESIDE},
+            scene
+        );
         this.disc.parent = this.root;
         this.disc.rotation.x = Math.PI / 2;
 

package/src/core/galleryPlayback.ts

@@ -1,5 +1,5 @@
-import type {GalleryEntry} from './loadEffectGallery';
 import {QuarksUtil} from 'babylon.quarks';
+import type {GalleryEntry} from './loadEffectGallery';
 
 function isPreviewEntry(entry: GalleryEntry, previewRootIds: ReadonlySet<number>): boolean {
     return entry.inScene && previewRootIds.has(entry.root.uniqueId);

package/src/core/galleryScene.ts

@@ -1,9 +1,9 @@
 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';
 import {DEFAULT_GALLERY_SPACING, galleryGridPosition} from './galleryLayout';
+import type {GalleryEntry} from './loadEffectGallery';
 
 /** Clears live particles and freezes simulation for one placed catalog entry. */
 export function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: BatchedRenderer): void {
@@ -15,11 +15,7 @@ export function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: Batch
 }
 
 /** Parents a catalog entry into the live scene and registers its systems with the renderer. */
-export function placeGalleryEntryInScene(
-    entry: GalleryEntry,
-    renderer: BatchedRenderer,
-    worldPosition: Vector3
-): void {
+export function placeGalleryEntryInScene(entry: GalleryEntry, renderer: BatchedRenderer, worldPosition: Vector3): void {
     entry.root.setEnabled(true);
     entry.root.parent = null;
     entry.root.position.copyFrom(worldPosition);

package/src/core/gallerySelectionMarker.ts

@@ -28,7 +28,11 @@ class GroundRingMarker {
 
     constructor(scene: Scene, name: string, color: Color3) {
         this.anchor = new TransformNode(`${name}-root`, scene);
-        this.ring = MeshBuilder.CreateLines(`${name}-ring`, {points: buildGroundRingPoints(GROUND_RING_RADIUS)}, scene) as LinesMesh;
+        this.ring = MeshBuilder.CreateLines(
+            `${name}-ring`,
+            {points: buildGroundRingPoints(GROUND_RING_RADIUS)},
+            scene
+        ) as LinesMesh;
         this.ring.color = color;
         this.ring.parent = this.anchor;
         this.ring.isPickable = false;

package/src/core/galleryTree.ts

@@ -29,14 +29,19 @@ export function buildGalleryTree(entries: GalleryEntry[]): GalleryTreeNode[] {
 
     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 = '';
 
         for (const segment of segments) {
             pathSoFar = pathSoFar ? `${pathSoFar}/${segment}` : segment;
-            let folder = level.find((node): node is GalleryTreeFolder => node.kind === 'folder' && node.name === segment);
+            let folder = level.find(
+                (node): node is GalleryTreeFolder => node.kind === 'folder' && node.name === segment
+            );
             if (!folder) {
                 folder = {kind: 'folder', name: segment, path: pathSoFar, children: []};
                 level.push(folder);
@@ -90,9 +95,7 @@ export function filterGalleryTree(nodes: GalleryTreeNode[], query: string): Gall
 
 export const GALLERY_DRAG_MIME = 'application/x-quarks-gallery-drop';
 
-export type GalleryDragPayload =
-    | {kind: 'effect'; id: number}
-    | {kind: 'folder'; path: string};
+export type GalleryDragPayload = {kind: 'effect'; id: number} | {kind: 'folder'; path: string};
 
 export function writeGalleryDrag(dataTransfer: DataTransfer, payload: GalleryDragPayload): void {
     dataTransfer.setData(GALLERY_DRAG_MIME, JSON.stringify(payload));

package/src/core/loadEffect.ts

@@ -1,8 +1,8 @@
-import {ParticleEmitter, QuarksLoader, QuarksUtil} from 'babylon.quarks';
-import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
-import type {Scene} from '@babylonjs/core/scene';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Node} from '@babylonjs/core/node';
+import type {Scene} from '@babylonjs/core/scene';
+import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
+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. */

package/src/core/loadEffectGallery.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';
 import {disposeLoadedEffect, parseEffectFromJson} from './loadEffect';
 
@@ -105,7 +105,11 @@ export async function loadEffectGallery(
 /** Builds an edit binding for one catalog entry without unloading the rest. */
 export function bindingFromGalleryEntry(entry: GalleryEntry): EffectBinding {
     const main = entry.systems.find((s) => !s.onlyUsedByOther) ?? entry.systems[0];
-    return new EffectBinding(main, entry.systems.filter((s) => s !== main), entry.root);
+    return new EffectBinding(
+        main,
+        entry.systems.filter((s) => s !== main),
+        entry.root
+    );
 }
 
 /** Merges newly loaded catalog entries, skipping duplicate paths. */

package/src/core/pickGalleryFiles.ts

@@ -29,7 +29,10 @@ async function readJsonFilesFromDirectory(dir: DirectoryHandleWithEntries, prefi
         }
         if (entry.kind === 'directory') {
             files.push(
-                ...(await readJsonFilesFromDirectory(entry as unknown as DirectoryHandleWithEntries, `${prefix}${name}/`))
+                ...(await readJsonFilesFromDirectory(
+                    entry as unknown as DirectoryHandleWithEntries,
+                    `${prefix}${name}/`
+                ))
             );
         }
     }

package/src/core/shapes.ts

@@ -1,7 +1,10 @@
+import type {Mesh} from '@babylonjs/core/Meshes/mesh';
+import type {EmitterShape} from 'babylon.quarks';
 import {
     CircleEmitter,
     ConeEmitter,
     DonutEmitter,
+    EmitterMode,
     GridEmitter,
     HemisphereEmitter,
     MeshSurfaceEmitter,
@@ -9,11 +12,17 @@ import {
     RectangleEmitter,
     SphereEmitter,
 } from 'babylon.quarks';
-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 type ShapeType =
+    | 'point'
+    | 'sphere'
+    | 'hemisphere'
+    | 'cone'
+    | 'circle'
+    | 'donut'
+    | 'rectangle'
+    | 'grid'
+    | 'mesh_surface';
 
 export const SHAPE_TYPES: Array<{value: ShapeType; label: string}> = [
     {value: 'cone', label: 'Cone'},
@@ -64,7 +73,8 @@ export function getShapeType(shape: EmitterShape): ShapeType {
 
 export function readShapeParams(shape: EmitterShape): ShapeParams {
     const anyShape = shape as unknown as {[key: string]: unknown};
-    const num = (key: string, fallback: number) => (typeof anyShape[key] === 'number' ? (anyShape[key] as number) : fallback);
+    const num = (key: string, fallback: number) =>
+        typeof anyShape[key] === 'number' ? (anyShape[key] as number) : fallback;
     return {
         radius: num('radius', DEFAULT_SHAPE_PARAMS.radius),
         mode: num('mode', DEFAULT_SHAPE_PARAMS.mode) as EmitterMode,
@@ -100,9 +110,21 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
         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,
@@ -113,7 +135,13 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
                 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,
@@ -124,9 +152,19 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
                 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/src/core/systems.ts

@@ -1,3 +1,4 @@
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import {
     ConeEmitter,
     ConstantColor,
@@ -7,7 +8,6 @@ import {
     RenderMode,
     Vector4,
 } from 'babylon.quarks';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {EffectBinding} from './binding';
 
 export interface ChildSystemOptions {
@@ -35,7 +35,9 @@ export function createChildSystem(parent: ParticleSystem, options: ChildSystemOp
         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,
@@ -70,7 +72,11 @@ export function unlinkSubEmitterReferences(systems: ParticleSystem[], removed: P
 }
 
 /** Disposes the given systems, first unlinking any sub-emitter behaviors that target them. */
-export function removeSystems(binding: EffectBinding, targets: ParticleSystem[], onSelect: (system: ParticleSystem) => void): void {
+export function removeSystems(
+    binding: EffectBinding,
+    targets: ParticleSystem[],
+    onSelect: (system: ParticleSystem) => void
+): void {
     // binding.system is "removable" too as long as some other top-level system can take over
     // as the new main — being main vs. sub is an internal bookkeeping detail, not something
     // that should make one arbitrary track un-deletable in the UI.

package/src/core/timeline.ts

@@ -1,7 +1,6 @@
-import type {ParticleSystem} from 'babylon.quarks';
-import {ConstantValue, IntervalValue} 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 {ConstantValue, IntervalValue} from 'babylon.quarks';
 import type {EffectBinding} from './binding';
 import type {EffectTreeNode} from './effectTree';
 
@@ -29,7 +28,10 @@ export type TimelineRow =
  * stateful `genValue` (IntervalValue caches its sampled slot on first call and returns NaN
  * on a later call with a fresh memory array, so it can't be safely re-read on every render).
  */
-export function computeStartOffset(gen: ValueGenerator | FunctionValueGenerator): {value: number; startOffsetVariable: boolean} {
+export function computeStartOffset(gen: ValueGenerator | FunctionValueGenerator): {
+    value: number;
+    startOffsetVariable: boolean;
+} {
     if (gen instanceof ConstantValue) {
         return {value: gen.value, startOffsetVariable: false};
     }
@@ -97,10 +99,8 @@ function estimateMaxStartLife(system: ParticleSystem): number {
 
 /** When emission is burst-only, the effect window ends at the last burst time, not full duration. */
 function estimateEmissionEnd(system: ParticleSystem): number {
-    const rate =
-        system.emissionOverTime instanceof ConstantValue ? system.emissionOverTime.value : null;
-    const perMeter =
-        system.emissionOverDistance instanceof ConstantValue ? system.emissionOverDistance.value : null;
+    const rate = system.emissionOverTime instanceof ConstantValue ? system.emissionOverTime.value : null;
+    const perMeter = system.emissionOverDistance instanceof ConstantValue ? system.emissionOverDistance.value : null;
     if ((rate != null && rate > 0) || (perMeter != null && perMeter > 0)) {
         return system.duration;
     }

package/src/core/values.ts

@@ -1,5 +1,5 @@
-import {Bezier, ConstantValue, IntervalValue, PiecewiseBezier} from 'babylon.quarks';
 import type {FunctionValueGenerator, ValueGenerator} from 'babylon.quarks';
+import {Bezier, ConstantValue, IntervalValue, PiecewiseBezier} from 'babylon.quarks';
 
 export type ScalarGenerator = ValueGenerator | FunctionValueGenerator;
 export type ScalarMode = 'constant' | 'random' | 'curve';

package/src/core/viewportPicker.ts

@@ -3,8 +3,8 @@ import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Scene} from '@babylonjs/core/scene';
 import {EDITOR_SCENE_NODE_METADATA} from './editorScene';
-import type {GalleryEntry} from './loadEffectGallery';
 import {GROUND_RING_RADIUS, GalleryHoverMarker} from './gallerySelectionMarker';
+import type {GalleryEntry} from './loadEffectGallery';
 
 interface PickMetadata {
     quarksEditorPick: true;

package/src/index.ts

@@ -1,34 +1,34 @@
 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 {GroundPlaneResolver, ensureGroundResolver} from './core/collision';
 export {
     DEFAULT_GRADIENT_STOPS,
-    buildGradient,
     buildColorOverLife,
+    buildGradient,
+    findBehavior,
+    hexToRgb,
+    rgbToHex,
     rgbaToVector4,
     stopToCss,
     stopsToCssGradient,
-    hexToRgb,
-    rgbToHex,
-    findBehavior,
 } 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 {
-    SHAPE_TYPES,
-    SHAPE_PARAM_KEYS,
     DEFAULT_SHAPE_PARAMS,
+    SHAPE_PARAM_KEYS,
+    SHAPE_TYPES,
+    createShape,
     getShapeType,
     readShapeParams,
-    createShape,
 } from './core/shapes';
-export type {ShapeType, ShapeParams} from './core/shapes';
-export {GroundPlaneResolver, ensureGroundResolver} from './core/collision';
-export {applyRendererMaterial, getMaterialLabel} from './core/material';
-export type {RendererMaterialPatch} from './core/material';
+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/src/react/CurveEditor.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 import {CurvePiece, mergePieces, sampleCurve, splitPieces} from '../core/values';
 import {inputStyle, theme} from './theme';
 
@@ -17,7 +17,11 @@ interface PointRef {
  * drag inner keys horizontally, double-click the curve to add a key, double-click
  * a key to remove it (Unity-like).
  */
-export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: CurvePiece[]) => void; maxValue?: number}) {
+export function CurveEditor(props: {
+    pieces: CurvePiece[];
+    onChange: (pieces: CurvePiece[]) => void;
+    maxValue?: number;
+}) {
     const svgRef = useRef<SVGSVGElement>(null);
     const drag = useRef<PointRef | null>(null);
     const [selected, setSelected] = useState<PointRef | null>(null);
@@ -29,7 +33,8 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
     const spanEnd = (i: number) => (i + 1 < pieces.length ? pieces[i + 1].start : 1);
     const toX = (x: number) => PAD + x * (WIDTH - PAD * 2);
     const toY = (v: number) => HEIGHT - PAD - (v / max) * (HEIGHT - PAD * 2);
-    const fromY = (y: number) => Math.round(Math.min(max, Math.max(0, ((HEIGHT - PAD - y) / (HEIGHT - PAD * 2)) * max)) * 1000) / 1000;
+    const fromY = (y: number) =>
+        Math.round(Math.min(max, Math.max(0, ((HEIGHT - PAD - y) / (HEIGHT - PAD * 2)) * max)) * 1000) / 1000;
     const fromX = (px: number) => Math.min(1, Math.max(0, (px - PAD) / (WIDTH - PAD * 2)));
 
     // Control point positions: piece start key, two handles, plus the final end key.
@@ -50,7 +55,9 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
         const end = spanEnd(i);
         for (let s = 0; s <= 16; s++) {
             const t = s / 16;
-            samples.push(`${toX(piece.start + t * (end - piece.start)).toFixed(1)},${toY(sampleCurve(piece.p, t)).toFixed(1)}`);
+            samples.push(
+                `${toX(piece.start + t * (end - piece.start)).toFixed(1)},${toY(sampleCurve(piece.p, t)).toFixed(1)}`
+            );
         }
     });
 
@@ -81,7 +88,9 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
         props.onChange(next);
     };
 
-    const selectedPoint = selected ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx) : null;
+    const selectedPoint = selected
+        ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx)
+        : null;
 
     return (
         <div>
@@ -89,7 +98,13 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
                 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'}}
+                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;
@@ -104,7 +119,15 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
                 }}
             >
                 {[0.25, 0.5, 0.75].map((f) => (
-                    <line key={f} x1={PAD} x2={WIDTH - PAD} y1={PAD + f * (HEIGHT - PAD * 2)} y2={PAD + f * (HEIGHT - PAD * 2)} stroke="#1c274a" strokeWidth={1} />
+                    <line
+                        key={f}
+                        x1={PAD}
+                        x2={WIDTH - PAD}
+                        y1={PAD + f * (HEIGHT - PAD * 2)}
+                        y2={PAD + f * (HEIGHT - PAD * 2)}
+                        stroke="#1c274a"
+                        strokeWidth={1}
+                    />
                 ))}
                 <polyline points={samples.join(' ')} fill="none" stroke={theme.curveStroke} strokeWidth={2} />
                 {points.map((pt) => (
@@ -148,7 +171,10 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
                                 if (Number.isNaN(parsed)) {
                                     return;
                                 }
-                                const next = pieces.map((piece) => ({start: piece.start, p: [...piece.p] as CurvePiece['p']}));
+                                const next = pieces.map((piece) => ({
+                                    start: piece.start,
+                                    p: [...piece.p] as CurvePiece['p'],
+                                }));
                                 const {piece, idx} = selectedPoint.ref;
                                 if (idx === 0 && piece > 0) {
                                     next[piece - 1].p[3] = parsed;
@@ -157,10 +183,14 @@ export function CurveEditor(props: {pieces: CurvePiece[]; onChange: (pieces: Cur
                                 props.onChange(next);
                             }}
                         />
-                        <span style={{fontSize: 10.5, color: theme.textDim}}>t={Math.round(selectedPoint.x * 100) / 100}</span>
+                        <span style={{fontSize: 10.5, color: theme.textDim}}>
+                            t={Math.round(selectedPoint.x * 100) / 100}
+                        </span>
                     </>
                 ) : (
-                    <span style={{fontSize: 10.5, color: theme.textDim}}>dbl-click curve: add key · dbl-click key: remove</span>
+                    <span style={{fontSize: 10.5, color: theme.textDim}}>
+                        dbl-click curve: add key · dbl-click key: remove
+                    </span>
                 )}
             </div>
         </div>

package/src/react/EffectEditor.tsx

@@ -1,16 +1,7 @@
-import React, {useSyncExternalStore} from 'react';
 import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {ParticleSystem} from 'babylon.quarks';
+import React, {useSyncExternalStore} from 'react';
 import {EffectBinding} from '../core/binding';
-import {ObjectModule} from './ObjectModule';
-import {
-    ColorOverLifeModule,
-    EmissionModule,
-    MainModule,
-    RendererModule,
-    ShapeModule,
-    SizeOverLifeModule,
-} from './modules';
-import type {GeometryData, GeometryOption, TextureOption} from './modules';
 import {
     CollisionModule,
     ColorBySpeedModule,
@@ -30,9 +21,18 @@ import {
     VelocityOverLifeModule,
     WidthOverTrailModule,
 } from './behaviorModules';
+import type {GeometryData, GeometryOption, TextureOption} from './modules';
+import {
+    ColorOverLifeModule,
+    EmissionModule,
+    MainModule,
+    RendererModule,
+    ShapeModule,
+    SizeOverLifeModule,
+} from './modules';
+import {ObjectModule} from './ObjectModule';
 import {SubEmittersModule} from './SubEmittersModule';
 import {theme} from './theme';
-import type {ParticleSystem} from 'babylon.quarks';
 
 export interface EffectEditorProps {
     binding: EffectBinding;
@@ -85,7 +85,8 @@ export function EffectEditor(props: EffectEditorProps) {
             <ObjectModule node={props.gizmoTargetNode} label={props.gizmoTargetLabel} />
             {!gizmoTargetIsEmitter && (
                 <div style={{fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45}}>
-                    Modules below edit <strong>{activeSystem.emitter.name || 'particle system'}</strong>. Select its emitter in the timeline to move it with the gizmo.
+                    Modules below edit <strong>{activeSystem.emitter.name || 'particle system'}</strong>. Select its
+                    emitter in the timeline to move it with the gizmo.
                 </div>
             )}
             <MainModule binding={binding} />