babylon.quarks-editor 0.17.7

package/dist/react/GradientEditor.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { hexToRgb, rgbToHex, stopsToCssGradient } from '../core/colors';
+import { NumberField, Row } from './fields';
+import { buttonStyle, theme } from './theme';
+const BAR_WIDTH = 218;
+/** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
+export function GradientEditor(props) {
+    const [selected, setSelected] = useState(0);
+    const barRef = useRef(null);
+    const dragging = useRef(false);
+    const stops = props.stops;
+    const current = stops[Math.min(selected, stops.length - 1)];
+    const posFromEvent = (clientX) => {
+        const rect = barRef.current.getBoundingClientRect();
+        return Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    };
+    const updateStop = (index, patch) => {
+        const next = stops.map((s, i) => (i === index ? { ...s, ...patch } : s));
+        props.onChange(next);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { ref: barRef, className: "qe-hover", style: {
+                    position: 'relative',
+                    width: BAR_WIDTH,
+                    height: 20,
+                    borderRadius: 6,
+                    border: `1px solid ${theme.border}`,
+                    background: `${stopsToCssGradient(stops)}, repeating-conic-gradient(#333 0% 25%, #555 0% 50%) 0 0 / 10px 10px`,
+                    cursor: 'copy',
+                }, onPointerDown: (e) => {
+                    if (e.target !== barRef.current) {
+                        return;
+                    }
+                    const pos = posFromEvent(e.clientX);
+                    const base = current ?? { r: 1, g: 1, b: 1, a: 1, pos: 0 };
+                    const next = [...stops, { ...base, pos }];
+                    props.onChange(next);
+                    setSelected(next.length - 1);
+                }, onPointerMove: (e) => {
+                    if (dragging.current) {
+                        updateStop(selected, { pos: posFromEvent(e.clientX) });
+                    }
+                }, onPointerUp: () => {
+                    dragging.current = false;
+                }, children: stops.map((stop, i) => (_jsx("div", { className: "qe-hover", style: {
+                        position: 'absolute',
+                        left: `calc(${stop.pos * 100}% - 6px)`,
+                        top: -4,
+                        width: 12,
+                        height: 26,
+                        borderRadius: 4,
+                        background: rgbToHex(stop.r, stop.g, stop.b),
+                        border: `2px solid ${i === selected ? theme.accent : '#0a1020'}`,
+                        cursor: 'ew-resize',
+                        boxSizing: 'border-box',
+                    }, onPointerDown: (e) => {
+                        e.stopPropagation();
+                        setSelected(i);
+                        dragging.current = true;
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                    }, onPointerMove: (e) => {
+                        if (dragging.current && i === selected) {
+                            updateStop(i, { pos: posFromEvent(e.clientX) });
+                        }
+                    }, onPointerUp: (e) => {
+                        dragging.current = false;
+                        e.currentTarget.releasePointerCapture(e.pointerId);
+                    } }, i))) }), current && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Stop color", children: _jsx("input", { type: "color", className: "qe-hover", value: rgbToHex(current.r, current.g, current.b), onChange: (e) => updateStop(selected, hexToRgb(e.target.value)), style: { width: 42, height: 24, border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } }) }), _jsx(Row, { label: "Stop alpha", children: _jsx(NumberField, { value: current.a, min: 0, step: 0.05, onChange: (a) => updateStop(selected, { a: Math.min(1, a) }) }) }), _jsx(Row, { label: "Stop position", children: _jsx(NumberField, { value: current.pos, min: 0, step: 0.05, onChange: (pos) => updateStop(selected, { pos: Math.min(1, pos) }) }) }), stops.length > 2 && (_jsx("button", { className: "qe-hover", style: { ...buttonStyle, marginTop: 6 }, onClick: () => {
+                            props.onChange(stops.filter((_, i) => i !== selected));
+                            setSelected(0);
+                        }, children: "Remove stop" }))] }))] }));
+}

package/dist/react/ModuleSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/** Unity-style module foldout with an optional enable checkbox. */
+export declare function ModuleSection(props: {
+    title: string;
+    children: React.ReactNode;
+    enabled?: boolean;
+    onToggle?: (enabled: boolean) => void;
+    defaultOpen?: boolean;
+}): React.JSX.Element;

package/dist/react/ModuleSection.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { theme } from './theme';
+/** Unity-style module foldout with an optional enable checkbox. */
+export function ModuleSection(props) {
+    const [open, setOpen] = useState(props.defaultOpen ?? true);
+    const toggleable = props.onToggle !== undefined;
+    const dimmed = toggleable && props.enabled === false;
+    return (_jsxs("section", { style: {
+            border: `1px solid ${theme.border}`,
+            borderRadius: 10,
+            background: theme.sectionBg,
+            marginTop: 8,
+            overflow: 'hidden',
+        }, children: [_jsxs("header", { className: "qe-hover", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '7px 10px',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    background: 'rgba(20, 30, 60, 0.5)',
+                }, onClick: () => setOpen(!open), children: [_jsx("span", { style: { color: theme.accent, fontSize: 10, width: 10 }, children: open ? '▼' : '►' }), toggleable && (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.enabled, onClick: (e) => e.stopPropagation(), onChange: (e) => props.onToggle?.(e.target.checked), style: { width: 14, height: 14, accentColor: '#78a5ff', cursor: 'pointer' } })), _jsx("span", { style: { color: dimmed ? theme.textDim : theme.text, fontSize: 13, fontWeight: 600 }, children: props.title })] }), open && !dimmed && _jsx("div", { style: { padding: '4px 10px 10px' }, children: props.children })] }));
+}

