babylon.quarks-editor 0.18.1 → 0.20.0

package/dist/react/EffectTreeView.d.ts

@@ -0,0 +1,17 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import React from 'react';
+export interface EffectTreeViewProps {
+    root: TransformNode;
+    /** Node shown in the inspector (and moved by the gizmo). */
+    selectedNode: TransformNode | null;
+    onSelect: (node: TransformNode) => void;
+    /** Show the root itself as the first row (default: only its descendants). */
+    includeRoot?: boolean;
+    /** Left indent of the first level, in px. */
+    indent?: number;
+}
+/**
+ * The effect's group/emitter hierarchy — the same tree as the timeline's label column — so a
+ * sub-emitter can be picked for the inspector without opening the timeline.
+ */
+export declare function EffectTreeView(props: EffectTreeViewProps): React.ReactElement | null;

package/dist/react/EffectTreeView.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, FolderIcon, SparklesIcon } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+import { buildEffectTree } from '../core/effectTree';
+import { iconStyle } from './icons';
+import { theme } from './theme';
+const ROW_HEIGHT = 26;
+function TreeRow(props) {
+    const { item, level, indent, selectedNode, collapsed, onToggle, onSelect } = props;
+    const open = !collapsed.has(item.node);
+    const selected = item.node === selectedNode;
+    const hasChildren = item.children.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", title: item.system ? `${item.name} — particle system` : `${item.name} — group`, onClick: () => onSelect(item.node), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 5,
+                    height: ROW_HEIGHT,
+                    padding: `0 8px 0 ${indent + level * 14}px`,
+                    fontSize: 12,
+                    cursor: 'pointer',
+                    color: selected ? theme.text : theme.textDim,
+                    background: selected ? 'rgba(120, 165, 255, 0.2)' : undefined,
+                }, children: [_jsx("span", { style: { width: 12, display: 'inline-flex', visibility: hasChildren ? 'visible' : 'hidden' }, onClick: (e) => {
+                            e.stopPropagation();
+                            onToggle(item.node);
+                        }, children: open ? _jsx(ChevronDownIcon, { style: iconStyle(11) }) : _jsx(ChevronRightIcon, { style: iconStyle(11) }) }), _jsx("span", { style: { display: 'inline-flex', color: item.system ? theme.accent : theme.textDim }, children: item.system ? _jsx(SparklesIcon, { style: iconStyle(12) }) : _jsx(FolderIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: item.name }), item.system?.looping && (_jsx("span", { title: "Looping", style: { flexShrink: 0, fontSize: 10.5 }, children: "\u27F3" }))] }), open &&
+                item.children.map((child) => (_jsx(TreeRow, { ...props, item: child, level: level + 1 }, child.node.uniqueId)))] }));
+}
+/**
+ * The effect's group/emitter hierarchy — the same tree as the timeline's label column — so a
+ * sub-emitter can be picked for the inspector without opening the timeline.
+ */
+export function EffectTreeView(props) {
+    const { root, selectedNode, onSelect, includeRoot = false, indent = 8 } = props;
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    if (root.isDisposed()) {
+        return null;
+    }
+    const tree = buildEffectTree(root);
+    const items = includeRoot ? [tree] : tree.children;
+    const toggle = (node) => setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (next.has(node)) {
+            next.delete(node);
+        }
+        else {
+            next.add(node);
+        }
+        return next;
+    });
+    return (_jsx("div", { children: items.map((item) => (_jsx(TreeRow, { item: item, level: 0, indent: indent, selectedNode: selectedNode, collapsed: collapsed, onToggle: toggle, onSelect: onSelect }, item.node.uniqueId))) }));
+}

