babylon.quarks-editor 0.17.9 → 0.18.0

package/src/react/EffectEditorHost.tsx

@@ -25,21 +25,30 @@ import {GridMaterial} from '@babylonjs/materials/grid/gridMaterial';
 import {
     BatchedRenderer,
     ParticleSystem,
+    QuarksUtil,
 } from 'babylon.quarks';
 import {EffectBinding} from '../core/binding';
 import {EffectHistory} from '../core/history';
 import {ensureGroundResolver} from '../core/collision';
 import {createGalleryDefaultEntry} from '../core/defaultEffect';
 import {loadEffectFromJson, disposeLoadedEffect, parseEffectFromJson} from '../core/loadEffect';
-import {applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview} from '../core/galleryPlayback';
-import {createPlaybackState, getFocusElapsed, isFocusFinished, setFocusElapsed, type PlaybackState} from '../core/playback';
+import {applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview, pauseFinishedPreviews} from '../core/galleryPlayback';
+import {createPlaybackState, clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, type PlaybackState} from '../core/playback';
+import {pauseFocus, scrubFocusToSettled} from '../core/scrub';
+import {logRenderMismatch} from '../core/renderDebug';
 import {cancelGalleryCameraFocus, focusGalleryEntry} from '../core/galleryLayout';
 import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
 import {GalleryDropMarker} from '../core/galleryDropMarker';
 import {GallerySelectionMarker} from '../core/gallerySelectionMarker';
 import {EmitterShapeWireframes} from '../core/emitterShapeWireframe';
 import {getGalleryDragSession, setGalleryDragSession} from '../core/galleryDragSession';
-import {pickGroundPosition, placeGalleryEntriesAt, placeGalleryEntryInScene} from '../core/galleryScene';
+import {
+    clearGalleryEntrySimulation,
+    pickGroundPosition,
+    placeGalleryEntriesAt,
+    placeGalleryEntryInScene,
+    removeGalleryEntryFromScene,
+} from '../core/galleryScene';
 import {describeGalleryDrag, GALLERY_DRAG_MIME, readGalleryDrag} from '../core/galleryTree';
 import {loadEffectGallery, collectJsonFiles, bindingFromGalleryEntry, mergeGalleryEntries, type GalleryEntry, type GalleryLoadProgress} from '../core/loadEffectGallery';
 import {pickGalleryJsonFiles} from '../core/pickGalleryFiles';
@@ -135,6 +144,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
     const importGalleryRef = useRef<(files: FileList | File[]) => Promise<void>>(async () => {});
     const selectGalleryEntryRef = useRef<(entry: GalleryEntry) => void>(() => {});
     const toggleGalleryPreviewRef = useRef<(entry: GalleryEntry) => void>(() => {});
+    const removeGalleryFromSceneRef = useRef<(entry: GalleryEntry) => void>(() => {});
     const placeGalleryDropRef = useRef<(clientX: number, clientY: number, dataTransfer?: DataTransfer) => void>(() => {});
     const createGalleryDefaultRef = useRef<() => void>(() => {});
     const dropMarkerRef = useRef<GalleryDropMarker | null>(null);
@@ -352,12 +362,14 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                 return;
             }
             const id = entry.root.uniqueId;
+            const removing = (stateRef.current?.previewRootIds ?? []).includes(id);
             setPreviewRootIds((prev) => {
                 const next = new Set(prev);
                 if (next.has(id)) {
                     next.delete(id);
                 } else {
                     next.add(id);
+                    clearFocusFinished(playbackRef.current, id);
                 }
                 const ids = [...next];
                 if (stateRef.current) {
@@ -365,6 +377,47 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                 }
                 return ids;
             });
