babylon.quarks-editor 0.17.7 → 0.17.8

package/src/index.ts

@@ -1,32 +1,32 @@
-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 {ensurePortableTextureUrl} from './core/textureExport';
+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 {ensurePortableTextureUrl} from './core/textureExport';

package/src/react/CurveEditor.tsx

@@ -1,168 +1,168 @@
-import React, {useRef, useState} from 'react';
-import {CurvePiece, mergePieces, sampleCurve, splitPieces} from '../core/values';
-import {inputStyle, theme} from './theme';
-
-const WIDTH = 218;
-const HEIGHT = 84;
-const PAD = 8;
-
-interface PointRef {
-    piece: number;
-    /** 0 = segment start key, 1|2 = handles, 3 = final end key (last piece only). */
-    idx: number;
-}
-
-/**
- * Multi-segment piecewise-bezier curve editor. Drag keys/handles vertically,
- * 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}) {
-    const svgRef = useRef<SVGSVGElement>(null);
-    const drag = useRef<PointRef | null>(null);
-    const [selected, setSelected] = useState<PointRef | null>(null);
-
-    const pieces = [...props.pieces].sort((a, b) => a.start - b.start);
-    const allValues = pieces.flatMap((piece) => piece.p);
-    const max = Math.max(props.maxValue ?? 1, ...allValues.map(Math.abs), 0.001);
-
-    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 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.
-    const points: Array<{ref: PointRef; x: number; y: number; isKey: boolean}> = [];
-    pieces.forEach((piece, i) => {
-        const end = spanEnd(i);
-        const span = end - piece.start;
-        points.push({ref: {piece: i, idx: 0}, x: piece.start, y: piece.p[0], isKey: true});
-        points.push({ref: {piece: i, idx: 1}, x: piece.start + span / 3, y: piece.p[1], isKey: false});
-        points.push({ref: {piece: i, idx: 2}, x: piece.start + (2 * span) / 3, y: piece.p[2], isKey: false});
-        if (i === pieces.length - 1) {
-            points.push({ref: {piece: i, idx: 3}, x: 1, y: piece.p[3], isKey: true});
-        }
-    });
-
-    const samples: string[] = [];
-    pieces.forEach((piece, i) => {
-        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)}`);
-        }
-    });
-
-    const applyDrag = (clientX: number, clientY: number) => {
-        const target = drag.current;
-        if (!target || !svgRef.current) {
-            return;
-        }
-        const rect = svgRef.current.getBoundingClientRect();
-        const v = fromY(clientY - rect.top);
-        const next = pieces.map((piece) => ({start: piece.start, p: [...piece.p] as CurvePiece['p']}));
-        const {piece, idx} = target;
-        if (idx === 0) {
-            next[piece].p[0] = v;
-            if (piece > 0) {
-                next[piece - 1].p[3] = v;
-                // Inner keys can also move horizontally between neighbours.
-                const x = fromX(clientX - rect.left);
-                const min = next[piece - 1].start + 0.02;
-                const maxX = (piece + 1 < next.length ? next[piece + 1].start : 1) - 0.02;
-                next[piece].start = Math.min(maxX, Math.max(min, x));
-            }
-        } else if (idx === 3) {
-            next[piece].p[3] = v;
-        } else {
-            next[piece].p[idx] = v;
-        }
-        props.onChange(next);
-    };
-
-    const selectedPoint = selected ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx) : null;
-
-    return (
-        <div>
-            <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 as Element).releasePointerCapture?.(e.pointerId);
-                }}
-                onDoubleClick={(e) => {
-                    if ((e.target as Element).tagName === 'circle') {
-                        return;
-                    }
-                    const rect = svgRef.current!.getBoundingClientRect();
-                    props.onChange(splitPieces(pieces, fromX(e.clientX - rect.left)));
-                }}
-            >
-                {[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} />
-                ))}
-                <polyline points={samples.join(' ')} fill="none" stroke={theme.curveStroke} strokeWidth={2} />
-                {points.map((pt) => (
-                    <circle
-                        key={`${pt.ref.piece}-${pt.ref.idx}`}
-                        className="qe-hover"
-                        cx={toX(pt.x)}
-                        cy={toY(pt.y)}
-                        r={pt.isKey ? 5 : 4}
-                        fill={pt.isKey ? theme.curveStroke : '#28407f'}
-                        stroke={theme.curveStroke}
-                        strokeWidth={1.5}
-                        style={{cursor: pt.isKey && pt.ref.idx === 0 && pt.ref.piece > 0 ? 'move' : 'ns-resize'}}
-                        onPointerDown={(e) => {
-                            drag.current = pt.ref;
-                            setSelected(pt.ref);
-                            (e.target as Element).setPointerCapture(e.pointerId);
-                        }}
-                        onDoubleClick={(e) => {
-                            e.stopPropagation();
-                            if (pt.isKey && pt.ref.idx === 0 && pt.ref.piece > 0) {
-                                setSelected(null);
-                                props.onChange(mergePieces(pieces, pt.ref.piece));
-                            }
-                        }}
-                    />
-                ))}
-            </svg>
-            <div style={{display: 'flex', gap: 4, marginTop: 4, alignItems: 'center'}}>
-                {selectedPoint ? (
-                    <>
-                        <span style={{fontSize: 10.5, color: theme.textDim}}>value</span>
-                        <input
-                            type="number"
-                            className="qe-hover"
-                            step={0.05}
-                            style={{...inputStyle, fontSize: 11, padding: '3px 5px', width: 70}}
-                            value={Math.round(selectedPoint.y * 1000) / 1000}
-                            onChange={(e) => {
-                                const parsed = parseFloat(e.target.value);
-                                if (Number.isNaN(parsed)) {
-                                    return;
-                                }
-                                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;
-                                }
-                                next[piece].p[idx === 3 ? 3 : idx] = parsed;
-                                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}}>dbl-click curve: add key · dbl-click key: remove</span>
-                )}
-            </div>
-        </div>
-    );
-}
+import React, {useRef, useState} from 'react';
+import {CurvePiece, mergePieces, sampleCurve, splitPieces} from '../core/values';
+import {inputStyle, theme} from './theme';
+
+const WIDTH = 218;
+const HEIGHT = 84;
+const PAD = 8;
+
+interface PointRef {
+    piece: number;
+    /** 0 = segment start key, 1|2 = handles, 3 = final end key (last piece only). */
+    idx: number;
+}
+
+/**
+ * Multi-segment piecewise-bezier curve editor. Drag keys/handles vertically,
+ * 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}) {
+    const svgRef = useRef<SVGSVGElement>(null);
+    const drag = useRef<PointRef | null>(null);
+    const [selected, setSelected] = useState<PointRef | null>(null);
+
+    const pieces = [...props.pieces].sort((a, b) => a.start - b.start);
+    const allValues = pieces.flatMap((piece) => piece.p);
+    const max = Math.max(props.maxValue ?? 1, ...allValues.map(Math.abs), 0.001);
+
+    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 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.
+    const points: Array<{ref: PointRef; x: number; y: number; isKey: boolean}> = [];
+    pieces.forEach((piece, i) => {
+        const end = spanEnd(i);
+        const span = end - piece.start;
+        points.push({ref: {piece: i, idx: 0}, x: piece.start, y: piece.p[0], isKey: true});
+        points.push({ref: {piece: i, idx: 1}, x: piece.start + span / 3, y: piece.p[1], isKey: false});
+        points.push({ref: {piece: i, idx: 2}, x: piece.start + (2 * span) / 3, y: piece.p[2], isKey: false});
+        if (i === pieces.length - 1) {
+            points.push({ref: {piece: i, idx: 3}, x: 1, y: piece.p[3], isKey: true});
+        }
+    });
+
+    const samples: string[] = [];
+    pieces.forEach((piece, i) => {
+        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)}`);
+        }
+    });
+
+    const applyDrag = (clientX: number, clientY: number) => {
+        const target = drag.current;
+        if (!target || !svgRef.current) {
+            return;
+        }
+        const rect = svgRef.current.getBoundingClientRect();
+        const v = fromY(clientY - rect.top);
+        const next = pieces.map((piece) => ({start: piece.start, p: [...piece.p] as CurvePiece['p']}));
+        const {piece, idx} = target;
+        if (idx === 0) {
+            next[piece].p[0] = v;
+            if (piece > 0) {
+                next[piece - 1].p[3] = v;
+                // Inner keys can also move horizontally between neighbours.
+                const x = fromX(clientX - rect.left);
+                const min = next[piece - 1].start + 0.02;
+                const maxX = (piece + 1 < next.length ? next[piece + 1].start : 1) - 0.02;
+                next[piece].start = Math.min(maxX, Math.max(min, x));
+            }
+        } else if (idx === 3) {
+            next[piece].p[3] = v;
+        } else {
+            next[piece].p[idx] = v;
+        }
+        props.onChange(next);
+    };
+
+    const selectedPoint = selected ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx) : null;
+
+    return (
+        <div>
+            <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 as Element).releasePointerCapture?.(e.pointerId);
+                }}
+                onDoubleClick={(e) => {
+                    if ((e.target as Element).tagName === 'circle') {
+                        return;
+                    }
+                    const rect = svgRef.current!.getBoundingClientRect();
+                    props.onChange(splitPieces(pieces, fromX(e.clientX - rect.left)));
+                }}
+            >
+                {[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} />
+                ))}
+                <polyline points={samples.join(' ')} fill="none" stroke={theme.curveStroke} strokeWidth={2} />
+                {points.map((pt) => (
+                    <circle
+                        key={`${pt.ref.piece}-${pt.ref.idx}`}
+                        className="qe-hover"
+                        cx={toX(pt.x)}
+                        cy={toY(pt.y)}
+                        r={pt.isKey ? 5 : 4}
+                        fill={pt.isKey ? theme.curveStroke : '#28407f'}
+                        stroke={theme.curveStroke}
+                        strokeWidth={1.5}
+                        style={{cursor: pt.isKey && pt.ref.idx === 0 && pt.ref.piece > 0 ? 'move' : 'ns-resize'}}
+                        onPointerDown={(e) => {
+                            drag.current = pt.ref;
+                            setSelected(pt.ref);
+                            (e.target as Element).setPointerCapture(e.pointerId);
+                        }}
+                        onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            if (pt.isKey && pt.ref.idx === 0 && pt.ref.piece > 0) {
+                                setSelected(null);
+                                props.onChange(mergePieces(pieces, pt.ref.piece));
+                            }
+                        }}
+                    />
+                ))}
+            </svg>
+            <div style={{display: 'flex', gap: 4, marginTop: 4, alignItems: 'center'}}>
+                {selectedPoint ? (
+                    <>
+                        <span style={{fontSize: 10.5, color: theme.textDim}}>value</span>
+                        <input
+                            type="number"
+                            className="qe-hover"
+                            step={0.05}
+                            style={{...inputStyle, fontSize: 11, padding: '3px 5px', width: 70}}
+                            value={Math.round(selectedPoint.y * 1000) / 1000}
+                            onChange={(e) => {
+                                const parsed = parseFloat(e.target.value);
+                                if (Number.isNaN(parsed)) {
+                                    return;
+                                }
+                                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;
+                                }
+                                next[piece].p[idx === 3 ? 3 : idx] = parsed;
+                                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}}>dbl-click curve: add key · dbl-click key: remove</span>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/react/EffectEditor.tsx

@@ -1,111 +1,125 @@
-import React, {useSyncExternalStore} from 'react';
-import {EffectBinding} from '../core/binding';
-import {
-    ColorOverLifeModule,
-    EmissionModule,
-    MainModule,
-    RendererModule,
-    ShapeModule,
-    SizeOverLifeModule,
-} from './modules';
-import type {GeometryData, GeometryOption, TextureOption} from './modules';
-import {
-    CollisionModule,
-    ColorBySpeedModule,
-    EmitDirectionModule,
-    ForceOverLifeModule,
-    GravityModule,
-    InheritVelocityModule,
-    LimitSpeedOverLifeModule,
-    NoiseModule,
-    OrbitOverLifeModule,
-    RotationBySpeedModule,
-    RotationOverLifeModule,
-    SizeBySpeedModule,
-    SpeedOverLifeModule,
-    TextureSheetModule,
-    TurbulenceModule,
-    VelocityOverLifeModule,
-    WidthOverTrailModule,
-} from './behaviorModules';
-import {SubEmittersModule} from './SubEmittersModule';
-import {theme} from './theme';
-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. */
-    selectedSystem: ParticleSystem;
-    /** Texture presets offered in the Renderer module (host supplies the loader). */
-    textureOptions?: TextureOption[];
-    /** Mesh presets offered for the Mesh render mode (host supplies the geometry buffers). */
-    geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string) => unknown;
-    /** Host loader for "Load from file…" in the Mesh render mode (e.g. a GLB importer). */
-    resolveGeometry?: (file: File) => Promise<GeometryData>;
-}
-
-/**
- * Shuriken-style effect editor: a stacked module inspector for the selected system.
- * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
- * Module order mirrors Unity's Particle System inspector.
- */
-export function EffectEditor(props: EffectEditorProps) {
-    useSyncExternalStore(
-        (onStoreChange) => props.binding.subscribe(onStoreChange),
-        () => props.binding.getRevision()
-    );
-    const allSystems = [props.binding.system, ...props.binding.subSystems];
-    // Selection survives re-renders but falls back to root if the system was removed/replaced.
-    const activeSystem = allSystems.includes(props.selectedSystem) ? props.selectedSystem : props.binding.system;
-
-    // Inspector edits go through a per-system binding; changes route into the root
-    // binding's undo history and re-render via the subscription below.
-    const binding = React.useMemo(() => {
-        if (activeSystem === props.binding.system) {
-            return props.binding;
-        }
-        const nested = new EffectBinding(activeSystem);
-        nested.onBeforeChange = () => props.binding.onBeforeChange?.();
-        return nested;
-    }, [props.binding, activeSystem]);
-    useSyncExternalStore(
-        (onStoreChange) => binding.subscribe(onStoreChange),
-        () => binding.getRevision()
-    );
-
-    return (
-        <div style={{fontFamily: theme.font, color: theme.text}}>
-            <MainModule binding={binding} />
-            <EmissionModule binding={binding} />
-            <ShapeModule binding={binding} />
-            <EmitDirectionModule binding={binding} />
-            <VelocityOverLifeModule binding={binding} />
-            <SpeedOverLifeModule binding={binding} />
-            <LimitSpeedOverLifeModule binding={binding} />
-            <InheritVelocityModule binding={binding} />
-            <ForceOverLifeModule binding={binding} />
-            <GravityModule binding={binding} />
-            <OrbitOverLifeModule binding={binding} />
-            <ColorOverLifeModule binding={binding} />
-            <ColorBySpeedModule binding={binding} />
-            <SizeOverLifeModule binding={binding} />
-            <SizeBySpeedModule binding={binding} />
-            <RotationOverLifeModule binding={binding} />
-            <RotationBySpeedModule binding={binding} />
-            <NoiseModule binding={binding} />
-            <TurbulenceModule binding={binding} />
-            <CollisionModule binding={binding} />
-            <WidthOverTrailModule binding={binding} />
-            <SubEmittersModule binding={binding} rootBinding={props.binding} />
-            <TextureSheetModule binding={binding} />
-            <RendererModule
-                binding={binding}
-                textureOptions={props.textureOptions}
-                geometryOptions={props.geometryOptions}
-                resolveTexture={props.resolveTexture}
-                resolveGeometry={props.resolveGeometry}
-            />
-        </div>
-    );
-}
+import React, {useSyncExternalStore} from 'react';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+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,
+    EmitDirectionModule,
+    ForceOverLifeModule,
+    GravityModule,
+    InheritVelocityModule,
+    LimitSpeedOverLifeModule,
+    NoiseModule,
+    OrbitOverLifeModule,
+    RotationBySpeedModule,
+    RotationOverLifeModule,
+    SizeBySpeedModule,
+    SpeedOverLifeModule,
+    TextureSheetModule,
+    TurbulenceModule,
+    VelocityOverLifeModule,
+    WidthOverTrailModule,
+} from './behaviorModules';
+import {SubEmittersModule} from './SubEmittersModule';
+import {theme} from './theme';
+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. */
+    selectedSystem: ParticleSystem;
+    gizmoTargetNode: TransformNode;
+    gizmoTargetLabel: string;
+    /** Texture presets offered in the Renderer module (host supplies the loader). */
+    textureOptions?: TextureOption[];
+    /** Mesh presets offered for the Mesh render mode (host supplies the geometry buffers). */
+    geometryOptions?: GeometryOption[];
+    resolveTexture?: (url: string) => unknown;
+    /** Host loader for "Load from file…" in the Mesh render mode (e.g. a GLB importer). */
+    resolveGeometry?: (file: File) => Promise<GeometryData>;
+}
+
+/**
+ * Shuriken-style effect editor: a stacked module inspector for the selected system.
+ * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
+ * Module order mirrors Unity's Particle System inspector.
+ */
+export function EffectEditor(props: EffectEditorProps) {
+    useSyncExternalStore(
+        (onStoreChange) => props.binding.subscribe(onStoreChange),
+        () => props.binding.getRevision()
+    );
+    const allSystems = [props.binding.system, ...props.binding.subSystems];
+    // Selection survives re-renders but falls back to root if the system was removed/replaced.
+    const activeSystem = allSystems.includes(props.selectedSystem) ? props.selectedSystem : props.binding.system;
+
+    // Inspector edits go through a per-system binding; changes route into the root
+    // binding's undo history and re-render via the subscription below.
+    const binding = React.useMemo(() => {
+        if (activeSystem === props.binding.system) {
+            return props.binding;
+        }
+        const nested = new EffectBinding(activeSystem);
+        nested.onBeforeChange = () => props.binding.onBeforeChange?.();
+        return nested;
+    }, [props.binding, activeSystem]);
+    useSyncExternalStore(
+        (onStoreChange) => binding.subscribe(onStoreChange),
+        () => binding.getRevision()
+    );
+
+    const gizmoTargetIsEmitter = allSystems.some((s) => s.emitter === props.gizmoTargetNode);
+    if (!gizmoTargetIsEmitter) {
+        return (
+            <div style={{fontFamily: theme.font, color: theme.text}}>
+                <ObjectModule node={props.gizmoTargetNode} label={props.gizmoTargetLabel} />
+            </div>
+        );
+    }
+
+    return (
+        <div style={{fontFamily: theme.font, color: theme.text}}>
+            <ObjectModule node={props.gizmoTargetNode} label={props.gizmoTargetLabel} />
+            <MainModule binding={binding} />
+            <EmissionModule binding={binding} />
+            <ShapeModule binding={binding} />
+            <EmitDirectionModule binding={binding} />
+            <VelocityOverLifeModule binding={binding} />
+            <SpeedOverLifeModule binding={binding} />
+            <LimitSpeedOverLifeModule binding={binding} />
+            <InheritVelocityModule binding={binding} />
+            <ForceOverLifeModule binding={binding} />
+            <GravityModule binding={binding} />
+            <OrbitOverLifeModule binding={binding} />
+            <ColorOverLifeModule binding={binding} />
+            <ColorBySpeedModule binding={binding} />
+            <SizeOverLifeModule binding={binding} />
+            <SizeBySpeedModule binding={binding} />
+            <RotationOverLifeModule binding={binding} />
+            <RotationBySpeedModule binding={binding} />
+            <NoiseModule binding={binding} />
+            <TurbulenceModule binding={binding} />
+            <CollisionModule binding={binding} />
+            <WidthOverTrailModule binding={binding} />
+            <SubEmittersModule binding={binding} rootBinding={props.binding} />
+            <TextureSheetModule binding={binding} />
+            <RendererModule
+                binding={binding}
+                textureOptions={props.textureOptions}
+                geometryOptions={props.geometryOptions}
+                resolveTexture={props.resolveTexture}
+                resolveGeometry={props.resolveGeometry}
+            />
+        </div>
+    );
+}