babylon.quarks-editor 0.26.0 → 0.27.0

package/dist/react/ModuleSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
 import { useState } from 'react';
-import { iconStyle } from './icons';
-import { getInspectorHint } from './inspectorHints';
-import { InspectorInfoIcon } from './InspectorInfoIcon';
-import { theme } from './theme';
+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. */
 export function ModuleSection(props) {
     const [open, setOpen] = useState(props.defaultOpen ?? true);

package/dist/react/ObjectModule.d.ts

@@ -1,4 +1,4 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 export declare function ObjectModule(props: {
     node: TransformNode;
     label: string;

package/dist/react/ObjectModule.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { Quaternion } from '@babylonjs/core/Maths/math.vector.js';
 import { useSyncExternalStore } from 'react';
-import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore';
-import { ModuleSection } from './ModuleSection';
-import { NumberField, Row } from './fields';
+import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore.js';
+import { ModuleSection } from './ModuleSection.js';
+import { NumberField, Row } from './fields.js';
 const RAD_TO_DEG = 180 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180;
 function getEulerDegrees(node) {

package/dist/react/ProjectsPage.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ProjectMeta, type ProjectStore } from '../core/projectStore';
+import { type ProjectMeta, type ProjectStore } from '../core/projectStore.js';
 export interface ProjectsPageProps {
     store: ProjectStore;
     onOpen: (project: ProjectMeta) => void;

package/dist/react/ProjectsPage.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, FolderIcon, PlusIcon } from '@heroicons/react/24/solid';
 import { useCallback, useEffect, useState } from 'react';
-import { formatBytes } from '../core/projectStore';
-import { ChoiceDialog } from './ChoiceDialog';
-import { ContextMenu } from './ContextMenu';
-import { iconStyle } from './icons';
-import { PromptDialog } from './PromptDialog';
-import { buttonStyle, globalEditorStyles, theme } from './theme';
+import { formatBytes } from '../core/projectStore.js';
+import { ChoiceDialog } from './ChoiceDialog.js';
+import { ContextMenu } from './ContextMenu.js';
+import { iconStyle } from './icons.js';
+import { PromptDialog } from './PromptDialog.js';
+import { buttonStyle, globalEditorStyles, theme } from './theme.js';
 function formatDate(time) {
     return new Date(time).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
 }

package/dist/react/PromptDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { buttonStyle, inputStyle, theme } from './theme';
+import { buttonStyle, inputStyle, theme } from './theme.js';
 /** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on
  * Enter, cancels on Escape or backdrop click. */
 export function PromptDialog(props) {

package/dist/react/ScenePanel.d.ts

@@ -1,6 +1,6 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
-import type { SceneEntry } from '../core/sceneEntries';
+import type { SceneEntry } from '../core/sceneEntries.js';
 export interface ScenePanelProps {
     entries: SceneEntry[];
     /** Effect shown in the inspector and timeline. */

package/dist/react/ScenePanel.js

@@ -1,11 +1,11 @@
 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 { buildEffectTree } from '../core/effectTree';
-import { ContextMenu } from './ContextMenu';
-import { EffectTreeView } from './EffectTreeView';
-import { iconStyle } from './icons';
-import { buttonStyle, theme } from './theme';
+import { buildEffectTree } from '../core/effectTree.js';
+import { ContextMenu } from './ContextMenu.js';
+import { EffectTreeView } from './EffectTreeView.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, theme } from './theme.js';
 const ROW_HEIGHT = 34;
 export const rowIconButtonStyle = {
     flexShrink: 0,

package/dist/react/SubEmittersModule.d.ts

@@ -1,4 +1,4 @@
-import { EffectBinding } from '../core/binding';
+import { EffectBinding } from '../core/binding.js';
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a
  * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).

package/dist/react/SubEmittersModule.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { EmitSubParticleSystem, SubParticleEmitMode } from 'babylon.quarks';
-import { findBehavior } from '../core/colors';
-import { createChildSystem } from '../core/systems';
-import { ModuleSection } from './ModuleSection';
-import { CheckboxField, NumberField, Row, SelectField } from './fields';
-import { theme } from './theme';
+import { findBehavior } from '../core/colors.js';
+import { createChildSystem } from '../core/systems.js';
+import { ModuleSection } from './ModuleSection.js';
+import { CheckboxField, NumberField, Row, SelectField } from './fields.js';
+import { theme } from './theme.js';
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a
  * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).

package/dist/react/TextureSelect.d.ts

@@ -0,0 +1,24 @@
+import type { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.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;
+/**
+ * Picks a texture for one slot: a host preset, a custom URL, a file from disk, or none. The
+ * current texture stays selectable when it is not among the presets. Used by the Renderer
+ * module for the map and for the ramp, mask and noise of the texture effects.
+ */
+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;
+    /** Label of the "none" entry. Default "(none)". */
+    noneLabel?: string;
+    /** Shows a thumbnail of the current texture under the select. Default false. */
+    preview?: boolean;
+    /** Title of the custom URL prompt. Default "Texture URL". */
+    promptTitle?: string;
+}): import("react").JSX.Element;

package/dist/react/TextureSelect.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SelectField } from './fields.js';
+import { PromptDialog } from './PromptDialog.js';
+/** The url a texture-like object was loaded from, or '' for none. */
+export function textureUrlOf(texture) {
+    return texture?.url ?? '';
+}
+/**
+ * Picks a texture for one slot: a host preset, a custom URL, a file from disk, or none. The
+ * current texture stays selectable when it is not among the presets. Used by the Renderer
+ * module for the map and for the ramp, mask and noise of the texture effects.
+ */
+export function TextureSelect(props) {
+    const currentUrl = textureUrlOf(props.value);
+    const options = props.textureOptions ?? [];
+    const isPreset = options.some((o) => o.url === currentUrl);
+    const [prompting, setPrompting] = useState(false);
+    const apply = (url) => {
+        const texture = props.loadTexture(url);
+        if (texture) {
+            props.onChange(texture);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SelectField, { value: !currentUrl ? '__none' : isPreset ? currentUrl : '__current', options: [
+                    { value: '__none', label: props.noneLabel ?? '(none)' },
+                    ...(currentUrl && !isPreset
+                        ? [{ value: '__current', label: `(current) ${currentUrl.slice(-24)}` }]
+                        : []),
+                    ...options.map((o) => ({ value: o.url, label: o.label })),
+                    { value: '__url', label: 'Custom URL…' },
+                    { value: '__file', label: 'Load from file…' },
+                ], onChange: (url) => {
+                    if (url === '__current') {
+                        return;
+                    }
+                    if (url === '__none') {
+                        props.onChange(null);
+                        return;
+                    }
+                    if (url === '__url') {
+                        setPrompting(true);
+                        return;
+                    }
+                    if (url === '__file') {
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.accept = 'image/*';
+                        input.onchange = () => {
+                            const file = input.files?.[0];
+                            if (!file) {
+                                return;
+                            }
+                            const reader = new FileReader();
+                            reader.onload = () => apply(reader.result);
+                            reader.readAsDataURL(file);
+                        };
+                        input.click();
+                        return;
+                    }
+                    apply(url);
+                } }), prompting && (_jsx(PromptDialog, { title: props.promptTitle ?? 'Texture URL', defaultValue: currentUrl, placeholder: "https://\u2026", onSubmit: (url) => {
+                    apply(url);
+                    setPrompting(false);
+                }, onCancel: () => setPrompting(false) })), props.preview && currentUrl && (_jsx("img", { src: currentUrl, alt: "texture preview", style: {
+                    width: 64,
+                    height: 64,
+                    marginTop: 6,
+                    objectFit: 'contain',
+                    borderRadius: 6,
+                    border: '1px solid #2b3761',
+                    background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
+                } }))] }));
+}

