babylon.quarks-editor 0.17.7 → 0.17.9

package/dist/react/GalleryPanel.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { GalleryEntry, GalleryLoadProgress } from '../core/loadEffectGallery';
+export interface GalleryPanelProps {
+    entries: GalleryEntry[];
+    /** Effect shown in the inspector and timeline. */
+    focusedRoot: TransformNode | null;
+    /** In-scene effects that keep simulating while transport plays. */
+    previewRootIds: ReadonlySet<number>;
+    loading: GalleryLoadProgress | null;
+    folderInputRef: React.RefObject<HTMLInputElement | null>;
+    onFocus: (entry: GalleryEntry) => void;
+    onTogglePreview: (entry: GalleryEntry) => void;
+    onImportFiles: (files: FileList | File[]) => void;
+    onImportFolder: () => void;
+    onCreateDefault: () => void;
+}
+/** Folder-tree catalog; import effects here and drag them into the viewport. */
+export declare function GalleryPanel(props: GalleryPanelProps): React.ReactElement;

package/dist/react/GalleryPanel.js

@@ -0,0 +1,215 @@
+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, } from '@heroicons/react/24/solid';
+import { setGalleryDragSession } from '../core/galleryDragSession';
+import { buildGalleryTree, filterGalleryTree, flattenVisibleGalleryRows, writeGalleryDrag, } from '../core/galleryTree';
+import { iconStyle } from './icons';
+import { buttonStyle, hiddenFileInputStyle, inputStyle, theme } from './theme';
+const GALLERY_ROW_HEIGHT = 34;
+function beginGalleryDrag(e, payload) {
+    writeGalleryDrag(e.dataTransfer, payload);
+    setGalleryDragSession(payload);
+}
+function endGalleryDrag() {
+    setGalleryDragSession(null);
+}
+function EffectRow(props) {
+    const { entry, depth, focused, inPreview, onFocus, onTogglePreview } = props;
+    const isLooping = entry.systems.some((system) => system.looping);
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'stretch',
+            width: '100%',
+            height: GALLERY_ROW_HEIGHT,
+            borderBottom: `1px solid ${theme.border}`,
+            background: focused ? 'rgba(120, 165, 255, 0.22)' : inPreview ? 'rgba(120, 165, 255, 0.08)' : 'transparent',
+            boxSizing: 'border-box',
+        }, children: [entry.inScene ? (_jsx("button", { type: "button", className: "qe-hover", title: inPreview ? 'Remove from stage preview' : 'Preview on stage (keep playing)', style: {
+                    flexShrink: 0,
+                    width: 28,
+                    border: 'none',
+                    borderRight: `1px solid ${theme.border}`,
+                    background: 'transparent',
+                    color: inPreview ? theme.accent : theme.textDim,
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 0,
+                }, 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
+                    ? `${entry.path} — in scene · Ctrl+click toggles preview`
+                    : `${entry.path} — drag into viewport`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    flex: 1,
+                    minWidth: 0,
+                    height: '100%',
+                    textAlign: 'left',
+                    border: 'none',
+                    background: 'transparent',
+                    color: focused ? theme.text : theme.textDim,
+                    padding: `0 12px 0 ${8 + depth * 14}px`,
+                    fontSize: 12.5,
+                    cursor: 'grab',
+                    fontFamily: theme.font,
+                }, onClick: (e) => {
+                    if ((e.ctrlKey || e.metaKey) && entry.inScene) {
+                        onTogglePreview(entry);
+                        return;
+                    }
+                    onFocus(entry);
+                }, onDragStart: (e) => beginGalleryDrag(e, { kind: 'effect', id: entry.root.uniqueId }), onDragEnd: endGalleryDrag, children: [_jsx("span", { style: { width: 14, flexShrink: 0, opacity: entry.inScene ? 1 : 0.35, color: entry.inScene ? theme.accent : theme.textDim, display: 'inline-flex' }, children: entry.inScene ? _jsx(SparklesIcon, { style: iconStyle(14) }) : _jsx(SparklesIcon, { style: iconStyle(14) }) }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: entry.name }), isLooping && (_jsx("span", { title: "Looping effect", style: { flexShrink: 0, fontSize: 11, color: theme.textDim }, children: "\u27F3" }))] })] }));
+}
+function FolderRow(props) {
+    const { node, depth, effectCount, open, onToggle } = props;
+    return (_jsxs("button", { type: "button", draggable: effectCount > 0, className: "qe-hover-bg", title: effectCount > 0
+            ? `${node.path} — drag ${effectCount} effect(s) into viewport`
+            : `${node.path} — empty folder`, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            width: '100%',
+            height: GALLERY_ROW_HEIGHT,
+            boxSizing: 'border-box',
+            textAlign: 'left',
+            border: 'none',
+            borderBottom: `1px solid ${theme.border}`,
+            background: 'transparent',
+            color: theme.textDim,
+            padding: `0 12px 0 ${12 + depth * 14}px`,
+            fontSize: 12,
+            fontWeight: 600,
+            cursor: effectCount > 0 ? 'grab' : 'pointer',
+            fontFamily: theme.font,
+        }, onClick: () => onToggle(node.path), onDragStart: (e) => {
+            if (effectCount === 0) {
+                e.preventDefault();
+                return;
+            }
+            beginGalleryDrag(e, { kind: 'folder', path: node.path });
+        }, onDragEnd: endGalleryDrag, children: [_jsx("span", { style: { width: 14, display: 'inline-flex', color: theme.textDim }, children: open ? _jsx(ChevronDownIcon, { style: iconStyle(12) }) : _jsx(ChevronRightIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { width: 14, display: 'inline-flex', color: theme.accent }, children: open ? _jsx(FolderOpenIcon, { style: iconStyle(14) }) : _jsx(FolderIcon, { style: iconStyle(14) }) }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: node.name }), effectCount > 0 && (_jsx("span", { style: { fontSize: 11, fontWeight: 500, color: theme.textDim, flexShrink: 0 }, children: effectCount }))] }));
+}
+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, onToggleFolder } = props;
+    const scrollRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => GALLERY_ROW_HEIGHT,
+        overscan: 10,
+    });
+    return (_jsx("div", { ref: scrollRef, style: {
+            flex: 1,
+            minHeight: 120,
+            overflowY: 'auto',
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            background: theme.sectionBg,
+        }, children: _jsx("div", { style: { height: virtualizer.getTotalSize(), position: 'relative', width: '100%' }, children: virtualizer.getVirtualItems().map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                const open = row.kind === 'folder' && !closedFolders.has(row.node.path);
+                return (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: virtualRow.size,
+                        transform: `translateY(${virtualRow.start}px)`,
+                    }, children: row.kind === 'folder' ? (_jsx(FolderRow, { node: row.node, depth: row.depth, effectCount: row.effectCount, open: open, onToggle: onToggleFolder })) : (_jsx(EffectRow, { entry: row.node.entry, depth: row.depth, focused: focusedRoot === row.node.entry.root, inPreview: previewRootIds.has(row.node.entry.root.uniqueId), onFocus: onFocus, onTogglePreview: onTogglePreview })) }, flatRowKey(row)));
+            }) }) }));
+}
+/** Folder-tree catalog; import effects here and drag them into the viewport. */
+export function GalleryPanel(props) {
+    const { entries, focusedRoot, previewRootIds, loading, folderInputRef, onFocus, onTogglePreview, onImportFiles, onImportFolder, onCreateDefault } = props;
+    const [query, setQuery] = useState('');
+    const [closedFolders, setClosedFolders] = useState(() => new Set());
+    const fileInputRef = useRef(null);
+    const tree = useMemo(() => buildGalleryTree(entries), [entries]);
+    const filtered = useMemo(() => filterGalleryTree(tree, query), [tree, query]);
+    const expandAll = query.trim().length > 0;
+    const flatRows = useMemo(() => flattenVisibleGalleryRows(filtered, closedFolders, expandAll), [filtered, closedFolders, expandAll]);
+    const inSceneCount = useMemo(() => entries.filter((entry) => entry.inScene).length, [entries]);
+    const previewCount = useMemo(() => entries.filter((entry) => entry.inScene && previewRootIds.has(entry.root.uniqueId)).length, [entries, previewRootIds]);
+    const isLoading = loading !== null;
+    const toggleFolder = useCallback((path) => {
+        setClosedFolders((prev) => {
+            const next = new Set(prev);
+            if (next.has(path)) {
+                next.delete(path);
+            }
+            else {
+                next.add(path);
+            }
+            return next;
+        });
+    }, []);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, height: '100%', minHeight: 0 }, children: [_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6 }, children: [_jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, disabled: isLoading, onClick: onCreateDefault, children: "New effect" }), _jsxs("label", { className: "qe-hover", style: {
+                            ...buttonStyle,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            cursor: isLoading ? 'not-allowed' : 'pointer',
+                            opacity: isLoading ? 0.5 : 1,
+                        }, children: ["Import effect", _jsx("input", { ref: fileInputRef, type: "file", multiple: true, disabled: isLoading, tabIndex: -1, style: hiddenFileInputStyle, onChange: (e) => {
+                                    // Snapshot before clearing — FileList is live and empties with value=''.
+                                    const files = Array.from(e.target.files ?? []);
+                                    e.target.value = '';
+                                    if (files.length === 0)
+                                        return;
+                                    onImportFiles(files);
+                                } })] }), _jsxs("label", { className: "qe-hover", style: {
+                            ...buttonStyle,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            cursor: isLoading ? 'not-allowed' : 'pointer',
+                            opacity: isLoading ? 0.5 : 1,
+                        }, onClick: (e) => {
+                            if (typeof window.showDirectoryPicker === 'function') {
+                                e.preventDefault();
+                                onImportFolder();
+                            }
+                        }, children: ["Import folder", _jsx("input", { ref: (el) => {
+                                    folderInputRef.current = el;
+                                    if (el) {
+                                        el.setAttribute('webkitdirectory', '');
+                                        el.setAttribute('directory', '');
+                                        el.multiple = true;
+                                    }
+                                }, type: "file", multiple: true, disabled: isLoading, tabIndex: -1, style: hiddenFileInputStyle, onChange: (e) => {
+                                    const files = Array.from(e.target.files ?? []);
+                                    e.target.value = '';
+                                    if (files.length === 0)
+                                        return;
+                                    onImportFiles(files);
+                                } })] })] }), _jsx("div", { style: { fontSize: 12, color: theme.textDim, lineHeight: 1.45 }, children: isLoading
+                    ? `Loading… ${loading.done} / ${loading.total || '…'} files`
+                    : `${previewCount} previewing · ${inSceneCount} in scene · ${entries.length} total` }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, lineHeight: 1.4 }, children: "Preview plays on stage \u00B7 Click = edit \u00B7 Checkbox or Ctrl+click toggles preview." }), _jsx("input", { className: "qe-hover", style: inputStyle, placeholder: "Filter by name or path\u2026", value: query, onChange: (e) => setQuery(e.target.value) }), entries.length === 0 && !isLoading ? (_jsxs("div", { style: {
+                    flex: 1,
+                    minHeight: 120,
+                    padding: '14px 12px',
+                    fontSize: 12,
+                    color: theme.textDim,
+                    lineHeight: 1.5,
+                    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: {
+                    flex: 1,
+                    minHeight: 120,
+                    padding: '10px 12px',
+                    fontSize: 12,
+                    color: theme.textDim,
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    background: theme.sectionBg,
+                }, children: "No matches." })) : (_jsx(VirtualGalleryTree, { rows: flatRows, closedFolders: closedFolders, focusedRoot: focusedRoot, previewRootIds: previewRootIds, onFocus: onFocus, onTogglePreview: onTogglePreview, onToggleFolder: toggleFolder }))] }));
+}

