babylon.quarks-editor 0.17.7

package/dist/react/modules.js

@@ -0,0 +1,439 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { ColorOverLife, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3Function, Vector4, } from 'babylon.quarks';
+import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors';
+import { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams } from '../core/shapes';
+import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
+import { CurveEditor } from './CurveEditor';
+import { GradientEditor } from './GradientEditor';
+import { ModuleSection } from './ModuleSection';
+import { PromptDialog } from './PromptDialog';
+import { CheckboxField, NumberField, Row, SelectField } from './fields';
+import { ValueField } from './ValueField';
+const MESH_QUAD_POSITIONS = new Float32Array([-0.5, -0.5, 0, 0.5, -0.5, 0, 0.5, 0.5, 0, -0.5, 0.5, 0]);
+const MESH_QUAD_INDICES = new Uint32Array([0, 1, 2, 0, 2, 3]);
+const MESH_QUAD_UVS = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
+const MESH_CUBE_POSITIONS = new Float32Array([
+    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
+    -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
+]);
+const MESH_CUBE_INDICES = new Uint32Array([
+    0, 1, 2, 0, 2, 3, 4, 6, 5, 4, 7, 6, 0, 4, 5, 0, 5, 1,
+    3, 2, 6, 3, 6, 7, 0, 3, 7, 0, 7, 4, 1, 5, 6, 1, 6, 2,
+]);
+function arraysEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+/** Detects whether the current mesh geometry is one of the editor's built-in presets or was imported. */
+function detectGeometryPreset(positions) {
+    if (arraysEqual(positions, MESH_CUBE_POSITIONS)) {
+        return 'cube';
+    }
+    if (arraysEqual(positions, MESH_QUAD_POSITIONS)) {
+        return 'quad';
+    }
+    return 'custom';
+}
+const PARAM_LABELS = {
+    radius: 'Radius',
+    arc: 'Arc',
+    thickness: 'Thickness',
+    angle: 'Angle',
+    donutRadius: 'Donut radius',
+    width: 'Width',
+    height: 'Height',
+    column: 'Columns',
+    row: 'Rows',
+};
+function ColorInput(props) {
+    const { value, onChange } = props;
+    return (_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("input", { type: "color", className: "qe-hover", value: rgbToHex(value.x, value.y, value.z), onChange: (e) => {
+                    const rgb = hexToRgb(e.target.value);
+                    onChange(new Vector4(rgb.r, rgb.g, rgb.b, value.w));
+                }, style: { width: 42, height: 24, border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } }), _jsx(NumberField, { value: value.w, min: 0, step: 0.05, onChange: (a) => onChange(new Vector4(value.x, value.y, value.z, Math.min(1, a))) })] }));
+}
+export function MainModule({ binding }) {
+    const system = binding.system;
+    const startColor = system.startColor;
+    const colorMode = startColor instanceof RandomColor ? 'random' : 'constant';
+    const colorA = startColor instanceof RandomColor ? startColor.a
+        : startColor instanceof ConstantColor ? startColor.color
+            : new Vector4(1, 1, 1, 1);
+    const colorB = startColor instanceof RandomColor ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const rotation = system.startRotation;
+    const isEuler = rotation instanceof EulerGenerator;
+    const rotationMode = rotation instanceof RandomQuatGenerator ? '3d'
+        : isEuler ? 'euler'
+            : readScalar(rotation).mode === 'random' ? 'random'
+                : 'angle';
+    const rotationState = readScalar(rotation instanceof RandomQuatGenerator || isEuler ? undefined : rotation);
+    const eulerAngles = {
+        x: isEuler ? readScalar(rotation.angleX).value : 0,
+        y: isEuler ? readScalar(rotation.angleY).value : 0,
+        z: isEuler ? readScalar(rotation.angleZ).value : 0,
+    };
+    const setEulerAxis = (axis, v) => binding.apply((s) => {
+        const cur = s.startRotation;
+        s.startRotation = new EulerGenerator(axis === 'x' ? new ConstantValue(v) : cur.angleX, axis === 'y' ? new ConstantValue(v) : cur.angleY, axis === 'z' ? new ConstantValue(v) : cur.angleZ);
+    });
+    const startSize = system.startSize;
+    const size3D = startSize.type === 'vec3function';
+    const colorGenMode = startColor instanceof RandomColorBetweenGradient ? 'gradient2'
+        : startColor instanceof Gradient ? 'gradient'
+            : colorMode;
+    return (_jsxs(ModuleSection, { title: "Main", children: [_jsx(Row, { label: "Duration", children: _jsx(NumberField, { value: system.duration, min: 0.05, onChange: (v) => binding.apply((s) => (s.duration = v)) }) }), _jsx(Row, { label: "Looping", children: _jsx(CheckboxField, { value: system.looping, onChange: (v) => binding.apply((s) => (s.looping = v)) }) }), _jsx(Row, { label: "World space", children: _jsx(CheckboxField, { value: system.worldSpace, onChange: (v) => binding.apply((s) => (s.worldSpace = v)) }) }), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+                    s.startDelay = g;
+                    s.restart();
+                }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: size3D ? '3d' : 'uniform', options: [
+                        { value: 'uniform', label: 'Uniform' },
+                        { value: '3d', label: '3D (per axis)' },
+                    ], onChange: (mode) => binding.apply((s) => {
+                        const cur = s.startSize;
+                        if (mode === '3d') {
+                            // Seed all three axes from the current uniform generator.
+                            s.startSize = new Vector3Function(cur.clone(), cur.clone(), cur.clone());
+                        }
+                        else {
+                            // Collapse back to the X-axis generator.
+                            s.startSize = s.startSize.x;
+                        }
+                    }) }) }), !size3D && (_jsx(ValueField, { label: "", generator: system.startSize, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => (s.startSize = g)) })), size3D && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(ValueField, { label: axis.toUpperCase(), generator: startSize[axis], min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+                        const cur = s.startSize;
+                        s.startSize = new Vector3Function(axis === 'x' ? g : cur.x, axis === 'y' ? g : cur.y, axis === 'z' ? g : cur.z);
+                    }) }, axis))) })), _jsx(Row, { label: "Start color", children: _jsx(SelectField, { value: colorGenMode, options: [
+                        { value: 'constant', label: 'Constant' },
+                        { value: 'random', label: 'Random between two' },
+                        { value: 'gradient', label: 'Gradient' },
+                        { value: 'gradient2', label: 'Random between gradients' },
+                    ], onChange: (mode) => binding.apply((s) => {
+                        if (mode === 'random') {
+                            s.startColor = new RandomColor(colorA, colorB);
+                        }
+                        else if (mode === 'gradient') {
+                            s.startColor = buildGradient(DEFAULT_GRADIENT_STOPS);
+                        }
+                        else if (mode === 'gradient2') {
+                            s.startColor = new RandomColorBetweenGradient(buildGradient(DEFAULT_GRADIENT_STOPS), buildGradient(DEFAULT_GRADIENT_STOPS));
+                        }
+                        else {
+                            s.startColor = new ConstantColor(colorA);
+                        }
+                    }) }) }), (colorGenMode === 'constant' || colorGenMode === 'random') && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorA, onChange: (next) => binding.apply((s) => {
+                        s.startColor = colorGenMode === 'random' ? new RandomColor(next, colorB) : new ConstantColor(next);
+                    }) }) })), colorGenMode === 'random' && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorB, onChange: (next) => binding.apply((s) => (s.startColor = new RandomColor(colorA, next))) }) })), colorGenMode === 'gradient' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: readGradientStops(startColor), onChange: (stops) => binding.apply((s) => (s.startColor = buildGradient(stops))) }) })), colorGenMode === 'gradient2' && (_jsxs("div", { style: { marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(GradientEditor, { stops: readGradientStops(startColor.gradient1), onChange: (stops) => binding.apply((s) => {
+                            const g = s.startColor;
+                            s.startColor = new RandomColorBetweenGradient(buildGradient(stops), g.gradient2);
+                        }) }), _jsx(GradientEditor, { stops: readGradientStops(startColor.gradient2), onChange: (stops) => binding.apply((s) => {
+                            const g = s.startColor;
+                            s.startColor = new RandomColorBetweenGradient(g.gradient1, buildGradient(stops));
+                        }) })] })), _jsx(Row, { label: "Start rotation", children: _jsx(SelectField, { value: rotationMode, options: [
+                        { value: 'angle', label: 'Angle (rad)' },
+                        { value: 'random', label: 'Random angle' },
+                        { value: 'euler', label: '3D (per axis)' },
+                        { value: '3d', label: 'Random 3D' },
+                    ], onChange: (mode) => binding.apply((s) => {
+                        s.startRotation =
+                            mode === '3d'
+                                ? new RandomQuatGenerator()
+                                : mode === 'euler'
+                                    ? new EulerGenerator(new ConstantValue(eulerAngles.x), new ConstantValue(eulerAngles.y), new ConstantValue(eulerAngles.z))
+                                    : mode === 'random'
+                                        ? new IntervalValue(0, Math.PI * 2)
+                                        : new ConstantValue(rotationState.value);
+                    }) }) }), rotationMode === 'euler' && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(Row, { label: `  ${axis.toUpperCase()} (rad)`, children: _jsx(NumberField, { value: eulerAngles[axis], step: 0.1, onChange: (v) => setEulerAxis(axis, v) }) }, axis))) })), rotationMode === 'angle' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: rotationState.value, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new ConstantValue(v))) }) })), rotationMode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: rotationState.min, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(v, rotationState.max))) }), _jsx(NumberField, { value: rotationState.max, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(rotationState.min, v))) })] }) }))] }));
+}
+export function EmissionModule({ binding }) {
+    const system = binding.system;
+    const bursts = system.emissionBursts ?? [];
+    return (_jsxs(ModuleSection, { title: "Emission", children: [_jsx(ValueField, { label: "Rate over time", generator: system.emissionOverTime, min: 0, curveMax: 500, onChange: (g) => binding.apply((s) => (s.emissionOverTime = g)) }), _jsx(ValueField, { label: "Rate over distance", generator: system.emissionOverDistance, min: 0, curveMax: 50, onChange: (g) => binding.apply((s) => (s.emissionOverDistance = g)) }), bursts.map((burst, i) => (_jsxs("div", { style: { marginTop: 8, padding: '6px 8px', border: '1px solid #22305c', borderRadius: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("span", { style: { fontSize: 11.5, color: '#9eb9ff' }, children: ["Burst ", i + 1] }), _jsx("button", { className: "qe-hover", style: { background: 'none', border: 'none', color: '#e08c8c', cursor: 'pointer', fontSize: 13 }, title: "Remove burst", onClick: () => binding.apply((s) => s.emissionBursts.splice(i, 1)), children: "\u2715" })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 4 }, children: [_jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Time", _jsx(NumberField, { value: burst.time, min: 0, onChange: (time) => binding.apply(() => (burst.time = time)) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Count", _jsx(NumberField, { value: readScalar(burst.count).value, min: 0, step: 1, onChange: (count) => binding.apply(() => (burst.count = new ConstantValue(Math.round(count)))) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Cycles", _jsx(NumberField, { value: burst.cycle, min: 1, step: 1, onChange: (v) => binding.apply(() => (burst.cycle = Math.round(v))) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Interval", _jsx(NumberField, { value: burst.interval, min: 0.01, onChange: (v) => binding.apply(() => (burst.interval = v)) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Probability", _jsx(NumberField, { value: burst.probability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (burst.probability = Math.min(1, v))) })] })] })] }, i))), _jsx("button", { className: "qe-hover", style: { marginTop: 8, background: 'none', border: '1px dashed #34477f', color: '#9eb9ff', borderRadius: 8, padding: '5px 10px', cursor: 'pointer', fontSize: 12.5 }, onClick: () => binding.apply((s) => s.emissionBursts.push({ time: 0, count: new ConstantValue(20), cycle: 1, interval: 0.01, probability: 1 })), children: "+ Add burst" })] }));
+}
+// Shapes whose constructor doesn't accept `mode`/`spread` at all — showing those controls
+// for them would edit a value the shape silently ignores, just like the old "default to
+// first texture" bug: a control that looks live but does nothing.
+const SHAPES_WITHOUT_MODE_SPREAD = new Set(['point', 'grid', 'mesh_surface']);
+export function ShapeModule({ binding }) {
+    const system = binding.system;
+    const type = getShapeType(system.emitterShape);
+    const params = { ...DEFAULT_SHAPE_PARAMS, ...readShapeParams(system.emitterShape) };
+    const keys = SHAPE_PARAM_KEYS[type];
+    const scene = system.emitter.getScene();
+    // 'vfxBatch' is the renderer's own internal instancing mesh — never a valid emission source.
+    const meshOptions = scene.meshes.filter((m) => m instanceof Mesh && m.name !== 'vfxBatch' && m.getTotalVertices() > 0);
+    return (_jsxs(ModuleSection, { title: "Shape", children: [_jsx(Row, { label: "Shape", children: _jsx(SelectField, { value: type, options: SHAPE_TYPES, onChange: (next) => binding.apply((s) => (s.emitterShape = createShape(next, params))) }) }), keys.map((key) => (_jsx(Row, { label: PARAM_LABELS[key], children: _jsx(NumberField, { value: params[key], min: 0, onChange: (v) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, [key]: v }))) }) }, key))), type === 'mesh_surface' && (_jsx(Row, { label: "Source mesh", children: _jsx(SelectField, { value: params.mesh?.uniqueId != null ? String(params.mesh.uniqueId) : '__none', options: [
+                        { value: '__none', label: '(none)' },
+                        ...meshOptions.map((m) => ({ value: String(m.uniqueId), label: m.name })),
+                    ], onChange: (id) => {
+                        const mesh = id === '__none' ? undefined : meshOptions.find((m) => String(m.uniqueId) === id);
+                        binding.apply((s) => (s.emitterShape = createShape('mesh_surface', { ...params, mesh })));
+                    } }) })), !SHAPES_WITHOUT_MODE_SPREAD.has(type) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Emit mode", children: _jsx(SelectField, { value: params.mode, options: [
+                                { value: 0, label: 'Random' },
+                                { value: 1, label: 'Loop' },
+                                { value: 2, label: 'Ping-pong' },
+                                { value: 3, label: 'Burst spread' },
+                            ], onChange: (mode) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, mode }))) }) }), _jsx(Row, { label: "Spread", children: _jsx(NumberField, { value: params.spread, min: 0, step: 0.05, onChange: (spread) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, spread }))) }) })] }))] }));
+}
+export function SizeOverLifeModule({ binding }) {
+    const system = binding.system;
+    const behavior = findBehavior(system.behaviors, 'SizeOverLife');
+    const curve = behavior ? readScalar(behavior.size).curve : [0.2, 1, 1, 0.4];
+    return (_jsx(ModuleSection, { title: "Size over Lifetime", enabled: !!behavior, onToggle: (enabled) => binding.apply((s) => {
+            removeBehavior(s, 'SizeOverLife');
+            if (enabled) {
+                s.addBehavior(new SizeOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve })));
+            }
+        }), children: _jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: behavior ? readPieces(behavior.size) : [{ start: 0, p: curve }], maxValue: 2, onChange: (pieces) => binding.apply((s) => {
+                    removeBehavior(s, 'SizeOverLife');
+                    s.addBehavior(new SizeOverLife(buildCurve(pieces)));
+                }) }) }) }));
+}
+export function ColorOverLifeModule({ binding }) {
+    const system = binding.system;
+    const behavior = findBehavior(system.behaviors, 'ColorOverLife');
+    const stops = behavior && behavior.color instanceof Gradient ? readGradientStops(behavior.color) : DEFAULT_GRADIENT_STOPS;
+    const write = (nextStops) => binding.apply((s) => {
+        removeBehavior(s, 'ColorOverLife');
+        s.addBehavior(new ColorOverLife(buildGradient(nextStops)));
+    });
+    return (_jsx(ModuleSection, { title: "Color over Lifetime", enabled: !!behavior, onToggle: (enabled) => binding.apply((s) => {
+            removeBehavior(s, 'ColorOverLife');
+            if (enabled) {
+                s.addBehavior(new ColorOverLife(buildGradient(stops)));
+            }
+        }), children: _jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: stops, onChange: write }) }) }));
+}
+/**
+ * Tiny dependency-free wireframe thumbnail of a mesh geometry. Projects positions with a fixed
+ * isometric rotation, scales them to fit, and strokes the triangle edges on a 2D canvas — enough
+ * for the user to recognise which mesh they picked without spinning up a second Babylon scene.
+ */
+function MeshPreview({ positions, indices, size = 96 }) {
+    const canvasRef = React.useRef(null);
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || positions.length < 9) {
+            return;
+        }
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        const n = positions.length / 3;
+        // Fixed iso rotation (yaw ~35°, pitch ~30°) so depth reads clearly.
+        const cy = Math.cos(0.6), sy = Math.sin(0.6), cx = Math.cos(0.52), sx = Math.sin(0.52);
+        const pts = [];
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (let i = 0; i < n; i++) {
+            const x = positions[i * 3], y = positions[i * 3 + 1], z = positions[i * 3 + 2];
+            const rx = x * cy - z * sy;
+            const rz = x * sy + z * cy;
+            const ry = y * cx - rz * sx;
+            pts.push([rx, ry]);
+            if (rx < minX)
+                minX = rx;
+            if (rx > maxX)
+                maxX = rx;
+            if (ry < minY)
+                minY = ry;
+            if (ry > maxY)
+                maxY = ry;
+        }
+        const pad = 8;
+        const span = Math.max(maxX - minX, maxY - minY, 1e-6);
+        const scale = (size - pad * 2) / span;
+        const ox = pad + (size - pad * 2 - (maxX - minX) * scale) / 2;
+        const oy = pad + (size - pad * 2 - (maxY - minY) * scale) / 2;
+        const px = (i) => ox + (pts[i][0] - minX) * scale;
+        // Flip Y so +Y points up on screen.
+        const py = (i) => size - (oy + (pts[i][1] - minY) * scale);
+        ctx.clearRect(0, 0, size, size);
+        ctx.strokeStyle = 'rgba(158,185,255,0.85)';
+        ctx.lineWidth = 1;
+        const edge = (a, b) => {
+            ctx.beginPath();
+            ctx.moveTo(px(a), py(a));
+            ctx.lineTo(px(b), py(b));
+            ctx.stroke();
+        };
+        const tris = indices && indices.length ? indices.length : n;
+        for (let i = 0; i + 2 < tris; i += 3) {
+            const a = indices && indices.length ? indices[i] : i;
+            const b = indices && indices.length ? indices[i + 1] : i + 1;
+            const c = indices && indices.length ? indices[i + 2] : i + 2;
+            edge(a, b);
+            edge(b, c);
+            edge(c, a);
+        }
+    }, [positions, indices, size]);
+    return (_jsx("canvas", { ref: canvasRef, width: size, height: size, style: { width: size, height: size, border: '1px solid #2b3761', borderRadius: 6, background: '#0c1330' } }));
+}
+export function RendererModule({ binding, textureOptions, geometryOptions, resolveTexture, resolveGeometry, }) {
+    const system = binding.system;
+    const currentTextureUrl = system.texture?.url ?? '';
+    const [promptingTextureUrl, setPromptingTextureUrl] = useState(false);
+    return (_jsxs(ModuleSection, { title: "Renderer", children: [_jsx(Row, { label: "Render mode", children: _jsx(SelectField, { value: system.renderMode, options: [
+                        { value: RenderMode.BillBoard, label: 'Billboard' },
+                        { value: RenderMode.StretchedBillBoard, label: 'Stretched billboard' },
+                        { value: RenderMode.HorizontalBillBoard, label: 'Horizontal billboard' },
+                        { value: RenderMode.VerticalBillBoard, label: 'Vertical billboard' },
+                        { value: RenderMode.Trail, label: 'Trail' },
+                        { value: RenderMode.Mesh, label: 'Mesh' },
+                    ], onChange: (mode) => binding.apply((s) => (s.renderMode = mode)) }) }), system.renderMode === RenderMode.Trail && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Trail length", children: _jsx(NumberField, { value: readScalar(system.rendererEmitterSettings.startLength).value, min: 1, step: 1, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.startLength = new ConstantValue(Math.round(v));
+                            }) }) }), _jsx(Row, { label: "Follow origin", children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings.followLocalOrigin, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.followLocalOrigin = v;
+                            }) }) })] })), system.renderMode === RenderMode.StretchedBillBoard && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Speed factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.speedFactor ?? 0, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.speedFactor = v)) }) }), _jsx(Row, { label: "Length factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.lengthFactor ?? 2, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.lengthFactor = v)) }) })] })), system.renderMode === RenderMode.Mesh &&
+                (() => {
+                    const preset = detectGeometryPreset(system.instancingGeometry);
+                    const vertexCount = system.instancingGeometry.length / 3;
+                    const triangleCount = (system.getRendererSettings().instancingIndices?.length ?? 0) / 3;
+                    const hostGeometry = geometryOptions ?? [];
+                    const applyGeometry = (g) => binding.apply((s) => {
+                        const settings = s.getRendererSettings();
+                        settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined);
+                        settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined);
+                        settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined);
+                        s.instancingGeometry = new Float32Array(g.positions);
+                    });
+                    return (_jsx(Row, { label: "Geometry", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(SelectField, { value: preset, options: [
+                                        ...(preset === 'custom' ? [{ value: 'custom', label: 'Custom (imported)' }] : []),
+                                        { value: 'quad', label: 'Quad' },
+                                        { value: 'cube', label: 'Cube' },
+                                        ...hostGeometry.map((g, i) => ({ value: `host:${i}`, label: g.label })),
+                                        ...(resolveGeometry ? [{ value: '__file', label: 'Load from file…' }] : []),
+                                    ], onChange: (next) => {
+                                        if (next === 'custom') {
+                                            return;
+                                        }
+                                        if (next === '__file') {
+                                            const input = document.createElement('input');
+                                            input.type = 'file';
+                                            input.accept = '.glb,.gltf,model/gltf-binary,model/gltf+json';
+                                            input.onchange = () => {
+                                                const file = input.files?.[0];
+                                                if (file) {
+                                                    resolveGeometry(file).then(applyGeometry);
+                                                }
+                                            };
+                                            input.click();
+                                            return;
+                                        }
+                                        if (next.startsWith('host:')) {
+                                            applyGeometry(hostGeometry[Number(next.slice(5))]);
+                                            return;
+                                        }
+                                        binding.apply((s) => {
+                                            const settings = s.getRendererSettings();
+                                            if (next === 'cube') {
+                                                settings.instancingIndices = MESH_CUBE_INDICES;
+                                                settings.instancingUVs = undefined;
+                                                settings.instancingNormals = undefined;
+                                                s.instancingGeometry = MESH_CUBE_POSITIONS;
+                                            }
+                                            else {
+                                                settings.instancingIndices = MESH_QUAD_INDICES;
+                                                settings.instancingUVs = MESH_QUAD_UVS;
+                                                s.instancingGeometry = MESH_QUAD_POSITIONS;
+                                            }
+                                        });
+                                    } }), _jsx(MeshPreview, { positions: system.instancingGeometry, indices: system.getRendererSettings().instancingIndices }), preset === 'custom' && (_jsxs("span", { style: { fontSize: 10.5, color: '#9eb9ff' }, children: [vertexCount, " verts / ", triangleCount, " tris \u2014 picking a preset replaces this mesh"] }))] }) }));
+                })(), _jsx("div", { style: {
+                    marginTop: 10,
+                    marginBottom: 2,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: '#7c8db5',
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.4,
+                }, children: "Material" }), system.material != null && (_jsxs("div", { style: { fontSize: 10.5, color: '#9eb9ff', marginBottom: 2 }, children: ["Imported material: ", system.material.name ?? 'unnamed', " \u2014 settings below were derived from it"] })), _jsx(Row, { label: "Blend mode", children: _jsx(SelectField, { value: system.blending, options: [
+                        { value: 1, label: 'Additive' },
+                        { value: 2, label: 'Alpha blend' },
+                        { value: 3, label: 'Subtract' },
+                        { value: 4, label: 'Multiply' },
+                    ], onChange: (blend) => binding.apply((s) => (s.blending = blend)) }) }), _jsx(Row, { label: "Transparent", children: _jsx(CheckboxField, { value: !!system.getRendererSettings().materialTransparent, onChange: (v) => binding.apply((s) => {
+                        s.getRendererSettings().materialTransparent = v;
+                        s.neededToUpdateRender = true;
+                    }) }) }), resolveTexture && (_jsxs(Row, { label: "Texture", children: [_jsx(SelectField, { value: !currentTextureUrl
+                            ? '__none'
+                            : (textureOptions ?? []).some((o) => o.url === currentTextureUrl)
+                                ? currentTextureUrl
+                                : '__current', options: [
+                            { value: '__none', label: '(none)' },
+                            ...(currentTextureUrl && !(textureOptions ?? []).some((o) => o.url === currentTextureUrl)
+                                ? [{ value: '__current', label: `(current) ${currentTextureUrl.slice(-24)}` }]
+                                : []),
+                            ...(textureOptions ?? []).map((o) => ({ value: o.url, label: o.label })),
+                            { value: '__url', label: 'Custom URL…' },
+                            { value: '__file', label: 'Load from file…' },
+                        ], onChange: (url) => {
+                            if (url === '__current') {
+                                return;
+                            }
+                            if (url === '__none') {
+                                binding.apply((s) => (s.texture = null));
+                                return;
+                            }
+                            if (url === '__url') {
+                                setPromptingTextureUrl(true);
+                                return;
+                            }
+                            if (url === '__file') {
+                                const input = document.createElement('input');
+                                input.type = 'file';
+                                input.accept = 'image/*';
+                                input.onchange = () => {
+                                    const file = input.files?.[0];
+                                    if (!file) {
+                                        return;
+                                    }
+                                    // Read as a data URI so the texture survives Export/Save/reimport;
+                                    // an object URL (blob:) would be dead after a reload.
+                                    const reader = new FileReader();
+                                    reader.onload = () => {
+                                        binding.apply((s) => (s.texture = resolveTexture(reader.result)));
+                                    };
+                                    reader.readAsDataURL(file);
+                                };
+                                input.click();
+                                return;
+                            }
+                            binding.apply((s) => (s.texture = resolveTexture(url)));
+                        } }), promptingTextureUrl && (_jsx(PromptDialog, { title: "Texture URL", defaultValue: currentTextureUrl, placeholder: "https://\u2026", onSubmit: (url) => {
+                            binding.apply((s) => (s.texture = resolveTexture(url)));
+                            setPromptingTextureUrl(false);
+                        }, onCancel: () => setPromptingTextureUrl(false) })), currentTextureUrl && (_jsx("img", { src: currentTextureUrl, alt: "texture preview", style: {
+                            width: 64,
+                            height: 64,
+                            marginTop: 6,
+                            objectFit: 'contain',
+                            borderRadius: 6,
+                            border: '1px solid #2b3761',
+                            // Checkerboard so texture transparency is visible.
+                            background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
+                        } }))] })), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) })), _jsx(Row, { label: "Alpha test", children: _jsx(NumberField, { value: system.getRendererSettings().materialAlphaTest ?? 0, min: 0, step: 0.05, onChange: (v) => binding.apply((s) => {
+                        s.getRendererSettings().materialAlphaTest = Math.min(1, v);
+                        s.neededToUpdateRender = true;
+                    }) }) }), _jsx(Row, { label: "Depth write", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthWrite, onChange: (v) => binding.apply((s) => {
+                        s.getRendererSettings().materialDepthWrite = v;
+                        s.neededToUpdateRender = true;
+                    }) }) }), _jsx(Row, { label: "Depth test", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthTest, onChange: (v) => binding.apply((s) => {
+                        s.getRendererSettings().materialDepthTest = v;
+                        s.neededToUpdateRender = true;
+                    }) }) })] }));
+}
+function removeBehavior(system, type) {
+    const behaviors = system.behaviors;
+    for (let i = behaviors.length - 1; i >= 0; i--) {
+        if (behaviors[i].type === type) {
+            behaviors.splice(i, 1);
+        }
+    }
+}

