babylon.quarks-editor 0.27.0 → 0.28.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/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,38 @@
+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, 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,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
+import { buildCurve, buildScalar, readPieces, readScalar, } 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, 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 state = props.curve === false && read.mode === 'curve' ? { ...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' }] : []),
+                    ], 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) => emit(buildCurve(pieces)) }) }))] }));
 }

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 {};

package/dist/react/behaviorModules.js

@@ -28,12 +28,15 @@ 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))) }) })) }));
 }
+/** 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))) }) })] })) }));
 }
+/** 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 +59,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 +142,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 +157,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 +168,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,20 +182,25 @@ 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 })] })) }));
 }
+/** 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)) }) })] })) }));
 }
@@ -195,6 +209,7 @@ 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');