babylon.quarks-editor 0.17.8 → 0.18.0

package/dist/react/TimelinePanel.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo, useRef, useState } from 'react';
+import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon, } from '@heroicons/react/24/solid';
+import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
 import { groupNodes } from '../core/groups';
-import { scrubTo } from '../core/scrub';
+import { pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled } from '../core/scrub';
 import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
 import { TimelineTrackRow } from './TimelineTrackRow';
+import { iconStyle } from './icons';
 import { buttonStyle, theme } from './theme';
 const LABEL_WIDTH = 200;
 const RULER_HEIGHT = 22;
-const STAGE_ROW_HEIGHT = 26;
 const PANEL_HEIGHT = 220;
 /** Small gap between the label column and the first pixel of the time axis. */
 export const TIMELINE_INSET = 10;
@@ -23,20 +25,18 @@ function pickTickInterval(pxPerSecond) {
     return 10;
 }
 /**
- * Bottom-docked, Premiere/Resolve-style timeline: transport controls, a time ruler with a
- * draggable playhead (approximate scrub — see core/scrub.ts), and one track row per system.
+ * Bottom-docked timeline: stage Play/Pause drives all preview effects; playhead/scrub/restart
+ * apply only to the focused effect without stopping other previews.
  */
 export function TimelinePanel(props) {
-    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, paused, setPaused, speed, setSpeed } = props;
+    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true } = props;
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
     const [hiddenSystems, setHiddenSystems] = useState(() => new Set());
     const [groupSelection, setGroupSelection] = useState(() => new Set());
     const bodyRef = useRef(null);
     const dragRef = useRef({ raf: null, pendingTime: null });
-    // A new effect (import/undo/redo/initial mount) replaces every system, so stale
-    // visibility toggles and grouping selection from the previous effect no longer refer to
-    // anything real.
+    const focusRootId = binding.root.uniqueId;
     React.useEffect(() => {
         setHiddenSystems(new Set());
         setGroupSelection(new Set());
@@ -90,42 +90,35 @@ export function TimelinePanel(props) {
         return () => observer.disconnect();
     }, []);
     const rows = useMemo(() => computeTimelineRows(binding), [binding, binding.getRevision()]);
-    // The ruler spans exactly the furthest track extent (no artificial stretch), minus a
-    // right-hand gap so the full-duration mark never sits flush against the panel edge.
     const timelineSpan = useMemo(() => computeTimelineSpan(rows), [rows]);
     const pxPerSecond = Math.max(1, bodyWidthPx - TIMELINE_INSET - RIGHT_PADDING) / timelineSpan;
-    // Follows playbackRef.elapsed independently of Babylon's render loop (Host only owns
-    // simulation time; this owns translating it into pixels for the playhead line). Whether
-    // the *whole* effect loops is an OR across tracks (there's no single canonical "root" —
-    // an effect can have several top-level systems): if any track loops, elapsed grows
-    // unbounded and we wrap it at timelineSpan. If none loop, finishing a run snaps playback
-    // straight back to frame 0 (paused) — a one-shot preview parked and ready for the next Play.
     const anyLooping = useMemo(() => rows.some((r) => r.kind === 'track' && r.looping), [rows]);
-    // Tracks elapsed from the previous tick so the finish-reset below only fires on a genuine
-    // crossing during live playback. Without this, manually dragging the playhead to (or past)
-    // the end pins elapsed at timelineSpan while scrubbing=true skips the reset — but the very
-    // next tick after release would otherwise see elapsed >= timelineSpan with no memory of
-    // *how* it got there, and wrongly treat a drag as a finished run.
     const prevElapsedRef = useRef(0);
     React.useEffect(() => {
+        if (!playbackEnabled) {
+            return;
+        }
         let raf;
         const tick = () => {
             const state = playbackRef.current;
-            const elapsed = state.elapsed;
+            const elapsed = getFocusElapsed(state, focusRootId);
             let shown = elapsed;
             if (anyLooping) {
                 shown = timelineSpan > 0 ? elapsed % timelineSpan : 0;
             }
+            else if (isFocusFinished(state, focusRootId)) {
+                // Park at real simulation time — core may finish before the ruler's worst-case span.
+                shown = elapsed;
+            }
             else if (elapsed >= timelineSpan) {
                 shown = timelineSpan;
-                const justFinishedPlaying = !state.scrubbing && !state.paused && prevElapsedRef.current < timelineSpan;
+                const justFinishedPlaying = !state.scrubbing && state.stagePlaying && prevElapsedRef.current < timelineSpan;
                 if (justFinishedPlaying) {
-                    scrubTo(binding, renderer, 0);
-                    state.elapsed = 0;
-                    state.paused = true;
-                    setPaused(true);
+                    scrubFocusToSettled(binding, renderer, timelineSpan);
+                    markFocusFinished(state, focusRootId);
+                    setFocusElapsed(state, focusRootId, timelineSpan);
+                    pauseFocus(binding);
                     scene.render();
-                    shown = 0;
                 }
             }
             prevElapsedRef.current = elapsed;
@@ -136,7 +129,7 @@ export function TimelinePanel(props) {
         };
         raf = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(raf);
-    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, setPaused, binding, renderer, scene]);
+    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled, binding, scene, renderer]);
     const visibleRows = useMemo(() => {
         let hideUntilDepth = null;
         const visible = rows.filter((row) => {
@@ -170,10 +163,24 @@ export function TimelinePanel(props) {
         return Math.min(timelineSpan, Math.max(0, x / pxPerSecond));
     };
     const applyScrub = (time) => {
-        scrubTo(binding, renderer, time);
-        playbackRef.current.elapsed = time;
+        const state = playbackRef.current;
+        const atEnd = !anyLooping && time >= timelineSpan;
+        const shown = atEnd ? timelineSpan : time;
+        if (atEnd) {
+            scrubFocusToSettled(binding, renderer, timelineSpan);
+            markFocusFinished(state, focusRootId);
+            pauseFocus(binding);
+        }
+        else {
+            scrubFocusTo(binding, renderer, time);
+            clearFocusFinished(state, focusRootId);
+            if (stagePlaying) {
+                playFocus(binding);
+            }
+        }
+        setFocusElapsed(state, focusRootId, shown);
         if (playheadRef.current) {
-            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + time * pxPerSecond}px`;
+            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + shown * pxPerSecond}px`;
         }
         scene.render();
     };
@@ -188,14 +195,48 @@ export function TimelinePanel(props) {
             });
         }
     };