+            if (removing) {
+                clearGalleryEntrySimulation(entry, renderer);
+                clearFocusFinished(playbackRef.current, id);
+            }
+            renderer.refreshBatches();
+            scene.render();
+            force();
+        };
+
+        const removeGalleryFromScene = (entry: GalleryEntry) => {
+            if (!entry.inScene) {
+                return;
+            }
+            const id = entry.root.uniqueId;
+            removeGalleryEntryFromScene(entry, renderer, galleryRoot);
+            setPreviewRootIds((prev) => {
+                const next = prev.filter((rootId) => rootId !== id);
+                if (stateRef.current) {
+                    stateRef.current.previewRootIds = next;
+                }
+                return next;
+            });
+            clearFocusFinished(playbackRef.current, id);
+            playbackRef.current.focusElapsedByRoot.delete(id);
+            galleryEntries = [...galleryEntries];
+            if (stateRef.current) {
+                stateRef.current.galleryEntries = galleryEntries;
+            }
+            setGallery(galleryEntries);
+            if (stateRef.current?.binding?.root === entry.root) {
+                selectionMarker.hide();
+            }
+            applyGalleryPlayback(
+                galleryEntries,
+                new Set(stateRef.current?.previewRootIds ?? []),
+                playbackRef.current.stagePlaying,
+                playbackRef.current.focusFinishedByRoot
+            );
+            renderer.refreshBatches();
+            scene.render();
+            force();
         };
 
         const addGalleryPreview = (...entries: GalleryEntry[]) => {
@@ -503,6 +556,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
         importGalleryRef.current = appendGalleryFromFiles;
         selectGalleryEntryRef.current = focusCatalogEntry;
         toggleGalleryPreviewRef.current = toggleGalleryPreview;
+        removeGalleryFromSceneRef.current = removeGalleryFromScene;
         placeGalleryDropRef.current = placeGalleryDropAt;
         createGalleryDefaultRef.current = appendGalleryDefault;
 
@@ -550,11 +604,41 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                         hasActivePreview(snapshot.galleryEntries, previewIds) && (playback.stagePlaying || stepQueued);
                     if (simulate) {
                         renderer.update(delta);
-                        const focusId = playback.focusRootId ?? snapshot.binding?.root.uniqueId ?? null;
-                        if (focusId != null && playback.stagePlaying && !playback.focusFinishedByRoot.has(focusId)) {
+                        let needsRefresh = false;
+                        if (pauseFinishedPreviews(snapshot.galleryEntries, previewIds, playback.focusFinishedByRoot)) {
+                            needsRefresh = true;
+                        }
+                        const binding = snapshot.binding;
+                        const focusId = playback.focusRootId ?? binding?.root.uniqueId ?? null;
+                        if (
+                            focusId != null &&
+                            binding &&
+                            playback.stagePlaying &&
+                            !playback.focusFinishedByRoot.has(focusId) &&
+                            !focusTimelineMetaRef.current.anyLooping &&
+                            QuarksUtil.isEffectFinished(binding.root)
+                        ) {
+                            const settleAt = getFocusElapsed(playback, focusId);
+                            scrubFocusToSettled(binding, renderer, settleAt);
+                            markFocusFinished(playback, focusId);
+                            pauseFocus(binding);
+                            needsRefresh = true;
+                        } else if (
+                            focusId != null &&
+                            playback.stagePlaying &&
+                            !playback.focusFinishedByRoot.has(focusId)
+                        ) {
                             const prev = getFocusElapsed(playback, focusId);
                             setFocusElapsed(playback, focusId, prev + delta);
                         }
+                        if (needsRefresh) {
+                            renderer.refreshBatches();
+                        }
+                        if (snapshot.galleryEntries.length > 0) {
+                            logRenderMismatch(renderer, countGalleryParticles(snapshot.galleryEntries, previewIds));
+                        }
+                    } else if (snapshot && snapshot.galleryEntries.length > 0) {
+                        renderer.refreshBatches();
                     }
                 }
             }
@@ -606,7 +690,9 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                     const stageLabel = playback.stagePlaying ? 'playing' : 'paused';
                     const timeLabel = meta.anyLooping
                         ? `${focusElapsed.toFixed(1)}s ⟳`
