babylon.quarks-editor 0.26.0 → 0.27.0

package/src/react/TimelinePanel.tsx

@@ -1,10 +1,10 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Scene} from '@babylonjs/core/scene';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {Scene} from '@babylonjs/core/scene.js';
 import {ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon} from '@heroicons/react/24/solid';
 import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
 import React, {useMemo, useRef, useState} from 'react';
-import type {EffectBinding} from '../core/binding';
-import {groupNodes} from '../core/groups';
+import type {EffectBinding} from '../core/binding.js';
+import {groupNodes} from '../core/groups.js';
 import {
     clearFocusFinished,
     getFocusElapsed,
@@ -12,15 +12,15 @@ import {
     markFocusFinished,
     setFocusElapsed,
     type PlaybackState,
-} from '../core/playback';
-import {pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled} from '../core/scrub';
-import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
-import {PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback} from '../core/transport';
-import {TimelineTrackRow} from './TimelineTrackRow';
-import {iconStyle} from './icons';
-import {buttonStyle, theme} from './theme';
+} from '../core/playback.js';
+import {pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled} from '../core/scrub.js';
+import {computeTimelineRows, computeTimelineSpan} from '../core/timeline.js';
+import {PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback} from '../core/transport.js';
+import {TimelineTrackRow} from './TimelineTrackRow.js';
+import {iconStyle} from './icons.js';
+import {buttonStyle, theme} from './theme.js';
 
-export type {PlaybackState} from '../core/playback';
+export type {PlaybackState} from '../core/playback.js';
 
 export interface TimelinePanelProps {
     binding: EffectBinding;
@@ -29,8 +29,8 @@ export interface TimelinePanelProps {
     scene: Scene;
     renderer: BatchedRenderer;
     playbackRef: React.MutableRefObject<PlaybackState>;
-    playheadRef: React.RefObject<HTMLDivElement>;
-    counterRef: React.RefObject<HTMLSpanElement>;
+    playheadRef: React.RefObject<HTMLDivElement | null>;
+    counterRef: React.RefObject<HTMLSpanElement | null>;
     stagePlaying: boolean;
     setStagePlaying: (playing: boolean) => void;
     speed: number;
@@ -146,7 +146,9 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
         return () => observer.disconnect();
     }, []);
 
-    const rows = useMemo(() => computeTimelineRows(binding), [binding, binding.getRevision()]);
+    const revision = binding.getRevision();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the binding changes in place; its revision says when to recompute
+    const rows = useMemo(() => computeTimelineRows(binding), [binding, revision]);
     const timelineSpan = useMemo(() => computeTimelineSpan(rows), [rows]);
     const pxPerSecond = Math.max(1, bodyWidthPx - TIMELINE_INSET - RIGHT_PADDING) / timelineSpan;
     const anyLooping = useMemo(() => rows.some((r) => r.kind === 'track' && r.looping), [rows]);

package/src/react/TimelineTrackRow.tsx

