babylon.quarks-editor 0.18.0 → 0.19.0

package/dist/react/EffectEditorHost.js

@@ -1,48 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useReducer, useRef, useState, useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { ArrowLeftIcon, ArrowPathIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, ArrowsPointingOutIcon, CubeTransparentIcon, CursorArrowRaysIcon, Square2StackIcon, } from '@heroicons/react/24/solid';
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
-import { Engine } from '@babylonjs/core/Engines/engine';
-import { Scene } from '@babylonjs/core/scene';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+import { Engine } from '@babylonjs/core/Engines/engine';
+import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
+import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
-import { Vector3 as BVector3 } from '@babylonjs/core/Maths/math.vector';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
+import { Vector3 as BVector3 } from '@babylonjs/core/Maths/math.vector';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
 import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer';
+import { Scene } from '@babylonjs/core/scene';
 import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial';
-import { BatchedRenderer, QuarksUtil, } from 'babylon.quarks';
+import { ArrowLeftIcon, ArrowPathIcon, ArrowsPointingOutIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, CubeTransparentIcon, CursorArrowRaysIcon, Square2StackIcon, } from '@heroicons/react/24/solid';
+import { BatchedRenderer, QuarksUtil } from 'babylon.quarks';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 import { EffectBinding } from '../core/binding';
-import { EffectHistory } from '../core/history';
 import { ensureGroundResolver } from '../core/collision';
 import { createGalleryDefaultEntry } from '../core/defaultEffect';
-import { loadEffectFromJson, disposeLoadedEffect, parseEffectFromJson } from '../core/loadEffect';
-import { applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview, pauseFinishedPreviews } from '../core/galleryPlayback';
-import { createPlaybackState, clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed } from '../core/playback';
-import { pauseFocus, scrubFocusToSettled } from '../core/scrub';
-import { logRenderMismatch } from '../core/renderDebug';
-import { cancelGalleryCameraFocus, focusGalleryEntry } from '../core/galleryLayout';
-import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
-import { GalleryDropMarker } from '../core/galleryDropMarker';
-import { GallerySelectionMarker } from '../core/gallerySelectionMarker';
 import { EmitterShapeWireframes } from '../core/emitterShapeWireframe';
 import { getGalleryDragSession, setGalleryDragSession } from '../core/galleryDragSession';
+import { GalleryDropMarker } from '../core/galleryDropMarker';
+import { cancelGalleryCameraFocus, focusGalleryEntry } from '../core/galleryLayout';
+import { applyGalleryPlayback, countActivePreviews, countGalleryParticles, hasActivePreview, pauseFinishedPreviews, } from '../core/galleryPlayback';
 import { clearGalleryEntrySimulation, pickGroundPosition, placeGalleryEntriesAt, placeGalleryEntryInScene, removeGalleryEntryFromScene, } from '../core/galleryScene';
+import { GallerySelectionMarker } from '../core/gallerySelectionMarker';
 import { describeGalleryDrag, GALLERY_DRAG_MIME, readGalleryDrag } from '../core/galleryTree';
-import { loadEffectGallery, collectJsonFiles, bindingFromGalleryEntry, mergeGalleryEntries } from '../core/loadEffectGallery';
+import { EffectHistory } from '../core/history';
+import { disposeLoadedEffect, loadEffectFromJson, parseEffectFromJson } from '../core/loadEffect';
+import { bindingFromGalleryEntry, collectJsonFiles, loadEffectGallery, mergeGalleryEntries, } from '../core/loadEffectGallery';
 import { pickGalleryJsonFiles } from '../core/pickGalleryFiles';
