babylon.quarks-editor 0.17.7

package/src/react/TimelinePanel.tsx

@@ -0,0 +1,354 @@
+import React, {useMemo, useRef, useState} from 'react';
+import type {ParticleSystem, BatchedRenderer} from 'babylon.quarks';
+import type {Scene} from '@babylonjs/core/scene';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {EffectBinding} from '../core/binding';
+import {groupNodes} from '../core/groups';
+import {scrubTo} from '../core/scrub';
+import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
+import {TimelineTrackRow} from './TimelineTrackRow';
+import {buttonStyle, theme} from './theme';
+
+export interface PlaybackState {
+    paused: boolean;
+    speed: number;
+    stepQueued: boolean;
+    elapsed: number;
+    scrubbing: boolean;
+}
+
+export interface TimelinePanelProps {
+    binding: EffectBinding;
+    selectedSystem: ParticleSystem;
+    onSelect: (system: ParticleSystem) => void;
+    scene: Scene;
+    renderer: BatchedRenderer;
+    playbackRef: React.MutableRefObject<PlaybackState>;
+    playheadRef: React.RefObject<HTMLDivElement>;
+    counterRef: React.RefObject<HTMLSpanElement>;
+    paused: boolean;
+    setPaused: (paused: boolean) => void;
+    speed: number;
+    setSpeed: (speed: number) => void;
+}
+
+const LABEL_WIDTH = 200;
+const RULER_HEIGHT = 22;
+const PANEL_HEIGHT = 220;
+/** Small gap between the label column and the first pixel of the time axis. */
+export const TIMELINE_INSET = 10;
+
+function pickTickInterval(pxPerSecond: number): number {
+    if (pxPerSecond >= 60) return 1;
+    if (pxPerSecond >= 24) return 2;
+    if (pxPerSecond >= 10) return 5;
+    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.
+ */
+export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
+    const {binding, selectedSystem, onSelect, scene, renderer, playbackRef, playheadRef, counterRef, paused, setPaused, speed, setSpeed} = props;
+
+    const [bodyWidthPx, setBodyWidthPx] = useState(600);
+    const [collapsedGroups, setCollapsedGroups] = useState<Set<TransformNode>>(() => new Set());
+    const [hiddenSystems, setHiddenSystems] = useState<Set<ParticleSystem>>(() => new Set());
+    const [groupSelection, setGroupSelection] = useState<Set<TransformNode>>(() => new Set());
+    const bodyRef = useRef<HTMLDivElement>(null);
+    const dragRef = useRef<{raf: number | null; pendingTime: number | null}>({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.
+    React.useEffect(() => {
+        setHiddenSystems(new Set());
+        setGroupSelection(new Set());
+    }, [binding]);
+
+    const toggleGroupSelect = (node: TransformNode) => {
+        setGroupSelection((prev) => {
+            const next = new Set(prev);
+            if (next.has(node)) {
+                next.delete(node);
+            } else {
+                next.add(node);
+            }
+            return next;
+        });
+    };
+
+    const groupSelectedNodes = () => {
+        if (groupSelection.size < 2) {
+            return;
+        }
+        const nodes = [...groupSelection];
+        binding.apply(() => {
+            groupNodes(nodes, `Group ${rows.filter((r) => r.kind === 'group').length + 1}`);
+        });
+        setGroupSelection(new Set());
+    };
+
+    const toggleVisible = (system: ParticleSystem) => {
+        setHiddenSystems((prev) => {
+            const next = new Set(prev);
+            if (next.has(system)) {
+                next.delete(system);
+                system.emitter.visible = true;
+            } else {
+                next.add(system);
+                system.emitter.visible = false;
+            }
+            return next;
+        });
+    };
+
+    React.useLayoutEffect(() => {
+        const el = bodyRef.current;
+        if (!el) return;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width;
+            if (width) setBodyWidthPx(Math.max(1, width - LABEL_WIDTH));
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    const rows = useMemo(() => computeTimelineRows(binding), [binding, binding.getRevision()]);
+    const timelineSpan = useMemo(() => computeTimelineSpan(rows), [rows]);
+    const pxPerSecond = Math.max(1, bodyWidthPx - TIMELINE_INSET) / 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). Looping
+    // effects run forever, so elapsed grows unbounded — wrap it to the visible span instead
+    // of letting the playhead fly off past the right edge.
+    React.useEffect(() => {
+        let raf: number;
+        const tick = () => {
+            if (playheadRef.current) {
+                const wrapped = timelineSpan > 0 ? playbackRef.current.elapsed % timelineSpan : 0;
+                playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + wrapped * pxPerSecond}px`;
+            }
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [pxPerSecond, timelineSpan, playbackRef, playheadRef]);
+
+    const visibleRows = useMemo(() => {
+        let hideUntilDepth: number | null = null;
+        const visible = rows.filter((row) => {
+            if (hideUntilDepth !== null) {
+                if (row.depth > hideUntilDepth) return false;
+                hideUntilDepth = null;
+            }
+            if (row.kind === 'group' && collapsedGroups.has(row.node)) {
+                hideUntilDepth = row.depth;
+            }
+            return true;
+        });
+        return visible;
+    }, [rows, collapsedGroups]);
+
+    const toggleCollapse = (node: TransformNode) => {
+        setCollapsedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(node)) {
+                next.delete(node);
+            } else {
+                next.add(node);
+            }
+            return next;
+        });
+    };
+
+    const pixelToTime = (clientX: number): number => {
+        const rect = bodyRef.current!.getBoundingClientRect();
+        const x = clientX - rect.left - LABEL_WIDTH - TIMELINE_INSET;
+        return Math.min(timelineSpan, Math.max(0, x / pxPerSecond));
+    };
+
+    const applyScrub = (time: number) => {
+        scrubTo(binding, renderer, time);
+        playbackRef.current.elapsed = time;
+        if (playheadRef.current) {
+            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + time * pxPerSecond}px`;
+        }
+        scene.render();
+    };
+
+    const queueScrub = (clientX: number) => {
+        dragRef.current.pendingTime = pixelToTime(clientX);
+        if (dragRef.current.raf == null) {
+            dragRef.current.raf = requestAnimationFrame(() => {
+                dragRef.current.raf = null;
+                const t = dragRef.current.pendingTime;
+                if (t != null) applyScrub(t);
+            });
+        }
+    };
+
+    const restart = () => {
+        applyScrub(0);
+    };
+
+    const ticks: number[] = [];
+    for (let t = 0; t <= timelineSpan; t += pickTickInterval(pxPerSecond)) {
+        ticks.push(t);
+    }
+
+    const overlayButton: React.CSSProperties = {...buttonStyle, padding: '5px 9px', minWidth: 32};
+
+    return (
+        <div
+            style={{
+                flexShrink: 0,
+                height: PANEL_HEIGHT,
+                borderTop: `1px solid ${theme.border}`,
+                background: theme.panelBg,
+                display: 'flex',
+                flexDirection: 'column',
+                fontFamily: theme.font,
+                color: theme.text,
+            }}
+        >
+            <div style={{display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderBottom: `1px solid ${theme.border}`}}>
+                <button className="qe-hover" style={overlayButton} title={paused ? 'Play' : 'Pause'} onClick={() => {
+                    playbackRef.current.paused = !paused;
+                    setPaused(!paused);
+                }}>
+                    {paused ? '▶' : '⏸'}
+                </button>
+                <button className="qe-hover" style={overlayButton} title="Step one frame" disabled={!paused} onClick={() => (playbackRef.current.stepQueued = true)}>
+                    ⏭
+                </button>
+                <button className="qe-hover" style={overlayButton} title="Restart" onClick={restart}>
+                    ⟲
+                </button>
+                <select
+                    className="qe-hover"
+                    style={{...overlayButton, padding: '5px 4px'}}
+                    title="Playback speed"
+                    value={speed}
+                    onChange={(e) => {
+                        const next = Number(e.target.value);
+                        playbackRef.current.speed = next;
+                        setSpeed(next);
+                    }}
+                >
+                    {[0.1, 0.25, 0.5, 1, 2, 4].map((s) => (
+                        <option key={s} value={s}>
+                            ×{s}
+                        </option>
+                    ))}
+                </select>
+                <span ref={counterRef} style={{fontSize: 12, color: theme.textDim, fontVariantNumeric: 'tabular-nums', paddingLeft: 4, minWidth: 120}} />
+                {groupSelection.size >= 2 && (
+                    <button className="qe-hover" style={overlayButton} title="Group the checked rows" onClick={groupSelectedNodes}>
+                        Group ({groupSelection.size})
+                    </button>
+                )}
+            </div>
+            {/* position:relative wrapper whose box is exactly the visible panel body — the
+                ruler header/divider/playhead below are its direct children (siblings of the
+                scroller, not descendants), so top:0/bottom:0 always means "100% of the panel,"
+                independent of scroll position or how many tracks there are. Also measures the
+                full-width box (labels + time axis) for pxPerSecond, since the ruler and the
+                scroller share that width. */}
+            <div ref={bodyRef} style={{position: 'relative', flex: 1, minHeight: 0}}>
+                {/* Fixed ruler header, kept out of the vertical scroller so it never scrolls
+                    away with the track rows. */}
+                <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,
+                    }}
+                >
+                    <div style={{height: RULER_HEIGHT}} />
+                    <div
+                        className="qe-hover-bg"
+                        style={{position: 'relative', height: RULER_HEIGHT, cursor: 'ew-resize', overflow: 'hidden'}}
+                        onPointerDown={(e) => {
+                            playbackRef.current.scrubbing = true;
+                            (e.target as Element).setPointerCapture(e.pointerId);
+                            queueScrub(e.clientX);
+                        }}
+                        onPointerMove={(e) => {
+                            if (playbackRef.current.scrubbing) queueScrub(e.clientX);
+                        }}
+                        onPointerUp={(e) => {
+                            playbackRef.current.scrubbing = false;
+                            (e.target as Element).releasePointerCapture?.(e.pointerId);
+                        }}
+                    >
+                        {ticks.map((t) => (
+                            <div key={t} style={{position: 'absolute', left: TIMELINE_INSET + t * pxPerSecond, top: 0, bottom: 0, borderLeft: `1px solid ${theme.border}`, fontSize: 10, color: theme.textDim, paddingLeft: 3}}>
+                                {t}s
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: RULER_HEIGHT,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'grid',
+                            gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
+                            gridAutoRows: 'min-content',
+                        }}
+                    >
+                        {visibleRows.map((row) => (
+                            <TimelineTrackRow
+                                key={row.node.uniqueId}
+                                row={row}
+                                binding={binding}
+                                selected={row.kind === 'track' && row.system === selectedSystem}
+                                onSelect={onSelect}
+                                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)}
+                            />
+                        ))}
+                    </div>
+                </div>
+                {/* Static divider between the label column and the time axis, distinct from the moving playhead. */}
+                <div style={{position: 'absolute', top: 0, bottom: 0, left: LABEL_WIDTH, width: 1, background: theme.border, pointerEvents: 'none', zIndex: 3}} />
+                <div
+                    ref={playheadRef}
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: LABEL_WIDTH + TIMELINE_INSET,
+                        width: 1,
+                        background: theme.accent,
+                        pointerEvents: 'none',
+                        zIndex: 3,
+                    }}
+                />
+            </div>
+        </div>
+    );
+}