package/dist/react/InspectorInfoIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/** Small info icon with a themed inspector tooltip. */
+export declare function InspectorInfoIcon(props: {
+    content: string;
+    size?: number;
+    onClick?: (e: React.MouseEvent) => void;
+}): React.ReactElement;

package/dist/react/InspectorInfoIcon.js

@@ -0,0 +1,22 @@
+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';
+/** Small info icon with a themed inspector tooltip. */
+export function InspectorInfoIcon(props) {
+    const size = props.size ?? 13;
+    return (_jsx(Tooltip, { content: props.content, children: _jsx("span", { tabIndex: 0, role: "button", "aria-label": props.content, style: {
+                display: 'inline-flex',
+                flexShrink: 0,
+                color: theme.textDim,
+                cursor: 'help',
+                opacity: 0.85,
+                outline: 'none',
+            }, onClick: props.onClick, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, children: _jsx(InformationCircleIcon, { style: iconStyle(size) }) }) }));
+}

package/dist/react/InspectorLabel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/** Inspector row label with an optional info icon tooltip. */
+export declare function InspectorLabel(props: {
+    label: string;
+    hint?: string;
+    hintKey?: string;
+}): React.ReactElement | null;

package/dist/react/InspectorLabel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getInspectorHint } from './inspectorHints';
+import { InspectorInfoIcon } from './InspectorInfoIcon';
+import { labelStyle } from './theme';
+/** Inspector row label with an optional info icon tooltip. */
+export function InspectorLabel(props) {
+    if (!props.label) {
+        return null;
+    }
+    const tooltip = props.hint ?? getInspectorHint(props.hintKey ?? props.label);
+    return (_jsxs("span", { style: { ...labelStyle, display: 'inline-flex', alignItems: 'center', gap: 4, minWidth: 0 }, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: props.label }), tooltip ? _jsx(InspectorInfoIcon, { content: tooltip }) : null] }));
+}

