babylon.quarks-editor 0.27.0 → 0.29.0

package/dist/react/behaviorModules.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, Gradient, GravityForce, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, Gradient, GravityForce, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, Vector3Function, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
 import React from 'react';
 import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors.js';
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
-import { CurveEditor } from './CurveEditor.js';
+import { buildScalar, readScalar } from '../core/values.js';
+import { AxesCurveField } from './AxesCurveField.js';
 import { CheckboxField, NumberField, Row, SelectField } from './fields.js';
 import { GradientEditor } from './GradientEditor.js';
 import { iconStyle } from './icons.js';
+import { LifeCurveField } from './LifeCurveField.js';
 import { ModuleSection } from './ModuleSection.js';
 import { theme } from './theme.js';
 import { ValueField } from './ValueField.js';
@@ -28,12 +29,18 @@ function BehaviorModule(props) {
             }
         }), children: behavior ? props.children(behavior) : null }));
 }
+/** The Speed over Lifetime module (Unity's Speed Modifier): scales speed by a curve over the particle's life. */
 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))) }) })) }));
+    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(LifeCurveField, { generator: behavior.speed, maxValue: 2, onChange: (curve) => binding.apply(() => (behavior.speed = curve)) }) })) }));
 }
+/** The Limit Speed over Lifetime module (Unity's Limit Velocity over Lifetime): caps speed by a curve, with dampening. */
 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))) }) })] })) }));
+    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(AxesCurveField, { generator: behavior.speed, maxValue: 8, onChange: (speed) => binding.apply(() => (behavior.speed = speed)) }) }), behavior.speed instanceof Vector3Function && (_jsx(Row, { label: "Space", hint: "The axes each limit is measured along: the emitter's or the world's.", children: _jsx(SelectField, { value: behavior.space, options: [
+                            { value: 'local', label: 'Local' },
+                            { value: 'world', label: 'World' },
+                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) })), _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))) }) })] })) }));
 }
+/** The Force over Lifetime module (Unity's Force over Lifetime): a constant push per axis. */
 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(Row, { label: "Space", children: _jsx(SelectField, { value: behavior.space, options: [
                             { value: 'world', label: 'World' },
@@ -56,12 +63,14 @@ export function InheritVelocityModule({ binding }) {
 export function AttractorModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Attractor", type: "GravityForce", create: () => new GravityForce(new Vector3(0, 0, 0), 1), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Center", hintKey: "attractor.center", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: behavior.center[axis], step: 0.1, onChange: (v) => binding.apply(() => (behavior.center[axis] = v)) }, axis))) }) }), _jsx(Row, { label: "Strength", hintKey: "attractor.magnitude", children: _jsx(NumberField, { value: behavior.magnitude, step: 0.1, onChange: (v) => binding.apply(() => (behavior.magnitude = v)) }) })] })) }));
 }
+/** The Gravity module: pulls particles towards a point. */
 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) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Strength", hintKey: "gravity.strength", children: _jsx(NumberField, { value: readScalar(behavior.magnitude).value, step: 0.5, onChange: (v) => binding.apply(() => (behavior.magnitude = new ConstantValue(v))) }) }), _jsx(Row, { label: "Space", children: _jsx(SelectField, { value: behavior.space, options: [
                             { value: 'world', label: 'World' },
                             { value: 'local', label: 'Local' },
                         ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) })] })) }));
 }
+/** The Rotation over Lifetime module (Unity's Rotation over Lifetime): spin rate over the particle's life. */
 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, { hintKey: "rotationOverLife.velocity", label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) })) }));
 }
