babylon.quarks-editor 0.26.0 → 0.28.0

package/dist/react/EffectTreeView.d.ts

@@ -1,9 +1,12 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
+/** Props of {@link EffectTreeView}. */
 export interface EffectTreeViewProps {
+    /** The effect's root. */
     root: TransformNode;
     /** Node shown in the inspector (and moved by the gizmo). */
     selectedNode: TransformNode | null;
+    /** Selects a group or emitter. */
     onSelect: (node: TransformNode) => void;
     /** Show the root itself as the first row (default: only its descendants). */
     includeRoot?: boolean;

package/dist/react/EffectTreeView.js

@@ -1,9 +1,9 @@
 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';
+import { buildEffectTree } from '../core/effectTree.js';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
 const ROW_HEIGHT = 26;
 function TreeRow(props) {
     const { item, level, indent, selectedNode, collapsed, onToggle, onSelect } = props;

package/dist/react/GradientEditor.d.ts

@@ -1,4 +1,4 @@
-import { GradientStop } from '../core/colors';
+import { GradientStop } from '../core/colors.js';
 /** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
 export declare function GradientEditor(props: {
     stops: GradientStop[];

package/dist/react/GradientEditor.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { hexToRgb, rgbToHex, stopsToCssGradient } from '../core/colors';
-import { NumberField, Row } from './fields';
-import { buttonStyle, theme } from './theme';
+import { hexToRgb, rgbToHex, stopsToCssGradient } from '../core/colors.js';
+import { NumberField, Row } from './fields.js';
+import { buttonStyle, theme } from './theme.js';
 const BAR_WIDTH = 218;
 /** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
 export function GradientEditor(props) {

package/dist/react/InspectorInfoIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InformationCircleIcon } from '@heroicons/react/24/solid';
-import { iconStyle } from './icons';
-import { theme } from './theme';
-import { Tooltip } from './Tooltip';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
+import { Tooltip } from './Tooltip.js';
 /** Small info icon with a themed inspector tooltip. */
 export function InspectorInfoIcon(props) {
     const size = props.size ?? 13;

package/dist/react/InspectorLabel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getInspectorHint } from './inspectorHints';
-import { InspectorInfoIcon } from './InspectorInfoIcon';
-import { labelStyle } from './theme';
+import { getInspectorHint } from './inspectorHints.js';
+import { InspectorInfoIcon } from './InspectorInfoIcon.js';
+import { labelStyle } from './theme.js';
 /** Inspector row label with an optional info icon tooltip. */
 export function InspectorLabel(props) {
     if (!props.label) {

package/dist/react/MessageDialog.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
+/** Props of {@link MessageDialog}. */
 export interface MessageDialogProps {
+    /** The dialog's title. */
     title: string;
+    /** The message; line breaks are kept. */
     message: string;
+    /** The button's text. Default `OK`. */
     confirmLabel?: string;
+    /** Closes the dialog: the button, Enter, Escape or the backdrop. */
     onClose: () => void;
 }
 /** Modal for info and error messages — same chrome as PromptDialog, no text input. */

package/dist/react/MessageDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buttonStyle, theme } from './theme';
+import { buttonStyle, theme } from './theme.js';
 /** Modal for info and error messages — same chrome as PromptDialog, no text input. */
 export function MessageDialog(props) {
     const { title, message, confirmLabel = 'OK', onClose } = props;

package/dist/react/ModuleSection.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
+import type { EffectBinding } from '../core/binding.js';
 /** Unity-style module foldout with an optional enable checkbox. */
+/** Props of every inspector module: the effect binding it edits, through `binding.apply`. */
+export interface ModuleProps {
+    /** The focused effect; the module edits `binding.system`. */
+    binding: EffectBinding;
+}
+/**
+ * An inspector module: a foldout with a title, a hint, and an enable checkbox when `onToggle` is
+ * given. Unity's Particle System inspector modules look the same way.
+ */
 export declare function ModuleSection(props: {
     title: string;
     hint?: string;

package/dist/react/ModuleSection.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
-/** Unity-style module foldout with an optional enable checkbox. */
+import { iconStyle } from './icons.js';
+import { getInspectorHint } from './inspectorHints.js';
+import { InspectorInfoIcon } from './InspectorInfoIcon.js';
+import { theme } from './theme.js';
+/**
+ * An inspector module: a foldout with a title, a hint, and an enable checkbox when `onToggle` is
+ * given. Unity's Particle System inspector modules look the same way.
+ */
 export function ModuleSection(props) {
     const [open, setOpen] = useState(props.defaultOpen ?? true);
     const toggleable = props.onToggle !== undefined;

package/dist/react/ObjectModule.d.ts

@@ -1,4 +1,4 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 export declare function ObjectModule(props: {
     node: TransformNode;
     label: string;

package/dist/react/ObjectModule.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { Quaternion } from '@babylonjs/core/Maths/math.vector.js';
 import { useSyncExternalStore } from 'react';
-import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore';
-import { ModuleSection } from './ModuleSection';
-import { NumberField, Row } from './fields';
+import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore.js';
+import { ModuleSection } from './ModuleSection.js';
+import { NumberField, Row } from './fields.js';
 const RAD_TO_DEG = 180 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180;
 function getEulerDegrees(node) {

package/dist/react/ProjectsPage.d.ts

@@ -1,12 +1,18 @@
 import React from 'react';
-import { type ProjectMeta, type ProjectStore } from '../core/projectStore';
+import { type ProjectMeta, type ProjectStore } from '../core/projectStore.js';
+/** Props of {@link ProjectsPage}. */
 export interface ProjectsPageProps {
+    /** Where the projects live. */
     store: ProjectStore;
+    /** Opens a project in the editor. */
     onOpen: (project: ProjectMeta) => void;
+    /** The page's heading. */
     title?: string;
     /** Optional link back to the page that hosts the editor (e.g. a gallery), shown above the title. */
     backLink?: {
+        /** Where the link goes. */
         href: string;
+        /** The link's text. */
         label: string;
     };
 }

package/dist/react/ProjectsPage.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, 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';
+import { formatBytes } from '../core/projectStore.js';
+import { ChoiceDialog } from './ChoiceDialog.js';
+import { ContextMenu } from './ContextMenu.js';
+import { iconStyle } from './icons.js';
+import { PromptDialog } from './PromptDialog.js';
+import { buttonStyle, globalEditorStyles, theme } from './theme.js';
 function formatDate(time) {
     return new Date(time).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
 }
@@ -29,6 +29,15 @@ function StorageBar(props) {
                         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." })] }));
 }
+async function listProjects(store) {
+    try {
+        const [list, storage] = await Promise.all([store.listProjects(), store.estimate()]);
+        return { list, storage };
+    }
+    catch (err) {
+        return { error: err instanceof Error ? err.message : String(err) };
+    }
+}
 /** Start page: the projects saved in the store, plus storage usage. */
 export function ProjectsPage(props) {
     const { store, onOpen, title = 'Effect editor', backLink } = props;
@@ -37,20 +46,27 @@ export function ProjectsPage(props) {
     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));
+    const show = useCallback((listing) => {
+        if ('error' in listing) {
+            setError(listing.error);
             setProjects([]);
         }
-    }, [store]);
+        else {
+            setProjects(listing.list);
+            setEstimate(listing.storage);
+        }
+    }, []);
+    const reload = useCallback(async () => show(await listProjects(store)), [store, show]);
     useEffect(() => {
-        void reload();
-    }, [reload]);
+        let cancelled = false;
+        void listProjects(store).then((listing) => {
+            if (!cancelled)
+                show(listing);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [store, show]);
     const run = (action) => {
         setDialog(null);
         action()

package/dist/react/PromptDialog.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
+/** Props of {@link PromptDialog}. */
 export interface PromptDialogProps {
+    /** What to enter. */
     title: string;
+    /** The text the field starts with, selected. */
     defaultValue?: string;
+    /** Hint shown in the empty field. */
     placeholder?: string;
+    /** The confirm button's text. Default `OK`. */
     confirmLabel?: string;
     /** Rejects empty/whitespace-only input by default (matches the old prompt() behavior). */
     allowEmpty?: boolean;
+    /** Receives the entered text, trimmed. */
     onSubmit: (value: string) => void;
+    /** Escape, the backdrop, Cancel, or an empty submit when empty is not allowed. */
     onCancel: () => void;
 }
 /** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on

package/dist/react/PromptDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { buttonStyle, inputStyle, theme } from './theme';
+import { buttonStyle, inputStyle, theme } from './theme.js';
 /** Modal replacement for `window.prompt` — matches the editor's dark theme, submits on
  * Enter, cancels on Escape or backdrop click. */
 export function PromptDialog(props) {

package/dist/react/ScenePanel.d.ts

@@ -1,20 +1,27 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
-import type { SceneEntry } from '../core/sceneEntries';
+import type { SceneEntry } from '../core/sceneEntries.js';
+/** Props of {@link ScenePanel}. */
 export interface ScenePanelProps {
+    /** The effects in the scene, in list order. */
     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>;
+    /** Focuses an effect in the inspector and timeline. */
     onFocus: (entry: SceneEntry) => void;
+    /** Shows or hides an effect. */
     onToggleVisible: (entry: SceneEntry) => void;
     /** Root of the entry shown alone, or null. */
     soloRootId: number | null;
+    /** Shows an effect alone, or ends solo. */
     onToggleSolo: (entry: SceneEntry) => void;
+    /** Removes an effect from the scene. */
     onDelete: (entry: SceneEntry) => void;
     /** "Save as new asset…" in the row's right-click menu. */
     onSaveAsAsset?: (entry: SceneEntry) => void;
+    /** Adds a new default effect. */
     onCreateDefault: () => void;
     /** Node shown in the inspector; highlighted in the expanded effect trees. */
     selectedNode?: TransformNode | null;

package/dist/react/ScenePanel.js

@@ -1,11 +1,11 @@
 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';
+import React, { useState } from 'react';
+import { buildEffectTree } from '../core/effectTree.js';
+import { ContextMenu } from './ContextMenu.js';
+import { EffectTreeView } from './EffectTreeView.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, theme } from './theme.js';
 const ROW_HEIGHT = 34;
 export const rowIconButtonStyle = {
     flexShrink: 0,
@@ -83,11 +83,13 @@ export function ScenePanel(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)));
+    const [expandedFocus, setExpandedFocus] = useState(null);
+    if (focusedRoot !== expandedFocus) {
+        setExpandedFocus(focusedRoot);
+        if (focusedRoot && !expanded.has(focusedRoot.uniqueId)) {
+            setExpanded(new Set(expanded).add(focusedRoot.uniqueId));
         }
-    }, [focusedRoot]);
+    }
     const toggleExpanded = (entry) => setExpanded((prev) => {
         const next = new Set(prev);
         if (next.has(entry.root.uniqueId)) {

package/dist/react/SubEmittersModule.d.ts

@@ -1,4 +1,4 @@
-import { EffectBinding } from '../core/binding';
+import { EffectBinding } from '../core/binding.js';
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a
  * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).

package/dist/react/SubEmittersModule.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { EmitSubParticleSystem, SubParticleEmitMode } from 'babylon.quarks';
-import { findBehavior } from '../core/colors';
-import { createChildSystem } from '../core/systems';
-import { ModuleSection } from './ModuleSection';
-import { CheckboxField, NumberField, Row, SelectField } from './fields';
-import { theme } from './theme';
+import { findBehavior } from '../core/colors.js';
+import { createChildSystem } from '../core/systems.js';
+import { ModuleSection } from './ModuleSection.js';
+import { CheckboxField, NumberField, Row, SelectField } from './fields.js';
+import { theme } from './theme.js';
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a
  * child system in the effect hierarchy — edit it by selecting it there (Unity pattern).

package/dist/react/TextureSelect.d.ts

@@ -0,0 +1,24 @@
+import type { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import type { TextureOption } from './modules.js';
+/** The url a texture-like object was loaded from, or '' for none. */
+export declare function textureUrlOf(texture: unknown): string;
+/**
+ * Picks a texture for one slot: a host preset, a custom URL, a file from disk, or none. The
+ * current texture stays selectable when it is not among the presets. Used by the Renderer
+ * module for the map and for the ramp, mask and noise of the texture effects.
+ */
+export declare function TextureSelect(props: {
+    /** The slot's current texture (anything with a `url`), or null for none. */
+    value: unknown;
+    textureOptions?: TextureOption[];
+    /** Turns a URL or `data:` URI into a texture; null or undefined when it cannot. */
+    loadTexture: (url: string) => Texture | null | undefined;
+    /** The picked texture, or null for none. */
+    onChange: (texture: Texture | null) => void;
+    /** Label of the "none" entry. Default "(none)". */
+    noneLabel?: string;
+    /** Shows a thumbnail of the current texture under the select. Default false. */
+    preview?: boolean;
+    /** Title of the custom URL prompt. Default "Texture URL". */
+    promptTitle?: string;
+}): import("react").JSX.Element;

package/dist/react/TextureSelect.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SelectField } from './fields.js';
+import { PromptDialog } from './PromptDialog.js';
+/** The url a texture-like object was loaded from, or '' for none. */
+export function textureUrlOf(texture) {
+    return texture?.url ?? '';
+}
+/**
+ * Picks a texture for one slot: a host preset, a custom URL, a file from disk, or none. The
+ * current texture stays selectable when it is not among the presets. Used by the Renderer
+ * module for the map and for the ramp, mask and noise of the texture effects.
+ */
+export function TextureSelect(props) {
+    const currentUrl = textureUrlOf(props.value);
+    const options = props.textureOptions ?? [];
+    const isPreset = options.some((o) => o.url === currentUrl);
+    const [prompting, setPrompting] = useState(false);
+    const apply = (url) => {
+        const texture = props.loadTexture(url);
+        if (texture) {
+            props.onChange(texture);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SelectField, { value: !currentUrl ? '__none' : isPreset ? currentUrl : '__current', options: [
+                    { value: '__none', label: props.noneLabel ?? '(none)' },
+                    ...(currentUrl && !isPreset
+                        ? [{ value: '__current', label: `(current) ${currentUrl.slice(-24)}` }]
+                        : []),
+                    ...options.map((o) => ({ value: o.url, label: o.label })),
+                    { value: '__url', label: 'Custom URL…' },
+                    { value: '__file', label: 'Load from file…' },
+                ], onChange: (url) => {
+                    if (url === '__current') {
+                        return;
+                    }
+                    if (url === '__none') {
+                        props.onChange(null);
+                        return;
+                    }
+                    if (url === '__url') {
+                        setPrompting(true);
+                        return;
+                    }
+                    if (url === '__file') {
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.accept = 'image/*';
+                        input.onchange = () => {
+                            const file = input.files?.[0];
+                            if (!file) {
+                                return;
+                            }
+                            const reader = new FileReader();
+                            reader.onload = () => apply(reader.result);
+                            reader.readAsDataURL(file);
+                        };
+                        input.click();
+                        return;
+                    }
+                    apply(url);
+                } }), prompting && (_jsx(PromptDialog, { title: props.promptTitle ?? 'Texture URL', defaultValue: currentUrl, placeholder: "https://\u2026", onSubmit: (url) => {
+                    apply(url);
+                    setPrompting(false);
+                }, onCancel: () => setPrompting(false) })), props.preview && currentUrl && (_jsx("img", { src: currentUrl, alt: "texture preview", style: {
+                    width: 64,
+                    height: 64,
+                    marginTop: 6,
+                    objectFit: 'contain',
+                    borderRadius: 6,
+                    border: '1px solid #2b3761',
+                    background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
+                } }))] }));
+}

package/dist/react/TextureUVField.d.ts

@@ -0,0 +1,14 @@
+import type { TextureUV } from 'babylon.quarks';
+/**
+ * Rows for how a texture is laid over the particle (`TextureUV`): its UV channel, then
+ * tiling and offset as Unity's material Tiling / Offset, then a scroll as Unreal's Panner.
+ * One field for the map, the erosion mask and the distortion noise alike.
+ */
+export declare function TextureUVField(props: {
+    /** The complete layout as the system holds it. */
+    value: TextureUV;
+    /** Called with the whole layout, one field changed. */
+    onChange: (next: TextureUV) => void;
+    /** Prefix of each row's label, so several layouts in one module stay apart. Default none. */
+    labelPrefix?: string;
+}): import("react").JSX.Element;

package/dist/react/TextureUVField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField, Row, SelectField } from './fields.js';
+/** A `[u, v]` pair of number inputs. */
+function PairField(props) {
+    return (_jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1].map((i) => (_jsx(NumberField, { value: props.value[i], step: props.step, onChange: (v) => {
+                const next = [props.value[0], props.value[1]];
+                next[i] = v;
+                props.onChange(next);
+            } }, i))) }));
+}
+/**
+ * Rows for how a texture is laid over the particle (`TextureUV`): its UV channel, then
+ * tiling and offset as Unity's material Tiling / Offset, then a scroll as Unreal's Panner.
+ * One field for the map, the erosion mask and the distortion noise alike.
+ */
+export function TextureUVField(props) {
+    const prefix = props.labelPrefix ?? '';
+    const patch = (fields) => props.onChange({ ...props.value, ...fields });
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: `${prefix}UV channel`, hintKey: "UV channel", children: _jsx(SelectField, { value: props.value.channel, options: [
+                        { value: 0, label: 'UV0 (sprite / mesh UV)' },
+                        { value: 1, label: 'UV1 (mesh second set, along a trail)' },
+                    ], onChange: (channel) => patch({ channel }) }) }), _jsx(Row, { label: `${prefix}Tiling`, hintKey: "Tiling", children: _jsx(PairField, { value: props.value.tiling, step: 0.5, onChange: (tiling) => patch({ tiling }) }) }), _jsx(Row, { label: `${prefix}Offset`, hintKey: "Offset", children: _jsx(PairField, { value: props.value.offset, step: 0.05, onChange: (offset) => patch({ offset }) }) }), _jsx(Row, { label: `${prefix}Scroll`, hintKey: "Scroll", children: _jsx(PairField, { value: props.value.scroll, step: 0.05, onChange: (scroll) => patch({ scroll }) }) })] }));
+}

