babylon.quarks-editor 0.18.1 → 0.20.0

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;

package/dist/react/ContextMenu.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { theme } from './theme';
+/** Right-click menu at the pointer; closes on outside click, Escape, scroll or window blur. */
+export function ContextMenu(props) {
+    const { x, y, items, onClose } = props;
+    const ref = useRef(null);
+    const [position, setPosition] = useState({ left: x, top: y });
+    // Keep the menu on screen near the right/bottom edges.
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const { width, height } = el.getBoundingClientRect();
+        setPosition({
+            left: Math.max(4, Math.min(x, window.innerWidth - width - 4)),
+            top: Math.max(4, Math.min(y, window.innerHeight - height - 4)),
+        });
+    }, [x, y]);
+    useEffect(() => {
+        const onPointerDown = (e) => {
+            if (!ref.current?.contains(e.target))
+                onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('pointerdown', onPointerDown, true);
+        window.addEventListener('keydown', onKey);
+        window.addEventListener('wheel', onClose, true);
+        window.addEventListener('blur', onClose);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('keydown', onKey);
+            window.removeEventListener('wheel', onClose, true);
+            window.removeEventListener('blur', onClose);
+        };
+    }, [onClose]);
+    return createPortal(_jsx("div", { ref: ref, role: "menu", onContextMenu: (e) => e.preventDefault(), style: {
+            position: 'fixed',
+            left: position.left,
+            top: position.top,
+            zIndex: 1000,
+            minWidth: 170,
+            padding: 4,
+            background: '#0c1226',
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
+            fontFamily: theme.font,
+        }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: "qe-hover-bg", disabled: item.disabled, style: {
+                display: 'block',
+                width: '100%',
+                textAlign: 'left',
+                border: 'none',
+                borderRadius: 5,
+                background: 'transparent',
+                color: item.danger ? '#ff8a8a' : theme.text,
+                opacity: item.disabled ? 0.45 : 1,
+                padding: '6px 10px',
+                fontSize: 12.5,
+                cursor: item.disabled ? 'default' : 'pointer',
+                fontFamily: theme.font,
+            }, onClick: () => {
+                onClose();
+                item.onSelect();
+            }, children: item.label }, item.label))) }), document.body);
+}

