babylon.quarks-editor 0.27.0 → 0.29.0

package/dist/react/EffectTreeView.d.ts

@@ -1,9 +1,12 @@
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
+/** Props of {@link EffectTreeView}. */
 export interface EffectTreeViewProps {
+    /** The effect's root. */
     root: TransformNode;
     /** Node shown in the inspector (and moved by the gizmo). */
     selectedNode: TransformNode | null;
+    /** Selects a group or emitter. */
     onSelect: (node: TransformNode) => void;
     /** Show the root itself as the first row (default: only its descendants). */
     includeRoot?: boolean;

package/dist/react/LifeCurveField.d.ts

@@ -0,0 +1,18 @@
+import { PiecewiseBezier, RandomBetweenCurves } from 'babylon.quarks';
+import React from 'react';
+import { AnyGenerator } from '../core/values.js';
+/** Props of a {@link LifeCurveField}. */
+export interface LifeCurveFieldProps {
+    /** The generator shown: one curve, two curves, or anything else, read as one curve. */
+    generator: AnyGenerator | undefined;
+    /** Top of the curve editors' value range. */
+    maxValue?: number;
+    /** Receives the edited curve or curves. */
+    onChange: (generator: PiecewiseBezier | RandomBetweenCurves) => void;
+}
+/**
+ * A setting that is a curve over the particle's life, or two with a "Two curves" switch (Unity's
+ * Random Between Two Curves): each particle then follows its own curve between the lower and the
+ * upper one. Every segment of both curves is kept through edits and switches.
+ */
+export declare function LifeCurveField(props: LifeCurveFieldProps): React.ReactElement;

package/dist/react/LifeCurveField.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IntervalValue, RandomBetweenCurves } from 'babylon.quarks';
+import { buildCurve, readPieces, withCurves } from '../core/values.js';
+import { CurveEditor } from './CurveEditor.js';
+import { CheckboxField, Row } from './fields.js';
+const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
+/**
+ * A setting that is a curve over the particle's life, or two with a "Two curves" switch (Unity's
+ * Random Between Two Curves): each particle then follows its own curve between the lower and the
+ * upper one. Every segment of both curves is kept through edits and switches.
+ */
+export function LifeCurveField(props) {
+    const { generator } = props;
+    // A random range shows as two flat curves, and an edit turns it into them.
+    const two = generator instanceof RandomBetweenCurves || generator instanceof IntervalValue;
+    const edit = (pieces, upper) => {
+        if (!two) {
+            props.onChange(buildCurve(pieces));
+            return;
+        }
+        const lower = upper ? buildCurve(readPieces(generator)) : buildCurve(pieces);
+        const higher = upper ? buildCurve(pieces) : buildCurve(readPieces(generator, true));
+        props.onChange(new RandomBetweenCurves(lower, higher));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Two curves", hint: "Random between two curves: each particle follows its own curve between them.", children: _jsx(CheckboxField, { value: two, onChange: (on) => props.onChange(withCurves(generator, on ? 'curves' : 'curve')) }) }), (two ? ['lower', 'upper'] : ['curve']).map((bound) => (_jsxs("div", { style: { marginTop: 6 }, children: [two && _jsx("span", { style: captionStyle, children: bound }), _jsx(CurveEditor, { pieces: readPieces(generator, bound === 'upper'), maxValue: props.maxValue, onChange: (pieces) => edit(pieces, bound === 'upper') })] }, bound)))] }));
+}

package/dist/react/MessageDialog.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
+/** Props of {@link MessageDialog}. */
 export interface MessageDialogProps {
+    /** The dialog's title. */
     title: string;
+    /** The message; line breaks are kept. */
     message: string;
+    /** The button's text. Default `OK`. */
     confirmLabel?: string;
+    /** Closes the dialog: the button, Enter, Escape or the backdrop. */
     onClose: () => void;
 }
 /** Modal for info and error messages — same chrome as PromptDialog, no text input. */

package/dist/react/ModuleSection.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
+import type { EffectBinding } from '../core/binding.js';
 /** Unity-style module foldout with an optional enable checkbox. */
+/** Props of every inspector module: the effect binding it edits, through `binding.apply`. */
+export interface ModuleProps {
+    /** The focused effect; the module edits `binding.system`. */
+    binding: EffectBinding;
+}
+/**
+ * An inspector module: a foldout with a title, a hint, and an enable checkbox when `onToggle` is
+ * given. Unity's Particle System inspector modules look the same way.
+ */
 export declare function ModuleSection(props: {
     title: string;
     hint?: string;

package/dist/react/ModuleSection.js

@@ -5,7 +5,10 @@ import { iconStyle } from './icons.js';
 import { getInspectorHint } from './inspectorHints.js';
 import { InspectorInfoIcon } from './InspectorInfoIcon.js';
 import { theme } from './theme.js';
-/** Unity-style module foldout with an optional enable checkbox. */
+/**
+ * An inspector module: a foldout with a title, a hint, and an enable checkbox when `onToggle` is
+ * given. Unity's Particle System inspector modules look the same way.
+ */
 export function ModuleSection(props) {
     const [open, setOpen] = useState(props.defaultOpen ?? true);
     const toggleable = props.onToggle !== undefined;

package/dist/react/ProjectsPage.d.ts

@@ -1,12 +1,18 @@
 import React from 'react';
 import { type ProjectMeta, type ProjectStore } from '../core/projectStore.js';
+/** Props of {@link ProjectsPage}. */
 export interface ProjectsPageProps {
+    /** Where the projects live. */
     store: ProjectStore;
+    /** Opens a project in the editor. */
     onOpen: (project: ProjectMeta) => void;
+    /** The page's heading. */
     title?: string;
     /** Optional link back to the page that hosts the editor (e.g. a gallery), shown above the title. */
     backLink?: {
+        /** Where the link goes. */
         href: string;
+        /** The link's text. */
         label: string;
     };
 }

package/dist/react/ProjectsPage.js

@@ -29,6 +29,15 @@ function StorageBar(props) {
                         background: theme.accent,
                     } }) }), _jsx("div", { style: { fontSize: 11.5, color: theme.textDim, lineHeight: 1.5 }, children: "Projects are saved in this browser only (IndexedDB). Clearing site data removes them, and Safari deletes data of sites not opened for 7 days \u2014 export projects you care about." })] }));
 }