package/src/react/TimelineTrackRow.tsx

@@ -0,0 +1,267 @@
+import React, {useState} from 'react';
+import type {ParticleSystem} from 'babylon.quarks';
+import type {EffectBinding} from '../core/binding';
+import {buildEffectTree, collectSystems} from '../core/effectTree';
+import {createChildSystem, removeSystems} from '../core/systems';
+import {ungroupNode} from '../core/groups';
+import type {TimelineRow} from '../core/timeline';
+import {PromptDialog} from './PromptDialog';
+import {theme} from './theme';
+
+const iconButton: React.CSSProperties = {background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, padding: 0};
+
+const ROW_HEIGHT = 28;
+
+export interface TimelineTrackRowProps {
+    row: TimelineRow;
+    binding: EffectBinding;
+    selected: boolean;
+    onSelect: (system: ParticleSystem) => void;
+    pxPerSecond: number;
+    /** Matches the ruler's left gutter so bars line up under the correct tick. */
+    offsetPx: number;
+    collapsed: boolean;
+    onToggleCollapse?: () => void;
+    /** Preview-only visibility (toggles `system.emitter.visible`); lets you isolate one track. */
+    hidden?: boolean;
+    onToggleVisible?: () => void;
+    /** Membership in the "group selected rows together" set (unrelated to inspector selection). */
+    groupSelected: boolean;
+    onToggleGroupSelect: () => void;
+}
+
+const checkboxButton: React.CSSProperties = {...iconButton, fontSize: 12, width: 12};
+
+/** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */
+export function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactElement {
+    const {row, binding, selected, onSelect, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect} = props;
+    const [renaming, setRenaming] = useState(false);
+
+    const isRoot = row.node === binding.root;
+
+    const labelStyle: React.CSSProperties = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        height: ROW_HEIGHT,
+        padding: '0 8px',
+        paddingLeft: 8 + row.depth * 14,
+        borderRadius: 6,
+        cursor: row.kind === 'track' ? 'pointer' : onToggleCollapse ? 'pointer' : 'default',
+        fontSize: 12.5,
+        color: row.kind === 'track' && selected ? theme.text : theme.textDim,
+        whiteSpace: 'nowrap',
+        // Left unset (rather than 'transparent') when not selected so the .qe-row-bg hover
+        // tint isn't shadowed by an inline background of the same property.
+        ...(row.kind === 'track' && selected ? {background: 'rgba(60, 105, 209, 0.3)'} : {}),
+    };
+
+    if (row.kind === 'group') {
+        return (
+            <>
+                <div className="qe-hover-bg" style={{...labelStyle, borderTop: `1px solid ${theme.border}`}} onClick={onToggleCollapse}>
+                    {!isRoot && (
+                        <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();
+                            }}
+                        >
+                            {groupSelected ? '☑' : '☐'}
+                        </button>
+                    )}
+                    <span style={{color: theme.textDim, fontSize: 10, width: 10}}>{collapsed ? '▸' : '▾'}</span>
+                    <span style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis'}}>{row.name}</span>
+                    <button
+                        className="qe-hover"
+                        title="Add system to this group"
+                        style={{...iconButton, color: theme.accent, fontSize: 13}}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            let created: ParticleSystem | undefined;
+                            binding.apply(() => {
+                                created = createChildSystem(binding.system, {
+                                    name: `system ${binding.subSystems.length + 1}`,
+                                    parentNode: row.node,
+                                });
+                                binding.system._renderer?.addSystem(created);
+                            });
+                            if (created) {
+                                binding.addSubSystem(created);
+                                onSelect(created);
+                            }
+                        }}
+                    >
+                        +
+                    </button>
+                    {!isRoot && (
+                        <button className="qe-hover" title="Rename" style={{...iconButton, color: theme.textDim}} onClick={(e) => {
+                            e.stopPropagation();
+                            setRenaming(true);
+                        }}>
+                            ✎
+                        </button>
+                    )}
+                    {!isRoot && (
+                        <button
+                            className="qe-hover"
+                            title="Ungroup (moves its contents up a level)"
+                            style={{...iconButton, color: theme.textDim, fontSize: 12}}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                binding.apply(() => ungroupNode(row.node));
+                            }}
+                        >
+                            ⛶
+                        </button>
+                    )}
+                    {!isRoot && (
+                        <button
+                            className="qe-hover"
+                            title="Remove group"
+                            style={{...iconButton, color: '#e08c8c', fontSize: 12}}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                removeSystems(binding, collectSystems(buildEffectTree(row.node)), onSelect);
+                                binding.apply(() => row.node.dispose(true, false));
+                            }}
+                        >
+                            ✕
+                        </button>
+                    )}
+                </div>
+                <div className="qe-hover-bg" style={{height: ROW_HEIGHT, borderTop: `1px solid ${theme.border}`}} onClick={onToggleCollapse} />
+                {renaming && (
+                    <PromptDialog
+                        title="Rename"
+                        defaultValue={row.name}
+                        onSubmit={(name) => {
+                            binding.apply(() => (row.node.name = name));
+                            setRenaming(false);
+                        }}
+                        onCancel={() => setRenaming(false)}
+                    />
+                )}
+            </>
+        );
+    }
+
+    const {system} = row;
+    const barLeft = offsetPx + row.startOffset * pxPerSecond;
+    const barWidth = Math.max(2, row.duration * pxPerSecond);
+
+    return (
+        <>
+            <div className="qe-hover-bg" style={{...labelStyle, opacity: hidden ? 0.5 : 1}} onClick={() => onSelect(system)}>
+                {!isRoot && (
+                    <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();
+                        }}
+                    >
+                        {groupSelected ? '☑' : '☐'}
+                    </button>
+                )}
+                <button
+                    className="qe-hover"
+                    title={hidden ? 'Show in viewport' : 'Hide in viewport'}
+                    style={{...iconButton, color: hidden ? theme.textDim : theme.accent, fontSize: 12}}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onToggleVisible?.();
+                    }}
+                >
+                    {hidden ? '◯' : '◉'}
+                </button>
+                <span style={{color: theme.accent, fontSize: 10, width: 10}}>◆</span>
+                <span style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                    {row.name}
+                    {system.onlyUsedByOther ? ' (sub)' : ''}
+                </span>
+                {!isRoot && (
+                    <button className="qe-hover" title="Rename" style={{...iconButton, color: theme.textDim}} onClick={(e) => {
+                        e.stopPropagation();
+                        setRenaming(true);
+                    }}>
+                        ✎
+                    </button>
+                )}
+                {!isRoot && row.removable && (
+                    <button
+                        className="qe-hover"
+                        title="Remove system"
+                        style={{...iconButton, color: '#e08c8c', fontSize: 12}}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            removeSystems(binding, [system], onSelect);
+                        }}
+                    >
+                        ✕
+                    </button>
+                )}
+                {selected && (
+                    <button
+                        className="qe-hover"
+                        title="Add child system"
+                        style={{...iconButton, color: theme.accent, fontSize: 13}}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            let created: ParticleSystem | undefined;
+                            binding.apply(() => {
+                                created = createChildSystem(system, {name: `system ${binding.subSystems.length + 1}`});
+                                binding.system._renderer?.addSystem(created);
+                            });
+                            if (created) {
+                                binding.addSubSystem(created);
+                                onSelect(created);
+                            }
+                        }}
+                    >
+                        +
+                    </button>
+                )}
+            </div>
+            <div className="qe-hover-bg" style={{position: 'relative', height: ROW_HEIGHT}} onClick={() => onSelect(system)}>
+                <div
+                    className="qe-hover"
+                    title={row.startOffsetVariable ? 'Start time varies per spawn' : undefined}
+                    style={{
+                        position: 'absolute',
+                        left: barLeft,
+                        width: barWidth,
+                        top: 5,
+                        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',
+                        border: system.onlyUsedByOther ? `1px dashed ${theme.accent}` : `1px solid ${theme.border}`,
+                        opacity: hidden ? 0.3 : system.onlyUsedByOther ? 0.75 : 1,
+                        boxSizing: 'border-box',
+                    }}
+                >
+                    {row.looping && (
+                        <span style={{position: 'absolute', right: 4, top: -1, fontSize: 10, color: theme.text}}>⟳</span>
+                    )}
+                </div>
+            </div>
+            {renaming && (
+                <PromptDialog
+                    title="Rename"
+                    defaultValue={row.name}
+                    onSubmit={(name) => {
+                        binding.apply(() => (row.node.name = name));
+                        setRenaming(false);
+                    }}
+                    onCancel={() => setRenaming(false)}
+                />
+            )}
+        </>
+    );
+}