-                        : `${Math.min(focusElapsed, meta.span).toFixed(1)}s / ${meta.span.toFixed(1)}s${focusEnded ? ' (end)' : ''}`;
+                        : focusEnded
+                          ? `${focusElapsed.toFixed(1)}s / ${meta.span.toFixed(1)}s (end)`
+                          : `${focusElapsed.toFixed(1)}s / ${meta.span.toFixed(1)}s`;
                     counterRef.current.textContent = `${playing} preview · ${stageLabel}${focusLabel} · ${timeLabel} · ${count} particles · ${inScene}/${snapshot.galleryEntries.length} in catalog`;
                 }
             } else if (binding) {
@@ -620,7 +706,9 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                     const stageLabel = playback.stagePlaying ? 'playing' : 'paused';
                     const timeLabel = meta.anyLooping
                         ? `${focusElapsed.toFixed(1)}s ⟳`
-                        : `${Math.min(focusElapsed, meta.span).toFixed(1)}s / ${meta.span.toFixed(1)}s${focusEnded ? ' (end)' : ''}`;
+                        : focusEnded
+                          ? `${focusElapsed.toFixed(1)}s / ${meta.span.toFixed(1)}s (end)`
+                          : `${focusElapsed.toFixed(1)}s / ${meta.span.toFixed(1)}s`;
                     counterRef.current.textContent = `${stageLabel} · ${timeLabel} · ${count} particles`;
                 }
             }
@@ -678,7 +766,15 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
         if (!isCatalogEntry) {
             return;
         }
