babylon.quarks-editor 0.26.0 → 0.28.0

package/dist/react/ContextMenu.d.ts

@@ -1,15 +1,24 @@
 import React from 'react';
+/** One entry of a {@link ContextMenu}. */
 export interface ContextMenuItem {
+    /** The entry's text. */
     label: string;
+    /** Runs when the entry is picked; the menu closes first. */
     onSelect: () => void;
+    /** Shows the entry in red, for a destructive action. */
     danger?: boolean;
+    /** Shows the entry greyed out and unpickable. */
     disabled?: boolean;
 }
+/** Props of {@link ContextMenu}. */
 export interface ContextMenuProps {
-    /** Client coordinates of the right-click. */
+    /** Client X of the right-click. */
     x: number;
+    /** Client Y of the right-click. */
     y: number;
+    /** The entries, top to bottom. */
     items: ContextMenuItem[];
+    /** Closes the menu: the host stops rendering it. */
     onClose: () => void;
 }
 /** Right-click menu at the pointer; closes on outside click, Escape, scroll or window blur. */

package/dist/react/ContextMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { theme } from './theme';
+import { theme } from './theme.js';
 /** Right-click menu at the pointer; closes on outside click, Escape, scroll or window blur. */
 export function ContextMenu(props) {
     const { x, y, items, onClose } = props;

package/dist/react/CurveEditor.d.ts

@@ -1,4 +1,4 @@
-import { CurvePiece } from '../core/values';
+import { CurvePiece } from '../core/values.js';
 /**
  * Multi-segment piecewise-bezier curve editor. Drag keys/handles vertically,
  * drag inner keys horizontally, double-click the curve to add a key, double-click

package/dist/react/CurveEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { mergePieces, sampleCurve, splitPieces } from '../core/values';
-import { inputStyle, theme } from './theme';
+import { mergePieces, sampleCurve, splitPieces } from '../core/values.js';
+import { inputStyle, theme } from './theme.js';
 const WIDTH = 218;
 const HEIGHT = 84;
 const PAD = 8;

package/dist/react/EditorWorkspace.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { ProjectStore } from '../core/projectStore';
-import { type EffectEditorHostProps } from './EffectEditorHost';
+import type { ProjectStore } from '../core/projectStore.js';
+import { type EffectEditorHostProps } from './EffectEditorHost.js';
+/** Props of {@link EditorWorkspace}: the editor's, plus where projects live. */
 export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
     /** Where projects are kept; defaults to the browser's IndexedDB. */
     store?: ProjectStore;
@@ -13,9 +14,15 @@ export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'proje
 export declare function EditorWorkspace(props: EditorWorkspaceProps): React.ReactElement;
 /** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
 export declare const QuarksEditorWorkspace: {
+    /**
+     * Mounts an {@link EditorWorkspace} into `hostElement`.
+     *
+     * @returns A handle whose `dispose()` unmounts it.
+     */
     Show(options: EditorWorkspaceProps & {
         hostElement: HTMLElement;
     }): {
+        /** Unmounts the workspace. */
         dispose: () => void;
     };
 };