@@ -137,6 +146,7 @@ export function SequencesModule({ binding, textureOptions }) {
                                         }, title: "Remove sequence", onClick: () => binding.apply(() => behavior.sequencers.splice(index, 1)), children: _jsx(XMarkIcon, { style: iconStyle(13) }) })] }), _jsx(Row, { label: "Time from / to (s)", children: pair(range.a, range.b, (v) => binding.apply(() => (range.a = v)), (v) => binding.apply(() => (range.b = v)), 0.1) }), texture.locations !== undefined && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Scale X / Y", children: pair(texture.scaleX, texture.scaleY, (v) => binding.apply(() => (texture.scaleX = v)), (v) => binding.apply(() => (texture.scaleY = v)), 0.01) }), _jsx(Vector3Row, { label: "Position", value: texture.position, step: 0.1, onChange: (v) => binding.apply(() => texture.position.copy(v)) })] }))] }, index));
                 }), _jsx(Row, { label: "Image", children: textureOptions && textureOptions.length > 0 ? (_jsx(SelectField, { value: imageUrl, options: textureOptions.map((option) => ({ value: option.url, label: option.label })), onChange: (url) => setImageUrl(url) })) : (_jsx("input", { className: "qe-hover", style: { flex: 1, minWidth: 0, fontSize: 12 }, placeholder: "Image URL", value: imageUrl, onChange: (event) => setImageUrl(event.target.value) })) }), _jsx(Row, { label: "Alpha threshold", children: _jsx(NumberField, { value: threshold, min: 0, step: 0.05, onChange: (v) => setThreshold(Math.min(1, v)) }) }), _jsxs("button", { className: "qe-hover", style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 6, fontSize: 12 }, onClick: () => void addFromImage(behavior), children: [_jsx(PlusIcon, { style: iconStyle(13) }), "Add sequence from image"] }), status && _jsx("p", { style: { margin: '4px 0 0', color: theme.textDim, fontSize: 11.5 }, children: status })] })) }));
 }
+/** The Noise module (Unity's Noise): moves and turns particles by a noise field. */
 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, { hintKey: "noise.frequency", label: "Frequency", generator: behavior.frequency, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.frequency = g)) }), _jsx(ValueField, { hintKey: "noise.strength", 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)) }), _jsx(ValueField, { label: "Scroll speed", generator: behavior.scrollSpeed, curveMax: 5, onChange: (g) => binding.apply(() => (behavior.scrollSpeed = g)) }), _jsx(Row, { label: "Remap", children: _jsx(CheckboxField, { value: behavior.remap !== undefined, onChange: (v) => binding.apply(() => (behavior.remap = v
                             ? new PiecewiseBezier([[new Bezier(-1, -1 / 3, 1 / 3, 1), 0]])
@@ -151,6 +161,7 @@ function Vector3Row(props) {
     };
     return (_jsx(Row, { label: props.label, hintKey: props.hintKey, 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) })] }) }));
 }
+/** The Turbulence module: a curl noise force field. */
 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, { hintKey: "turbulence.scale", 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, { hintKey: "turbulence.strength", 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)) }), _jsx(Row, { label: "Seed", children: _jsx(NumberField, { value: behavior.seed, step: 1, onChange: (v) => binding.apply(() => {
                             const seed = Math.round(v);
@@ -161,9 +172,11 @@ export function TurbulenceModule({ binding }) {
                             behavior.timeOffset.copy(next.initialOffset);
                         }) }) })] })) }));
 }
+/** The Randomize Direction module: tilts each particle's start direction by a random angle. */
 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)) })) }));
+    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, curve: false, min: 0, onChange: (g) => binding.apply(() => (behavior.angle = g)) })) }));
 }
+/** The Collision module (Unity's Collision): particles bounce off or die on a ground plane. */
 export function CollisionModule({ binding }) {
     // Like Unity: Collision stores bounce only. Colliders are host-provided via
     // setPhysicsResolver, asked when a particle is tested — the editor never invents a ground plane.
@@ -173,28 +186,34 @@ export function CollisionModule({ binding }) {
 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))) })] }) }));
 }
+/** The Color by Speed module (Unity's Color by Speed): a gradient over a speed range. */
 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 })] })) }));
 }
+/** The Size by Speed module (Unity's Size by Speed): size over a speed range. */
 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 })] })) }));
+    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(AxesCurveField, { generator: behavior.size, maxValue: 2, onChange: (size) => binding.apply(() => (behavior.size = size)) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
 }
+/** The Rotation by Speed module (Unity's Rotation by Speed): spin rate over a speed range. */
 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, { hintKey: "rotationBySpeed.velocity", label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
 }
+/** The Orbit over Lifetime module (Unity's Velocity over Lifetime orbital): turns particles about an axis. */
 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)) })) }));
 }