package/dist/react/PromptDialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface PromptDialogProps {
+    title: string;
+    defaultValue?: string;
+    placeholder?: string;
+    confirmLabel?: string;
+    /** Rejects empty/whitespace-only input by default (matches the old prompt() behavior). */
+    allowEmpty?: boolean;
+    onSubmit: (value: string) => void;
+    onCancel: () => void;
+}
+/** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on
+ * Enter, cancels on Escape or backdrop click. */
+export declare function PromptDialog(props: PromptDialogProps): React.ReactElement;

package/dist/react/PromptDialog.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { buttonStyle, inputStyle, theme } from './theme';
+/** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on
+ * Enter, cancels on Escape or backdrop click. */
+export function PromptDialog(props) {
+    const { title, defaultValue = '', placeholder, confirmLabel = 'OK', allowEmpty = false, onSubmit, onCancel } = props;
+    const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const submit = () => {
+        const trimmed = value.trim();
+        if (trimmed || allowEmpty) {
+            onSubmit(trimmed);
+        }
+        else {
+            onCancel();
+        }
+    };
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(3, 5, 12, 0.6)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            fontFamily: theme.font,
+        }, onClick: onCancel, children: _jsxs("div", { style: {
+                background: theme.panelBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                padding: 16,
+                minWidth: 300,
+                boxShadow: '0 12px 32px rgba(0, 0, 0, 0.5)',
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontSize: 13, color: theme.text, marginBottom: 10 }, children: title }), _jsx("input", { ref: inputRef, className: "qe-hover", style: { ...inputStyle, marginBottom: 14 }, value: value, placeholder: placeholder, onChange: (e) => setValue(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            submit();
+                        if (e.key === 'Escape')
+                            onCancel();
+                    } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, onClick: onCancel, children: "Cancel" }), _jsx("button", { className: "qe-hover", style: { ...buttonStyle, background: theme.accent, color: '#0a1128', borderColor: theme.accent }, onClick: submit, children: confirmLabel })] })] }) }));
+}

package/dist/react/SubEmittersModule.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { EffectBinding } from '../core/binding';
+/**
+ * Sub Emitters module for the currently selected system. The spawned target lives as a
+ * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).
+ */
+export declare function SubEmittersModule(props: {
+    binding: EffectBinding;
+    rootBinding: EffectBinding;
+}): React.JSX.Element;

package/dist/react/SubEmittersModule.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EmitSubParticleSystem, SubParticleEmitMode } from 'babylon.quarks';
+import { findBehavior } from '../core/colors';
+import { createChildSystem } from '../core/systems';
+import { ModuleSection } from './ModuleSection';
+import { CheckboxField, NumberField, Row, SelectField } from './fields';
+import { theme } from './theme';
+/**
+ * Sub Emitters module for the currently selected system. The spawned target lives as a
+ * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).
+ */
+export function SubEmittersModule(props) {
+    const { binding, rootBinding } = props;
+    const system = binding.system;
+    const behavior = findBehavior(system.behaviors, 'EmitSubParticleSystem');
+    const target = behavior?.subParticleSystem?.system;
+    return (_jsx(ModuleSection, { title: "Sub Emitters", enabled: !!behavior, defaultOpen: false, onToggle: (enabled) => binding.apply((s) => {
+            for (let i = s.behaviors.length - 1; i >= 0; i--) {
+                if (s.behaviors[i].type === 'EmitSubParticleSystem') {
+                    s.behaviors.splice(i, 1);
+                }
+            }
+            if (enabled) {
+                const sub = createChildSystem(s, { oneShot: true });
+                s._renderer?.addSystem(sub);
+                rootBinding.addSubSystem(sub);
+                s.addBehavior(new EmitSubParticleSystem(s, false, sub.emitter, SubParticleEmitMode.Death, 1));
+            }
+            else if (target) {
+                s._renderer?.deleteSystem(target);
+                target.dispose();
+                rootBinding.removeSubSystem(target);
+            }
+        }), children: behavior && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Trigger", children: _jsx(SelectField, { value: behavior.mode, options: [
+                            { value: SubParticleEmitMode.Death, label: 'On death' },
+                            { value: SubParticleEmitMode.Birth, label: 'On birth' },
+                            { value: SubParticleEmitMode.Frame, label: 'Every frame' },
+                        ], onChange: (mode) => binding.apply(() => (behavior.mode = mode)) }) }), _jsx(Row, { label: "Probability", children: _jsx(NumberField, { value: behavior.emitProbability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.emitProbability = Math.min(1, v))) }) }), _jsx(Row, { label: "Use velocity", children: _jsx(CheckboxField, { value: behavior.useVelocityAsBasis, onChange: (v) => binding.apply(() => (behavior.useVelocityAsBasis = v)) }) }), _jsxs("p", { style: { margin: '8px 0 2px', color: theme.textDim, fontSize: 11.5 }, children: ["Spawns \u201C", target?.emitter.name ?? 'sub-emitter', "\u201D \u2014 select it in the hierarchy above to edit it."] })] })) }));
+}

