babylon.quarks-editor 0.27.0 → 0.28.0

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/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 {};

package/dist/react/modules.js

@@ -99,17 +99,19 @@ function ColorInput(props) {
                     cursor: 'pointer',
                 } }), _jsx(NumberField, { value: value.w, min: 0, step: 0.05, onChange: (a) => onChange(new Vector4(value.x, value.y, value.z, Math.min(1, a))) })] }));
 }
+/** The Main module (Unity's main module): duration, looping, start delay, life, speed, size, rotation and colour. */
 export function MainModule({ binding }) {
     const system = binding.system;
     const startColor = system.startColor;
     const colorMode = startColor instanceof RandomColor ? 'random' : startColor instanceof ColorRange ? 'range' : 'constant';
-    const twoColors = startColor instanceof RandomColor || startColor instanceof ColorRange;
-    const colorA = twoColors
-        ? startColor.a
+    const twoColor = startColor instanceof RandomColor || startColor instanceof ColorRange ? startColor : null;
+    const colorA = twoColor
+        ? twoColor.a
         : startColor instanceof ConstantColor
             ? startColor.color
             : new Vector4(1, 1, 1, 1);
-    const colorB = twoColors ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const colorB = twoColor ? twoColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const twoColors = twoColor !== null;
     /** The two-colour generator of the current mode. */
     const makeTwoColors = (a, b) => colorMode === 'range' ? new ColorRange(a, b) : new RandomColor(a, b);
     const rotation = system.startRotation;
@@ -135,8 +137,7 @@ export function MainModule({ binding }) {
         const cur = s.startRotation;
         s.startRotation = new EulerGenerator(axis === 'x' ? new ConstantValue(v) : cur.angleX, axis === 'y' ? new ConstantValue(v) : cur.angleY, axis === 'z' ? new ConstantValue(v) : cur.angleZ);
     });
-    const startSize = system.startSize;
-    const size3D = startSize.type === 'vec3function';
+    const startSize3D = system.startSize instanceof Vector3Function ? system.startSize : null;
     const colorGenMode = startColor instanceof RandomColorBetweenGradient
         ? 'gradient2'
         : startColor instanceof Gradient
@@ -152,20 +153,20 @@ export function MainModule({ binding }) {
                     ], onChange: (mode) => binding.apply((s) => (s.cullingMode = mode)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                     s.startDelay = g;
                     s.restart();
-                }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: size3D ? '3d' : 'uniform', options: [
+                }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: startSize3D ? '3d' : 'uniform', options: [
                         { value: 'uniform', label: 'Uniform' },
                         { value: '3d', label: '3D (per axis)' },
                     ], onChange: (mode) => binding.apply((s) => {
                         const cur = s.startSize;
-                        if (mode === '3d') {
+                        if (mode === '3d' && cur.type !== 'vec3function') {
                             // Seed all three axes from the current uniform generator.
                             s.startSize = new Vector3Function(cur.clone(), cur.clone(), cur.clone());
                         }
-                        else {
+                        else if (mode !== '3d' && cur instanceof Vector3Function) {
                             // Collapse back to the X-axis generator.
-                            s.startSize = s.startSize.x;
+                            s.startSize = cur.x;
                         }
-                    }) }) }), !size3D && (_jsx(ValueField, { label: "", generator: system.startSize, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => (s.startSize = g)) })), size3D && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(ValueField, { label: axis.toUpperCase(), generator: startSize[axis], min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+                    }) }) }), !startSize3D && (_jsx(ValueField, { label: "", generator: system.startSize, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => (s.startSize = g)) })), startSize3D && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(ValueField, { label: axis.toUpperCase(), generator: startSize3D[axis], min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                         const cur = s.startSize;
                         s.startSize = new Vector3Function(axis === 'x' ? g : cur.x, axis === 'y' ? g : cur.y, axis === 'z' ? g : cur.z);
                     }) }, axis))) })), _jsx(Row, { label: "Start color", children: _jsx(SelectField, { value: colorGenMode, options: [
@@ -221,6 +222,7 @@ export function MainModule({ binding }) {
                                     s.startRotation = new AxisAngleGenerator(next, axisAngle.angle);
                                 }) }, axis))) }) }), _jsx(ValueField, { label: "  Angle (rad)", generator: axisAngle.angle, curveMax: Math.PI * 2, onChange: (g) => binding.apply((s) => (s.startRotation = new AxisAngleGenerator(axisAngle.axis.clone(), g))) })] })), rotationMode === 'angle' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: rotationState.value, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new ConstantValue(v))) }) })), rotationMode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: rotationState.min, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(v, rotationState.max))) }), _jsx(NumberField, { value: rotationState.max, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(rotationState.min, v))) })] }) }))] }));
 }