package/dist/react/GradientEditor.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { GradientStop } from '../core/colors';
 /** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
 export declare function GradientEditor(props: {
     stops: GradientStop[];
     onChange: (stops: GradientStop[]) => void;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/GradientEditor.js

@@ -65,7 +65,14 @@ export function GradientEditor(props) {
                     }, onPointerUp: (e) => {
                         dragging.current = false;
                         e.currentTarget.releasePointerCapture(e.pointerId);
-                    } }, i))) }), current && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Stop color", children: _jsx("input", { type: "color", className: "qe-hover", value: rgbToHex(current.r, current.g, current.b), onChange: (e) => updateStop(selected, hexToRgb(e.target.value)), style: { width: 42, height: 24, border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } }) }), _jsx(Row, { label: "Stop alpha", children: _jsx(NumberField, { value: current.a, min: 0, step: 0.05, onChange: (a) => updateStop(selected, { a: Math.min(1, a) }) }) }), _jsx(Row, { label: "Stop position", children: _jsx(NumberField, { value: current.pos, min: 0, step: 0.05, onChange: (pos) => updateStop(selected, { pos: Math.min(1, pos) }) }) }), stops.length > 2 && (_jsx("button", { className: "qe-hover", style: { ...buttonStyle, marginTop: 6 }, onClick: () => {
+                    } }, i))) }), current && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Stop color", children: _jsx("input", { type: "color", className: "qe-hover", value: rgbToHex(current.r, current.g, current.b), onChange: (e) => updateStop(selected, hexToRgb(e.target.value)), style: {
+                                width: 42,
+                                height: 24,
+                                border: 'none',
+                                background: 'transparent',
+                                padding: 0,
+                                cursor: 'pointer',
+                            } }) }), _jsx(Row, { label: "Stop alpha", children: _jsx(NumberField, { value: current.a, min: 0, step: 0.05, onChange: (a) => updateStop(selected, { a: Math.min(1, a) }) }) }), _jsx(Row, { label: "Stop position", children: _jsx(NumberField, { value: current.pos, min: 0, step: 0.05, onChange: (pos) => updateStop(selected, { pos: Math.min(1, pos) }) }) }), stops.length > 2 && (_jsx("button", { className: "qe-hover", style: { ...buttonStyle, marginTop: 6 }, onClick: () => {
                             props.onChange(stops.filter((_, i) => i !== selected));
                             setSelected(0);
                         }, children: "Remove stop" }))] }))] }));

package/dist/react/MessageDialog.js

@@ -20,5 +20,11 @@ export function MessageDialog(props) {
                 minWidth: 320,
                 maxWidth: 480,
                 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: 13, lineHeight: 1.5, color: theme.textDim, marginBottom: 14, whiteSpace: 'pre-wrap' }, children: message }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx("button", { className: "qe-hover", style: { ...buttonStyle, background: theme.accent, color: '#0a1128', borderColor: theme.accent }, onClick: onClose, children: confirmLabel }) })] }) }));
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, marginBottom: 8 }, children: title }), _jsx("div", { style: {
+                        fontSize: 13,
+                        lineHeight: 1.5,
+                        color: theme.textDim,
+                        marginBottom: 14,
+                        whiteSpace: 'pre-wrap',
+                    }, children: message }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx("button", { className: "qe-hover", style: { ...buttonStyle, background: theme.accent, color: '#0a1128', borderColor: theme.accent }, onClick: onClose, children: confirmLabel }) })] }) }));
 }

package/dist/react/ModuleSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+import { iconStyle } from './icons';
 import { getInspectorHint } from './inspectorHints';
 import { InspectorInfoIcon } from './InspectorInfoIcon';
 import { theme } from './theme';
-import { iconStyle } from './icons';
 /** Unity-style module foldout with an optional enable checkbox. */
 export function ModuleSection(props) {
     const [open, setOpen] = useState(props.defaultOpen ?? true);
@@ -27,5 +27,12 @@ export function ModuleSection(props) {
                     cursor: 'pointer',
                     userSelect: 'none',
                     background: 'rgba(20, 30, 60, 0.5)',
-                }, onClick: () => setOpen(!open), children: [_jsx("span", { style: { color: theme.accent, display: 'inline-flex' }, children: open ? _jsx(ChevronDownIcon, { style: iconStyle(12) }) : _jsx(ChevronRightIcon, { style: iconStyle(12) }) }), toggleable && (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.enabled, onClick: (e) => e.stopPropagation(), onChange: (e) => props.onToggle?.(e.target.checked), style: { width: 14, height: 14, accentColor: '#78a5ff', cursor: 'pointer' } })), _jsxs("span", { style: { color: dimmed ? theme.textDim : theme.text, fontSize: 13, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [props.title, tooltip ? _jsx(InspectorInfoIcon, { content: tooltip, onClick: (e) => e.stopPropagation() }) : null] })] }), open && !dimmed && _jsx("div", { style: { padding: '4px 10px 10px' }, children: props.children })] }));
+                }, onClick: () => setOpen(!open), children: [_jsx("span", { style: { color: theme.accent, display: 'inline-flex' }, children: open ? _jsx(ChevronDownIcon, { style: iconStyle(12) }) : _jsx(ChevronRightIcon, { style: iconStyle(12) }) }), toggleable && (_jsx("input", { type: "checkbox", className: "qe-hover", checked: props.enabled, onClick: (e) => e.stopPropagation(), onChange: (e) => props.onToggle?.(e.target.checked), style: { width: 14, height: 14, accentColor: '#78a5ff', cursor: 'pointer' } })), _jsxs("span", { style: {
+                            color: dimmed ? theme.textDim : theme.text,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 5,
+                        }, children: [props.title, tooltip ? _jsx(InspectorInfoIcon, { content: tooltip, onClick: (e) => e.stopPropagation() }) : null] })] }), open && !dimmed && _jsx("div", { style: { padding: '4px 10px 10px' }, children: props.children })] }));
 }

