babylon.quarks-editor 0.17.7

package/dist/react/ValueField.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
+import { CurveEditor } from './CurveEditor';
+import { NumberField, Row, SelectField } from './fields';
+/**
+ * Unity-like value field: Constant | Random Between Two Constants | Curve,
+ * bound to a quarks value generator.
+ */
+export function ValueField(props) {
+    const state = readScalar(props.generator);
+    const commit = (patch) => {
+        props.onChange(buildScalar({ ...state, ...patch }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: props.label, children: _jsx(SelectField, { value: state.mode, options: [
+                        { value: 'constant', label: 'Constant' },
+                        { value: 'random', label: 'Random between two' },
+                        { value: 'curve', label: 'Curve' },
+                    ], onChange: (mode) => commit({ mode }) }) }), state.mode === 'constant' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: state.value, min: props.min, onChange: (value) => commit({ value }) }) })), state.mode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx(NumberField, { value: state.max, min: props.min, onChange: (max) => commit({ max }) })] }) })), state.mode === 'curve' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(props.generator), maxValue: props.curveMax, onChange: (pieces) => props.onChange(buildCurve(pieces)) }) }))] }));
+}

package/dist/react/behaviorModules.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EffectBinding } from '../core/binding';
+interface ModuleProps {
+    binding: EffectBinding;
+}
+export declare function SpeedOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function LimitSpeedOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function ForceOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function VelocityOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function InheritVelocityModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function GravityModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function RotationOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function NoiseModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function TurbulenceModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function EmitDirectionModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function CollisionModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function ColorBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function SizeBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function RotationBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function OrbitOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function WidthOverTrailModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function TextureSheetModule({ binding }: ModuleProps): React.JSX.Element;
+export {};

