babylon.quarks-editor 0.18.1 → 0.20.0

package/dist/react/TimelinePanel.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon } from '@heroicons/react/24/solid';
 import React, { useMemo, useRef, useState } from 'react';
-import { 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 { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
 import { pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled } from '../core/scrub';
 import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport';
 import { TimelineTrackRow } from './TimelineTrackRow';
 import { iconStyle } from './icons';
 import { buttonStyle, theme } from './theme';
@@ -29,7 +30,7 @@ function pickTickInterval(pxPerSecond) {
  * apply only to the focused effect without stopping other previews.
  */
 export function TimelinePanel(props) {
-    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true } = props;
+    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true, docked = false, showTransport = true, } = props;
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
     const [hiddenSystems, setHiddenSystems] = useState(() => new Set());
@@ -129,7 +130,18 @@ export function TimelinePanel(props) {
         };
         raf = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(raf);
-    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled, binding, scene, renderer]);
+    }, [
+        pxPerSecond,
+        timelineSpan,
+        anyLooping,
+        playbackRef,
+        playheadRef,
+        focusRootId,
+        playbackEnabled,
+        binding,
+        scene,
+        renderer,
+    ]);
     const visibleRows = useMemo(() => {
         let hideUntilDepth = null;
         const visible = rows.filter((row) => {
@@ -196,34 +208,12 @@ export function TimelinePanel(props) {
         }
     };
     const restartFocus = () => {
-        scrubFocusTo(binding, renderer, 0);
-        const state = playbackRef.current;
-        setFocusElapsed(state, focusRootId, 0);
-        clearFocusFinished(state, focusRootId);
-        if (stagePlaying) {
-            playFocus(binding);
-        }
+        restartFocusPlayback(binding, renderer, scene, playbackRef.current);
         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 handleStagePlayPause = () => toggleStagePlayback(binding, scene, playbackRef.current, stagePlaying, setStagePlaying);
     const ticks = [];
     for (let t = 0; t <= timelineSpan; t += pickTickInterval(pxPerSecond)) {
         ticks.push(t);
@@ -238,19 +228,31 @@ export function TimelinePanel(props) {
         gap: 6,
     };
     return (_jsxs("div", { style: {
-            flexShrink: 0,
-            height: PANEL_HEIGHT,
-            borderTop: `1px solid ${theme.border}`,
+            ...(docked
+                ? { flex: 1, minHeight: 0 }
+                : { 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, 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: [_jsx(RectangleGroupIcon, { style: iconStyle(14) }), "Group (", groupSelection.size, ")"] }))] }), _jsx("div", { ref: bodyRef, style: { position: 'relative', flex: 1, minHeight: 0 }, children: !playbackEnabled ? (_jsx("div", { style: {
+        }, children: [(showTransport || groupSelection.size >= 2) && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '6px 10px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [showTransport && (_jsxs(_Fragment, { 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: PLAYBACK_SPEEDS.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',
@@ -261,7 +263,7 @@ export function TimelinePanel(props) {
                         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: {
+                    }, children: "The focused effect is hidden. Show it in the Scene list to preview playback." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                 position: 'absolute',
                                 top: 0,
                                 left: 0,
@@ -271,7 +273,12 @@ export function TimelinePanel(props) {
                                 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) => {
+                            }, 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);
@@ -281,7 +288,16 @@ export function TimelinePanel(props) {
                                     }, 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: {
+                                    }, 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,
@@ -293,7 +309,16 @@ export function TimelinePanel(props) {
                                     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: {
+                                }, 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,

package/dist/react/TimelineTrackRow.d.ts

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

package/dist/react/TimelineTrackRow.js

@@ -1,9 +1,9 @@
 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 { useState } from 'react';
 import { buildEffectTree, collectSystems } from '../core/effectTree';
-import { createChildSystem, removeSystems } from '../core/systems';
 import { ungroupNode } from '../core/groups';
+import { createChildSystem, removeSystems } from '../core/systems';
 import { PromptDialog } from './PromptDialog';
 import { iconStyle } from './icons';
 import { theme } from './theme';
@@ -20,7 +20,7 @@ const ROW_HEIGHT = 28;
 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;
+    const { row, binding, selected, onSelectNode, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect, } = props;
     const [renaming, setRenaming] = useState(false);
     const isRoot = row.node === binding.root;
     const labelStyle = {
@@ -44,10 +44,17 @@ 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(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) => {
+                            }, 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(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) => {
+                            }, 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(() => {
@@ -82,7 +89,14 @@ 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(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) => {
+                        }, 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(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) => {

package/dist/react/TransportBar.d.ts

@@ -0,0 +1,24 @@
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer } from 'babylon.quarks';
+import React from 'react';
+import type { EffectBinding } from '../core/binding';
+import type { PlaybackState } from '../core/playback';
+export interface TransportBarProps {
+    binding: EffectBinding | null;
+    scene: Scene;
+    renderer: BatchedRenderer;
+    playbackRef: React.MutableRefObject<PlaybackState>;
+    /** The host's render loop writes time and particle count here. */
+    counterRef: React.RefObject<HTMLSpanElement>;
+    stagePlaying: boolean;
+    setStagePlaying: (playing: boolean) => void;
+    speed: number;
+    setSpeed: (speed: number) => void;
+    /** False when the focused effect is hidden. */
+    enabled: boolean;
+}
+/**
+ * Floating playback controls in the viewport (like Unity's Particle Effect overlay), so playing
+ * and restarting never needs the timeline open.
+ */
+export declare function TransportBar(props: TransportBarProps): React.ReactElement;

package/dist/react/TransportBar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon } from '@heroicons/react/24/solid';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport';
+import { iconStyle } from './icons';
+import { buttonStyle, theme } from './theme';
+const barButton = {
+    ...buttonStyle,
+    width: 28,
+    height: 26,
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+/**
+ * Floating playback controls in the viewport (like Unity's Particle Effect overlay), so playing
+ * and restarting never needs the timeline open.
+ */
+export function TransportBar(props) {
+    const { binding, scene, renderer, playbackRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed } = props;
+    const enabled = props.enabled && binding !== null;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            padding: 4,
+            background: theme.panelBg,
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            fontFamily: theme.font,
+        }, children: [_jsx("button", { className: "qe-hover", style: barButton, title: stagePlaying ? 'Pause (Space)' : 'Play (Space)', disabled: !enabled, onClick: () => toggleStagePlayback(binding, scene, playbackRef.current, stagePlaying, setStagePlaying), children: stagePlaying ? _jsx(PauseIcon, { style: iconStyle(14) }) : _jsx(PlayIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: barButton, title: "Step one frame", disabled: !enabled || stagePlaying, onClick: () => (playbackRef.current.stepQueued = true), children: _jsx(ForwardIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: barButton, title: "Restart the focused effect", disabled: !enabled, onClick: () => binding && restartFocusPlayback(binding, renderer, scene, playbackRef.current), children: _jsx(ArrowPathIcon, { style: iconStyle(14) }) }), _jsx("select", { className: "qe-hover", style: { ...barButton, width: 'auto', padding: '0 4px' }, title: "Playback speed", value: speed, disabled: !enabled, onChange: (e) => {
+                    const next = Number(e.target.value);
+                    playbackRef.current.speed = next;
+                    setSpeed(next);
+                }, children: PLAYBACK_SPEEDS.map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: {
+                    fontSize: 12,
+                    color: theme.textDim,
+                    fontVariantNumeric: 'tabular-nums',
+                    padding: '0 6px',
+                    minWidth: 150,
+                    whiteSpace: 'nowrap',
+                } })] }));
+}

package/dist/react/ValueField.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ScalarGenerator } from '../core/values';
 /**
  * Unity-like value field: Constant | Random Between Two Constants | Curve,
@@ -12,4 +11,4 @@ export declare function ValueField(props: {
     onChange: (generator: ScalarGenerator) => void;
     min?: number;
     curveMax?: number;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/behaviorModules.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
-import { ensureGroundResolver } from '../core/collision';
-import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, readGradientStops } from '../core/colors';
+import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, getPhysicsResolver, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors';
 import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
-import { GradientEditor } from './GradientEditor';
 import { CurveEditor } from './CurveEditor';
-import { ModuleSection } from './ModuleSection';
 import { NumberField, Row, SelectField } from './fields';
+import { GradientEditor } from './GradientEditor';
+import { ModuleSection } from './ModuleSection';
 import { ValueField } from './ValueField';
 function removeBehaviorOfType(behaviors, type) {
     for (let i = behaviors.length - 1; i >= 0; i--) {
@@ -71,17 +70,18 @@ export function EmitDirectionModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Randomize Direction", type: "ChangeEmitDirection", create: () => new ChangeEmitDirection(new IntervalValue(0, Math.PI / 6)), children: (behavior) => (_jsx(ValueField, { label: "Angle (rad)", generator: behavior.angle, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.angle = g)) })) }));
 }
 export function CollisionModule({ binding }) {
-    // Ensure the shared ground-plane resolver exists before any ApplyCollision is created,
-    // otherwise its update() would dereference an undefined resolver.
-    const resolver = ensureGroundResolver();
-    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(ensureGroundResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx(Row, { label: "Floor Y", children: _jsx(NumberField, { value: resolver.y, step: 0.1, onChange: (v) => binding.apply(() => (resolver.y = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Collides against a ground plane. Bounce is saved with the effect; Floor Y is an editor preview aid (a host can register its own colliders)." })] })) }));
+    // Like Unity: Collision stores bounce only. Colliders are host-provided via
+    // setPhysicsResolver — the editor never invents a ground plane.
+    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(getPhysicsResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Bounce is saved with the effect. Colliders come from the host (setPhysicsResolver) \u2014 without one, Collision is inert." })] })) }));
 }
 /** Shared speed-range rows for the "by Speed" trio. */
 function SpeedRangeRows({ binding, behavior }) {
     return (_jsx(Row, { label: "Speed range", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: behavior.speedRange.a, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(v, behavior.speedRange.b))) }), _jsx(NumberField, { value: behavior.speedRange.b, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(behavior.speedRange.a, v))) })] }) }));
 }
 export function ColorBySpeedModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Color by Speed", type: "ColorBySpeed", create: () => new ColorBySpeed(buildGradient(DEFAULT_GRADIENT_STOPS), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: behavior.color instanceof Gradient ? readGradientStops(behavior.color) : DEFAULT_GRADIENT_STOPS, onChange: (stops) => binding.apply(() => (behavior.color = buildGradient(stops))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Color by Speed", type: "ColorBySpeed", create: () => new ColorBySpeed(buildGradient(DEFAULT_GRADIENT_STOPS), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: behavior.color instanceof Gradient
+                            ? readGradientStops(behavior.color)
+                            : DEFAULT_GRADIENT_STOPS, onChange: (stops) => binding.apply(() => (behavior.color = buildGradient(stops))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
 }
 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 })] })) }));