package/dist/react/ObjectModule.d.ts

@@ -1,6 +1,9 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 export declare function ObjectModule(props: {
     node: TransformNode;
     label: string;
-}): React.JSX.Element;
+    /** Called before a field mutates the node — lets the host capture an undo snapshot. */
+    onBeforeChange?: () => void;
+    /** Called after a field mutated the node. */
+    onChanged?: () => void;
+}): import("react").JSX.Element;

package/dist/react/ObjectModule.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSyncExternalStore } from 'react';
 import { Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { useSyncExternalStore } from 'react';
 import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore';
 import { ModuleSection } from './ModuleSection';
 import { NumberField, Row } from './fields';
@@ -27,14 +27,11 @@ export function ObjectModule(props) {
     useSyncExternalStore(subscribeTransform, getTransformRevision);
     const { node } = props;
     const euler = getEulerDegrees(node);
-    return (_jsxs(ModuleSection, { title: `Object — ${props.label}`, children: [_jsx(AxisRow, { label: "Position", values: { x: node.position.x, y: node.position.y, z: node.position.z }, step: 0.1, onChange: (axis, v) => {
-                    node.position[axis] = v;
-                    notifyTransformChanged();
-                } }), _jsx(AxisRow, { label: "Rotation", values: euler, step: 1, onChange: (axis, v) => {
-                    setEulerDegreeAxis(node, axis, v);
-                    notifyTransformChanged();
-                } }), _jsx(AxisRow, { label: "Scale", values: { x: node.scaling.x, y: node.scaling.y, z: node.scaling.z }, step: 0.1, onChange: (axis, v) => {
-                    node.scaling[axis] = v;
-                    notifyTransformChanged();
-                } })] }));
+    const change = (mutate) => {
+        props.onBeforeChange?.();
+        mutate();
+        notifyTransformChanged();
+        props.onChanged?.();
+    };
+    return (_jsxs(ModuleSection, { title: `Object — ${props.label}`, children: [_jsx(AxisRow, { label: "Position", values: { x: node.position.x, y: node.position.y, z: node.position.z }, step: 0.1, onChange: (axis, v) => change(() => (node.position[axis] = v)) }), _jsx(AxisRow, { label: "Rotation", values: euler, step: 1, onChange: (axis, v) => change(() => setEulerDegreeAxis(node, axis, v)) }), _jsx(AxisRow, { label: "Scale", values: { x: node.scaling.x, y: node.scaling.y, z: node.scaling.z }, step: 0.1, onChange: (axis, v) => change(() => (node.scaling[axis] = v)) })] }));
 }

package/dist/react/ProjectsPage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type ProjectMeta, type ProjectStore } from '../core/projectStore';
+export interface ProjectsPageProps {
+    store: ProjectStore;
+    onOpen: (project: ProjectMeta) => void;
+    title?: string;
+}
+/** Start page: the projects saved in the store, plus storage usage. */
+export declare function ProjectsPage(props: ProjectsPageProps): React.ReactElement;