+/** The Width over Trail module (Unity's Trails width over trail): a trail's width along its length. */
 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) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.width), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.width = buildCurve(pieces))) }) }), _jsx(Row, { label: "Absolute width", children: _jsx(CheckboxField, { value: behavior.absolute, onChange: (v) => binding.apply(() => (behavior.absolute = v)) }) })] })) }));
+    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) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(LifeCurveField, { generator: behavior.width, maxValue: 2, onChange: (curve) => binding.apply(() => (behavior.width = curve)) }) }), _jsx(Row, { label: "Absolute width", children: _jsx(CheckboxField, { value: behavior.absolute, onChange: (v) => binding.apply(() => (behavior.absolute = v)) }) })] })) }));
 }
 /** How many of the first frames a start-frame generator picks from: its exclusive upper bound. */
 function startFrameCount(startFrame) {
     const state = readScalar(startFrame);
     return Math.round(state.mode === 'random' ? state.max : state.value);
 }
+/** The Texture Sheet Animation module (Unity's Texture Sheet Animation): plays the sheet's frames by life or by frame rate. */
 export function TextureSheetModule({ binding }) {
     const system = binding.system;
     const frameBehavior = findBehavior(system.behaviors, 'FrameOverLife');
@@ -261,5 +280,5 @@ export function TextureSheetModule({ binding }) {
                                     if (v && frameBehavior.frameCount <= 0) {
                                         frameBehavior.frameCount = tiles;
                                     }
-                                }) }), frameBehavior.startFrame && (_jsx(NumberField, { value: startFrameCount(frameBehavior.startFrame), min: 1, max: tiles, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.startFrame = new IntervalValue(0, Math.max(1, Math.round(v))))) }))] }), _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))) }) })] }))] }));
+                                }) }), frameBehavior.startFrame && (_jsx(NumberField, { value: startFrameCount(frameBehavior.startFrame), min: 1, max: tiles, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.startFrame = new IntervalValue(0, Math.max(1, Math.round(v))))) }))] }), _jsx("div", { style: { marginTop: 6 }, children: _jsx(LifeCurveField, { generator: frameBehavior.frame, maxValue: Math.max(1, tiles - 1), onChange: (curve) => binding.apply(() => (frameBehavior.frame = curve)) }) })] }))] }));
 }

package/dist/react/fields.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+/** An inspector row: a label, with an optional hint, and its controls. */
 export declare function Row(props: {
     label: string;
     hint?: string;
@@ -13,15 +14,22 @@ export declare function NumberField(props: {
     min?: number;
     max?: number;
 }): React.JSX.Element;
+/** A checkbox bound to a boolean. */
 export declare function CheckboxField(props: {
     value: boolean;
     onChange: (value: boolean) => void;
 }): React.JSX.Element;
+/** A select bound to a value, from a list of options. */
 export declare function SelectField<T extends string | number>(props: {
+    /** The selected value. */
     value: T;
+    /** The options, in menu order. */
     options: Array<{
+        /** The option's value. */
         value: T;
+        /** Its text. */
         label: string;
     }>;
+    /** Receives the picked value, a number when the values are numbers. */
     onChange: (value: T) => void;
 }): React.JSX.Element;

package/dist/react/fields.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { InspectorLabel } from './InspectorLabel.js';
 import { inputStyle, rowStyle } from './theme.js';
+/** An inspector row: a label, with an optional hint, and its controls. */
 export function Row(props) {
     return (_jsxs("div", { style: rowStyle, children: [_jsx(InspectorLabel, { label: props.label, hint: props.hint, hintKey: props.hintKey }), props.children] }));
 }
@@ -27,9 +28,11 @@ export function NumberField(props) {
             }
         } }));
 }
+/** A checkbox bound to a boolean. */
 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' } }));
 }
+/** A select bound to a value, from a list of options. */
 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)))) }));