package/dist/react/CurveEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CurvePiece } from '../core/values';
 /**
  * Multi-segment piecewise-bezier curve editor. Drag keys/handles vertically,
@@ -9,4 +8,4 @@ export declare function CurveEditor(props: {
     pieces: CurvePiece[];
     onChange: (pieces: CurvePiece[]) => void;
     maxValue?: number;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/CurveEditor.js

@@ -70,8 +70,16 @@ export function CurveEditor(props) {
         }
         props.onChange(next);
     };
-    const selectedPoint = selected ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx) : null;
-    return (_jsxs("div", { children: [_jsxs("svg", { ref: svgRef, width: WIDTH, height: HEIGHT, style: { background: 'rgba(5, 8, 18, 0.85)', border: `1px solid ${theme.border}`, borderRadius: 8, touchAction: 'none', display: 'block' }, onPointerMove: (e) => applyDrag(e.clientX, e.clientY), onPointerUp: (e) => {
+    const selectedPoint = selected
+        ? points.find((pt) => pt.ref.piece === selected.piece && pt.ref.idx === selected.idx)
+        : null;
+    return (_jsxs("div", { children: [_jsxs("svg", { ref: svgRef, width: WIDTH, height: HEIGHT, style: {
+                    background: 'rgba(5, 8, 18, 0.85)',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    touchAction: 'none',
+                    display: 'block',
+                }, onPointerMove: (e) => applyDrag(e.clientX, e.clientY), onPointerUp: (e) => {
                     drag.current = null;
                     e.target.releasePointerCapture?.(e.pointerId);
                 }, onDoubleClick: (e) => {
@@ -95,7 +103,10 @@ export function CurveEditor(props) {
                                 if (Number.isNaN(parsed)) {
                                     return;
                                 }
-                                const next = pieces.map((piece) => ({ start: piece.start, p: [...piece.p] }));
+                                const next = pieces.map((piece) => ({
+                                    start: piece.start,
+                                    p: [...piece.p],
+                                }));
                                 const { piece, idx } = selectedPoint.ref;
                                 if (idx === 0 && piece > 0) {
                                     next[piece - 1].p[3] = parsed;

package/dist/react/EditorWorkspace.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ProjectStore } from '../core/projectStore';
+import { type EffectEditorHostProps } from './EffectEditorHost';
+export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
+    /** Where projects are kept; defaults to the browser's IndexedDB. */
+    store?: ProjectStore;
+    /** Project to open right away (e.g. from the url); the projects page is shown otherwise. */
+    projectId?: string | null;
+    /** Called when a project is opened or closed — e.g. to mirror it in the url. */
+    onProjectChange?: (projectId: string | null) => void;
+}
+/** Projects page → editor for the chosen project, with assets and scene saved in `store`. */
+export declare function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement;
+/** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
+export declare const QuarksEditorWorkspace: {
+    Show(options: EditorWorkspaceProps & {
+        hostElement: HTMLElement;
+    }): {
+        dispose: () => void;
+    };
+};

package/dist/react/EditorWorkspace.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { IndexedDbProjectStore } from '../core/indexedDbProjectStore';
+import { EffectEditorHost } from './EffectEditorHost';
+import { ProjectsPage } from './ProjectsPage';
+import { theme } from './theme';
+/** Projects page → editor for the chosen project, with assets and scene saved in `store`. */
+export function EditorWorkspace(props) {
+    const { store: storeProp, projectId, onProjectChange, ...hostProps } = props;
+    const store = useMemo(() => storeProp ?? new IndexedDbProjectStore(), [storeProp]);
+    const [project, setProject] = useState(null);
+    const [resolving, setResolving] = useState(Boolean(projectId));
+    useEffect(() => {
+        if (!projectId) {
+            setResolving(false);
+            return;
+        }
+        let cancelled = false;
+        void store.getProject(projectId).then((meta) => {
+            if (cancelled)
+                return;
+            setProject(meta);
+            setResolving(false);
+            if (!meta)
+                onProjectChange?.(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // Only the initial project id is honoured; later navigation goes through onProjectChange.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store]);
+    if (resolving) {
+        return (_jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                background: '#070b16',
+                color: theme.textDim,
+                fontFamily: theme.font,
+                padding: 24,
+            }, children: "Opening project\u2026" }));
+    }
+    if (!project) {
+        return (_jsx(ProjectsPage, { store: store, title: hostProps.title, onOpen: (meta) => {
+                setProject(meta);
+                onProjectChange?.(meta.id);
+            } }));
+    }
+    return (_jsx(EffectEditorHost, { ...hostProps, project: { store, id: project.id, name: project.name }, onExitProject: () => {
+            setProject(null);
+            onProjectChange?.(null);
+        } }, project.id));
+}
+/** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
+export const QuarksEditorWorkspace = {
+    Show(options) {
+        const { hostElement, ...props } = options;
+        const root = createRoot(hostElement);
+        root.render(_jsx(EditorWorkspace, { ...props }));
+        return { dispose: () => root.unmount() };
+    },
+};

package/dist/react/EffectEditor.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { ParticleSystem } from 'babylon.quarks';
+import React from 'react';
 import { EffectBinding } from '../core/binding';
 import type { GeometryData, GeometryOption, TextureOption } from './modules';
-import type { ParticleSystem } from 'babylon.quarks';
 export interface EffectEditorProps {
     binding: EffectBinding;
     /** Currently selected system, lifted up so the timeline panel and this module stack agree. */
@@ -22,4 +22,4 @@ export interface EffectEditorProps {
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
  * Module order mirrors Unity's Particle System inspector.
  */
-export declare function EffectEditor(props: EffectEditorProps): React.JSX.Element;
+export declare const EffectEditor: React.NamedExoticComponent<EffectEditorProps>;

package/dist/react/EffectEditor.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useSyncExternalStore } from 'react';
+import React, { useEffect, useSyncExternalStore } from 'react';
 import { EffectBinding } from '../core/binding';
-import { ObjectModule } from './ObjectModule';
-import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
 import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
+import { ObjectModule } from './ObjectModule';
 import { SubEmittersModule } from './SubEmittersModule';
 import { theme } from './theme';
 /**
@@ -11,7 +11,7 @@ import { theme } from './theme';
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
  * Module order mirrors Unity's Particle System inspector.
  */
-export function EffectEditor(props) {
+export const EffectEditor = React.memo(function EffectEditor(props) {
     useSyncExternalStore((onStoreChange) => props.binding.subscribe(onStoreChange), () => props.binding.getRevision());
     const allSystems = [props.binding.system, ...props.binding.subSystems];
     // Selection survives re-renders but falls back to root if the system was removed/replaced.
@@ -26,7 +26,10 @@ export function EffectEditor(props) {
         nested.onBeforeChange = () => props.binding.onBeforeChange?.();
         return nested;
     }, [props.binding, activeSystem]);
+    // A sub-system edit is a change of the whole effect: the host's undo buttons, timeline and
+    // wireframes all listen to the root binding.
+    useEffect(() => (binding === props.binding ? undefined : binding.subscribe(() => props.binding.markChanged())), [binding, props.binding]);
     useSyncExternalStore((onStoreChange) => binding.subscribe(onStoreChange), () => binding.getRevision());
     const gizmoTargetIsEmitter = allSystems.some((s) => s.emitter === props.gizmoTargetNode);
-    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
-}
+    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
+});

package/dist/react/EffectEditorHost.d.ts

@@ -1,16 +1,20 @@
-import React from 'react';
 import { Scene } from '@babylonjs/core/scene';
 import { BatchedRenderer } from 'babylon.quarks';
+import React from 'react';
 import { EffectBinding } from '../core/binding';
 import { EffectHistory } from '../core/history';
+import type { ProjectStore } from '../core/projectStore';
 import type { GeometryData, GeometryOption, TextureOption } from './modules';
 export interface EffectEditorHostHandle {
     binding: EffectBinding;
     history: EffectHistory;
     scene: Scene;
     renderer: BatchedRenderer;
+    /** Replaces the scene with this effect (it is also added to Assets). */
     importJson: (json: unknown) => void;
-    /** Loads many JSON effects at once and appends them to the gallery catalog. */
+    /** Imports effect files (and the texture/geometry files they reference) into Assets. */
+    importAssets: (files: FileList | File[]) => Promise<void>;
+    /** @deprecated Renamed to `importAssets`. */
     importGallery: (files: FileList | File[]) => Promise<void>;
     exportJson: () => string;
 }
@@ -33,9 +37,22 @@ export interface EffectEditorHostProps {
         href: string;
         label: string;
     };
+    /**
+     * Project to edit: its assets load from and save to `store`, and the scene is saved with
+     * Save / Ctrl+S. Without it the editor works in memory only.
+     */
+    project?: {
+        store: ProjectStore;
+        id: string;
+        name: string;
+    };
+    /** Shows a "← Projects" button; called once unsaved scene changes are dealt with. */
+    onExitProject?: () => void;
 }
 /**
- * Self-contained effect editor: live Babylon preview + hierarchy/inspector sidebar.
+ * 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 declare function EffectEditorHost(props: EffectEditorHostProps): React.JSX.Element;