babylon.quarks-editor 0.26.0 → 0.28.0

package/dist/react/TimelineTrackRow.d.ts

@@ -1,22 +1,32 @@
-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';
+/** 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/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,18 +1,27 @@
-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';
+/** 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>;
+    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/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,11 +1,38 @@
+import type { ValueGenerator } from 'babylon.quarks';
 import React from 'react';
-import { ScalarGenerator } from '../core/values';
-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';
-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';
+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,15 +1,19 @@
 import React from 'react';
-import { EffectBinding } from '../core/binding';
-import type { TextureOption } from './modules';
-interface ModuleProps {
-    binding: EffectBinding;
-}
+import type { TextureOption } from './modules.js';
+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;
@@ -21,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

@@ -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) {
@@ -28,14 +28,20 @@ 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(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,9 +55,18 @@ 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)) }) })] })) }));
+}
+/** 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) => (_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)) }) })] })) }));
 }
+/** 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)) })) }));
 }
@@ -127,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]])
@@ -141,38 +157,59 @@ 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)) })] })) }));
+    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);
+                        }) }) })] })) }));
 }
+/** 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 — 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 }) {
     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)) }) })] })) }));
 }
+/** How many of the first frames a start-frame generator picks from: its exclusive upper bound. */
+function startFrameCount(startFrame) {
+    const state = readScalar(startFrame);
+    return Math.round(state.mode === 'random' ? state.max : state.value);
+}
+/** The Texture Sheet Animation module (Unity's Texture Sheet Animation): plays the sheet's frames by life or by frame rate. */
 export function TextureSheetModule({ binding }) {
     const system = binding.system;
     const frameBehavior = findBehavior(system.behaviors, 'FrameOverLife');
@@ -225,5 +262,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

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

package/dist/react/fields.js

@@ -1,7 +1,8 @@
 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';
+/** An inspector row: a label, with an optional hint, and its controls. */
 export function Row(props) {
     return (_jsxs("div", { style: rowStyle, children: [_jsx(InspectorLabel, { label: props.label, hint: props.hint, hintKey: props.hintKey }), props.children] }));
 }
@@ -14,7 +15,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;
@@ -27,9 +28,11 @@ export function NumberField(props) {
             }
         } }));
 }
+/** A checkbox bound to a boolean. */
 export function CheckboxField(props) {
     return (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.value, onChange: (e) => props.onChange(e.target.checked), style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' } }));
 }
+/** A select bound to a value, from a list of options. */
 export function SelectField(props) {
     const numeric = typeof props.value === 'number';
     return (_jsx("select", { className: "qe-hover", style: { ...inputStyle, cursor: 'pointer' }, value: String(props.value), onChange: (e) => props.onChange((numeric ? Number(e.target.value) : e.target.value)), children: props.options.map((o) => (_jsx("option", { value: String(o.value), children: o.label }, String(o.value)))) }));

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

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

package/dist/react/host/BottomDocks.js

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