babylon.quarks-editor 0.19.0 → 0.20.0

package/dist/core/projectStore.js

@@ -0,0 +1,14 @@
+export function formatBytes(bytes) {
+    if (bytes == null)
+        return '—';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}

package/dist/core/sceneEntries.d.ts

@@ -0,0 +1,35 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer, ParticleSystem } from 'babylon.quarks';
+import type { EffectAsset } from './assets';
+import { EffectBinding } from './binding';
+/**
+ * One effect instance placed in the scene. Every instance is live (its systems are registered
+ * with the renderer) and independent: dropping the same asset three times gives three entries
+ * that are edited separately.
+ */
+export interface SceneEntry {
+    name: string;
+    /** Path of the asset it came from, or a synthetic `_created/…` path for new effects. */
+    path: string;
+    /** Asset this instance was made from, if any. */
+    assetId: number | null;
+    root: TransformNode;
+    systems: ParticleSystem[];
+}
+/** `name`, or `name (2)`, `name (3)`… when an entry already uses it. */
+export declare function uniqueEntryName(name: string, existing: SceneEntry[]): string;
+/**
+ * Parses an asset into a new scene instance with its systems registered (paused). Returns null
+ * when the JSON holds no particle systems.
+ */
+export declare function instantiateSceneEntry(scene: Scene, renderer: BatchedRenderer, asset: EffectAsset, existing: SceneEntry[]): SceneEntry | null;
+/** Builds an edit binding for one scene entry. */
+export declare function bindingFromSceneEntry(entry: SceneEntry): EffectBinding;
+/**
+ * Unregisters and disposes one scene entry — including systems the inspector added after the
+ * entry was created, which only the live emitter tree knows about.
+ */
+export declare function disposeSceneEntry(entry: SceneEntry, renderer: BatchedRenderer): void;
+/** Number of scene instances per asset id. */
+export declare function countInstancesByAsset(entries: SceneEntry[]): Map<number, number>;

package/dist/core/sceneEntries.js

@@ -0,0 +1,62 @@
+import { QuarksUtil } from 'babylon.quarks';
+import { EffectBinding } from './binding';
+import { disposeLoadedEffect, parseEffectFromJson } from './loadEffect';
+/** `name`, or `name (2)`, `name (3)`… when an entry already uses it. */
+export function uniqueEntryName(name, existing) {
+    const taken = new Set(existing.map((entry) => entry.name));
+    if (!taken.has(name)) {
+        return name;
+    }
+    let n = 2;
+    while (taken.has(`${name} (${n})`)) {
+        n++;
+    }
+    return `${name} (${n})`;
+}
+function isPlaceholderName(name) {
+    return !name || name === 'Effect' || name === 'Object3D' || name === 'Group';
+}
+/**
+ * Parses an asset into a new scene instance with its systems registered (paused). Returns null
+ * when the JSON holds no particle systems.
+ */
+export function instantiateSceneEntry(scene, renderer, asset, existing) {
+    const { root, systems } = parseEffectFromJson(scene, renderer, asset.json, {
+        registerRenderer: true,
+        autoplay: false,
+    });
+    if (systems.length === 0) {
+        disposeLoadedEffect(root, systems, renderer, true);
+        return null;
+    }
+    const name = uniqueEntryName(isPlaceholderName(root.name) ? asset.name : root.name, existing);
+    root.name = name;
+    root.parent = null;
+    return { name, path: asset.path, assetId: asset.id, root, systems };
+}
+/** Builds an edit binding for one scene entry. */
+export function bindingFromSceneEntry(entry) {
+    const main = entry.systems.find((s) => !s.onlyUsedByOther) ?? entry.systems[0];
+    return new EffectBinding(main, entry.systems.filter((s) => s !== main), entry.root);
+}
+/**
+ * Unregisters and disposes one scene entry — including systems the inspector added after the
+ * entry was created, which only the live emitter tree knows about.
+ */
+export function disposeSceneEntry(entry, renderer) {
+    const systems = new Set(entry.systems);
+    QuarksUtil.runOnAllParticleEmitters(entry.root, (emitter) => {
+        systems.add(emitter.system);
+    });
+    disposeLoadedEffect(entry.root, [...systems], renderer, true);
+}
+/** Number of scene instances per asset id. */
+export function countInstancesByAsset(entries) {
+    const counts = new Map();
+    for (const entry of entries) {
+        if (entry.assetId != null) {
+            counts.set(entry.assetId, (counts.get(entry.assetId) ?? 0) + 1);
+        }
+    }
+    return counts;
+}