package/dist/react/behaviorModules.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { ensureGroundResolver } from '../core/collision';
+import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, readGradientStops } from '../core/colors';
+import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
+import { GradientEditor } from './GradientEditor';
+import { CurveEditor } from './CurveEditor';
+import { ModuleSection } from './ModuleSection';
+import { NumberField, Row, SelectField } from './fields';
+import { ValueField } from './ValueField';
+function removeBehaviorOfType(behaviors, type) {
+    for (let i = behaviors.length - 1; i >= 0; i--) {
+        if (behaviors[i].type === type) {
+            behaviors.splice(i, 1);
+        }
+    }
+}
+/** Shared shell for modules backed by a single toggleable quarks behavior. */
+function BehaviorModule(props) {
+    const behavior = findBehavior(props.binding.system.behaviors, props.type);
+    return (_jsx(ModuleSection, { title: props.title, enabled: !!behavior, defaultOpen: false, onToggle: (enabled) => props.binding.apply((s) => {
+            removeBehaviorOfType(s.behaviors, props.type);
+            if (enabled) {
+                s.addBehavior(props.create());
+            }
+        }), children: behavior ? props.children(behavior) : null }));
+}
+export function SpeedOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Speed over Lifetime", type: "SpeedOverLife", create: () => new SpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.5, 0] })), children: (behavior) => (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.speed), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces))) }) })) }));
+}
+export function LimitSpeedOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Limit Speed over Lifetime", type: "LimitSpeedOverLife", create: () => new LimitSpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [4, 2, 1, 1] }), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.speed), maxValue: 8, onChange: (pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces))) }) }), _jsx(Row, { label: "Dampen", children: _jsx(NumberField, { value: behavior.dampen, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.dampen = Math.min(1, v))) }) })] })) }));
+}
+export function ForceOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Force over Lifetime", type: "ForceOverLife", create: () => new ForceOverLife(new ConstantValue(0), new ConstantValue(2), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { label: "X", generator: behavior.x, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.x = g)) }), _jsx(ValueField, { label: "Y", generator: behavior.y, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.y = g)) }), _jsx(ValueField, { label: "Z", generator: behavior.z, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.z = g)) })] })) }));
+}
+export function VelocityOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Velocity over Lifetime", type: "VelocityOverLife", create: () => new VelocityOverLife(new ConstantValue(0), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Space", children: _jsx(SelectField, { value: behavior.space, options: [
+                            { value: 'local', label: 'Local' },
+                            { value: 'world', label: 'World' },
+                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) }), _jsx(ValueField, { label: "Linear X", generator: behavior.linearX, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearX = g)) }), _jsx(ValueField, { label: "Linear Y", generator: behavior.linearY, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearY = g)) }), _jsx(ValueField, { label: "Linear Z", generator: behavior.linearZ, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearZ = g)) }), _jsx(ValueField, { label: "Orbital X", generator: behavior.orbitalX, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalX = g)) }), _jsx(ValueField, { label: "Orbital Y", generator: behavior.orbitalY, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalY = g)) }), _jsx(ValueField, { label: "Orbital Z", generator: behavior.orbitalZ, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalZ = g)) })] })) }));
+}
+export function InheritVelocityModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Inherit Velocity", type: "InheritVelocity", create: () => new InheritVelocity(new ConstantValue(1), 'initial'), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Mode", children: _jsx(SelectField, { value: behavior.mode, options: [
+                            { value: 'initial', label: 'Initial' },
+                            { value: 'current', label: 'Current' },
+                        ], onChange: (v) => binding.apply(() => (behavior.mode = v)) }) }), _jsx(ValueField, { label: "Multiplier", generator: behavior.multiplier, curveMax: 2, onChange: (g) => binding.apply(() => (behavior.multiplier = g)) })] })) }));
+}
+export function GravityModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Gravity", type: "ApplyForce", create: () => new ApplyForce(new Vector3(0, -1, 0), new ConstantValue(9.81)), children: (behavior) => (_jsx(Row, { label: "Strength", children: _jsx(NumberField, { value: readScalar(behavior.magnitude).value, step: 0.5, onChange: (v) => binding.apply(() => (behavior.magnitude = new ConstantValue(v))) }) })) }));
+}
+export function RotationOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Rotation over Lifetime", type: "RotationOverLife", create: () => new RotationOverLife(new ConstantValue(Math.PI)), children: (behavior) => (_jsx(ValueField, { label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) })) }));
+}
+export function NoiseModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Noise", type: "Noise", create: () => new Noise(new ConstantValue(1), new ConstantValue(1), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { label: "Frequency", generator: behavior.frequency, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.frequency = g)) }), _jsx(ValueField, { label: "Strength", generator: behavior.power, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.power = g)) }), _jsx(ValueField, { label: "Position amount", generator: behavior.positionAmount, min: 0, curveMax: 2, onChange: (g) => binding.apply(() => (behavior.positionAmount = g)) }), _jsx(ValueField, { label: "Rotation amount", generator: behavior.rotationAmount, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.rotationAmount = g)) })] })) }));
+}
+/** Three numeric inputs for a Vector3 field, replacing the whole vector on any edit. */
+function Vector3Row(props) {
+    const set = (axis, n) => {
+        const next = props.value.clone();
+        next[axis] = n;
+        props.onChange(next);
+    };
+    return (_jsx(Row, { label: props.label, children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: props.value.x, min: props.min, step: props.step, onChange: (n) => set('x', n) }), _jsx(NumberField, { value: props.value.y, min: props.min, step: props.step, onChange: (n) => set('y', n) }), _jsx(NumberField, { value: props.value.z, min: props.min, step: props.step, onChange: (n) => set('z', n) })] }) }));
+}
+export function TurbulenceModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Turbulence", type: "TurbulenceField", create: () => new TurbulenceField(new Vector3(1, 1, 1), 3, new Vector3(1, 1, 1), new Vector3(1, 1, 1)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Vector3Row, { label: "Scale", value: behavior.scale, min: 0.01, step: 0.1, onChange: (v) => binding.apply(() => (behavior.scale = v)) }), _jsx(Row, { label: "Octaves", children: _jsx(NumberField, { value: behavior.octaves, min: 1, step: 1, onChange: (v) => binding.apply(() => (behavior.octaves = Math.max(1, Math.round(v)))) }) }), _jsx(Vector3Row, { label: "Strength", value: behavior.velocityMultiplier, step: 0.5, onChange: (v) => binding.apply(() => (behavior.velocityMultiplier = v)) }), _jsx(Vector3Row, { label: "Time scale", value: behavior.timeScale, step: 0.1, onChange: (v) => binding.apply(() => (behavior.timeScale = v)) })] })) }));
+}
+export function EmitDirectionModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Randomize Direction", type: "ChangeEmitDirection", create: () => new ChangeEmitDirection(new IntervalValue(0, Math.PI / 6)), children: (behavior) => (_jsx(ValueField, { label: "Angle (rad)", generator: behavior.angle, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.angle = g)) })) }));
+}
+export function CollisionModule({ binding }) {
+    // Ensure the shared ground-plane resolver exists before any ApplyCollision is created,
+    // otherwise its update() would dereference an undefined resolver.
+    const resolver = ensureGroundResolver();
+    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(ensureGroundResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx(Row, { label: "Floor Y", children: _jsx(NumberField, { value: resolver.y, step: 0.1, onChange: (v) => binding.apply(() => (resolver.y = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Collides against a ground plane. Bounce is saved with the effect; Floor Y is an editor preview aid (a host can register its own colliders)." })] })) }));
+}
+/** Shared speed-range rows for the "by Speed" trio. */
+function SpeedRangeRows({ binding, behavior }) {
+    return (_jsx(Row, { label: "Speed range", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: behavior.speedRange.a, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(v, behavior.speedRange.b))) }), _jsx(NumberField, { value: behavior.speedRange.b, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(behavior.speedRange.a, v))) })] }) }));
+}
+export function ColorBySpeedModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Color by Speed", type: "ColorBySpeed", create: () => new ColorBySpeed(buildGradient(DEFAULT_GRADIENT_STOPS), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: behavior.color instanceof Gradient ? readGradientStops(behavior.color) : DEFAULT_GRADIENT_STOPS, onChange: (stops) => binding.apply(() => (behavior.color = buildGradient(stops))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+}
+export function SizeBySpeedModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Size by Speed", type: "SizeBySpeed", create: () => new SizeBySpeed(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [0.5, 0.8, 1.2, 1.5] }), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.size), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.size = buildCurve(pieces))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+}
+export function RotationBySpeedModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Rotation by Speed", type: "RotationBySpeed", create: () => new RotationBySpeed(new ConstantValue(Math.PI), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+}
+export function OrbitOverLifeModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Orbit over Lifetime", type: "OrbitOverLife", create: () => new OrbitOverLife(new ConstantValue(Math.PI), new Vector3(0, 1, 0)), children: (behavior) => (_jsx(ValueField, { label: "Orbit speed", generator: behavior.orbitSpeed, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitSpeed = g)) })) }));
+}
+export function WidthOverTrailModule({ binding }) {
+    return (_jsx(BehaviorModule, { binding: binding, title: "Width over Trail", type: "WidthOverLength", create: () => new WidthOverLength(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.4, 0] })), children: (behavior) => (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.width), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.width = buildCurve(pieces))) }) })) }));
+}
+export function TextureSheetModule({ binding }) {
+    const system = binding.system;
+    const frameBehavior = findBehavior(system.behaviors, 'FrameOverLife');
+    const tiles = Math.max(1, system.uTileCount * system.vTileCount);
+    const textureUrl = system.texture?.url;
+    const u = Math.max(1, system.uTileCount);
+    const v = Math.max(1, system.vTileCount);
+    // Start tile → cell (row-major, top-left origin — matches the shader's tile UV mapping).
+    const startIdx = Math.min(Math.max(0, Math.round(readScalar(system.startTileIndex).value)), tiles - 1);
+    const startCol = startIdx % u;
+    const startRow = Math.floor(startIdx / u);
+    return (_jsxs(ModuleSection, { title: "Texture Sheet Animation", defaultOpen: false, children: [textureUrl && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: { position: 'relative', width: 218, border: '1px solid #2b3761', borderRadius: 6, overflow: 'hidden' }, children: [_jsx("img", { src: textureUrl, alt: "texture atlas", style: { width: '100%', display: 'block' } }), _jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    pointerEvents: 'none',
+                                    backgroundImage: `repeating-linear-gradient(to right, rgba(158,185,255,0.55) 0 1px, transparent 1px calc(100% / ${u})),` +
+                                        `repeating-linear-gradient(to bottom, rgba(158,185,255,0.55) 0 1px, transparent 1px calc(100% / ${v}))`,
+                                } }), _jsx("div", { style: {
+                                    position: 'absolute',
+                                    pointerEvents: 'none',
+                                    left: `${(startCol * 100) / u}%`,
+                                    top: `${(startRow * 100) / v}%`,
+                                    width: `${100 / u}%`,
+                                    height: `${100 / v}%`,
+                                    boxSizing: 'border-box',
+                                    border: '2px solid #ffce6b',
+                                    background: 'rgba(255, 206, 107, 0.22)',
+                                }, children: _jsx("span", { style: {
+                                        position: 'absolute',
+                                        top: 1,
+                                        left: 2,
+                                        fontSize: 9,
+                                        fontWeight: 700,
+                                        color: '#ffce6b',
+                                        textShadow: '0 0 3px #000',
+                                    }, children: startIdx }) })] }), _jsxs("div", { style: { fontSize: 11, color: '#b7c6ea', marginTop: 3 }, children: [u, " \u00D7 ", v, " = ", tiles, " tiles; frame indices 0\u2013", tiles - 1, "; start tile", ' ', _jsx("span", { style: { color: '#ffce6b', fontWeight: 600 }, children: startIdx })] })] })), _jsx(Row, { label: "Tiles U", children: _jsx(NumberField, { value: system.uTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.uTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Tiles V", children: _jsx(NumberField, { value: system.vTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.vTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Blend tiles", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: system.blendTiles, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => (s.blendTiles = e.target.checked)) }) }), _jsx(Row, { label: "Start tile", children: _jsx(NumberField, { value: readScalar(system.startTileIndex).value, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.startTileIndex = new ConstantValue(Math.round(v)))) }) }), _jsx(Row, { label: "Animate frames", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: !!frameBehavior, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => {
+                        removeBehaviorOfType(s.behaviors, 'FrameOverLife');
+                        if (e.target.checked) {
+                            s.addBehavior(new FrameOverLife(buildScalar({ mode: 'curve', value: 0, min: 0, max: tiles - 1, curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1] })));
+                        }
+                    }) }) }), frameBehavior && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) }))] }));
+}