package/dist/react/TimelinePanel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ParticleSystem, BatchedRenderer } from 'babylon.quarks';
+import type { Scene } from '@babylonjs/core/scene';
+import type { EffectBinding } from '../core/binding';
+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;
+}
+/** Small gap between the label column and the first pixel of the time axis. */
+export declare const TIMELINE_INSET = 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 declare function TimelinePanel(props: TimelinePanelProps): React.ReactElement;

package/dist/react/TimelinePanel.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useRef, useState } from 'react';
+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';
+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) {
+    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) {
+    const { binding, selectedSystem, onSelect, scene, renderer, playbackRef, playheadRef, counterRef, paused, setPaused, speed, setSpeed } = 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.
+    React.useEffect(() => {
+        setHiddenSystems(new Set());
+        setGroupSelection(new Set());
+    }, [binding]);
+    const toggleGroupSelect = (node) => {
+        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) => {
+        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;
+        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 = 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) => {
+        setCollapsedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(node)) {
+                next.delete(node);
+            }
+            else {
+                next.add(node);
+            }
+            return next;
+        });
+    };
+    const pixelToTime = (clientX) => {
+        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) => {
+        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) => {
+        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 = [];
+    for (let t = 0; t <= timelineSpan; t += pickTickInterval(pxPerSecond)) {
+        ticks.push(t);
+    }
+    const overlayButton = { ...buttonStyle, padding: '5px 9px', minWidth: 32 };
+    return (_jsxs("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,
+        }, 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: () => {
+                            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) => {
+                            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))) })] }), _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.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) }, 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.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ParticleSystem } from 'babylon.quarks';
+import type { EffectBinding } from '../core/binding';
+import type { TimelineRow } from '../core/timeline';
+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;
+}
+/** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */
+export declare function TimelineTrackRow(props: TimelineTrackRowProps): React.ReactElement;

package/dist/react/TimelineTrackRow.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { buildEffectTree, collectSystems } from '../core/effectTree';
+import { createChildSystem, removeSystems } from '../core/systems';
+import { ungroupNode } from '../core/groups';
+import { PromptDialog } from './PromptDialog';
+import { theme } from './theme';
+const iconButton = { background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, padding: 0 };
+const ROW_HEIGHT = 28;
+const checkboxButton = { ...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) {
+    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 = {
+        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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, borderTop: `1px solid ${theme.border}` }, onClick: onToggleCollapse, 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", { style: { color: theme.textDim, fontSize: 10, width: 10 }, 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) => {
+                                e.stopPropagation();
+                                let created;
+                                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);
+                                }
+                            }, children: "+" }), !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) => {
+                                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) => {
+                                e.stopPropagation();
+                                removeSystems(binding, collectSystems(buildEffectTree(row.node)), onSelect);
+                                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: onToggleCollapse }), renaming && (_jsx(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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, opacity: hidden ? 0.5 : 1 }, onClick: () => onSelect(system), 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) => {
+                            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) => {
+                            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) => {
+                            e.stopPropagation();
+                            removeSystems(binding, [system], onSelect);
+                        }, children: "\u2715" })), selected && (_jsx("button", { className: "qe-hover", title: "Add child system", style: { ...iconButton, color: theme.accent, fontSize: 13 }, onClick: (e) => {
+                            e.stopPropagation();
+                            let created;
+                            binding.apply(() => {
+                                created = createChildSystem(system, { name: `system ${binding.subSystems.length + 1}` });
+                                binding.system._renderer?.addSystem(created);
+                            });
+                            if (created) {
+                                binding.addSubSystem(created);
+                                onSelect(created);
+                            }
+                        }, children: "+" }))] }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: ROW_HEIGHT }, onClick: () => onSelect(system), children: _jsx("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',
+                    }, 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);
+                }, onCancel: () => setRenaming(false) }))] }));
+}

package/dist/react/ValueField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScalarGenerator } from '../core/values';
+/**
+ * Unity-like value field: Constant | Random Between Two Constants | Curve,
+ * bound to a quarks value generator.
+ */
+export declare function ValueField(props: {
+    label: string;
+    generator: ScalarGenerator | undefined;
+    onChange: (generator: ScalarGenerator) => void;
+    min?: number;
+    curveMax?: number;
+}): React.JSX.Element;