package/dist/core/transport.d.ts

@@ -0,0 +1,12 @@
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer } from 'babylon.quarks';
+import type { EffectBinding } from './binding';
+import { type PlaybackState } from './playback';
+/**
+ * Stage Play/Pause shared by the viewport transport bar and the timeline. Pressing Play on a
+ * one-shot focus that already parked at its end replays it from the start.
+ */
+export declare function toggleStagePlayback(binding: EffectBinding | null, scene: Scene, playback: PlaybackState, stagePlaying: boolean, setStagePlaying: (playing: boolean) => void): void;
+/** Restarts the focused effect only; other visible effects keep playing. */
+export declare function restartFocusPlayback(binding: EffectBinding, renderer: BatchedRenderer, scene: Scene, playback: PlaybackState): void;
+export declare const PLAYBACK_SPEEDS: number[];

package/dist/core/transport.js

@@ -0,0 +1,36 @@
+import { clearFocusFinished, isFocusFinished, setFocusElapsed } from './playback';
+import { playFocus, scrubFocusTo } from './scrub';
+/**
+ * Stage Play/Pause shared by the viewport transport bar and the timeline. Pressing Play on a
+ * one-shot focus that already parked at its end replays it from the start.
+ */
+export function toggleStagePlayback(binding, scene, playback, stagePlaying, setStagePlaying) {
+    if (stagePlaying) {
+        playback.stagePlaying = false;
+        setStagePlaying(false);
+        return;
+    }
+    if (binding) {
+        const rootId = binding.root.uniqueId;
+        if (isFocusFinished(playback, rootId)) {
+            binding.restart();
+            clearFocusFinished(playback, rootId);
+            setFocusElapsed(playback, rootId, 0);
+            scene.render();
+        }
+    }
+    playback.stagePlaying = true;
+    setStagePlaying(true);
+}
+/** Restarts the focused effect only; other visible effects keep playing. */
+export function restartFocusPlayback(binding, renderer, scene, playback) {
+    const rootId = binding.root.uniqueId;
+    scrubFocusTo(binding, renderer, 0);
+    setFocusElapsed(playback, rootId, 0);
+    clearFocusFinished(playback, rootId);
+    if (playback.stagePlaying) {
+        playFocus(binding);
+    }
+    scene.render();
+}
+export const PLAYBACK_SPEEDS = [0.1, 0.25, 0.5, 1, 2, 4];

package/dist/core/viewportPicker.d.ts