package/dist/react/fields.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare function Row(props: {
+    label: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Number input that keeps focus-friendly local text state and commits parsed values. */
+export declare function NumberField(props: {
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    min?: number;
+}): React.JSX.Element;
+export declare function CheckboxField(props: {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}): React.JSX.Element;
+export declare function SelectField<T extends string | number>(props: {
+    value: T;
+    options: Array<{
+        value: T;
+        label: string;
+    }>;
+    onChange: (value: T) => void;
+}): React.JSX.Element;

package/dist/react/fields.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { inputStyle, labelStyle, rowStyle } from './theme';
+export function Row(props) {
+    return (_jsxs("div", { style: rowStyle, children: [_jsx("span", { style: labelStyle, title: props.label, children: props.label }), props.children] }));
+}
+/** Number input that keeps focus-friendly local text state and commits parsed values. */
+export function NumberField(props) {
+    const [text, setText] = useState(String(round(props.value)));
+    useEffect(() => {
+        setText(String(round(props.value)));
+    }, [props.value]);
+    return (_jsx("input", { type: "number", className: "qe-hover", style: inputStyle, value: text, step: props.step ?? 0.1, min: props.min, onChange: (e) => {
+            setText(e.target.value);
+            const parsed = parseFloat(e.target.value);
+            if (!Number.isNaN(parsed)) {
+                props.onChange(props.min !== undefined ? Math.max(props.min, parsed) : parsed);
+            }
+        } }));
+}
+export function CheckboxField(props) {
+    return (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.value, onChange: (e) => props.onChange(e.target.checked), style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' } }));
+}
+export function SelectField(props) {
+    const numeric = typeof props.value === 'number';
+    return (_jsx("select", { className: "qe-hover", style: { ...inputStyle, cursor: 'pointer' }, value: String(props.value), onChange: (e) => props.onChange((numeric ? Number(e.target.value) : e.target.value)), children: props.options.map((o) => (_jsx("option", { value: String(o.value), children: o.label }, String(o.value)))) }));
+}
+function round(v) {
+    return Math.round(v * 1000) / 1000;
+}

package/dist/react/index.d.ts

@@ -0,0 +1,20 @@
+export { EffectEditor } from './EffectEditor';
+export type { EffectEditorProps } from './EffectEditor';
+export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+export type { TextureOption, GeometryOption, GeometryData } from './modules';
+export { SubEmittersModule } from './SubEmittersModule';
+export { TimelinePanel } from './TimelinePanel';
+export type { TimelinePanelProps, PlaybackState } from './TimelinePanel';
+export { TimelineTrackRow } from './TimelineTrackRow';
+export type { TimelineTrackRowProps } from './TimelineTrackRow';
+export { ModuleSection } from './ModuleSection';
+export { PromptDialog } from './PromptDialog';
+export type { PromptDialogProps } from './PromptDialog';
+export { CurveEditor } from './CurveEditor';
+export { GradientEditor } from './GradientEditor';
+export { ValueField } from './ValueField';
+export { Row, NumberField, CheckboxField, SelectField } from './fields';
+export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
+export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
+export type { EffectEditorHostProps, EffectEditorHostHandle } from './EffectEditorHost';

package/dist/react/index.js

@@ -0,0 +1,14 @@
+export { EffectEditor } from './EffectEditor';
+export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+export { SubEmittersModule } from './SubEmittersModule';
+export { TimelinePanel } from './TimelinePanel';
+export { TimelineTrackRow } from './TimelineTrackRow';
+export { ModuleSection } from './ModuleSection';
+export { PromptDialog } from './PromptDialog';
+export { CurveEditor } from './CurveEditor';
+export { GradientEditor } from './GradientEditor';
+export { ValueField } from './ValueField';
+export { Row, NumberField, CheckboxField, SelectField } from './fields';
+export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
+export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';

package/dist/react/modules.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { EffectBinding } from '../core/binding';
+interface ModuleProps {
+    binding: EffectBinding;
+}
+export declare function MainModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function EmissionModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function ShapeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function SizeOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export declare function ColorOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+export interface TextureOption {
+    label: string;
+    url: string;
+}
+/**
+ * A host-supplied mesh for the Mesh render mode (e.g. asset meshes from BabylonJS Editor),
+ * analogous to TextureOption. The host provides ready vertex buffers; selecting one copies
+ * them into the system's instancing geometry.
+ */
+export interface GeometryOption {
+    label: string;
+    positions: Float32Array | number[];
+    indices?: Uint32Array | number[];
+    uvs?: Float32Array | number[];
+    normals?: Float32Array | number[];
+}
+/** Vertex buffers a host loader (e.g. a GLB importer) returns for the Mesh render mode. */
+export type GeometryData = Omit<GeometryOption, 'label'>;
+export declare function RendererModule({ binding, textureOptions, geometryOptions, resolveTexture, resolveGeometry, }: ModuleProps & {
+    textureOptions?: TextureOption[];
+    geometryOptions?: GeometryOption[];
+    resolveTexture?: (url: string) => unknown;
+    resolveGeometry?: (file: File) => Promise<GeometryData>;
+}): React.JSX.Element;
+export {};