babylon.quarks-editor 0.17.7

package/src/react/CurveEditor.tsx

@@ -0,0 +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>
+    );
+}

package/src/react/EffectEditor.tsx

@@ -0,0 +1,111 @@
+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>
+    );
+}

package/src/react/EffectEditorHost.tsx

@@ -0,0 +1,377 @@
+import React, {useEffect, useReducer, useRef, useState} from 'react';
+import {createRoot} from 'react-dom/client';
+import {Engine} from '@babylonjs/core/Engines/engine';
+import {Scene} from '@babylonjs/core/scene';
+import {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera';
+import {DirectionalLight} from '@babylonjs/core/Lights/directionalLight';
+import {Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector';
+import {Color3, Color4} from '@babylonjs/core/Maths/math.color';
+import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {GridMaterial} from '@babylonjs/materials/grid/gridMaterial';
+import {
+    BatchedRenderer,
+    ColorOverLife,
+    ConeEmitter,
+    ConstantColor,
+    ConstantValue,
+    IntervalValue,
+    ParticleSystem,
+    RenderMode,
+    Vector4,
+} from 'babylon.quarks';
+import {EffectBinding} from '../core/binding';
+import {EffectHistory} from '../core/history';
+import {ensureGroundResolver} from '../core/collision';
+import {loadEffectFromJson} from '../core/loadEffect';
+import {DEFAULT_GRADIENT_STOPS, buildGradient} from '../core/colors';
+import {EffectEditor} from './EffectEditor';
+import {PromptDialog} from './PromptDialog';
+import {TimelinePanel} from './TimelinePanel';
+import type {PlaybackState} from './TimelinePanel';
+import type {GeometryData, GeometryOption, TextureOption} from './modules';
+import {buttonStyle, globalEditorStyles, theme} from './theme';
+
+export interface EffectEditorHostHandle {
+    binding: EffectBinding;
+    history: EffectHistory;
+    scene: Scene;
+    renderer: BatchedRenderer;
+    importJson: (json: unknown) => void;
+    exportJson: () => string;
+}
+
+export interface EffectEditorHostProps {
+    /** Quarks JSON export to open; a default effect is created when omitted. */
+    effectJson?: unknown;
+    /** When set, a Save button appears and receives the serialized effect. */
+    onSave?: (json: string) => void;
+    /** Called once the engine/scene/binding are live (and after every import). */
+    onReady?: (handle: EffectEditorHostHandle) => void;
+    title?: string;
+    textureOptions?: TextureOption[];
+    /** Mesh presets for the Mesh render mode (e.g. asset meshes from a host editor). */
+    geometryOptions?: GeometryOption[];
+    resolveTexture?: (url: string, scene: Scene) => unknown;
+    /** Host loader for the Mesh "Load from file…" option (e.g. GLB via @babylonjs/loaders). */
+    resolveGeometry?: (file: File, scene: Scene) => Promise<GeometryData>;
+}
+
+function createDefaultEffect(scene: Scene, resolveTexture?: (url: string, scene: Scene) => unknown, textureUrl?: string): ParticleSystem {
+    const system = new ParticleSystem({
+        scene,
+        duration: 4,
+        looping: true,
+        startLife: new IntervalValue(1.2, 1.8),
+        startSpeed: new IntervalValue(3, 5),
+        startSize: new IntervalValue(0.25, 0.5),
+        startColor: new ConstantColor(new Vector4(1, 1, 1, 1)),
+        emissionOverTime: new ConstantValue(80),
+        // quarks' angle is a half-angle; Babylon's native cone uses a full angle.
+        shape: new ConeEmitter({radius: 0.3, angle: 0.25}),
+        renderMode: RenderMode.BillBoard,
+        texture: (textureUrl && resolveTexture ? resolveTexture(textureUrl, scene) : undefined) as never,
+        transparent: true,
+        blendMode: 1,
+    });
+    system.addBehavior(new ColorOverLife(buildGradient(DEFAULT_GRADIENT_STOPS)));
+    // quarks emits along local +Z; Babylon's native cone emits along +Y.
+    system.emitter.rotation.x = -Math.PI / 2;
+    return system;
+}
+
+/** Disposes an effect's systems and its remaining group tree (otherwise the groups leak). */
+function disposeEffect(root: TransformNode, systems: ParticleSystem[], renderer: BatchedRenderer): void {
+    for (const system of systems) {
+        renderer.deleteSystem(system);
+        system.dispose();
+    }
+    // Disposing the systems already disposed their emitter nodes; dispose the leftover group
+    // tree too. Skip when the root IS a disposed emitter (default single-system effect).
+    if (!systems.some((system) => system.emitter === root)) {
+        root.dispose(false, true);
+    }
+}
+
+/**
+ * Self-contained effect editor: live Babylon preview + hierarchy/inspector sidebar.
+ * Designed for embedding — see QuarksEffectEditor.Show for the NME-style entry point.
+ */
+export function EffectEditorHost(props: EffectEditorHostProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const counterRef = useRef<HTMLSpanElement>(null);
+    const playheadRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<HTMLInputElement>(null);
+    const stateRef = useRef<{engine: Engine; scene: Scene; renderer: BatchedRenderer; binding: EffectBinding; history: EffectHistory} | null>(null);
+    const [binding, setBinding] = useState<EffectBinding | null>(null);
+    const [, force] = useReducer((x: number) => x + 1, 0);
+    const playbackRef = useRef<PlaybackState>({paused: false, speed: 1, stepQueued: false, elapsed: 0, scrubbing: false});
+    const [paused, setPaused] = useState(false);
+    const [speed, setSpeed] = useState(1);
+    const [selectedSystem, setSelectedSystem] = useState<ParticleSystem | null>(null);
+    const [renamingRoot, setRenamingRoot] = useState(false);
+
+    useEffect(() => {
+        // Register the shared ground-plane collider before any effect (default or imported)
+        // is built, so ApplyCollision behaviors deserialized by QuarksLoader resolve against it.
+        ensureGroundResolver();
+        const engine = new Engine(canvasRef.current!, true);
+        const scene = new Scene(engine);
+        scene.clearColor = new Color4(0.03, 0.04, 0.09, 1);
+        const camera = new ArcRotateCamera('cam', -Math.PI / 2, 1.15, 9, new BVector3(0, 1.4, 0), scene);
+        camera.attachControl(canvasRef.current!, true);
+        camera.wheelDeltaPercentage = 0.01;
+
+        // Mesh render mode particles are lit (billboard modes ignore these), and the grid gives
+        // a visual floor at the same y=0 plane the Collision module's ground resolver uses.
+        scene.ambientColor = new Color3(1, 1, 1);
+        const sunLight = new DirectionalLight('sun', new BVector3(-1, -1, -1), scene);
+        sunLight.intensity = 1.0;
+        sunLight.diffuse = new Color3(1, 1, 1);
+        sunLight.specular = new Color3(1, 1, 1);
+
+        const groundMaterial = new GridMaterial('groundMaterial', scene);
+        groundMaterial.majorUnitFrequency = 2;
+        groundMaterial.minorUnitVisibility = 0.1;
+        groundMaterial.gridRatio = 0.5;
+        groundMaterial.backFaceCulling = false;
+        groundMaterial.mainColor = new Color3(1, 1, 1);
+        groundMaterial.lineColor = new Color3(1, 1, 1);
+        groundMaterial.opacity = 0.5;
+        const ground = MeshBuilder.CreateGround('ground', {width: 100, height: 100}, scene);
+        ground.material = groundMaterial;
+
+        const renderer = new BatchedRenderer('quarks-editor', scene);
+        const history = new EffectHistory();
+
+        const mount = (nextBinding: EffectBinding) => {
+            history.attach(nextBinding);
+            nextBinding.subscribe(force);
+            stateRef.current = {engine, scene, renderer, binding: nextBinding, history};
+            setBinding(nextBinding);
+            props.onReady?.(makeHandle());
+        };
+
+        const makeHandle = (): EffectEditorHostHandle => ({
+            // Live getter: stays correct after presets/imports/undo replace the binding.
+            get binding() {
+                return stateRef.current!.binding;
+            },
+            history,
+            scene,
+            renderer,
+            importJson,
+            exportJson: () => stateRef.current!.binding.exportJSON('EditorEffect'),
+        });
+
+        const importJson = (json: unknown) => {
+            const current = stateRef.current!.binding;
+            // Load first so a bad/empty JSON leaves the current effect intact.
+            const {root, systems} = loadEffectFromJson(scene, renderer, json);
+            if (systems.length === 0) {
+                disposeEffect(root, systems, renderer);
+                throw new Error('No particle systems found in the JSON.');
+            }
+            disposeEffect(current.root, [current.system, ...current.subSystems], renderer);
+            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
+            mount(new EffectBinding(main, systems.filter((s) => s !== main), root));
+        };
+
+        let initial: EffectBinding;
+        if (props.effectJson) {
+            const {root, systems} = loadEffectFromJson(scene, renderer, props.effectJson);
+            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
+            initial = new EffectBinding(main, systems.filter((s) => s !== main), root);
+        } else {
+            const system = createDefaultEffect(scene, props.resolveTexture, props.textureOptions?.[0]?.url);
+            renderer.addSystem(system);
+            // Root is a plain group (not the system's own emitter) so a new top-level system
+            // can be added as a sibling later, instead of always nesting under this one.
+            const root = new TransformNode('Effect', scene);
+            system.emitter.parent = root;
+            initial = new EffectBinding(system, [], root);
+        }
+        mount(initial);
+
+        engine.runRenderLoop(() => {
+            const playback = playbackRef.current;
+            if (!playback.scrubbing) {
+                let delta = (engine.getDeltaTime() / 1000) * playback.speed;
+                if (playback.paused) {
+                    delta = playback.stepQueued ? 1 / 60 : 0;
+                    playback.stepQueued = false;
+                }
+                if (delta > 0) {
+                    renderer.update(delta);
+                    playback.elapsed += delta;
+                }
+            }
+            scene.render();
+            const b = stateRef.current!.binding;
+            let count = b.system.particleNum;
+            for (const sub of b.subSystems) {
+                count += sub.particleNum;
+            }
+            if (counterRef.current) {
+                counterRef.current.textContent = `${count} particles · ${playback.elapsed.toFixed(2)}s`;
+            }
+        });
+
+        const onResize = () => engine.resize();
+        const onKey = (e: KeyboardEvent) => {
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
+                e.preventDefault();
+                const json = e.shiftKey ? history.redo() : history.undo();
+                if (json) {
+                    importJson(json);
+                }
+                force();
+            }
+        };
+        window.addEventListener('resize', onResize);
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('keydown', onKey);
+            engine.dispose();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const state = stateRef.current;
+    const historyAction = (json: unknown | null) => {
+        if (json && state) {
+            const current = state.binding;
+            const {root, systems} = loadEffectFromJson(state.scene, state.renderer, json);
+            disposeEffect(current.root, [current.system, ...current.subSystems], state.renderer);
+            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
+            const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
+            state.history.attach(next);
+            next.subscribe(force);
+            state.binding = next;
+            setBinding(next);
+        }
+        force();
+    };
+
+    // Selection survives re-renders but falls back to root if the system was removed/replaced
+    // (e.g. after undo/redo or import swaps the whole binding out from under it).
+    const allSystems = binding ? [binding.system, ...binding.subSystems] : [];
+    const activeSystem = binding ? (selectedSystem && allSystems.includes(selectedSystem) ? selectedSystem : binding.system) : null;
+
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%', fontFamily: theme.font, color: theme.text, background: '#070b16'}}>
+            <style>{globalEditorStyles}</style>
+            <div style={{display: 'flex', flex: 1, minHeight: 0}}>
+                <div style={{position: 'relative', flex: 1, minWidth: 0}}>
+                    <canvas ref={canvasRef} style={{width: '100%', height: '100%', display: 'block', touchAction: 'none', outline: 'none'}} />
+                </div>
+                <aside style={{width: 340, flexShrink: 0, borderLeft: `1px solid ${theme.border}`, background: theme.panelBg, display: 'flex', flexDirection: 'column'}}>
+                    <div style={{padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}`}}>
+                        <div
+                            className="qe-hover-bg"
+                            title={binding ? 'Rename effect' : undefined}
+                            style={{fontSize: 16, fontWeight: 600, cursor: binding ? 'pointer' : 'default', borderRadius: 6, padding: '2px 4px', margin: '-2px -4px'}}
+                            onClick={() => binding && setRenamingRoot(true)}
+                        >
+                            {(binding?.root.name || props.title) ?? 'Effect editor'}
+                        </div>
+                        {renamingRoot && binding && (
+                            <PromptDialog
+                                title="Rename effect"
+                                defaultValue={binding.root.name}
+                                onSubmit={(name) => {
+                                    binding.apply(() => (binding.root.name = name));
+                                    setRenamingRoot(false);
+                                }}
+                                onCancel={() => setRenamingRoot(false)}
+                            />
+                        )}
+                        <div style={{display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10}}>
+                            <button className="qe-hover" style={buttonStyle} title="Undo (Ctrl+Z)" disabled={!state?.history.canUndo} onClick={() => historyAction(state!.history.undo())}>↶</button>
+                            <button className="qe-hover" style={buttonStyle} title="Redo (Ctrl+Shift+Z)" disabled={!state?.history.canRedo} onClick={() => historyAction(state!.history.redo())}>↷</button>
+                            <button
+                                className="qe-hover"
+                                style={buttonStyle}
+                                onClick={() => {
+                                    if (!binding) return;
+                                    const blob = new Blob([binding.exportJSON('EditorEffect')], {type: 'application/json'});
+                                    const link = document.createElement('a');
+                                    link.href = URL.createObjectURL(blob);
+                                    link.download = 'effect.json';
+                                    link.click();
+                                    URL.revokeObjectURL(link.href);
+                                }}
+                            >
+                                Export
+                            </button>
+                            <button className="qe-hover" style={buttonStyle} onClick={() => importRef.current?.click()}>Import</button>
+                            {props.onSave && (
+                                <button className="qe-hover" style={buttonStyle} onClick={() => binding && props.onSave!(binding.exportJSON('EditorEffect'))}>
+                                    Save
+                                </button>
+                            )}
+                            <input
+                                ref={importRef}
+                                type="file"
+                                accept=".json,application/json"
+                                hidden
+                                onChange={async (e) => {
+                                    const file = e.target.files?.[0];
+                                    e.target.value = '';
+                                    if (!file || !state) return;
+                                    try {
+                                        const json = JSON.parse(await file.text());
+                                        historyAction(json);
+                                        state.history.clear();
+                                        force();
+                                    } catch (err) {
+                                        console.error('Failed to import effect JSON:', err);
+                                    }
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div style={{flex: 1, overflowY: 'auto', padding: '6px 14px 20px'}}>
+                        {binding && activeSystem && (
+                            <EffectEditor
+                                binding={binding}
+                                selectedSystem={activeSystem}
+                                textureOptions={props.textureOptions}
+                                geometryOptions={props.geometryOptions}
+                                resolveTexture={props.resolveTexture && state ? (url) => props.resolveTexture!(url, state.scene) : undefined}
+                                resolveGeometry={props.resolveGeometry && state ? (file) => props.resolveGeometry!(file, state.scene) : undefined}
+                            />
+                        )}
+                    </div>
+                </aside>
+            </div>
+            {binding && activeSystem && state && (
+                <TimelinePanel
+                    binding={binding}
+                    selectedSystem={activeSystem}
+                    onSelect={setSelectedSystem}
+                    scene={state.scene}
+                    renderer={state.renderer}
+                    playbackRef={playbackRef}
+                    playheadRef={playheadRef}
+                    counterRef={counterRef}
+                    paused={paused}
+                    setPaused={setPaused}
+                    speed={speed}
+                    setSpeed={setSpeed}
+                />
+            )}
+        </div>
+    );
+}
+
+/** NME-style imperative entry point for hosts like BabylonJS Editor windows. */
+export const QuarksEffectEditor = {
+    Show(options: EffectEditorHostProps & {hostElement: HTMLElement}): {dispose: () => void} {
+        const {hostElement, ...props} = options;
+        const root = createRoot(hostElement);
+        root.render(<EffectEditorHost {...props} />);
+        return {dispose: () => root.unmount()};
+    },
+};