babylon.quarks-editor 0.17.9 → 0.18.1

package/dist/core/galleryPlayback.d.ts

@@ -1,9 +1,14 @@
 import type { GalleryEntry } from './loadEffectGallery';
 /** Freezes every gallery entry; unpauses all in-scene entries in the preview set when transport is playing. */
-export declare function applyGalleryPlayback(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>, transportPlaying: boolean): void;
+export declare function applyGalleryPlayback(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>, transportPlaying: boolean, focusFinishedRootIds?: ReadonlySet<number>): void;
 /** Whether any preview effect on stage should keep simulating. */
 export declare function hasActivePreview(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): boolean;
 /** In-scene preview effects currently in the preview set. */
 export declare function countActivePreviews(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number;
 /** Particle count across all active preview effects. */
 export declare function countGalleryParticles(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number;
+/**
+ * Pauses one-shot preview effects whose particle systems report `isFinished()`.
+ * Returns true when any entry was paused (caller should refresh renderer batches).
+ */
+export declare function pauseFinishedPreviews(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>, focusFinishedRootIds?: ReadonlySet<number>): boolean;

package/dist/core/galleryPlayback.js

@@ -1,8 +1,9 @@
+import { QuarksUtil } from 'babylon.quarks';
 function isPreviewEntry(entry, previewRootIds) {
     return entry.inScene && previewRootIds.has(entry.root.uniqueId);
 }
 /** Freezes every gallery entry; unpauses all in-scene entries in the preview set when transport is playing. */
-export function applyGalleryPlayback(entries, previewRootIds, transportPlaying) {
+export function applyGalleryPlayback(entries, previewRootIds, transportPlaying, focusFinishedRootIds = new Set()) {
     for (const entry of entries) {
         for (const system of entry.systems) {
             system.pause();
@@ -15,6 +16,9 @@ export function applyGalleryPlayback(entries, previewRootIds, transportPlaying)
         if (!isPreviewEntry(entry, previewRootIds)) {
             continue;
         }
+        if (focusFinishedRootIds.has(entry.root.uniqueId)) {
+            continue;
+        }
         for (const system of entry.systems) {
             system.play();
         }
@@ -41,3 +45,28 @@ export function countGalleryParticles(entries, previewRootIds) {
     }
     return count;
 }
+/**
+ * Pauses one-shot preview effects whose particle systems report `isFinished()`.
+ * Returns true when any entry was paused (caller should refresh renderer batches).
+ */
+export function pauseFinishedPreviews(entries, previewRootIds, focusFinishedRootIds = new Set()) {
+    let pausedAny = false;
+    for (const entry of entries) {
+        if (!isPreviewEntry(entry, previewRootIds)) {
+            continue;
+        }
+        if (focusFinishedRootIds.has(entry.root.uniqueId)) {
+            continue;
+        }
+        if (!QuarksUtil.isEffectFinished(entry.root)) {
+            continue;
+        }
+        for (const system of entry.systems) {
+            if (!system.paused) {
+                system.pause();
+                pausedAny = true;
+            }
+        }
+    }
+    return pausedAny;
+}

package/dist/core/galleryScene.d.ts

@@ -1,11 +1,19 @@
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import type { Scene } from '@babylonjs/core/scene';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import type { BatchedRenderer } from 'babylon.quarks';
 import type { GalleryEntry } from './loadEffectGallery';
+/** Clears live particles and freezes simulation for one placed catalog entry. */
+export declare function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: BatchedRenderer): void;
 /** Parents a catalog entry into the live scene and registers its systems with the renderer. */
 export declare function placeGalleryEntryInScene(entry: GalleryEntry, renderer: BatchedRenderer, worldPosition: Vector3): void;
 /** Spawns a batch of catalog effects in a square grid centered on `center`. */
 export declare function placeGalleryEntriesAt(entries: GalleryEntry[], renderer: BatchedRenderer, center: Vector3, spacing?: number): void;
+/**
+ * Unregisters a placed effect from the renderer and returns it to the hidden catalog.
+ * Systems stay alive for inspector editing; drag into the viewport to place again.
+ */
+export declare function removeGalleryEntryFromScene(entry: GalleryEntry, renderer: BatchedRenderer, catalogRoot: TransformNode): void;
 /** Raycasts the editor ground plane from canvas/client coordinates. */
 export declare function pickGroundPosition(scene: Scene, clientX: number, clientY: number): Vector3;
 /** Finds a gallery entry by Babylon node id from a drag payload. */

package/dist/core/galleryScene.js

@@ -1,5 +1,13 @@
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { DEFAULT_GALLERY_SPACING, galleryGridPosition } from './galleryLayout';
+/** Clears live particles and freezes simulation for one placed catalog entry. */
+export function clearGalleryEntrySimulation(entry, renderer) {
+    for (const system of entry.systems) {
+        system.restart();
+        system.pause();
+    }
+    renderer.refreshBatches();
+}
 /** Parents a catalog entry into the live scene and registers its systems with the renderer. */
 export function placeGalleryEntryInScene(entry, renderer, worldPosition) {
     entry.root.setEnabled(true);
@@ -21,6 +29,22 @@ export function placeGalleryEntriesAt(entries, renderer, center, spacing = DEFAU
         placeGalleryEntryInScene(entry, renderer, position);
     });
 }
+/**
+ * Unregisters a placed effect from the renderer and returns it to the hidden catalog.
+ * Systems stay alive for inspector editing; drag into the viewport to place again.
+ */
+export function removeGalleryEntryFromScene(entry, renderer, catalogRoot) {
+    if (!entry.inScene) {
+        return;
+    }
+    clearGalleryEntrySimulation(entry, renderer);
+    for (const system of entry.systems) {
+        renderer.deleteSystem(system);
+    }
+    entry.root.parent = catalogRoot;
+    entry.root.setEnabled(false);
+    entry.inScene = false;
+}
 /** Raycasts the editor ground plane from canvas/client coordinates. */
 export function pickGroundPosition(scene, clientX, clientY) {
     const canvas = scene.getEngine().getRenderingCanvas();

package/dist/core/renderDebug.d.ts

@@ -0,0 +1,8 @@
+import type { BatchedRenderer } from 'babylon.quarks';
+/** Whether GPU/particle mismatch logging is enabled (localStorage quarksDebugRender=1). */
+export declare function isRenderDebugEnabled(): boolean;
+/**
+ * Logs when live particle count is zero but a batch still reports GPU instances.
+ * Enable with: localStorage.setItem('quarksDebugRender', '1')
+ */
+export declare function logRenderMismatch(renderer: BatchedRenderer, liveParticleCount: number): void;

package/dist/core/renderDebug.js

@@ -0,0 +1,42 @@
+const STORAGE_KEY = 'quarksDebugRender';
+/** Whether GPU/particle mismatch logging is enabled (localStorage quarksDebugRender=1). */
+export function isRenderDebugEnabled() {
+    try {
+        return typeof localStorage !== 'undefined' && localStorage.getItem(STORAGE_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+let lastMismatchKey = '';
+/**
+ * Logs when live particle count is zero but a batch still reports GPU instances.
+ * Enable with: localStorage.setItem('quarksDebugRender', '1')
+ */
+export function logRenderMismatch(renderer, liveParticleCount) {
+    if (!isRenderDebugEnabled()) {
+        return;
+    }
+    const stats = renderer.getBatchRenderStats();
+    const instanceCount = stats.reduce((sum, row) => sum + row.instanceCount, 0);
+    const batchParticleCount = stats.reduce((sum, row) => sum + row.particleCount, 0);
+    if (liveParticleCount !== 0 && instanceCount === liveParticleCount) {
+        lastMismatchKey = '';
+        return;
+    }
+    if (liveParticleCount === 0 && instanceCount === 0 && batchParticleCount === 0) {
+        lastMismatchKey = '';
+        return;
+    }
+    const key = `${liveParticleCount}|${instanceCount}|${batchParticleCount}|${stats.map((row) => `${row.batchIndex}:${row.instanceCount}/${row.particleCount}`).join(';')}`;
+    if (key === lastMismatchKey) {
+        return;
+    }
+    lastMismatchKey = key;
+    console.warn('[quarks render debug] particle vs GPU instance mismatch', {
+        liveParticleCount,
+        batchParticleCount,
+        instanceCount,
+        batches: stats,
+    });
+}

package/dist/core/scrub.d.ts

@@ -1,10 +1,19 @@
 import type { BatchedRenderer } from 'babylon.quarks';
 import type { EffectBinding } from './binding';
+/** Unpauses every system in the focused effect. */
+export declare function playFocus(binding: EffectBinding): void;
+/** Freezes the focused effect at its current simulation state. */
+export declare function pauseFocus(binding: EffectBinding): void;
 /**
  * Scrub only the focused effect's systems — does not advance other preview effects
  * via the shared BatchedRenderer.update loop.
  */
-export declare function scrubFocusTo(binding: EffectBinding, time: number): void;
+export declare function scrubFocusTo(binding: EffectBinding, renderer: BatchedRenderer, time: number): void;
+/**
+ * Scrub to `time`, then keep simulating the focused effect until every particle has died.
+ * Used when parking a one-shot at the timeline end so burst tails do not linger on screen.
+ */
+export declare function scrubFocusToSettled(binding: EffectBinding, renderer: BatchedRenderer, time: number): void;
 /**
  * Approximate timeline scrub: replays every system from t=0 up to `time` using the existing
  * simulation loop. Not frame-exact (spawn/burst randomization is unseeded), but reuses

package/dist/core/scrub.js

@@ -2,17 +2,30 @@ const WIDE_STEP_THRESHOLD = 8;
 function bindingSystems(binding) {
     return [binding.system, ...binding.subSystems];
 }
+/** Unpauses every system in the focused effect. */
+export function playFocus(binding) {
+    for (const system of bindingSystems(binding)) {
+        system.play();
+    }
+}
+/** Freezes the focused effect at its current simulation state. */
+export function pauseFocus(binding) {
+    for (const system of bindingSystems(binding)) {
+        system.pause();
+    }
+}
 /**
  * Scrub only the focused effect's systems — does not advance other preview effects
  * via the shared BatchedRenderer.update loop.
  */
-export function scrubFocusTo(binding, time) {
+export function scrubFocusTo(binding, renderer, time) {
     const systems = bindingSystems(binding);
     for (const system of systems) {
         system.restart();
         system.play();
     }
     if (time <= 0) {
+        renderer.refreshBatches();
         return;
     }
     const fixedStep = time > WIDE_STEP_THRESHOLD ? 1 / 30 : 1 / 60;
@@ -28,6 +41,32 @@ export function scrubFocusTo(binding, time) {
             system.update(remainder);
         }
     }
+    renderer.refreshBatches();
+}
+/**
+ * Scrub to `time`, then keep simulating the focused effect until every particle has died.
+ * Used when parking a one-shot at the timeline end so burst tails do not linger on screen.
+ */
+export function scrubFocusToSettled(binding, renderer, time) {
+    scrubFocusTo(binding, renderer, time);
+    const systems = bindingSystems(binding);
+    const step = 1 / 60;
+    const maxExtra = 2;
+    let extra = 0;
+    while (extra < maxExtra) {
+        let alive = 0;
+        for (const system of systems) {
+            alive += system.particleNum;
+        }
+        if (alive === 0) {
+            break;
+        }
+        for (const system of systems) {
+            system.update(step);
+        }
+        extra += step;
+    }
+    renderer.refreshBatches();
 }
 /**
  * Approximate timeline scrub: replays every system from t=0 up to `time` using the existing
@@ -40,6 +79,7 @@ export function scrubFocusTo(binding, time) {
 export function scrubTo(binding, renderer, time) {
     binding.restart();
     if (time <= 0) {
+        renderer.refreshBatches();
         return;
     }
     const fixedStep = time > WIDE_STEP_THRESHOLD ? 1 / 30 : 1 / 60;

package/dist/core/timeline.d.ts

@@ -32,6 +32,7 @@ export declare function computeStartOffset(gen: ValueGenerator | FunctionValueGe
 /** Flattens the effect's group/emitter tree into display rows, preserving tree-walk order. */
 export declare function computeTimelineRows(binding: EffectBinding): TimelineRow[];
 /**
- * Overall timeline ruler span — emission window per track (`startOffset + duration`).
+ * Overall timeline ruler span — worst-case visual tail per track (max startLife, last burst).
+ * Actual playback often ends earlier when interval lives sample short or tracks finish out of phase.
  */
 export declare function computeTimelineSpan(rows: TimelineRow[]): number;

package/dist/core/timeline.js

@@ -58,8 +58,32 @@ export function computeTimelineRows(binding) {
     walk(binding.getTree());
     return rows;
 }
+/** Upper bound on startLife for timeline span (burst/one-shot tail). */
+function estimateMaxStartLife(system) {
+    const life = system.startLife;
+    if (life instanceof ConstantValue) {
+        return Math.max(0, life.value);
+    }
+    if (life instanceof IntervalValue) {
+        return Math.max(life.a, life.b);
+    }
+    return 1;
+}
+/** When emission is burst-only, the effect window ends at the last burst time, not full duration. */
+function estimateEmissionEnd(system) {
+    const rate = system.emissionOverTime instanceof ConstantValue ? system.emissionOverTime.value : null;
+    const perMeter = system.emissionOverDistance instanceof ConstantValue ? system.emissionOverDistance.value : null;
+    if ((rate != null && rate > 0) || (perMeter != null && perMeter > 0)) {
+        return system.duration;
+    }
+    if (system.emissionBursts.length === 0) {
+        return system.duration;
+    }
+    return Math.max(...system.emissionBursts.map((burst) => burst.time));
+}
 /**
- * Overall timeline ruler span — emission window per track (`startOffset + duration`).
+ * Overall timeline ruler span — worst-case visual tail per track (max startLife, last burst).
+ * Actual playback often ends earlier when interval lives sample short or tracks finish out of phase.
  */
 export function computeTimelineSpan(rows) {
     let span = 0;
@@ -67,7 +91,7 @@ export function computeTimelineSpan(rows) {
         if (row.kind !== 'track') {
             continue;
         }
-        span = Math.max(span, row.startOffset + row.duration);
+        span = Math.max(span, row.startOffset + estimateEmissionEnd(row.system) + estimateMaxStartLife(row.system));
     }
     return Math.max(span, MIN_TIMELINE_SPAN);
 }

package/dist/react/EffectEditorHost.js

@@ -14,21 +14,23 @@ import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
 import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer';
 import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial';
-import { BatchedRenderer, } from 'babylon.quarks';
+import { BatchedRenderer, 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 } from '../core/playback';
+import { applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview, pauseFinishedPreviews } from '../core/galleryPlayback';
+import { createPlaybackState, clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed } 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 } from '../core/loadEffectGallery';
 import { pickGalleryJsonFiles } from '../core/pickGalleryFiles';
@@ -80,6 +82,7 @@ export function EffectEditorHost(props) {
     const importGalleryRef = useRef(async () => { });
     const selectGalleryEntryRef = useRef(() => { });
     const toggleGalleryPreviewRef = useRef(() => { });
+    const removeGalleryFromSceneRef = useRef(() => { });
     const placeGalleryDropRef = useRef(() => { });
     const createGalleryDefaultRef = useRef(() => { });
     const dropMarkerRef = useRef(null);
@@ -267,6 +270,7 @@ export function EffectEditorHost(props) {
                 return;
             }
             const id = entry.root.uniqueId;
+            const removing = (stateRef.current?.previewRootIds ?? []).includes(id);
             setPreviewRootIds((prev) => {
                 const next = new Set(prev);
                 if (next.has(id)) {
@@ -274,6 +278,7 @@ export function EffectEditorHost(props) {
                 }
                 else {
                     next.add(id);
+                    clearFocusFinished(playbackRef.current, id);
                 }
                 const ids = [...next];
                 if (stateRef.current) {
@@ -281,6 +286,41 @@ export function EffectEditorHost(props) {
                 }
                 return ids;
             });
+            if (removing) {
+                clearGalleryEntrySimulation(entry, renderer);
+                clearFocusFinished(playbackRef.current, id);
+            }
+            renderer.refreshBatches();
+            scene.render();
+            force();
+        };
+        const removeGalleryFromScene = (entry) => {
+            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) => {
             const ids = entries.filter((entry) => entry.inScene).map((entry) => entry.root.uniqueId);
@@ -404,6 +444,7 @@ export function EffectEditorHost(props) {
         importGalleryRef.current = appendGalleryFromFiles;
         selectGalleryEntryRef.current = focusCatalogEntry;
         toggleGalleryPreviewRef.current = toggleGalleryPreview;
+        removeGalleryFromSceneRef.current = removeGalleryFromScene;
         placeGalleryDropRef.current = placeGalleryDropAt;
         createGalleryDefaultRef.current = appendGalleryDefault;
         const galleryDefaults = {
@@ -447,11 +488,39 @@ export function EffectEditorHost(props) {
                     const simulate = 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();
                     }
                 }
             }
@@ -502,7 +571,9 @@ export function EffectEditorHost(props) {
                     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`;
                 }
             }
@@ -517,7 +588,9 @@ export function EffectEditorHost(props) {
                     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`;
                 }
             }
@@ -572,7 +645,10 @@ export function EffectEditorHost(props) {
         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(() => {
         emitterWireframesRef.current?.setVisible(showEmitterWireframes);
@@ -747,7 +823,7 @@ export function EffectEditorHost(props) {
                             display: 'flex',
                             flexDirection: 'column',
                             minHeight: 0,
-                        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsxs("div", { style: { fontSize: 14, fontWeight: 600 }, children: ["Gallery", gallery.length > 0 ? ` · ${gallery.length}` : ''] }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: "Drag into the viewport to place effects." })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'hidden', padding: '8px 12px 14px', display: 'flex', flexDirection: 'column' }, children: _jsx(GalleryPanel, { entries: gallery, focusedRoot: selectedGalleryRoot, previewRootIds: previewRootIdSet, loading: galleryLoading, folderInputRef: galleryFolderInputRef, onFocus: (entry) => selectGalleryEntryRef.current(entry), onTogglePreview: (entry) => toggleGalleryPreviewRef.current(entry), onImportFiles: (files) => void runGalleryImport(files), onImportFolder: () => void handleImportFolder(), onCreateDefault: () => createGalleryDefaultRef.current() }) })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, onDragEnter: (e) => {
+                        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsxs("div", { style: { fontSize: 14, fontWeight: 600 }, children: ["Gallery", gallery.length > 0 ? ` · ${gallery.length}` : ''] }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: "Drag into viewport to place \u00B7 \u2713 preview \u00B7 \u00D7 remove from stage" })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'hidden', padding: '8px 12px 14px', display: 'flex', flexDirection: 'column' }, children: _jsx(GalleryPanel, { entries: gallery, focusedRoot: selectedGalleryRoot, previewRootIds: previewRootIdSet, loading: galleryLoading, 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() }) })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, onDragEnter: (e) => {
                             if (!e.dataTransfer.types.includes(GALLERY_DRAG_MIME))
                                 return;
                             galleryDragDepthRef.current += 1;
@@ -849,7 +925,7 @@ export function EffectEditorHost(props) {
                                                     link.download = 'effect.json';
                                                     link.click();
                                                     URL.revokeObjectURL(link.href);
-                                                }, children: "Export" }), props.onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && props.onSave(binding.exportJSON('EditorEffect')), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: binding && activeSystem && gizmoNode ? (_jsx(EffectEditor, { binding: binding, selectedSystem: activeSystem, gizmoTargetNode: gizmoNode, gizmoTargetLabel: gizmoTargetLabel, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture ? resolveTextureForEditor : undefined, resolveGeometry: props.resolveGeometry ? resolveGeometryForEditor : undefined })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] })] }), showTimeline && binding && activeSystem && state && (_jsx(TimelinePanel, { binding: binding, selectedNode: selectedNode, onSelectNode: setSelectedNode, scene: state.scene, playbackRef: playbackRef, playheadRef: playheadRef, counterRef: counterRef, stagePlaying: stagePlaying, setStagePlaying: setStagePlaying, speed: speed, setSpeed: setSpeed, playbackEnabled: timelinePlaybackEnabled })), messageDialog && (_jsx(MessageDialog, { title: messageDialog.title, message: messageDialog.message, onClose: () => setMessageDialog(null) }))] }));
+                                                }, children: "Export" }), props.onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => binding && props.onSave(binding.exportJSON('EditorEffect')), children: "Save" }))] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '6px 14px 20px' }, children: binding && activeSystem && gizmoNode ? (_jsx(EffectEditor, { binding: binding, selectedSystem: activeSystem, gizmoTargetNode: gizmoNode, gizmoTargetLabel: gizmoTargetLabel, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture ? resolveTextureForEditor : undefined, resolveGeometry: props.resolveGeometry ? resolveGeometryForEditor : undefined })) : (_jsx("div", { style: { fontSize: 13, color: theme.textDim, lineHeight: 1.5 }, children: "No effect selected." })) })] })] }), showTimeline && binding && activeSystem && state && (_jsx(TimelinePanel, { binding: binding, selectedNode: selectedNode, onSelectNode: setSelectedNode, scene: state.scene, renderer: state.renderer, playbackRef: playbackRef, playheadRef: playheadRef, counterRef: counterRef, stagePlaying: stagePlaying, setStagePlaying: setStagePlaying, speed: speed, setSpeed: setSpeed, playbackEnabled: timelinePlaybackEnabled })), messageDialog && (_jsx(MessageDialog, { title: messageDialog.title, message: messageDialog.message, onClose: () => setMessageDialog(null) }))] }));
 }
 /** NME-style imperative entry point for hosts like BabylonJS Editor windows. */
 export const QuarksEffectEditor = {

package/dist/react/GalleryPanel.d.ts

@@ -11,6 +11,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;