package/dist/react/EditorWorkspace.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { IndexedDbProjectStore } from '../core/indexedDbProjectStore';
-import { EffectEditorHost } from './EffectEditorHost';
-import { ProjectsPage } from './ProjectsPage';
-import { theme } from './theme';
+import { IndexedDbProjectStore } from '../core/indexedDbProjectStore.js';
+import { EffectEditorHost } from './EffectEditorHost.js';
+import { ProjectsPage } from './ProjectsPage.js';
+import { theme } from './theme.js';
 /** Projects page → editor for the chosen project, with assets and scene saved in `store`. */
 export function EditorWorkspace(props) {
     const { store: storeProp, projectId, onProjectChange, ...hostProps } = props;
@@ -12,10 +12,8 @@ export function EditorWorkspace(props) {
     const [project, setProject] = useState(null);
     const [resolving, setResolving] = useState(Boolean(projectId));
     useEffect(() => {
-        if (!projectId) {
-            setResolving(false);
+        if (!projectId)
             return;
-        }
         let cancelled = false;
         void store.getProject(projectId).then((meta) => {
             if (cancelled)
@@ -54,6 +52,11 @@ export function EditorWorkspace(props) {
 }
 /** Imperative entry point, like QuarksEffectEditor.Show, for the project-based workspace. */
 export const QuarksEditorWorkspace = {
+    /**
+     * Mounts an {@link EditorWorkspace} into `hostElement`.
+     *
+     * @returns A handle whose `dispose()` unmounts it.
+     */
     Show(options) {
         const { hostElement, ...props } = options;
         const root = createRoot(hostElement);

package/dist/react/EffectEditor.d.ts

@@ -1,19 +1,25 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import type { ParticleSystem } from 'babylon.quarks';
 import React from 'react';
-import { EffectBinding } from '../core/binding';
-import type { GeometryData, GeometryOption, TextureOption } from './modules';
+import { EffectBinding } from '../core/binding.js';
+import type { GeometryData, GeometryOption, TextureOption } from './modules.js';
+/** Props of {@link EffectEditor}. */
 export interface EffectEditorProps {
+    /** The effect the modules edit. */
     binding: EffectBinding;
     /** Currently selected system, lifted up so the timeline panel and this module stack agree. */
     selectedSystem: ParticleSystem;
+    /** The node the Object module edits the transform of. */
     gizmoTargetNode: TransformNode;
+    /** The Object module's title for that node. */
     gizmoTargetLabel: string;
     /** Texture presets offered in the Renderer module (host supplies the loader). */
     textureOptions?: TextureOption[];
     /** Mesh presets offered for the Mesh render mode (host supplies the geometry buffers). */
     geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string) => unknown;
+    /** Host texture loader for picked URLs; a plain `Texture` is made without it. */
+    resolveTexture?: (url: string) => Texture | null | undefined;
     /** Host loader for "Load from file…" in the Mesh render mode (e.g. a GLB importer). */
     resolveGeometry?: (file: File) => Promise<GeometryData>;
 }
@@ -22,4 +28,4 @@ export interface EffectEditorProps {
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
  * Module order mirrors Unity's Particle System inspector.
  */
-export declare const EffectEditor: React.NamedExoticComponent<EffectEditorProps>;
+export declare const EffectEditor: React.MemoExoticComponent<(props: EffectEditorProps) => React.JSX.Element>;

package/dist/react/EffectEditor.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useSyncExternalStore } from 'react';
-import { EffectBinding } from '../core/binding';
-import { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, Rotation3DOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SequencesModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
-import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
-import { ObjectModule } from './ObjectModule';
-import { SubEmittersModule } from './SubEmittersModule';
-import { theme } from './theme';
+import { EffectBinding } from '../core/binding.js';
+import { AttractorModule, CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, InheritVelocityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, Rotation3DOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SequencesModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, VelocityOverLifeModule, WidthOverTrailModule, } from './behaviorModules.js';
+import { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules.js';
+import { ObjectModule } from './ObjectModule.js';
+import { SubEmittersModule } from './SubEmittersModule.js';
+import { theme } from './theme.js';
 /**
  * Shuriken-style effect editor: a stacked module inspector for the selected system.
  * Embed it anywhere React runs — the standalone examples page or a BabylonJS Editor plugin.
@@ -31,5 +31,5 @@ export const EffectEditor = React.memo(function EffectEditor(props) {
     useEffect(() => (binding === props.binding ? undefined : binding.subscribe(() => props.binding.markChanged())), [binding, props.binding]);
     useSyncExternalStore((onStoreChange) => binding.subscribe(onStoreChange), () => binding.getRevision());
     const gizmoTargetIsEmitter = allSystems.some((s) => s.emitter === props.gizmoTargetNode);
-    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(Rotation3DOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(SequencesModule, { binding: binding, textureOptions: props.textureOptions }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
+    return (_jsxs("div", { style: { fontFamily: theme.font, color: theme.text }, children: [_jsx(ObjectModule, { node: props.gizmoTargetNode, label: props.gizmoTargetLabel, onBeforeChange: () => props.binding.onBeforeChange?.(), onChanged: () => props.binding.markChanged() }), !gizmoTargetIsEmitter && (_jsxs("div", { style: { fontSize: 11, color: theme.textDim, margin: '0 0 10px', lineHeight: 1.45 }, children: ["Modules below edit ", _jsx("strong", { children: activeSystem.emitter.name || 'particle system' }), ". Select its emitter in the timeline to move it with the gizmo."] })), _jsx(MainModule, { binding: binding }), _jsx(EmissionModule, { binding: binding }), _jsx(ShapeModule, { binding: binding }), _jsx(EmitDirectionModule, { binding: binding }), _jsx(VelocityOverLifeModule, { binding: binding }), _jsx(SpeedOverLifeModule, { binding: binding }), _jsx(LimitSpeedOverLifeModule, { binding: binding }), _jsx(InheritVelocityModule, { binding: binding }), _jsx(ForceOverLifeModule, { binding: binding }), _jsx(GravityModule, { binding: binding }), _jsx(AttractorModule, { binding: binding }), _jsx(OrbitOverLifeModule, { binding: binding }), _jsx(ColorOverLifeModule, { binding: binding }), _jsx(ColorBySpeedModule, { binding: binding }), _jsx(SizeOverLifeModule, { binding: binding }), _jsx(SizeBySpeedModule, { binding: binding }), _jsx(RotationOverLifeModule, { binding: binding }), _jsx(Rotation3DOverLifeModule, { binding: binding }), _jsx(RotationBySpeedModule, { binding: binding }), _jsx(NoiseModule, { binding: binding }), _jsx(TurbulenceModule, { binding: binding }), _jsx(CollisionModule, { binding: binding }), _jsx(WidthOverTrailModule, { binding: binding }), _jsx(SubEmittersModule, { binding: binding, rootBinding: props.binding }), _jsx(TextureSheetModule, { binding: binding }), _jsx(SequencesModule, { binding: binding, textureOptions: props.textureOptions }), _jsx(RendererModule, { binding: binding, textureOptions: props.textureOptions, geometryOptions: props.geometryOptions, resolveTexture: props.resolveTexture, resolveGeometry: props.resolveGeometry })] }));
 });

package/dist/react/EffectEditorHost.d.ts

@@ -1,67 +1,71 @@
-import '@babylonjs/core/Culling/ray';
-import { Scene } from '@babylonjs/core/scene';
-import { BatchedRenderer } from 'babylon.quarks';
+import type { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
+import type { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import type { Scene } from '@babylonjs/core/scene.js';
 import React from 'react';
-import { EffectBinding } from '../core/binding';
-import { EffectHistory } from '../core/history';
-import type { ProjectStore } from '../core/projectStore';
-import type { GeometryData, GeometryOption, TextureOption } from './modules';
-export interface EffectEditorHostHandle {
-    binding: EffectBinding;
-    history: EffectHistory;
-    scene: Scene;
-    renderer: BatchedRenderer;
-    /** Replaces the scene with this effect (it is also added to Assets). */
-    importJson: (json: unknown) => void;
-    /** Imports effect files (and the texture/geometry files they reference) into Assets. */
-    importAssets: (files: FileList | File[]) => Promise<void>;
-    /** @deprecated Renamed to `importAssets`. */
-    importGallery: (files: FileList | File[]) => Promise<void>;
-    exportJson: () => string;
-}
+import { type EditorProject, type EffectEditorHostHandle } from '../core/editorSession.js';
+import type { GeometryData, GeometryOption, TextureOption } from './modules.js';
+export type { EditorProject, EffectEditorHostHandle } from '../core/editorSession.js';
+/** Props of {@link EffectEditorHost}. */
 export interface EffectEditorHostProps {
     /** Quarks JSON export to open; a default effect is created when omitted. */
     effectJson?: unknown;
     /** When set, a Save button appears and receives the serialized effect. */
     onSave?: (json: string) => void;
-    /** Called once the engine/scene/binding are live (and after every import). */
+    /** Called once the engine, scene and binding are live, and again whenever the focused effect changes. */
     onReady?: (handle: EffectEditorHostHandle) => void;
+    /** Inspector header shown while the focused effect has no name. */
     title?: string;
+    /** Texture presets offered in the Renderer module; the first is the default effect's texture. */
     textureOptions?: TextureOption[];
     /** Mesh presets for the Mesh render mode (e.g. asset meshes from a host editor). */
     geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string, scene: Scene) => unknown;
+    /** Host texture loader for texture URLs picked in the editor. */
+    resolveTexture?: (url: string, scene: Scene) => Texture | null | undefined;
     /** Host loader for the Mesh "Load from file…" option (e.g. GLB via @babylonjs/loaders). */
     resolveGeometry?: (file: File, scene: Scene) => Promise<GeometryData>;
     /** Optional link rendered in the viewport's top-left corner (e.g. back to a host gallery page). */
     backLink?: {
+        /** Where the link goes. */
         href: string;
+        /** The link's text; a leading `←` is dropped, an arrow icon is drawn instead. */
         label: string;
     };
     /**
      * Project to edit: its assets load from and save to `store`, and the scene is saved with
      * Save / Ctrl+S. Without it the editor works in memory only.
      */
-    project?: {
-        store: ProjectStore;
-        id: string;
-        name: string;
-    };
+    project?: EditorProject;
     /** Shows a "← Projects" button; called once unsaved scene changes are dealt with. */
     onExitProject?: () => void;
+    /**
+     * Builds the engine the editor draws with, on the canvas it is given, for example a
+     * `WebGPUEngine` after `await engine.initAsync()`. It may return a promise. It must build a new
+     * engine on every call: the editor disposes the engine when it unmounts, and React may mount
+     * it more than once (StrictMode). Defaults to a WebGL `Engine` with antialiasing.
+     */
+    createEngine?: (canvas: HTMLCanvasElement) => AbstractEngine | Promise<AbstractEngine>;
 }
 /**
  * Self-contained effect editor: live Babylon preview, a Scene list of the effects placed in it,
  * an inspector, and a bottom dock with the timeline and the Assets browser. Assets are effect
  * files; dragging one into the viewport instantiates an independent copy, as many times as needed.
- * Designed for embedding — see QuarksEffectEditor.Show for the NME-style entry point.
+ * Designed for embedding — see {@link QuarksEffectEditor}.Show for the NME-style entry point.
+ *
+ * The scene, Assets, prefab mode and undo live in an {@link EditorSession}; this component is its
+ * React view.
  */
-export declare function EffectEditorHost(props: EffectEditorHostProps): React.JSX.Element;
+export declare function EffectEditorHost(props: EffectEditorHostProps): React.ReactElement;
 /** NME-style imperative entry point for hosts like BabylonJS Editor windows. */
 export declare const QuarksEffectEditor: {
+    /**
+     * Mounts an {@link EffectEditorHost} into `hostElement`.
+     *
+     * @returns A handle whose `dispose()` unmounts the editor and frees its engine.
+     */
     Show(options: EffectEditorHostProps & {
         hostElement: HTMLElement;
     }): {
+        /** Unmounts the editor. */
         dispose: () => void;
     };
 };