package/dist/react/TimelinePanel.d.ts

@@ -1,22 +1,35 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import type { Scene } from '@babylonjs/core/scene';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import type { Scene } from '@babylonjs/core/scene.js';
 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';
+import type { EffectBinding } from '../core/binding.js';
+import { type PlaybackState } from '../core/playback.js';
+export type { PlaybackState } from '../core/playback.js';
+/** Props of {@link TimelinePanel}. */
 export interface TimelinePanelProps {
+    /** The focused effect, whose systems are the tracks. */
     binding: EffectBinding;
+    /** The node shown in the inspector; its track is highlighted. */
     selectedNode: TransformNode | null;
+    /** Selects a track's or group's node. */
     onSelectNode: (node: TransformNode | null) => void;
+    /** The preview scene, redrawn after a scrub. */
     scene: Scene;
+    /** The renderer the effect draws through, refreshed after a scrub. */
     renderer: BatchedRenderer;
+    /** Playback state shared with the host's render loop. */
     playbackRef: React.MutableRefObject<PlaybackState>;
-    playheadRef: React.RefObject<HTMLDivElement>;
-    counterRef: React.RefObject<HTMLSpanElement>;
+    /** The playhead line, moved every frame without a re-render. */
+    playheadRef: React.RefObject<HTMLDivElement | null>;
+    /** The time and particle counter in the header, written by the host's render loop. */
+    counterRef: React.RefObject<HTMLSpanElement | null>;
+    /** The stage is playing. */
     stagePlaying: boolean;
+    /** Plays or pauses the stage. */
     setStagePlaying: (playing: boolean) => void;
+    /** Playback speed, 1 for real time. */
     speed: number;
+    /** Sets the playback speed. */
     setSpeed: (speed: number) => void;
     /** False when the focused effect is hidden — it has nothing to play. */
     playbackEnabled?: boolean;

package/dist/react/TimelinePanel.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon } from '@heroicons/react/24/solid';
 import React, { useMemo, useRef, useState } from 'react';
