babylon.quarks-editor 0.27.0 → 0.29.0

package/dist/react/host/SceneSidebar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon } from '@heroicons/react/24/solid';
+import { EffectTreeView } from '../EffectTreeView.js';
+import { iconStyle } from '../icons.js';
+import { ScenePanel } from '../ScenePanel.js';
+import { buttonStyle, theme } from '../theme.js';
+import { dockIconButtonStyle, saveButtonStyle, SCENE_PANEL_WIDTH } from './hostStyles.js';
+/** The editor's left column: the project header, then the Scene list or the open prefab. */
+export function SceneSidebar(props) {
+    const { prefabInfo, prefabDirty, entries } = props;
+    return (_jsxs("aside", { style: {
+            width: SCENE_PANEL_WIDTH,
+            flexShrink: 0,
+            borderRight: `1px solid ${theme.border}`,
+            background: theme.panelBg,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+        }, children: [props.projectName !== undefined && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '8px 10px',
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [props.canExitProject && (_jsx("button", { type: "button", className: "qe-hover", title: "Back to projects", style: { ...dockIconButtonStyle, width: 26, height: 26 }, onClick: props.onExitProject, children: _jsx(ArrowLeftIcon, { style: iconStyle(13) }) })), _jsxs("span", { title: props.projectName, style: {
+                            flex: 1,
+                            minWidth: 0,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: [props.projectName, props.sceneDirty ? ' *' : ''] }), _jsx("button", { type: "button", className: "qe-hover", title: "Save the scene (Ctrl+S) \u2014 assets are not changed", disabled: props.projectLoading, style: saveButtonStyle(props.sceneDirty, '4px 12px'), onClick: props.onSave, children: "Save" })] })), _jsxs("div", { style: { padding: '12px 14px 10px', borderBottom: `1px solid ${theme.border}` }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: prefabInfo ? 'Prefab' : `Scene${entries.length > 0 ? ` · ${entries.length}` : ''}` }), _jsx("div", { style: { fontSize: 11, color: theme.textDim, marginTop: 4, lineHeight: 1.4 }, children: prefabInfo
+                            ? 'The scene is set aside while you edit this asset'
+                            : 'Effects in the viewport · click to edit · eye shows/hides' })] }), _jsx("div", { style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: 'hidden',
+                    padding: '8px 12px 14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: prefabInfo ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, flex: 1, minHeight: 0 }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 10,
+                                padding: 12,
+                                border: `1px solid ${theme.borderActive}`,
+                                borderRadius: 8,
+                                background: 'rgba(120, 165, 255, 0.08)',
+                                fontSize: 12,
+                                color: theme.textDim,
+                                lineHeight: 1.5,
+                            }, children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: [prefabInfo.name, prefabDirty ? ' *' : ''] }), _jsx("div", { style: { wordBreak: 'break-all' }, children: prefabInfo.path }), _jsx("div", { children: "Save (Ctrl+S) overwrites this asset. Effects already placed in the scene keep their own copy and do not change." }), _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: props.onExitPrefab, children: "\u2190 Scene" }), _jsx("button", { type: "button", className: "qe-hover", style: buttonStyle, onClick: props.onSavePrefab, children: "Save prefab" })] })] }), entries[0] && (_jsx("div", { style: {
+                                flex: 1,
+                                minHeight: 0,
+                                overflowY: 'auto',
+                                border: `1px solid ${theme.border}`,
+                                borderRadius: 8,
+                                background: theme.sectionBg,
+                                padding: '4px 0',
+                            }, children: _jsx(EffectTreeView, { includeRoot: true, root: entries[0].root, selectedNode: props.selectedNode, onSelect: (node) => props.onSelectNode(null, node) }) }))] })) : (_jsx(ScenePanel, { entries: entries, focusedRoot: props.focusedRoot, visibleRootIds: props.visibleRootIds, onFocus: props.onFocus, onToggleVisible: props.onToggleVisible, soloRootId: props.soloRootId, onToggleSolo: props.onToggleSolo, onSaveAsAsset: props.onSaveAsAsset, onDelete: props.onDelete, onCreateDefault: props.onCreateDefault, selectedNode: props.selectedNode, onSelectNode: props.onSelectNode })) })] }));
+}