package/dist/react/host/BottomDocks.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type AssetsPanelProps } from '../AssetsPanel.js';
+/** Props of {@link AssetsDrawer}. */
+export interface AssetsDrawerProps {
+    /** The drawer is shown. */
+    open: boolean;
+    /** The drawer is docked above the timeline instead of floating over the viewport. */
+    pinned: boolean;
+    /** Pin or unpin it (it stays open). */
+    onTogglePin(): void;
+    /** Close and unpin it. */
+    onClose(): void;
+    /** The Assets browser inside. */
+    panel: AssetsPanelProps;
+}
+/** The Assets browser, floating over the viewport or pinned above the timeline. */
+export declare function AssetsDrawer(props: AssetsDrawerProps): React.ReactElement;
+/** Props of {@link TimelineDock}. */
+export interface TimelineDockProps {
+    /** The timeline is collapsed to its header. */
+    collapsed: boolean;
+    /** Collapse or expand it. */
+    onToggleCollapsed(): void;
+    /** Name of the focused effect, if any. */
+    effectName?: string;
+    /** Assets in the project, counted on the Assets button. */
+    assetCount: number;
+    /** The Assets button shows as switched on. */
+    assetsActive: boolean;
+    /** The Assets button. */
+    onToggleAssets(): void;
+    /** The timeline, or `null` when nothing is focused. */
+    children: React.ReactNode;
+}
+/** The bottom dock: the focused effect's timeline, and the Assets button. */
+export declare function TimelineDock(props: TimelineDockProps): React.ReactElement;

package/dist/react/host/BottomDocks.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, MapPinIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { AssetsPanel } from '../AssetsPanel.js';
+import { iconStyle } from '../icons.js';
+import { buttonStyle, theme } from '../theme.js';
+import { activeSquareButtonStyle, dockIconButtonStyle, dockTitleStyle, DRAWER_HEIGHT, TIMELINE_HEIGHT, } from './hostStyles.js';
+/** The Assets browser, floating over the viewport or pinned above the timeline. */
+export function AssetsDrawer(props) {
+    const { open, pinned } = props;
+    return (_jsxs("div", { "aria-hidden": !open && !pinned, style: {
+            height: DRAWER_HEIGHT,
+            display: 'flex',
+            flexDirection: 'column',
+            background: theme.panelBg,
+            borderTop: `1px solid ${theme.border}`,
+            ...(pinned
+                ? { flexShrink: 0 }
+                : {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 20,
+                    background: '#0a0f20',
+                    boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.5)',
+                    transform: open ? 'none' : 'translateY(100%)',
+                    opacity: open ? 1 : 0,
+                    pointerEvents: open ? 'auto' : 'none',
+                    transition: 'transform 0.18s ease, opacity 0.18s ease',
+                }),
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '4px 6px 4px 12px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [_jsx("span", { style: dockTitleStyle, children: "Assets" }), _jsx("span", { style: { fontSize: 11, color: theme.textDim }, children: "Ctrl+Space" }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "qe-hover", title: pinned ? 'Unpin — float over the viewport again' : 'Pin — keep it docked above the timeline', style: { ...dockIconButtonStyle, ...(pinned ? activeSquareButtonStyle : {}) }, onClick: props.onTogglePin, children: _jsx(MapPinIcon, { style: iconStyle(13) }) }), _jsx("button", { type: "button", className: "qe-hover", title: "Close (Esc)", style: dockIconButtonStyle, onClick: props.onClose, children: _jsx(XMarkIcon, { style: iconStyle(13) }) })] }), _jsx(AssetsPanel, { ...props.panel })] }));
+}
+/** The bottom dock: the focused effect's timeline, and the Assets button. */
+export function TimelineDock(props) {
+    const { collapsed } = props;
+    return (_jsxs("div", { style: {
+            flexShrink: 0,
+            borderTop: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '3px 6px' }, children: [_jsx("button", { type: "button", className: "qe-hover-bg", title: collapsed ? 'Expand timeline' : 'Collapse timeline', style: { ...dockIconButtonStyle, border: 'none', background: 'transparent' }, onClick: props.onToggleCollapsed, children: collapsed ? _jsx(ChevronUpIcon, { style: iconStyle(13) }) : _jsx(ChevronDownIcon, { style: iconStyle(13) }) }), _jsx("span", { style: dockTitleStyle, children: "Timeline" }), props.effectName !== undefined && (_jsx("span", { style: {
+                            fontSize: 12,
+                            color: theme.textDim,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: props.effectName })), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { type: "button", className: "qe-hover", title: "Assets (Ctrl+Space)", style: {
+                            ...buttonStyle,
+                            padding: '3px 10px',
+                            ...(props.assetsActive ? activeSquareButtonStyle : {}),
+                        }, onClick: props.onToggleAssets, children: ["Assets", props.assetCount > 0 ? ` · ${props.assetCount}` : ''] })] }), _jsx("div", { style: {
+                    height: TIMELINE_HEIGHT,
+                    display: collapsed ? 'none' : 'flex',
+                    borderTop: `1px solid ${theme.border}`,
+                }, children: props.children ?? (_jsx("div", { style: { padding: '14px', fontSize: 12, color: theme.textDim }, children: "Select an effect in the Scene to see its timeline." })) })] }));
+}