+async function listProjects(store) {
+    try {
+        const [list, storage] = await Promise.all([store.listProjects(), store.estimate()]);
+        return { list, storage };
+    }
+    catch (err) {
+        return { error: err instanceof Error ? err.message : String(err) };
+    }
+}
 /** Start page: the projects saved in the store, plus storage usage. */
 export function ProjectsPage(props) {
     const { store, onOpen, title = 'Effect editor', backLink } = props;
@@ -37,20 +46,27 @@ export function ProjectsPage(props) {
     const [dialog, setDialog] = useState(null);
     const [menu, setMenu] = useState(null);
     const [error, setError] = useState(null);
-    const reload = useCallback(async () => {
-        try {
-            const [list, storage] = await Promise.all([store.listProjects(), store.estimate()]);
-            setProjects(list);
-            setEstimate(storage);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
+    const show = useCallback((listing) => {
+        if ('error' in listing) {
+            setError(listing.error);
             setProjects([]);
         }
-    }, [store]);
+        else {
+            setProjects(listing.list);
+            setEstimate(listing.storage);
+        }
+    }, []);
+    const reload = useCallback(async () => show(await listProjects(store)), [store, show]);
     useEffect(() => {
-        void reload();
-    }, [reload]);
+        let cancelled = false;
+        void listProjects(store).then((listing) => {
+            if (!cancelled)
+                show(listing);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [store, show]);
     const run = (action) => {
         setDialog(null);
         action()

package/dist/react/PromptDialog.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
+/** Props of {@link PromptDialog}. */
 export interface PromptDialogProps {
+    /** What to enter. */
     title: string;
+    /** The text the field starts with, selected. */
     defaultValue?: string;
+    /** Hint shown in the empty field. */
     placeholder?: string;
+    /** The confirm button's text. Default `OK`. */
     confirmLabel?: string;
     /** Rejects empty/whitespace-only input by default (matches the old prompt() behavior). */
     allowEmpty?: boolean;
+    /** Receives the entered text, trimmed. */
     onSubmit: (value: string) => void;
+    /** Escape, the backdrop, Cancel, or an empty submit when empty is not allowed. */
     onCancel: () => void;
 }
 /** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on

package/dist/react/ScenePanel.d.ts

@@ -1,20 +1,27 @@
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
 import type { SceneEntry } from '../core/sceneEntries.js';
+/** Props of {@link ScenePanel}. */
 export interface ScenePanelProps {
+    /** The effects in the scene, in list order. */
     entries: SceneEntry[];
     /** Effect shown in the inspector and timeline. */
     focusedRoot: TransformNode | null;
     /** Visible entries — they render and play with the stage transport. */
     visibleRootIds: ReadonlySet<number>;
+    /** Focuses an effect in the inspector and timeline. */
     onFocus: (entry: SceneEntry) => void;
+    /** Shows or hides an effect. */
     onToggleVisible: (entry: SceneEntry) => void;
     /** Root of the entry shown alone, or null. */
     soloRootId: number | null;
+    /** Shows an effect alone, or ends solo. */
     onToggleSolo: (entry: SceneEntry) => void;
+    /** Removes an effect from the scene. */
     onDelete: (entry: SceneEntry) => void;
     /** "Save as new asset…" in the row's right-click menu. */
     onSaveAsAsset?: (entry: SceneEntry) => void;
+    /** Adds a new default effect. */
     onCreateDefault: () => void;
     /** Node shown in the inspector; highlighted in the expanded effect trees. */
     selectedNode?: TransformNode | null;

package/dist/react/ScenePanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, SparklesIcon, TrashIcon, ViewfinderCircleIcon, } from '@heroicons/react/24/solid';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { buildEffectTree } from '../core/effectTree.js';
 import { ContextMenu } from './ContextMenu.js';
 import { EffectTreeView } from './EffectTreeView.js';
@@ -83,11 +83,13 @@ export function ScenePanel(props) {
     const [menu, setMenu] = useState(null);
     const [expanded, setExpanded] = useState(() => new Set());
     // The focused effect opens its tree, so its sub-emitters are one click away.
-    useEffect(() => {
-        if (focusedRoot) {
-            setExpanded((prev) => (prev.has(focusedRoot.uniqueId) ? prev : new Set(prev).add(focusedRoot.uniqueId)));
+    const [expandedFocus, setExpandedFocus] = useState(null);
+    if (focusedRoot !== expandedFocus) {
+        setExpandedFocus(focusedRoot);
+        if (focusedRoot && !expanded.has(focusedRoot.uniqueId)) {
+            setExpanded(new Set(expanded).add(focusedRoot.uniqueId));
         }
-    }, [focusedRoot]);
+    }
     const toggleExpanded = (entry) => setExpanded((prev) => {
         const next = new Set(prev);
         if (next.has(entry.root.uniqueId)) {

package/dist/react/TextureSelect.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
+import type { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
 import type { TextureOption } from './modules.js';
 /** The url a texture-like object was loaded from, or '' for none. */
 export declare function textureUrlOf(texture: unknown): string;
@@ -11,10 +11,10 @@ export declare function TextureSelect(props: {
     /** The slot's current texture (anything with a `url`), or null for none. */
     value: unknown;
     textureOptions?: TextureOption[];
-    /** Turns a URL or `data:` URI into the host's texture object; null when it cannot. */
-    loadTexture: (url: string) => unknown;
-    /** The host's texture object, assumed to be a Babylon texture, or null for none. */
-    onChange: (texture: BaseTexture | null) => void;
+    /** Turns a URL or `data:` URI into a texture; null or undefined when it cannot. */
+    loadTexture: (url: string) => Texture | null | undefined;
+    /** The picked texture, or null for none. */
+    onChange: (texture: Texture | null) => void;
     /** Label of the "none" entry. Default "(none)". */
     noneLabel?: string;
     /** Shows a thumbnail of the current texture under the select. Default false. */

package/dist/react/TimelinePanel.d.ts

@@ -5,18 +5,31 @@ import React from 'react';
 import type { EffectBinding } from '../core/binding.js';
 import { type PlaybackState } from '../core/playback.js';
 export type { PlaybackState } from '../core/playback.js';
+/** Props of {@link TimelinePanel}. */
 export interface TimelinePanelProps {
+    /** The focused effect, whose systems are the tracks. */
     binding: EffectBinding;
+    /** The node shown in the inspector; its track is highlighted. */
     selectedNode: TransformNode | null;
+    /** Selects a track's or group's node. */
     onSelectNode: (node: TransformNode | null) => void;
+    /** The preview scene, redrawn after a scrub. */
     scene: Scene;
+    /** The renderer the effect draws through, refreshed after a scrub. */
     renderer: BatchedRenderer;
+    /** Playback state shared with the host's render loop. */
     playbackRef: React.MutableRefObject<PlaybackState>;
+    /** The playhead line, moved every frame without a re-render. */
     playheadRef: React.RefObject<HTMLDivElement | null>;
+    /** The time and particle counter in the header, written by the host's render loop. */
     counterRef: React.RefObject<HTMLSpanElement | null>;
+    /** The stage is playing. */
     stagePlaying: boolean;
+    /** Plays or pauses the stage. */
     setStagePlaying: (playing: boolean) => void;
+    /** Playback speed, 1 for real time. */
     speed: number;
+    /** Sets the playback speed. */
     setSpeed: (speed: number) => void;
     /** False when the focused effect is hidden — it has nothing to play. */
     playbackEnabled?: boolean;

package/dist/react/TimelinePanel.js

@@ -38,10 +38,13 @@ export function TimelinePanel(props) {
     const bodyRef = useRef(null);
     const dragRef = useRef({ raf: null, pendingTime: null });
     const focusRootId = binding.root.uniqueId;
-    React.useEffect(() => {
+    // Another effect starts with every system shown and nothing selected.
+    const [shownBinding, setShownBinding] = useState(binding);
+    if (binding !== shownBinding) {
+        setShownBinding(binding);
         setHiddenSystems(new Set());
         setGroupSelection(new Set());
-    }, [binding]);
+    }
     const toggleGroupSelect = (node) => {
         setGroupSelection((prev) => {
             const next = new Set(prev);
@@ -145,18 +148,19 @@ export function TimelinePanel(props) {
         renderer,
     ]);
     const visibleRows = useMemo(() => {
+        const visible = [];
         let hideUntilDepth = null;
-        const visible = rows.filter((row) => {
+        for (const row of rows) {
             if (hideUntilDepth !== null) {
                 if (row.depth > hideUntilDepth)
-                    return false;
+                    continue;
                 hideUntilDepth = null;
             }
             if (row.kind === 'group' && collapsedGroups.has(row.node)) {
                 hideUntilDepth = row.depth;
             }
-            return true;
-        });
+            visible.push(row);
+        }
         return visible;
     }, [rows, collapsedGroups]);
     const toggleCollapse = (node) => {

package/dist/react/TimelineTrackRow.d.ts

@@ -2,21 +2,31 @@ import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
 import type { EffectBinding } from '../core/binding.js';
 import type { TimelineRow } from '../core/timeline.js';
+/** Props of {@link TimelineTrackRow}. */
 export interface TimelineTrackRowProps {
+    /** The group or track the row shows. */
     row: TimelineRow;
+    /** The focused effect, edited by the row's actions. */
     binding: EffectBinding;
+    /** The row's node is the one in the inspector. */
     selected: boolean;
+    /** Selects the row's node. */
     onSelectNode: (node: TransformNode | null) => void;
+    /** The ruler's scale, pixels per second. */
     pxPerSecond: number;
     /** Matches the ruler's left gutter so bars line up under the correct tick. */
     offsetPx: number;
+    /** A group row's children are hidden. */
     collapsed: boolean;
+    /** Collapses or expands a group row. */
     onToggleCollapse?: () => void;
     /** Preview-only visibility (toggles `system.emitter.visible`); lets you isolate one track. */
     hidden?: boolean;
+    /** Shows or hides the track in the preview. */
     onToggleVisible?: () => void;
     /** Membership in the "group selected rows together" set (unrelated to inspector selection). */
     groupSelected: boolean;
+    /** Adds the row to the set, or takes it out. */
     onToggleGroupSelect: () => void;
 }
 /** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */

package/dist/react/TransportBar.d.ts

@@ -3,16 +3,25 @@ import type { BatchedRenderer } from 'babylon.quarks';
 import React from 'react';
 import type { EffectBinding } from '../core/binding.js';
 import type { PlaybackState } from '../core/playback.js';
+/** Props of {@link TransportBar}. */
 export interface TransportBarProps {
+    /** The focused effect, which Restart and Step act on. */
     binding: EffectBinding | null;
+    /** The preview scene, redrawn after a restart. */
     scene: Scene;
+    /** The renderer the effects draw through. */
     renderer: BatchedRenderer;
+    /** Playback state shared with the host's render loop. */
     playbackRef: React.MutableRefObject<PlaybackState>;
     /** The host's render loop writes time and particle count here. */
     counterRef: React.RefObject<HTMLSpanElement | null>;
+    /** The stage is playing. */
     stagePlaying: boolean;
+    /** Plays or pauses the stage. */
     setStagePlaying: (playing: boolean) => void;
+    /** Playback speed, 1 for real time. */
     speed: number;
+    /** Sets the playback speed. */
     setSpeed: (speed: number) => void;
     /** False when the focused effect is hidden. */
     enabled: boolean;

package/dist/react/ValueField.d.ts

@@ -1,11 +1,39 @@
+import type { ValueGenerator } from 'babylon.quarks';
 import React from 'react';
-import { ScalarGenerator } from '../core/values.js';
-export declare function ValueField(props: {
+import { AnyGenerator, ScalarGenerator } from '../core/values.js';
+/** Props every {@link ValueField} takes. */
+interface ValueFieldBaseProps {
+    /** The row's label. */
     label: string;
+    /** Tooltip text of the label. */
     hint?: string;
+    /** Key into the inspector hints, used when `hint` is not given. */
     hintKey?: string;
-    generator: ScalarGenerator | undefined;
-    onChange: (generator: ScalarGenerator) => void;
+    /** The generator shown; one that is not a scalar reads as the constant 1. */
+    generator: AnyGenerator | undefined;
+    /** Smallest value the number fields accept. */
     min?: number;
+    /** Top of the curve editor's value range. */
     curveMax?: number;
-}): React.JSX.Element;
+}
+/** A value field for a setting that takes a curve over the particle's life. */
+export interface CurveValueFieldProps extends ValueFieldBaseProps {
+    /** Offers Curve beside Constant and Random (the default). */
+    curve?: true;
+    /** Receives the edited generator. */
+    onChange: (generator: ScalarGenerator) => void;
+}
+/** A value field for a setting sampled once, without a curve: Constant or Random. */
+export interface ConstantValueFieldProps extends ValueFieldBaseProps {
+    /** Hides Curve: the setting takes no curve. */
+    curve: false;
+    /** Receives the edited generator. */
+    onChange: (generator: ValueGenerator) => void;
+}
+/**
+ * Unity-like value field: Constant | Random Between Two Constants | Curve | Random Between Two
+ * Curves, bound to a quarks value generator. With `curve={false}` it offers only the first two,
+ * for settings sampled once.
+ */
+export declare function ValueField(props: CurveValueFieldProps | ConstantValueFieldProps): React.ReactElement;
+export {};

package/dist/react/ValueField.js

@@ -1,20 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
+import { RandomBetweenCurves } from 'babylon.quarks';
+import { buildCurve, buildScalar, readPieces, readScalar, withCurves, } from '../core/values.js';
 import { CurveEditor } from './CurveEditor.js';
 import { NumberField, Row, SelectField } from './fields.js';
+const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
+function isValueGenerator(generator) {
+    return generator.type === 'value';
+}
 /**
- * Unity-like value field: Constant | Random Between Two Constants | Curve,
- * bound to a quarks value generator.
+ * Unity-like value field: Constant | Random Between Two Constants | Curve | Random Between Two
+ * Curves, bound to a quarks value generator. With `curve={false}` it offers only the first two,
+ * for settings sampled once.
  */
-const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
 export function ValueField(props) {
-    const state = readScalar(props.generator);
-    const commit = (patch) => {
-        props.onChange(buildScalar({ ...state, ...patch }));
+    const read = readScalar(props.generator);
+    // A setting without curves shows a curve it was loaded with as a constant, so an edit replaces it.
+    const curved = read.mode === 'curve' || read.mode === 'curves';
+    const state = props.curve === false && curved ? { ...read, mode: 'constant' } : read;
+    const emit = (generator) => {
+        if (props.curve !== false) {
+            props.onChange(generator);
+        }
+        else if (isValueGenerator(generator)) {
+            props.onChange(generator);
+        }
     };
+    const commit = (patch) => emit(buildScalar({ ...state, ...patch }));
     return (_jsxs(_Fragment, { children: [_jsx(Row, { label: props.label, hint: props.hint, hintKey: props.hintKey, 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, alignItems: 'center' }, children: [_jsx("span", { style: captionStyle, children: "min" }), _jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx("span", { style: captionStyle, children: "max" }), _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)) }) }))] }));
+                        ...(props.curve !== false
+                            ? [
+                                { value: 'curve', label: 'Curve' },
+                                { value: 'curves', label: 'Random between two curves' },
+                            ]
+                            : []),
+                    ], onChange: (mode) => 
+                    // Between one curve and two, every segment is kept; other switches start afresh.
+                    (mode === 'curve' || mode === 'curves') && curved
+                        ? emit(withCurves(props.generator, 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, alignItems: 'center' }, children: [_jsx("span", { style: captionStyle, children: "min" }), _jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx("span", { style: captionStyle, children: "max" }), _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) => emit(buildCurve(pieces)) }) })), state.mode === 'curves' && (_jsx(_Fragment, { children: ['lower', 'upper'].map((bound, index) => (_jsxs("div", { style: { marginTop: 6 }, children: [_jsx("span", { style: captionStyle, children: bound }), _jsx(CurveEditor, { pieces: readPieces(props.generator, index === 1), maxValue: props.curveMax, onChange: (pieces) => emit(index === 0
+                                ? new RandomBetweenCurves(buildCurve(pieces), buildCurve(readPieces(props.generator, true)))
+                                : new RandomBetweenCurves(buildCurve(readPieces(props.generator)), buildCurve(pieces))) })] }, bound))) }))] }));
 }

package/dist/react/behaviorModules.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
-import { EffectBinding } from '../core/binding.js';
 import type { TextureOption } from './modules.js';
-interface ModuleProps {
-    binding: EffectBinding;
-}
+import { type ModuleProps } from './ModuleSection.js';
+/** The Speed over Lifetime module (Unity's Speed Modifier): scales speed by a curve over the particle's life. */
 export declare function SpeedOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Limit Speed over Lifetime module (Unity's Limit Velocity over Lifetime): caps speed by a curve, with dampening. */
 export declare function LimitSpeedOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Force over Lifetime module (Unity's Force over Lifetime): a constant push per axis. */
 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;
 /** A point attractor (`GravityForce`): particles fall towards a point, harder the nearer they are. */
 export declare function AttractorModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Gravity module: pulls particles towards a point. */
 export declare function GravityModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Rotation over Lifetime module (Unity's Rotation over Lifetime): spin rate over the particle's life. */
 export declare function RotationOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
 /** Turns mesh particles by a 3D angular velocity; billboards turn through Rotation over Lifetime. */
 export declare function Rotation3DOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
@@ -23,14 +25,23 @@ export declare function Rotation3DOverLifeModule({ binding }: ModuleProps): Reac
 export declare function SequencesModule({ binding, textureOptions }: ModuleProps & {
     textureOptions?: TextureOption[];
 }): React.JSX.Element;
+/** The Noise module (Unity's Noise): moves and turns particles by a noise field. */
 export declare function NoiseModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Turbulence module: a curl noise force field. */
 export declare function TurbulenceModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Randomize Direction module: tilts each particle's start direction by a random angle. */
 export declare function EmitDirectionModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Collision module (Unity's Collision): particles bounce off or die on a ground plane. */
 export declare function CollisionModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Color by Speed module (Unity's Color by Speed): a gradient over a speed range. */
 export declare function ColorBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Size by Speed module (Unity's Size by Speed): size over a speed range. */
 export declare function SizeBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Rotation by Speed module (Unity's Rotation by Speed): spin rate over a speed range. */
 export declare function RotationBySpeedModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Orbit over Lifetime module (Unity's Velocity over Lifetime orbital): turns particles about an axis. */
 export declare function OrbitOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Width over Trail module (Unity's Trails width over trail): a trail's width along its length. */
 export declare function WidthOverTrailModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Texture Sheet Animation module (Unity's Texture Sheet Animation): plays the sheet's frames by life or by frame rate. */
 export declare function TextureSheetModule({ binding }: ModuleProps): React.JSX.Element;
-export {};