package/dist/react/host/ViewportPane.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { AssetLoadProgress } from '../../core/assets.js';
+import type { PrefabInfo } from '../../core/editorSession.js';
+/** What the stage gizmo does: nothing, or move, rotate or scale the selected node. */
+export type GizmoMode = 'none' | 'position' | 'rotation' | 'scale';
+/** Props of {@link ViewportPane}. */
+export interface ViewportPaneProps {
+    /** The canvas the engine draws into. */
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    /** The render loop writes the frame rate here. */
+    fpsRef: React.RefObject<HTMLSpanElement | null>;
+    /** Pixels at the bottom covered by the floating Assets drawer. */
+    inset: number;
+    /** The transport bar, once the scene exists. */
+    transport: React.ReactNode;
+    /** The asset drag hovering the viewport, if any. */
+    dragHover: {
+        label: string;
+        count: number;
+    } | null;
+    /** Asset import progress, while importing. */
+    assetsLoading: AssetLoadProgress | null;
+    /** The open prefab, if any. */
+    prefabInfo: PrefabInfo | null;
+    /** The open prefab has unsaved edits. */
+    prefabDirty: boolean;
+    /** Link shown in the top-left corner, outside prefab mode. */
+    backLink?: {
+        href: string;
+        label: string;
+    };
+    /** Undo is possible. */
+    canUndo: boolean;
+    /** Redo is possible. */
+    canRedo: boolean;
+    /** An effect is focused. */
+    hasFocus: boolean;
+    /** The stage gizmo's mode. */
+    gizmoMode: GizmoMode;
+    /** Emitter shape wireframes are shown. */
+    showWireframes: boolean;
+    /** Drag handlers of the viewport, for assets dropped from the drawer. */
+    dragHandlers: Pick<React.HTMLAttributes<HTMLDivElement>, 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDrop'>;
+    /** Undo (`false`) or redo. */
+    onHistoryStep(redo: boolean): void;
+    /** Pick the stage gizmo's mode. */
+    onGizmoMode(mode: GizmoMode): void;
+    /** Show or hide the emitter wireframes. */
+    onToggleWireframes(): void;
+    /** Back from the prefab to the scene. */
+    onExitPrefab(): void;
+    /** Save the open prefab. */
+    onSavePrefab(): void;
+}
+/** The 3D viewport and what floats over it: toolbars, transport, drag and import feedback. */
+export declare function ViewportPane({ canvasRef, fpsRef, inset, transport, dragHover, assetsLoading, prefabInfo, prefabDirty, backLink, canUndo, canRedo, hasFocus, gizmoMode, showWireframes, dragHandlers, onHistoryStep, onGizmoMode, onToggleWireframes, onExitPrefab, onSavePrefab, }: ViewportPaneProps): React.ReactElement;