package/dist/react/host/HostDialogs.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { EditorSession, PrefabInfo } from '../../core/editorSession.js';
+import type { SceneEntry } from '../../core/sceneEntries.js';
+/** Which prefab question is open: overwrite on save, save before leaving, or a new asset path. */
+export type PrefabDialog = 'overwrite' | 'exit' | 'saveAs' | null;
+/** The host's dialog and notice state, with its setters. */
+export interface HostDialogState {
+    /** Name of the project being opened, while it loads. */
+    loadingProject: string | null;
+    /** The short notice shown, if any. */
+    toast: string | null;
+    /** Entry being saved as a new asset. */
+    saveAsTarget: SceneEntry | null;
+    setSaveAsTarget(entry: SceneEntry | null): void;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab question. */
+    prefabDialog: PrefabDialog;
+    setPrefabDialog(dialog: PrefabDialog): void;
+    /** Asset waiting to replace an open prefab that has unsaved edits. */
+    prefabSwitch: {
+        id: number;
+        name: string;
+    } | null;
+    setPrefabSwitch(asset: {
+        id: number;
+        name: string;
+    } | null): void;
+    /** "Save changes to the scene?" before leaving the project. */
+    exitPrompt: boolean;
+    setExitPrompt(open: boolean): void;
+    /** The notice the user dismisses, if any. */
+    message: {
+        title: string;
+        message: string;
+    } | null;
+    setMessage(message: {
+        title: string;
+        message: string;
+    } | null): void;
+}
+/** Props of {@link HostDialogs}. */
+export interface HostDialogsProps extends HostDialogState {
+    /** The session the dialogs act on. */
+    session: EditorSession | null;
+    /** Leaves the project, once the scene is dealt with. */
+    onExitProject?: () => void;
+}
+/** The host's modal dialogs, the project loading screen and the toast. */
+export declare function HostDialogs(props: HostDialogsProps): React.ReactElement;

package/dist/react/host/HostDialogs.js