package/dist/react/TextureUVField.d.ts

@@ -0,0 +1,14 @@
+import type { TextureUV } from 'babylon.quarks';
+/**
+ * Rows for how a texture is laid over the particle (`TextureUV`): its UV channel, then
+ * tiling and offset as Unity's material Tiling / Offset, then a scroll as Unreal's Panner.
+ * One field for the map, the erosion mask and the distortion noise alike.
+ */
+export declare function TextureUVField(props: {
+    /** The complete layout as the system holds it. */
+    value: TextureUV;
+    /** Called with the whole layout, one field changed. */
+    onChange: (next: TextureUV) => void;
+    /** Prefix of each row's label, so several layouts in one module stay apart. Default none. */
+    labelPrefix?: string;
+}): import("react").JSX.Element;

package/dist/react/TextureUVField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField, Row, SelectField } from './fields.js';
+/** A `[u, v]` pair of number inputs. */
+function PairField(props) {
+    return (_jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1].map((i) => (_jsx(NumberField, { value: props.value[i], step: props.step, onChange: (v) => {
+                const next = [props.value[0], props.value[1]];
+                next[i] = v;
+                props.onChange(next);
+            } }, i))) }));
+}
+/**
+ * Rows for how a texture is laid over the particle (`TextureUV`): its UV channel, then
+ * tiling and offset as Unity's material Tiling / Offset, then a scroll as Unreal's Panner.
+ * One field for the map, the erosion mask and the distortion noise alike.
+ */
+export function TextureUVField(props) {
+    const prefix = props.labelPrefix ?? '';
+    const patch = (fields) => props.onChange({ ...props.value, ...fields });
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: `${prefix}UV channel`, hintKey: "UV channel", children: _jsx(SelectField, { value: props.value.channel, options: [
+                        { value: 0, label: 'UV0 (sprite / mesh UV)' },
+                        { value: 1, label: 'UV1 (mesh second set, along a trail)' },
+                    ], onChange: (channel) => patch({ channel }) }) }), _jsx(Row, { label: `${prefix}Tiling`, hintKey: "Tiling", children: _jsx(PairField, { value: props.value.tiling, step: 0.5, onChange: (tiling) => patch({ tiling }) }) }), _jsx(Row, { label: `${prefix}Offset`, hintKey: "Offset", children: _jsx(PairField, { value: props.value.offset, step: 0.05, onChange: (offset) => patch({ offset }) }) }), _jsx(Row, { label: `${prefix}Scroll`, hintKey: "Scroll", children: _jsx(PairField, { value: props.value.scroll, step: 0.05, onChange: (scroll) => patch({ scroll }) }) })] }));
+}