@@ -106,7 +106,13 @@ export function TextureSheetModule({ binding }) {
     const startIdx = Math.min(Math.max(0, Math.round(readScalar(system.startTileIndex).value)), tiles - 1);
     const startCol = startIdx % u;
     const startRow = Math.floor(startIdx / u);
-    return (_jsxs(ModuleSection, { title: "Texture Sheet Animation", defaultOpen: false, children: [textureUrl && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: { position: 'relative', width: 218, border: '1px solid #2b3761', borderRadius: 6, overflow: 'hidden' }, children: [_jsx("img", { src: textureUrl, alt: "texture atlas", style: { width: '100%', display: 'block' } }), _jsx("div", { style: {
+    return (_jsxs(ModuleSection, { title: "Texture Sheet Animation", defaultOpen: false, children: [textureUrl && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: {
+                            position: 'relative',
+                            width: 218,
+                            border: '1px solid #2b3761',
+                            borderRadius: 6,
+                            overflow: 'hidden',
+                        }, children: [_jsx("img", { src: textureUrl, alt: "texture atlas", style: { width: '100%', display: 'block' } }), _jsx("div", { style: {
                                     position: 'absolute',
                                     inset: 0,
                                     pointerEvents: 'none',
@@ -133,7 +139,13 @@ export function TextureSheetModule({ binding }) {
                                     }, children: startIdx }) })] }), _jsxs("div", { style: { fontSize: 11, color: '#b7c6ea', marginTop: 3 }, children: [u, " \u00D7 ", v, " = ", tiles, " tiles; frame indices 0\u2013", tiles - 1, "; start tile", ' ', _jsx("span", { style: { color: '#ffce6b', fontWeight: 600 }, children: startIdx })] })] })), _jsx(Row, { label: "Tiles U", children: _jsx(NumberField, { value: system.uTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.uTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Tiles V", children: _jsx(NumberField, { value: system.vTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.vTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Blend tiles", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: system.blendTiles, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => (s.blendTiles = e.target.checked)) }) }), _jsx(Row, { label: "Start tile", children: _jsx(NumberField, { value: readScalar(system.startTileIndex).value, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.startTileIndex = new ConstantValue(Math.round(v)))) }) }), _jsx(Row, { label: "Animate frames", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: !!frameBehavior, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => {
                         removeBehaviorOfType(s.behaviors, 'FrameOverLife');
                         if (e.target.checked) {
-                            s.addBehavior(new FrameOverLife(buildScalar({ mode: 'curve', value: 0, min: 0, max: tiles - 1, curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1] })));
+                            s.addBehavior(new FrameOverLife(buildScalar({
+                                mode: 'curve',
+                                value: 0,
+                                min: 0,
+                                max: tiles - 1,
+                                curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1],
+                            })));
                         }
                     }) }) }), frameBehavior && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) }))] }));
 }