package/dist/react/ProjectsPage.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FolderIcon, PlusIcon } from '@heroicons/react/24/solid';
+import { useCallback, useEffect, useState } from 'react';
+import { formatBytes } from '../core/projectStore';
+import { ChoiceDialog } from './ChoiceDialog';
+import { ContextMenu } from './ContextMenu';
+import { iconStyle } from './icons';
+import { PromptDialog } from './PromptDialog';
+import { buttonStyle, globalEditorStyles, theme } from './theme';
+function formatDate(time) {
+    return new Date(time).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+}
+function StorageBar(props) {
+    const { estimate, onPersist } = props;
+    const ratio = estimate?.usage != null && estimate.quota ? Math.min(1, estimate.usage / estimate.quota) : 0;
+    return (_jsxs("div", { style: {
+            border: `1px solid ${theme.border}`,
+            borderRadius: 10,
+            background: theme.sectionBg,
+            padding: '12px 14px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5 }, children: [_jsx("span", { style: { fontWeight: 600 }, children: "Browser storage" }), _jsx("span", { style: { color: theme.textDim }, children: estimate
+                            ? `${formatBytes(estimate.usage)} used of ~${formatBytes(estimate.quota)} available`
+                            : 'Checking…' }), _jsx("span", { style: { flex: 1 } }), estimate?.persisted ? (_jsx("span", { style: { color: '#8fe3a8', fontSize: 12 }, children: "\u2713 Persistent \u2014 the browser will not clear it" })) : (_jsx("button", { className: "qe-hover", style: { ...buttonStyle, padding: '4px 10px' }, title: "Ask the browser not to clear project data when the disk runs low", onClick: onPersist, children: "Make storage persistent" }))] }), _jsx("div", { style: { height: 6, borderRadius: 3, background: 'rgba(255, 255, 255, 0.08)', overflow: 'hidden' }, children: _jsx("div", { style: {
+                        width: `${Math.max(ratio * 100, ratio > 0 ? 1 : 0)}%`,
+                        height: '100%',
+                        background: theme.accent,
+                    } }) }), _jsx("div", { style: { fontSize: 11.5, color: theme.textDim, lineHeight: 1.5 }, children: "Projects are saved in this browser only (IndexedDB). Clearing site data removes them, and Safari deletes data of sites not opened for 7 days \u2014 export projects you care about." })] }));
+}
+/** Start page: the projects saved in the store, plus storage usage. */
+export function ProjectsPage(props) {
+    const { store, onOpen, title = 'Effect editor' } = props;
+    const [projects, setProjects] = useState(null);
+    const [estimate, setEstimate] = useState(null);
+    const [dialog, setDialog] = useState(null);
+    const [menu, setMenu] = useState(null);
+    const [error, setError] = useState(null);
+    const reload = useCallback(async () => {
+        try {
+            const [list, storage] = await Promise.all([store.listProjects(), store.estimate()]);
+            setProjects(list);
+            setEstimate(storage);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setProjects([]);
+        }
+    }, [store]);
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+    const run = (action) => {
+        setDialog(null);
+        action()
+            .then(reload)
+            .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+    };
+    const projectMenu = (e, project) => {
+        e.preventDefault();
+        setMenu({
+            x: e.clientX,
+            y: e.clientY,
+            items: [
+                { label: 'Open', onSelect: () => onOpen(project) },
+                { label: 'Rename…', onSelect: () => setDialog({ kind: 'rename', project }) },
+                { label: 'Duplicate…', onSelect: () => setDialog({ kind: 'duplicate', project }) },
+                { label: 'Delete…', danger: true, onSelect: () => setDialog({ kind: 'delete', project }) },
+            ],
+        });
+    };
+    return (_jsxs("div", { className: "qe-root", style: {
+            width: '100%',
+            height: '100%',
+            overflowY: 'auto',
+            background: '#070b16',
+            color: theme.text,
+            fontFamily: theme.font,
+        }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { style: {
+                    maxWidth: 960,
+                    margin: '0 auto',
+                    padding: '32px 24px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 18,
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700 }, children: title }), _jsx("div", { style: { fontSize: 13, color: theme.textDim, marginTop: 4 }, children: "Projects keep their assets and scene between sessions." })] }), _jsx("span", { style: { flex: 1 } }), _jsxs("button", { className: "qe-hover", style: {
+                                    ...buttonStyle,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    padding: '8px 14px',
+                                }, onClick: () => setDialog({ kind: 'create' }), children: [_jsx(PlusIcon, { style: iconStyle(14) }), " New project"] })] }), _jsx(StorageBar, { estimate: estimate, onPersist: () => {
+                            void store.requestPersistence().then((granted) => {
+                                if (!granted) {
+                                    setError('The browser did not grant persistent storage. Chrome grants it more readily to sites you visit often or have bookmarked.');
+                                }
+                                return reload();
+                            });
+                        } }), projects === null ? (_jsx("div", { style: { color: theme.textDim, fontSize: 13 }, children: "Loading projects\u2026" })) : projects.length === 0 ? (_jsx("div", { style: {
+                            border: `1px dashed ${theme.border}`,
+                            borderRadius: 10,
+                            padding: '36px 20px',
+                            textAlign: 'center',
+                            color: theme.textDim,
+                            fontSize: 13,
+                        }, children: "No projects yet. Create one to start building effects." })) : (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))', gap: 12 }, children: projects.map((project) => (_jsxs("button", { className: "qe-hover", title: "Open \u00B7 right-click for more", onClick: () => onOpen(project), onContextMenu: (e) => projectMenu(e, project), style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'flex-start',
+                                gap: 6,
+                                textAlign: 'left',
+                                padding: 14,
+                                borderRadius: 10,
+                                border: `1px solid ${theme.border}`,
+                                background: theme.panelBg,
+                                color: theme.text,
+                                cursor: 'pointer',
+                                fontFamily: theme.font,
+                            }, children: [_jsxs("span", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 8,
+                                        fontSize: 14,
+                                        fontWeight: 600,
+                                    }, children: [_jsx(FolderIcon, { style: { ...iconStyle(16), color: theme.accent } }), project.name] }), _jsxs("span", { style: { fontSize: 12, color: theme.textDim }, children: [project.assetCount, " asset(s) \u00B7 ", formatBytes(project.sizeBytes)] }), _jsxs("span", { style: { fontSize: 11.5, color: theme.textDim }, children: ["Edited ", formatDate(project.updatedAt)] })] }, project.id))) }))] }), menu && _jsx(ContextMenu, { x: menu.x, y: menu.y, items: menu.items, onClose: () => setMenu(null) }), dialog?.kind === 'create' && (_jsx(PromptDialog, { title: "New project", defaultValue: "My effects", confirmLabel: "Create", onSubmit: (name) => {
+                    setDialog(null);
+                    store
+                        .createProject(name)
+                        .then(onOpen)
+                        .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+                }, onCancel: () => setDialog(null) })), dialog?.kind === 'rename' && (_jsx(PromptDialog, { title: "Rename project", defaultValue: dialog.project.name, confirmLabel: "Rename", onSubmit: (name) => run(() => store.renameProject(dialog.project.id, name)), onCancel: () => setDialog(null) })), dialog?.kind === 'duplicate' && (_jsx(PromptDialog, { title: "Duplicate project", defaultValue: `${dialog.project.name} copy`, confirmLabel: "Duplicate", onSubmit: (name) => run(() => store.duplicateProject(dialog.project.id, name)), onCancel: () => setDialog(null) })), dialog?.kind === 'delete' && (_jsx(ChoiceDialog, { title: `Delete “${dialog.project.name}”?`, message: `Its ${dialog.project.assetCount} asset(s) and saved scene are removed from this browser. This cannot be undone.`, actions: [
+                    { label: 'Cancel', onSelect: () => setDialog(null) },
+                    {
+                        label: 'Delete',
+                        danger: true,
+                        onSelect: () => run(() => store.deleteProject(dialog.project.id)),
+                    },
+                ], onCancel: () => setDialog(null) })), error && (_jsx(ChoiceDialog, { title: "Projects", message: error, actions: [{ label: 'OK', primary: true, onSelect: () => setError(null) }], onCancel: () => setError(null) }))] }));
+}

