babylon.quarks-editor 0.26.0 → 0.28.0

package/src/react/EffectTreeView.tsx

@@ -1,14 +1,17 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {ChevronDownIcon, ChevronRightIcon, FolderIcon, SparklesIcon} from '@heroicons/react/24/solid';
 import React, {useState} from 'react';
-import {buildEffectTree, type EffectTreeNode} from '../core/effectTree';
-import {iconStyle} from './icons';
-import {theme} from './theme';
+import {buildEffectTree, type EffectTreeNode} from '../core/effectTree.js';
+import {iconStyle} from './icons.js';
+import {theme} from './theme.js';
 
+/** 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/src/react/GradientEditor.tsx

@@ -1,7 +1,7 @@
 import {useRef, useState} from 'react';
-import {GradientStop, hexToRgb, rgbToHex, stopsToCssGradient} from '../core/colors';
-import {NumberField, Row} from './fields';
-import {buttonStyle, theme} from './theme';
+import {GradientStop, hexToRgb, rgbToHex, stopsToCssGradient} from '../core/colors.js';
+import {NumberField, Row} from './fields.js';
+import {buttonStyle, theme} from './theme.js';
 
 const BAR_WIDTH = 218;
 

package/src/react/InspectorInfoIcon.tsx

@@ -1,8 +1,8 @@
 import {InformationCircleIcon} from '@heroicons/react/24/solid';
 import React from 'react';
-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: {

package/src/react/InspectorLabel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-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: {label: string; hint?: string; hintKey?: string}): React.ReactElement | null {

package/src/react/MessageDialog.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
-import {buttonStyle, theme} from './theme';
+import {buttonStyle, theme} from './theme.js';
 
+/** 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;
 }
 

package/src/react/ModuleSection.tsx

@@ -1,11 +1,22 @@
 import {ChevronDownIcon, ChevronRightIcon} from '@heroicons/react/24/solid';
 import React, {useState} from 'react';
-import {iconStyle} from './icons';
-import {getInspectorHint} from './inspectorHints';
-import {InspectorInfoIcon} from './InspectorInfoIcon';
-import {theme} from './theme';
+import type {EffectBinding} from '../core/binding.js';
+import {iconStyle} from './icons.js';
+import {getInspectorHint} from './inspectorHints.js';
+import {InspectorInfoIcon} from './InspectorInfoIcon.js';
+import {theme} from './theme.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 function ModuleSection(props: {
     title: string;
     hint?: string;

package/src/react/ObjectModule.tsx

@@ -1,9 +1,9 @@
-import {Quaternion} from '@babylonjs/core/Maths/math.vector';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {Quaternion} from '@babylonjs/core/Maths/math.vector.js';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.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;

package/src/react/ProjectsPage.tsx

@@ -1,18 +1,27 @@
 import {ArrowLeftIcon, FolderIcon, PlusIcon} from '@heroicons/react/24/solid';
 import React, {useCallback, useEffect, useState} from 'react';
-import {formatBytes, type ProjectMeta, type ProjectStore, type StorageEstimate} from '../core/projectStore';
-import {ChoiceDialog} from './ChoiceDialog';
-import {ContextMenu, type ContextMenuItem} from './ContextMenu';
-import {iconStyle} from './icons';
-import {PromptDialog} from './PromptDialog';
-import {buttonStyle, globalEditorStyles, theme} from './theme';
+import {formatBytes, type ProjectMeta, type ProjectStore, type StorageEstimate} from '../core/projectStore.js';
+import {ChoiceDialog} from './ChoiceDialog.js';
+import {ContextMenu, type ContextMenuItem} from './ContextMenu.js';
+import {iconStyle} from './icons.js';
+import {PromptDialog} from './PromptDialog.js';
+import {buttonStyle, globalEditorStyles, theme} from './theme.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?: {href: string; label: string};
+    backLink?: {
+        /** Where the link goes. */
+        href: string;
+        /** The link's text. */
+        label: string;
+    };
 }
 
 type Dialog =
@@ -79,6 +88,18 @@ function StorageBar(props: {estimate: StorageEstimate | null; onPersist: () => v
     );
 }
 
