babylon.quarks-editor 0.26.0 → 0.28.0

package/src/core/projectStore.ts

@@ -1,9 +1,14 @@
 /** One editor project: a library of effect assets plus the scene built from them. */
 export interface ProjectMeta {
+    /** The project's key in its store. */
     id: string;
+    /** The project's display name. */
     name: string;
+    /** When the project was created, in milliseconds since the epoch. */
     createdAt: number;
+    /** When the project last changed, in milliseconds since the epoch. */
     updatedAt: number;
+    /** How many effect assets the project holds. */
     assetCount: number;
     /** Approximate bytes the project takes in storage (JSON + texture files). */
     sizeBytes: number;
@@ -13,26 +18,35 @@ export interface ProjectMeta {
 export interface StoredAsset {
     /** Relative path inside the project (`Fire/Explosion.json`) — the asset's key. */
     path: string;
+    /** The asset's display name, its file name without `.json`. */
     name: string;
+    /** The effect, as quarks JSON with its textures inlined. */
     json: unknown;
+    /** Files the effect referenced that were not imported with it. */
     missingFiles: string[];
 }
 
 /** One effect instance in a saved scene. */
 export interface StoredSceneEntry {
+    /** The instance's name in the Scene list. */
     name: string;
     /** Path of the asset it was made from, if any. */
     assetPath: string | null;
     /** The instance's own (possibly edited) effect, root transform included. */
     json: unknown;
+    /** Whether the instance was shown. */
     visible: boolean;
 }
 
+/** A project's saved scene: the effects placed in it, in Scene list order. */
 export interface StoredScene {
+    /** The scene's effect instances. */
     entries: StoredSceneEntry[];
+    /** When it was saved, in milliseconds since the epoch. */
     savedAt: number;
 }
 
+/** How much storage projects use, as far as the browser tells. */
 export interface StorageEstimate {
     /** Bytes the whole site uses (all projects), when the browser reports it. */
     usage: number | null;
@@ -47,26 +61,38 @@ export interface StorageEstimate {
  * everything in the browser, and an embedding host can supply its own (e.g. on disk).
  */
 export interface ProjectStore {
+    /** Every project, most recently changed first. */
     listProjects(): Promise<ProjectMeta[]>;
+    /** One project, or null when there is none with that id. */
     getProject(id: string): Promise<ProjectMeta | null>;
+    /** Creates an empty project. */
     createProject(name: string): Promise<ProjectMeta>;
+    /** Renames a project. */
     renameProject(id: string, name: string): Promise<void>;
+    /** Copies a project, its assets and its scene, under a new name. */
     duplicateProject(id: string, name: string): Promise<ProjectMeta>;
+    /** Deletes a project, its assets and its scene. */
     deleteProject(id: string): Promise<void>;
 
+    /** A project's assets. */
     loadAssets(projectId: string): Promise<StoredAsset[]>;
     /** Adds or replaces assets by path. */
     putAssets(projectId: string, assets: StoredAsset[]): Promise<void>;
+    /** Deletes assets by path; paths it does not have are ignored. */
     deleteAssets(projectId: string, paths: string[]): Promise<void>;
 
+    /** A project's saved scene, or null when it was never saved. */
     loadScene(projectId: string): Promise<StoredScene | null>;
+    /** Replaces a project's saved scene. */
     saveScene(projectId: string, scene: StoredScene): Promise<void>;
 
+    /** How much storage projects use. */
     estimate(): Promise<StorageEstimate>;
     /** Asks the browser to keep the data even under storage pressure; resolves to the result. */
     requestPersistence(): Promise<boolean>;
 }
 
+/** A byte count for people: `512 B`, `1.5 KB`, `20 MB`; `—` when unknown. */
 export function formatBytes(bytes: number | null | undefined): string {
     if (bytes == null) return '—';
     if (bytes < 1024) return `${bytes} B`;

package/src/core/sceneEntries.ts

@@ -1,10 +1,10 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Scene} from '@babylonjs/core/scene';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {Scene} from '@babylonjs/core/scene.js';
 import type {BatchedRenderer, ParticleEmitter, ParticleSystem} from 'babylon.quarks';
 import {QuarksUtil} from 'babylon.quarks';
-import type {EffectAsset} from './assets';
-import {EffectBinding} from './binding';
-import {disposeLoadedEffect, parseEffectFromJson} from './loadEffect';
+import type {EffectAsset} from './assets.js';
+import {EffectBinding} from './binding.js';
+import {disposeLoadedEffect, parseEffectFromJson} from './loadEffect.js';
 
 /**
  * One effect instance placed in the scene. Every instance is live (its systems are registered
@@ -12,12 +12,15 @@ import {disposeLoadedEffect, parseEffectFromJson} from './loadEffect';
  * that are edited separately.
  */
 export interface SceneEntry {
+    /** The instance's name in the Scene list, unique in the scene. */
     name: string;
     /** Path of the asset it came from, or a synthetic `_created/…` path for new effects. */
     path: string;
     /** Asset this instance was made from, if any. */
     assetId: number | null;
+    /** The instance's root node. */
     root: TransformNode;
+    /** Every particle system of the instance. */
     systems: ParticleSystem[];
 }
 

package/src/core/scrub.ts

@@ -1,5 +1,5 @@
 import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
-import type {EffectBinding} from './binding';
+import type {EffectBinding} from './binding.js';
 
 const WIDE_STEP_THRESHOLD = 8;
 
@@ -7,10 +7,10 @@ function bindingSystems(binding: EffectBinding): ParticleSystem[] {
     return [binding.system, ...binding.subSystems];
 }
 
-/** Unpauses every system in the focused effect. */
+/** Unpauses every system in the focused effect; one that has finished stays finished. */
 export function playFocus(binding: EffectBinding): void {
     for (const system of bindingSystems(binding)) {
-        system.play();
+        system.resume();
     }
 }
 

package/src/core/shapes.ts

@@ -1,4 +1,4 @@
-import type {Mesh} from '@babylonjs/core/Meshes/mesh';
+import type {Mesh} from '@babylonjs/core/Meshes/mesh.js';
 import type {EmitterShape} from 'babylon.quarks';
 import {
     BoxEmitFrom,
@@ -17,6 +17,7 @@ import {
     SphereEmitter,
 } from 'babylon.quarks';
 
+/** The emitter shapes the Shape module offers, by the `type` they serialise with. */
 export type ShapeType =
     | 'point'
     | 'sphere'
@@ -30,7 +31,13 @@ export type ShapeType =
     | 'edge'
     | 'mesh_surface';
 
-export const SHAPE_TYPES: Array<{value: ShapeType; label: string}> = [
+/** The Shape module's shape list, in menu order, with the label each shows. */
+export const SHAPE_TYPES: Array<{
+    /** The shape's type. */
+    value: ShapeType;
+    /** Its label in the menu. */
+    label: string;
+}> = [
     {value: 'cone', label: 'Cone'},
     {value: 'sphere', label: 'Sphere'},
     {value: 'hemisphere', label: 'Hemisphere'},
@@ -44,17 +51,32 @@ export const SHAPE_TYPES: Array<{value: ShapeType; label: string}> = [
     {value: 'point', label: 'Point'},
 ];
 
+/**
+ * Every shape's settings in one flat record, so switching shapes keeps what the shapes share
+ * (a cone's radius becomes the sphere's). Each shape reads the fields it has.
+ */
 export interface ShapeParams {
+    /** Radius of a sphere, hemisphere, cone, circle or donut. */
     radius: number;
+    /** The part of the circle emitted from, in radians (2π: all of it). */
     arc: number;
+    /** 0 emits from the surface only, 1 from the whole volume. */
     thickness: number;
+    /** A cone's half angle, in radians. */
     angle: number;
+    /** The radius of a donut's tube. */
     donutRadius: number;
+    /** Width of a rectangle, grid or box (X). */
     width: number;
+    /** Height of a rectangle, grid or box (Y). */
     height: number;
+    /** How points around the arc are picked: at random, in a loop, back and forth or in bursts. */
     mode: EmitterMode;
+    /** Snaps the arc position to steps of this fraction; 0 for none. */
     spread: number;
+    /** A grid's column count. */
     column: number;
+    /** A grid's row count. */
     row: number;
     /** Box depth (Z). */
     depth: number;
@@ -62,9 +84,11 @@ export interface ShapeParams {
     emitFrom: BoxEmitFrom;
     /** How fast an edge emitter's loop / ping-pong point travels, in lengths per second. */
     speed: number;
+    /** The mesh a mesh surface emitter emits from. */
     mesh?: Mesh;
 }
 
+/** The settings a new shape starts from. */
 export const DEFAULT_SHAPE_PARAMS: ShapeParams = {
     radius: 0.3,
     arc: Math.PI * 2,
@@ -83,11 +107,13 @@ export const DEFAULT_SHAPE_PARAMS: ShapeParams = {
     mesh: undefined,
 };
 
+/** The type of a shape, as the Shape module lists it. */
 export function getShapeType(shape: EmitterShape): ShapeType {
     const type = (shape as {type?: string}).type ?? 'point';
     return (SHAPE_TYPES.some((s) => s.value === type) ? type : 'point') as ShapeType;
 }
 
+/** A shape's settings, the fields it does not have taken from {@link DEFAULT_SHAPE_PARAMS}. */
 export function readShapeParams(shape: EmitterShape): ShapeParams {
     const anyShape = shape as unknown as {[key: string]: unknown};
     const num = (key: string, fallback: number) =>
@@ -127,6 +153,7 @@ export const SHAPE_PARAM_KEYS: {[K in ShapeType]: Array<keyof ShapeParams>} = {
     mesh_surface: [],
 };
 
+/** A new shape of `type`, built from the fields of `params` it has. */
 export function createShape(type: ShapeType, params: ShapeParams): EmitterShape {
     switch (type) {
         case 'point':

package/src/core/systems.ts

@@ -1,4 +1,4 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {
     ConeEmitter,
     ConstantColor,
@@ -7,10 +7,13 @@ import {
     ParticleSystem,
     RenderMode,
     Vector4,
+    type ParticleEmitter,
 } from 'babylon.quarks';
-import type {EffectBinding} from './binding';
+import type {EffectBinding} from './binding.js';
 
+/** How {@link createChildSystem} builds a new system. */
 export interface ChildSystemOptions {
+    /** The new emitter's name. */
     name?: string;
     /** One-shot burst (sub-emitter target) instead of a looping stream. */
     oneShot?: boolean;
@@ -61,10 +64,14 @@ export function createChildSystem(parent: ParticleSystem, options: ChildSystemOp
 export function unlinkSubEmitterReferences(systems: ParticleSystem[], removed: ParticleSystem[]): void {
     const removedEmitters = new Set(removed.map((system) => system.emitter));
     for (const system of systems) {
-        const behaviors = system.behaviors as Array<{type?: string; subParticleSystem?: unknown}>;
+        const behaviors = system.behaviors as Array<{type?: string; subParticleSystem?: ParticleEmitter}>;
         for (let i = behaviors.length - 1; i >= 0; i--) {
             const behavior = behaviors[i];
-            if (behavior.type === 'EmitSubParticleSystem' && removedEmitters.has(behavior.subParticleSystem as never)) {
+            if (
+                behavior.type === 'EmitSubParticleSystem' &&
+                behavior.subParticleSystem &&
+                removedEmitters.has(behavior.subParticleSystem)
+            ) {
                 behaviors.splice(i, 1);
             }
         }

package/src/core/textureExport.ts

@@ -1,4 +1,4 @@
-import type {Texture} from '@babylonjs/core/Materials/Textures/texture';
+import type {Texture} from '@babylonjs/core/Materials/Textures/texture.js';
 
 const bakedUrls = new WeakMap<Texture, string>();
 

package/src/core/timeline.ts

@@ -1,27 +1,52 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {FunctionValueGenerator, ParticleSystem, ValueGenerator} from 'babylon.quarks';
 import {ConstantValue, IntervalValue} from 'babylon.quarks';
-import type {EffectBinding} from './binding';
-import type {EffectTreeNode} from './effectTree';
+import type {EffectBinding} from './binding.js';
+import type {EffectTreeNode} from './effectTree.js';
 
 /** Guards against a literally zero-width ruler (e.g. no tracks yet) — not a usability stretch. */
 const MIN_TIMELINE_SPAN = 0.01;
 
-export type TimelineRow =
-    | {kind: 'group'; node: TransformNode; name: string; depth: number}
-    | {
-          kind: 'track';
-          node: TransformNode;
-          system: ParticleSystem;
-          name: string;
-          depth: number;
-          isRoot: boolean;
-          removable: boolean;
-          startOffset: number;
-          startOffsetVariable: boolean;
-          duration: number;
-          looping: boolean;
-      };
+/** A timeline row for a group node: a heading over the tracks of the systems under it. */
+export interface TimelineGroupRow {
+    /** Tells group rows from track rows. */
+    kind: 'group';
+    /** The group's node. */
+    node: TransformNode;
+    /** The group's name. */
+    name: string;
+    /** How deep the group sits in the effect tree; the root's children are 0. */
+    depth: number;
+}
+
+/** A timeline row for one particle system: a bar from its start delay over its duration. */
+export interface TimelineSystemRow {
+    /** Tells group rows from track rows. */
+    kind: 'track';
+    /** The system's emitter node. */
+    node: TransformNode;
+    /** The system. */
+    system: ParticleSystem;
+    /** The emitter's name. */
+    name: string;
+    /** How deep the emitter sits in the effect tree. */
+    depth: number;
+    /** True for the effect's main system. */
+    isRoot: boolean;
+    /** False for the one system an effect cannot lose. */
+    removable: boolean;
+    /** Where the bar starts: the start delay, its lower end when random, in seconds. */
+    startOffset: number;
+    /** True when the start delay is a curve and the bar's start is only indicative. */
+    startOffsetVariable: boolean;
+    /** The bar's length, the system's duration in seconds. */
+    duration: number;
+    /** True when the system loops; its bar runs to the end of the ruler. */
+    looping: boolean;
+}
+
+/** One row of the focused effect's timeline. */
+export type TimelineRow = TimelineGroupRow | TimelineSystemRow;
 
 /**
  * Reads a representative start-delay value for display without invoking the generator's

package/src/core/transport.ts

@@ -1,8 +1,8 @@
-import type {Scene} from '@babylonjs/core/scene';
+import type {Scene} from '@babylonjs/core/scene.js';
 import type {BatchedRenderer} from 'babylon.quarks';
-import type {EffectBinding} from './binding';
-import {clearFocusFinished, isFocusFinished, setFocusElapsed, type PlaybackState} from './playback';
-import {playFocus, scrubFocusTo} from './scrub';
+import type {EffectBinding} from './binding.js';
+import {clearFocusFinished, isFocusFinished, setFocusElapsed, type PlaybackState} from './playback.js';
+import {playFocus, scrubFocusTo} from './scrub.js';
 
 /**
  * Stage Play/Pause shared by the viewport transport bar and the timeline. Pressing Play on a

package/src/core/values.ts

@@ -1,22 +1,32 @@
-import type {FunctionValueGenerator, ValueGenerator} from 'babylon.quarks';
+import type {FunctionValueGenerator, RotationGenerator, ValueGenerator, Vector3Generator} from 'babylon.quarks';
 import {Bezier, ConstantValue, IntervalValue, PiecewiseBezier} from 'babylon.quarks';
 
+/** A generator of one number: a constant or random value, or a curve over the particle's life. */
 export type ScalarGenerator = ValueGenerator | FunctionValueGenerator;
+/** Any generator a value field can be pointed at; ones that are not scalar read as the default. */
+export type AnyGenerator = ScalarGenerator | Vector3Generator | RotationGenerator;
+/** How a value field produces its number: Unity's Constant, Random Between Two Constants or Curve. */
 export type ScalarMode = 'constant' | 'random' | 'curve';
 
 /** Editable snapshot of a scalar value generator. */
 export interface ScalarValueState {
+    /** Which of the fields below is the value. */
     mode: ScalarMode;
     /** Constant value (mode: constant). */
     value: number;
-    /** Random range (mode: random). */
+    /** Lower end of the random range (mode: random). */
     min: number;
+    /** Upper end of the random range (mode: random). */
     max: number;
     /** Cubic bezier control values over normalized lifetime (mode: curve). */
     curve: [number, number, number, number];
 }
 
-export function readScalar(generator: ScalarGenerator | undefined): ScalarValueState {
+/**
+ * What a value field shows for `generator`: its constant, its range or its first curve segment.
+ * Anything else, including a missing generator, reads as the constant 1.
+ */
+export function readScalar(generator: AnyGenerator | undefined): ScalarValueState {
     const state: ScalarValueState = {mode: 'constant', value: 1, min: 0.5, max: 1.5, curve: [0, 1, 1, 0]};
     if (generator instanceof ConstantValue) {
         state.mode = 'constant';
@@ -39,6 +49,9 @@ export function readScalar(generator: ScalarGenerator | undefined): ScalarValueS
     return state;
 }
 
+/** The generator a value field's state describes; a curve state builds a one-segment curve. */
+export function buildScalar(state: ScalarValueState & {mode: 'curve'}): PiecewiseBezier;
+export function buildScalar(state: ScalarValueState): ScalarGenerator;
 export function buildScalar(state: ScalarValueState): ScalarGenerator {
     switch (state.mode) {
         case 'constant':
@@ -52,12 +65,14 @@ export function buildScalar(state: ScalarValueState): ScalarGenerator {
 
 /** One segment of a piecewise bezier curve: start x (0..1) + four control values. */
 export interface CurvePiece {
+    /** Where the segment starts, 0..1 over the particle's life. */
     start: number;
+    /** The segment's four bezier control values. */
     p: [number, number, number, number];
 }
 
 /** Reads pieces from a PiecewiseBezier (or synthesizes one segment for other generators). */
-export function readPieces(generator: ScalarGenerator | undefined): CurvePiece[] {
+export function readPieces(generator: AnyGenerator | undefined): CurvePiece[] {
     if (generator instanceof PiecewiseBezier && generator.functions.length > 0) {
         return generator.functions.map(([bezier, start]) => ({
             start,
@@ -68,6 +83,7 @@ export function readPieces(generator: ScalarGenerator | undefined): CurvePiece[]
     return [{start: 0, p: fallback.curve}];
 }
 
+/** A piecewise bezier from segments, sorted by their start. */
 export function buildCurve(pieces: CurvePiece[]): PiecewiseBezier {
     const sorted = [...pieces].sort((a, b) => a.start - b.start);
     return new PiecewiseBezier(sorted.map((piece) => [new Bezier(...piece.p), piece.start] as [Bezier, number]));

package/src/core/viewportPicker.ts

@@ -1,11 +1,11 @@
-import '@babylonjs/core/Culling/ray';
-import {Mesh} from '@babylonjs/core/Meshes/mesh';
-import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Scene} from '@babylonjs/core/scene';
-import {EDITOR_SCENE_NODE_METADATA} from './editorScene';
-import {GROUND_RING_RADIUS, GalleryHoverMarker} from './gallerySelectionMarker';
-import type {SceneEntry} from './sceneEntries';
+import '@babylonjs/core/Culling/ray.js';
+import {Mesh} from '@babylonjs/core/Meshes/mesh.js';
+import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder.js';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {Scene} from '@babylonjs/core/scene.js';
+import {EDITOR_SCENE_NODE_METADATA} from './editorScene.js';
+import {GROUND_RING_RADIUS, GalleryHoverMarker} from './gallerySelectionMarker.js';
+import type {SceneEntry} from './sceneEntries.js';
 
 interface PickMetadata {
     quarksEditorPick: true;
@@ -48,9 +48,10 @@ export class GalleryViewportPicker {
         } else if (soloRoot && !soloRoot.isDisposed()) {
             this.createHandle(soloRoot);
         }
-        const hovered = this.hoveredRoot;
-        this.hoveredRoot = null;
-        this.setHover(hovered && !hovered.isDisposed() ? hovered : null);
+        if (this.hoveredRoot?.isDisposed()) {
+            this.hoveredRoot = null;
+            this.hoverMarker.hide();
+        }
     }
 
     /** Yellow focus-style ring under the hovered effect root. */

package/src/index.ts

@@ -1,6 +1,8 @@
-export {EffectBinding} from './core/binding';
-export type {EditorListener} from './core/binding';
-export {GroundPlaneResolver, ensureGroundResolver} from './core/collision';
+export type {AssetLoadProgress, EffectAsset} from './core/assets.js';
+export type {AssetDragPayload} from './core/assetTree.js';
+export {EffectBinding} from './core/binding.js';
+export type {EditorListener} from './core/binding.js';
+export {GroundPlaneResolver, ensureGroundResolver} from './core/collision.js';
 export {
     DEFAULT_GRADIENT_STOPS,
     buildColorOverLife,
@@ -11,16 +13,16 @@ export {
     rgbaToVector4,
     stopToCss,
     stopsToCssGradient,
-} from './core/colors';
-export type {GradientStop} from './core/colors';
-export {buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree} from './core/effectTree';
-export type {EffectTreeNode} from './core/effectTree';
-export {EffectHistory} from './core/history';
-export type {HistoryStacks} from './core/history';
-export {IndexedDbProjectStore} from './core/indexedDbProjectStore';
-export {applyRendererMaterial, getMaterialLabel} from './core/material';
-export type {RendererMaterialPatch} from './core/material';
-export {formatBytes} from './core/projectStore';
+} from './core/colors.js';
+export type {GradientStop} from './core/colors.js';
+export {buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree} from './core/effectTree.js';
+export type {EffectTreeNode} from './core/effectTree.js';
+export {EffectHistory} from './core/history.js';
+export type {HistoryStacks} from './core/history.js';
+export {IndexedDbProjectStore} from './core/indexedDbProjectStore.js';
+export {applyRendererMaterial, getMaterialLabel} from './core/material.js';
+export type {RendererMaterialPatch} from './core/material.js';
+export {formatBytes} from './core/projectStore.js';
 export type {
     ProjectMeta,
     ProjectStore,
@@ -28,7 +30,8 @@ export type {
     StoredAsset,
     StoredScene,
     StoredSceneEntry,
-} from './core/projectStore';
+} from './core/projectStore.js';
+export type {SceneEntry} from './core/sceneEntries.js';
 export {
     DEFAULT_SHAPE_PARAMS,
     SHAPE_PARAM_KEYS,
@@ -36,10 +39,11 @@ export {
     createShape,
     getShapeType,
     readShapeParams,
-} from './core/shapes';
-export type {ShapeParams, ShapeType} from './core/shapes';
-export {createChildSystem} from './core/systems';
-export type {ChildSystemOptions} from './core/systems';
-export {ensurePortableTextureUrl} from './core/textureExport';
-export {buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces} from './core/values';
-export type {CurvePiece, ScalarGenerator, ScalarMode, ScalarValueState} from './core/values';
+} from './core/shapes.js';
+export type {ShapeParams, ShapeType} from './core/shapes.js';
+export {createChildSystem} from './core/systems.js';
+export type {ChildSystemOptions} from './core/systems.js';
+export {ensurePortableTextureUrl} from './core/textureExport.js';
+export type {TimelineGroupRow, TimelineRow, TimelineSystemRow} from './core/timeline.js';
+export {buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces} from './core/values.js';
+export type {AnyGenerator, CurvePiece, ScalarGenerator, ScalarMode, ScalarValueState} from './core/values.js';

package/src/react/AssetsPanel.tsx

@@ -7,7 +7,7 @@ import {
     SparklesIcon,
 } from '@heroicons/react/24/solid';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {setAssetDragSession} from '../core/assetDragSession';
+import {setAssetDragSession} from '../core/assetDragSession.js';
 import {
     buildAssetTree,
     collectFolderAssets,
@@ -17,25 +17,32 @@ import {
     type AssetDragPayload,
     type AssetTreeFolder,
     type AssetTreeNode,
-} from '../core/assetTree';
-import {assetIconUrl, type AssetLoadProgress, type EffectAsset} from '../core/assets';
-import {ContextMenu, type ContextMenuItem} from './ContextMenu';
-import {iconStyle} from './icons';
-import {buttonStyle, hiddenFileInputStyle, inputStyle, theme} from './theme';
+} from '../core/assetTree.js';
+import {assetIconUrl, type AssetLoadProgress, type EffectAsset} from '../core/assets.js';
+import {ContextMenu, type ContextMenuItem} from './ContextMenu.js';
+import {iconStyle} from './icons.js';
+import {buttonStyle, hiddenFileInputStyle, inputStyle, theme} from './theme.js';
 
 const TREE_WIDTH = 200;
 const TILE_WIDTH = 92;
 
+/** 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/src/react/ChoiceDialog.tsx

@@ -1,16 +1,23 @@
 import React, {useEffect} from 'react';
-import {buttonStyle, theme} from './theme';
+import {buttonStyle, theme} from './theme.js';
 
+/** 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/src/react/ContextMenu.tsx

@@ -1,19 +1,28 @@
 import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
-import {theme} from './theme';
+import {theme} from './theme.js';
 
+/** 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;
 }
 

package/src/react/CurveEditor.tsx

@@ -1,6 +1,6 @@
 import {useRef, useState} from 'react';
-import {CurvePiece, mergePieces, sampleCurve, splitPieces} from '../core/values';
-import {inputStyle, theme} from './theme';
+import {CurvePiece, mergePieces, sampleCurve, splitPieces} from '../core/values.js';
+import {inputStyle, theme} from './theme.js';
 
 const WIDTH = 218;
 const HEIGHT = 84;