package/dist/react/TimelinePanel.d.ts

@@ -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 type { BatchedRenderer } from 'babylon.quarks';
 import React from 'react';
-import type { EffectBinding } from '../core/binding';
-import { type PlaybackState } from '../core/playback';
-export type { PlaybackState } from '../core/playback';
+import type { EffectBinding } from '../core/binding.js';
+import { type PlaybackState } from '../core/playback.js';
+export type { PlaybackState } from '../core/playback.js';
 export interface TimelinePanelProps {
     binding: EffectBinding;
     selectedNode: TransformNode | null;
@@ -12,8 +12,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;

package/dist/react/TimelinePanel.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon } from '@heroicons/react/24/solid';
 import React, { useMemo, useRef, useState } from 'react';
-import { groupNodes } from '../core/groups';
-import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } 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';
+import { groupNodes } from '../core/groups.js';
+import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } 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';
 const LABEL_WIDTH = 200;
 const RULER_HEIGHT = 22;
 const PANEL_HEIGHT = 220;
@@ -90,7 +90,9 @@ export function TimelinePanel(props) {
         observer.observe(el);
         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/dist/react/TimelineTrackRow.d.ts

@@ -1,7 +1,7 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
-import type { EffectBinding } from '../core/binding';
-import type { TimelineRow } from '../core/timeline';
+import type { EffectBinding } from '../core/binding.js';
+import type { TimelineRow } from '../core/timeline.js';
 export interface TimelineTrackRowProps {
     row: TimelineRow;
     binding: EffectBinding;

package/dist/react/TimelineTrackRow.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, PencilSquareIcon, PlusIcon, SparklesIcon, SquaresPlusIcon, XMarkIcon, } from '@heroicons/react/24/solid';
 import { useState } from 'react';
-import { buildEffectTree, collectSystems } from '../core/effectTree';
-import { ungroupNode } from '../core/groups';
-import { createChildSystem, removeSystems } from '../core/systems';
-import { PromptDialog } from './PromptDialog';
-import { iconStyle } from './icons';
-import { theme } from './theme';
+import { buildEffectTree, collectSystems } from '../core/effectTree.js';
+import { ungroupNode } from '../core/groups.js';
+import { createChildSystem, removeSystems } from '../core/systems.js';
+import { PromptDialog } from './PromptDialog.js';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
 const iconButton = {
     background: 'none',
     border: 'none',

package/dist/react/TransportBar.d.ts

@@ -1,15 +1,15 @@
-import type { Scene } from '@babylonjs/core/scene';
+import type { Scene } from '@babylonjs/core/scene.js';
 import type { BatchedRenderer } from 'babylon.quarks';
 import React from 'react';
-import type { EffectBinding } from '../core/binding';
-import type { PlaybackState } from '../core/playback';
+import type { EffectBinding } from '../core/binding.js';
+import type { PlaybackState } from '../core/playback.js';
 export interface TransportBarProps {
     binding: EffectBinding | null;
     scene: Scene;
     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/dist/react/TransportBar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon } from '@heroicons/react/24/solid';
-import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport';
-import { iconStyle } from './icons';
-import { buttonStyle, theme } from './theme';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, theme } from './theme.js';
 const barButton = {
     ...buttonStyle,
     width: 28,

package/dist/react/ValueField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScalarGenerator } from '../core/values';
+import { ScalarGenerator } from '../core/values.js';
 export declare function ValueField(props: {
     label: string;
     hint?: string;

package/dist/react/ValueField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
-import { CurveEditor } from './CurveEditor';
-import { NumberField, Row, SelectField } from './fields';
+import { 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,
  * bound to a quarks value generator.

package/dist/react/behaviorModules.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { EffectBinding } from '../core/binding';
-import type { TextureOption } from './modules';
+import { EffectBinding } from '../core/binding.js';
+import type { TextureOption } from './modules.js';
 interface ModuleProps {
     binding: EffectBinding;
 }
@@ -9,6 +9,8 @@ export declare function LimitSpeedOverLifeModule({ binding }: ModuleProps): Reac
 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;
 export declare function GravityModule({ binding }: ModuleProps): React.JSX.Element;
 export declare function RotationOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
 /** Turns mesh particles by a 3D angular velocity; billboards turn through Rotation over Lifetime. */

package/dist/react/behaviorModules.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, getPhysicsResolver, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, Gradient, GravityForce, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
 import React from 'react';
-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 { ModuleSection } from './ModuleSection';
-import { theme } from './theme';
-import { ValueField } from './ValueField';
+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 { ModuleSection } from './ModuleSection.js';
+import { theme } from './theme.js';
+import { ValueField } from './ValueField.js';
 function removeBehaviorOfType(behaviors, type) {
     for (let i = behaviors.length - 1; i >= 0; i--) {
         if (behaviors[i].type === type) {
@@ -35,7 +35,10 @@ export function LimitSpeedOverLifeModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Limit Speed over Lifetime", type: "LimitSpeedOverLife", create: () => new LimitSpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [4, 2, 1, 1] }), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.speed), maxValue: 8, onChange: (pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces))) }) }), _jsx(Row, { label: "Dampen", children: _jsx(NumberField, { value: behavior.dampen, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.dampen = Math.min(1, v))) }) })] })) }));
 }
 export function ForceOverLifeModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Force over Lifetime", type: "ForceOverLife", create: () => new ForceOverLife(new ConstantValue(0), new ConstantValue(2), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(ValueField, { hintKey: "force.x", label: "X", generator: behavior.x, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.x = g)) }), _jsx(ValueField, { hintKey: "force.y", label: "Y", generator: behavior.y, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.y = g)) }), _jsx(ValueField, { hintKey: "force.z", label: "Z", generator: behavior.z, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.z = g)) })] })) }));
+    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' },
+                            { value: 'local', label: 'Local' },
+                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) }), _jsx(ValueField, { hintKey: "force.x", label: "X", generator: behavior.x, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.x = g)) }), _jsx(ValueField, { hintKey: "force.y", label: "Y", generator: behavior.y, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.y = g)) }), _jsx(ValueField, { hintKey: "force.z", label: "Z", generator: behavior.z, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.z = g)) })] })) }));
 }
 export function VelocityOverLifeModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Velocity over Lifetime", type: "VelocityOverLife", create: () => new VelocityOverLife(new ConstantValue(0), new ConstantValue(1), new ConstantValue(0)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Space", children: _jsx(SelectField, { value: behavior.space, options: [
@@ -49,8 +52,15 @@ export function InheritVelocityModule({ binding }) {
                             { value: 'current', label: 'Current' },
                         ], onChange: (v) => binding.apply(() => (behavior.mode = v)) }) }), _jsx(ValueField, { label: "Multiplier", generator: behavior.multiplier, curveMax: 2, onChange: (g) => binding.apply(() => (behavior.multiplier = g)) })] })) }));
 }