@@ -1,8 +1,8 @@
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import type { Scene } from '@babylonjs/core/scene';
-import type { GalleryEntry } from './loadEffectGallery';
+import type { SceneEntry } from './sceneEntries';
 /**
- * Viewport pick/hover for in-scene gallery effect roots only (not child emitters).
+ * Viewport pick/hover for visible scene effect roots only (not child emitters).
  * Hover uses the same ground ring as focus selection, in yellow.
  */
 export declare class GalleryViewportPicker {
@@ -12,8 +12,8 @@ export declare class GalleryViewportPicker {
     private hoveredRoot;
     private syncKey;
     constructor(scene: Scene);
-    /** Rebuilds root pick colliders when the gallery changes. */
-    sync(entries: GalleryEntry[], soloRoot: TransformNode | null, syncKey: string): void;
+    /** Rebuilds root pick colliders when the scene changes. */
+    sync(entries: SceneEntry[], soloRoot: TransformNode | null, syncKey: string): void;
     /** Yellow focus-style ring under the hovered effect root. */
     setHover(effectRoot: TransformNode | null): void;
     follow(): void;

package/dist/core/viewportPicker.js

@@ -4,7 +4,7 @@ import { GROUND_RING_RADIUS, GalleryHoverMarker } from './gallerySelectionMarker
 /** Invisible pick proxy size — matches the ground ring footprint. */
 const PICK_DIAMETER = GROUND_RING_RADIUS * 2;
 /**
- * Viewport pick/hover for in-scene gallery effect roots only (not child emitters).
+ * Viewport pick/hover for visible scene effect roots only (not child emitters).
  * Hover uses the same ground ring as focus selection, in yellow.
  */
 export class GalleryViewportPicker {
@@ -15,7 +15,7 @@ export class GalleryViewportPicker {
         this.scene = scene;
         this.hoverMarker = new GalleryHoverMarker(scene);
     }
-    /** Rebuilds root pick colliders when the gallery changes. */
+    /** Rebuilds root pick colliders when the scene changes. */
     sync(entries, soloRoot, syncKey) {
         if (syncKey === this.syncKey) {
             return;
@@ -24,7 +24,7 @@ export class GalleryViewportPicker {
         this.clearHandles();
         if (entries.length > 0) {
             for (const entry of entries) {
-                if (!entry.inScene || entry.root.isDisposed()) {
+                if (entry.root.isDisposed() || !entry.root.isEnabled(false)) {
                     continue;
                 }
                 this.createHandle(entry.root);

package/dist/index.d.ts

@@ -6,8 +6,12 @@ export type { GradientStop } from './core/colors';
 export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree';
 export type { EffectTreeNode } from './core/effectTree';
 export { EffectHistory } from './core/history';
+export type { HistoryStacks } from './core/history';
+export { IndexedDbProjectStore } from './core/indexedDbProjectStore';
 export { applyRendererMaterial, getMaterialLabel } from './core/material';
 export type { RendererMaterialPatch } from './core/material';
+export { formatBytes } from './core/projectStore';
+export type { ProjectMeta, ProjectStore, StorageEstimate, StoredAsset, StoredScene, StoredSceneEntry, } from './core/projectStore';
 export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes';
 export type { ShapeParams, ShapeType } from './core/shapes';
 export { createChildSystem } from './core/systems';

package/dist/index.js

@@ -3,7 +3,9 @@ export { GroundPlaneResolver, ensureGroundResolver } from './core/collision';
 export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } from './core/colors';
 export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree';
 export { EffectHistory } from './core/history';
+export { IndexedDbProjectStore } from './core/indexedDbProjectStore';
 export { applyRendererMaterial, getMaterialLabel } from './core/material';
+export { formatBytes } from './core/projectStore';
 export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes';
 export { createChildSystem } from './core/systems';
 export { ensurePortableTextureUrl } from './core/textureExport';

package/dist/react/AssetsPanel.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type AssetDragPayload } from '../core/assetTree';
+import { type AssetLoadProgress, type EffectAsset } from '../core/assets';
+export interface AssetsPanelProps {
+    assets: EffectAsset[];
+    /** Scene instance count per asset id. */
+    instanceCounts: ReadonlyMap<number, number>;
+    loading: AssetLoadProgress | null;
+    folderInputRef: React.RefObject<HTMLInputElement | null>;
+    onImportFiles: (files: FileList | File[]) => void;
+    onImportFolder: () => void;
+    /** Adds a new instance of each asset in the payload to the scene. */
+    onAddToScene: (payload: AssetDragPayload) => void;
+    onDelete: (payload: AssetDragPayload) => void;
+    /** Opens the asset on its own to edit it (double-click). Without it, double-click adds to the scene. */
+    onOpenPrefab?: (asset: EffectAsset) => void;
+}
+/**
+ * Bottom-dock asset browser: folder tree on the left, the open folder's effects as tiles on the
+ * right. Drag a tile into the viewport (as many times as needed) or right-click it for actions.
+ */
+export declare function AssetsPanel(props: AssetsPanelProps): React.ReactElement;

package/dist/react/AssetsPanel.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, ExclamationTriangleIcon, FolderIcon, FolderOpenIcon, SparklesIcon, } from '@heroicons/react/24/solid';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { setAssetDragSession } from '../core/assetDragSession';
+import { buildAssetTree, collectFolderAssets, folderChildren, searchAssets, writeAssetDrag, } from '../core/assetTree';
+import { assetIconUrl } from '../core/assets';
+import { ContextMenu } from './ContextMenu';
+import { iconStyle } from './icons';
+import { buttonStyle, hiddenFileInputStyle, inputStyle, theme } from './theme';
+const TREE_WIDTH = 200;
+const TILE_WIDTH = 92;
+function beginAssetDrag(e, payload) {
+    writeAssetDrag(e.dataTransfer, payload);
+    setAssetDragSession(payload);
+}
+function endAssetDrag() {
+    setAssetDragSession(null);
+}
+function folderName(path) {
+    return path.split('/').filter(Boolean).pop() ?? 'Assets';
+}
+/** Main texture of the effect, or a sparkle when it has none (or it fails to load). */
+function AssetIcon(props) {
+    const url = assetIconUrl(props.asset);
+    const [failed, setFailed] = useState(false);
+    if (!url || failed) {
+        return _jsx(SparklesIcon, { style: { ...iconStyle(26), color: theme.accent, opacity: 0.8 } });
+    }
+    return (_jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", draggable: false, onError: () => setFailed(true), style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } }));
+}
+function Tile(props) {
+    return (_jsxs("button", { type: "button", draggable: true, className: "qe-hover-bg", title: props.title, onClick: props.onSelect, onDoubleClick: props.onOpen, onContextMenu: props.onContextMenu, onDragStart: props.onDragStart, onDragEnd: endAssetDrag, style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 5,
+            width: '100%',
+            padding: '6px 4px',
+            border: `1px solid ${props.selected ? theme.borderActive : 'transparent'}`,
+            borderRadius: 8,
+            background: props.selected ? 'rgba(120, 165, 255, 0.18)' : 'transparent',
+            color: theme.text,
+            cursor: 'grab',
+            fontFamily: theme.font,
+        }, children: [_jsx("span", { style: {
+                    width: 56,
+                    height: 56,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 6,
+                    background: 'rgba(0, 0, 0, 0.35)',
+                    overflow: 'hidden',
+                }, children: props.icon }), _jsx("span", { style: {
+                    width: '100%',
+                    fontSize: 11.5,
+                    lineHeight: 1.25,
+                    textAlign: 'center',
+                    wordBreak: 'break-word',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                }, children: props.label }), props.subtitle && (_jsx("span", { style: {
+                    width: '100%',
+                    fontSize: 10,
+                    color: theme.textDim,
+                    textAlign: 'center',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: props.subtitle })), props.badge && (_jsx("span", { style: { position: 'absolute', top: 4, right: 6, fontSize: 10.5, color: theme.accent }, children: props.badge })), props.warning && (_jsx("span", { title: props.warning, style: { position: 'absolute', top: 4, left: 5, color: '#ffcc66' }, children: _jsx(ExclamationTriangleIcon, { style: iconStyle(12) }) }))] }));
+}
+function FolderTreeRow(props) {
+    const { folder, depth, currentPath, collapsed, onToggle, onOpen, onContextMenu } = props;
+    const subfolders = folder.children.filter((node) => node.kind === 'folder');
+    const open = !collapsed.has(folder.path);
+    const current = currentPath === folder.path;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", title: folder.path, draggable: true, onClick: () => onOpen(folder.path), onContextMenu: (e) => onContextMenu(e, folder), onDragStart: (e) => beginAssetDrag(e, { kind: 'folder', path: folder.path }), onDragEnd: endAssetDrag, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 5,
+                    height: 26,
+                    padding: `0 8px 0 ${6 + depth * 12}px`,
+                    fontSize: 12,
+                    cursor: 'pointer',
+                    color: current ? theme.text : theme.textDim,
+                    background: current ? 'rgba(120, 165, 255, 0.2)' : undefined,
+                }, children: [_jsx("span", { style: {
+                            width: 12,
+                            display: 'inline-flex',
+                            visibility: subfolders.length > 0 ? 'visible' : 'hidden',
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            onToggle(folder.path);
+                        }, children: open ? _jsx(ChevronDownIcon, { style: iconStyle(11) }) : _jsx(ChevronRightIcon, { style: iconStyle(11) }) }), _jsx("span", { style: { display: 'inline-flex', color: theme.accent }, children: current ? _jsx(FolderOpenIcon, { style: iconStyle(13) }) : _jsx(FolderIcon, { style: iconStyle(13) }) }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: folder.name })] }), open &&
+                subfolders.map((child) => (_jsx(FolderTreeRow, { ...props, folder: child, depth: depth + 1 }, child.path)))] }));
+}
+/**
+ * Bottom-dock asset browser: folder tree on the left, the open folder's effects as tiles on the
+ * right. Drag a tile into the viewport (as many times as needed) or right-click it for actions.
+ */
+export function AssetsPanel(props) {
+    const { assets, instanceCounts, loading, folderInputRef, onImportFiles, onImportFolder, onAddToScene, onDelete, onOpenPrefab, } = props;
+    const [query, setQuery] = useState('');
+    const [currentPath, setCurrentPath] = useState('');
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    const [selectedKey, setSelectedKey] = useState(null);
+    const [menu, setMenu] = useState(null);
+    const fileInputRef = useRef(null);
+    const isLoading = loading !== null;
+    const searching = query.trim().length > 0;
+    const tree = useMemo(() => buildAssetTree(assets), [assets]);
+    const rootFolder = useMemo(() => ({ kind: 'folder', name: 'Assets', path: '', children: tree }), [tree]);
+    // A deleted folder falls back to the top level.
+    const children = folderChildren(tree, currentPath);
+    const openPath = children ? currentPath : '';
+    const content = children ?? tree;
+    const results = useMemo(() => (searching ? searchAssets(assets, query) : []), [assets, query, searching]);
+    const closeMenu = useCallback(() => setMenu(null), []);
+    const toggleFolder = useCallback((path) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(path)) {
+                next.delete(path);
+            }
+            else {
+                next.add(path);
+            }
+            return next;
+        });
+    }, []);
+    const openFolder = useCallback((path) => {
+        setCurrentPath(path);
+        setQuery('');
+        setSelectedKey(null);
+    }, []);
+    const showMenu = (e, items) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setMenu({ x: e.clientX, y: e.clientY, items });
+    };
+    const assetMenu = (e, asset) => {
+        setSelectedKey(`asset:${asset.id}`);
+        showMenu(e, [
+            ...(onOpenPrefab ? [{ label: 'Open prefab', onSelect: () => onOpenPrefab(asset) }] : []),
+            { label: 'Add to scene', onSelect: () => onAddToScene({ kind: 'asset', id: asset.id }) },
+            { label: 'Delete from Assets', danger: true, onSelect: () => onDelete({ kind: 'asset', id: asset.id }) },
+        ]);
+    };
+    const folderMenu = (e, folder) => {
+        const count = folder.path ? collectFolderAssets(folder).length : assets.length;
+        setSelectedKey(`folder:${folder.path}`);
+        const items = [
+            { label: 'Open', onSelect: () => openFolder(folder.path) },
+            {
+                label: `Add all to scene (${count})`,
+                disabled: count === 0 || !folder.path,
+                onSelect: () => onAddToScene({ kind: 'folder', path: folder.path }),
+            },
+        ];
+        if (folder.path) {
+            items.push({
+                label: 'Delete folder from Assets',
+                danger: true,
+                onSelect: () => onDelete({ kind: 'folder', path: folder.path }),
+            });
+        }
+        showMenu(e, items);
+    };
+    const backgroundMenu = (e) => showMenu(e, [
+        { label: 'Import effect…', disabled: isLoading, onSelect: () => fileInputRef.current?.click() },
+        { label: 'Import folder…', disabled: isLoading, onSelect: onImportFolder },
+    ]);
+    const assetTile = (asset, subtitle) => {
+        const key = `asset:${asset.id}`;
+        const instances = instanceCounts.get(asset.id) ?? 0;
+        return (_jsx(Tile, { label: asset.name, subtitle: subtitle, title: `${asset.path}\nDrag into the viewport · double-click ${onOpenPrefab ? 'opens the prefab' : 'adds to the scene'}`, selected: selectedKey === key, icon: _jsx(AssetIcon, { asset: asset }), badge: instances > 0 ? `×${instances}` : undefined, warning: asset.missingFiles.length > 0
+                ? `References files that were not imported — import the whole export folder:\n${asset.missingFiles.join('\n')}`
+                : undefined, onSelect: () => setSelectedKey(key), onOpen: () => (onOpenPrefab ? onOpenPrefab(asset) : onAddToScene({ kind: 'asset', id: asset.id })), onContextMenu: (e) => assetMenu(e, asset), onDragStart: (e) => beginAssetDrag(e, { kind: 'asset', id: asset.id }) }, key));
+    };
+    const folderTile = (folder) => {
+        const key = `folder:${folder.path}`;
+        const count = collectFolderAssets(folder).length;
+        return (_jsx(Tile, { label: folder.name, title: `${folder.path} — ${count} effect(s)\nDouble-click to open · drag to place them all`, selected: selectedKey === key, icon: _jsx(FolderIcon, { style: { ...iconStyle(34), color: theme.accent } }), badge: String(count), onSelect: () => setSelectedKey(key), onOpen: () => openFolder(folder.path), onContextMenu: (e) => folderMenu(e, folder), onDragStart: (e) => beginAssetDrag(e, { kind: 'folder', path: folder.path }) }, key));
+    };
+    const fileLabelStyle = {
+        ...buttonStyle,
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '4px 10px',
+        cursor: isLoading ? 'not-allowed' : 'pointer',
+        opacity: isLoading ? 0.5 : 1,
+    };
+    const takeFiles = (e) => {
+        // Snapshot before clearing — FileList is live and empties with value=''.
+        const files = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        if (files.length > 0) {
+            onImportFiles(files);
+        }
+    };
+    const crumbs = openPath ? ['', ...openPath.split('/').map((_, i, parts) => parts.slice(0, i + 1).join('/'))] : [''];
+    const gridItems = searching
+        ? results.map((asset) => assetTile(asset, asset.path.split('/').slice(0, -1).join('/') || undefined))
+        : content.map((node) => (node.kind === 'folder' ? folderTile(node) : assetTile(node.asset)));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px' }, children: [_jsxs("label", { className: "qe-hover", style: fileLabelStyle, title: "Effect .json files (plus any texture files they use)", children: ["Import effect", _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: ".json,image/*", disabled: isLoading, tabIndex: -1, style: hiddenFileInputStyle, onChange: takeFiles })] }), _jsxs("label", { className: "qe-hover", style: fileLabelStyle, title: "A folder of effects \u2014 subfolders and shared asset files are kept", onClick: (e) => {
+                            if (typeof window.showDirectoryPicker ===
+                                'function') {
+                                e.preventDefault();
+                                onImportFolder();
+                            }
+                        }, children: ["Import folder", _jsx("input", { ref: (el) => {
+                                    folderInputRef.current = el;
+                                    if (el) {
+                                        el.setAttribute('webkitdirectory', '');
+                                        el.setAttribute('directory', '');
+                                    }
+                                }, type: "file", multiple: true, disabled: isLoading, tabIndex: -1, style: hiddenFileInputStyle, onChange: takeFiles })] }), _jsx("input", { className: "qe-hover", style: { ...inputStyle, width: 220, padding: '4px 8px' }, placeholder: "Search all folders\u2026", value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("span", { style: { fontSize: 12, color: theme.textDim, marginLeft: 'auto', whiteSpace: 'nowrap' }, children: isLoading
+                            ? `Loading… ${loading.done} / ${loading.total || '…'} files`
+                            : `${assets.length} asset(s) · drag into the viewport · right-click for actions` })] }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0, borderTop: `1px solid ${theme.border}` }, children: [_jsx("div", { style: {
+                            width: TREE_WIDTH,
+                            flexShrink: 0,
+                            overflowY: 'auto',
+                            borderRight: `1px solid ${theme.border}`,
+                            padding: '4px 0',
+                        }, onContextMenu: backgroundMenu, children: _jsx(FolderTreeRow, { folder: rootFolder, depth: 0, currentPath: searching ? '\0' : openPath, collapsed: collapsed, onToggle: toggleFolder, onOpen: openFolder, onContextMenu: folderMenu }) }), _jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, onClick: () => setSelectedKey(null), onContextMenu: backgroundMenu, children: [_jsx("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                    padding: '5px 12px',
+                                    fontSize: 12,
+                                    color: theme.textDim,
+                                    borderBottom: `1px solid ${theme.border}`,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                }, children: searching ? (_jsxs("span", { children: [results.length, " result(s) for \u201C", query.trim(), "\u201D"] })) : (crumbs.map((path, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { style: { opacity: 0.5 }, children: "/" }), _jsx("span", { className: "qe-hover-bg", style: {
+                                                padding: '1px 4px',
+                                                borderRadius: 4,
+                                                cursor: 'pointer',
+                                                color: i === crumbs.length - 1 ? theme.text : theme.textDim,
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                openFolder(path);
+                                            }, children: folderName(path) })] }, path || 'root')))) }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: 8 }, children: assets.length === 0 && !isLoading ? (_jsxs("div", { style: { padding: '4px 6px', fontSize: 12, color: theme.textDim, lineHeight: 1.5 }, children: ["No assets yet. ", _jsx("strong", { children: "Import effect" }), " or ", _jsx("strong", { children: "Import folder" }), " \u2014 then drag an effect into the viewport as many times as you need."] })) : gridItems.length === 0 ? (_jsx("div", { style: { padding: '4px 6px', fontSize: 12, color: theme.textDim }, children: searching ? 'No matches.' : 'This folder is empty.' })) : (_jsx("div", { style: {
+                                        display: 'grid',
+                                        gridTemplateColumns: `repeat(auto-fill, minmax(${TILE_WIDTH}px, 1fr))`,
+                                        gap: 6,
+                                    }, onClick: (e) => e.stopPropagation(), children: gridItems })) })] })] }), menu && _jsx(ContextMenu, { x: menu.x, y: menu.y, items: menu.items, onClose: closeMenu })] }));
+}