package/dist/react/ScenePanel.d.ts

@@ -0,0 +1,26 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import React from 'react';
+import type { SceneEntry } from '../core/sceneEntries';
+export interface ScenePanelProps {
+    entries: SceneEntry[];
+    /** Effect shown in the inspector and timeline. */
+    focusedRoot: TransformNode | null;
+    /** Visible entries — they render and play with the stage transport. */
+    visibleRootIds: ReadonlySet<number>;
+    onFocus: (entry: SceneEntry) => void;
+    onToggleVisible: (entry: SceneEntry) => void;
+    /** Root of the entry shown alone, or null. */
+    soloRootId: number | null;
+    onToggleSolo: (entry: SceneEntry) => void;
+    onDelete: (entry: SceneEntry) => void;
+    /** "Save as new asset…" in the row's right-click menu. */
+    onSaveAsAsset?: (entry: SceneEntry) => void;
+    onCreateDefault: () => void;
+    /** Node shown in the inspector; highlighted in the expanded effect trees. */
+    selectedNode?: TransformNode | null;
+    /** Picks a group/emitter inside an effect (focusing the effect first when needed). */
+    onSelectNode?: (entry: SceneEntry, node: TransformNode) => void;
+}
+export declare const rowIconButtonStyle: React.CSSProperties;
+/** Lists the effect instances that are in the scene right now. */
+export declare function ScenePanel(props: ScenePanelProps): React.ReactElement;