-    const restart = () => {
-        applyScrub(0);
+    const restartFocus = () => {
+        scrubFocusTo(binding, renderer, 0);
+        const state = playbackRef.current;
+        setFocusElapsed(state, focusRootId, 0);
+        clearFocusFinished(state, focusRootId);
+        if (stagePlaying) {
+            playFocus(binding);
+        }
+        if (playheadRef.current) {
+            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET}px`;
+        }
+        scene.render();
+    };
+    const handleStagePlayPause = () => {
+        const state = playbackRef.current;
+        if (!stagePlaying) {
+            if (isFocusFinished(state, focusRootId)) {
+                binding.restart();
+                clearFocusFinished(state, focusRootId);
+                setFocusElapsed(state, focusRootId, 0);
+                scene.render();
+            }
+            state.stagePlaying = true;
+            setStagePlaying(true);
+            return;
+        }
+        state.stagePlaying = false;
+        setStagePlaying(false);
     };
     const ticks = [];
     for (let t = 0; t <= timelineSpan; t += pickTickInterval(pxPerSecond)) {
         ticks.push(t);
     }
-    const overlayButton = { ...buttonStyle, padding: '5px 9px', minWidth: 32 };
+    const overlayButton = {
+        ...buttonStyle,
+        padding: '5px 9px',
+        minWidth: 32,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+    };
     return (_jsxs("div", { style: {
             flexShrink: 0,
             height: PANEL_HEIGHT,
@@ -205,71 +246,61 @@ export function TimelinePanel(props) {
             flexDirection: 'column',
             fontFamily: theme.font,
             color: theme.text,
-        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("button", { className: "qe-hover", style: overlayButton, title: paused ? 'Play' : 'Pause', onClick: () => {
-                            // A finished one-shot effect already snapped itself back to frame 0 and
-                            // paused (see the tick effect above), so a plain toggle is enough here.
-                            playbackRef.current.paused = !paused;
-                            setPaused(!paused);
-                        }, children: paused ? '▶' : '⏸' }), _jsx("button", { className: "qe-hover", style: overlayButton, title: "Step one frame", disabled: !paused, onClick: () => (playbackRef.current.stepQueued = true), children: "\u23ED" }), _jsx("button", { className: "qe-hover", style: overlayButton, title: "Restart", onClick: restart, children: "\u27F2" }), _jsx("select", { className: "qe-hover", style: { ...overlayButton, padding: '5px 4px' }, title: "Playback speed", value: speed, onChange: (e) => {
+        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: stagePlaying ? 'Pause stage preview' : 'Play stage preview', disabled: !playbackEnabled, onClick: handleStagePlayPause, children: stagePlaying ? _jsx(PauseIcon, { style: iconStyle(14) }) : _jsx(PlayIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Step one frame (stage)", disabled: !playbackEnabled || stagePlaying, onClick: () => (playbackRef.current.stepQueued = true), children: _jsx(ForwardIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Restart focused effect only", disabled: !playbackEnabled, onClick: restartFocus, children: _jsx(ArrowPathIcon, { style: iconStyle(14) }) }), _jsx("select", { className: "qe-hover", style: { ...overlayButton, padding: '5px 4px', opacity: playbackEnabled ? 1 : 0.45 }, title: "Playback speed", value: speed, disabled: !playbackEnabled, onChange: (e) => {
                             const next = Number(e.target.value);
                             playbackRef.current.speed = next;
                             setSpeed(next);
-                        }, children: [0.1, 0.25, 0.5, 1, 2, 4].map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: { fontSize: 12, color: theme.textDim, fontVariantNumeric: 'tabular-nums', paddingLeft: 4, minWidth: 120 } }), groupSelection.size >= 2 && (_jsxs("button", { className: "qe-hover", style: overlayButton, title: "Group the checked rows", onClick: groupSelectedNodes, children: ["Group (", groupSelection.size, ")"] }))] }), _jsxs("div", { ref: bodyRef, style: { position: 'relative', flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            height: RULER_HEIGHT,
-                            display: 'grid',
-                            gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
-                            background: theme.panelBg,
-                            zIndex: 2,
-                        }, children: [_jsx("div", { style: { height: RULER_HEIGHT } }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: RULER_HEIGHT, cursor: 'ew-resize', overflow: 'hidden' }, onPointerDown: (e) => {
-                                    playbackRef.current.scrubbing = true;
-                                    e.target.setPointerCapture(e.pointerId);
-                                    queueScrub(e.clientX);
-                                }, onPointerMove: (e) => {
-                                    if (playbackRef.current.scrubbing)
-                                        queueScrub(e.clientX);
-                                }, onPointerUp: (e) => {
-                                    playbackRef.current.scrubbing = false;
-                                    e.target.releasePointerCapture?.(e.pointerId);
-                                }, children: ticks.map((t) => (_jsxs("div", { style: { position: 'absolute', left: TIMELINE_INSET + t * pxPerSecond, top: 0, bottom: 0, borderLeft: `1px solid ${theme.border}`, fontSize: 10, color: theme.textDim, paddingLeft: 3 }, children: [t, "s"] }, t))) })] }), _jsxs("div", { className: "qe-hover-bg", title: "Preview parent \u2014 simulates effect.parent = someNode; not saved in the exported JSON", style: {
-                            position: 'absolute',
-                            top: RULER_HEIGHT,
-                            left: 0,
-                            right: 0,
-                            height: STAGE_ROW_HEIGHT,
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 6,
-                            padding: '0 8px',
-                            fontSize: 12.5,
-                            fontStyle: 'italic',
-                            cursor: 'pointer',
-                            color: selectedNode === null ? theme.text : theme.textDim,
-                            borderBottom: `1px solid ${theme.border}`,
-                            ...(selectedNode === null ? { background: 'rgba(60, 105, 209, 0.3)' } : {}),
-                        }, onClick: () => onSelectNode(null), children: [_jsx("span", { style: { fontSize: 10, width: 10 }, children: "\u25CE" }), _jsx("span", { children: "Stage (preview parent)" })] }), _jsx("div", { style: {
-                            position: 'absolute',
-                            top: RULER_HEIGHT + STAGE_ROW_HEIGHT,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            overflowY: 'auto',
-                            overflowX: 'hidden',
-                        }, children: _jsx("div", { style: {
+                        }, children: [0.1, 0.25, 0.5, 1, 2, 4].map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: { fontSize: 12, color: theme.textDim, fontVariantNumeric: 'tabular-nums', paddingLeft: 4, minWidth: 120 } }), groupSelection.size >= 2 && (_jsxs("button", { className: "qe-hover", style: overlayButton, title: "Group the checked rows", onClick: groupSelectedNodes, children: [_jsx(RectangleGroupIcon, { style: iconStyle(14) }), "Group (", groupSelection.size, ")"] }))] }), _jsx("div", { ref: bodyRef, style: { position: 'relative', flex: 1, minHeight: 0 }, children: !playbackEnabled ? (_jsx("div", { style: {
+                        position: 'absolute',
+                        inset: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: '0 24px',
+                        textAlign: 'center',
+                        fontSize: 13,
+                        color: theme.textDim,
+                        lineHeight: 1.5,
+                    }, children: "Selected effect is not in the scene. Drag it into the viewport to preview playback." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                height: RULER_HEIGHT,
                                 display: 'grid',
                                 gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
-                                gridAutoRows: 'min-content',
-                            }, children: visibleRows.map((row) => (_jsx(TimelineTrackRow, { row: row, binding: binding, selected: row.node === selectedNode, onSelectNode: onSelectNode, pxPerSecond: pxPerSecond, offsetPx: TIMELINE_INSET, collapsed: row.kind === 'group' && collapsedGroups.has(row.node), onToggleCollapse: row.kind === 'group' ? () => toggleCollapse(row.node) : undefined, hidden: row.kind === 'track' && hiddenSystems.has(row.system), onToggleVisible: row.kind === 'track' ? () => toggleVisible(row.system) : undefined, groupSelected: groupSelection.has(row.node), onToggleGroupSelect: () => toggleGroupSelect(row.node) }, row.node.uniqueId))) }) }), _jsx("div", { style: { position: 'absolute', top: 0, bottom: 0, left: LABEL_WIDTH, width: 1, background: theme.border, pointerEvents: 'none', zIndex: 3 } }), _jsx("div", { ref: playheadRef, style: {
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            left: LABEL_WIDTH + TIMELINE_INSET,
-                            width: 1,
-                            background: theme.accent,
-                            pointerEvents: 'none',
-                            zIndex: 3,
-                        } })] })] }));
+                                background: theme.panelBg,
+                                zIndex: 2,
+                            }, children: [_jsx("div", { style: { height: RULER_HEIGHT } }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: RULER_HEIGHT, cursor: 'ew-resize', overflow: 'hidden' }, onPointerDown: (e) => {
+                                        playbackRef.current.scrubbing = true;
+                                        e.target.setPointerCapture(e.pointerId);
+                                        queueScrub(e.clientX);
+                                    }, onPointerMove: (e) => {
+                                        if (playbackRef.current.scrubbing)
+                                            queueScrub(e.clientX);
+                                    }, onPointerUp: (e) => {
+                                        playbackRef.current.scrubbing = false;
+                                        e.target.releasePointerCapture?.(e.pointerId);
+                                    }, children: ticks.map((t) => (_jsxs("div", { style: { position: 'absolute', left: TIMELINE_INSET + t * pxPerSecond, top: 0, bottom: 0, borderLeft: `1px solid ${theme.border}`, fontSize: 10, color: theme.textDim, paddingLeft: 3 }, children: [t, "s"] }, t))) })] }), _jsx("div", { style: {
+                                position: 'absolute',
+                                top: RULER_HEIGHT,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                overflowY: 'auto',
+                                overflowX: 'hidden',
+                            }, children: _jsx("div", { style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
+                                    gridAutoRows: 'min-content',
+                                }, children: visibleRows.map((row) => (_jsx(TimelineTrackRow, { row: row, binding: binding, selected: row.node === selectedNode, onSelectNode: onSelectNode, pxPerSecond: pxPerSecond, offsetPx: TIMELINE_INSET, collapsed: row.kind === 'group' && collapsedGroups.has(row.node), onToggleCollapse: row.kind === 'group' ? () => toggleCollapse(row.node) : undefined, hidden: row.kind === 'track' && hiddenSystems.has(row.system), onToggleVisible: row.kind === 'track' ? () => toggleVisible(row.system) : undefined, groupSelected: groupSelection.has(row.node), onToggleGroupSelect: () => toggleGroupSelect(row.node) }, row.node.uniqueId))) }) }), _jsx("div", { style: { position: 'absolute', top: 0, bottom: 0, left: LABEL_WIDTH, width: 1, background: theme.border, pointerEvents: 'none', zIndex: 3 } }), _jsx("div", { ref: playheadRef, style: {
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: LABEL_WIDTH + TIMELINE_INSET,
+                                width: 1,
+                                background: theme.accent,
+                                pointerEvents: 'none',
+                                zIndex: 3,
+                            } })] })) })] }));
 }

package/dist/react/TimelineTrackRow.js

@@ -1,13 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, PencilSquareIcon, PlusIcon, SparklesIcon, SquaresPlusIcon, XMarkIcon, } from '@heroicons/react/24/solid';
 import { buildEffectTree, collectSystems } from '../core/effectTree';
 import { createChildSystem, removeSystems } from '../core/systems';
 import { ungroupNode } from '../core/groups';
 import { PromptDialog } from './PromptDialog';
+import { iconStyle } from './icons';
 import { theme } from './theme';
-const iconButton = { background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, padding: 0 };
+const iconButton = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
 const ROW_HEIGHT = 28;
-const checkboxButton = { ...iconButton, fontSize: 12, width: 12 };
+const checkboxButton = { ...iconButton, width: 12, height: 12 };
 /** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */
 export function TimelineTrackRow(props) {
     const { row, binding, selected, onSelectNode, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect } = props;
@@ -34,10 +44,10 @@ export function TimelineTrackRow(props) {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, borderTop: `1px solid ${theme.border}` }, onClick: () => onSelectNode(row.node), children: [!isRoot && (_jsx("button", { className: "qe-hover", title: groupSelected ? 'Remove from group selection' : 'Select for grouping', style: { ...checkboxButton, color: groupSelected ? theme.accent : theme.textDim }, onClick: (e) => {
                                 e.stopPropagation();
                                 onToggleGroupSelect();
-                            }, children: groupSelected ? '☑' : '☐' })), _jsx("span", { className: "qe-hover", title: collapsed ? 'Expand' : 'Collapse', style: { color: theme.textDim, fontSize: 10, width: 10, cursor: 'pointer' }, onClick: (e) => {
+                            }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: { width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box' } })) })), _jsx("span", { className: "qe-hover", title: collapsed ? 'Expand' : 'Collapse', style: { color: theme.textDim, width: 12, cursor: 'pointer', display: 'inline-flex' }, onClick: (e) => {
                                 e.stopPropagation();
                                 onToggleCollapse?.();
-                            }, children: collapsed ? '▸' : '▾' }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: row.name }), _jsx("button", { className: "qe-hover", title: "Add system to this group", style: { ...iconButton, color: theme.accent, fontSize: 13 }, onClick: (e) => {
+                            }, children: collapsed ? _jsx(ChevronRightIcon, { style: iconStyle(12) }) : _jsx(ChevronDownIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: row.name }), _jsx("button", { className: "qe-hover", title: "Add system to this group", style: { ...iconButton, color: theme.accent }, onClick: (e) => {
                                 e.stopPropagation();
                                 let created;
                                 binding.apply(() => {
@@ -51,17 +61,17 @@ export function TimelineTrackRow(props) {
                                     binding.addSubSystem(created);
                                     onSelectNode(created.emitter);
                                 }
-                            }, children: "+" }), !isRoot && (_jsx("button", { className: "qe-hover", title: "Rename", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {
+                            }, children: _jsx(PlusIcon, { style: iconStyle(13) }) }), !isRoot && (_jsx("button", { className: "qe-hover", title: "Rename", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {
                                 e.stopPropagation();
                                 setRenaming(true);
-                            }, children: "\u270E" })), !isRoot && (_jsx("button", { className: "qe-hover", title: "Ungroup (moves its contents up a level)", style: { ...iconButton, color: theme.textDim, fontSize: 12 }, onClick: (e) => {
+                            }, children: _jsx(PencilSquareIcon, { style: iconStyle(12) }) })), !isRoot && (_jsx("button", { className: "qe-hover", title: "Ungroup (moves its contents up a level)", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {
                                 e.stopPropagation();
                                 binding.apply(() => ungroupNode(row.node));
-                            }, children: "\u26F6" })), !isRoot && (_jsx("button", { className: "qe-hover", title: "Remove group", style: { ...iconButton, color: '#e08c8c', fontSize: 12 }, onClick: (e) => {
+                            }, children: _jsx(SquaresPlusIcon, { style: iconStyle(12) }) })), !isRoot && (_jsx("button", { className: "qe-hover", title: "Remove group", style: { ...iconButton, color: '#e08c8c' }, onClick: (e) => {
                                 e.stopPropagation();
                                 removeSystems(binding, collectSystems(buildEffectTree(row.node)), (s) => onSelectNode(s.emitter));
                                 binding.apply(() => row.node.dispose(true, false));
-                            }, children: "\u2715" }))] }), _jsx("div", { className: "qe-hover-bg", style: { height: ROW_HEIGHT, borderTop: `1px solid ${theme.border}` }, onClick: () => onSelectNode(row.node) }), renaming && (_jsx(PromptDialog, { title: "Rename", defaultValue: row.name, onSubmit: (name) => {
+                            }, children: _jsx(XMarkIcon, { style: iconStyle(12) }) }))] }), _jsx("div", { className: "qe-hover-bg", style: { height: ROW_HEIGHT, borderTop: `1px solid ${theme.border}` }, onClick: () => onSelectNode(row.node) }), renaming && (_jsx(PromptDialog, { title: "Rename", defaultValue: row.name, onSubmit: (name) => {
                         binding.apply(() => (row.node.name = name));
                         setRenaming(false);
                     }, onCancel: () => setRenaming(false) }))] }));
@@ -72,16 +82,16 @@ export function TimelineTrackRow(props) {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, opacity: hidden ? 0.5 : 1 }, onClick: () => onSelectNode(row.node), children: [!isRoot && (_jsx("button", { className: "qe-hover", title: groupSelected ? 'Remove from group selection' : 'Select for grouping', style: { ...checkboxButton, color: groupSelected ? theme.accent : theme.textDim }, onClick: (e) => {
                             e.stopPropagation();
                             onToggleGroupSelect();
-                        }, children: groupSelected ? '☑' : '☐' })), _jsx("button", { className: "qe-hover", title: hidden ? 'Show in viewport' : 'Hide in viewport', style: { ...iconButton, color: hidden ? theme.textDim : theme.accent, fontSize: 12 }, onClick: (e) => {
+                        }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: { width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box' } })) })), _jsx("button", { className: "qe-hover", title: hidden ? 'Show in viewport' : 'Hide in viewport', style: { ...iconButton, color: hidden ? theme.textDim : theme.accent }, onClick: (e) => {
                             e.stopPropagation();
                             onToggleVisible?.();
-                        }, children: hidden ? '◯' : '◉' }), _jsx("span", { style: { color: theme.accent, fontSize: 10, width: 10 }, children: "\u25C6" }), _jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: [row.name, system.onlyUsedByOther ? ' (sub)' : ''] }), !isRoot && (_jsx("button", { className: "qe-hover", title: "Rename", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {
+                        }, children: hidden ? _jsx(EyeSlashIcon, { style: iconStyle(12) }) : _jsx(EyeIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { color: theme.accent, display: 'inline-flex' }, children: _jsx(SparklesIcon, { style: iconStyle(11) }) }), _jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: [row.name, system.onlyUsedByOther ? ' (sub)' : ''] }), !isRoot && (_jsx("button", { className: "qe-hover", title: "Rename", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {
                             e.stopPropagation();
                             setRenaming(true);
-                        }, children: "\u270E" })), !isRoot && row.removable && (_jsx("button", { className: "qe-hover", title: "Remove system", style: { ...iconButton, color: '#e08c8c', fontSize: 12 }, onClick: (e) => {
+                        }, children: _jsx(PencilSquareIcon, { style: iconStyle(12) }) })), !isRoot && row.removable && (_jsx("button", { className: "qe-hover", title: "Remove system", style: { ...iconButton, color: '#e08c8c' }, onClick: (e) => {
                             e.stopPropagation();
                             removeSystems(binding, [system], (s) => onSelectNode(s.emitter));
-                        }, children: "\u2715" })), selected && (_jsx("button", { className: "qe-hover", title: "Add child system", style: { ...iconButton, color: theme.accent, fontSize: 13 }, onClick: (e) => {
+                        }, children: _jsx(XMarkIcon, { style: iconStyle(12) }) })), selected && (_jsx("button", { className: "qe-hover", title: "Add child system", style: { ...iconButton, color: theme.accent }, onClick: (e) => {
                             e.stopPropagation();
                             let created;
                             binding.apply(() => {
@@ -92,7 +102,7 @@ export function TimelineTrackRow(props) {
                                 binding.addSubSystem(created);
                                 onSelectNode(created.emitter);
                             }
-                        }, children: "+" }))] }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: ROW_HEIGHT }, onClick: () => onSelectNode(row.node), children: _jsx("div", { className: "qe-hover", title: row.startOffsetVariable ? 'Start time varies per spawn' : undefined, style: {
+                        }, children: _jsx(PlusIcon, { style: iconStyle(13) }) }))] }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: ROW_HEIGHT }, onClick: () => onSelectNode(row.node), children: _jsx("div", { className: "qe-hover", title: row.startOffsetVariable ? 'Start time varies per spawn' : undefined, style: {
                         position: 'absolute',
                         left: barLeft,
                         width: barWidth,
@@ -100,10 +110,14 @@ export function TimelineTrackRow(props) {
                         height: ROW_HEIGHT - 10,
                         borderRadius: 4,
                         cursor: 'pointer',
-                        background: system.onlyUsedByOther ? 'repeating-linear-gradient(135deg, rgba(158,185,255,0.25), rgba(158,185,255,0.25) 4px, rgba(158,185,255,0.4) 4px, rgba(158,185,255,0.4) 8px)' : selected ? theme.accent : '#3c5aa0',
+                        boxSizing: 'border-box',
+                        background: system.onlyUsedByOther
+                            ? 'repeating-linear-gradient(135deg, rgba(158,185,255,0.25), rgba(158,185,255,0.25) 4px, rgba(158,185,255,0.4) 4px, rgba(158,185,255,0.4) 8px)'
+                            : selected
+                                ? theme.accent
+                                : '#3c5aa0',
                         border: system.onlyUsedByOther ? `1px dashed ${theme.accent}` : `1px solid ${theme.border}`,
                         opacity: hidden ? 0.3 : system.onlyUsedByOther ? 0.75 : 1,
-                        boxSizing: 'border-box',
                     }, children: row.looping && (_jsx("span", { style: { position: 'absolute', right: 4, top: -1, fontSize: 10, color: theme.text }, children: "\u27F3" })) }) }), renaming && (_jsx(PromptDialog, { title: "Rename", defaultValue: row.name, onSubmit: (name) => {
                     binding.apply(() => (row.node.name = name));
                     setRenaming(false);

package/dist/react/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** Themed hover/focus tooltip rendered in a portal so it is not clipped by scroll containers. */
+export declare function Tooltip(props: {
+    content: string;
+    children: React.ReactNode;
+}): React.ReactElement;

package/dist/react/Tooltip.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const TOOLTIP_MAX_WIDTH = 260;
+const VIEWPORT_PAD = 8;
+/** Positions a fixed tooltip beside the anchor, flipping when near the viewport edge. */
+function placeTooltip(anchor) {
+    const centerY = anchor.top + anchor.height / 2;
+    const top = Math.min(Math.max(centerY, VIEWPORT_PAD + 24), window.innerHeight - VIEWPORT_PAD - 24);
+    const preferRight = anchor.right + 8 + TOOLTIP_MAX_WIDTH <= window.innerWidth - VIEWPORT_PAD;
+    if (preferRight) {
+        return { left: anchor.right + 8, top, placement: 'right' };
+    }
+    return { left: anchor.left - 8, top, placement: 'left' };
+}
+/** Themed hover/focus tooltip rendered in a portal so it is not clipped by scroll containers. */
+export function Tooltip(props) {
+    const { content, children } = props;
+    const anchorRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [layout, setLayout] = useState(null);
+    const updateLayout = useCallback(() => {
+        const anchor = anchorRef.current?.getBoundingClientRect();
+        if (!anchor) {
+            return;
+        }
+        setLayout(placeTooltip(anchor));
+    }, []);
+    const show = () => {
+        updateLayout();
+        setOpen(true);
+    };
+    const hide = () => setOpen(false);
+    useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        updateLayout();
+        const onReflow = () => updateLayout();
+        window.addEventListener('scroll', onReflow, true);
+        window.addEventListener('resize', onReflow);
+        return () => {
+            window.removeEventListener('scroll', onReflow, true);
+            window.removeEventListener('resize', onReflow);
+        };
+    }, [open, updateLayout]);
+    const tooltipStyle = layout?.placement === 'left'
+        ? {
+            position: 'fixed',
+            left: layout.left,
+            top: layout.top,
+            transform: 'translate(-100%, -50%)',
+            maxWidth: TOOLTIP_MAX_WIDTH,
+        }
+        : {
+            position: 'fixed',
+            left: layout?.left,
+            top: layout?.top,
+            transform: 'translateY(-50%)',
+            maxWidth: TOOLTIP_MAX_WIDTH,
+        };
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, style: { display: 'inline-flex', verticalAlign: 'middle' }, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: children }), open && layout
+                ? createPortal(_jsx("div", { role: "tooltip", className: `qe-tooltip qe-tooltip--${layout.placement}`, style: tooltipStyle, children: content }), document.body)
+                : null] }));
+}

package/dist/react/ValueField.d.ts

@@ -6,6 +6,8 @@ import { ScalarGenerator } from '../core/values';
  */
 export declare function ValueField(props: {
     label: string;
+    hint?: string;
+    hintKey?: string;
     generator: ScalarGenerator | undefined;
     onChange: (generator: ScalarGenerator) => void;
     min?: number;

package/dist/react/ValueField.js

@@ -11,7 +11,7 @@ export function ValueField(props) {
     const commit = (patch) => {
         props.onChange(buildScalar({ ...state, ...patch }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: props.label, children: _jsx(SelectField, { value: state.mode, options: [
+    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' },

package/dist/react/behaviorModules.js

@@ -32,7 +32,7 @@ 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, { label: "X", generator: behavior.x, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.x = g)) }), _jsx(ValueField, { label: "Y", generator: behavior.y, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.y = g)) }), _jsx(ValueField, { 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(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: [
@@ -41,19 +41,19 @@ export function VelocityOverLifeModule({ binding }) {
                         ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) }), _jsx(ValueField, { label: "Linear X", generator: behavior.linearX, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearX = g)) }), _jsx(ValueField, { label: "Linear Y", generator: behavior.linearY, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearY = g)) }), _jsx(ValueField, { label: "Linear Z", generator: behavior.linearZ, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.linearZ = g)) }), _jsx(ValueField, { label: "Orbital X", generator: behavior.orbitalX, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalX = g)) }), _jsx(ValueField, { label: "Orbital Y", generator: behavior.orbitalY, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalY = g)) }), _jsx(ValueField, { label: "Orbital Z", generator: behavior.orbitalZ, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.orbitalZ = g)) })] })) }));
 }
 export function InheritVelocityModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Inherit Velocity", type: "InheritVelocity", create: () => new InheritVelocity(new ConstantValue(1), 'initial'), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Mode", children: _jsx(SelectField, { value: behavior.mode, options: [
+    return (_jsx(BehaviorModule, { binding: binding, title: "Inherit Velocity", type: "InheritVelocity", create: () => new InheritVelocity(new ConstantValue(1), 'initial'), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Mode", hintKey: "inheritVelocity.mode", children: _jsx(SelectField, { value: behavior.mode, options: [
                             { value: 'initial', label: 'Initial' },
                             { 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)) })] })) }));
 }
 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", 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) => (_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))) }) })) }));
 }
 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, { label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) })) }));
+    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)) })) }));
 }
 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, { label: "Frequency", generator: behavior.frequency, min: 0, curveMax: 10, onChange: (g) => binding.apply(() => (behavior.frequency = g)) }), _jsx(ValueField, { 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)) })] })) }));
+    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)) })] })) }));
 }
 /** Three numeric inputs for a Vector3 field, replacing the whole vector on any edit. */
 function Vector3Row(props) {
@@ -62,10 +62,10 @@ function Vector3Row(props) {
         next[axis] = n;
         props.onChange(next);
     };
-    return (_jsx(Row, { label: props.label, 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) })] }) }));
+    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, { 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, { 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)) })] })) }));
 }
 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)) })) }));
@@ -87,7 +87,7 @@ 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 })] })) }));
 }
 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, { label: "Velocity (rad/s)", generator: behavior.angularVelocity, curveMax: Math.PI * 4, onChange: (g) => binding.apply(() => (behavior.angularVelocity = g)) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+    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 })] })) }));
 }
 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)) })) }));

package/dist/react/fields.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export declare function Row(props: {
     label: string;
+    hint?: string;
+    hintKey?: string;
     children: React.ReactNode;
 }): React.JSX.Element;
 /** Number input that keeps focus-friendly local text state and commits parsed values. */