+/** A point attractor (`GravityForce`): particles fall towards a point, harder the nearer they are. */
+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)) }) })] })) }));
+}
 export function GravityModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Gravity", type: "ApplyForce", create: () => new ApplyForce(new Vector3(0, -1, 0), new ConstantValue(9.81)), children: (behavior) => (_jsx(Row, { label: "Strength", hintKey: "gravity.strength", children: _jsx(NumberField, { value: readScalar(behavior.magnitude).value, step: 0.5, onChange: (v) => binding.apply(() => (behavior.magnitude = new ConstantValue(v))) }) })) }));
+    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)) }) })] })) }));
 }
 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)) })) }));
@@ -142,15 +152,22 @@ 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) })] }) }));
 }
 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)) })] })) }));
+    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);
+                            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);
+                        }) }) })] })) }));
 }
 export function EmitDirectionModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Randomize Direction", type: "ChangeEmitDirection", create: () => new ChangeEmitDirection(new IntervalValue(0, Math.PI / 6)), children: (behavior) => (_jsx(ValueField, { label: "Angle (rad)", generator: behavior.angle, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.angle = g)) })) }));
 }
 export function CollisionModule({ binding }) {
     // Like Unity: Collision stores bounce only. Colliders are host-provided via
-    // setPhysicsResolver — the editor never invents a ground plane.
-    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(getPhysicsResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Bounce is saved with the effect. Colliders come from the host (setPhysicsResolver) \u2014 without one, Collision is inert." })] })) }));
+    // setPhysicsResolver, asked when a particle is tested — the editor never invents a ground plane.
+    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(undefined, 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Bounce is saved with the effect. Colliders come from the host (setPhysicsResolver) \u2014 without one, Collision is inert." })] })) }));
 }
 /** Shared speed-range rows for the "by Speed" trio. */
 function SpeedRangeRows({ binding, behavior }) {
@@ -173,6 +190,11 @@ export function OrbitOverLifeModule({ binding }) {
 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)) }) })] })) }));
 }
