babylon.quarks-editor 0.19.0 → 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/ObjectModule.d.ts

@@ -2,4 +2,8 @@ import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 export declare function ObjectModule(props: {
     node: TransformNode;
     label: string;
+    /** 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

@@ -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/TimelinePanel.d.ts

@@ -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;

package/dist/react/TimelinePanel.js

@@ -5,6 +5,7 @@ import { groupNodes } from '../core/groups';
 import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
 import { pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled } from '../core/scrub';
 import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport';
 import { TimelineTrackRow } from './TimelineTrackRow';
 import { iconStyle } from './icons';
 import { buttonStyle, theme } from './theme';
@@ -29,7 +30,7 @@ function pickTickInterval(pxPerSecond) {
  * apply only to the focused effect without stopping other previews.
  */
 export function TimelinePanel(props) {
-    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true, } = props;
+    const { binding, selectedNode, onSelectNode, scene, renderer, playbackRef, playheadRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed, playbackEnabled = true, docked = false, showTransport = true, } = props;
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
     const [hiddenSystems, setHiddenSystems] = useState(() => new Set());
@@ -207,34 +208,12 @@ export function TimelinePanel(props) {
         }
     };
     const restartFocus = () => {
-        scrubFocusTo(binding, renderer, 0);
-        const state = playbackRef.current;
-        setFocusElapsed(state, focusRootId, 0);
-        clearFocusFinished(state, focusRootId);
-        if (stagePlaying) {
-            playFocus(binding);
-        }
+        restartFocusPlayback(binding, renderer, scene, playbackRef.current);
         if (playheadRef.current) {
             playheadRef.current.style.left = `${LABEL_WIDTH + TIMELINE_INSET}px`;
         }
-        scene.render();
-    };
-    const handleStagePlayPause = () => {
-        const state = playbackRef.current;
-        if (!stagePlaying) {
-            if (isFocusFinished(state, focusRootId)) {
-                binding.restart();
-                clearFocusFinished(state, focusRootId);
-                setFocusElapsed(state, focusRootId, 0);
-                scene.render();
-            }
-            state.stagePlaying = true;
-            setStagePlaying(true);
-            return;
-        }
-        state.stagePlaying = false;
-        setStagePlaying(false);
     };
+    const handleStagePlayPause = () => toggleStagePlayback(binding, scene, playbackRef.current, stagePlaying, setStagePlaying);
     const ticks = [];
     for (let t = 0; t <= timelineSpan; t += pickTickInterval(pxPerSecond)) {
         ticks.push(t);
@@ -249,31 +228,31 @@ export function TimelinePanel(props) {
         gap: 6,
     };
     return (_jsxs("div", { style: {
-            flexShrink: 0,
-            height: PANEL_HEIGHT,
-            borderTop: `1px solid ${theme.border}`,
+            ...(docked
+                ? { flex: 1, minHeight: 0 }
+                : { flexShrink: 0, height: PANEL_HEIGHT, borderTop: `1px solid ${theme.border}` }),
             background: theme.panelBg,
             display: 'flex',
             flexDirection: 'column',
             fontFamily: theme.font,
             color: theme.text,
-        }, children: [_jsxs("div", { style: {
+        }, children: [(showTransport || groupSelection.size >= 2) && (_jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 6,
                     padding: '6px 10px',
                     borderBottom: `1px solid ${theme.border}`,
-                }, children: [_jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: stagePlaying ? 'Pause stage preview' : 'Play stage preview', disabled: !playbackEnabled, onClick: handleStagePlayPause, children: stagePlaying ? _jsx(PauseIcon, { style: iconStyle(14) }) : _jsx(PlayIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Step one frame (stage)", disabled: !playbackEnabled || stagePlaying, onClick: () => (playbackRef.current.stepQueued = true), children: _jsx(ForwardIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Restart focused effect only", disabled: !playbackEnabled, onClick: restartFocus, children: _jsx(ArrowPathIcon, { style: iconStyle(14) }) }), _jsx("select", { className: "qe-hover", style: { ...overlayButton, padding: '5px 4px', opacity: playbackEnabled ? 1 : 0.45 }, title: "Playback speed", value: speed, disabled: !playbackEnabled, onChange: (e) => {
-                            const next = Number(e.target.value);
-                            playbackRef.current.speed = next;
-                            setSpeed(next);
-                        }, children: [0.1, 0.25, 0.5, 1, 2, 4].map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: {
-                            fontSize: 12,
-                            color: theme.textDim,
-                            fontVariantNumeric: 'tabular-nums',
-                            paddingLeft: 4,
-                            minWidth: 120,
-                        } }), groupSelection.size >= 2 && (_jsxs("button", { className: "qe-hover", style: overlayButton, title: "Group the checked rows", onClick: groupSelectedNodes, children: [_jsx(RectangleGroupIcon, { style: iconStyle(14) }), "Group (", groupSelection.size, ")"] }))] }), _jsx("div", { ref: bodyRef, style: { position: 'relative', flex: 1, minHeight: 0 }, children: !playbackEnabled ? (_jsx("div", { style: {
+                }, children: [showTransport && (_jsxs(_Fragment, { children: [_jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: stagePlaying ? 'Pause stage preview' : 'Play stage preview', disabled: !playbackEnabled, onClick: handleStagePlayPause, children: stagePlaying ? (_jsx(PauseIcon, { style: iconStyle(14) })) : (_jsx(PlayIcon, { style: iconStyle(14) })) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Step one frame (stage)", disabled: !playbackEnabled || stagePlaying, onClick: () => (playbackRef.current.stepQueued = true), children: _jsx(ForwardIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: { ...overlayButton, opacity: playbackEnabled ? 1 : 0.45 }, title: "Restart focused effect only", disabled: !playbackEnabled, onClick: restartFocus, children: _jsx(ArrowPathIcon, { style: iconStyle(14) }) }), _jsx("select", { className: "qe-hover", style: { ...overlayButton, padding: '5px 4px', opacity: playbackEnabled ? 1 : 0.45 }, title: "Playback speed", value: speed, disabled: !playbackEnabled, onChange: (e) => {
+                                    const next = Number(e.target.value);
+                                    playbackRef.current.speed = next;
+                                    setSpeed(next);
+                                }, children: PLAYBACK_SPEEDS.map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: {
+                                    fontSize: 12,
+                                    color: theme.textDim,
+                                    fontVariantNumeric: 'tabular-nums',
+                                    paddingLeft: 4,
+                                    minWidth: 120,
+                                } })] })), groupSelection.size >= 2 && (_jsxs("button", { className: "qe-hover", style: overlayButton, title: "Group the checked rows", onClick: groupSelectedNodes, children: [_jsx(RectangleGroupIcon, { style: iconStyle(14) }), "Group (", groupSelection.size, ")"] }))] })), _jsx("div", { ref: bodyRef, style: { position: 'relative', flex: 1, minHeight: 0 }, children: !playbackEnabled ? (_jsx("div", { style: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',
@@ -284,7 +263,7 @@ export function TimelinePanel(props) {
                         fontSize: 13,
                         color: theme.textDim,
                         lineHeight: 1.5,
-                    }, children: "Selected effect is not in the scene. Drag it into the viewport to preview playback." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    }, children: "The focused effect is hidden. Show it in the Scene list to preview playback." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                 position: 'absolute',
                                 top: 0,
                                 left: 0,

package/dist/react/TransportBar.d.ts

@@ -0,0 +1,24 @@
+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 interface TransportBarProps {
+    binding: EffectBinding | null;
+    scene: Scene;
+    renderer: BatchedRenderer;
+    playbackRef: React.MutableRefObject<PlaybackState>;
+    /** The host's render loop writes time and particle count here. */
+    counterRef: React.RefObject<HTMLSpanElement>;
+    stagePlaying: boolean;
+    setStagePlaying: (playing: boolean) => void;
+    speed: number;
+    setSpeed: (speed: number) => void;
+    /** False when the focused effect is hidden. */
+    enabled: boolean;
+}
+/**
+ * Floating playback controls in the viewport (like Unity's Particle Effect overlay), so playing
+ * and restarting never needs the timeline open.
+ */
+export declare function TransportBar(props: TransportBarProps): React.ReactElement;

package/dist/react/TransportBar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon } from '@heroicons/react/24/solid';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport';
+import { iconStyle } from './icons';
+import { buttonStyle, theme } from './theme';
+const barButton = {
+    ...buttonStyle,
+    width: 28,
+    height: 26,
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+/**
+ * Floating playback controls in the viewport (like Unity's Particle Effect overlay), so playing
+ * and restarting never needs the timeline open.
+ */
+export function TransportBar(props) {
+    const { binding, scene, renderer, playbackRef, counterRef, stagePlaying, setStagePlaying, speed, setSpeed } = props;
+    const enabled = props.enabled && binding !== null;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            padding: 4,
+            background: theme.panelBg,
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            fontFamily: theme.font,
+        }, children: [_jsx("button", { className: "qe-hover", style: barButton, title: stagePlaying ? 'Pause (Space)' : 'Play (Space)', disabled: !enabled, onClick: () => toggleStagePlayback(binding, scene, playbackRef.current, stagePlaying, setStagePlaying), children: stagePlaying ? _jsx(PauseIcon, { style: iconStyle(14) }) : _jsx(PlayIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: barButton, title: "Step one frame", disabled: !enabled || stagePlaying, onClick: () => (playbackRef.current.stepQueued = true), children: _jsx(ForwardIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: barButton, title: "Restart the focused effect", disabled: !enabled, onClick: () => binding && restartFocusPlayback(binding, renderer, scene, playbackRef.current), children: _jsx(ArrowPathIcon, { style: iconStyle(14) }) }), _jsx("select", { className: "qe-hover", style: { ...barButton, width: 'auto', padding: '0 4px' }, title: "Playback speed", value: speed, disabled: !enabled, onChange: (e) => {
+                    const next = Number(e.target.value);
+                    playbackRef.current.speed = next;
+                    setSpeed(next);
+                }, children: PLAYBACK_SPEEDS.map((s) => (_jsxs("option", { value: s, children: ["\u00D7", s] }, s))) }), _jsx("span", { ref: counterRef, style: {
+                    fontSize: 12,
+                    color: theme.textDim,
+                    fontVariantNumeric: 'tabular-nums',
+                    padding: '0 6px',
+                    minWidth: 150,
+                    whiteSpace: 'nowrap',
+                } })] }));
+}