package/dist/react/MessageDialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MessageDialogProps {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    onClose: () => void;
+}
+/** Modal for info and error messages — same chrome as PromptDialog, no text input. */
+export declare function MessageDialog(props: MessageDialogProps): React.ReactElement;

package/dist/react/MessageDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonStyle, theme } from './theme';
+/** Modal for info and error messages — same chrome as PromptDialog, no text input. */
+export function MessageDialog(props) {
+    const { title, message, confirmLabel = 'OK', onClose } = props;
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(3, 5, 12, 0.6)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            fontFamily: theme.font,
+        }, onClick: onClose, children: _jsxs("div", { style: {
+                background: theme.panelBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                padding: 16,
+                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 }) })] }) }));
+}

package/dist/react/ModuleSection.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 /** Unity-style module foldout with an optional enable checkbox. */
 export declare function ModuleSection(props: {
     title: string;
+    hint?: string;
+    hintKey?: string;
     children: React.ReactNode;
     enabled?: boolean;
     onToggle?: (enabled: boolean) => void;

package/dist/react/ModuleSection.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+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);
     const toggleable = props.onToggle !== undefined;
     const dimmed = toggleable && props.enabled === false;
+    const titleHint = props.hint ?? getInspectorHint(props.hintKey ?? props.title);
+    const objectHint = props.title.startsWith('Object — ') ? getInspectorHint('Object') : undefined;
+    const tooltip = titleHint ?? objectHint;
     return (_jsxs("section", { style: {
             border: `1px solid ${theme.border}`,
             borderRadius: 10,
@@ -20,5 +27,5 @@ 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, fontSize: 10, width: 10 }, children: open ? '▼' : '►' }), 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' } })), _jsx("span", { style: { color: dimmed ? theme.textDim : theme.text, fontSize: 13, fontWeight: 600 }, children: props.title })] }), 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

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

package/dist/react/ObjectModule.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { Quaternion } from '@babylonjs/core/Maths/math.vector';
+import { getTransformRevision, notifyTransformChanged, subscribeTransform } from '../core/transformStore';
+import { ModuleSection } from './ModuleSection';
+import { NumberField, Row } from './fields';
+const RAD_TO_DEG = 180 / Math.PI;
+const DEG_TO_RAD = Math.PI / 180;
+function getEulerDegrees(node) {
+    const euler = node.rotationQuaternion ? node.rotationQuaternion.toEulerAngles() : node.rotation;
+    return { x: euler.x * RAD_TO_DEG, y: euler.y * RAD_TO_DEG, z: euler.z * RAD_TO_DEG };
+}
+function setEulerDegreeAxis(node, axis, degrees) {
+    const euler = node.rotationQuaternion ? node.rotationQuaternion.toEulerAngles() : node.rotation.clone();
+    euler[axis] = degrees * DEG_TO_RAD;
+    if (node.rotationQuaternion) {
+        node.rotationQuaternion = Quaternion.FromEulerVector(euler);
+    }
+    else {
+        node.rotation = euler;
+    }
+}
+function AxisRow(props) {
+    return (_jsx(Row, { label: props.label, hintKey: props.hintKey, children: _jsxs("div", { style: { display: 'flex', gap: 4 }, children: [_jsx(NumberField, { value: props.values.x, step: props.step, onChange: (v) => props.onChange('x', v) }), _jsx(NumberField, { value: props.values.y, step: props.step, onChange: (v) => props.onChange('y', v) }), _jsx(NumberField, { value: props.values.z, step: props.step, onChange: (v) => props.onChange('z', v) })] }) }));
+}
+export function ObjectModule(props) {
+    useSyncExternalStore(subscribeTransform, getTransformRevision);
+    const { node } = props;
+    const euler = getEulerDegrees(node);
+    return (_jsxs(ModuleSection, { title: `Object — ${props.label}`, children: [_jsx(AxisRow, { label: "Position", values: { x: node.position.x, y: node.position.y, z: node.position.z }, step: 0.1, onChange: (axis, v) => {
+                    node.position[axis] = v;
+                    notifyTransformChanged();
+                } }), _jsx(AxisRow, { label: "Rotation", values: euler, step: 1, onChange: (axis, v) => {
+                    setEulerDegreeAxis(node, axis, v);
+                    notifyTransformChanged();
+                } }), _jsx(AxisRow, { label: "Scale", values: { x: node.scaling.x, y: node.scaling.y, z: node.scaling.z }, step: 0.1, onChange: (axis, v) => {
+                    node.scaling[axis] = v;
+                    notifyTransformChanged();
+                } })] }));
+}

package/dist/react/TimelinePanel.d.ts

@@ -1,32 +1,28 @@
 import React from 'react';
-import type { ParticleSystem, BatchedRenderer } from 'babylon.quarks';
 import type { Scene } from '@babylonjs/core/scene';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import type { EffectBinding } from '../core/binding';
-export interface PlaybackState {
-    paused: boolean;
-    speed: number;
-    stepQueued: boolean;
-    elapsed: number;
-    scrubbing: boolean;
-}
+import { type PlaybackState } from '../core/playback';
+export type { PlaybackState } from '../core/playback';
 export interface TimelinePanelProps {
     binding: EffectBinding;
-    selectedSystem: ParticleSystem;
-    onSelect: (system: ParticleSystem) => void;
+    selectedNode: TransformNode | null;
+    onSelectNode: (node: TransformNode | null) => void;
     scene: Scene;
-    renderer: BatchedRenderer;
     playbackRef: React.MutableRefObject<PlaybackState>;
     playheadRef: React.RefObject<HTMLDivElement>;
     counterRef: React.RefObject<HTMLSpanElement>;
-    paused: boolean;
-    setPaused: (paused: boolean) => void;
+    stagePlaying: boolean;
+    setStagePlaying: (playing: boolean) => void;
     speed: number;
     setSpeed: (speed: number) => void;
+    /** False when a catalog entry is selected but not yet dropped into the viewport. */
+    playbackEnabled?: boolean;
 }
 /** Small gap between the label column and the first pixel of the time axis. */
 export declare const TIMELINE_INSET = 10;
 /**
- * Bottom-docked, Premiere/Resolve-style timeline: transport controls, a time ruler with a
- * draggable playhead (approximate scrub — see core/scrub.ts), and one track row per system.
+ * Bottom-docked timeline: stage Play/Pause drives all preview effects; playhead/scrub/restart
+ * apply only to the focused effect without stopping other previews.
  */
 export declare function TimelinePanel(props: TimelinePanelProps): React.ReactElement;