babylon.quarks-editor 0.19.0 → 0.20.0

package/dist/react/EffectEditorHost.js

@@ -6,48 +6,65 @@ import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 as BVector3 } from '@babylonjs/core/Maths/math.vector';
+import { Viewport } from '@babylonjs/core/Maths/math.viewport';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer';
 import { Scene } from '@babylonjs/core/scene';
 import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial';
-import { ArrowLeftIcon, ArrowPathIcon, ArrowsPointingOutIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, CubeTransparentIcon, CursorArrowRaysIcon, Square2StackIcon, } from '@heroicons/react/24/solid';
+import { ArrowLeftIcon, ArrowPathIcon, ArrowsPointingOutIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, ChevronDownIcon, ChevronUpIcon, CubeTransparentIcon, CursorArrowRaysIcon, MapPinIcon, Square2StackIcon, XMarkIcon, } from '@heroicons/react/24/solid';
 import { BatchedRenderer, QuarksUtil } from 'babylon.quarks';
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useCallback, useDeferredValue, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { EffectBinding } from '../core/binding';
-import { ensureGroundResolver } from '../core/collision';
-import { createGalleryDefaultEntry } from '../core/defaultEffect';
+import { getAssetDragSession, setAssetDragSession } from '../core/assetDragSession';
+import { ASSET_DRAG_MIME, describeAssetDrag, readAssetDrag } from '../core/assetTree';
+import { collectJsonFiles, createEffectAsset, loadEffectAssets, mergeAssets, removeAssets, } from '../core/assets';
+import { createSceneDefaultEntry } from '../core/defaultEffect';
+import { serializeEffectTree } from '../core/effectTree';
 import { EmitterShapeWireframes } from '../core/emitterShapeWireframe';
-import { getGalleryDragSession, setGalleryDragSession } from '../core/galleryDragSession';
 import { GalleryDropMarker } from '../core/galleryDropMarker';
 import { cancelGalleryCameraFocus, focusGalleryEntry } from '../core/galleryLayout';
-import { applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview, pauseFinishedPreviews, } from '../core/galleryPlayback';
-import { clearGalleryEntrySimulation, pickGroundPosition, placeGalleryEntriesAt, placeGalleryEntryInScene, removeGalleryEntryFromScene, } from '../core/galleryScene';
+import { applyGalleryPlayback, countGalleryParticles, hasActivePreview, pauseFinishedPreviews, } from '../core/galleryPlayback';
+import { pickGroundPosition, placeSceneEntriesAt, setSceneEntryVisible } from '../core/galleryScene';
 import { GallerySelectionMarker } from '../core/gallerySelectionMarker';
-import { describeGalleryDrag, GALLERY_DRAG_MIME, readGalleryDrag } from '../core/galleryTree';
 import { EffectHistory } from '../core/history';