@@ -0,0 +1,113 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChoiceDialog } from '../ChoiceDialog.js';
+import { MessageDialog } from '../MessageDialog.js';
+import { PromptDialog } from '../PromptDialog.js';
+import { theme } from '../theme.js';
+/** The host's modal dialogs, the project loading screen and the toast. */
+export function HostDialogs(props) {
+    const { session, prefabInfo, prefabDialog, setPrefabDialog, prefabSwitch, setPrefabSwitch } = props;
+    return (_jsxs(_Fragment, { children: [props.loadingProject !== null && (_jsxs("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(7, 11, 22, 0.8)',
+                    zIndex: 900,
+                    color: theme.text,
+                    fontSize: 14,
+                }, children: ["Opening ", props.loadingProject, "\u2026"] })), props.toast && (_jsx("div", { role: "status", style: {
+                    position: 'fixed',
+                    top: 16,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 950,
+                    background: '#13204a',
+                    border: `1px solid ${theme.borderActive}`,
+                    borderRadius: 8,
+                    padding: '8px 14px',
+                    fontSize: 12.5,
+                    color: theme.text,
+                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                    pointerEvents: 'none',
+                }, children: props.toast })), props.saveAsTarget && (_jsx(PromptDialog, { title: "Save as new asset \u2014 Folder/Name", defaultValue: props.saveAsTarget.name, placeholder: "Fire/Big explosion", confirmLabel: "Save", onSubmit: (path) => {
+                    const entry = props.saveAsTarget;
+                    props.setSaveAsTarget(null);
+                    session?.saveEntryAsAsset(entry, path);
+                }, onCancel: () => props.setSaveAsTarget(null) })), prefabDialog === 'overwrite' && prefabInfo && (_jsx(ChoiceDialog, { title: `Overwrite prefab “${prefabInfo.name}”?`, message: (() => {
+                    const count = session?.prefabInstanceCount() ?? 0;
+                    return count > 0
+                        ? `The asset is replaced with your edits. The ${count} “${prefabInfo.name}” effect(s) already in the scene will not change.`
+                        : 'The asset is replaced with your edits. Effects already in the scene will not change.';
+                })(), actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    { label: 'Save as new…', onSelect: () => setPrefabDialog('saveAs') },
+                    {
+                        label: 'Overwrite',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.overwritePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabSwitch && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: `Before opening “${prefabSwitch.name}”. Saving overwrites the prefab asset; effects already in the scene will not change.`, actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabSwitch(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            session?.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            session?.overwritePrefab();
+                            session?.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                ], onCancel: () => setPrefabSwitch(null) })), prefabDialog === 'exit' && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: "Saving overwrites the prefab asset. Effects already in the scene will not change.", actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.closePrefab();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            session?.overwritePrefab();
+                            session?.closePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabDialog === 'saveAs' && prefabInfo && (_jsx(PromptDialog, { title: "Save prefab as new asset \u2014 Folder/Name", defaultValue: prefabInfo.path.replace(/\.json$/i, ''), confirmLabel: "Save", onSubmit: (path) => {
+                    setPrefabDialog(null);
+                    session?.savePrefabAsNew(path);
+                }, onCancel: () => setPrefabDialog(null) })), props.exitPrompt && (_jsx(ChoiceDialog, { title: "Save changes to the scene?", message: "The scene has changes that are not saved. Assets are already saved.", actions: [
+                    { label: 'Cancel', onSelect: () => props.setExitPrompt(false) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            props.setExitPrompt(false);
+                            props.onExitProject?.();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            props.setExitPrompt(false);
+                            void session?.saveScene().then((saved) => saved && props.onExitProject?.());
+                        },
+                    },
+                ], onCancel: () => props.setExitPrompt(false) })), props.message && (_jsx(MessageDialog, { title: props.message.title, message: props.message.message, onClose: () => props.setMessage(null) }))] }));
+}

package/dist/react/host/InspectorSidebar.d.ts

@@ -0,0 +1,32 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import type { ParticleSystem } from 'babylon.quarks';
+import React from 'react';
+import type { EffectBinding } from '../../core/binding.js';
+import { type EffectEditorProps } from '../EffectEditor.js';
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+export declare function exportEffectJSON(binding: EffectBinding, warn: (message: string) => void): string;
+/** Props of {@link InspectorSidebar}. */
+export interface InspectorSidebarProps extends Pick<EffectEditorProps, 'textureOptions' | 'geometryOptions' | 'resolveTexture' | 'resolveGeometry'> {
+    /** The focused effect, for the header and its actions. */
+    binding: EffectBinding | null;
+    /** The binding, system and node the inspector shows (they may lag a selection change). */
+    inspector: {
+        binding: EffectBinding;
+        system: ParticleSystem;
+        node: TransformNode;
+    } | null;
+    /** Header shown when the effect has no name. */
+    title?: string;
+    /** Called after the effect is renamed. */
+    onRenamed(name: string): void;
+    /** Shows a Save button that receives the effect's JSON. */
+    onSave?: (json: string) => void;
+    /** A short notice. */
+    toast(text: string): void;
+}
+/** The editor's right column: the effect's name, Export and Save, and the module inspector. */
+export declare function InspectorSidebar(props: InspectorSidebarProps): React.ReactElement;