package/dist/react/theme.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react';
+export declare const theme: {
+    panelBg: string;
+    sectionBg: string;
+    border: string;
+    borderActive: string;
+    text: string;
+    textDim: string;
+    accent: string;
+    inputBg: string;
+    curveStroke: string;
+    font: string;
+};
+export declare const inputStyle: CSSProperties;
+export declare const rowStyle: CSSProperties;
+export declare const labelStyle: CSSProperties;
+export declare const buttonStyle: CSSProperties;
+/**
+ * Two hover conventions, applied via className (inline `style` can't express `:hover`):
+ * - `qe-hover` — brightens elements that already have a solid inline background/border
+ *   (buttons, icon buttons, bars, gradient/curve handles, module headers).
+ * - `qe-hover-bg` — adds a background tint for elements left transparent by default (timeline
+ *   rows), since brightening transparent does nothing. Must not be combined with an inline
+ *   `background` on the same element or the tint would need `!important` to show through.
+ */
+export declare const globalEditorStyles: string;

package/dist/react/theme.js

@@ -0,0 +1,78 @@
+export const theme = {
+    panelBg: 'linear-gradient(180deg, rgba(12, 18, 38, 0.92), rgba(6, 10, 22, 0.94))',
+    sectionBg: 'rgba(10, 16, 34, 0.6)',
+    border: '#2a365f',
+    borderActive: '#4f6fbe',
+    text: '#eef3ff',
+    textDim: '#b7c6ea',
+    accent: '#9eb9ff',
+    inputBg: 'rgba(7, 11, 22, 0.82)',
+    curveStroke: '#78a5ff',
+    font: 'Inter, Segoe UI, Roboto, sans-serif',
+};
+export const inputStyle = {
+    background: theme.inputBg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: 8,
+    color: theme.text,
+    fontSize: 12.5,
+    padding: '5px 8px',
+    outline: 'none',
+    width: '100%',
+    boxSizing: 'border-box',
+    fontFamily: theme.font,
+};
+export const rowStyle = {
+    display: 'grid',
+    gridTemplateColumns: '110px 1fr',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 6,
+};
+export const labelStyle = {
+    color: theme.textDim,
+    fontSize: 12,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+};
+export const buttonStyle = {
+    border: `1px solid #4563ad`,
+    background: 'rgba(28, 48, 98, 0.55)',
+    color: '#d8e3ff',
+    padding: '6px 10px',
+    borderRadius: 8,
+    fontSize: 12.5,
+    cursor: 'pointer',
+    fontFamily: theme.font,
+};
+/**
+ * Two hover conventions, applied via className (inline `style` can't express `:hover`):
+ * - `qe-hover` — brightens elements that already have a solid inline background/border
+ *   (buttons, icon buttons, bars, gradient/curve handles, module headers).
+ * - `qe-hover-bg` — adds a background tint for elements left transparent by default (timeline
+ *   rows), since brightening transparent does nothing. Must not be combined with an inline
+ *   `background` on the same element or the tint would need `!important` to show through.
+ */
+export const globalEditorStyles = `
+.qe-hover, .qe-hover-bg {
+    transition: filter 0.12s ease, background 0.12s ease;
+}
+.qe-hover:hover:not(:disabled) {
+    filter: brightness(1.3);
+}
+.qe-hover:active:not(:disabled) {
+    filter: brightness(0.85);
+}
+.qe-hover:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.qe-hover-bg:hover {
+    background: rgba(255, 255, 255, 0.07);
+}
+select.qe-hover:hover, input.qe-hover:hover, select.qe-hover:focus, input.qe-hover:focus {
+    border-color: ${theme.borderActive};
+    filter: none;
+}
+`;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "babylon.quarks-editor",
+  "version": "0.17.7",
+  "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc -p tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Soullnik/babylon.quarks-standalone.git"
+  },
+  "keywords": [
+    "babylonjs",
+    "particles",
+    "vfx",
+    "editor",
+    "react",
+    "quarks"
+  ],
+  "author": "soullnik <soullnik96@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Soullnik/babylon.quarks-standalone/issues"
+  },
+  "homepage": "https://github.com/Soullnik/babylon.quarks-standalone#readme",
+  "peerDependencies": {
+    "@babylonjs/core": ">=9.0.0",
+    "@babylonjs/materials": ">=9.0.0",
+    "babylon.quarks": ">=0.17.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@babylonjs/materials": "9.6.2",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.0",
+    "typescript": "^5.9.3",
+    "react-dom": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}