-import { GalleryViewportPicker } from '../core/viewportPicker';
+import { clearFocusFinished, createPlaybackState, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
+import { logRenderMismatch } from '../core/renderDebug';
+import { pauseFocus, scrubFocusToSettled } from '../core/scrub';
+import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
 import { notifyTransformChanged } from '../core/transformStore';
+import { GalleryViewportPicker } from '../core/viewportPicker';
 import { EffectEditor } from './EffectEditor';
-import { PromptDialog } from './PromptDialog';
-import { MessageDialog } from './MessageDialog';
 import { GalleryPanel } from './GalleryPanel';
+import { MessageDialog } from './MessageDialog';
+import { PromptDialog } from './PromptDialog';
 import { TimelinePanel } from './TimelinePanel';
-import { buttonStyle, globalEditorStyles, theme } from './theme';
 import { iconStyle } from './icons';
+import { buttonStyle, globalEditorStyles, theme } from './theme';
 /** Disposes an effect's systems and its remaining group tree (otherwise the groups leak). */
 function disposeEffect(root, systems, renderer, inRenderer = true) {
     disposeLoadedEffect(root, systems, renderer, inRenderer);
@@ -548,7 +548,9 @@ export function EffectEditorHost(props) {
             }
             const previewIds = new Set(snapshot.previewRootIds);
             const binding = snapshot.binding;
-            if (binding && (binding.root.uniqueId !== focusTimelineMetaRef.current.rootId || binding.getRevision() !== focusTimelineMetaRef.current.revision)) {
+            if (binding &&
+                (binding.root.uniqueId !== focusTimelineMetaRef.current.rootId ||
+                    binding.getRevision() !== focusTimelineMetaRef.current.revision)) {
                 const rows = computeTimelineRows(binding);
                 focusTimelineMetaRef.current = {
                     rootId: binding.root.uniqueId,
@@ -660,7 +662,13 @@ export function EffectEditorHost(props) {
         gm.positionGizmoEnabled = gizmoMode === 'position';
         gm.rotationGizmoEnabled = gizmoMode === 'rotation';
         gm.scaleGizmoEnabled = gizmoMode === 'scale';
-        const activeGizmo = gizmoMode === 'position' ? gm.gizmos.positionGizmo : gizmoMode === 'rotation' ? gm.gizmos.rotationGizmo : gizmoMode === 'scale' ? gm.gizmos.scaleGizmo : null;
+        const activeGizmo = gizmoMode === 'position'
+            ? gm.gizmos.positionGizmo
+            : gizmoMode === 'rotation'
+                ? gm.gizmos.rotationGizmo
+                : gizmoMode === 'scale'
+                    ? gm.gizmos.scaleGizmo
+                    : null;
         let dragRaf = 0;
         const scheduleTransformRefresh = () => {
             if (dragRaf !== 0) {
@@ -798,7 +806,7 @@ export function EffectEditorHost(props) {
     const activeSystem = binding ? (allSystems.find((s) => s.emitter === selectedNode) ?? binding.system) : null;
     const gizmoTargetLabel = gizmoNode?.name || 'Node';
     const selectedGalleryEntry = selectedGalleryRoot
-        ? gallery.find((entry) => entry.root === selectedGalleryRoot) ?? null
+        ? (gallery.find((entry) => entry.root === selectedGalleryRoot) ?? null)
         : null;
     /** Timeline is always shown when an effect is selected; playback only when it is on stage. */
     const showTimeline = Boolean(binding && activeSystem && state);
@@ -815,7 +823,15 @@ export function EffectEditorHost(props) {
         }
         return props.resolveGeometry(file, scene);
     }, [props.resolveGeometry]);
-    return (_jsxs("div", { className: "qe-root", style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', fontFamily: theme.font, color: theme.text, background: '#070b16' }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsxs("aside", { style: {
+    return (_jsxs("div", { className: "qe-root", style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            fontFamily: theme.font,
+            color: theme.text,
+            background: '#070b16',
+        }, children: [_jsx("style", { children: globalEditorStyles }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsxs("aside", { style: {
                             width: GALLERY_PANEL_WIDTH,
                             flexShrink: 0,
                             borderRight: `1px solid ${theme.border}`,
@@ -823,7 +839,14 @@ export function EffectEditorHost(props) {
                             display: 'flex',
                             flexDirection: 'column',
                             minHeight: 0,
-                        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsxs("div", { style: { fontSize: 14, fontWeight: 600 }, children: ["Gallery", gallery.length > 0 ? ` · ${gallery.length}` : ''] }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: "Drag into viewport to place \u00B7 \u2713 preview \u00B7 \u00D7 remove from stage" })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'hidden', padding: '8px 12px 14px', display: 'flex', flexDirection: 'column' }, children: _jsx(GalleryPanel, { entries: gallery, focusedRoot: selectedGalleryRoot, previewRootIds: previewRootIdSet, loading: galleryLoading, folderInputRef: galleryFolderInputRef, onFocus: (entry) => selectGalleryEntryRef.current(entry), onTogglePreview: (entry) => toggleGalleryPreviewRef.current(entry), onRemoveFromScene: (entry) => removeGalleryFromSceneRef.current(entry), onImportFiles: (files) => void runGalleryImport(files), onImportFolder: () => void handleImportFolder(), onCreateDefault: () => createGalleryDefaultRef.current() }) })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, onDragEnter: (e) => {
+                        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsxs("div", { style: { fontSize: 14, fontWeight: 600 }, children: ["Gallery", gallery.length > 0 ? ` · ${gallery.length}` : ''] }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: "Drag into viewport to place \u00B7 \u2713 preview \u00B7 \u00D7 remove from stage" })] }), _jsx("div", { style: {
+                                    flex: 1,
+                                    minHeight: 0,
+                                    overflow: 'hidden',
+                                    padding: '8px 12px 14px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: _jsx(GalleryPanel, { entries: gallery, focusedRoot: selectedGalleryRoot, previewRootIds: previewRootIdSet, loading: galleryLoading, folderInputRef: galleryFolderInputRef, onFocus: (entry) => selectGalleryEntryRef.current(entry), onTogglePreview: (entry) => toggleGalleryPreviewRef.current(entry), onRemoveFromScene: (entry) => removeGalleryFromSceneRef.current(entry), onImportFiles: (files) => void runGalleryImport(files), onImportFolder: () => void handleImportFolder(), onCreateDefault: () => createGalleryDefaultRef.current() }) })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, onDragEnter: (e) => {
                             if (!e.dataTransfer.types.includes(GALLERY_DRAG_MIME))
                                 return;
                             galleryDragDepthRef.current += 1;
@@ -889,7 +912,7 @@ export function EffectEditorHost(props) {
                                         fontSize: 13,
                                         color: theme.text,
                                         whiteSpace: 'nowrap',
-                                    }, children: ["Drop ", galleryDragHover.count === 1 ? 'effect' : `${galleryDragHover.count} effects`, " \u2014 ", galleryDragHover.label] }) })), galleryLoading && (_jsx("div", { style: {
+                                    }, children: ["Drop ", galleryDragHover.count === 1 ? 'effect' : `${galleryDragHover.count} effects`, " \u2014", ' ', galleryDragHover.label] }) })), galleryLoading && (_jsx("div", { style: {
                                     position: 'absolute',
                                     inset: 0,
                                     display: 'flex',
@@ -897,7 +920,13 @@ export function EffectEditorHost(props) {
                                     justifyContent: 'center',
                                     background: 'rgba(7, 11, 22, 0.72)',
                                     pointerEvents: 'none',
-                                }, children: _jsxs("div", { style: { background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 10, padding: '16px 22px', textAlign: 'center' }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Loading gallery\u2026" }), _jsxs("div", { style: { fontSize: 13, color: theme.textDim }, children: [galleryLoading.done, " / ", galleryLoading.total || '…', " files", galleryLoading.failed > 0 ? ` · ${galleryLoading.failed} skipped` : ''] })] }) })), props.backLink && (_jsxs("a", { className: "qe-hover", href: props.backLink.href, style: {
+                                }, children: _jsxs("div", { style: {
+                                        background: theme.panelBg,
+                                        border: `1px solid ${theme.border}`,
+                                        borderRadius: 10,
+                                        padding: '16px 22px',
+                                        textAlign: 'center',
+                                    }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Loading gallery\u2026" }), _jsxs("div", { style: { fontSize: 13, color: theme.textDim }, children: [galleryLoading.done, " / ", galleryLoading.total || '…', " files", galleryLoading.failed > 0 ? ` · ${galleryLoading.failed} skipped` : ''] })] }) })), props.backLink && (_jsxs("a", { className: "qe-hover", href: props.backLink.href, style: {
                                     position: 'absolute',
                                     top: 12,
                                     left: 12,
@@ -913,13 +942,74 @@ export function EffectEditorHost(props) {
                                     color: theme.text,
                                     textDecoration: 'none',
                                     fontFamily: theme.font,
-                                }, children: [_jsx(ArrowLeftIcon, { style: iconStyle(14) }), props.backLink.label.replace(/^←\s*/, '')] })), _jsxs("div", { style: { position: 'absolute', top: 12, right: 12, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }, children: [_jsxs("div", { style: { display: 'flex', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: [_jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Undo (Ctrl+Z)", disabled: !state?.history.canUndo || !binding, onClick: () => historyAction(state.history.undo()), children: _jsx(ArrowUturnLeftIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !state?.history.canRedo || !binding, onClick: () => historyAction(state.history.redo()), children: _jsx(ArrowUturnRightIcon, { style: iconStyle(14) }) })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: GIZMO_MODE_BUTTONS.map((m) => (_jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(gizmoMode === m.value ? activeSquareButtonStyle : {}) }, title: m.title, onClick: () => setGizmoMode(m.value), children: _jsx(m.Icon, { style: iconStyle(14) }) }, m.value))) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, background: theme.panelBg, border: `1px solid ${theme.border}`, borderRadius: 8, padding: 4 }, children: _jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(showEmitterWireframes ? activeSquareButtonStyle : {}) }, title: "Show emitter shape wireframes", disabled: !binding, onClick: () => setShowEmitterWireframes((on) => !on), children: _jsx(CubeTransparentIcon, { style: iconStyle(14) }) }) })] })] }), _jsxs("aside", { style: { width: 340, flexShrink: 0, borderLeft: `1px solid ${theme.border}`, background: theme.panelBg, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 600, color: theme.textDim, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }, children: "Inspector" }), _jsx("div", { className: "qe-hover-bg", title: binding ? 'Rename effect' : undefined, style: { fontSize: 16, fontWeight: 600, cursor: binding ? 'pointer' : 'default', borderRadius: 6, padding: '2px 4px', margin: '-2px -4px' }, onClick: () => binding && setRenamingRoot(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renamingRoot && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
+                                }, children: [_jsx(ArrowLeftIcon, { style: iconStyle(14) }), props.backLink.label.replace(/^←\s*/, '')] })), _jsxs("div", { style: {
+                                    position: 'absolute',
+                                    top: 12,
+                                    right: 12,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'flex-end',
+                                    gap: 6,
+                                }, children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: 4,
+                                            background: theme.panelBg,
+                                            border: `1px solid ${theme.border}`,
+                                            borderRadius: 8,
+                                            padding: 4,
+                                        }, children: [_jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Undo (Ctrl+Z)", disabled: !state?.history.canUndo || !binding, onClick: () => historyAction(state.history.undo()), children: _jsx(ArrowUturnLeftIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !state?.history.canRedo || !binding, onClick: () => historyAction(state.history.redo()), children: _jsx(ArrowUturnRightIcon, { style: iconStyle(14) }) })] }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 4,
+                                            background: theme.panelBg,
+                                            border: `1px solid ${theme.border}`,
+                                            borderRadius: 8,
+                                            padding: 4,
+                                        }, children: GIZMO_MODE_BUTTONS.map((m) => (_jsx("button", { className: "qe-hover", style: {
+                                                ...squareButtonStyle,
+                                                ...(gizmoMode === m.value ? activeSquareButtonStyle : {}),
+                                            }, title: m.title, onClick: () => setGizmoMode(m.value), children: _jsx(m.Icon, { style: iconStyle(14) }) }, m.value))) }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 4,
+                                            background: theme.panelBg,
+                                            border: `1px solid ${theme.border}`,
+                                            borderRadius: 8,
+                                            padding: 4,
+                                        }, children: _jsx("button", { className: "qe-hover", style: {
+                                                ...squareButtonStyle,
+                                                ...(showEmitterWireframes ? activeSquareButtonStyle : {}),
+                                            }, title: "Show emitter shape wireframes", disabled: !binding, onClick: () => setShowEmitterWireframes((on) => !on), children: _jsx(CubeTransparentIcon, { style: iconStyle(14) }) }) })] })] }), _jsxs("aside", { style: {
+                            width: 340,
+                            flexShrink: 0,
+                            borderLeft: `1px solid ${theme.border}`,
+                            background: theme.panelBg,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 0,
+                        }, children: [_jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 600,
+                                            color: theme.textDim,
+                                            textTransform: 'uppercase',
+                                            letterSpacing: 0.4,
+                                            marginBottom: 6,
+                                        }, children: "Inspector" }), _jsx("div", { className: "qe-hover-bg", title: binding ? 'Rename effect' : undefined, style: {
+                                            fontSize: 16,
+                                            fontWeight: 600,
+                                            cursor: binding ? 'pointer' : 'default',
+                                            borderRadius: 6,
+                                            padding: '2px 4px',
+                                            margin: '-2px -4px',
+                                        }, onClick: () => binding && setRenamingRoot(true), children: (binding?.root.name || props.title) ?? 'Effect editor' }), renamingRoot && binding && (_jsx(PromptDialog, { title: "Rename effect", defaultValue: binding.root.name, onSubmit: (name) => {
                                             binding.apply(() => (binding.root.name = name));
                                             setRenamingRoot(false);
                                         }, onCancel: () => setRenamingRoot(false) })), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }, children: [_jsx("button", { className: "qe-hover", style: buttonStyle, disabled: !binding, onClick: () => {
                                                     if (!binding)
                                                         return;
-                                                    const blob = new Blob([binding.exportJSON('EditorEffect')], { type: 'application/json' });
+                                                    const blob = new Blob([binding.exportJSON('EditorEffect')], {
+                                                        type: 'application/json',
+                                                    });
                                                     const link = document.createElement('a');
                                                     link.href = URL.createObjectURL(blob);
                                                     link.download = 'effect.json';

package/dist/react/GalleryPanel.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import React from 'react';
 import type { GalleryEntry, GalleryLoadProgress } from '../core/loadEffectGallery';
 export interface GalleryPanelProps {
     entries: GalleryEntry[];

package/dist/react/GalleryPanel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { CheckCircleIcon, ChevronDownIcon, ChevronRightIcon, FolderIcon, FolderOpenIcon, SparklesIcon, XMarkIcon, } from '@heroicons/react/24/solid';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { setGalleryDragSession } from '../core/galleryDragSession';
 import { buildGalleryTree, filterGalleryTree, flattenVisibleGalleryRows, writeGalleryDrag, } from '../core/galleryTree';
 import { iconStyle } from './icons';
@@ -50,7 +50,13 @@ function EffectRow(props) {
                 }, onClick: (e) => {
                     e.stopPropagation();
                     onTogglePreview(entry);
-                }, children: inPreview ? (_jsx(CheckCircleIcon, { style: iconStyle(14) })) : (_jsx("span", { style: { width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, boxSizing: 'border-box' } })) })) : (_jsx("span", { style: { width: 28, flexShrink: 0, borderRight: `1px solid ${theme.border}` } })), _jsxs("button", { type: "button", draggable: true, className: "qe-hover-bg", title: entry.inScene
+                }, children: inPreview ? (_jsx(CheckCircleIcon, { style: iconStyle(14) })) : (_jsx("span", { style: {
+                        width: 10,
+                        height: 10,
+                        border: `1px solid currentColor`,
+                        borderRadius: 2,
+                        boxSizing: 'border-box',
+                    } })) })) : (_jsx("span", { style: { width: 28, flexShrink: 0, borderRight: `1px solid ${theme.border}` } })), _jsxs("button", { type: "button", draggable: true, className: "qe-hover-bg", title: entry.inScene
                     ? `${entry.path} — on stage${inPreview ? ' · previewing' : ' · parked'} · Ctrl+click toggles preview`
                     : `${entry.path} — catalog only · drag into viewport to place`, style: {
                     display: 'flex',
@@ -129,7 +135,7 @@ function flatRowKey(row) {
     return row.kind === 'folder' ? `folder:${row.node.path}` : `effect:${row.node.entry.root.uniqueId}`;
 }
 function VirtualGalleryTree(props) {
-    const { rows, closedFolders, focusedRoot, previewRootIds, onFocus, onTogglePreview, onRemoveFromScene, onToggleFolder } = props;
+    const { rows, closedFolders, focusedRoot, previewRootIds, onFocus, onTogglePreview, onRemoveFromScene, onToggleFolder, } = props;
     const scrollRef = useRef(null);
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -159,7 +165,7 @@ function VirtualGalleryTree(props) {
 }
 /** Folder-tree catalog; import effects here and drag them into the viewport. */
 export function GalleryPanel(props) {
-    const { entries, focusedRoot, previewRootIds, loading, folderInputRef, onFocus, onTogglePreview, onRemoveFromScene, onImportFiles, onImportFolder, onCreateDefault } = props;
+    const { entries, focusedRoot, previewRootIds, loading, folderInputRef, onFocus, onTogglePreview, onRemoveFromScene, onImportFiles, onImportFolder, onCreateDefault, } = props;
     const [query, setQuery] = useState('');
     const [closedFolders, setClosedFolders] = useState(() => new Set());
     const fileInputRef = useRef(null);
@@ -204,7 +210,8 @@ export function GalleryPanel(props) {
                             cursor: isLoading ? 'not-allowed' : 'pointer',
                             opacity: isLoading ? 0.5 : 1,
                         }, onClick: (e) => {
-                            if (typeof window.showDirectoryPicker === 'function') {
+                            if (typeof window.showDirectoryPicker ===
+                                'function') {
                                 e.preventDefault();
                                 onImportFolder();
                             }
@@ -233,7 +240,7 @@ export function GalleryPanel(props) {
                     border: `1px solid ${theme.border}`,
                     borderRadius: 8,
                     background: theme.sectionBg,
-                }, children: ["Catalog is empty. Click ", _jsx("strong", { children: "New effect" }), ", or ", _jsx("strong", { children: "Import effect" }), " / ", _jsx("strong", { children: "Import folder" }), "."] })) : filtered.length === 0 ? (_jsx("div", { style: {
+                }, children: ["Catalog is empty. Click ", _jsx("strong", { children: "New effect" }), ", or ", _jsx("strong", { children: "Import effect" }), " /", ' ', _jsx("strong", { children: "Import folder" }), "."] })) : filtered.length === 0 ? (_jsx("div", { style: {
                     flex: 1,
                     minHeight: 120,
                     padding: '10px 12px',

package/dist/react/GradientEditor.d.ts

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

package/dist/react/GradientEditor.js

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

package/dist/react/MessageDialog.js

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

package/dist/react/ModuleSection.js

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

package/dist/react/ObjectModule.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 export declare function ObjectModule(props: {
     node: TransformNode;
     label: string;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/ObjectModule.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSyncExternalStore } from 'react';
 import { Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { useSyncExternalStore } from 'react';
 import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore';
 import { ModuleSection } from './ModuleSection';
 import { NumberField, Row } from './fields';

package/dist/react/SubEmittersModule.d.ts

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

package/dist/react/TimelinePanel.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { BatchedRenderer } from 'babylon.quarks';
-import type { Scene } from '@babylonjs/core/scene';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Scene } from '@babylonjs/core/scene';
+import type { BatchedRenderer } from 'babylon.quarks';
+import React from 'react';
 import type { EffectBinding } from '../core/binding';
 import { type PlaybackState } from '../core/playback';
 export type { PlaybackState } from '../core/playback';

package/dist/react/TimelinePanel.js

@@ -1,8 +1,8 @@
 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 { ArrowPathIcon, ForwardIcon, PauseIcon, PlayIcon, RectangleGroupIcon, } from '@heroicons/react/24/solid';
-import { clearFocusFinished, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
 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 { TimelineTrackRow } from './TimelineTrackRow';
@@ -29,7 +29,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, } = props;
     const [bodyWidthPx, setBodyWidthPx] = useState(600);
     const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
     const [hiddenSystems, setHiddenSystems] = useState(() => new Set());
@@ -129,7 +129,18 @@ export function TimelinePanel(props) {
         };
         raf = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(raf);
-    }, [pxPerSecond, timelineSpan, anyLooping, playbackRef, playheadRef, focusRootId, playbackEnabled, binding, scene, renderer]);
+    }, [
+        pxPerSecond,
+        timelineSpan,
+        anyLooping,
+        playbackRef,
+        playheadRef,
+        focusRootId,
+        playbackEnabled,
+        binding,
+        scene,
+        renderer,
+    ]);
     const visibleRows = useMemo(() => {
         let hideUntilDepth = null;
         const visible = rows.filter((row) => {
@@ -246,11 +257,23 @@ export function TimelinePanel(props) {
             flexDirection: 'column',
             fontFamily: theme.font,
             color: theme.text,
-        }, children: [_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) => {
+        }, children: [_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: [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: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',
@@ -271,7 +294,12 @@ export function TimelinePanel(props) {
                                 gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
                                 background: theme.panelBg,
                                 zIndex: 2,
-                            }, children: [_jsx("div", { style: { height: RULER_HEIGHT } }), _jsx("div", { className: "qe-hover-bg", style: { position: 'relative', height: RULER_HEIGHT, cursor: 'ew-resize', overflow: 'hidden' }, onPointerDown: (e) => {
+                            }, children: [_jsx("div", { style: { height: RULER_HEIGHT } }), _jsx("div", { className: "qe-hover-bg", style: {
+                                        position: 'relative',
+                                        height: RULER_HEIGHT,
+                                        cursor: 'ew-resize',
+                                        overflow: 'hidden',
+                                    }, onPointerDown: (e) => {
                                         playbackRef.current.scrubbing = true;
                                         e.target.setPointerCapture(e.pointerId);
                                         queueScrub(e.clientX);
@@ -281,7 +309,16 @@ export function TimelinePanel(props) {
                                     }, onPointerUp: (e) => {
                                         playbackRef.current.scrubbing = false;
                                         e.target.releasePointerCapture?.(e.pointerId);
-                                    }, children: ticks.map((t) => (_jsxs("div", { style: { position: 'absolute', left: TIMELINE_INSET + t * pxPerSecond, top: 0, bottom: 0, borderLeft: `1px solid ${theme.border}`, fontSize: 10, color: theme.textDim, paddingLeft: 3 }, children: [t, "s"] }, t))) })] }), _jsx("div", { style: {
+                                    }, children: ticks.map((t) => (_jsxs("div", { style: {
+                                            position: 'absolute',
+                                            left: TIMELINE_INSET + t * pxPerSecond,
+                                            top: 0,
+                                            bottom: 0,
+                                            borderLeft: `1px solid ${theme.border}`,
+                                            fontSize: 10,
+                                            color: theme.textDim,
+                                            paddingLeft: 3,
+                                        }, children: [t, "s"] }, t))) })] }), _jsx("div", { style: {
                                 position: 'absolute',
                                 top: RULER_HEIGHT,
                                 left: 0,
@@ -293,7 +330,16 @@ export function TimelinePanel(props) {
                                     display: 'grid',
                                     gridTemplateColumns: `${LABEL_WIDTH}px 1fr`,
                                     gridAutoRows: 'min-content',
-                                }, children: visibleRows.map((row) => (_jsx(TimelineTrackRow, { row: row, binding: binding, selected: row.node === selectedNode, onSelectNode: onSelectNode, pxPerSecond: pxPerSecond, offsetPx: TIMELINE_INSET, collapsed: row.kind === 'group' && collapsedGroups.has(row.node), onToggleCollapse: row.kind === 'group' ? () => toggleCollapse(row.node) : undefined, hidden: row.kind === 'track' && hiddenSystems.has(row.system), onToggleVisible: row.kind === 'track' ? () => toggleVisible(row.system) : undefined, groupSelected: groupSelection.has(row.node), onToggleGroupSelect: () => toggleGroupSelect(row.node) }, row.node.uniqueId))) }) }), _jsx("div", { style: { position: 'absolute', top: 0, bottom: 0, left: LABEL_WIDTH, width: 1, background: theme.border, pointerEvents: 'none', zIndex: 3 } }), _jsx("div", { ref: playheadRef, style: {
+                                }, children: visibleRows.map((row) => (_jsx(TimelineTrackRow, { row: row, binding: binding, selected: row.node === selectedNode, onSelectNode: onSelectNode, pxPerSecond: pxPerSecond, offsetPx: TIMELINE_INSET, collapsed: row.kind === 'group' && collapsedGroups.has(row.node), onToggleCollapse: row.kind === 'group' ? () => toggleCollapse(row.node) : undefined, hidden: row.kind === 'track' && hiddenSystems.has(row.system), onToggleVisible: row.kind === 'track' ? () => toggleVisible(row.system) : undefined, groupSelected: groupSelection.has(row.node), onToggleGroupSelect: () => toggleGroupSelect(row.node) }, row.node.uniqueId))) }) }), _jsx("div", { style: {
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: LABEL_WIDTH,
+                                width: 1,
+                                background: theme.border,
+                                pointerEvents: 'none',
+                                zIndex: 3,
+                            } }), _jsx("div", { ref: playheadRef, style: {
                                 position: 'absolute',
                                 top: 0,
                                 bottom: 0,

package/dist/react/TimelineTrackRow.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import React from 'react';
 import type { EffectBinding } from '../core/binding';
 import type { TimelineRow } from '../core/timeline';
 export interface TimelineTrackRowProps {