package/dist/react/host/ViewportPane.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, ArrowPathIcon, ArrowsPointingOutIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, CubeTransparentIcon, CursorArrowRaysIcon, Square2StackIcon, } from '@heroicons/react/24/solid';
+import { iconStyle } from '../icons.js';
+import { buttonStyle, theme } from '../theme.js';
+import { activeSquareButtonStyle, floatingPanelStyle, saveButtonStyle, squareButtonStyle } from './hostStyles.js';
+const GIZMO_MODE_BUTTONS = [
+    { value: 'none', Icon: CursorArrowRaysIcon, title: 'Select (hide stage gizmo)' },
+    { value: 'position', Icon: ArrowsPointingOutIcon, title: 'Move the stage node (position)' },
+    { value: 'rotation', Icon: ArrowPathIcon, title: 'Rotate the stage node' },
+    { value: 'scale', Icon: Square2StackIcon, title: 'Scale the stage node' },
+];
+/** The 3D viewport and what floats over it: toolbars, transport, drag and import feedback. */
+export function ViewportPane({ canvasRef, fpsRef, inset, transport, dragHover, assetsLoading, prefabInfo, prefabDirty, backLink, canUndo, canRedo, hasFocus, gizmoMode, showWireframes, dragHandlers, onHistoryStep, onGizmoMode, onToggleWireframes, onExitPrefab, onSavePrefab, }) {
+    return (_jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, ...dragHandlers, children: [_jsx("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block', touchAction: 'none', outline: 'none' } }), _jsx("div", { style: {
+                    ...floatingPanelStyle,
+                    position: 'absolute',
+                    bottom: 12 + inset,
+                    left: 12,
+                    padding: '4px 10px',
+                    fontSize: 12,
+                    color: theme.textDim,
+                    fontVariantNumeric: 'tabular-nums',
+                    pointerEvents: 'none',
+                    fontFamily: theme.font,
+                }, children: _jsx("span", { ref: fpsRef, children: "\u2014 FPS" }) }), transport && (_jsx("div", { style: { position: 'absolute', bottom: 12 + inset, left: '50%', transform: 'translateX(-50%)' }, children: transport })), dragHover && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 10,
+                    border: '2px dashed rgba(120, 165, 255, 0.75)',
+                    borderRadius: 12,
+                    pointerEvents: 'none',
+                    boxShadow: 'inset 0 0 0 1px rgba(120, 165, 255, 0.15)',
+                }, children: _jsxs("div", { style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: 18,
+                        transform: 'translateX(-50%)',
+                        background: 'rgba(7, 11, 22, 0.88)',
+                        border: `1px solid ${theme.border}`,
+                        borderRadius: 8,
+                        padding: '8px 14px',
+                        fontSize: 13,
+                        color: theme.text,
+                        whiteSpace: 'nowrap',
+                    }, children: ["Drop ", dragHover.count === 1 ? 'effect' : `${dragHover.count} effects`, " \u2014 ", dragHover.label] }) })), assetsLoading && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(7, 11, 22, 0.72)',
+                    pointerEvents: 'none',
+                }, children: _jsxs("div", { style: { ...floatingPanelStyle, borderRadius: 10, padding: '16px 22px', textAlign: 'center' }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Importing assets\u2026" }), _jsxs("div", { style: { fontSize: 13, color: theme.textDim }, children: [assetsLoading.done, " / ", assetsLoading.total || '…', " files", assetsLoading.failed > 0 ? ` · ${assetsLoading.failed} skipped` : ''] })] }) })), prefabInfo && (_jsxs("div", { style: {
+                    ...floatingPanelStyle,
+                    position: 'absolute',
+                    top: 12,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '4px 4px 4px 6px',
+                    border: `1px solid ${theme.borderActive}`,
+                    fontSize: 12.5,
+                    zIndex: 5,
+                }, children: [_jsx("button", { type: "button", className: "qe-hover", title: "Back to the scene", style: { ...buttonStyle, padding: '3px 10px' }, onClick: onExitPrefab, children: "\u2190 Scene" }), _jsx("span", { style: { color: theme.textDim }, children: "\u203A" }), _jsxs("span", { style: { fontWeight: 600, whiteSpace: 'nowrap' }, children: [prefabInfo.name, prefabDirty ? ' *' : ''] }), _jsx("button", { type: "button", className: "qe-hover", title: "Overwrite the prefab asset (Ctrl+S)", style: saveButtonStyle(prefabDirty, '3px 12px'), onClick: onSavePrefab, children: "Save" })] })), backLink && !prefabInfo && (_jsxs("a", { className: "qe-hover", href: backLink.href, style: {
+                    ...floatingPanelStyle,
+                    position: 'absolute',
+                    top: 12,
+                    left: 12,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '6px 12px',
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: theme.text,
+                    textDecoration: 'none',
+                    fontFamily: theme.font,
+                }, children: [_jsx(ArrowLeftIcon, { style: iconStyle(14) }), 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: { ...floatingPanelStyle, display: 'flex', gap: 4, padding: 4 }, children: [_jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Undo (Ctrl+Z)", disabled: !canUndo || !hasFocus, onClick: () => onHistoryStep(false), children: _jsx(ArrowUturnLeftIcon, { style: iconStyle(14) }) }), _jsx("button", { className: "qe-hover", style: squareButtonStyle, title: "Redo (Ctrl+Shift+Z)", disabled: !canRedo || !hasFocus, onClick: () => onHistoryStep(true), children: _jsx(ArrowUturnRightIcon, { style: iconStyle(14) }) })] }), _jsx("div", { style: { ...floatingPanelStyle, display: 'flex', flexDirection: 'column', gap: 4, padding: 4 }, children: GIZMO_MODE_BUTTONS.map((m) => (_jsx("button", { className: "qe-hover", style: {
+                                ...squareButtonStyle,
+                                ...(gizmoMode === m.value ? activeSquareButtonStyle : {}),
+                            }, title: m.title, onClick: () => onGizmoMode(m.value), children: _jsx(m.Icon, { style: iconStyle(14) }) }, m.value))) }), _jsx("div", { style: { ...floatingPanelStyle, display: 'flex', flexDirection: 'column', gap: 4, padding: 4 }, children: _jsx("button", { className: "qe-hover", style: { ...squareButtonStyle, ...(showWireframes ? activeSquareButtonStyle : {}) }, title: "Show emitter shape wireframes", disabled: !hasFocus, onClick: onToggleWireframes, children: _jsx(CubeTransparentIcon, { style: iconStyle(14) }) }) })] })] }));
+}