package/dist/react/index.d.ts

@@ -1,24 +1,38 @@
+export { AssetsPanel } from './AssetsPanel';
+export type { AssetsPanelProps } from './AssetsPanel';
+export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
+export { ChoiceDialog } from './ChoiceDialog';
+export type { ChoiceDialogAction, ChoiceDialogProps } from './ChoiceDialog';
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuItem, ContextMenuProps } from './ContextMenu';
+export { CurveEditor } from './CurveEditor';
+export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace';
+export type { EditorWorkspaceProps } from './EditorWorkspace';
 export { EffectEditor } from './EffectEditor';
 export type { EffectEditorProps } from './EffectEditor';
-export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
-export type { TextureOption, GeometryOption, GeometryData } from './modules';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
+export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost';
+export { EffectTreeView } from './EffectTreeView';
+export type { EffectTreeViewProps } from './EffectTreeView';
+export { CheckboxField, NumberField, Row, SelectField } from './fields';
+export { GradientEditor } from './GradientEditor';
+export { MessageDialog } from './MessageDialog';
+export type { MessageDialogProps } from './MessageDialog';
+export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
+export type { GeometryData, GeometryOption, TextureOption } from './modules';
+export { ModuleSection } from './ModuleSection';
+export { ProjectsPage } from './ProjectsPage';
+export type { ProjectsPageProps } from './ProjectsPage';
+export { PromptDialog } from './PromptDialog';
+export type { PromptDialogProps } from './PromptDialog';
+export { ScenePanel } from './ScenePanel';
+export type { ScenePanelProps } from './ScenePanel';
 export { SubEmittersModule } from './SubEmittersModule';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
 export { TimelinePanel } from './TimelinePanel';