-import { disposeLoadedEffect, loadEffectFromJson, parseEffectFromJson } from '../core/loadEffect';
-import { bindingFromGalleryEntry, collectJsonFiles, loadEffectGallery, mergeGalleryEntries, } from '../core/loadEffectGallery';
-import { pickGalleryJsonFiles } from '../core/pickGalleryFiles';
+import { parseEffectFromJson } from '../core/loadEffect';
+import { pickAssetFolderFiles } from '../core/pickAssetFiles';
 import { clearFocusFinished, createPlaybackState, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
 import { logRenderMismatch } from '../core/renderDebug';
+import { bindingFromSceneEntry, countInstancesByAsset, disposeSceneEntry, instantiateSceneEntry, } from '../core/sceneEntries';
 import { pauseFocus, scrubFocusToSettled } from '../core/scrub';
 import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
-import { notifyTransformChanged } from '../core/transformStore';
+import { notifyTransformChanged, subscribeTransform } from '../core/transformStore';
+import { toggleStagePlayback } from '../core/transport';
 import { GalleryViewportPicker } from '../core/viewportPicker';
+import { AssetsPanel } from './AssetsPanel';
+import { ChoiceDialog } from './ChoiceDialog';
 import { EffectEditor } from './EffectEditor';
-import { GalleryPanel } from './GalleryPanel';
+import { EffectTreeView } from './EffectTreeView';
 import { MessageDialog } from './MessageDialog';
 import { PromptDialog } from './PromptDialog';
+import { ScenePanel } from './ScenePanel';
 import { TimelinePanel } from './TimelinePanel';
+import { TransportBar } from './TransportBar';
 import { iconStyle } from './icons';
 import { buttonStyle, globalEditorStyles, theme } from './theme';
-/** Disposes an effect's systems and its remaining group tree (otherwise the groups leak). */
-function disposeEffect(root, systems, renderer, inRenderer = true) {
-    disposeLoadedEffect(root, systems, renderer, inRenderer);
+const SCENE_SAVE_INFO_KEY = 'babylon.quarks-editor:scene-save-info-seen';
+function toStoredAsset(asset) {
+    return { path: asset.path, name: asset.name, json: asset.json, missingFiles: asset.missingFiles };
 }
-const GALLERY_PANEL_WIDTH = 280;
+/** `Folder/Name` typed by the user → a clean asset path ending in `.json`. */
+function normalizeAssetPath(input) {
+    const segments = input
+        .replace(/\\/g, '/')
+        .split('/')
+        .map((part) => part.trim())
+        .filter(Boolean);
+    const path = segments.join('/') || 'Effect';
+    return /\.json$/i.test(path) ? path : `${path}.json`;
+}
+const SCENE_PANEL_WIDTH = 280;
+const TIMELINE_HEIGHT = 200;
+const DRAWER_HEIGHT = 280;
 const GIZMO_MODE_BUTTONS = [
     { value: 'none', Icon: CursorArrowRaysIcon, title: 'Select (hide stage gizmo)' },
     { value: 'position', Icon: ArrowsPointingOutIcon, title: 'Move the stage node (position)' },
@@ -68,8 +85,53 @@ const activeSquareButtonStyle = {
     border: `1px solid ${theme.borderActive}`,
     background: 'rgba(120, 165, 255, 0.35)',
 };
+const dockTitleStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+    color: theme.text,
+};
+const dockIconButtonStyle = {
+    ...buttonStyle,
+    width: 24,
+    height: 22,
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+function isTextInput(target) {
+    const el = target;
+    return !!el && (el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName));
+}
 /**
- * Self-contained effect editor: live Babylon preview + hierarchy/inspector sidebar.
+ * Inspector value controls (numbers, checkboxes, selects): Ctrl+Z there means the effect's undo,
+ * not the browser's per-field text undo. Free-text inputs (names, filters) keep the native one.
+ */
+function isInspectorValueControl(target) {
+    const el = target;
+    if (!el)
+        return false;
+    if (el.tagName === 'SELECT')
+        return true;
+    return el.tagName === 'INPUT' && ['number', 'checkbox', 'range', 'color'].includes(el.type);
+}
+/** Position of `node` in its effect tree (0 = root), to find the same node after a rebuild. */
+function nodeIndexInEffect(root, node) {
+    if (!node || node === root)
+        return 0;
+    return root.getDescendants(false).indexOf(node) + 1;
+}
+function nodeAtIndex(root, index) {
+    if (index <= 0)
+        return root;
+    return root.getDescendants(false)[index - 1] ?? root;
+}
+/**
+ * Self-contained effect editor: live Babylon preview, a Scene list of the effects placed in it,
+ * an inspector, and a bottom dock with the timeline and the Assets browser. Assets are effect
+ * files; dragging one into the viewport instantiates an independent copy, as many times as needed.
  * Designed for embedding — see QuarksEffectEditor.Show for the NME-style entry point.
  */
 export function EffectEditorHost(props) {
@@ -77,19 +139,31 @@ export function EffectEditorHost(props) {
     const counterRef = useRef(null);
     const fpsRef = useRef(null);
     const playheadRef = 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 assetFolderInputRef = useRef(null);
+    const actionsRef = useRef({
+        importAssets: async (_files) => { },
+        focusEntry: (_entry) => { },
+        toggleVisible: (_entry) => { },
+        toggleSolo: (_entry) => { },
+        deleteEntry: (_entry) => { },
+        createDefault: () => { },
+        placeDrop: (_clientX, _clientY, _dataTransfer) => { },
+        addToScene: (_payload) => { },
+        deleteAssets: (_payload) => { },
+        saveEntryAsAsset: (_entry, _path) => { },
+        saveScene: async () => false,
+        openPrefab: (_assetId, _discardChanges) => { },
+        overwritePrefab: () => { },
+        savePrefabAsNew: (_path) => { },
+        closePrefab: () => { },
+        prefabInstanceCount: () => 0,
+        historyStep: (_redo) => { },
+    });
     const dropMarkerRef = useRef(null);
     const selectionMarkerRef = useRef(null);
     const emitterWireframesRef = useRef(null);
     const viewportPickerRef = useRef(null);
-    const galleryDragDepthRef = useRef(0);
+    const assetDragDepthRef = useRef(0);
     const stateRef = useRef(null);
     const gizmoManagerRef = useRef(null);
     const [binding, setBinding] = useState(null);
@@ -101,68 +175,99 @@ export function EffectEditorHost(props) {
     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 selectedNodeRef = useRef(null);
+    selectedNodeRef.current = selectedNode;
+    const [sceneEntries, setSceneEntries] = useState([]);
+    const [assets, setAssets] = useState([]);
+    const [assetsLoading, setAssetsLoading] = useState(null);
+    const [focusedRoot, setFocusedRoot] = useState(null);
+    const [visibleRootIds, setVisibleRootIds] = useState([]);
     const [messageDialog, setMessageDialog] = useState(null);
-    const [galleryDragHover, setGalleryDragHover] = useState(null);
+    const [assetDragHover, setAssetDragHover] = useState(null);
     const [showEmitterWireframes, setShowEmitterWireframes] = useState(false);
-    const isGalleryLoading = galleryLoading !== null;
+    const [timelineCollapsed, setTimelineCollapsed] = useState(false);
+    const [soloRootId, setSoloRootId] = useState(null);
+    // Assets drawer: floats over the viewport until closed (X, Esc, Ctrl+Space or the Assets
+    // button); pinned, it is docked above the timeline instead.
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerPinned, setDrawerPinned] = useState(false);
+    const drawerPinnedRef = useRef(false);
+    drawerPinnedRef.current = drawerPinned;
+    const timelineCounterRef = useRef(null);
+    const mainAreaRef = useRef(null);
+    /** Pixels at the bottom of the viewport covered by the floating Assets drawer. */
+    const [viewportInset, setViewportInset] = useState(0);
+    const [sceneDirty, setSceneDirty] = useState(false);
+    const [projectLoading, setProjectLoading] = useState(Boolean(props.project));
+    const [toast, setToast] = useState(null);
+    const [saveAsTarget, setSaveAsTarget] = useState(null);
+    const [exitPrompt, setExitPrompt] = useState(false);
+    // Prefab mode: one asset opened on its own, the scene set aside until "← Scene".
+    const [prefabInfo, setPrefabInfo] = useState(null);
+    const [prefabDirty, setPrefabDirty] = useState(false);
+    const [prefabDialog, setPrefabDialog] = useState(null);
+    /** Asset waiting to replace an open prefab that has unsaved edits. */
+    const [prefabSwitch, setPrefabSwitch] = useState(null);
+    const toastTimerRef = useRef(0);
+    const showToast = (text) => {
+        window.clearTimeout(toastTimerRef.current);
+        setToast(text);
+        toastTimerRef.current = window.setTimeout(() => setToast(null), 2600);
+    };
+    const closeFloatingDrawer = () => {
+        if (!drawerPinnedRef.current) {
+            setDrawerOpen(false);
+        }
+    };
+    const isAssetsLoading = assetsLoading !== 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
+    /** Appends effect files to Assets without touching the scene. */
+    const runAssetImport = async (files) => {
+        if (collectJsonFiles(files).length === 0) {
+            showMessage('Import assets', 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();
+            await actionsRef.current.importAssets(files);
         }
         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();
+            showMessage('Import assets', message);
+            console.error('Failed to import assets:', err);
         }
+        force();
     };
     const handleImportFolder = () => {
         if (typeof window.showDirectoryPicker !== 'function') {
-            galleryFolderInputRef.current?.click();
+            assetFolderInputRef.current?.click();
             return;
         }
         void (async () => {
             try {
-                const picked = await pickGalleryJsonFiles();
+                const picked = await pickAssetFolderFiles();
                 if (picked === null || picked === undefined) {
                     return;
                 }
-                await runGalleryImport(picked);
+                await runAssetImport(picked);
             }
             catch (err) {
                 const message = err instanceof Error ? err.message : String(err);
-                showMessage('Import to gallery', message);
+                showMessage('Import assets', 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.
-        ensureGroundResolver();
         const engine = new Engine(canvasRef.current, true);
         const scene = new Scene(engine);
         scene.clearColor = new Color4(0.03, 0.04, 0.09, 1);
         const camera = new ArcRotateCamera('cam', -Math.PI / 2, 1.15, 9, new BVector3(0, 1.4, 0), scene);
         camera.attachControl(canvasRef.current, true);
         camera.wheelDeltaPercentage = 0.01;
-        // Mesh render mode particles are lit (billboard modes ignore these), and the grid gives
-        // a visual floor at the same y=0 plane the Collision module's ground resolver uses.
+        // Mesh render mode particles are lit (billboard modes ignore these); the grid is visual
+        // reference only and is not a physics collider.
         scene.ambientColor = new Color3(1, 1, 1);
         const sunLight = new DirectionalLight('sun', new BVector3(-1, -1, -1), scene);
         sunLight.intensity = 1.0;
@@ -184,9 +289,8 @@ export function EffectEditorHost(props) {
         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 = [];
+        /** Undo/redo of effects that are not focused right now, by root uniqueId. */
+        const historyByRoot = new Map();
         const dropMarker = new GalleryDropMarker(scene);
         dropMarkerRef.current = dropMarker;
         const selectionMarker = new GallerySelectionMarker(scene);
@@ -195,17 +299,30 @@ export function EffectEditorHost(props) {
         emitterWireframesRef.current = emitterWireframes;
         const viewportPicker = new GalleryViewportPicker(scene);
         viewportPickerRef.current = viewportPicker;
+        stateRef.current = {
+            engine,
+            scene,
+            camera,
+            ground,
+            renderer,
+            binding: null,
+            history,
+            sceneEntries: [],
+            visibleRootIds: [],
+            assets: [],
+        };
+        const state = stateRef.current;
         const handleViewportPointerLeave = () => viewportPicker.setHover(null);
         canvasRef.current?.addEventListener('pointerleave', handleViewportPointerLeave);
         const pointerObserver = scene.onPointerObservable.add((pointerInfo) => {
-            if (galleryDragDepthRef.current > 0) {
+            if (assetDragDepthRef.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);
+                const focused = state.binding?.root ?? null;
+                viewportPicker.setHover(effectRoot && effectRoot !== focused ? effectRoot : null);
                 return;
             }
             if (pointerInfo.type !== PointerEventTypes.POINTERDOWN || event.button !== 0) {
@@ -215,202 +332,622 @@ export function EffectEditorHost(props) {
             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);
+            const entry = state.sceneEntries.find((item) => item.root === effectRoot);
+            if (entry && state.binding?.root !== effectRoot) {
+                focusEntry(entry);
             }
             setSelectedNode(effectRoot);
         });
-        const clearGalleryDragPreview = () => {
-            galleryDragDepthRef.current = 0;
+        const clearAssetDragPreview = () => {
+            assetDragDepthRef.current = 0;
             dropMarker.hide();
-            setGalleryDragHover(null);
-            setGalleryDragSession(null);
+            setAssetDragHover(null);
+            setAssetDragSession(null);
         };
-        const onWindowDragEnd = () => clearGalleryDragPreview();
+        const onWindowDragEnd = () => clearAssetDragPreview();
         window.addEventListener('dragend', onWindowDragEnd);
-        const syncStateRef = (bindingValue) => {
-            stateRef.current = {
-                engine,
-                scene,
-                camera,
-                ground,
-                renderer,
-                binding: bindingValue,
-                history,
-                galleryRoot,
-                galleryEntries,
-                previewRootIds: stateRef.current?.previewRootIds ?? [],
-            };
+        // ---- state commits ------------------------------------------------------------------
+        /**
+         * The open prefab, if any: its asset, and the scene set aside while it is edited. In prefab
+         * mode `state.sceneEntries` holds just the prefab's instance, so playback, picking, undo and
+         * the timeline all work on it unchanged.
+         */
+        let prefab = null;
+        let prefabChanged = false;
+        /** Scene changes since the last save; suppressed while a project scene loads. */
+        let dirty = false;
+        let loadingScene = Boolean(props.project);
+        const markDirty = () => {
+            if (prefab) {
+                if (!prefabChanged) {
+                    prefabChanged = true;
+                    setPrefabDirty(true);
+                }
+                return;
+            }
+            if (!loadingScene && !dirty) {
+                dirty = true;
+                setSceneDirty(true);
+            }
         };
-        const focusCatalogEntry = (entry) => {
-            const next = bindingFromGalleryEntry(entry);
-            history.clear();
-            history.attach(next);
-            next.subscribe(force);
-            syncStateRef(next);
+        const markClean = () => {
+            dirty = false;
+            setSceneDirty(false);
+        };
+        const unsubscribeTransform = subscribeTransform(markDirty);
+        const commitEntries = (next) => {
+            state.sceneEntries = next;
+            setSceneEntries(next);
+            markDirty();
+        };
+        const commitAssets = (next) => {
+            state.assets = next;
+            setAssets(next);
+        };
+        const commitVisible = (next) => {
+            state.visibleRootIds = next;
+            setVisibleRootIds(next);
+            markDirty();
+        };
+        const onBindingChange = () => {
+            force();
+            markDirty();
+        };
+        const isVisible = (entry) => state.visibleRootIds.includes(entry.root.uniqueId);
+        const refreshPlayback = () => {
+            applyGalleryPlayback(state.sceneEntries, new Set(state.visibleRootIds), playbackRef.current.stagePlaying, playbackRef.current.focusFinishedByRoot);
+            renderer.refreshBatches();
+            scene.render();
+            force();
+        };
+        // ---- focus ----------------------------------------------------------------------------
+        const attachBinding = (next) => {
+            const previous = state.binding;
+            if (previous && !previous.root.isDisposed()) {
+                historyByRoot.set(previous.root.uniqueId, history.saveStacks());
+            }
+            history.restoreStacks(next ? historyByRoot.get(next.root.uniqueId) : undefined);
+            if (next) {
+                history.attach(next);
+                next.subscribe(onBindingChange);
+            }
+            state.binding = next;
             setBinding(next);
-            setSelectedNode(entry.root);
-            setSelectedGalleryRoot(entry.root);
-            playbackRef.current.focusRootId = entry.root.uniqueId;
-            if (entry.inScene) {
+        };
+        const focusEntry = (entry, moveCamera = true) => {
+            attachBinding(entry ? bindingFromSceneEntry(entry) : null);
+            setSelectedNode(entry?.root ?? null);
+            setFocusedRoot(entry?.root ?? null);
+            playbackRef.current.focusRootId = entry?.root.uniqueId ?? null;
+            if (entry && isVisible(entry)) {
                 selectionMarker.show(entry.root);
-                focusGalleryEntry(camera, entry.root);
+                if (moveCamera) {
+                    focusGalleryEntry(camera, entry.root);
+                }
             }
             else {
                 selectionMarker.hide();
             }
+            props.onReady?.(makeHandle());
         };
-        const toggleGalleryPreview = (entry) => {
-            if (!entry.inScene) {
+        // ---- scene entries ------------------------------------------------------------------
+        /** Adds entries to the scene (visible) and focuses the first. */
+        const addEntries = (entries, center) => {
+            if (entries.length === 0) {
                 return;
             }
+            placeSceneEntriesAt(entries, center);
+            for (const entry of entries) {
+                entry.root.setEnabled(true);
+            }
+            commitEntries([...state.sceneEntries, ...entries]);
+            commitVisible([...state.visibleRootIds, ...entries.map((entry) => entry.root.uniqueId)]);
+            focusEntry(entries[0], false);
+            refreshPlayback();
+        };
+        const refuseInPrefabMode = () => {
+            if (!prefab)
+                return false;
+            showToast('Effects go into the scene — go back to the scene (← Scene) to add them');
+            return true;
+        };
+        const instantiateAssets = (toPlace, center) => {
+            if (refuseInPrefabMode()) {
+                return;
+            }
+            const created = [];
+            for (const asset of toPlace) {
+                try {
+                    const entry = instantiateSceneEntry(scene, renderer, asset, [...state.sceneEntries, ...created]);
+                    if (entry) {
+                        created.push(entry);
+                    }
+                }
+                catch (err) {
+                    console.warn(`[Quarks editor] Could not instantiate "${asset.path}":`, err);
+                }
+            }
+            if (created.length < toPlace.length) {
+                showMessage('Add to scene', `${toPlace.length - created.length} of ${toPlace.length} effect(s) could not be loaded — see the console.`);
+            }
+            addEntries(created, center);
+        };
+        const toggleVisible = (entry) => {
             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);
+            const show = !isVisible(entry);
+            setSceneEntryVisible(entry, renderer, show);
+            clearFocusFinished(playbackRef.current, id);
+            commitVisible(show ? [...state.visibleRootIds, id] : state.visibleRootIds.filter((rootId) => rootId !== id));
+            if (state.binding?.root === entry.root) {
+                if (show) {
+                    selectionMarker.show(entry.root);
                 }
                 else {
-                    next.add(id);
-                    clearFocusFinished(playbackRef.current, id);
-                }
-                const ids = [...next];
-                if (stateRef.current) {
-                    stateRef.current.previewRootIds = ids;
+                    selectionMarker.hide();
                 }
-                return ids;
-            });
-            if (removing) {
-                clearGalleryEntrySimulation(entry, renderer);
-                clearFocusFinished(playbackRef.current, id);
             }
-            renderer.refreshBatches();
-            scene.render();
-            force();
+            refreshPlayback();
         };
-        const removeGalleryFromScene = (entry) => {
-            if (!entry.inScene) {
+        /** Entry shown alone, and the entries solo hid (shown again when it ends). */
+        let solo = null;
+        const exitSolo = () => {
+            if (!solo) {
                 return;
             }
+            const hidden = new Set(solo.hidden);
+            solo = null;
+            setSoloRootId(null);
+            const toShow = state.sceneEntries.filter((entry) => hidden.has(entry.root.uniqueId) && !isVisible(entry));
+            for (const entry of toShow) {
+                setSceneEntryVisible(entry, renderer, true);
+                clearFocusFinished(playbackRef.current, entry.root.uniqueId);
+            }
+            commitVisible([...state.visibleRootIds, ...toShow.map((entry) => entry.root.uniqueId)]);
+        };
+        const toggleSolo = (entry) => {
+            if (prefab)
+                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;
+            const wasSolo = solo?.rootId === id;
+            exitSolo();
+            if (!wasSolo) {
+                const others = state.sceneEntries.filter((item) => item !== entry && isVisible(item));
+                for (const other of others) {
+                    setSceneEntryVisible(other, renderer, false);
+                }
+                const hiddenIds = others.map((other) => other.root.uniqueId);
+                const visible = state.visibleRootIds.filter((rootId) => !hiddenIds.includes(rootId));
+                if (!visible.includes(id)) {
+                    setSceneEntryVisible(entry, renderer, true);
+                    visible.push(id);
+                }
+                commitVisible(visible);
+                solo = { rootId: id, hidden: hiddenIds };
+                setSoloRootId(id);
+                if (state.binding?.root !== entry.root) {
+                    focusEntry(entry);
+                }
+                else {
+                    selectionMarker.show(entry.root);
+                    focusGalleryEntry(camera, entry.root);
                 }
-                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) {
+            refreshPlayback();
+        };
+        const deleteEntry = (entry) => {
+            if (prefab)
+                return;
+            const index = state.sceneEntries.indexOf(entry);
+            if (index < 0) {
+                return;
+            }
+            const id = entry.root.uniqueId;
+            if (solo?.rootId === id) {
+                exitSolo();
+            }
+            const wasFocused = state.binding?.root === entry.root;
+            if (wasFocused) {
                 selectionMarker.hide();
             }
-            applyGalleryPlayback(galleryEntries, new Set(stateRef.current?.previewRootIds ?? []), playbackRef.current.stagePlaying, playbackRef.current.focusFinishedByRoot);
-            renderer.refreshBatches();
-            scene.render();
-            force();
+            disposeSceneEntry(entry, renderer);
+            const remaining = state.sceneEntries.filter((item) => item !== entry);
+            commitEntries(remaining);
+            commitVisible(state.visibleRootIds.filter((rootId) => rootId !== id));
+            clearFocusFinished(playbackRef.current, id);
+            playbackRef.current.focusElapsedByRoot.delete(id);
+            if (wasFocused) {
+                focusEntry(remaining[Math.min(index, remaining.length - 1)] ?? null, false);
+            }
+            historyByRoot.delete(id);
+            refreshPlayback();
         };
-        const addGalleryPreview = (...entries) => {
-            const ids = entries.filter((entry) => entry.inScene).map((entry) => entry.root.uniqueId);
-            if (ids.length === 0) {
+        const createDefault = () => {
+            if (refuseInPrefabMode()) {
                 return;
             }
-            setPreviewRootIds((prev) => {
-                const next = [...new Set([...prev, ...ids])];
-                if (stateRef.current) {
-                    stateRef.current.previewRootIds = next;
-                }
-                return next;
+            const entry = createSceneDefaultEntry(scene, state.sceneEntries, {
+                resolveTexture: props.resolveTexture,
+                textureUrl: props.textureOptions?.[0]?.url,
             });
+            for (const system of entry.systems) {
+                renderer.addSystem(system);
+            }
+            addEntries([entry], new BVector3(camera.target.x, 0, camera.target.z));
         };
-        const placeGalleryDropAt = (clientX, clientY, dataTransfer) => {
-            const payload = (dataTransfer && readGalleryDrag(dataTransfer)) ?? getGalleryDragSession();
+        // ---- assets ---------------------------------------------------------------------------
+        const placeDrop = (clientX, clientY, dataTransfer) => {
+            const payload = (dataTransfer && readAssetDrag(dataTransfer)) ?? getAssetDragSession();
+            clearAssetDragPreview();
             if (!payload) {
                 return;
             }
-            const { entries: toPlace } = describeGalleryDrag(galleryEntries, payload);
-            if (toPlace.length === 0) {
+            const { assets: toPlace } = describeAssetDrag(state.assets, payload);
+            instantiateAssets(toPlace, pickGroundPosition(scene, clientX, clientY));
+        };
+        const addToScene = (payload) => {
+            const { assets: toPlace } = describeAssetDrag(state.assets, payload);
+            instantiateAssets(toPlace, new BVector3(camera.target.x, 0, camera.target.z));
+        };
+        /** Writes asset changes through to the project; failures are reported, not thrown. */
+        const persist = (action) => {
+            const project = props.project;
+            if (!project)
                 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();
+            action(project.store, project.id).catch((err) => {
+                console.error('[Quarks editor] Could not save to the project:', err);
+                showMessage('Project storage', err instanceof Error ? err.message : String(err));
+            });
         };
-        const mount = (nextBinding) => {
-            nextBinding.root.parent = null;
-            history.attach(nextBinding);
-            nextBinding.subscribe(force);
-            syncStateRef(nextBinding);
-            setBinding(nextBinding);
-            setSelectedNode(nextBinding.root);
-            props.onReady?.(makeHandle());
+        const deleteAssets = (payload) => {
+            const next = removeAssets(state.assets, payload);
+            const removed = state.assets.filter((asset) => !next.includes(asset)).map((asset) => asset.path);
+            commitAssets(next);
+            persist((store, id) => store.deleteAssets(id, removed));
         };
-        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);
+        const importAssets = async (files) => {
+            setAssetsLoading({ done: 0, total: 0, loaded: 0, failed: 0 });
+            let incoming;
+            try {
+                incoming = await loadEffectAssets(files, (progress) => setAssetsLoading(progress));
+            }
+            finally {
+                setAssetsLoading(null);
+            }
+            const { merged, added } = mergeAssets(state.assets, incoming);
+            commitAssets(merged);
+            setDrawerOpen(true);
+            if (added.length > 0) {
+                persist((store, id) => store.putAssets(id, added.map(toStoredAsset)));
+            }
             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.');
+                throw new Error('All selected effects are already in Assets.');
             }
-            focusCatalogEntry(added[0]);
-            props.onReady?.(makeHandle());
         };
-        const appendGalleryDefault = () => {
-            const entry = createGalleryDefaultEntry(scene, galleryRoot, galleryEntries, {
-                resolveTexture: props.resolveTexture,
-                textureUrl: props.textureOptions?.[0]?.url,
+        /**
+         * Saves a scene instance as a new asset at `rawPath` (`Folder/Name`, never overwriting) and
+         * makes the instance an instance of it.
+         */
+        /** New asset at `rawPath` (`Folder/Name`, a free path — never overwrites) from an effect tree. */
+        const createAssetFromRoot = (root, rawPath) => {
+            const taken = new Set(state.assets.map((asset) => asset.path));
+            const wanted = normalizeAssetPath(rawPath);
+            let path = wanted;
+            for (let n = 2; taken.has(path); n++) {
+                path = wanted.replace(/\.json$/i, ` ${n}.json`);
+            }
+            const name = path
+                .split('/')
+                .pop()
+                .replace(/\.json$/i, '');
+            const asset = createEffectAsset(name, path, JSON.parse(serializeEffectTree(root, name)));
+            commitAssets([...state.assets, asset]);
+            persist((store, id) => store.putAssets(id, [toStoredAsset(asset)]));
+            return asset;
+        };
+        const saveEntryAsAsset = (entry, rawPath) => {
+            const asset = createAssetFromRoot(entry.root, rawPath);
+            entry.assetId = asset.id;
+            entry.path = asset.path;
+            commitEntries([...state.sceneEntries]);
+            setDrawerOpen(true);
+            showToast(`Saved as asset “${asset.path.replace(/\.json$/i, '')}”`);
+        };
+        // ---- prefab mode ------------------------------------------------------------------------
+        /** Scene instances made from the open prefab — they keep their own copy when it is saved. */
+        const prefabInstanceCount = () => prefab ? prefab.stash.entries.filter((entry) => entry.assetId === prefab.asset.id).length : 0;
+        /** Drops the prefab instance(s) currently in `state.sceneEntries`, with their history. */
+        const disposePrefabInstances = () => {
+            for (const entry of state.sceneEntries) {
+                const id = entry.root.uniqueId;
+                disposeSceneEntry(entry, renderer);
+                historyByRoot.delete(id);
+                clearFocusFinished(playbackRef.current, id);
+                playbackRef.current.focusElapsedByRoot.delete(id);
+            }
+        };
+        /**
+         * Opens an asset as a prefab. With another prefab open it is swapped in place — the scene stays
+         * set aside — after asking about unsaved edits unless `discardChanges`.
+         */
+        const openPrefab = (assetId, discardChanges = false) => {
+            if (prefab?.asset.id === assetId) {
+                return;
+            }
+            const asset = state.assets.find((item) => item.id === assetId);
+            if (!asset)
+                return;
+            if (prefab && prefabChanged && !discardChanges) {
+                setPrefabSwitch({ id: asset.id, name: asset.name });
+                return;
+            }
+            let entry = null;
+            try {
+                entry = instantiateSceneEntry(scene, renderer, asset, []);
+            }
+            catch (err) {
+                console.warn(`[Quarks editor] Could not open prefab "${asset.path}":`, err);
+            }
+            if (!entry) {
+                showMessage('Open prefab', `“${asset.name}” has no particle systems to edit.`);
+                return;
+            }
+            if (prefab) {
+                selectionMarker.hide();
+                disposePrefabInstances();
+                prefab.asset = asset;
+                prefabChanged = false;
+                setPrefabDirty(false);
+                setPrefabInfo({ name: asset.name, path: asset.path });
+                entry.root.setEnabled(true);
+                state.sceneEntries = [entry];
+                setSceneEntries([entry]);
+                state.visibleRootIds = [entry.root.uniqueId];
+                setVisibleRootIds([entry.root.uniqueId]);
+                focusEntry(entry);
+                refreshPlayback();
+                return;
+            }
+            exitSolo();
+            const stash = {
+                entries: state.sceneEntries,
+                visible: state.visibleRootIds,
+                focusedRoot: state.binding?.root ?? null,
+                camera: { target: camera.target.clone(), radius: camera.radius, alpha: camera.alpha, beta: camera.beta },
+            };
+            // Hide the scene without touching its saved visibility.
+            for (const item of stash.entries) {
+                if (stash.visible.includes(item.root.uniqueId)) {
+                    setSceneEntryVisible(item, renderer, false);
+                }
+            }
+            selectionMarker.hide();
+            prefab = { asset, stash };
+            prefabChanged = false;
+            setPrefabDirty(false);
+            setPrefabInfo({ name: asset.name, path: asset.path });
+            entry.root.setEnabled(true);
+            state.sceneEntries = [entry];
+            setSceneEntries([entry]);
+            state.visibleRootIds = [entry.root.uniqueId];
+            setVisibleRootIds([entry.root.uniqueId]);
+            focusEntry(entry);
+            refreshPlayback();
+        };
+        /** Leaves prefab mode without saving: drops the prefab instance and brings the scene back. */
+        const closePrefab = () => {
+            if (!prefab)
+                return;
+            const { stash } = prefab;
+            prefab = null;
+            selectionMarker.hide();
+            disposePrefabInstances();
+            state.sceneEntries = stash.entries;
+            setSceneEntries(stash.entries);
+            state.visibleRootIds = stash.visible;
+            setVisibleRootIds(stash.visible);
+            for (const entry of stash.entries) {
+                if (stash.visible.includes(entry.root.uniqueId)) {
+                    setSceneEntryVisible(entry, renderer, true);
+                    clearFocusFinished(playbackRef.current, entry.root.uniqueId);
+                }
+            }
+            cancelGalleryCameraFocus();
+            camera.setTarget(stash.camera.target);
+            camera.radius = stash.camera.radius;
+            camera.alpha = stash.camera.alpha;
+            camera.beta = stash.camera.beta;
+            prefabChanged = false;
+            setPrefabDirty(false);
+            setPrefabInfo(null);
+            focusEntry(stash.entries.find((entry) => entry.root === stash.focusedRoot) ?? null, false);
+            refreshPlayback();
+        };
+        /** Overwrites the open prefab's asset with the edited instance. Scene instances keep theirs. */
+        const overwritePrefab = () => {
+            const root = state.sceneEntries[0]?.root;
+            if (!prefab || !root)
+                return;
+            const updated = {
+                ...prefab.asset,
+                json: JSON.parse(serializeEffectTree(root, prefab.asset.name)),
+            };
+            const exists = state.assets.some((asset) => asset.id === updated.id);
+            commitAssets(exists
+                ? state.assets.map((asset) => (asset.id === updated.id ? updated : asset))
+                : [...state.assets, updated]);
+            persist((store, id) => store.putAssets(id, [toStoredAsset(updated)]));
+            prefab.asset = updated;
+            prefabChanged = false;
+            setPrefabDirty(false);
+            showToast(`Prefab “${updated.name}” saved · scene unchanged`);
+        };
+        /** Saves the edited prefab as a new asset and keeps editing that one. */
+        const savePrefabAsNew = (rawPath) => {
+            const root = state.sceneEntries[0]?.root;
+            if (!prefab || !root)
+                return;
+            const asset = createAssetFromRoot(root, rawPath);
+            prefab.asset = asset;
+            prefabChanged = false;
+            setPrefabDirty(false);
+            setPrefabInfo({ name: asset.name, path: asset.path });
+            showToast(`Saved as new prefab “${asset.path.replace(/\.json$/i, '')}”`);
+        };
+        // ---- project scene ----------------------------------------------------------------------
+        /** Saves the scene to the project; resolves to false when it could not. */
+        const saveScene = async () => {
+            const project = props.project;
+            if (!project || prefab)
+                return false;
+            const visibleIds = new Set(state.visibleRootIds);
+            const assetPathById = new Map(state.assets.map((asset) => [asset.id, asset.path]));
+            const stored = {
+                savedAt: Date.now(),
+                entries: state.sceneEntries.map((entry) => ({
+                    name: entry.name,
+                    assetPath: entry.assetId != null ? (assetPathById.get(entry.assetId) ?? null) : null,
+                    json: JSON.parse(serializeEffectTree(entry.root, entry.name)),
+                    visible: visibleIds.has(entry.root.uniqueId),
+                })),
+            };
+            try {
+                await project.store.saveScene(project.id, stored);
+            }
+            catch (err) {
+                console.error('[Quarks editor] Could not save the scene:', err);
+                showMessage('Save scene', err instanceof Error ? err.message : String(err));
+                return false;
+            }
+            markClean();
+            let infoSeen = true;
+            try {
+                infoSeen = localStorage.getItem(SCENE_SAVE_INFO_KEY) === '1';
+                localStorage.setItem(SCENE_SAVE_INFO_KEY, '1');
+            }
+            catch {
+                // Storage blocked — fall back to the toast.
+            }
+            if (infoSeen) {
+                showToast('Scene saved · assets unchanged');
+            }
+            else {
+                showMessage('Scene saved', 'Saving the scene stores the effects placed in it, with their own edits.\n\n' +
+                    'It does not change the assets they came from. To keep an edited effect as an asset, ' +
+                    'right-click it in the Scene list → “Save as new asset…”.');
+            }
+            return true;
+        };
+        const loadProject = async (project) => {
+            try {
+                const [storedAssets, storedScene] = await Promise.all([
+                    project.store.loadAssets(project.id),
+                    project.store.loadScene(project.id),
+                ]);
+                const loadedAssets = storedAssets.map((stored) => ({
+                    ...createEffectAsset(stored.name, stored.path, stored.json),
+                    missingFiles: stored.missingFiles,
+                }));
+                commitAssets(loadedAssets);
+                const assetIdByPath = new Map(loadedAssets.map((asset) => [asset.path, asset.id]));
+                if (!storedScene) {
+                    createDefault();
+                    return;
+                }
+                const created = [];
+                const visible = [];
+                for (const stored of storedScene.entries) {
+                    const entry = instantiateSceneEntry(scene, renderer, { id: -1, name: stored.name, path: stored.assetPath ?? '', json: stored.json, missingFiles: [] }, created);
+                    if (!entry)
+                        continue;
+                    entry.name = stored.name;
+                    entry.root.name = stored.name;
+                    entry.assetId = stored.assetPath != null ? (assetIdByPath.get(stored.assetPath) ?? null) : null;
+                    entry.path = stored.assetPath ?? `_created/${stored.name}.json`;
+                    setSceneEntryVisible(entry, renderer, stored.visible);
+                    if (stored.visible)
+                        visible.push(entry.root.uniqueId);
+                    created.push(entry);
+                }
+                commitEntries(created);
+                commitVisible(visible);
+                focusEntry(created[0] ?? null, false);
+                refreshPlayback();
+            }
+            catch (err) {
+                console.error('[Quarks editor] Could not open the project:', err);
+                showMessage('Open project', err instanceof Error ? err.message : String(err));
+            }
+            finally {
+                loadingScene = false;
+                markClean();
+                setProjectLoading(false);
+            }
+        };
+        // ---- undo / redo ----------------------------------------------------------------------
+        /** Rebuilds the focused entry from a history snapshot, in place in the scene list. */
+        const historyStep = (redo) => {
+            const current = state.binding;
+            if (!current) {
+                return;
+            }
+            const json = redo ? history.redo() : history.undo();
+            const index = state.sceneEntries.findIndex((entry) => entry.root === current.root);
+            const prev = index >= 0 ? state.sceneEntries[index] : null;
+            if (!json || !prev) {
+                force();
+                return;
+            }
+            const selectedIndex = nodeIndexInEffect(current.root, selectedNodeRef.current);
+            const visible = isVisible(prev);
+            const { root, systems } = parseEffectFromJson(scene, renderer, json, {
+                registerRenderer: true,
+                autoplay: false,
             });
-            galleryEntries = [...galleryEntries, entry];
-            if (stateRef.current) {
-                stateRef.current.galleryRoot = galleryRoot;
-                stateRef.current.galleryEntries = galleryEntries;
+            if (systems.length === 0) {
+                disposeSceneEntry({ ...prev, root, systems }, renderer);
+                force();
+                return;
             }
-            setGallery(galleryEntries);
-            focusCatalogEntry(entry);
-            props.onReady?.(makeHandle());
+            disposeSceneEntry(prev, renderer);
+            // The snapshot carries the root transform too, so a moved effect moves back.
+            root.parent = null;
+            root.name = prev.name;
+            const nextEntry = { ...prev, root, systems };
+            setSceneEntryVisible(nextEntry, renderer, visible);
+            const entries = [...state.sceneEntries];
+            entries[index] = nextEntry;
+            commitEntries(entries);
+            commitVisible(state.visibleRootIds.map((id) => (id === prev.root.uniqueId ? root.uniqueId : id)));
+            if (solo) {
+                if (solo.rootId === prev.root.uniqueId) {
+                    solo.rootId = root.uniqueId;
+                    setSoloRootId(root.uniqueId);
+                }
+                solo.hidden = solo.hidden.map((id) => (id === prev.root.uniqueId ? root.uniqueId : id));
+            }
+            const next = bindingFromSceneEntry(nextEntry);
+            history.attach(next);
+            next.subscribe(onBindingChange);
+            state.binding = next;
+            setBinding(next);
+            setSelectedNode(nodeAtIndex(root, selectedIndex));
+            setFocusedRoot(root);
+            playbackRef.current.focusRootId = root.uniqueId;
+            if (visible) {
+                selectionMarker.show(root);
+            }
+            notifyTransformChanged();
+            refreshPlayback();
         };
+        // ---- handle -----------------------------------------------------------------------------
         const makeHandle = () => ({
             get binding() {
-                const b = stateRef.current?.binding;
+                const b = state.binding;
                 if (!b) {
-                    throw new Error('Gallery mode — import a single JSON to edit one effect.');
+                    throw new Error('No effect is focused — add one to the scene first.');
                 }
                 return b;
             },
@@ -418,64 +955,68 @@ export function EffectEditorHost(props) {
             scene,
             renderer,
             importJson,
-            importGallery: appendGalleryFromFiles,
+            importAssets,
+            importGallery: importAssets,
             exportJson: () => makeHandle().binding.exportJSON('EditorEffect'),
         });
-        const importJson = (json) => {
-            const current = stateRef.current?.binding;
-            const { root, systems } = loadEffectFromJson(scene, renderer, json);
-            if (systems.length === 0) {
-                disposeEffect(root, systems, renderer);
+        /** Adds `json` to Assets and returns its single instance; throws when it has no systems. */
+        const openJson = (json, name = 'Effect') => {
+            const asset = createEffectAsset(name, `_opened/${name}.json`, json);
+            const entry = instantiateSceneEntry(scene, renderer, asset, state.sceneEntries);
+            if (!entry) {
                 throw new Error('No particle systems found in the JSON.');
             }
-            if (current) {
-                const catalogEntry = stateRef.current?.galleryEntries.find((entry) => entry.root === current.root);
-                disposeEffect(current.root, [current.system, ...current.subSystems], renderer, catalogEntry?.inScene ?? true);
+            asset.name = entry.name;
+            asset.path = `_opened/${entry.name}.json`;
+            commitAssets([...state.assets, asset]);
+            return entry;
+        };
+        const importJson = (json) => {
+            closePrefab();
+            const entry = openJson(json);
+            for (const existing of state.sceneEntries) {
+                disposeSceneEntry(existing, renderer);
             }
-            const main = systems.find((s) => !s.onlyUsedByOther) ?? systems[0];
-            const next = new EffectBinding(main, systems.filter((s) => s !== main), root);
-            setSelectedGalleryRoot(null);
-            setPreviewRootIds([]);
-            selectionMarker.hide();
-            mount(next);
-            playbackRef.current.focusRootId = next.root.uniqueId;
+            historyByRoot.clear();
+            solo = null;
+            setSoloRootId(null);
+            commitEntries([]);
+            commitVisible([]);
+            addEntries([entry], BVector3.Zero());
         };
-        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,
+        actionsRef.current = {
+            importAssets,
+            focusEntry: (entry) => focusEntry(entry),
+            toggleVisible,
+            toggleSolo,
+            deleteEntry,
+            createDefault,
+            placeDrop,
+            addToScene,
+            deleteAssets,
+            saveEntryAsAsset,
+            saveScene,
+            openPrefab,
+            overwritePrefab,
+            savePrefabAsNew,
+            closePrefab,
+            prefabInstanceCount,
+            historyStep,
         };
-        let initialEntry;
-        if (props.effectJson) {
-            const { root, systems } = loadEffectFromJson(scene, renderer, props.effectJson);
-            root.parent = null;
-            const name = root.name || 'Effect';
-            initialEntry = { name, path: `_opened/${name}.json`, root, systems, inScene: true };
+        if (props.project) {
+            void loadProject(props.project);
         }
-        else {
-            initialEntry = createGalleryDefaultEntry(scene, galleryRoot, [], galleryDefaults);
-            placeGalleryEntryInScene(initialEntry, renderer, BVector3.Zero());
+        else if (props.effectJson) {
+            addEntries([openJson(props.effectJson)], BVector3.Zero());
         }
-        galleryEntries = [initialEntry];
-        const initialPreviewIds = initialEntry.inScene ? [initialEntry.root.uniqueId] : [];
-        if (stateRef.current) {
-            stateRef.current.galleryRoot = galleryRoot;
-            stateRef.current.galleryEntries = galleryEntries;
-            stateRef.current.previewRootIds = initialPreviewIds;
+        else {
+            createDefault();
         }
-        setPreviewRootIds(initialPreviewIds);
-        setGallery(galleryEntries);
-        focusCatalogEntry(initialEntry);
-        props.onReady?.(makeHandle());
         engine.runRenderLoop(() => {
             const playback = playbackRef.current;
-            const snapshot = stateRef.current;
+            const entries = state.sceneEntries;
+            const visibleIds = new Set(state.visibleRootIds);
+            const focusBinding = state.binding;
             if (!playback.scrubbing) {
                 let delta = (engine.getDeltaTime() / 1000) * playback.speed;
                 const stepQueued = playback.stepQueued;
@@ -483,27 +1024,25 @@ export function EffectEditorHost(props) {
                     delta = stepQueued ? 1 / 60 : 0;
                     playback.stepQueued = false;
                 }
-                if (delta > 0 && snapshot) {
-                    const previewIds = new Set(snapshot.previewRootIds);
-                    const simulate = hasActivePreview(snapshot.galleryEntries, previewIds) && (playback.stagePlaying || stepQueued);
+                if (delta > 0) {
+                    const simulate = hasActivePreview(entries, visibleIds) && (playback.stagePlaying || stepQueued);
                     if (simulate) {
                         renderer.update(delta);
                         let needsRefresh = false;
-                        if (pauseFinishedPreviews(snapshot.galleryEntries, previewIds, playback.focusFinishedByRoot)) {
+                        if (pauseFinishedPreviews(entries, visibleIds, playback.focusFinishedByRoot)) {
                             needsRefresh = true;
                         }
-                        const binding = snapshot.binding;
-                        const focusId = playback.focusRootId ?? binding?.root.uniqueId ?? null;
+                        const focusId = playback.focusRootId ?? focusBinding?.root.uniqueId ?? null;
                         if (focusId != null &&
-                            binding &&
+                            focusBinding &&
                             playback.stagePlaying &&
                             !playback.focusFinishedByRoot.has(focusId) &&
                             !focusTimelineMetaRef.current.anyLooping &&
-                            QuarksUtil.isEffectFinished(binding.root)) {
+                            QuarksUtil.isEffectFinished(focusBinding.root)) {
                             const settleAt = getFocusElapsed(playback, focusId);
-                            scrubFocusToSettled(binding, renderer, settleAt);
+                            scrubFocusToSettled(focusBinding, renderer, settleAt);
                             markFocusFinished(playback, focusId);
-                            pauseFocus(binding);
+                            pauseFocus(focusBinding);
                             needsRefresh = true;
                         }
                         else if (focusId != null &&
@@ -515,106 +1054,107 @@ export function EffectEditorHost(props) {
                         if (needsRefresh) {
                             renderer.refreshBatches();
                         }
-                        if (snapshot.galleryEntries.length > 0) {
-                            logRenderMismatch(renderer, countGalleryParticles(snapshot.galleryEntries, previewIds));
-                        }
+                        logRenderMismatch(renderer, countGalleryParticles(entries, visibleIds));
                     }
-                    else if (snapshot && snapshot.galleryEntries.length > 0) {
+                    else if (entries.length > 0) {
                         renderer.refreshBatches();
                     }
                 }
             }
             scene.render();
             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;
+            viewportPicker.follow();
+            if (focusBinding) {
+                emitterWireframes.sync([focusBinding.system, ...focusBinding.subSystems], `${focusBinding.root.uniqueId}:${focusBinding.getRevision()}`);
+            }
+            const pickKey = entries
+                .map((entry) => `${entry.root.uniqueId}:${visibleIds.has(entry.root.uniqueId) ? 1 : 0}`)
+                .join('|');
+            viewportPicker.sync(entries, null, `${pickKey}::${focusBinding?.root.uniqueId ?? 'none'}`);
             if (fpsRef.current) {
                 fpsRef.current.textContent = `${Math.round(engine.getFps())} FPS`;
             }
-            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);
+            if (focusBinding &&
+                (focusBinding.root.uniqueId !== focusTimelineMetaRef.current.rootId ||
+                    focusBinding.getRevision() !== focusTimelineMetaRef.current.revision)) {
+                const rows = computeTimelineRows(focusBinding);
                 focusTimelineMetaRef.current = {
-                    rootId: binding.root.uniqueId,
-                    revision: binding.getRevision(),
+                    rootId: focusBinding.root.uniqueId,
+                    revision: focusBinding.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);
+            if (counterRef.current) {
+                const count = countGalleryParticles(entries, visibleIds);
+                const focused = entries.find((entry) => entry.root === focusBinding?.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 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 = focused ? `${timeLabel} · ${count} particles` : `${count} particles`;
             }
         });
         const resizeObserver = new ResizeObserver(() => engine.resize());
         resizeObserver.observe(canvasRef.current);
         const onKey = (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
+            const key = e.key.toLowerCase();
+            if ((e.ctrlKey || e.metaKey) && key === 's') {
                 e.preventDefault();
-                const json = e.shiftKey ? history.redo() : history.undo();
-                if (json) {
-                    importJson(json);
+                if (prefab) {
+                    setPrefabDialog('overwrite');
+                }
+                else {
+                    void saveScene();
+                }
+                return;
+            }
+            if (e.code === 'Space' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault();
+                setDrawerOpen((open) => !open);
+                return;
+            }
+            const target = e.target;
+            if (e.code === 'Space' && !isTextInput(target) && target?.tagName !== 'BUTTON') {
+                e.preventDefault();
+                const playback = playbackRef.current;
+                toggleStagePlayback(state.binding, scene, playback, playback.stagePlaying, setStagePlaying);
+                return;
+            }
+            if (e.key === 'Escape') {
+                closeFloatingDrawer();
+            }
+            if ((e.ctrlKey || e.metaKey) && (key === 'z' || key === 'y')) {
+                if (isTextInput(e.target) && !isInspectorValueControl(e.target)) {
+                    return;
+                }
+                e.preventDefault();
+                // Leave the field first so it shows the restored value instead of its draft text.
+                e.target?.blur?.();
+                historyStep(key === 'y' || e.shiftKey);
+                return;
+            }
+            if (e.key === 'Delete' && !isTextInput(e.target)) {
+                const entry = state.sceneEntries.find((item) => item.root === state.binding?.root);
+                if (entry) {
+                    e.preventDefault();
+                    deleteEntry(entry);
                 }
-                force();
             }
         };
         window.addEventListener('keydown', onKey);
         return () => {
+            unsubscribeTransform();
+            window.clearTimeout(toastTimerRef.current);
             resizeObserver.disconnect();
             window.removeEventListener('keydown', onKey);
             window.removeEventListener('dragend', onWindowDragEnd);
-            clearGalleryDragPreview();
+            clearAssetDragPreview();
             cancelGalleryCameraFocus();
             dropMarker.dispose();
             dropMarkerRef.current = null;
@@ -632,29 +1172,72 @@ export function EffectEditorHost(props) {
         };
         // 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();
+        applyGalleryPlayback(snap.sceneEntries, new Set(visibleRootIds), stagePlaying, playbackRef.current.focusFinishedByRoot);
+        if (!stagePlaying) {
+            snap.renderer.refreshBatches();
         }
-    }, [stagePlaying, previewRootIds, gallery]);
+    }, [stagePlaying, visibleRootIds, sceneEntries]);
     useEffect(() => {
         emitterWireframesRef.current?.setVisible(showEmitterWireframes);
     }, [showEmitterWireframes]);
+    // The floating drawer is opaque, so render the scene only in the part of the viewport above
+    // it: the view — and every "frame this effect" camera move — re-centres on what is visible.
+    useEffect(() => {
+        const update = () => {
+            const camera = stateRef.current?.camera;
+            const canvas = canvasRef.current;
+            const area = mainAreaRef.current;
+            if (!camera || !canvas || !area)
+                return;
+            const canvasRect = canvas.getBoundingClientRect();
+            const drawerTop = area.getBoundingClientRect().bottom - DRAWER_HEIGHT;
+            const covered = drawerOpen && !drawerPinned
+                ? Math.max(0, Math.min(canvasRect.height * 0.8, canvasRect.bottom - drawerTop))
+                : 0;
+            const fraction = canvasRect.height > 0 ? covered / canvasRect.height : 0;
+            camera.viewport = new Viewport(0, fraction, 1, 1 - fraction);
+            setViewportInset(covered);
+        };
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [drawerOpen, drawerPinned, timelineCollapsed]);
+    useEffect(() => {
+        if (!props.project || !sceneDirty)
+            return;
+        const onBeforeUnload = (e) => {
+            e.preventDefault();
+            e.returnValue = '';
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    }, [props.project, sceneDirty]);
+    const requestPrefabExit = () => {
+        if (prefabDirty) {
+            setPrefabDialog('exit');
+        }
+        else {
+            actionsRef.current.closePrefab();
+        }
+    };
+    const requestExitProject = () => {
+        if (prefabInfo) {
+            requestPrefabExit();
+            return;
+        }
+        if (sceneDirty) {
+            setExitPrompt(true);
+        }
+        else {
+            props.onExitProject?.();
+        }
+    };
     useEffect(() => {
         const gm = gizmoManagerRef.current;
         if (!gm)
@@ -679,12 +1262,20 @@ export function EffectEditorHost(props) {
                 notifyTransformChanged();
             });
         };
+        // One gizmo drag = one undo step: snapshot at drag start, refresh the UI at the end.
+        const dragStartObserver = activeGizmo?.onDragStartObservable.add(() => stateRef.current?.binding?.onBeforeChange?.());
         const dragObserver = activeGizmo?.onDragObservable.add(scheduleTransformRefresh);
-        const dragEndObserver = activeGizmo?.onDragEndObservable.add(() => notifyTransformChanged());
+        const dragEndObserver = activeGizmo?.onDragEndObservable.add(() => {
+            notifyTransformChanged();
+            stateRef.current?.binding?.markChanged();
+        });
         return () => {
             if (dragRaf !== 0) {
                 cancelAnimationFrame(dragRaf);
             }
+            if (activeGizmo && dragStartObserver) {
+                activeGizmo.onDragStartObservable.remove(dragStartObserver);
+            }
             if (activeGizmo && dragObserver) {
                 activeGizmo.onDragObservable.remove(dragObserver);
             }
@@ -698,10 +1289,10 @@ export function EffectEditorHost(props) {
         if (!gm)
             return;
         if (selectedNode && selectedNode.isDisposed()) {
-            setSelectedNode(stateRef.current?.binding?.root ?? stateRef.current?.binding?.system.emitter ?? null);
+            setSelectedNode(stateRef.current?.binding?.root ?? null);
             return;
         }
-        if (isGalleryLoading) {
+        if (isAssetsLoading) {
             return;
         }
         const target = selectedNode && !selectedNode.isDisposed()
@@ -709,109 +1300,33 @@ export function EffectEditorHost(props) {
             : binding?.root && !binding.root.isDisposed()
                 ? binding.root
                 : null;
-        if (target) {
-            gm.attachToNode(target);
-        }
-    }, [selectedNode, binding, isGalleryLoading]);
+        gm.attachToNode(target);
+    }, [selectedNode, binding, isAssetsLoading]);
     const state = stateRef.current;
     const gizmoNode = selectedNode && !selectedNode.isDisposed()
         ? selectedNode
         : binding?.root && !binding.root.isDisposed()
             ? binding.root
             : null;
-    const historyAction = (json) => {
-        if (json && state?.binding) {
-            const current = state.binding;
-            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 = gizmoNode?.name || 'Node';
-    const selectedGalleryEntry = selectedGalleryRoot
-        ? (gallery.find((entry) => entry.root === selectedGalleryRoot) ?? null)
+    // The inspector is the expensive part of a selection change (every module re-renders for the
+    // new system). It renders from deferred values, so the click, tree highlight and gizmo update
+    // at once and the inspector catches up in an interruptible render instead of stalling frames.
+    const deferredBinding = useDeferredValue(binding);
+    const deferredNode = useDeferredValue(selectedNode);
+    const inspectorBinding = deferredBinding && !deferredBinding.root.isDisposed() ? deferredBinding : binding;
+    const inspectorNode = deferredNode && !deferredNode.isDisposed() && inspectorBinding === deferredBinding
+        ? deferredNode
+        : (inspectorBinding?.root ?? null);
+    const inspectorSystems = inspectorBinding ? [inspectorBinding.system, ...inspectorBinding.subSystems] : [];
+    const inspectorSystem = inspectorBinding
+        ? (inspectorSystems.find((s) => s.emitter === inspectorNode) ?? inspectorBinding.system)
         : null;
-    /** Timeline is always shown when an effect is selected; playback only when it is on stage. */
+    const visibleRootIdSet = useMemo(() => new Set(visibleRootIds), [visibleRootIds]);
+    const instanceCounts = useMemo(() => countInstancesByAsset(sceneEntries), [sceneEntries]);
     const showTimeline = Boolean(binding && activeSystem && state);
-    const timelinePlaybackEnabled = !selectedGalleryEntry || selectedGalleryEntry.inScene;
-    const previewRootIdSet = useMemo(() => new Set(previewRootIds), [previewRootIds]);
+    const timelinePlaybackEnabled = !focusedRoot || visibleRootIdSet.has(focusedRoot.uniqueId);
     const resolveTextureForEditor = useCallback((url) => {
         const scene = stateRef.current?.scene;
         return scene && props.resolveTexture ? props.resolveTexture(url, scene) : undefined;
@@ -831,191 +1346,454 @@ export function EffectEditorHost(props) {
             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,
+        }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { ref: mainAreaRef, style: {
+                    position: 'relative',
+                    flex: 1,
+                    minHeight: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflow: 'hidden',
+                }, children: [_jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsxs("aside", { style: {
+                                    width: SCENE_PANEL_WIDTH,
+                                    flexShrink: 0,
+                                    borderRight: `1px solid ${theme.border}`,
                                     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: {
+                                    minHeight: 0,
+                                }, children: [props.project && (_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: {
+                                            alignItems: 'center',
+                                            gap: 6,
+                                            padding: '8px 10px',
+                                            borderBottom: `1px solid ${theme.border}`,
+                                        }, children: [props.onExitProject && (_jsx("button", { type: "button", className: "qe-hover", title: "Back to projects", style: { ...dockIconButtonStyle, width: 26, height: 26 }, onClick: requestExitProject, children: _jsx(ArrowLeftIcon, { style: iconStyle(13) }) })), _jsxs("span", { title: props.project.name, style: {
+                                                    flex: 1,
+                                                    minWidth: 0,
+                                                    fontSize: 13,
+                                                    fontWeight: 600,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: [props.project.name, sceneDirty ? ' *' : ''] }), _jsx("button", { type: "button", className: "qe-hover", title: "Save the scene (Ctrl+S) \u2014 assets are not changed", disabled: projectLoading, style: {
+                                                    ...buttonStyle,
+                                                    padding: '4px 12px',
+                                                    ...(sceneDirty
+                                                        ? {
+                                                            background: theme.accent,
+                                                            color: '#0a1128',
+                                                            border: `1px solid ${theme.accent}`,
+                                                        }
+                                                        : {}),
+                                                }, onClick: () => prefabInfo ? setPrefabDialog('overwrite') : void actionsRef.current.saveScene(), children: "Save" })] })), _jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: prefabInfo
+                                                    ? 'Prefab'
+                                                    : `Scene${sceneEntries.length > 0 ? ` · ${sceneEntries.length}` : ''}` }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: prefabInfo
+                                                    ? 'The scene is set aside while you edit this asset'
+                                                    : 'Effects in the viewport · click to edit · eye shows/hides' })] }), _jsx("div", { style: {
+                                            flex: 1,
+                                            minHeight: 0,
+                                            overflow: 'hidden',
+                                            padding: '8px 12px 14px',
                                             display: 'flex',
                                             flexDirection: 'column',
-                                            gap: 4,
+                                        }, children: prefabInfo ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 10,
+                                                        padding: 12,
+                                                        border: `1px solid ${theme.borderActive}`,
+                                                        borderRadius: 8,
+                                                        background: 'rgba(120, 165, 255, 0.08)',
+                                                        fontSize: 12,
+                                                        color: theme.textDim,
+                                                        lineHeight: 1.5,
+                                                    }, children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: [prefabInfo.name, prefabDirty ? ' *' : ''] }), _jsx("div", { style: { wordBreak: 'break-all' }, children: prefabInfo.path }), _jsx("div", { children: "Save (Ctrl+S) overwrites this asset. Effects already placed in the scene keep their own copy and do not change." }), _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: requestPrefabExit, children: "\u2190 Scene" }), _jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: () => setPrefabDialog('overwrite'), children: "Save prefab" })] })] }), sceneEntries[0] && (_jsx("div", { style: {
+                                                        flex: 1,
+                                                        minHeight: 0,
+                                                        overflowY: 'auto',
+                                                        border: `1px solid ${theme.border}`,
+                                                        borderRadius: 8,
+                                                        background: theme.sectionBg,
+                                                        padding: '4px 0',
+                                                    }, children: _jsx(EffectTreeView, { includeRoot: true, root: sceneEntries[0].root, selectedNode: selectedNode, onSelect: setSelectedNode }) }))] })) : (_jsx(ScenePanel, { entries: sceneEntries, focusedRoot: focusedRoot, visibleRootIds: visibleRootIdSet, onFocus: (entry) => actionsRef.current.focusEntry(entry), onToggleVisible: (entry) => actionsRef.current.toggleVisible(entry), soloRootId: soloRootId, onToggleSolo: (entry) => actionsRef.current.toggleSolo(entry), onSaveAsAsset: (entry) => setSaveAsTarget(entry), onDelete: (entry) => actionsRef.current.deleteEntry(entry), onCreateDefault: () => actionsRef.current.createDefault(), selectedNode: selectedNode, onSelectNode: (entry, node) => {
+                                                if (stateRef.current?.binding?.root !== entry.root) {
+                                                    actionsRef.current.focusEntry(entry);
+                                                }
+                                                setSelectedNode(node);
+                                            } })) })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, onDragEnter: (e) => {
+                                    if (!e.dataTransfer.types.includes(ASSET_DRAG_MIME))
+                                        return;
+                                    assetDragDepthRef.current += 1;
+                                }, onDragLeave: (e) => {
+                                    if (!e.dataTransfer.types.includes(ASSET_DRAG_MIME))
+                                        return;
+                                    assetDragDepthRef.current -= 1;
+                                    if (assetDragDepthRef.current <= 0) {
+                                        assetDragDepthRef.current = 0;
+                                        dropMarkerRef.current?.hide();
+                                        setAssetDragHover(null);
+                                    }
+                                }, onDragOver: (e) => {
+                                    if (!e.dataTransfer.types.includes(ASSET_DRAG_MIME))
+                                        return;
+                                    e.preventDefault();
+                                    e.dataTransfer.dropEffect = 'copy';
+                                    const payload = getAssetDragSession();
+                                    const snap = stateRef.current;
+                                    if (!payload || !snap)
+                                        return;
+                                    const described = describeAssetDrag(snap.assets, payload);
+                                    if (described.assets.length === 0)
+                                        return;
+                                    const position = pickGroundPosition(snap.scene, e.clientX, e.clientY);
+                                    dropMarkerRef.current?.show(position, described.assets.length);
+                                    setAssetDragHover({ label: described.label, count: described.assets.length });
+                                }, onDrop: (e) => {
+                                    if (!e.dataTransfer.types.includes(ASSET_DRAG_MIME))
+                                        return;
+                                    e.preventDefault();
+                                    actionsRef.current.placeDrop(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 + viewportInset,
+                                            left: 12,
                                             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: {
+                                            padding: '4px 10px',
+                                            fontSize: 12,
+                                            color: theme.textDim,
+                                            fontVariantNumeric: 'tabular-nums',
+                                            pointerEvents: 'none',
+                                            fontFamily: theme.font,
+                                        }, children: _jsx("span", { ref: fpsRef, children: "\u2014 FPS" }) }), state && (_jsx("div", { style: {
+                                            position: 'absolute',
+                                            bottom: 12 + viewportInset,
+                                            left: '50%',
+                                            transform: 'translateX(-50%)',
+                                        }, children: _jsx(TransportBar, { binding: binding, scene: state.scene, renderer: state.renderer, playbackRef: playbackRef, counterRef: counterRef, stagePlaying: stagePlaying, setStagePlaying: setStagePlaying, speed: speed, setSpeed: setSpeed, enabled: timelinePlaybackEnabled }) })), assetDragHover && (_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%',
+                                                top: 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 ", assetDragHover.count === 1 ? 'effect' : `${assetDragHover.count} effects`, " \u2014", ' ', assetDragHover.label] }) })), assetsLoading && (_jsx("div", { style: {
+                                            position: 'absolute',
+                                            inset: 0,
                                             display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 4,
+                                            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: "Importing assets\u2026" }), _jsxs("div", { style: { fontSize: 13, color: theme.textDim }, children: [assetsLoading.done, " / ", assetsLoading.total || '…', " files", assetsLoading.failed > 0 ? ` · ${assetsLoading.failed} skipped` : ''] })] }) })), prefabInfo && (_jsxs("div", { style: {
+                                            position: 'absolute',
+                                            top: 12,
+                                            left: '50%',
+                                            transform: 'translateX(-50%)',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 8,
+                                            padding: '4px 4px 4px 6px',
+                                            background: theme.panelBg,
+                                            border: `1px solid ${theme.borderActive}`,
+                                            borderRadius: 8,
+                                            fontSize: 12.5,
+                                            zIndex: 5,
+                                        }, children: [_jsx("button", { type: "button", className: "qe-hover", title: "Back to the scene", style: { ...buttonStyle, padding: '3px 10px' }, onClick: requestPrefabExit, children: "\u2190 Scene" }), _jsx("span", { style: { color: theme.textDim }, children: "\u203A" }), _jsxs("span", { style: { fontWeight: 600, whiteSpace: 'nowrap' }, children: [prefabInfo.name, prefabDirty ? ' *' : ''] }), _jsx("button", { type: "button", className: "qe-hover", title: "Overwrite the prefab asset (Ctrl+S)", style: {
+                                                    ...buttonStyle,
+                                                    padding: '3px 12px',
+                                                    ...(prefabDirty
+                                                        ? {
+                                                            background: theme.accent,
+                                                            color: '#0a1128',
+                                                            border: `1px solid ${theme.accent}`,
+                                                        }
+                                                        : {}),
+                                                }, onClick: () => setPrefabDialog('overwrite'), children: "Save" })] })), props.backLink && !prefabInfo && (_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: 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,
+                                            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: () => actionsRef.current.historyStep(false), children: _jsx(ArrowUturnLeftIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !state?.history.canRedo || !binding, onClick: () => actionsRef.current.historyStep(true), 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));
+                                                    const entry = sceneEntries.find((item) => item.root === binding.root);
+                                                    if (entry) {
+                                                        entry.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, disabled: !binding, onClick: () => {
+                                                            if (!binding)
+                                                                return;
+                                                            const blob = new Blob([binding.exportJSON('EditorEffect')], {
+                                                                type: 'application/json',
+                                                            });
+                                                            const link = document.createElement('a');
+                                                            link.href = URL.createObjectURL(blob);
+                                                            link.download = `${binding.root.name || '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: inspectorBinding && inspectorSystem && inspectorNode ? (_jsx(EffectEditor, { binding: inspectorBinding, selectedSystem: inspectorSystem, gizmoTargetNode: inspectorNode, gizmoTargetLabel: inspectorNode.name || 'Node', 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." })) })] })] }), _jsxs("div", { "aria-hidden": !drawerOpen && !drawerPinned, style: {
+                            height: DRAWER_HEIGHT,
                             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, disabled: !binding, onClick: () => {
-                                                    if (!binding)
-                                                        return;
-                                                    const blob = new Blob([binding.exportJSON('EditorEffect')], {
-                                                        type: 'application/json',
-                                                    });
-                                                    const link = document.createElement('a');
-                                                    link.href = URL.createObjectURL(blob);
-                                                    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, 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) }))] }));
+                            background: theme.panelBg,
+                            borderTop: `1px solid ${theme.border}`,
+                            ...(drawerPinned
+                                ? { flexShrink: 0 }
+                                : {
+                                    position: 'absolute',
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    zIndex: 20,
+                                    background: '#0a0f20',
+                                    boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.5)',
+                                    transform: drawerOpen ? 'none' : 'translateY(100%)',
+                                    opacity: drawerOpen ? 1 : 0,
+                                    pointerEvents: drawerOpen ? 'auto' : 'none',
+                                    transition: 'transform 0.18s ease, opacity 0.18s ease',
+                                }),
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    padding: '4px 6px 4px 12px',
+                                    borderBottom: `1px solid ${theme.border}`,
+                                }, children: [_jsx("span", { style: dockTitleStyle, children: "Assets" }), _jsx("span", { style: { fontSize: 11, color: theme.textDim }, children: "Ctrl+Space" }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "qe-hover", title: drawerPinned
+                                            ? 'Unpin — float over the viewport again'
+                                            : 'Pin — keep it docked above the timeline', style: { ...dockIconButtonStyle, ...(drawerPinned ? activeSquareButtonStyle : {}) }, onClick: () => {
+                                            setDrawerPinned((pinned) => !pinned);
+                                            setDrawerOpen(true);
+                                        }, children: _jsx(MapPinIcon, { style: iconStyle(13) }) }), _jsx("button", { type: "button", className: "qe-hover", title: "Close (Esc)", style: dockIconButtonStyle, onClick: () => {
+                                            setDrawerPinned(false);
+                                            setDrawerOpen(false);
+                                        }, children: _jsx(XMarkIcon, { style: iconStyle(13) }) })] }), _jsx(AssetsPanel, { assets: assets, instanceCounts: instanceCounts, loading: assetsLoading, folderInputRef: assetFolderInputRef, onImportFiles: (files) => void runAssetImport(files), onImportFolder: handleImportFolder, onAddToScene: (payload) => actionsRef.current.addToScene(payload), onOpenPrefab: (asset) => actionsRef.current.openPrefab(asset.id), onDelete: (payload) => actionsRef.current.deleteAssets(payload) })] })] }), _jsxs("div", { style: {
+                    flexShrink: 0,
+                    borderTop: `1px solid ${theme.border}`,
+                    background: theme.panelBg,
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '3px 6px' }, children: [_jsx("button", { type: "button", className: "qe-hover-bg", title: timelineCollapsed ? 'Expand timeline' : 'Collapse timeline', style: { ...dockIconButtonStyle, border: 'none', background: 'transparent' }, onClick: () => setTimelineCollapsed((collapsed) => !collapsed), children: timelineCollapsed ? (_jsx(ChevronUpIcon, { style: iconStyle(13) })) : (_jsx(ChevronDownIcon, { style: iconStyle(13) })) }), _jsx("span", { style: dockTitleStyle, children: "Timeline" }), binding && (_jsx("span", { style: {
+                                    fontSize: 12,
+                                    color: theme.textDim,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: binding.root.name })), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { type: "button", className: "qe-hover", title: "Assets (Ctrl+Space)", style: {
+                                    ...buttonStyle,
+                                    padding: '3px 10px',
+                                    ...(drawerOpen || drawerPinned ? activeSquareButtonStyle : {}),
+                                }, onClick: () => {
+                                    if (drawerPinned) {
+                                        setDrawerPinned(false);
+                                        setDrawerOpen(false);
+                                    }
+                                    else {
+                                        setDrawerOpen((open) => !open);
+                                    }
+                                }, children: ["Assets", assets.length > 0 ? ` · ${assets.length}` : ''] })] }), _jsx("div", { style: {
+                            height: TIMELINE_HEIGHT,
+                            display: timelineCollapsed ? 'none' : 'flex',
+                            borderTop: `1px solid ${theme.border}`,
+                        }, children: showTimeline && binding && activeSystem && state ? (_jsx(TimelinePanel, { docked: true, showTransport: false, binding: binding, selectedNode: selectedNode, onSelectNode: setSelectedNode, scene: state.scene, renderer: state.renderer, playbackRef: playbackRef, playheadRef: playheadRef, counterRef: timelineCounterRef, stagePlaying: stagePlaying, setStagePlaying: setStagePlaying, speed: speed, setSpeed: setSpeed, playbackEnabled: timelinePlaybackEnabled })) : (_jsx("div", { style: { padding: '14px', fontSize: 12, color: theme.textDim }, children: "Select an effect in the Scene to see its timeline." })) })] }), projectLoading && (_jsxs("div", { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(7, 11, 22, 0.8)',
+                    zIndex: 900,
+                    color: theme.text,
+                    fontSize: 14,
+                }, children: ["Opening ", props.project?.name ?? 'project', "\u2026"] })), toast && (_jsx("div", { role: "status", style: {
+                    position: 'fixed',
+                    top: 16,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 950,
+                    background: '#13204a',
+                    border: `1px solid ${theme.borderActive}`,
+                    borderRadius: 8,
+                    padding: '8px 14px',
+                    fontSize: 12.5,
+                    color: theme.text,
+                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                    pointerEvents: 'none',
+                }, children: toast })), saveAsTarget && (_jsx(PromptDialog, { title: "Save as new asset \u2014 Folder/Name", defaultValue: saveAsTarget.name, placeholder: "Fire/Big explosion", confirmLabel: "Save", onSubmit: (path) => {
+                    const entry = saveAsTarget;
+                    setSaveAsTarget(null);
+                    actionsRef.current.saveEntryAsAsset(entry, path);
+                }, onCancel: () => setSaveAsTarget(null) })), prefabDialog === 'overwrite' && prefabInfo && (_jsx(ChoiceDialog, { title: `Overwrite prefab “${prefabInfo.name}”?`, message: (() => {
+                    const count = actionsRef.current.prefabInstanceCount();
+                    return count > 0
+                        ? `The asset is replaced with your edits. The ${count} “${prefabInfo.name}” effect(s) already in the scene will not change.`
+                        : 'The asset is replaced with your edits. Effects already in the scene will not change.';
+                })(), actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    { label: 'Save as new…', onSelect: () => setPrefabDialog('saveAs') },
+                    {
+                        label: 'Overwrite',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            actionsRef.current.overwritePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabSwitch && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: `Before opening “${prefabSwitch.name}”. Saving overwrites the prefab asset; effects already in the scene will not change.`, actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabSwitch(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            actionsRef.current.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabSwitch(null);
+                            actionsRef.current.overwritePrefab();
+                            actionsRef.current.openPrefab(prefabSwitch.id, true);
+                        },
+                    },
+                ], onCancel: () => setPrefabSwitch(null) })), prefabDialog === 'exit' && prefabInfo && (_jsx(ChoiceDialog, { title: `Save changes to prefab “${prefabInfo.name}”?`, message: "Saving overwrites the prefab asset. Effects already in the scene will not change.", actions: [
+                    { label: 'Cancel', onSelect: () => setPrefabDialog(null) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            actionsRef.current.closePrefab();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setPrefabDialog(null);
+                            actionsRef.current.overwritePrefab();
+                            actionsRef.current.closePrefab();
+                        },
+                    },
+                ], onCancel: () => setPrefabDialog(null) })), prefabDialog === 'saveAs' && prefabInfo && (_jsx(PromptDialog, { title: "Save prefab as new asset \u2014 Folder/Name", defaultValue: prefabInfo.path.replace(/\.json$/i, ''), confirmLabel: "Save", onSubmit: (path) => {
+                    setPrefabDialog(null);
+                    actionsRef.current.savePrefabAsNew(path);
+                }, onCancel: () => setPrefabDialog(null) })), exitPrompt && (_jsx(ChoiceDialog, { title: "Save changes to the scene?", message: "The scene has changes that are not saved. Assets are already saved.", actions: [
+                    { label: 'Cancel', onSelect: () => setExitPrompt(false) },
+                    {
+                        label: "Don't save",
+                        danger: true,
+                        onSelect: () => {
+                            setExitPrompt(false);
+                            props.onExitProject?.();
+                        },
+                    },
+                    {
+                        label: 'Save',
+                        primary: true,
+                        onSelect: () => {
+                            setExitPrompt(false);
+                            void actionsRef.current.saveScene().then((saved) => saved && props.onExitProject?.());
+                        },
+                    },
+                ], onCancel: () => setExitPrompt(false) })), 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 = {