+/** The Emission module (Unity's Emission): rate over time and distance, and bursts. */
 export function EmissionModule({ binding }) {
     const system = binding.system;
     const bursts = system.emissionBursts ?? [];
@@ -255,6 +257,7 @@ export function EmissionModule({ binding }) {
 // for them would edit a value the shape silently ignores, just like the old "default to
 // first texture" bug: a control that looks live but does nothing.
 const SHAPES_WITHOUT_MODE_SPREAD = new Set(['point', 'grid', 'box', 'mesh_surface']);
+/** The Shape module (Unity's Shape): the emitter shape and its settings. */
 export function ShapeModule({ binding }) {
     const system = binding.system;
     const type = getShapeType(system.emitterShape);
@@ -280,12 +283,11 @@ export function ShapeModule({ binding }) {
                                 { value: 3, label: 'Burst spread' },
                             ], onChange: (mode) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, mode }))) }) }), _jsx(Row, { label: "Spread", children: _jsx(NumberField, { value: params.spread, min: 0, step: 0.05, onChange: (spread) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, spread }))) }) })] })), _jsx(Row, { label: "Align to direction", children: _jsx(CheckboxField, { value: binding.system.alignToDirection, onChange: (v) => binding.apply((s) => (s.alignToDirection = v)) }) })] }));
 }
+/** The Size over Lifetime module (Unity's Size over Lifetime): size by a curve over the particle's life. */
 export function SizeOverLifeModule({ binding }) {
     const system = binding.system;
     const behavior = findBehavior(system.behaviors, 'SizeOverLife');
-    const curve = behavior
-        ? readScalar(behavior.size).curve
-        : [0.2, 1, 1, 0.4];
+    const curve = behavior ? readScalar(behavior.size).curve : [0.2, 1, 1, 0.4];
     return (_jsx(ModuleSection, { title: "Size over Lifetime", enabled: !!behavior, onToggle: (enabled) => binding.apply((s) => {
             removeBehavior(s, 'SizeOverLife');
             if (enabled) {
@@ -296,6 +298,7 @@ export function SizeOverLifeModule({ binding }) {
                     s.addBehavior(new SizeOverLife(buildCurve(pieces)));
                 }) }) }) }));
 }
+/** The Color over Lifetime module (Unity's Color over Lifetime): a gradient over the particle's life. */
 export function ColorOverLifeModule({ binding }) {
     const system = binding.system;
     const behavior = findBehavior(system.behaviors, 'ColorOverLife');
@@ -376,6 +379,7 @@ function MeshPreview({ positions, indices, size = 96, }) {
     }, [positions, indices, size]);
     return (_jsx("canvas", { ref: canvasRef, width: size, height: size, style: { width: size, height: size, border: '1px solid #2b3761', borderRadius: 6, background: '#0c1330' } }));
 }