package/dist/react/ScenePanel.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, SparklesIcon, TrashIcon, ViewfinderCircleIcon, } from '@heroicons/react/24/solid';
+import React, { useEffect, useState } from 'react';
+import { buildEffectTree } from '../core/effectTree';
+import { ContextMenu } from './ContextMenu';
+import { EffectTreeView } from './EffectTreeView';
+import { iconStyle } from './icons';
+import { buttonStyle, theme } from './theme';
+const ROW_HEIGHT = 34;
+export const rowIconButtonStyle = {
+    flexShrink: 0,
+    width: 28,
+    border: 'none',
+    background: 'transparent',
+    color: theme.textDim,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+};
+function SceneRow(props) {
+    const { entry, focused, visible, solo, onFocus, onToggleVisible, onToggleSolo, onDelete, onContextMenu, hasTree, expanded, onToggleExpanded, } = props;
+    const isLooping = entry.systems.some((system) => system.looping);
+    return (_jsxs("div", { onContextMenu: (e) => onContextMenu(e, entry), style: {
+            display: 'flex',
+            alignItems: 'stretch',
+            height: ROW_HEIGHT,
+            borderBottom: `1px solid ${theme.border}`,
+            background: focused ? 'rgba(120, 165, 255, 0.22)' : 'transparent',
+            boxSizing: 'border-box',
+        }, children: [_jsx("button", { type: "button", className: "qe-hover", title: visible ? 'Hide — stops and clears this effect' : 'Show — plays with the stage transport', style: {
+                    ...rowIconButtonStyle,
+                    borderRight: `1px solid ${theme.border}`,
+                    color: visible ? theme.accent : theme.textDim,
+                    opacity: visible ? 1 : 0.6,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    onToggleVisible(entry);
+                }, children: visible ? _jsx(EyeIcon, { style: iconStyle(14) }) : _jsx(EyeSlashIcon, { style: iconStyle(14) }) }), _jsxs("button", { type: "button", className: "qe-hover-bg", title: `${entry.name}${entry.assetId != null ? ` — from ${entry.path}` : ''} · Ctrl+click toggles visibility`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    flex: 1,
+                    minWidth: 0,
+                    textAlign: 'left',
+                    border: 'none',
+                    background: 'transparent',
+                    color: focused ? theme.text : visible ? theme.textDim : 'rgba(183, 198, 234, 0.5)',
+                    padding: '0 8px 0 4px',
+                    fontSize: 12.5,
+                    cursor: 'pointer',
+                    fontFamily: theme.font,
+                }, onClick: (e) => {
+                    if (e.ctrlKey || e.metaKey) {
+                        onToggleVisible(entry);
+                        return;
+                    }
+                    onFocus(entry);
+                }, children: [_jsx("span", { title: expanded ? 'Collapse' : 'Show its groups and emitters', style: {
+                            width: 12,
+                            flexShrink: 0,
+                            display: 'inline-flex',
+                            visibility: hasTree ? 'visible' : 'hidden',
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            onToggleExpanded(entry);
+                        }, children: expanded ? _jsx(ChevronDownIcon, { style: iconStyle(11) }) : _jsx(ChevronRightIcon, { style: iconStyle(11) }) }), _jsx("span", { style: { width: 14, flexShrink: 0, display: 'inline-flex', opacity: visible ? 1 : 0.4 }, children: _jsx(SparklesIcon, { style: iconStyle(14) }) }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: entry.name }), isLooping && (_jsx("span", { title: "Looping effect", style: { flexShrink: 0, fontSize: 11, color: theme.textDim }, children: "\u27F3" }))] }), _jsx("button", { type: "button", className: "qe-hover", title: solo ? 'Exit solo — show the other effects again' : 'Solo — hide every other effect', style: {
+                    ...rowIconButtonStyle,
+                    borderLeft: `1px solid ${theme.border}`,
+                    color: solo ? '#ffcc66' : theme.textDim,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    onToggleSolo(entry);
+                }, children: _jsx(ViewfinderCircleIcon, { style: iconStyle(14) }) }), _jsx("button", { type: "button", className: "qe-hover", title: "Delete from scene (Delete)", style: { ...rowIconButtonStyle, borderLeft: `1px solid ${theme.border}` }, onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(entry);
+                }, children: _jsx(TrashIcon, { style: iconStyle(13) }) })] }));
+}
+/** Lists the effect instances that are in the scene right now. */
+export function ScenePanel(props) {
+    const { entries, focusedRoot, visibleRootIds, soloRootId, onFocus, onToggleVisible, onToggleSolo, onDelete, onSaveAsAsset, onCreateDefault, selectedNode = null, onSelectNode, } = props;
+    const [menu, setMenu] = useState(null);
+    const [expanded, setExpanded] = useState(() => new Set());
+    // The focused effect opens its tree, so its sub-emitters are one click away.
+    useEffect(() => {
+        if (focusedRoot) {
+            setExpanded((prev) => (prev.has(focusedRoot.uniqueId) ? prev : new Set(prev).add(focusedRoot.uniqueId)));
+        }
+    }, [focusedRoot]);
+    const toggleExpanded = (entry) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(entry.root.uniqueId)) {
+            next.delete(entry.root.uniqueId);
+        }
+        else {
+            next.add(entry.root.uniqueId);
+        }
+        return next;
+    });
+    const openMenu = (e, entry) => {
+        e.preventDefault();
+        const visible = visibleRootIds.has(entry.root.uniqueId);
+        const items = [];
+        if (onSaveAsAsset) {
+            items.push({ label: 'Save as new asset…', onSelect: () => onSaveAsAsset(entry) });
+        }
+        items.push({ label: visible ? 'Hide' : 'Show', onSelect: () => onToggleVisible(entry) }, {
+            label: soloRootId === entry.root.uniqueId ? 'Exit solo' : 'Solo',
+            onSelect: () => onToggleSolo(entry),
+        }, { label: 'Delete', danger: true, onSelect: () => onDelete(entry) });
+        setMenu({ x: e.clientX, y: e.clientY, items });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, height: '100%', minHeight: 0 }, children: [_jsx("div", { style: { display: 'flex', gap: 6 }, children: _jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: onCreateDefault, children: "New effect" }) }), entries.length === 0 ? (_jsxs("div", { style: {
+                    padding: '14px 12px',
+                    fontSize: 12,
+                    color: theme.textDim,
+                    lineHeight: 1.5,
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    background: theme.sectionBg,
+                }, children: ["The scene is empty. Click ", _jsx("strong", { children: "New effect" }), ", or drag effects from the", ' ', _jsx("strong", { children: "Assets" }), " tab below into the viewport."] })) : (_jsx("div", { style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflowY: 'auto',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    background: theme.sectionBg,
+                }, children: entries.map((entry) => {
+                    const hasTree = onSelectNode !== undefined && buildEffectTree(entry.root).children.length > 0;
+                    const open = hasTree && expanded.has(entry.root.uniqueId);
+                    return (_jsxs(React.Fragment, { children: [_jsx(SceneRow, { entry: entry, hasTree: hasTree, expanded: open, onToggleExpanded: toggleExpanded, focused: focusedRoot === entry.root, visible: visibleRootIds.has(entry.root.uniqueId), solo: soloRootId === entry.root.uniqueId, onFocus: onFocus, onToggleVisible: onToggleVisible, onToggleSolo: onToggleSolo, onDelete: onDelete, onContextMenu: openMenu }), open && (_jsx("div", { style: { borderBottom: `1px solid ${theme.border}`, padding: '2px 0' }, children: _jsx(EffectTreeView, { root: entry.root, selectedNode: selectedNode, indent: 34, onSelect: (node) => onSelectNode(entry, node) }) }))] }, entry.root.uniqueId));
+                }) })), menu && _jsx(ContextMenu, { x: menu.x, y: menu.y, items: menu.items, onClose: () => setMenu(null) })] }));
+}