-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';
+import { groupNodes } from '../core/groups.js';
+import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback.js';
+import { pauseFocus, playFocus, scrubFocusTo, scrubFocusToSettled } from '../core/scrub.js';
+import { computeTimelineRows, computeTimelineSpan } from '../core/timeline.js';
+import { PLAYBACK_SPEEDS, restartFocusPlayback, toggleStagePlayback } from '../core/transport.js';
+import { TimelineTrackRow } from './TimelineTrackRow.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, theme } from './theme.js';
 const LABEL_WIDTH = 200;
 const RULER_HEIGHT = 22;
 const PANEL_HEIGHT = 220;
@@ -38,10 +38,13 @@ export function TimelinePanel(props) {
     const bodyRef = useRef(null);
     const dragRef = useRef({ raf: null, pendingTime: null });
     const focusRootId = binding.root.uniqueId;
-    React.useEffect(() => {
+    // Another effect starts with every system shown and nothing selected.
+    const [shownBinding, setShownBinding] = useState(binding);
+    if (binding !== shownBinding) {
+        setShownBinding(binding);
         setHiddenSystems(new Set());
         setGroupSelection(new Set());
-    }, [binding]);
+    }
     const toggleGroupSelect = (node) => {
         setGroupSelection((prev) => {
             const next = new Set(prev);
@@ -90,7 +93,9 @@ export function TimelinePanel(props) {
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    const rows = useMemo(() => computeTimelineRows(binding), [binding, binding.getRevision()]);
+    const revision = binding.getRevision();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the binding changes in place; its revision says when to recompute
+    const rows = useMemo(() => computeTimelineRows(binding), [binding, revision]);
     const timelineSpan = useMemo(() => computeTimelineSpan(rows), [rows]);
     const pxPerSecond = Math.max(1, bodyWidthPx - TIMELINE_INSET - RIGHT_PADDING) / timelineSpan;
     const anyLooping = useMemo(() => rows.some((r) => r.kind === 'track' && r.looping), [rows]);
@@ -143,18 +148,19 @@ export function TimelinePanel(props) {
         renderer,
     ]);
     const visibleRows = useMemo(() => {
+        const visible = [];
         let hideUntilDepth = null;
-        const visible = rows.filter((row) => {
+        for (const row of rows) {
             if (hideUntilDepth !== null) {
                 if (row.depth > hideUntilDepth)
-                    return false;
+                    continue;
                 hideUntilDepth = null;
             }
             if (row.kind === 'group' && collapsedGroups.has(row.node)) {
                 hideUntilDepth = row.depth;
             }
-            return true;
-        });
+            visible.push(row);
+        }
         return visible;
     }, [rows, collapsedGroups]);
     const toggleCollapse = (node) => {