package/dist/react/host/hostHooks.d.ts

@@ -0,0 +1,44 @@
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import type { EditorSession } from '../../core/editorSession.js';
+import type { GizmoMode } from './ViewportPane.js';
+/** True for a field that takes typed text, where editor shortcuts stay out of the way. */
+export declare function isTextInput(target: EventTarget | null): boolean;
+/**
+ * Inspector value controls (numbers, checkboxes, selects): Ctrl+Z there means the effect's undo,
+ * not the browser's per-field text undo. Free-text inputs (names, filters) keep the native one.
+ */
+export declare function isInspectorValueControl(target: EventTarget | null): boolean;
+/** What the editor's keyboard shortcuts do. */
+export interface HostShortcuts {
+    /** Ctrl+S: save the scene, or ask about the open prefab. */
+    save(): void;
+    /** Ctrl+Space: open or close the Assets drawer. */
+    toggleAssets(): void;
+    /** Space: play or pause the stage. */
+    togglePlayback(): void;
+    /** Escape: close the floating Assets drawer. */
+    closeDrawer(): void;
+    /** Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z. */
+    historyStep(redo: boolean): void;
+    /** Delete: remove the focused effect; returns whether it did. */
+    deleteFocused(): boolean;
+}
+/** Handles a keydown on the editor's window; exported for tests. */
+export declare function handleHostShortcut(e: KeyboardEvent, shortcuts: HostShortcuts): void;
+/** Installs the editor's keyboard shortcuts on the window; the latest `shortcuts` are always used. */
+export declare function useHostShortcuts(shortcuts: HostShortcuts): void;
+/**
+ * Puts the stage gizmo in `mode` and attaches it to `target`, leaving it where it is while
+ * `paused`. One gizmo drag is one undo step: the binding snapshots at drag start, and the UI
+ * refreshes at most once a frame while dragging.
+ */
+export declare function useStageGizmo(session: EditorSession | null, mode: GizmoMode, target: TransformNode | null, paused: boolean): void;
+/**
+ * The floating drawer is opaque, so the scene renders only in the part of the viewport above it:
+ * the view, and every "frame this effect" camera move, re-centres on what is visible. Measured
+ * again when the drawer floats or docks and when the timeline collapses. Returns the pixels the
+ * drawer covers.
+ */
+export declare function useViewportInset(session: EditorSession | null, canvasRef: React.RefObject<HTMLCanvasElement | null>, areaRef: React.RefObject<HTMLDivElement | null>, drawerFloating: boolean, timelineCollapsed: boolean): number;
+/** Asks before the page unloads while `dirty`. */
+export declare function useUnsavedChangesGuard(dirty: boolean): void;

package/dist/react/host/hostHooks.js