-        applyGalleryPlayback(snap.galleryEntries, new Set(previewRootIds), stagePlaying);
+        applyGalleryPlayback(
+            snap.galleryEntries,
+            new Set(previewRootIds),
+            stagePlaying,
+            playbackRef.current.focusFinishedByRoot
+        );
+        if (!stagePlaying && stateRef.current?.renderer) {
+            stateRef.current.renderer.refreshBatches();
+        }
     }, [stagePlaying, previewRootIds, gallery]);
 
     useEffect(() => {
@@ -875,7 +971,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                             Gallery{gallery.length > 0 ? ` · ${gallery.length}` : ''}
                         </div>
                         <div style={{fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4}}>
-                            Drag into the viewport to place effects.
+                            Drag into viewport to place · ✓ preview · × remove from stage
                         </div>
                     </div>
                     <div style={{flex: 1, minHeight: 0, overflow: 'hidden', padding: '8px 12px 14px', display: 'flex', flexDirection: 'column'}}>
@@ -887,6 +983,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                             folderInputRef={galleryFolderInputRef}
                             onFocus={(entry) => selectGalleryEntryRef.current(entry)}
                             onTogglePreview={(entry) => toggleGalleryPreviewRef.current(entry)}
+                            onRemoveFromScene={(entry) => removeGalleryFromSceneRef.current(entry)}
                             onImportFiles={(files) => void runGalleryImport(files)}
                             onImportFolder={() => void handleImportFolder()}
                             onCreateDefault={() => createGalleryDefaultRef.current()}
@@ -1134,6 +1231,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                     selectedNode={selectedNode}
                     onSelectNode={setSelectedNode}
                     scene={state.scene}
+                    renderer={state.renderer}
                     playbackRef={playbackRef}
                     playheadRef={playheadRef}
                     counterRef={counterRef}

package/src/react/GalleryPanel.tsx

@@ -7,6 +7,7 @@ import {
     FolderIcon,
     FolderOpenIcon,
     SparklesIcon,
+    XMarkIcon,
 } from '@heroicons/react/24/solid';
 import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {GalleryEntry, GalleryLoadProgress} from '../core/loadEffectGallery';
@@ -34,6 +35,7 @@ export interface GalleryPanelProps {
     folderInputRef: React.RefObject<HTMLInputElement | null>;
     onFocus: (entry: GalleryEntry) => void;
     onTogglePreview: (entry: GalleryEntry) => void;
+    onRemoveFromScene: (entry: GalleryEntry) => void;
     onImportFiles: (files: FileList | File[]) => void;
     onImportFolder: () => void;
     onCreateDefault: () => void;
@@ -55,9 +57,18 @@ function EffectRow(props: {
     inPreview: boolean;
     onFocus: (entry: GalleryEntry) => void;
     onTogglePreview: (entry: GalleryEntry) => void;
+    onRemoveFromScene: (entry: GalleryEntry) => void;
 }): React.ReactElement {
-    const {entry, depth, focused, inPreview, onFocus, onTogglePreview} = props;
+    const {entry, depth, focused, inPreview, onFocus, onTogglePreview, onRemoveFromScene} = props;
     const isLooping = entry.systems.some((system) => system.looping);
+    const parkedOnStage = entry.inScene && !inPreview;
+    const rowBackground = focused
+        ? 'rgba(120, 165, 255, 0.22)'
+        : inPreview
+          ? 'rgba(120, 165, 255, 0.1)'
+          : parkedOnStage
+            ? 'rgba(120, 165, 255, 0.04)'
+            : 'transparent';
     return (
         <div
             style={{
@@ -66,7 +77,7 @@ function EffectRow(props: {
                 width: '100%',
                 height: GALLERY_ROW_HEIGHT,
                 borderBottom: `1px solid ${theme.border}`,
-                background: focused ? 'rgba(120, 165, 255, 0.22)' : inPreview ? 'rgba(120, 165, 255, 0.08)' : 'transparent',
+                background: rowBackground,
                 boxSizing: 'border-box',
             }}
         >
@@ -74,7 +85,11 @@ function EffectRow(props: {
                 <button
                     type="button"
                     className="qe-hover"
-                    title={inPreview ? 'Remove from stage preview' : 'Preview on stage (keep playing)'}
+                    title={
+                        inPreview
+                            ? 'Remove from stage preview — stops group playback and clears particles; effect stays on stage'
+                            : 'Add to stage preview — plays with Stage Play/Pause'
+                    }
                     style={{
                         flexShrink: 0,
                         width: 28,
@@ -93,7 +108,11 @@ function EffectRow(props: {
                         onTogglePreview(entry);
                     }}
                 >
-                    {inPreview ? <CheckCircleIcon style={iconStyle(14)} /> : <span style={{width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, boxSizing: 'border-box'}} />}
+                    {inPreview ? (
+                        <CheckCircleIcon style={iconStyle(14)} />
+                    ) : (
+                        <span style={{width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, boxSizing: 'border-box'}} />
+                    )}
                 </button>
             ) : (
                 <span style={{width: 28, flexShrink: 0, borderRight: `1px solid ${theme.border}`}} />
@@ -104,8 +123,8 @@ function EffectRow(props: {
                 className="qe-hover-bg"
                 title={
                     entry.inScene
-                        ? `${entry.path} — in scene · Ctrl+click toggles preview`
-                        : `${entry.path} — drag into viewport`
+                        ? `${entry.path} — on stage${inPreview ? ' · previewing' : ' · parked'} · Ctrl+click toggles preview`
+                        : `${entry.path} — catalog only · drag into viewport to place`
                 }
                 style={{
                     display: 'flex',
@@ -118,7 +137,7 @@ function EffectRow(props: {
                     border: 'none',
                     background: 'transparent',
                     color: focused ? theme.text : theme.textDim,
-                    padding: `0 12px 0 ${8 + depth * 14}px`,
+                    padding: `0 8px 0 ${8 + depth * 14}px`,
                     fontSize: 12.5,
                     cursor: 'grab',
                     fontFamily: theme.font,
@@ -133,16 +152,56 @@ function EffectRow(props: {
                 onDragStart={(e) => beginGalleryDrag(e, {kind: 'effect', id: entry.root.uniqueId})}
                 onDragEnd={endGalleryDrag}
             >
-                <span style={{width: 14, flexShrink: 0, opacity: entry.inScene ? 1 : 0.35, color: entry.inScene ? theme.accent : theme.textDim, display: 'inline-flex'}}>
-                    {entry.inScene ? <SparklesIcon style={iconStyle(14)} /> : <SparklesIcon style={iconStyle(14)} />}
+                <span
+                    style={{
+                        width: 14,
+                        flexShrink: 0,
+                        opacity: entry.inScene ? 1 : 0.35,
+                        color: inPreview ? theme.accent : entry.inScene ? theme.text : theme.textDim,
+                        display: 'inline-flex',
+                    }}
+                    title={entry.inScene ? 'On stage' : 'Catalog only'}
+                >
+                    <SparklesIcon style={iconStyle(14)} />
                 </span>
                 <span style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{entry.name}</span>
+                {parkedOnStage && (
+                    <span title="On stage but not in preview" style={{flexShrink: 0, fontSize: 10, color: theme.textDim, letterSpacing: 0.3}}>
+                        parked
+                    </span>
+                )}
                 {isLooping && (
                     <span title="Looping effect" style={{flexShrink: 0, fontSize: 11, color: theme.textDim}}>
                         ⟳
                     </span>
                 )}
             </button>
+            {entry.inScene ? (
+                <button
+                    type="button"
+                    className="qe-hover"
+                    title="Remove from scene — returns to catalog; drag into viewport to place again"
+                    style={{
+                        flexShrink: 0,
+                        width: 28,
+                        border: 'none',
+                        borderLeft: `1px solid ${theme.border}`,
+                        background: 'transparent',
+                        color: theme.textDim,
+                        cursor: 'pointer',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: 0,
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onRemoveFromScene(entry);
+                    }}
+                >
+                    <XMarkIcon style={iconStyle(13)} />
+                </button>
+            ) : null}
         </div>
     );
 }
@@ -218,9 +277,10 @@ function VirtualGalleryTree(props: {
     previewRootIds: ReadonlySet<number>;
     onFocus: (entry: GalleryEntry) => void;
     onTogglePreview: (entry: GalleryEntry) => void;
+    onRemoveFromScene: (entry: GalleryEntry) => void;
     onToggleFolder: (path: string) => void;
 }): React.ReactElement {
-    const {rows, closedFolders, focusedRoot, previewRootIds, onFocus, onTogglePreview, onToggleFolder} = props;
+    const {rows, closedFolders, focusedRoot, previewRootIds, onFocus, onTogglePreview, onRemoveFromScene, onToggleFolder} = props;
     const scrollRef = useRef<HTMLDivElement>(null);
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -273,6 +333,7 @@ function VirtualGalleryTree(props: {
                                     inPreview={previewRootIds.has(row.node.entry.root.uniqueId)}
                                     onFocus={onFocus}
                                     onTogglePreview={onTogglePreview}
+                                    onRemoveFromScene={onRemoveFromScene}
                                 />
                             )}
                         </div>
@@ -285,7 +346,7 @@ function VirtualGalleryTree(props: {
 
 /** Folder-tree catalog; import effects here and drag them into the viewport. */
 export function GalleryPanel(props: GalleryPanelProps): React.ReactElement {
-    const {entries, focusedRoot, previewRootIds, loading, folderInputRef, onFocus, onTogglePreview, onImportFiles, onImportFolder, onCreateDefault} = props;
+    const {entries, focusedRoot, previewRootIds, loading, folderInputRef, onFocus, onTogglePreview, onRemoveFromScene, onImportFiles, onImportFolder, onCreateDefault} = props;
     const [query, setQuery] = useState('');
     const [closedFolders, setClosedFolders] = useState<Set<string>>(() => new Set());
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -394,10 +455,12 @@ export function GalleryPanel(props: GalleryPanelProps): React.ReactElement {
             <div style={{fontSize: 12, color: theme.textDim, lineHeight: 1.45}}>
                 {isLoading
                     ? `Loading… ${loading.done} / ${loading.total || '…'} files`
-                    : `${previewCount} previewing · ${inSceneCount} in scene · ${entries.length} total`}
+                    : `${previewCount} previewing · ${inSceneCount} on stage · ${entries.length} in catalog`}
             </div>
-            <div style={{fontSize: 11, color: theme.textDim, lineHeight: 1.4}}>
-                Preview plays on stage · Click = edit · Checkbox or Ctrl+click toggles preview.
+            <div style={{fontSize: 11, color: theme.textDim, lineHeight: 1.45}}>
+                ✓ stage preview · ✨ on stage · drag to place · × remove from stage
+                <br />
+                Click = edit · Ctrl+click = toggle preview
             </div>
             <input
                 className="qe-hover"
@@ -445,6 +508,7 @@ export function GalleryPanel(props: GalleryPanelProps): React.ReactElement {
                     previewRootIds={previewRootIds}
                     onFocus={onFocus}
                     onTogglePreview={onTogglePreview}
+                    onRemoveFromScene={onRemoveFromScene}
                     onToggleFolder={toggleFolder}
                 />
             )}

package/src/react/TimelinePanel.tsx

@@ -6,7 +6,7 @@ import {
     PlayIcon,
     RectangleGroupIcon,
 } from '@heroicons/react/24/solid';
-import type {ParticleSystem} from 'babylon.quarks';
+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';
@@ -19,7 +19,7 @@ import {
     type PlaybackState,
 } from '../core/playback';
 import {groupNodes} from '../core/groups';
-import {scrubFocusTo} from '../core/scrub';
+import {pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled} from '../core/scrub';
 import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
 import {TimelineTrackRow} from './TimelineTrackRow';
 import {iconStyle} from './icons';
@@ -32,6 +32,7 @@ export interface TimelinePanelProps {
     selectedNode: TransformNode | null;
     onSelectNode: (node: TransformNode | null) => void;
     scene: Scene;
+    renderer: BatchedRenderer;
     playbackRef: React.MutableRefObject<PlaybackState>;
     playheadRef: React.RefObject<HTMLDivElement>;
     counterRef: React.RefObject<HTMLSpanElement>;
@@ -63,7 +64,7 @@ function pickTickInterval(pxPerSecond: number): number {
  * apply only to the focused effect without stopping other previews.
  */
 export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
-    const {binding, selectedNode, onSelectNode, scene, 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} = props;
 
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState<Set<TransformNode>>(() => new Set());
@@ -144,13 +145,19 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
             let shown = elapsed;
             if (anyLooping) {
                 shown = timelineSpan > 0 ? elapsed % timelineSpan : 0;
-            } else if (elapsed >= timelineSpan || isFocusFinished(state, focusRootId)) {
+            } else if (isFocusFinished(state, focusRootId)) {
+                // Park at real simulation time — core may finish before the ruler's worst-case span.
+                shown = elapsed;
+            } else if (elapsed >= timelineSpan) {
                 shown = timelineSpan;
                 const justFinishedPlaying =
-                    !state.scrubbing && state.stagePlaying && prevElapsedRef.current < timelineSpan && elapsed >= timelineSpan;
+                    !state.scrubbing && state.stagePlaying && prevElapsedRef.current < timelineSpan;
                 if (justFinishedPlaying) {
+                    scrubFocusToSettled(binding, renderer, timelineSpan);
                     markFocusFinished(state, focusRootId);
                     setFocusElapsed(state, focusRootId, timelineSpan);
+                    pauseFocus(binding);
+                    scene.render();
                 }
             }
             prevElapsedRef.current = elapsed;
@@ -161,7 +168,7 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
         };
         raf = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(raf);
-    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled]);
+    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled, binding, scene, renderer]);
 
     const visibleRows = useMemo(() => {
         let hideUntilDepth: number | null = null;
@@ -197,16 +204,23 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
     };
 
     const applyScrub = (time: number) => {
-        scrubFocusTo(binding, time);
         const state = playbackRef.current;
-        setFocusElapsed(state, focusRootId, time);
-        if (time < timelineSpan) {
-            clearFocusFinished(state, focusRootId);
-        } else if (!anyLooping) {
+        const atEnd = !anyLooping && time >= timelineSpan;
+        const shown = atEnd ? timelineSpan : time;
+        if (atEnd) {
+            scrubFocusToSettled(binding, renderer, timelineSpan);
             markFocusFinished(state, focusRootId);
+            pauseFocus(binding);
+        } else {
+            scrubFocusTo(binding, renderer, time);
+            clearFocusFinished(state, focusRootId);
+            if (stagePlaying) {
+                playFocus(binding);
+            }
         }
+        setFocusElapsed(state, focusRootId, shown);
         if (playheadRef.current) {
-            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + time * pxPerSecond}px`;
+            playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET + shown * pxPerSecond}px`;
         }
         scene.render();
     };
@@ -223,10 +237,13 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
     };
 
     const restartFocus = () => {
-        scrubFocusTo(binding, 0);
+        scrubFocusTo(binding, renderer, 0);
         const state = playbackRef.current;
         setFocusElapsed(state, focusRootId, 0);
         clearFocusFinished(state, focusRootId);
+        if (stagePlaying) {
+            playFocus(binding);
+        }
         if (playheadRef.current) {
             playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET}px`;
         }