package/dist/react/host/InspectorSidebar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { EffectEditor } from '../EffectEditor.js';
+import { PromptDialog } from '../PromptDialog.js';
+import { buttonStyle, theme } from '../theme.js';
+import { INSPECTOR_WIDTH } from './hostStyles.js';
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+export function exportEffectJSON(binding, warn) {
+    const json = binding.exportJSON('EditorEffect');
+    if (json.includes('"blob:')) {
+        warn('This effect references blob: textures, which will not load after a reload. Re-pick them from a hosted URL.');
+    }
+    return json;
+}
+/** The editor's right column: the effect's name, Export and Save, and the module inspector. */
+export function InspectorSidebar(props) {
+    const { binding, inspector, onSave } = props;
+    const [renaming, setRenaming] = useState(false);
+    return (_jsxs("aside", { style: {
+            width: INSPECTOR_WIDTH,
+            flexShrink: 0,
+            borderLeft: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            color: theme.textDim,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.4,
+                            marginBottom: 6,
+                        }, children: "Inspector" }), _jsx("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 && setRenaming(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renaming && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
+                            binding.apply(() => (binding.root.name = name));
+                            props.onRenamed(name);
+                            setRenaming(false);
+                        }, onCancel: () => setRenaming(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => {
+                                    if (!binding)
+                                        return;
+                                    const blob = new Blob([exportEffectJSON(binding, props.toast)], { type: 'application/json' });
+                                    const link = document.createElement('a');
+                                    link.href = URL.createObjectURL(blob);
+                                    link.download = `${binding.root.name || 'effect'}.json`;
+                                    link.click();
+                                    URL.revokeObjectURL(link.href);
+                                }, children: "Export" }), onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && onSave(exportEffectJSON(binding, props.toast)), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: inspector ? (_jsx(EffectEditor, { binding: inspector.binding, selectedSystem: inspector.system, gizmoTargetNode: inspector.node, gizmoTargetLabel: inspector.node.name || 'Node', textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] }));
+}

package/dist/react/host/SceneSidebar.d.ts

@@ -0,0 +1,53 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import React from 'react';
+import type { PrefabInfo } from '../../core/editorSession.js';
+import type { SceneEntry } from '../../core/sceneEntries.js';
+/** Props of {@link SceneSidebar}. */
+export interface SceneSidebarProps {
+    /** The open project, for its header; none in memory-only mode. */
+    projectName?: string;
+    /** Shows the back button in the project header. */
+    canExitProject: boolean;
+    /** The scene has unsaved changes. */
+    sceneDirty: boolean;
+    /** The project's scene is still loading. */
+    projectLoading: boolean;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab has unsaved edits. */
+    prefabDirty: boolean;
+    /** The scene's entries. */
+    entries: SceneEntry[];
+    /** The focused entry's root. */
+    focusedRoot: TransformNode | null;
+    /** Shown entries, by root `uniqueId`. */
+    visibleRootIds: ReadonlySet<number>;
+    /** The entry shown alone, if any. */
+    soloRootId: number | null;
+    /** The node selected in the focused effect. */
+    selectedNode: TransformNode | null;
+    /** Back to the projects list. */
+    onExitProject(): void;
+    /** Save (the scene, or the open prefab). */
+    onSave(): void;
+    /** Back from the prefab to the scene. */
+    onExitPrefab(): void;
+    /** Save the open prefab. */
+    onSavePrefab(): void;
+    /** Focus an entry. */
+    onFocus(entry: SceneEntry): void;
+    /** Show or hide an entry. */
+    onToggleVisible(entry: SceneEntry): void;
+    /** Show an entry alone. */
+    onToggleSolo(entry: SceneEntry): void;
+    /** Save an entry as a new asset. */
+    onSaveAsAsset(entry: SceneEntry): void;
+    /** Remove an entry. */
+    onDelete(entry: SceneEntry): void;
+    /** Add a default effect. */
+    onCreateDefault(): void;
+    /** Select a node, focusing its entry first when needed. */
+    onSelectNode(entry: SceneEntry | null, node: TransformNode): void;
+}
+/** The editor's left column: the project header, then the Scene list or the open prefab. */
+export declare function SceneSidebar(props: SceneSidebarProps): React.ReactElement;