@@ -1,4 +1,4 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {
     CheckIcon,
     ChevronDownIcon,
@@ -13,14 +13,14 @@ import {
 } from '@heroicons/react/24/solid';
 import type {ParticleSystem} from 'babylon.quarks';
 import React, {useState} from 'react';
-import type {EffectBinding} from '../core/binding';
-import {buildEffectTree, collectSystems} from '../core/effectTree';
-import {ungroupNode} from '../core/groups';
-import {createChildSystem, removeSystems} from '../core/systems';
-import type {TimelineRow} from '../core/timeline';
-import {PromptDialog} from './PromptDialog';
-import {iconStyle} from './icons';
-import {theme} from './theme';
+import type {EffectBinding} from '../core/binding.js';
+import {buildEffectTree, collectSystems} from '../core/effectTree.js';
+import {ungroupNode} from '../core/groups.js';
+import {createChildSystem, removeSystems} from '../core/systems.js';
+import type {TimelineRow} from '../core/timeline.js';
+import {PromptDialog} from './PromptDialog.js';
+import {iconStyle} from './icons.js';
+import {theme} from './theme.js';
 
 const iconButton: React.CSSProperties = {
     background: 'none',

package/src/react/TransportBar.tsx

@@ -1,12 +1,12 @@
-import type {Scene} from '@babylonjs/core/scene';
+import type {Scene} from '@babylonjs/core/scene.js';
 import {ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon} from '@heroicons/react/24/solid';
 import type {BatchedRenderer} from 'babylon.quarks';
 import React from 'react';
-import type {EffectBinding} from '../core/binding';
-import type {PlaybackState} from '../core/playback';
-import {PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback} from '../core/transport';
-import {iconStyle} from './icons';
-import {buttonStyle, theme} from './theme';
+import type {EffectBinding} from '../core/binding.js';
+import type {PlaybackState} from '../core/playback.js';
+import {PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback} from '../core/transport.js';
+import {iconStyle} from './icons.js';
+import {buttonStyle, theme} from './theme.js';
 
 export interface TransportBarProps {
     binding: EffectBinding | null;
@@ -14,7 +14,7 @@ export interface TransportBarProps {
     renderer: BatchedRenderer;
     playbackRef: React.MutableRefObject<PlaybackState>;
     /** The host's render loop writes time and particle count here. */
-    counterRef: React.RefObject<HTMLSpanElement>;
+    counterRef: React.RefObject<HTMLSpanElement | null>;
     stagePlaying: boolean;
     setStagePlaying: (playing: boolean) => void;
     speed: number;

package/src/react/ValueField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {ScalarGenerator, ScalarValueState, buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
-import {CurveEditor} from './CurveEditor';
-import {NumberField, Row, SelectField} from './fields';
+import {ScalarGenerator, ScalarValueState, buildCurve, buildScalar, readPieces, readScalar} from '../core/values.js';
+import {CurveEditor} from './CurveEditor.js';
+import {NumberField, Row, SelectField} from './fields.js';
 
 /**
  * Unity-like value field: Constant | Random Between Two Constants | Curve,

package/src/react/behaviorModules.tsx

@@ -12,8 +12,8 @@ import {
     EulerGenerator,
     ForceOverLife,
     FrameOverLife,
-    getPhysicsResolver,
     Gradient,
+    GravityForce,
     InheritVelocity,
     IntervalValue,
     LimitSpeedOverLife,
@@ -33,17 +33,17 @@ import {
     WidthOverLength,
 } from 'babylon.quarks';
 import React from 'react';
-import {EffectBinding} from '../core/binding';
-import {buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops} from '../core/colors';
-import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
-import {CurveEditor} from './CurveEditor';
-import {CheckboxField, NumberField, Row, SelectField} from './fields';
-import {GradientEditor} from './GradientEditor';
-import {iconStyle} from './icons';
-import type {TextureOption} from './modules';
-import {ModuleSection} from './ModuleSection';
-import {theme} from './theme';
-import {ValueField} from './ValueField';
+import {EffectBinding} from '../core/binding.js';
+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 {CheckboxField, NumberField, Row, SelectField} from './fields.js';
+import {GradientEditor} from './GradientEditor.js';
+import {iconStyle} from './icons.js';
+import type {TextureOption} from './modules.js';
+import {ModuleSection} from './ModuleSection.js';
+import {theme} from './theme.js';
+import {ValueField} from './ValueField.js';
 
 interface ModuleProps {
     binding: EffectBinding;
@@ -156,6 +156,16 @@ export function ForceOverLifeModule({binding}: ModuleProps) {
         >
             {(behavior) => (
                 <>
+                    <Row label="Space">
+                        <SelectField
+                            value={behavior.space}
+                            options={[
+                                {value: 'world', label: 'World'},
+                                {value: 'local', label: 'Local'},
+                            ]}
+                            onChange={(v) => binding.apply(() => (behavior.space = v))}
+                        />
+                    </Row>
                     <ValueField
                         hintKey="force.x"
                         label="X"
@@ -288,6 +298,42 @@ export function InheritVelocityModule({binding}: ModuleProps) {
     );
 }
 
+/** A point attractor (`GravityForce`): particles fall towards a point, harder the nearer they are. */
+export function AttractorModule({binding}: ModuleProps) {
+    return (
+        <BehaviorModule<GravityForce>
+            binding={binding}
+            title="Attractor"
+            type="GravityForce"
+            create={() => new GravityForce(new Vector3(0, 0, 0), 1)}
+        >
+            {(behavior) => (
+                <>
+                    <Row label="Center" hintKey="attractor.center">
+                        <div style={{display: 'flex', gap: 6}}>
+                            {(['x', 'y', 'z'] as const).map((axis) => (
+                                <NumberField
+                                    key={axis}
+                                    value={behavior.center[axis]}
+                                    step={0.1}
+                                    onChange={(v) => binding.apply(() => (behavior.center[axis] = v))}
+                                />
+                            ))}
+                        </div>
+                    </Row>
+                    <Row label="Strength" hintKey="attractor.magnitude">
+                        <NumberField
+                            value={behavior.magnitude}
+                            step={0.1}
+                            onChange={(v) => binding.apply(() => (behavior.magnitude = v))}
+                        />
+                    </Row>
+                </>
+            )}
+        </BehaviorModule>
+    );
+}
+
 export function GravityModule({binding}: ModuleProps) {
     return (
         <BehaviorModule<ApplyForce>
@@ -297,13 +343,25 @@ export function GravityModule({binding}: ModuleProps) {
             create={() => new ApplyForce(new Vector3(0, -1, 0), new ConstantValue(9.81))}
         >
             {(behavior) => (
-                <Row label="Strength" hintKey="gravity.strength">
-                    <NumberField
-                        value={readScalar(behavior.magnitude).value}
-                        step={0.5}
-                        onChange={(v) => binding.apply(() => (behavior.magnitude = new ConstantValue(v)))}
-                    />
-                </Row>
+                <>
+                    <Row label="Strength" hintKey="gravity.strength">
+                        <NumberField
+                            value={readScalar(behavior.magnitude).value}
+                            step={0.5}
+                            onChange={(v) => binding.apply(() => (behavior.magnitude = new ConstantValue(v)))}
+                        />
+                    </Row>
+                    <Row label="Space">
+                        <SelectField
+                            value={behavior.space}
+                            options={[
+                                {value: 'world', label: 'World'},
+                                {value: 'local', label: 'Local'},
+                            ]}
+                            onChange={(v) => binding.apply(() => (behavior.space = v))}
+                        />
+                    </Row>
+                </>
             )}
         </BehaviorModule>
     );
@@ -735,6 +793,29 @@ export function TurbulenceModule({binding}: ModuleProps) {
                         step={0.1}
                         onChange={(v) => binding.apply(() => (behavior.timeScale = v))}
                     />
+                    {/* The field is built from the seed, so a different seed is a different swirl. */}
+                    <Row label="Seed">
+                        <NumberField
+                            value={behavior.seed}
+                            step={1}
+                            onChange={(v) =>
+                                binding.apply(() => {
+                                    const seed = Math.round(v);
+                                    const next = new TurbulenceField(
+                                        behavior.scale,
+                                        behavior.octaves,
+                                        behavior.velocityMultiplier,
+                                        behavior.timeScale,
+                                        seed
+                                    );
+                                    behavior.seed = seed;
+                                    behavior.generator = next.generator;
+                                    behavior.initialOffset.copy(next.initialOffset);
+                                    behavior.timeOffset.copy(next.initialOffset);
+                                })
+                            }
+                        />
+                    </Row>
                 </>
             )}
         </BehaviorModule>
@@ -764,13 +845,13 @@ export function EmitDirectionModule({binding}: ModuleProps) {
 
 export function CollisionModule({binding}: ModuleProps) {
     // Like Unity: Collision stores bounce only. Colliders are host-provided via
-    // setPhysicsResolver — the editor never invents a ground plane.
+    // setPhysicsResolver, asked when a particle is tested — the editor never invents a ground plane.
     return (
         <BehaviorModule<ApplyCollision>
             binding={binding}
             title="Collision"
             type="ApplyCollision"
-            create={() => new ApplyCollision(getPhysicsResolver(), 0.5)}
+            create={() => new ApplyCollision(undefined, 0.5)}
         >
             {(behavior) => (
                 <>
@@ -950,6 +1031,12 @@ export function WidthOverTrailModule({binding}: ModuleProps) {
     );
 }
 
+/** How many of the first frames a start-frame generator picks from: its exclusive upper bound. */
+function startFrameCount(startFrame: FrameOverLife['startFrame']): number {
+    const state = readScalar(startFrame as never);
+    return Math.round(state.mode === 'random' ? state.max : state.value);
+}
+
 export function TextureSheetModule({binding}: ModuleProps) {
     const system = binding.system;
     const frameBehavior = findBehavior<FrameOverLife>(system.behaviors, 'FrameOverLife');
@@ -1080,13 +1167,109 @@ export function TextureSheetModule({binding}: ModuleProps) {
                 />
             </Row>
             {frameBehavior && (
-                <div style={{marginTop: 6}}>
-                    <CurveEditor
-                        pieces={readPieces(frameBehavior.frame)}
-                        maxValue={Math.max(1, tiles - 1)}
-                        onChange={(pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces) as never))}
-                    />
-                </div>
+                <>
+                    <Row label="Time mode">
+                        <SelectField<'life' | 'fps'>
+                            value={frameBehavior.fps > 0 ? 'fps' : 'life'}
+                            options={[
+                                {value: 'life', label: 'Lifetime (curve over life)'},
+                                {value: 'fps', label: 'FPS (frame from curve, then by age)'},
+                            ]}
+                            onChange={(mode) =>
+                                binding.apply(() => {
+                                    frameBehavior.fps = mode === 'fps' ? 12 : 0;
+                                    if (mode === 'fps' && frameBehavior.frameCount <= 0) {
+                                        frameBehavior.frameCount = tiles;
+                                    }
+                                })
+                            }
+                        />
+                    </Row>
+                    {frameBehavior.fps > 0 ? (
+                        <>
+                            <Row label="FPS">
+                                <NumberField
+                                    value={frameBehavior.fps}
+                                    min={0.01}
+                                    step={1}
+                                    onChange={(v) => binding.apply(() => (frameBehavior.fps = v))}
+                                />
+                            </Row>
+                            <Row label="Loop">
+                                <CheckboxField
+                                    value={frameBehavior.loop}
+                                    onChange={(v) => binding.apply(() => (frameBehavior.loop = v))}
+                                />
+                            </Row>
+                            <Row label="Random frame">
+                                <CheckboxField
+                                    value={frameBehavior.random}
+                                    onChange={(v) => binding.apply(() => (frameBehavior.random = v))}
+                                />
+                            </Row>
+                        </>
+                    ) : (
+                        <Row label="Cycles">
+                            <NumberField
+                                value={frameBehavior.cycles}
+                                min={0.01}
+                                step={1}
+                                onChange={(v) => binding.apply(() => (frameBehavior.cycles = v))}
+                            />
+                        </Row>
+                    )}
+                    <Row label="Frame count">
+                        <NumberField
+                            value={frameBehavior.frameCount}
+                            min={frameBehavior.fps > 0 || frameBehavior.startFrame ? 1 : 0}
+                            max={tiles}
+                            step={1}
+                            onChange={(v) =>
+                                binding.apply(() => (frameBehavior.frameCount = Math.max(0, Math.round(v))))
+                            }
+                        />
+                    </Row>
+                    <Row label="Start frame">
+                        <CheckboxField
+                            value={!!frameBehavior.startFrame}
+                            onChange={(v) =>
+                                binding.apply(() => {
+                                    frameBehavior.startFrame = v ? new IntervalValue(0, tiles) : undefined;
+                                    // The offset only wraps into a segment; without one it runs off the sheet.
+                                    if (v && frameBehavior.frameCount <= 0) {
+                                        frameBehavior.frameCount = tiles;
+                                    }
+                                })
+                            }
+                        />
+                        {frameBehavior.startFrame && (
+                            <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))
+                                            ))
+                                    )
+                                }
+                            />
+                        )}
+                    </Row>
+                    <div style={{marginTop: 6}}>
+                        <CurveEditor
+                            pieces={readPieces(frameBehavior.frame)}
+                            maxValue={Math.max(1, tiles - 1)}
+                            onChange={(pieces) =>
+                                binding.apply(() => (frameBehavior.frame = buildCurve(pieces) as never))
+                            }
+                        />
+                    </div>
+                </>
             )}
         </ModuleSection>
     );

package/src/react/fields.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import {InspectorLabel} from './InspectorLabel';
-import {inputStyle, rowStyle} from './theme';
+import {InspectorLabel} from './InspectorLabel.js';
+import {inputStyle, rowStyle} from './theme.js';
 
 export function Row(props: {label: string; hint?: string; hintKey?: string; children: React.ReactNode}) {
     return (
@@ -12,7 +12,13 @@ export function Row(props: {label: string; hint?: string; hintKey?: string; chil
 }
 
 /** Number input that keeps focus-friendly local text state and commits parsed values. */
-export function NumberField(props: {value: number; onChange: (value: number) => void; step?: number; min?: number}) {
+export function NumberField(props: {
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    min?: number;
+    max?: number;
+}) {
     const [text, setText] = useState(String(round(props.value)));
     const focusedRef = React.useRef(false);
     useEffect(() => {
@@ -28,6 +34,7 @@ export function NumberField(props: {value: number; onChange: (value: number) =>
             value={text}
             step={props.step ?? 0.1}
             min={props.min}
+            max={props.max}
             onFocus={() => {
                 focusedRef.current = true;
             }}

package/src/react/index.ts

@@ -1,6 +1,7 @@
-export {AssetsPanel} from './AssetsPanel';
-export type {AssetsPanelProps} from './AssetsPanel';
+export {AssetsPanel} from './AssetsPanel.js';
+export type {AssetsPanelProps} from './AssetsPanel.js';
 export {
+    AttractorModule,
     CollisionModule,
     ColorBySpeedModule,
     EmitDirectionModule,
@@ -16,24 +17,24 @@ export {
     TextureSheetModule,
     TurbulenceModule,
     WidthOverTrailModule,
-} from './behaviorModules';
-export {ChoiceDialog} from './ChoiceDialog';
-export type {ChoiceDialogAction, ChoiceDialogProps} from './ChoiceDialog';
-export {ContextMenu} from './ContextMenu';
-export type {ContextMenuItem, ContextMenuProps} from './ContextMenu';
-export {CurveEditor} from './CurveEditor';
-export {EditorWorkspace, QuarksEditorWorkspace} from './EditorWorkspace';
-export type {EditorWorkspaceProps} from './EditorWorkspace';
-export {EffectEditor} from './EffectEditor';
-export type {EffectEditorProps} from './EffectEditor';
-export {EffectEditorHost, QuarksEffectEditor} from './EffectEditorHost';
-export type {EffectEditorHostHandle, EffectEditorHostProps} from './EffectEditorHost';
-export {EffectTreeView} from './EffectTreeView';
-export type {EffectTreeViewProps} from './EffectTreeView';
-export {CheckboxField, NumberField, Row, SelectField} from './fields';
-export {GradientEditor} from './GradientEditor';
-export {MessageDialog} from './MessageDialog';
-export type {MessageDialogProps} from './MessageDialog';
+} from './behaviorModules.js';
+export {ChoiceDialog} from './ChoiceDialog.js';
+export type {ChoiceDialogAction, ChoiceDialogProps} from './ChoiceDialog.js';
+export {ContextMenu} from './ContextMenu.js';
+export type {ContextMenuItem, ContextMenuProps} from './ContextMenu.js';
+export {CurveEditor} from './CurveEditor.js';
+export {EditorWorkspace, QuarksEditorWorkspace} from './EditorWorkspace.js';
+export type {EditorWorkspaceProps} from './EditorWorkspace.js';
+export {EffectEditor} from './EffectEditor.js';
+export type {EffectEditorProps} from './EffectEditor.js';
+export {EffectEditorHost, QuarksEffectEditor} from './EffectEditorHost.js';
+export type {EffectEditorHostHandle, EffectEditorHostProps} from './EffectEditorHost.js';
+export {EffectTreeView} from './EffectTreeView.js';
+export type {EffectTreeViewProps} from './EffectTreeView.js';
+export {CheckboxField, NumberField, Row, SelectField} from './fields.js';
+export {GradientEditor} from './GradientEditor.js';
+export {MessageDialog} from './MessageDialog.js';
+export type {MessageDialogProps} from './MessageDialog.js';
 export {
     ColorOverLifeModule,
     EmissionModule,
@@ -41,21 +42,23 @@ export {
     RendererModule,
     ShapeModule,
     SizeOverLifeModule,
-} from './modules';
-export type {GeometryData, GeometryOption, TextureOption} from './modules';
-export {ModuleSection} from './ModuleSection';
-export {ProjectsPage} from './ProjectsPage';
-export type {ProjectsPageProps} from './ProjectsPage';
-export {PromptDialog} from './PromptDialog';
-export type {PromptDialogProps} from './PromptDialog';
-export {ScenePanel} from './ScenePanel';
-export type {ScenePanelProps} from './ScenePanel';
-export {SubEmittersModule} from './SubEmittersModule';
-export {buttonStyle, inputStyle, labelStyle, rowStyle, theme} from './theme';
-export {TimelinePanel} from './TimelinePanel';
-export type {PlaybackState, TimelinePanelProps} from './TimelinePanel';
-export {TimelineTrackRow} from './TimelineTrackRow';
-export type {TimelineTrackRowProps} from './TimelineTrackRow';
-export {TransportBar} from './TransportBar';
-export type {TransportBarProps} from './TransportBar';
-export {ValueField} from './ValueField';
+} from './modules.js';
+export type {GeometryData, GeometryOption, TextureOption} from './modules.js';
+export {ModuleSection} from './ModuleSection.js';
+export {ProjectsPage} from './ProjectsPage.js';
+export type {ProjectsPageProps} from './ProjectsPage.js';
+export {PromptDialog} from './PromptDialog.js';
+export type {PromptDialogProps} from './PromptDialog.js';
+export {ScenePanel} from './ScenePanel.js';
+export type {ScenePanelProps} from './ScenePanel.js';
+export {SubEmittersModule} from './SubEmittersModule.js';
+export {TextureSelect, textureUrlOf} from './TextureSelect.js';
+export {TextureUVField} from './TextureUVField.js';
+export {buttonStyle, inputStyle, labelStyle, rowStyle, theme} from './theme.js';
+export {TimelinePanel} from './TimelinePanel.js';
+export type {PlaybackState, TimelinePanelProps} from './TimelinePanel.js';
+export {TimelineTrackRow} from './TimelineTrackRow.js';
+export type {TimelineTrackRowProps} from './TimelineTrackRow.js';
+export {TransportBar} from './TransportBar.js';
+export type {TransportBarProps} from './TransportBar.js';
+export {ValueField} from './ValueField.js';

package/src/react/inspectorHints.ts

@@ -13,6 +13,7 @@ const INSPECTOR_HINTS: Record<string, string> = {
     'Velocity over Lifetime': 'Adds linear and orbital velocity each frame in local or world space.',
     'Inherit Velocity': 'Copies the emitter’s movement into new particle velocity.',
     Gravity: 'Applies a constant downward force (Earth-like gravity by default).',
+    Attractor: 'Pulls particles towards a point, harder the nearer they are (a point gravity).',
     'Rotation over Lifetime': 'Spins particles by setting angular velocity over lifetime.',
     Noise: 'Procedural noise that jitters particle position and rotation.',
     Turbulence: '3D turbulent velocity field that swirls particles through space.',
@@ -31,7 +32,11 @@ const INSPECTOR_HINTS: Record<string, string> = {
     Duration: 'How long the particle system runs before stopping (non-looping) or one loop cycle.',
     Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
     'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
+    'Scaling mode':
+        'What the emitter’s scale does to a world-space system: only the shape and sizes, or speeds and forces too (Unity’s Scaling Mode).',
     Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
+    'Warm-up time':
+        'Seconds of the cycle simulated before the first frame of a looping system (Niagara’s Warmup Time); 0 warms up a whole cycle, as Unity does.',
     'Start delay': 'Wait time before emission starts after play or restart.',
     'Start lifetime': 'How long each spawned particle lives before dying.',
     'Start speed': 'Initial speed along the emission direction when a particle is born.',
@@ -70,12 +75,37 @@ const INSPECTOR_HINTS: Record<string, string> = {
     'Render mode': 'Orientation and geometry used to draw each particle.',
     'Trail length': 'Maximum number of trail segments per particle (trail mode).',
     'Follow origin': 'Keeps the trail anchored to the emitter origin instead of the particle head.',
+    'Texture mode':
+        'How the texture runs along the ribbon: once by distance, once with each segment an equal share, repeated per world unit, or once per segment.',
+    'Texture scale': 'Repeats of the texture: per world unit (tile), per segment (repeat), or over the ribbon.',
+    'Min vertex distance':
+        'The particle has to move this far before a new point is fixed; the last point follows it meanwhile. 0: a point every step.',
+    'Trail time':
+        'How long a point is kept, in seconds, within the trail length. 0: until the trail length is reached.',
     'Speed factor': 'How much particle speed stretches the billboard (stretched billboard mode).',
     'Length factor': 'Base stretch multiplier for stretched billboards.',
     Source: 'Material preset loaded from the effect JSON (read-only reference).',
     'Blend mode': 'How particle color is composited over the background.',
     Transparent: 'Enables alpha blending for soft edges and fade-outs.',
     Texture: 'Sprite or flipbook image applied to each particle.',
+    'UV channel':
+        'Which UV set the texture reads: the sprite or mesh UV, or a mesh’s second set / the length of a trail.',
+    Tiling: 'Repeats of the texture across the UV range, U and V (Unity’s material Tiling).',
+    Offset: 'Shift of the texture in UV units after tiling, U and V (Unity’s material Offset).',
+    Scroll: 'UV units per second the texture moves on the renderer’s clock (Unreal’s Panner).',
+    'Flip U/V': 'Fraction of particles mirrored horizontally and vertically, picked at birth (Unity’s renderer Flip).',
+    Ramp: 'Colour ramp read left to right; without one there is no gradient map.',
+    'Ramp channel':
+        'Which value of the map texel picks the colour along the ramp: one channel of a packed texture, or luminance.',
+    Erosion: 'Lets alpha erode the shape through a mask instead of fading it.',
+    'Erosion mask': 'Texture whose red channel orders what goes first; none uses the map’s own alpha.',
+    Softness: 'Width of the soft transition at the erosion cut, in mask units.',
+    'Edge width': 'Width of the glowing band above the erosion cut; 0 draws none.',
+    'Edge color': 'Linear RGB added in the edge band; may exceed 1 for a glow.',
+    'Noise texture': 'Texture whose red and green channels push the map’s UV about; it should repeat.',
+    'Distortion strength': 'How far the map’s UV is pushed at most, in UV units.',
+    'Swept trail': 'Spans the ribbon along a fixed axis of the emitter instead of facing the camera (a weapon trail).',
+    'Side axis': 'Local axis the swept trail spans its width along; give a unit vector.',
     'Alpha test': 'Pixels below this alpha are discarded (cutout/hard edges).',
     'Depth write': 'Writes to the depth buffer — usually off for additive particles.',
     'Depth test': 'Whether particles are occluded by scene geometry.',
@@ -90,6 +120,16 @@ const INSPECTOR_HINTS: Record<string, string> = {
     'Blend tiles': 'Smoothly blends between adjacent atlas tiles during animation.',
     'Start tile': 'Atlas cell index where playback begins (0 = top-left).',
     'Animate frames': 'Enables frame-over-lifetime curve to cycle through atlas tiles.',
+    'Time mode':
+        'Lifetime samples the curve over each particle’s life; FPS plays frames by age from the curve’s frame.',
+    FPS: 'Frames per second in FPS mode.',
+    Loop: 'In FPS mode, wrap back to the first frame of the segment, or hold the last.',
+    'Random frame': 'In FPS mode, show a random frame of the segment every tick instead of the next one.',
+    'Frame count': 'Frames in the segment that plays, from the first frame; 0 means no segment.',
+    'Start frame':
+        'Starts each particle on a random one of the first N frames (Unity’s Start Frame); editing sets a 0…N range.',
+    'attractor.center': 'Point in the system’s space particles are pulled towards.',
+    'attractor.magnitude': 'Pull strength, divided by the squared distance to the center.',
 
     // Sub emitters
     Trigger: 'When the child system is spawned: on particle birth, death, or every frame.',