package/src/react/ValueField.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {ScalarGenerator, ScalarValueState, buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
+import {CurveEditor} from './CurveEditor';
+import {NumberField, Row, SelectField} from './fields';
+
+/**
+ * Unity-like value field: Constant | Random Between Two Constants | Curve,
+ * bound to a quarks value generator.
+ */
+export function ValueField(props: {
+    label: string;
+    generator: ScalarGenerator | undefined;
+    onChange: (generator: ScalarGenerator) => void;
+    min?: number;
+    curveMax?: number;
+}) {
+    const state = readScalar(props.generator);
+
+    const commit = (patch: Partial<ScalarValueState>) => {
+        props.onChange(buildScalar({...state, ...patch}));
+    };
+
+    return (
+        <>
+            <Row label={props.label}>
+                <SelectField
+                    value={state.mode}
+                    options={[
+                        {value: 'constant', label: 'Constant'},
+                        {value: 'random', label: 'Random between two'},
+                        {value: 'curve', label: 'Curve'},
+                    ]}
+                    onChange={(mode) => commit({mode})}
+                />
+            </Row>
+            {state.mode === 'constant' && (
+                <Row label="">
+                    <NumberField value={state.value} min={props.min} onChange={(value) => commit({value})} />
+                </Row>
+            )}
+            {state.mode === 'random' && (
+                <Row label="">
+                    <div style={{display: 'flex', gap: 6}}>
+                        <NumberField value={state.min} min={props.min} onChange={(min) => commit({min})} />
+                        <NumberField value={state.max} min={props.min} onChange={(max) => commit({max})} />
+                    </div>
+                </Row>
+            )}
+            {state.mode === 'curve' && (
+                <div style={{marginTop: 6}}>
+                    <CurveEditor
+                        pieces={readPieces(props.generator)}
+                        maxValue={props.curveMax}
+                        onChange={(pieces) => props.onChange(buildCurve(pieces))}
+                    />
+                </div>
+            )}
+        </>
+    );
+}