-export type { TimelinePanelProps, PlaybackState } from './TimelinePanel';
+export type { PlaybackState, TimelinePanelProps } from './TimelinePanel';
 export { TimelineTrackRow } from './TimelineTrackRow';
 export type { TimelineTrackRowProps } from './TimelineTrackRow';
-export { ModuleSection } from './ModuleSection';
-export { PromptDialog } from './PromptDialog';
-export type { PromptDialogProps } from './PromptDialog';
-export { CurveEditor } from './CurveEditor';
-export { GradientEditor } from './GradientEditor';
+export { TransportBar } from './TransportBar';
+export type { TransportBarProps } from './TransportBar';
 export { ValueField } from './ValueField';
-export { Row, NumberField, CheckboxField, SelectField } from './fields';
-export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
-export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
-export { MessageDialog } from './MessageDialog';
-export type { MessageDialogProps } from './MessageDialog';
-export { GalleryPanel } from './GalleryPanel';
-export type { GalleryPanelProps } from './GalleryPanel';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
-export type { EffectEditorHostProps, EffectEditorHostHandle } from './EffectEditorHost';

package/dist/react/index.js

@@ -1,16 +1,23 @@
+export { AssetsPanel } from './AssetsPanel';
+export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
+export { ChoiceDialog } from './ChoiceDialog';
+export { ContextMenu } from './ContextMenu';
+export { CurveEditor } from './CurveEditor';
+export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace';
 export { EffectEditor } from './EffectEditor';
-export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
+export { EffectTreeView } from './EffectTreeView';
+export { CheckboxField, NumberField, Row, SelectField } from './fields';
+export { GradientEditor } from './GradientEditor';
+export { MessageDialog } from './MessageDialog';
+export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
+export { ModuleSection } from './ModuleSection';
+export { ProjectsPage } from './ProjectsPage';
+export { PromptDialog } from './PromptDialog';
+export { ScenePanel } from './ScenePanel';
 export { SubEmittersModule } from './SubEmittersModule';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
 export { TimelinePanel } from './TimelinePanel';
 export { TimelineTrackRow } from './TimelineTrackRow';
-export { ModuleSection } from './ModuleSection';
-export { PromptDialog } from './PromptDialog';
-export { CurveEditor } from './CurveEditor';
-export { GradientEditor } from './GradientEditor';
+export { TransportBar } from './TransportBar';
 export { ValueField } from './ValueField';
-export { Row, NumberField, CheckboxField, SelectField } from './fields';
-export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
-export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
-export { MessageDialog } from './MessageDialog';
-export { GalleryPanel } from './GalleryPanel';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';

package/dist/react/inspectorHints.js

@@ -117,8 +117,7 @@ const INSPECTOR_HINTS = {
     'turbulence.strength': 'Per-axis multiplier for turbulent velocity.',
     'Time scale': 'How fast the turbulence field evolves over time (per axis).',
     'Angle (rad)': 'Maximum random deflection from the base emit direction, in radians.',
-    Bounce: 'Energy retained after hitting the ground (0 = no bounce, 1 = full bounce).',
-    'Floor Y': 'World-space Y height of the preview ground plane used for collision.',
+    Bounce: 'Energy retained after a collision (0 = stick, 1 = full bounce). Colliders are host-provided.',
     'Speed range': 'Particle speed range (min, max) that maps to the color/size/rotation curve.',
     'Orbit speed': 'Angular speed of orbit around the configured axis over lifetime.',
     'rotationOverLife.velocity': 'Angular velocity applied over normalized lifetime (rad/s).',