package/dist/react/ChoiceDialog.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ChoiceDialogAction {
+    label: string;
+    onSelect: () => void;
+    /** Accent button — also what Enter picks. */
+    primary?: boolean;
+    danger?: boolean;
+}
+export interface ChoiceDialogProps {
+    title: string;
+    message: React.ReactNode;
+    /** Shown left to right; put the cancel action first. */
+    actions: ChoiceDialogAction[];
+    /** Escape / backdrop click. */
+    onCancel: () => void;
+}
+/** Confirmation modal with several outcomes (e.g. Save / Don't save / Cancel). */
+export declare function ChoiceDialog(props: ChoiceDialogProps): React.ReactElement;

package/dist/react/ChoiceDialog.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { buttonStyle, theme } from './theme';
+/** Confirmation modal with several outcomes (e.g. Save / Don't save / Cancel). */
+export function ChoiceDialog(props) {
+    const { title, message, actions, onCancel } = props;
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onCancel();
+            }
+            else if (e.key === 'Enter') {
+                const primary = actions.find((action) => action.primary);
+                if (primary) {
+                    e.preventDefault();
+                    primary.onSelect();
+                }
+            }
+        };
+        window.addEventListener('keydown', onKey, true);
+        return () => window.removeEventListener('keydown', onKey, true);
+    }, [actions, onCancel]);
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(3, 5, 12, 0.6)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            fontFamily: theme.font,
+        }, onClick: onCancel, children: _jsxs("div", { role: "dialog", "aria-label": title, style: {
+                background: theme.panelBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                padding: 16,
+                width: 380,
+                maxWidth: 'calc(100vw - 32px)',
+                boxShadow: '0 12px 32px rgba(0, 0, 0, 0.5)',
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, marginBottom: 8 }, children: title }), _jsx("div", { style: { fontSize: 12.5, color: theme.textDim, lineHeight: 1.5, marginBottom: 16 }, children: message }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, flexWrap: 'wrap' }, children: actions.map((action) => (_jsx("button", { className: "qe-hover", style: {
+                            ...buttonStyle,
+                            ...(action.primary
+                                ? { background: theme.accent, color: '#0a1128', border: `1px solid ${theme.accent}` }
+                                : {}),
+                            ...(action.danger ? { border: '1px solid #b04a4a', color: '#ffb0b0' } : {}),
+                        }, onClick: action.onSelect, children: action.label }, action.label))) })] }) }));
+}

package/dist/react/ContextMenu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface ContextMenuItem {
+    label: string;
+    onSelect: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+}
+export interface ContextMenuProps {
+    /** Client coordinates of the right-click. */
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    onClose: () => void;
+}
+/** Right-click menu at the pointer; closes on outside click, Escape, scroll or window blur. */
+export declare function ContextMenu(props: ContextMenuProps): React.ReactElement;