+/** What the projects page shows: the store's projects and usage, or why it could not read them. */
+type ProjectListing = {list: ProjectMeta[]; storage: StorageEstimate} | {error: string};
+
+async function listProjects(store: ProjectsPageProps['store']): Promise<ProjectListing> {
+    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: ProjectsPageProps): React.ReactElement {
     const {store, onOpen, title = 'Effect editor', backLink} = props;
@@ -88,20 +109,26 @@ export function ProjectsPage(props: ProjectsPageProps): React.ReactElement {
     const [menu, setMenu] = useState<{x: number; y: number; items: ContextMenuItem[]} | null>(null);
     const [error, setError] = useState<string | null>(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: ProjectListing) => {
+        if ('error' in listing) {
+            setError(listing.error);
             setProjects([]);
+        } else {
+            setProjects(listing.list);
+            setEstimate(listing.storage);
         }
-    }, [store]);
+    }, []);
+    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: () => Promise<unknown>) => {
         setDialog(null);

package/src/react/PromptDialog.tsx

@@ -1,14 +1,21 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {buttonStyle, inputStyle, theme} from './theme';
+import {buttonStyle, inputStyle, theme} from './theme.js';
 
+/** 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;
 }
 

package/src/react/ScenePanel.tsx

@@ -1,4 +1,4 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {
     ChevronDownIcon,
     ChevronRightIcon,
@@ -8,30 +8,37 @@ import {
     TrashIcon,
     ViewfinderCircleIcon,
 } from '@heroicons/react/24/solid';
-import React, {useEffect, useState} from 'react';
-import {buildEffectTree} from '../core/effectTree';
-import type {SceneEntry} from '../core/sceneEntries';
-import {ContextMenu, type ContextMenuItem} 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 type {SceneEntry} from '../core/sceneEntries.js';
+import {ContextMenu, type ContextMenuItem} from './ContextMenu.js';
+import {EffectTreeView} from './EffectTreeView.js';
+import {iconStyle} from './icons.js';
+import {buttonStyle, theme} from './theme.js';
 
 const ROW_HEIGHT = 34;
 
+/** 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;
@@ -213,11 +220,13 @@ export function ScenePanel(props: ScenePanelProps): React.ReactElement {
     const [menu, setMenu] = useState<{x: number; y: number; items: ContextMenuItem[]} | null>(null);
     const [expanded, setExpanded] = useState<Set<number>>(() => 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<TransformNode | null>(null);
+    if (focusedRoot !== expandedFocus) {
+        setExpandedFocus(focusedRoot);
+        if (focusedRoot && !expanded.has(focusedRoot.uniqueId)) {
+            setExpanded(new Set(expanded).add(focusedRoot.uniqueId));
         }
-    }, [focusedRoot]);
+    }
     const toggleExpanded = (entry: SceneEntry) =>
         setExpanded((prev) => {
             const next = new Set(prev);

package/src/react/SubEmittersModule.tsx

@@ -1,11 +1,11 @@
 import type {ParticleEmitter, ParticleSystem} from 'babylon.quarks';
 import {EmitSubParticleSystem, SubParticleEmitMode} from 'babylon.quarks';
-import {EffectBinding} from '../core/binding';
-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 {EffectBinding} from '../core/binding.js';
+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

package/src/react/TextureSelect.tsx

@@ -0,0 +1,118 @@
+import type {Texture} from '@babylonjs/core/Materials/Textures/texture.js';
+import {useState} from 'react';
+import {SelectField} from './fields.js';
+import type {TextureOption} from './modules.js';
+import {PromptDialog} from './PromptDialog.js';
+
+/** A texture-like object the host's `resolveTexture` returned; only its `url` is read here. */
+type TextureLike = {url?: string} | null | undefined;
+
+/** The url a texture-like object was loaded from, or '' for none. */
+export function textureUrlOf(texture: unknown): string {
+    return (texture as TextureLike)?.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: {
+    /** 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;
+}) {
+    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: string) => {
+        const texture = props.loadTexture(url);
+        if (texture) {
+            props.onChange(texture);
+        }
+    };
+    return (
+        <>
+            <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 as string);
+                            reader.readAsDataURL(file);
+                        };
+                        input.click();
+                        return;
+                    }
+                    apply(url);
+                }}
+            />
+            {prompting && (
+                <PromptDialog
+                    title={props.promptTitle ?? 'Texture URL'}
+                    defaultValue={currentUrl}
+                    placeholder="https://…"
+                    onSubmit={(url) => {
+                        apply(url);
+                        setPrompting(false);
+                    }}
+                    onCancel={() => setPrompting(false)}
+                />
+            )}
+            {props.preview && currentUrl && (
+                <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/src/react/TextureUVField.tsx

@@ -0,0 +1,62 @@
+import type {TextureUV, UVChannel} from 'babylon.quarks';
+import {NumberField, Row, SelectField} from './fields.js';
+
+/** A `[u, v]` pair of number inputs. */
+function PairField(props: {value: [number, number]; step: number; onChange: (next: [number, number]) => void}) {
+    return (
+        <div style={{display: 'flex', gap: 6}}>
+            {[0, 1].map((i) => (
+                <NumberField
+                    key={i}
+                    value={props.value[i]}
+                    step={props.step}
+                    onChange={(v) => {
+                        const next: [number, number] = [props.value[0], props.value[1]];
+                        next[i] = v;
+                        props.onChange(next);
+                    }}
+                />
+            ))}
+        </div>
+    );
+}
+
+/**
+ * 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: {
+    /** 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;
+}) {
+    const prefix = props.labelPrefix ?? '';
+    const patch = (fields: Partial<TextureUV>) => props.onChange({...props.value, ...fields});
+    return (
+        <>
+            <Row label={`${prefix}UV channel`} hintKey="UV channel">
+                <SelectField<UVChannel>
+                    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})}
+                />
+            </Row>
+            <Row label={`${prefix}Tiling`} hintKey="Tiling">
+                <PairField value={props.value.tiling} step={0.5} onChange={(tiling) => patch({tiling})} />
+            </Row>
+            <Row label={`${prefix}Offset`} hintKey="Offset">
+                <PairField value={props.value.offset} step={0.05} onChange={(offset) => patch({offset})} />
+            </Row>
+            <Row label={`${prefix}Scroll`} hintKey="Scroll">
+                <PairField value={props.value.scroll} step={0.05} onChange={(scroll) => patch({scroll})} />
+            </Row>
+        </>
+    );
+}

package/src/react/TimelinePanel.tsx

@@ -1,10 +1,10 @@
-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 {ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon} from '@heroicons/react/24/solid';
 import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
 import React, {useMemo, useRef, useState} from 'react';
-import type {EffectBinding} from '../core/binding';
-import {groupNodes} from '../core/groups';
+import type {EffectBinding} from '../core/binding.js';
+import {groupNodes} from '../core/groups.js';
 import {
     clearFocusFinished,
     getFocusElapsed,
@@ -12,28 +12,41 @@ import {
     markFocusFinished,
     setFocusElapsed,
     type PlaybackState,
-} 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';
+} 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';
 
-export type {PlaybackState} from '../core/playback';
+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;
@@ -93,10 +106,13 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
 
     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: TransformNode) => {
         setGroupSelection((prev) => {
@@ -146,7 +162,9 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
         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]);
@@ -200,17 +218,18 @@ export function TimelinePanel(props: TimelinePanelProps): React.ReactElement {
     ]);
 
     const visibleRows = useMemo(() => {
+        const visible: typeof rows = [];
         let hideUntilDepth: number | null = null;
-        const visible = rows.filter((row) => {
+        for (const row of rows) {
             if (hideUntilDepth !== null) {
-                if (row.depth > hideUntilDepth) return false;
+                if (row.depth > hideUntilDepth) continue;
                 hideUntilDepth = null;
             }
             if (row.kind === 'group' && collapsedGroups.has(row.node)) {
                 hideUntilDepth = row.depth;
             }
-            return true;
-        });
+            visible.push(row);
+        }
         return visible;
     }, [rows, collapsedGroups]);