+/** The Renderer module (Unity's Renderer): render mode, material, textures, sorting and mesh settings. */
 export function RendererModule({ binding, textureOptions, geometryOptions, resolveTexture, resolveGeometry, }) {
     const system = binding.system;
     const materialLabel = getMaterialLabel(system.material);
@@ -470,13 +474,23 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                     const triangleCount = (system.getRendererSettings().instancingIndices?.length ?? 0) / 3;
                     const hostGeometry = geometryOptions ?? [];
                     const applyGeometry = (g) => binding.apply((s) => {
+                        // The previous mesh's sets go first, so the positions setter gives
+                        // this mesh the library's own fallback UVs and normals; then every set
+                        // this mesh has. An unindexed mesh draws its vertices in sequence.
                         const settings = s.getRendererSettings();
-                        // Positions first: the setter keeps or drops the other sets by vertex count.
+                        settings.instancingUVs = undefined;
+                        settings.instancingUVs2 = undefined;
+                        settings.instancingNormals = undefined;
                         s.instancingGeometry = new Float32Array(g.positions);
-                        settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined);
-                        settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined);
-                        settings.instancingUVs2 = (g.uvs2 ? new Float32Array(g.uvs2) : undefined);
-                        settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined);
+                        s.instancingIndices = g.indices
+                            ? new Uint32Array(g.indices)
+                            : Uint32Array.from({ length: g.positions.length / 3 }, (_, i) => i);
+                        if (g.uvs)
+                            s.instancingUVs = new Float32Array(g.uvs);
+                        if (g.uvs2)
+                            s.instancingUVs2 = new Float32Array(g.uvs2);
+                        if (g.normals)
+                            settings.instancingNormals = new Float32Array(g.normals);
                     });
                     return (_jsx(Row, { label: "Geometry", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(SelectField, { value: preset, options: [
                                         ...(preset === 'custom' ? [{ value: 'custom', label: 'Custom (imported)' }] : []),
@@ -547,7 +561,11 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                         }) }, axis))) }) })), system.renderMode === RenderMode.Mesh && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Env map atlas", children: _jsx(SelectField, { value: system.getRendererSettings().reflectionAtlas?.url ?? '', options: [
                                 { value: '', label: 'None' },
                                 ...(textureOptions ?? []).map((option) => ({ value: option.url, label: option.label })),
-                            ], onChange: (url) => patchMaterial({ reflectionAtlas: url ? loadTexture(url) : null }) }) }), _jsx(Row, { label: "Reflection level", children: _jsx(NumberField, { value: system.getRendererSettings().reflectionLevel ?? 1, min: 0, step: 0.1, onChange: (v) => patchMaterial({ reflectionLevel: Math.max(0, v) }) }) })] })), _jsx(Row, { label: "Sort mode", children: _jsx(SelectField, { value: system.sortMode, options: [
+                            ], onChange: (url) => patchMaterial({ reflectionAtlas: url ? loadTexture(url) : null }) }) }), _jsx(Row, { label: "Reflection level", children: _jsx(NumberField, { value: system.getRendererSettings().reflectionLevel ?? 1, min: 0, step: 0.1, onChange: (v) => patchMaterial({ reflectionLevel: Math.max(0, v) }) }) })] })), isMesh && (_jsx(Row, { label: "Render face", children: _jsx(SelectField, { value: system.renderFace, options: [
+                        { value: 'both', label: 'Both' },
+                        { value: 'front', label: 'Front' },
+                        { value: 'back', label: 'Back' },
+                    ], onChange: (face) => binding.apply((s) => (s.renderFace = face)) }) })), _jsx(Row, { label: "Sort mode", children: _jsx(SelectField, { value: system.sortMode, options: [
                         { value: 'none', label: 'None' },
                         { value: 'distance', label: 'By distance' },
                         { value: 'oldestInFront', label: 'Oldest in front' },

package/dist/react/theme.d.ts

@@ -1,19 +1,34 @@
 import type { CSSProperties } from 'react';
+/** The editor's colours and font, for hosts that style their own panels to match. */
 export declare const theme: {
+    /** Background of the side panels and docks. */
     panelBg: string;
+    /** Background of an inspector module or a framed list. */
     sectionBg: string;
+    /** Borders and separators. */
     border: string;
+    /** The border of a selected or switched-on control. */
     borderActive: string;
+    /** Body text. */
     text: string;
+    /** Labels and secondary text. */
     textDim: string;
+    /** Highlights, such as a Save button with something to save. */
     accent: string;
+    /** Background of inputs. */
     inputBg: string;
+    /** The line of curve editors. */
     curveStroke: string;
+    /** The editor's font stack. */
     font: string;
 };
+/** Style of a text or number input. */
 export declare const inputStyle: CSSProperties;
+/** Style of an inspector row: a label column, then the controls. */
 export declare const rowStyle: CSSProperties;
+/** Style of an inspector row's label. */
 export declare const labelStyle: CSSProperties;
+/** Style of a button. */
 export declare const buttonStyle: CSSProperties;
 /** Visually hides a file input while keeping it activatable via an associated <label>. */
 export declare const hiddenFileInputStyle: CSSProperties;