package/dist/react/SubEmittersModule.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EffectBinding } from '../core/binding';
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a
@@ -7,4 +6,4 @@ import { EffectBinding } from '../core/binding';
 export declare function SubEmittersModule(props: {
     binding: EffectBinding;
     rootBinding: EffectBinding;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/TimelinePanel.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { BatchedRenderer } from 'babylon.quarks';
-import type { Scene } from '@babylonjs/core/scene';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer } from 'babylon.quarks';
+import React from 'react';
 import type { EffectBinding } from '../core/binding';
 import { type PlaybackState } from '../core/playback';
 export type { PlaybackState } from '../core/playback';
@@ -18,8 +18,15 @@ export interface TimelinePanelProps {
     setStagePlaying: (playing: boolean) => void;
     speed: number;
     setSpeed: (speed: number) => void;
-    /** False when a catalog entry is selected but not yet dropped into the viewport. */
+    /** False when the focused effect is hidden — it has nothing to play. */
     playbackEnabled?: boolean;
+    /** Fills its parent (e.g. a bottom dock) instead of drawing its own fixed-height bar. */
+    docked?: boolean;
+    /**
+     * Play/step/restart/speed buttons and the counter in the timeline header (default true).
+     * Hosts that show a TransportBar in the viewport turn this off.
+     */
+    showTransport?: boolean;
 }
 /** Small gap between the label column and the first pixel of the time axis. */
 export declare const TIMELINE_INSET = 10;