babylon.quarks-editor 0.17.8 → 0.18.0

package/dist/react/EffectEditorHost.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useMemo, useReducer, useRef, useState, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
+import { ArrowLeftIcon, ArrowPathIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, ArrowsPointingOutIcon, CubeTransparentIcon, CursorArrowRaysIcon, Square2StackIcon, } from '@heroicons/react/24/solid';
+import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { Scene } from '@babylonjs/core/scene';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
@@ -12,55 +14,45 @@ 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, ColorOverLife, ConeEmitter, ConstantColor, ConstantValue, IntervalValue, ParticleSystem, RenderMode, Vector4, } 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 { loadEffectFromJson } from '../core/loadEffect';
-import { DEFAULT_GRADIENT_STOPS, buildGradient } from '../core/colors';
+import { createGalleryDefaultEntry } from '../core/defaultEffect';
+import { loadEffectFromJson, disposeLoadedEffect, parseEffectFromJson } from '../core/loadEffect';
+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 { 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';
+import { GalleryViewportPicker } from '../core/viewportPicker';
+import { notifyTransformChanged } from '../core/transformStore';
 import { EffectEditor } from './EffectEditor';
 import { PromptDialog } from './PromptDialog';
+import { MessageDialog } from './MessageDialog';
+import { GalleryPanel } from './GalleryPanel';
 import { TimelinePanel } from './TimelinePanel';
 import { buttonStyle, globalEditorStyles, theme } from './theme';
-function createDefaultEffect(scene, resolveTexture, textureUrl) {
-    const system = new ParticleSystem({
-        scene,
-        duration: 4,
-        looping: true,
-        startLife: new IntervalValue(1.2, 1.8),
-        startSpeed: new IntervalValue(3, 5),
-        startSize: new IntervalValue(0.25, 0.5),
-        startColor: new ConstantColor(new Vector4(1, 1, 1, 1)),
-        emissionOverTime: new ConstantValue(80),
-        // quarks' angle is a half-angle; Babylon's native cone uses a full angle.
-        shape: new ConeEmitter({ radius: 0.3, angle: 0.25 }),
-        renderMode: RenderMode.BillBoard,
-        texture: (textureUrl && resolveTexture ? resolveTexture(textureUrl, scene) : undefined),
-        transparent: true,
-        blendMode: 1,
-    });
-    system.addBehavior(new ColorOverLife(buildGradient(DEFAULT_GRADIENT_STOPS)));
-    // quarks emits along local +Z; Babylon's native cone emits along +Y.
-    system.emitter.rotation.x = -Math.PI / 2;
-    return system;
-}
+import { iconStyle } from './icons';
 /** Disposes an effect's systems and its remaining group tree (otherwise the groups leak). */
-function disposeEffect(root, systems, renderer) {
-    for (const system of systems) {
-        renderer.deleteSystem(system);
-        system.dispose();
-    }
-    // Disposing the systems already disposed their emitter nodes; dispose the leftover group
-    // tree too. Skip when the root IS a disposed emitter (default single-system effect).
-    if (!systems.some((system) => system.emitter === root)) {
-        root.dispose(false, true);
-    }
+function disposeEffect(root, systems, renderer, inRenderer = true) {
+    disposeLoadedEffect(root, systems, renderer, inRenderer);
 }
+const GALLERY_PANEL_WIDTH = 280;
 const GIZMO_MODE_BUTTONS = [
-    { value: 'none', icon: '↖', title: 'Select (hide stage gizmo)' },
-    { value: 'position', icon: 'M', title: 'Move the stage node (position)' },
-    { value: 'rotation', icon: 'R', title: 'Rotate the stage node' },
-    { value: 'scale', icon: 'S', title: 'Scale the stage node' },
+    { value: 'none', Icon: CursorArrowRaysIcon, title: 'Select (hide stage gizmo)' },
+    { value: 'position', Icon: ArrowsPointingOutIcon, title: 'Move the stage node (position)' },
+    { value: 'rotation', Icon: ArrowPathIcon, title: 'Rotate the stage node' },
+    { value: 'scale', Icon: Square2StackIcon, title: 'Scale the stage node' },
 ];
 const squareButtonStyle = {
     ...buttonStyle,
@@ -83,18 +75,82 @@ const activeSquareButtonStyle = {
 export function EffectEditorHost(props) {
     const canvasRef = useRef(null);
     const counterRef = useRef(null);
+    const fpsRef = useRef(null);
     const playheadRef = useRef(null);
-    const importRef = useRef(null);
+    const galleryFolderInputRef = useRef(null);
+    const importJsonRef = useRef(() => { });
+    const importGalleryRef = useRef(async () => { });
+    const selectGalleryEntryRef = useRef(() => { });
+    const toggleGalleryPreviewRef = useRef(() => { });
+    const removeGalleryFromSceneRef = useRef(() => { });
+    const placeGalleryDropRef = useRef(() => { });
+    const createGalleryDefaultRef = useRef(() => { });
+    const dropMarkerRef = useRef(null);
+    const selectionMarkerRef = useRef(null);
+    const emitterWireframesRef = useRef(null);
+    const viewportPickerRef = useRef(null);
+    const galleryDragDepthRef = useRef(0);
     const stateRef = useRef(null);
     const gizmoManagerRef = useRef(null);
     const [binding, setBinding] = useState(null);
     const [, force] = useReducer((x) => x + 1, 0);
-    const playbackRef = useRef({ paused: false, speed: 1, stepQueued: false, elapsed: 0, scrubbing: false });
-    const [paused, setPaused] = useState(false);
+    const playbackRef = useRef(createPlaybackState());
+    const focusTimelineMetaRef = useRef({ rootId: -1, revision: -1, span: 1, anyLooping: false });
+    const [stagePlaying, setStagePlaying] = useState(true);
     const [speed, setSpeed] = useState(1);
     const [renamingRoot, setRenamingRoot] = useState(false);
     const [gizmoMode, setGizmoMode] = useState('none');
     const [selectedNode, setSelectedNode] = useState(null);
+    const [gallery, setGallery] = useState([]);
+    const [galleryLoading, setGalleryLoading] = useState(null);
+    const [selectedGalleryRoot, setSelectedGalleryRoot] = useState(null);
+    const [previewRootIds, setPreviewRootIds] = useState([]);
+    const [messageDialog, setMessageDialog] = useState(null);
+    const [galleryDragHover, setGalleryDragHover] = useState(null);
+    const [showEmitterWireframes, setShowEmitterWireframes] = useState(false);
+    const isGalleryLoading = galleryLoading !== null;
+    const showMessage = (title, message) => setMessageDialog({ title, message });
+    /** Appends JSON effects to the catalog without replacing the open effect. */
+    const runGalleryImport = async (files) => {
+        const jsonFiles = collectJsonFiles(files);
+        if (jsonFiles.length === 0) {
+            showMessage('Import to gallery', files.length === 0
+                ? 'Import was cancelled or the browser returned no files.\n\nTry Chrome or Edge and pick .json files or a folder that contains them.'
+                : `No .json files found among ${files.length} file(s) in the selection.`);
+            return;
+        }
+        try {
+            await importGalleryRef.current(jsonFiles);
+            stateRef.current?.history.clear();
+            force();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            showMessage('Import to gallery', message);
+            console.error('Failed to import effects into gallery:', err);
+            force();
+        }
+    };
+    const handleImportFolder = () => {
+        if (typeof window.showDirectoryPicker !== 'function') {
+            galleryFolderInputRef.current?.click();
+            return;
+        }
+        void (async () => {
+            try {
+                const picked = await pickGalleryJsonFiles();
+                if (picked === null || picked === undefined) {
+                    return;
+                }
+                await runGalleryImport(picked);
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                showMessage('Import to gallery', message);
+                console.error('Failed to open folder picker:', err);
+            }
+        })();
+    };
     useEffect(() => {
         // Register the shared ground-plane collider before any effect (default or imported)
         // is built, so ApplyCollision behaviors deserialized by QuarksLoader resolve against it.
@@ -122,83 +178,421 @@ export function EffectEditorHost(props) {
         groundMaterial.opacity = 0.5;
         const ground = MeshBuilder.CreateGround('ground', { width: 100, height: 100 }, scene);
         ground.material = groundMaterial;
-        const stageRoot = new TransformNode('StageRoot', scene);
         const gizmoUtilityLayer = new UtilityLayerRenderer(scene);
         const gizmoManager = new GizmoManager(scene, undefined, gizmoUtilityLayer);
         gizmoManager.usePointerToAttachGizmos = false;
-        gizmoManager.attachToNode(stageRoot);
         gizmoManagerRef.current = gizmoManager;
         const renderer = new BatchedRenderer('quarks-editor', scene);
         const history = new EffectHistory();
+        const galleryRoot = new TransformNode('GalleryCatalog', scene);
+        galleryRoot.setEnabled(false);
+        let galleryEntries = [];
+        const dropMarker = new GalleryDropMarker(scene);
+        dropMarkerRef.current = dropMarker;
+        const selectionMarker = new GallerySelectionMarker(scene);
+        selectionMarkerRef.current = selectionMarker;
+        const emitterWireframes = new EmitterShapeWireframes(scene);
+        emitterWireframesRef.current = emitterWireframes;
+        const viewportPicker = new GalleryViewportPicker(scene);
+        viewportPickerRef.current = viewportPicker;
+        const handleViewportPointerLeave = () => viewportPicker.setHover(null);
+        canvasRef.current?.addEventListener('pointerleave', handleViewportPointerLeave);
+        const pointerObserver = scene.onPointerObservable.add((pointerInfo) => {
+            if (galleryDragDepthRef.current > 0) {
+                return;
+            }
+            const event = pointerInfo.event;
+            if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
+                const effectRoot = viewportPicker.pick(event.clientX, event.clientY);
+                const focusedRoot = stateRef.current?.binding?.root ?? null;
+                viewportPicker.setHover(effectRoot && effectRoot !== focusedRoot ? effectRoot : null);
+                return;
+            }
+            if (pointerInfo.type !== PointerEventTypes.POINTERDOWN || event.button !== 0) {
+                return;
+            }
+            const effectRoot = viewportPicker.pick(event.clientX, event.clientY);
+            if (!effectRoot) {
+                return;
+            }
+            const snap = stateRef.current;
+            if (!snap) {
+                return;
+            }
+            const entry = snap.galleryEntries.find((item) => item.root === effectRoot);
+            if (entry && snap.binding?.root !== effectRoot) {
+                selectGalleryEntryRef.current(entry);
+            }
+            setSelectedNode(effectRoot);
+        });
+        const clearGalleryDragPreview = () => {
+            galleryDragDepthRef.current = 0;
+            dropMarker.hide();
+            setGalleryDragHover(null);
+            setGalleryDragSession(null);
+        };
+        const onWindowDragEnd = () => clearGalleryDragPreview();
+        window.addEventListener('dragend', onWindowDragEnd);
+        const syncStateRef = (bindingValue) => {
+            stateRef.current = {
+                engine,
+                scene,
+                camera,
+                ground,
+                renderer,
+                binding: bindingValue,
+                history,
+                galleryRoot,
+                galleryEntries,
+                previewRootIds: stateRef.current?.previewRootIds ?? [],
+            };
+        };
+        const focusCatalogEntry = (entry) => {
+            const next = bindingFromGalleryEntry(entry);
+            history.clear();
+            history.attach(next);
+            next.subscribe(force);
+            syncStateRef(next);
+            setBinding(next);
+            setSelectedNode(entry.root);
+            setSelectedGalleryRoot(entry.root);
+            playbackRef.current.focusRootId = entry.root.uniqueId;
+            if (entry.inScene) {
+                selectionMarker.show(entry.root);
+                focusGalleryEntry(camera, entry.root);
+            }
+            else {
+                selectionMarker.hide();
+            }
+        };
+        const toggleGalleryPreview = (entry) => {
+            if (!entry.inScene) {
+                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) {
+                    stateRef.current.previewRootIds = ids;
+                }
+                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);
+            if (ids.length === 0) {
+                return;
+            }
+            setPreviewRootIds((prev) => {
+                const next = [...new Set([...prev, ...ids])];
+                if (stateRef.current) {
+                    stateRef.current.previewRootIds = next;
+                }
+                return next;
+            });
+        };
+        const placeGalleryDropAt = (clientX, clientY, dataTransfer) => {
+            const payload = (dataTransfer && readGalleryDrag(dataTransfer)) ?? getGalleryDragSession();
+            if (!payload) {
+                return;
+            }
+            const { entries: toPlace } = describeGalleryDrag(galleryEntries, payload);
+            if (toPlace.length === 0) {
+                return;
+            }
+            const position = pickGroundPosition(scene, clientX, clientY);
+            if (toPlace.length === 1) {
+                placeGalleryEntryInScene(toPlace[0], renderer, position);
+            }
+            else {
+                placeGalleryEntriesAt(toPlace, renderer, position);
+            }
+            galleryEntries = [...galleryEntries];
+            if (stateRef.current) {
+                stateRef.current.galleryEntries = galleryEntries;
+            }
+            setGallery(galleryEntries);
+            addGalleryPreview(...toPlace);
+            focusCatalogEntry(toPlace[0]);
+            dropMarkerRef.current?.hide();
+            setGalleryDragHover(null);
+            setGalleryDragSession(null);
+            force();
+        };
         const mount = (nextBinding) => {
-            nextBinding.root.parent = stageRoot;
+            nextBinding.root.parent = null;
             history.attach(nextBinding);
             nextBinding.subscribe(force);
-            stateRef.current = { engine, scene, renderer, binding: nextBinding, history, stageRoot };
+            syncStateRef(nextBinding);
             setBinding(nextBinding);
-            setSelectedNode(nextBinding.system.emitter);
+            setSelectedNode(nextBinding.root);
+            props.onReady?.(makeHandle());
+        };
+        const appendGalleryFromFiles = async (files) => {
+            setGalleryLoading({ done: 0, total: 0, loaded: 0, failed: 0 });
+            const incoming = await loadEffectGallery(scene, files, galleryRoot, (progress) => setGalleryLoading(progress));
+            const { merged, added } = mergeGalleryEntries(galleryEntries, incoming, renderer);
+            galleryEntries = merged;
+            if (stateRef.current) {
+                stateRef.current.galleryRoot = galleryRoot;
+                stateRef.current.galleryEntries = merged;
+            }
+            setGalleryLoading(null);
+            setGallery(merged);
+            if (incoming.length === 0) {
+                throw new Error('No particle effects found in the selected file(s).');
+            }
+            if (added.length === 0) {
+                throw new Error('All selected effects are already in the catalog.');
+            }
+            focusCatalogEntry(added[0]);
+            props.onReady?.(makeHandle());
+        };
+        const appendGalleryDefault = () => {
+            const entry = createGalleryDefaultEntry(scene, galleryRoot, galleryEntries, {
+                resolveTexture: props.resolveTexture,
+                textureUrl: props.textureOptions?.[0]?.url,
+            });
+            galleryEntries = [...galleryEntries, entry];
+            if (stateRef.current) {
+                stateRef.current.galleryRoot = galleryRoot;
+                stateRef.current.galleryEntries = galleryEntries;
+            }
+            setGallery(galleryEntries);
+            focusCatalogEntry(entry);
             props.onReady?.(makeHandle());
         };
         const makeHandle = () => ({
-            // Live getter: stays correct after presets/imports/undo replace the binding.
             get binding() {
-                return stateRef.current.binding;
+                const b = stateRef.current?.binding;
+                if (!b) {
+                    throw new Error('Gallery mode — import a single JSON to edit one effect.');
+                }
+                return b;
             },
             history,
             scene,
             renderer,
             importJson,
-            exportJson: () => stateRef.current.binding.exportJSON('EditorEffect'),
+            importGallery: appendGalleryFromFiles,
+            exportJson: () => makeHandle().binding.exportJSON('EditorEffect'),
         });
         const importJson = (json) => {
-            const current = stateRef.current.binding;
-            // Load first so a bad/empty JSON leaves the current effect intact.
+            const current = stateRef.current?.binding;
             const { root, systems } = loadEffectFromJson(scene, renderer, json);
             if (systems.length === 0) {
                 disposeEffect(root, systems, renderer);
                 throw new Error('No particle systems found in the JSON.');
             }
-            disposeEffect(current.root, [current.system, ...current.subSystems], renderer);
+            if (current) {
+                const catalogEntry = stateRef.current?.galleryEntries.find((entry) => entry.root === current.root);
+                disposeEffect(current.root, [current.system, ...current.subSystems], renderer, catalogEntry?.inScene ?? true);
+            }
             const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
-            mount(new EffectBinding(main, systems.filter((s) => s !== main), root));
+            const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
+            setSelectedGalleryRoot(null);
+            setPreviewRootIds([]);
+            selectionMarker.hide();
+            mount(next);
+            playbackRef.current.focusRootId = next.root.uniqueId;
+        };
+        importJsonRef.current = importJson;
+        importGalleryRef.current = appendGalleryFromFiles;
+        selectGalleryEntryRef.current = focusCatalogEntry;
+        toggleGalleryPreviewRef.current = toggleGalleryPreview;
+        removeGalleryFromSceneRef.current = removeGalleryFromScene;
+        placeGalleryDropRef.current = placeGalleryDropAt;
+        createGalleryDefaultRef.current = appendGalleryDefault;
+        const galleryDefaults = {
+            resolveTexture: props.resolveTexture,
+            textureUrl: props.textureOptions?.[0]?.url,
         };
-        let initial;
+        let initialEntry;
         if (props.effectJson) {
             const { root, systems } = loadEffectFromJson(scene, renderer, props.effectJson);
-            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
-            initial = new EffectBinding(main, systems.filter((s) => s !== main), root);
+            root.parent = null;
+            const name = root.name || 'Effect';
+            initialEntry = { name, path: `_opened/${name}.json`, root, systems, inScene: true };
         }
         else {
-            const system = createDefaultEffect(scene, props.resolveTexture, props.textureOptions?.[0]?.url);
-            renderer.addSystem(system);
-            // Root is a plain group (not the system's own emitter) so a new top-level system
-            // can be added as a sibling later, instead of always nesting under this one.
-            const root = new TransformNode('Effect', scene);
-            system.emitter.parent = root;
-            initial = new EffectBinding(system, [], root);
+            initialEntry = createGalleryDefaultEntry(scene, galleryRoot, [], galleryDefaults);
+            placeGalleryEntryInScene(initialEntry, renderer, BVector3.Zero());
         }
-        mount(initial);
+        galleryEntries = [initialEntry];
+        const initialPreviewIds = initialEntry.inScene ? [initialEntry.root.uniqueId] : [];
+        if (stateRef.current) {
+            stateRef.current.galleryRoot = galleryRoot;
+            stateRef.current.galleryEntries = galleryEntries;
+            stateRef.current.previewRootIds = initialPreviewIds;
+        }
+        setPreviewRootIds(initialPreviewIds);
+        setGallery(galleryEntries);
+        focusCatalogEntry(initialEntry);
+        props.onReady?.(makeHandle());
         engine.runRenderLoop(() => {
             const playback = playbackRef.current;
+            const snapshot = stateRef.current;
             if (!playback.scrubbing) {
                 let delta = (engine.getDeltaTime() / 1000) * playback.speed;
-                if (playback.paused) {
-                    delta = playback.stepQueued ? 1 / 60 : 0;
+                const stepQueued = playback.stepQueued;
+                if (!playback.stagePlaying) {
+                    delta = stepQueued ? 1 / 60 : 0;
                     playback.stepQueued = false;
                 }
-                if (delta > 0) {
-                    renderer.update(delta);
-                    playback.elapsed += delta;
+                if (delta > 0 && snapshot) {
+                    const previewIds = new Set(snapshot.previewRootIds);
+                    const simulate = hasActivePreview(snapshot.galleryEntries, previewIds) && (playback.stagePlaying || stepQueued);
+                    if (simulate) {
+                        renderer.update(delta);
+                        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();
+                    }
                 }
             }
             scene.render();
-            const b = stateRef.current.binding;
-            let count = b.system.particleNum;
-            for (const sub of b.subSystems) {
-                count += sub.particleNum;
+            selectionMarker.follow();
+            viewportPickerRef.current?.follow();
+            const wireframes = emitterWireframesRef.current;
+            if (wireframes && snapshot?.binding) {
+                const b = snapshot.binding;
+                wireframes.sync([b.system, ...b.subSystems], `${b.root.uniqueId}:${b.getRevision()}`);
+            }
+            const picker = viewportPickerRef.current;
+            if (picker && snapshot) {
+                const b = snapshot.binding;
+                const galleryKey = snapshot.galleryEntries
+                    .map((entry) => `${entry.root.uniqueId}:${entry.inScene ? 1 : 0}`)
+                    .join('|');
+                const key = `${galleryKey}::${b?.root.uniqueId ?? 'none'}`;
+                picker.sync(snapshot.galleryEntries, b?.root ?? null, key);
+            }
+            if (!snapshot)
+                return;
+            if (fpsRef.current) {
+                fpsRef.current.textContent = `${Math.round(engine.getFps())} FPS`;
             }
-            if (counterRef.current) {
-                counterRef.current.textContent = `${count} particles · ${playback.elapsed.toFixed(2)}s`;
+            const previewIds = new Set(snapshot.previewRootIds);
+            const binding = snapshot.binding;
+            if (binding && (binding.root.uniqueId !== focusTimelineMetaRef.current.rootId || binding.getRevision() !== focusTimelineMetaRef.current.revision)) {
+                const rows = computeTimelineRows(binding);
+                focusTimelineMetaRef.current = {
+                    rootId: binding.root.uniqueId,
+                    revision: binding.getRevision(),
+                    span: computeTimelineSpan(rows),
+                    anyLooping: rows.some((row) => row.kind === 'track' && row.looping),
+                };
+            }
+            if (snapshot.galleryEntries.length > 0) {
+                const playing = countActivePreviews(snapshot.galleryEntries, previewIds);
+                const count = countGalleryParticles(snapshot.galleryEntries, previewIds);
+                const inScene = snapshot.galleryEntries.filter((entry) => entry.inScene).length;
+                const focused = snapshot.galleryEntries.find((entry) => entry.root === binding?.root);
+                const focusId = playback.focusRootId ?? focused?.root.uniqueId ?? null;
+                const focusElapsed = focusId != null ? getFocusElapsed(playback, focusId) : 0;
+                const focusEnded = focusId != null && isFocusFinished(playback, focusId);
+                const meta = focusTimelineMetaRef.current;
+                if (counterRef.current) {
+                    const focusLabel = focused ? ` · focus: ${focused.name}` : '';
+                    const stageLabel = playback.stagePlaying ? 'playing' : 'paused';
+                    const timeLabel = meta.anyLooping
+                        ? `${focusElapsed.toFixed(1)}s ⟳`
+                        : 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) {
+                const b = binding;
+                const count = b.system.particleNum + b.subSystems.reduce((sum, sub) => sum + sub.particleNum, 0);
+                const focusId = playback.focusRootId ?? b.root.uniqueId;
+                const focusElapsed = getFocusElapsed(playback, focusId);
+                const focusEnded = isFocusFinished(playback, focusId);
+                const meta = focusTimelineMetaRef.current;
+                if (counterRef.current) {
+                    const stageLabel = playback.stagePlaying ? 'playing' : 'paused';
+                    const timeLabel = meta.anyLooping
+                        ? `${focusElapsed.toFixed(1)}s ⟳`
+                        : 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`;
+                }
             }
         });
         const resizeObserver = new ResizeObserver(() => engine.resize());
@@ -217,12 +611,48 @@ export function EffectEditorHost(props) {
         return () => {
             resizeObserver.disconnect();
             window.removeEventListener('keydown', onKey);
+            window.removeEventListener('dragend', onWindowDragEnd);
+            clearGalleryDragPreview();
+            cancelGalleryCameraFocus();
+            dropMarker.dispose();
+            dropMarkerRef.current = null;
+            selectionMarker.dispose();
+            selectionMarkerRef.current = null;
+            emitterWireframes.dispose();
+            emitterWireframesRef.current = null;
+            viewportPicker.dispose();
+            viewportPickerRef.current = null;
+            canvasRef.current?.removeEventListener('pointerleave', handleViewportPointerLeave);
+            scene.onPointerObservable.remove(pointerObserver);
             gizmoManager.dispose();
             gizmoUtilityLayer.dispose();
             engine.dispose();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        if (stateRef.current) {
+            stateRef.current.previewRootIds = previewRootIds;
+        }
+    }, [previewRootIds]);
+    useEffect(() => {
+        playbackRef.current.stagePlaying = stagePlaying;
+        const snap = stateRef.current;
+        if (!snap) {
+            return;
+        }
+        const isCatalogEntry = snap.galleryEntries.length > 0;
+        if (!isCatalogEntry) {
+            return;
+        }
+        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);
+    }, [showEmitterWireframes]);
     useEffect(() => {
         const gm = gizmoManagerRef.current;
         if (!gm)
@@ -231,48 +661,262 @@ export function EffectEditorHost(props) {
         gm.rotationGizmoEnabled = gizmoMode === 'rotation';
         gm.scaleGizmoEnabled = gizmoMode === 'scale';
         const activeGizmo = gizmoMode === 'position' ? gm.gizmos.positionGizmo : gizmoMode === 'rotation' ? gm.gizmos.rotationGizmo : gizmoMode === 'scale' ? gm.gizmos.scaleGizmo : null;
-        const observer = activeGizmo?.onDragObservable.add(() => force());
+        let dragRaf = 0;
+        const scheduleTransformRefresh = () => {
+            if (dragRaf !== 0) {
+                return;
+            }
+            dragRaf = requestAnimationFrame(() => {
+                dragRaf = 0;
+                notifyTransformChanged();
+            });
+        };
+        const dragObserver = activeGizmo?.onDragObservable.add(scheduleTransformRefresh);
+        const dragEndObserver = activeGizmo?.onDragEndObservable.add(() => notifyTransformChanged());
         return () => {
-            if (activeGizmo && observer)
-                activeGizmo.onDragObservable.remove(observer);
+            if (dragRaf !== 0) {
+                cancelAnimationFrame(dragRaf);
+            }
+            if (activeGizmo && dragObserver) {
+                activeGizmo.onDragObservable.remove(dragObserver);
+            }
+            if (activeGizmo && dragEndObserver) {
+                activeGizmo.onDragEndObservable.remove(dragEndObserver);
+            }
         };
     }, [gizmoMode]);
     useEffect(() => {
         const gm = gizmoManagerRef.current;
-        const stageRoot = stateRef.current?.stageRoot;
-        if (!gm || !stageRoot)
+        if (!gm)
             return;
         if (selectedNode && selectedNode.isDisposed()) {
-            setSelectedNode(stateRef.current?.binding.system.emitter ?? null);
+            setSelectedNode(stateRef.current?.binding?.root ?? stateRef.current?.binding?.system.emitter ?? null);
             return;
         }
-        gm.attachToNode(selectedNode ?? stageRoot);
-    }, [selectedNode, binding]);
+        if (isGalleryLoading) {
+            return;
+        }
+        const target = selectedNode && !selectedNode.isDisposed()
+            ? selectedNode
+            : binding?.root && !binding.root.isDisposed()
+                ? binding.root
+                : null;
+        if (target) {
+            gm.attachToNode(target);
+        }
+    }, [selectedNode, binding, isGalleryLoading]);
     const state = stateRef.current;
-    const gizmoNode = selectedNode && !selectedNode.isDisposed() ? selectedNode : state?.stageRoot;
+    const gizmoNode = selectedNode && !selectedNode.isDisposed()
+        ? selectedNode
+        : binding?.root && !binding.root.isDisposed()
+            ? binding.root
+            : null;
     const historyAction = (json) => {
-        if (json && state) {
+        if (json && state?.binding) {
             const current = state.binding;
-            const { root, systems } = loadEffectFromJson(state.scene, state.renderer, json);
-            disposeEffect(current.root, [current.system, ...current.subSystems], state.renderer);
-            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
-            const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
-            next.root.parent = state.stageRoot;
-            state.history.attach(next);
-            next.subscribe(force);
-            state.binding = next;
-            setBinding(next);
-            setSelectedNode(next.system.emitter);
+            const inGallery = state.galleryEntries.length > 0;
+            const entryIndex = inGallery ? state.galleryEntries.findIndex((e) => e.root === current.root) : -1;
+            const prev = entryIndex >= 0 ? state.galleryEntries[entryIndex] : null;
+            const wasInScene = prev?.inScene ?? true;
+            const savedPosition = wasInScene ? current.root.position.clone() : null;
+            if (inGallery && entryIndex >= 0 && prev) {
+                disposeEffect(current.root, [current.system, ...current.subSystems], state.renderer, wasInScene);
+                const { root, systems } = parseEffectFromJson(state.scene, wasInScene ? state.renderer : null, json, {
+                    registerRenderer: wasInScene,
+                    autoplay: false,
+                });
+                if (systems.length === 0) {
+                    disposeLoadedEffect(root, systems, state.renderer, wasInScene);
+                    return;
+                }
+                if (wasInScene && savedPosition) {
+                    root.position.copyFrom(savedPosition);
+                    root.parent = null;
+                    root.setEnabled(true);
+                }
+                else {
+                    root.parent = state.galleryRoot;
+                    root.setEnabled(false);
+                }
+                if (!root.name || root.name === 'Effect' || root.name === 'Object3D') {
+                    root.name = prev.name;
+                }
+                const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
+                const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
+                const oldRootId = current.root.uniqueId;
+                const updated = [...state.galleryEntries];
+                updated[entryIndex] = { name: prev.name, path: prev.path, root, systems, inScene: wasInScene };
+                state.galleryEntries = updated;
+                setGallery(updated);
+                setPreviewRootIds((ids) => {
+                    const next = ids.map((id) => (id === oldRootId ? root.uniqueId : id));
+                    if (stateRef.current) {
+                        stateRef.current.previewRootIds = next;
+                    }
+                    return next;
+                });
+                state.history.attach(next);
+                next.subscribe(force);
+                state.binding = next;
+                setBinding(next);
+                setSelectedNode(root);
+                setSelectedGalleryRoot(root);
+                playbackRef.current.focusRootId = root.uniqueId;
+                if (wasInScene) {
+                    selectionMarkerRef.current?.show(root);
+                }
+                else {
+                    selectionMarkerRef.current?.hide();
+                }
+            }
+            else {
+                const { root, systems } = loadEffectFromJson(state.scene, state.renderer, json);
+                if (systems.length === 0) {
+                    disposeEffect(root, systems, state.renderer);
+                    return;
+                }
+                disposeEffect(current.root, [current.system, ...current.subSystems], state.renderer);
+                const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
+                const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
+                next.root.parent = null;
+                state.history.attach(next);
+                next.subscribe(force);
+                state.binding = next;
+                setBinding(next);
+                setSelectedNode(root);
+                setSelectedGalleryRoot(null);
+                selectionMarkerRef.current?.hide();
+                state.ground.scaling.x = 1;
+                state.ground.scaling.z = 1;
+                state.camera.radius = 9;
+                state.camera.setTarget(new BVector3(0, 1.4, 0));
+            }
         }
         force();
     };
     const allSystems = binding ? [binding.system, ...binding.subSystems] : [];
     const activeSystem = binding ? (allSystems.find((s) => s.emitter === selectedNode) ?? binding.system) : null;
-    const gizmoTargetLabel = selectedNode ? gizmoNode?.name || 'Node' : 'Stage (preview parent)';
-    return (_jsxs("div", { className: "qe-root", style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', fontFamily: theme.font, color: theme.text, background: '#070b16' }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, children: [_jsx("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block', touchAction: 'none', outline: 'none' } }), _jsxs("div", { style: { position: 'absolute', top: 12, right: 12, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }, children: [_jsxs("div", { style: { display: 'flex', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: [_jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Undo (Ctrl+Z)", disabled: !state?.history.canUndo, onClick: () => historyAction(state.history.undo()), children: "\u21B6" }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !state?.history.canRedo, onClick: () => historyAction(state.history.redo()), children: "\u21B7" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: GIZMO_MODE_BUTTONS.map((m) => (_jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(gizmoMode === m.value ? activeSquareButtonStyle : {}) }, title: m.title, onClick: () => setGizmoMode(m.value), children: m.icon }, m.value))) })] })] }), _jsxs("aside", { style: { width: 340, flexShrink: 0, borderLeft: `1px solid ${theme.border}`, background: theme.panelBg, display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { className: "qe-hover-bg", title: binding ? 'Rename effect' : undefined, style: { fontSize: 16, fontWeight: 600, cursor: binding ? 'pointer' : 'default', borderRadius: 6, padding: '2px 4px', margin: '-2px -4px' }, onClick: () => binding && setRenamingRoot(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renamingRoot && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
+    const gizmoTargetLabel = gizmoNode?.name || 'Node';
+    const selectedGalleryEntry = selectedGalleryRoot
+        ? gallery.find((entry) => entry.root === selectedGalleryRoot) ?? null
+        : null;
+    /** Timeline is always shown when an effect is selected; playback only when it is on stage. */
+    const showTimeline = Boolean(binding && activeSystem && state);
+    const timelinePlaybackEnabled = !selectedGalleryEntry || selectedGalleryEntry.inScene;
+    const previewRootIdSet = useMemo(() => new Set(previewRootIds), [previewRootIds]);
+    const resolveTextureForEditor = useCallback((url) => {
+        const scene = stateRef.current?.scene;
+        return scene && props.resolveTexture ? props.resolveTexture(url, scene) : undefined;
+    }, [props.resolveTexture]);
+    const resolveGeometryForEditor = useCallback((file) => {
+        const scene = stateRef.current?.scene;
+        if (!scene || !props.resolveGeometry) {
+            return Promise.reject(new Error('Geometry loader is not available.'));
+        }
+        return props.resolveGeometry(file, scene);
+    }, [props.resolveGeometry]);
+    return (_jsxs("div", { className: "qe-root", style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', fontFamily: theme.font, color: theme.text, background: '#070b16' }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsxs("aside", { style: {
+                            width: GALLERY_PANEL_WIDTH,
+                            flexShrink: 0,
+                            borderRight: `1px solid ${theme.border}`,
+                            background: theme.panelBg,
+                            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 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;
+                        }, onDragLeave: (e) => {
+                            if (!e.dataTransfer.types.includes(GALLERY_DRAG_MIME))
+                                return;
+                            galleryDragDepthRef.current -= 1;
+                            if (galleryDragDepthRef.current <= 0) {
+                                galleryDragDepthRef.current = 0;
+                                dropMarkerRef.current?.hide();
+                                setGalleryDragHover(null);
+                            }
+                        }, onDragOver: (e) => {
+                            if (!e.dataTransfer.types.includes(GALLERY_DRAG_MIME))
+                                return;
+                            e.preventDefault();
+                            e.dataTransfer.dropEffect = 'copy';
+                            const payload = getGalleryDragSession();
+                            const snap = stateRef.current;
+                            if (!payload || !snap)
+                                return;
+                            const described = describeGalleryDrag(snap.galleryEntries, payload);
+                            if (described.entries.length === 0)
+                                return;
+                            const position = pickGroundPosition(snap.scene, e.clientX, e.clientY);
+                            dropMarkerRef.current?.show(position, described.entries.length);
+                            setGalleryDragHover({ label: described.label, count: described.entries.length });
+                        }, onDrop: (e) => {
+                            if (!e.dataTransfer.types.includes(GALLERY_DRAG_MIME))
+                                return;
+                            e.preventDefault();
+                            galleryDragDepthRef.current = 0;
+                            placeGalleryDropRef.current(e.clientX, e.clientY, e.dataTransfer);
+                        }, children: [_jsx("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block', touchAction: 'none', outline: 'none' } }), _jsx("div", { style: {
+                                    position: 'absolute',
+                                    bottom: 12,
+                                    left: 12,
+                                    background: theme.panelBg,
+                                    border: `1px solid ${theme.border}`,
+                                    borderRadius: 8,
+                                    padding: '4px 10px',
+                                    fontSize: 12,
+                                    color: theme.textDim,
+                                    fontVariantNumeric: 'tabular-nums',
+                                    pointerEvents: 'none',
+                                    fontFamily: theme.font,
+                                }, children: _jsx("span", { ref: fpsRef, children: "\u2014 FPS" }) }), galleryDragHover && (_jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 10,
+                                    border: '2px dashed rgba(120, 165, 255, 0.75)',
+                                    borderRadius: 12,
+                                    pointerEvents: 'none',
+                                    boxShadow: 'inset 0 0 0 1px rgba(120, 165, 255, 0.15)',
+                                }, children: _jsxs("div", { style: {
+                                        position: 'absolute',
+                                        left: '50%',
+                                        bottom: 18,
+                                        transform: 'translateX(-50%)',
+                                        background: 'rgba(7, 11, 22, 0.88)',
+                                        border: `1px solid ${theme.border}`,
+                                        borderRadius: 8,
+                                        padding: '8px 14px',
+                                        fontSize: 13,
+                                        color: theme.text,
+                                        whiteSpace: 'nowrap',
+                                    }, children: ["Drop ", galleryDragHover.count === 1 ? 'effect' : `${galleryDragHover.count} effects`, " \u2014 ", galleryDragHover.label] }) })), galleryLoading && (_jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    background: 'rgba(7, 11, 22, 0.72)',
+                                    pointerEvents: 'none',
+                                }, children: _jsxs("div", { style: { background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 10, padding: '16px 22px', textAlign: 'center' }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Loading gallery\u2026" }), _jsxs("div", { style: { fontSize: 13, color: theme.textDim }, children: [galleryLoading.done, " / ", galleryLoading.total || '…', " files", galleryLoading.failed > 0 ? ` · ${galleryLoading.failed} skipped` : ''] })] }) })), props.backLink && (_jsxs("a", { className: "qe-hover", href: props.backLink.href, style: {
+                                    position: 'absolute',
+                                    top: 12,
+                                    left: 12,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    background: theme.panelBg,
+                                    border: `1px solid ${theme.border}`,
+                                    borderRadius: 8,
+                                    padding: '6px 12px',
+                                    fontSize: 13,
+                                    fontWeight: 500,
+                                    color: theme.text,
+                                    textDecoration: 'none',
+                                    fontFamily: theme.font,
+                                }, children: [_jsx(ArrowLeftIcon, { style: iconStyle(14) }), props.backLink.label.replace(/^←\s*/, '')] })), _jsxs("div", { style: { position: 'absolute', top: 12, right: 12, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }, children: [_jsxs("div", { style: { display: 'flex', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: [_jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Undo (Ctrl+Z)", disabled: !state?.history.canUndo || !binding, onClick: () => historyAction(state.history.undo()), children: _jsx(ArrowUturnLeftIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !state?.history.canRedo || !binding, onClick: () => historyAction(state.history.redo()), children: _jsx(ArrowUturnRightIcon, { style: iconStyle(14) }) })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: GIZMO_MODE_BUTTONS.map((m) => (_jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(gizmoMode === m.value ? activeSquareButtonStyle : {}) }, title: m.title, onClick: () => setGizmoMode(m.value), children: _jsx(m.Icon, { style: iconStyle(14) }) }, m.value))) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: _jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(showEmitterWireframes ? activeSquareButtonStyle : {}) }, title: "Show emitter shape wireframes", disabled: !binding, onClick: () => setShowEmitterWireframes((on) => !on), children: _jsx(CubeTransparentIcon, { style: iconStyle(14) }) }) })] })] }), _jsxs("aside", { style: { width: 340, flexShrink: 0, borderLeft: `1px solid ${theme.border}`, background: theme.panelBg, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 600, color: theme.textDim, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }, children: "Inspector" }), _jsx("div", { className: "qe-hover-bg", title: binding ? 'Rename effect' : undefined, style: { fontSize: 16, fontWeight: 600, cursor: binding ? 'pointer' : 'default', borderRadius: 6, padding: '2px 4px', margin: '-2px -4px' }, onClick: () => binding && setRenamingRoot(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renamingRoot && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
                                             binding.apply(() => (binding.root.name = name));
                                             setRenamingRoot(false);
-                                        }, onCancel: () => setRenamingRoot(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, onClick: () => {
+                                        }, onCancel: () => setRenamingRoot(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => {
                                                     if (!binding)
                                                         return;
                                                     const blob = new Blob([binding.exportJSON('EditorEffect')], { type: 'application/json' });
@@ -281,21 +925,7 @@ export function EffectEditorHost(props) {
                                                     link.download = 'effect.json';
                                                     link.click();
                                                     URL.revokeObjectURL(link.href);
-                                                }, children: "Export" }), _jsx("button", { className: "qe-hover", style: buttonStyle, onClick: () => importRef.current?.click(), children: "Import" }), props.onSave && (_jsx("button", { className: "qe-hover", style: buttonStyle, onClick: () => binding && props.onSave(binding.exportJSON('EditorEffect')), children: "Save" })), _jsx("input", { ref: importRef, type: "file", accept: ".json,application/json", hidden: true, onChange: async (e) => {
-                                                    const file = e.target.files?.[0];
-                                                    e.target.value = '';
-                                                    if (!file || !state)
-                                                        return;
-                                                    try {
-                                                        const json = JSON.parse(await file.text());
-                                                        historyAction(json);
-                                                        state.history.clear();
-                                                        force();
-                                                    }
-                                                    catch (err) {
-                                                        console.error('Failed to import effect JSON:', err);
-                                                    }
-                                                } })] })] }), _jsx("div", { style: { flex: 1, 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 && state ? (url) => props.resolveTexture(url, state.scene) : undefined, resolveGeometry: props.resolveGeometry && state ? (file) => props.resolveGeometry(file, state.scene) : undefined })) })] })] }), binding && activeSystem && state && (_jsx(TimelinePanel, { binding: binding, selectedNode: selectedNode, onSelectNode: setSelectedNode, scene: state.scene, renderer: state.renderer, playbackRef: playbackRef, playheadRef: playheadRef, counterRef: counterRef, paused: paused, setPaused: setPaused, speed: speed, setSpeed: setSpeed }))] }));
+                                                }, 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 = {