babylon.quarks-editor 0.27.0 → 0.28.0

package/dist/react/AssetsPanel.d.ts

@@ -1,16 +1,23 @@
 import React from 'react';
 import { type AssetDragPayload } from '../core/assetTree.js';
 import { type AssetLoadProgress, type EffectAsset } from '../core/assets.js';
+/** Props of {@link AssetsPanel}. */
 export interface AssetsPanelProps {
+    /** The assets, shown as a folder tree by their paths. */
     assets: EffectAsset[];
     /** Scene instance count per asset id. */
     instanceCounts: ReadonlyMap<number, number>;
+    /** Import progress while importing; the import buttons are disabled meanwhile. */
     loading: AssetLoadProgress | null;
+    /** The hidden folder input, clicked by hosts whose browser has no directory picker. */
     folderInputRef: React.RefObject<HTMLInputElement | null>;
+    /** Imports picked files. */
     onImportFiles: (files: FileList | File[]) => void;
+    /** Opens a folder to import. */
     onImportFolder: () => void;
     /** Adds a new instance of each asset in the payload to the scene. */
     onAddToScene: (payload: AssetDragPayload) => void;
+    /** Deletes the assets in the payload. */
     onDelete: (payload: AssetDragPayload) => void;
     /** Opens the asset on its own to edit it (double-click). Without it, double-click adds to the scene. */
     onOpenPrefab?: (asset: EffectAsset) => void;

package/dist/react/ChoiceDialog.d.ts

@@ -1,13 +1,20 @@
 import React from 'react';
+/** One button of a {@link ChoiceDialog}. */
 export interface ChoiceDialogAction {
+    /** The button's text. */
     label: string;
+    /** Runs when the button is pressed. */
     onSelect: () => void;
     /** Accent button — also what Enter picks. */
     primary?: boolean;
+    /** Shows the button in red, for a destructive choice. */
     danger?: boolean;
 }
+/** Props of {@link ChoiceDialog}. */
 export interface ChoiceDialogProps {
+    /** The question. */
     title: string;
+    /** What the choice means. */
     message: React.ReactNode;
     /** Shown left to right; put the cancel action first. */
     actions: ChoiceDialogAction[];

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/EditorWorkspace.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 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

@@ -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 { 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.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/EffectEditorHost.d.ts

@@ -1,67 +1,71 @@
-import '@babylonjs/core/Culling/ray.js';
-import { Scene } from '@babylonjs/core/scene.js';
-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.js';
-import { EffectHistory } from '../core/history.js';
-import type { ProjectStore } from '../core/projectStore.js';
+import { type EditorProject, type EffectEditorHostHandle } from '../core/editorSession.js';
 import type { GeometryData, GeometryOption, TextureOption } from './modules.js';
-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;
-}
+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;
     };
 };