+/** How many of the first frames a start-frame generator picks from: its exclusive upper bound. */
+function startFrameCount(startFrame) {
+    const state = readScalar(startFrame);
+    return Math.round(state.mode === 'random' ? state.max : state.value);
+}
 export function TextureSheetModule({ binding }) {
     const system = binding.system;
     const frameBehavior = findBehavior(system.behaviors, 'FrameOverLife');
@@ -225,5 +247,19 @@ export function TextureSheetModule({ binding }) {
                                 curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1],
                             })));
                         }
-                    }) }) }), frameBehavior && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) }))] }));
+                    }) }) }), frameBehavior && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Time mode", children: _jsx(SelectField, { 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;
+                                }
+                            }) }) }), frameBehavior.fps > 0 ? (_jsxs(_Fragment, { children: [_jsx(Row, { label: "FPS", children: _jsx(NumberField, { value: frameBehavior.fps, min: 0.01, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.fps = v)) }) }), _jsx(Row, { label: "Loop", children: _jsx(CheckboxField, { value: frameBehavior.loop, onChange: (v) => binding.apply(() => (frameBehavior.loop = v)) }) }), _jsx(Row, { label: "Random frame", children: _jsx(CheckboxField, { value: frameBehavior.random, onChange: (v) => binding.apply(() => (frameBehavior.random = v)) }) })] })) : (_jsx(Row, { label: "Cycles", children: _jsx(NumberField, { value: frameBehavior.cycles, min: 0.01, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.cycles = v)) }) })), _jsx(Row, { label: "Frame count", children: _jsx(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)))) }) }), _jsxs(Row, { label: "Start frame", children: [_jsx(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 && (_jsx(NumberField, { value: startFrameCount(frameBehavior.startFrame), min: 1, max: tiles, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.startFrame = new IntervalValue(0, Math.max(1, Math.round(v))))) }))] }), _jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) })] }))] }));
 }

package/dist/react/fields.d.ts

@@ -11,6 +11,7 @@ export declare function NumberField(props: {
     onChange: (value: number) => void;
     step?: number;
     min?: number;
+    max?: number;
 }): React.JSX.Element;
 export declare function CheckboxField(props: {
     value: boolean;

package/dist/react/fields.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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) {
     return (_jsxs("div", { style: rowStyle, children: [_jsx(InspectorLabel, { label: props.label, hint: props.hint, hintKey: props.hintKey }), props.children] }));
 }
@@ -14,7 +14,7 @@ export function NumberField(props) {
             setText(String(round(props.value)));
         }
     }, [props.value]);
-    return (_jsx("input", { type: "number", className: "qe-hover", style: inputStyle, value: text, step: props.step ?? 0.1, min: props.min, onFocus: () => {
+    return (_jsx("input", { type: "number", className: "qe-hover", style: inputStyle, value: text, step: props.step ?? 0.1, min: props.min, max: props.max, onFocus: () => {
             focusedRef.current = true;
         }, onBlur: () => {
             focusedRef.current = false;