@@ -0,0 +1,164 @@
+import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
+import { useEffect, useRef, useState } from 'react';
+import { notifyTransformChanged } from '../../core/transformStore.js';
+import { DRAWER_HEIGHT } from './hostStyles.js';
+/** True for a field that takes typed text, where editor shortcuts stay out of the way. */
+export function isTextInput(target) {
+    const el = target;
+    return !!el && (el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName));
+}
+/**
+ * Inspector value controls (numbers, checkboxes, selects): Ctrl+Z there means the effect's undo,
+ * not the browser's per-field text undo. Free-text inputs (names, filters) keep the native one.
+ */
+export function isInspectorValueControl(target) {
+    const el = target;
+    if (!el)
+        return false;
+    if (el.tagName === 'SELECT')
+        return true;
+    return el.tagName === 'INPUT' && ['number', 'checkbox', 'range', 'color'].includes(el.type);
+}
+/** Handles a keydown on the editor's window; exported for tests. */
+export function handleHostShortcut(e, shortcuts) {
+    const key = e.key.toLowerCase();
+    const command = e.ctrlKey || e.metaKey;
+    if (command && key === 's') {
+        e.preventDefault();
+        shortcuts.save();
+        return;
+    }
+    if (e.code === 'Space' && command) {
+        e.preventDefault();
+        shortcuts.toggleAssets();
+        return;
+    }
+    const target = e.target;
+    if (e.code === 'Space' && !isTextInput(target) && target?.tagName !== 'BUTTON') {
+        e.preventDefault();
+        shortcuts.togglePlayback();
+        return;
+    }
+    if (e.key === 'Escape') {
+        shortcuts.closeDrawer();
+    }
+    if (command && (key === 'z' || key === 'y')) {
+        if (isTextInput(e.target) && !isInspectorValueControl(e.target)) {
+            return;
+        }
+        e.preventDefault();
+        // Leave the field first so it shows the restored value instead of its draft text.
+        e.target?.blur?.();
+        shortcuts.historyStep(key === 'y' || e.shiftKey);
+        return;
+    }
+    if (e.key === 'Delete' && !isTextInput(e.target) && shortcuts.deleteFocused()) {
+        e.preventDefault();
+    }
+}
+/** Installs the editor's keyboard shortcuts on the window; the latest `shortcuts` are always used. */
+export function useHostShortcuts(shortcuts) {
+    const ref = useRef(shortcuts);
+    ref.current = shortcuts;
+    useEffect(() => {
+        const onKey = (e) => handleHostShortcut(e, ref.current);
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+}
+/**
+ * Puts the stage gizmo in `mode` and attaches it to `target`, leaving it where it is while
+ * `paused`. One gizmo drag is one undo step: the binding snapshots at drag start, and the UI
+ * refreshes at most once a frame while dragging.
+ */
+export function useStageGizmo(session, mode, target, paused) {
+    useEffect(() => {
+        const gm = session?.gizmoManager;
+        if (!gm)
+            return;
+        gm.positionGizmoEnabled = mode === 'position';
+        gm.rotationGizmoEnabled = mode === 'rotation';
+        gm.scaleGizmoEnabled = mode === 'scale';
+        const activeGizmo = mode === 'position'
+            ? gm.gizmos.positionGizmo
+            : mode === 'rotation'
+                ? gm.gizmos.rotationGizmo
+                : mode === 'scale'
+                    ? gm.gizmos.scaleGizmo
+                    : null;
+        let dragRaf = 0;
+        const scheduleTransformRefresh = () => {
+            if (dragRaf !== 0) {
+                return;
+            }
+            dragRaf = requestAnimationFrame(() => {
+                dragRaf = 0;
+                notifyTransformChanged();
+            });
+        };
+        const dragStartObserver = activeGizmo?.onDragStartObservable.add(() => session.binding?.onBeforeChange?.());
+        const dragObserver = activeGizmo?.onDragObservable.add(scheduleTransformRefresh);
+        const dragEndObserver = activeGizmo?.onDragEndObservable.add(() => {
+            notifyTransformChanged();
+            session.binding?.markChanged();
+        });
+        return () => {
+            if (dragRaf !== 0) {
+                cancelAnimationFrame(dragRaf);
+            }
+            if (activeGizmo) {
+                activeGizmo.onDragStartObservable.remove(dragStartObserver ?? null);
+                activeGizmo.onDragObservable.remove(dragObserver ?? null);
+                activeGizmo.onDragEndObservable.remove(dragEndObserver ?? null);
+            }
+        };
+    }, [session, mode]);
+    useEffect(() => {
+        if (!paused) {
+            session?.gizmoManager.attachToNode(target);
+        }
+    }, [session, target, paused]);
+}
+/**
+ * The floating drawer is opaque, so the scene renders only in the part of the viewport above it:
+ * the view, and every "frame this effect" camera move, re-centres on what is visible. Measured
+ * again when the drawer floats or docks and when the timeline collapses. Returns the pixels the
+ * drawer covers.
+ */
+export function useViewportInset(session, canvasRef, areaRef, drawerFloating, timelineCollapsed) {
+    const [inset, setInset] = useState(0);
+    useEffect(() => {
+        const update = () => {
+            const camera = session?.camera;
+            const canvas = canvasRef.current;
+            const area = areaRef.current;
+            if (!camera || !canvas || !area)
+                return;
+            const canvasRect = canvas.getBoundingClientRect();
+            const drawerTop = area.getBoundingClientRect().bottom - DRAWER_HEIGHT;
+            const covered = drawerFloating
+                ? Math.max(0, Math.min(canvasRect.height * 0.8, canvasRect.bottom - drawerTop))
+                : 0;
+            const fraction = canvasRect.height > 0 ? covered / canvasRect.height : 0;
+            camera.viewport = new Viewport(0, fraction, 1, 1 - fraction);
+            setInset(covered);
+        };
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [session, canvasRef, areaRef, drawerFloating, timelineCollapsed]);
+    return inset;
+}
+/** Asks before the page unloads while `dirty`. */
+export function useUnsavedChangesGuard(dirty) {
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const onBeforeUnload = (e) => {
+            e.preventDefault();
+            e.returnValue = '';
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    }, [dirty]);
+}

package/dist/react/host/hostStyles.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+/** Width of the Scene list on the left. */
+export declare const SCENE_PANEL_WIDTH = 280;
+/** Width of the inspector on the right. */
+export declare const INSPECTOR_WIDTH = 340;
+/** Height of the timeline dock when expanded. */
+export declare const TIMELINE_HEIGHT = 200;
+/** Height of the Assets drawer. */
+export declare const DRAWER_HEIGHT = 280;
+/** A square icon button of the viewport toolbars. */
+export declare const squareButtonStyle: React.CSSProperties;
+/** Added to a toolbar button that is switched on. */
+export declare const activeSquareButtonStyle: React.CSSProperties;
+/** Title of a dock (Assets, Timeline). */
+export declare const dockTitleStyle: React.CSSProperties;
+/** A small icon button in a dock's header. */
+export declare const dockIconButtonStyle: React.CSSProperties;
+/** A floating panel over the viewport. */
+export declare const floatingPanelStyle: React.CSSProperties;
+/** A Save button, highlighted while there is something to save. */
+export declare function saveButtonStyle(pending: boolean, padding: string): React.CSSProperties;

package/dist/react/host/hostStyles.js

@@ -0,0 +1,57 @@
+import { buttonStyle, theme } from '../theme.js';
+/** Width of the Scene list on the left. */
+export const SCENE_PANEL_WIDTH = 280;
+/** Width of the inspector on the right. */
+export const INSPECTOR_WIDTH = 340;
+/** Height of the timeline dock when expanded. */
+export const TIMELINE_HEIGHT = 200;
+/** Height of the Assets drawer. */
+export const DRAWER_HEIGHT = 280;
+/** A square icon button of the viewport toolbars. */
+export const squareButtonStyle = {
+    ...buttonStyle,
+    width: 28,
+    height: 28,
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 700,
+};
+/** Added to a toolbar button that is switched on. */
+export const activeSquareButtonStyle = {
+    border: `1px solid ${theme.borderActive}`,
+    background: 'rgba(120, 165, 255, 0.35)',
+};
+/** Title of a dock (Assets, Timeline). */
+export const dockTitleStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+    color: theme.text,
+};
+/** A small icon button in a dock's header. */
+export const dockIconButtonStyle = {
+    ...buttonStyle,
+    width: 24,
+    height: 22,
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+/** A floating panel over the viewport. */
+export const floatingPanelStyle = {
+    background: theme.panelBg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: 8,
+};
+/** A Save button, highlighted while there is something to save. */
+export function saveButtonStyle(pending, padding) {
+    return {
+        ...buttonStyle,
+        padding,
+        ...(pending ? { background: theme.accent, color: '#0a1128', border: `1px solid ${theme.accent}` } : {}),
+    };
+}

package/dist/react/index.d.ts

@@ -11,7 +11,7 @@ export type { EditorWorkspaceProps } from './EditorWorkspace.js';
 export { EffectEditor } from './EffectEditor.js';
 export type { EffectEditorProps } from './EffectEditor.js';
 export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost.js';
-export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost.js';
+export type { EditorProject, EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost.js';
 export { EffectTreeView } from './EffectTreeView.js';
 export type { EffectTreeViewProps } from './EffectTreeView.js';
 export { CheckboxField, NumberField, Row, SelectField } from './fields.js';
@@ -21,6 +21,7 @@ export type { MessageDialogProps } from './MessageDialog.js';
 export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules.js';
 export type { GeometryData, GeometryOption, TextureOption } from './modules.js';
 export { ModuleSection } from './ModuleSection.js';
+export type { ModuleProps } from './ModuleSection.js';
 export { ProjectsPage } from './ProjectsPage.js';
 export type { ProjectsPageProps } from './ProjectsPage.js';
 export { PromptDialog } from './PromptDialog.js';
@@ -38,3 +39,4 @@ export type { TimelineTrackRowProps } from './TimelineTrackRow.js';
 export { TransportBar } from './TransportBar.js';
 export type { TransportBarProps } from './TransportBar.js';
 export { ValueField } from './ValueField.js';
+export type { ConstantValueFieldProps, CurveValueFieldProps } from './ValueField.js';

package/dist/react/inspectorHints.js

@@ -31,7 +31,7 @@ const INSPECTOR_HINTS = {
     Duration: 'How long the particle system runs before stopping (non-looping) or one loop cycle.',
     Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
     'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
-    'Scaling mode': 'What the emitter’s scale does to a world-space system: only the shape and sizes, or speeds and forces too (Unity’s Scaling Mode).',
+    'Scaling mode': 'Which scale reaches the effect (Unity’s Scaling Mode): Local, the emitter’s own; Hierarchy, its parents’ too; Shape, the whole scale on the emission shape alone.',
     Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
     'Warm-up time': 'Seconds of the cycle simulated before the first frame of a looping system (Niagara’s Warmup Time); 0 warms up a whole cycle, as Unity does.',
     'Start delay': 'Wait time before emission starts after play or restart.',

package/dist/react/modules.d.ts

@@ -1,15 +1,21 @@
+import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
 import React from 'react';
-import { EffectBinding } from '../core/binding.js';
-interface ModuleProps {
-    binding: EffectBinding;
-}
+import { type ModuleProps } from './ModuleSection.js';
+/** The Main module (Unity's main module): duration, looping, start delay, life, speed, size, rotation and colour. */
 export declare function MainModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Emission module (Unity's Emission): rate over time and distance, and bursts. */
 export declare function EmissionModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Shape module (Unity's Shape): the emitter shape and its settings. */
 export declare function ShapeModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Size over Lifetime module (Unity's Size over Lifetime): size by a curve over the particle's life. */
 export declare function SizeOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** The Color over Lifetime module (Unity's Color over Lifetime): a gradient over the particle's life. */
 export declare function ColorOverLifeModule({ binding }: ModuleProps): React.JSX.Element;
+/** A texture preset the host offers in the Renderer module's texture menus. */
 export interface TextureOption {
+    /** Its label in the menu. */
     label: string;
+    /** The URL the host's texture loader receives. */
     url: string;
 }
 /**
@@ -18,20 +24,25 @@ export interface TextureOption {
  * them into the system's instancing geometry.
  */
 export interface GeometryOption {
+    /** Its label in the menu. */
     label: string;
+    /** Vertex positions, three values per vertex. */
     positions: Float32Array | number[];
+    /** Triangle indices; without them the vertices are drawn in sequence. */
     indices?: Uint32Array | number[];
+    /** The first UV set, two values per vertex; without it the mesh samples UV (0, 0). */
     uvs?: Float32Array | number[];
     /** A second UV set (glTF `TEXCOORD_1`), what textures on UV channel 1 read on the mesh. */
     uvs2?: Float32Array | number[];
+    /** Vertex normals, three values per vertex; without them lighting uses +Z. */
     normals?: Float32Array | number[];
 }
 /** Vertex buffers a host loader (e.g. a GLB importer) returns for the Mesh render mode. */
 export type GeometryData = Omit<GeometryOption, 'label'>;
+/** The Renderer module (Unity's Renderer): render mode, material, textures, sorting and mesh settings. */
 export declare function RendererModule({ binding, textureOptions, geometryOptions, resolveTexture, resolveGeometry, }: ModuleProps & {
     textureOptions?: TextureOption[];
     geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string) => unknown;
+    resolveTexture?: (url: string) => Texture | null | undefined;
     resolveGeometry?: (file: File) => Promise<GeometryData>;
 }): React.JSX.Element;
-export {};