babylon.quarks-editor 0.26.0 → 0.27.0

package/src/core/effectTree.ts

@@ -1,8 +1,7 @@
-import {Matrix, Quaternion} from '@babylonjs/core/Maths/math.vector';
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {ParticleSystem} from 'babylon.quarks';
-import {ParticleEmitter} from 'babylon.quarks';
-import {isEditorSceneNode} from './editorScene';
+import {ParticleEmitter, serializeEffect} from 'babylon.quarks';
+import {isEditorSceneNode} from './editorScene.js';
 
 /** A node in the editor's effect hierarchy: a Group (organizational) or a ParticleEmitter. */
 export interface EffectTreeNode {
@@ -45,40 +44,14 @@ export function collectSystems(tree: EffectTreeNode): ParticleSystem[] {
     return out;
 }
 
-interface SerializeMeta {
-    textures: {[k: string]: {url?: string; name?: string; invertY?: boolean}};
-    materials: {[k: string]: {[key: string]: unknown}};
-    geometries: {[k: string]: unknown};
-}
-
-function localMatrix(node: TransformNode): number[] {
-    const rotation = node.rotationQuaternion ?? Quaternion.FromEulerVector(node.rotation);
-    return Matrix.Compose(node.scaling, rotation, node.position).asArray().slice();
-}
-
-function serializeNode(tree: EffectTreeNode, meta: SerializeMeta, fallbackUuid: string): Record<string, unknown> {
-    // Emitter nodes must serialize with the ParticleEmitter's own `.uuid` — that is exactly
-    // what EmitSubParticleSystem.toJSON writes as its target reference, so the two match and
-    // QuarksLoader.linkReferences can re-resolve sub-emitters on reimport.
-    const uuid = tree.system
-        ? (tree.node as unknown as {uuid: string}).uuid
-        : ((tree.node as {_quarksUUID?: string})._quarksUUID ?? fallbackUuid);
-    const children = tree.children.map((child, i) => serializeNode(child, meta, `${fallbackUuid}-${i}`));
-    const base = {
-        uuid,
-        name: tree.name,
-        layers: 1,
-        matrix: localMatrix(tree.node),
-        children: children.length > 0 ? children : undefined,
-    };
-    if (tree.system) {
-        return {
-            ...base,
-            type: 'ParticleEmitter',
-            ps: tree.system.toJSON(meta as never, {useUrlForImage: true} as never),
-        };
-    }
-    return {...base, type: 'Group'};
+/** Writes the effect under `roots`, leaving out the editor's own helper nodes. */
+function serialize(roots: TransformNode | TransformNode[], name: string): string {
+    const json = serializeEffect(roots, {
+        name,
+        generator: 'babylon.quarks-editor',
+        filter: (node) => !isEditorSceneNode(node),
+    });
+    return JSON.stringify(json, null, 2);
 }
 
 /**
@@ -86,9 +59,7 @@ function serializeNode(tree: EffectTreeNode, meta: SerializeMeta, fallbackUuid:
  * preserving the group/emitter hierarchy (not flattened).
  */
 export function serializeEffectTree(root: TransformNode, name = 'effect'): string {
-    const meta: SerializeMeta = {textures: {}, materials: {}, geometries: {}};
-    const object = serializeNode(buildEffectTree(root), meta, `${name}-node`);
-    return finishEnvelope(object, meta);
+    return serialize(root, name);
 }
 
 /**
@@ -96,64 +67,5 @@ export function serializeEffectTree(root: TransformNode, name = 'effect'): strin
  * spans multiple top-level trees (e.g. a demo running several loaded effects at once).
  */
 export function serializeEffectForest(roots: TransformNode[], name = 'effect'): string {
-    if (roots.length === 1) {
-        return serializeEffectTree(roots[0], name);
-    }
-    const meta: SerializeMeta = {textures: {}, materials: {}, geometries: {}};
-    const children = roots.map((root, i) => serializeNode(buildEffectTree(root), meta, `${name}-node-${i}`));
-    const object = {
-        uuid: `${name}-root`,
-        name,
-        type: 'Group',
-        layers: 1,
-        matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-        children,
-    };
-    return finishEnvelope(object, meta);
-}
-
-/** Flattens accumulated meta and wraps the serialized object into the Quarks envelope. */
-function finishEnvelope(object: Record<string, unknown>, meta: SerializeMeta): string {
-    // toJSON stashes live Texture instances and material records in meta; flatten them into
-    // the serializable images/textures/materials arrays QuarksLoader expects.
-    const images: Array<{uuid: string; url: string}> = [];
-    const textures: Array<{uuid: string; image?: string; invertY?: boolean; noMipmap?: boolean}> = [];
-    for (const [uuid, tex] of Object.entries(meta.textures)) {
-        const url = tex?.url ?? tex?.name;
-        const invertY = typeof tex?.invertY === 'boolean' ? tex.invertY : undefined;
-        const isEnvAtlas =
-            tex?.name === 'quarksEnvAtlas' || (typeof tex?.name === 'string' && tex.name.endsWith('_envAtlas'));
-        if (url) {
-            const imageUuid = `${uuid}-image`;
-            images.push({uuid: imageUuid, url});
-            const entry: {uuid: string; image?: string; invertY?: boolean; noMipmap?: boolean} = {
-                uuid,
-                image: imageUuid,
-            };
-            if (invertY === false || isEnvAtlas) {
-                entry.invertY = false;
-                entry.noMipmap = true;
-            }
-            textures.push(entry);
-        } else {
-            textures.push({uuid});
-        }
-    }
-    const materials = Object.values(meta.materials).map((material) => {
-        const {sourceMaterial: _sourceMaterial, ...serializable} = material;
-        return serializable;
-    });
-
-    return JSON.stringify(
-        {
-            metadata: {version: 4.5, type: 'Object3D', generator: 'babylon.quarks-editor'},
-            geometries: Object.values(meta.geometries),
-            materials,
-            textures,
-            images,
-            object,
-        },
-        null,
-        2
-    );
+    return serialize(roots.length === 1 ? roots[0] : roots, name);
 }

package/src/core/emitterShapeWireframe.ts

@@ -1,14 +1,14 @@
-import {Color3} from '@babylonjs/core/Maths/math.color';
-import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh';
-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 {Color3} from '@babylonjs/core/Maths/math.color.js';
+import {Vector3} from '@babylonjs/core/Maths/math.vector.js';
+import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh.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 type {ParticleSystem} from 'babylon.quarks';
-import {EDITOR_SCENE_NODE_METADATA} from './editorScene';
-import './lineShaders';
-import {getShapeType, readShapeParams} from './shapes';
+import {EDITOR_SCENE_NODE_METADATA} from './editorScene.js';
+import './lineShaders.js';
+import {getShapeType, readShapeParams} from './shapes.js';
 
 const LINE_COLOR = new Color3(0.45, 0.82, 1);
 const DIRECTION_COLOR = new Color3(0.75, 0.92, 1);
@@ -225,6 +225,38 @@ function buildEmitterWireframe(system: ParticleSystem, scene: Scene): Mesh[] {
             }
             break;
         }
+        case 'box': {
+            // Spawn anywhere in the box (volume), on its faces (shell) or along its edges;
+            // velocity straight +Z, like Unity's Box shape.
+            const halfW = params.width / 2;
+            const halfH = params.height / 2;
+            const halfD = params.depth / 2;
+            lines('wf-box-front', xyRect(params.width, params.height, halfD));
+            lines('wf-box-back', xyRect(params.width, params.height, -halfD));
+            const corners: Array<[number, number]> = [
+                [-halfW, -halfH],
+                [halfW, -halfH],
+                [halfW, halfH],
+                [-halfW, halfH],
+            ];
+            corners.forEach(([x, y], i) => {
+                lines(`wf-box-side-${i}`, [new Vector3(x, y, -halfD), new Vector3(x, y, halfD)]);
+            });
+            const ray = Math.max(halfD * 2, 0.25);
+            lines('wf-box-dir', [new Vector3(0, 0, halfD), new Vector3(0, 0, halfD + ray)], DIRECTION_COLOR);
+            break;
+        }
+        case 'edge': {
+            // Spawn on a line along X of half-length `radius`; velocity straight +Y.
+            const radius = Math.max(params.radius, 0.001);
+            lines('wf-edge', [new Vector3(-radius, 0, 0), new Vector3(radius, 0, 0)]);
+            const ray = Math.max(radius * 0.5, 0.25);
+            for (let i = 0; i <= 4; i++) {
+                const x = -radius + (i / 4) * radius * 2;
+                lines(`wf-edge-ray-${i}`, [new Vector3(x, 0, 0), new Vector3(x, ray, 0)], DIRECTION_COLOR);
+            }
+            break;
+        }
         case 'mesh_surface': {
             const source = params.mesh;
             if (source && !source.isDisposed()) {
@@ -351,15 +383,15 @@ function arcPoint(radius: number, theta: number, z = 0): Vector3 {
     return new Vector3(Math.cos(theta) * radius, Math.sin(theta) * radius, z);
 }
 
-function xyRect(width: number, height: number): Vector3[] {
+function xyRect(width: number, height: number, z = 0): Vector3[] {
     const halfW = width / 2;
     const halfH = height / 2;
     return [
-        new Vector3(-halfW, -halfH, 0),
-        new Vector3(halfW, -halfH, 0),
-        new Vector3(halfW, halfH, 0),
-        new Vector3(-halfW, halfH, 0),
-        new Vector3(-halfW, -halfH, 0),
+        new Vector3(-halfW, -halfH, z),
+        new Vector3(halfW, -halfH, z),
+        new Vector3(halfW, halfH, z),
+        new Vector3(-halfW, halfH, z),
+        new Vector3(-halfW, -halfH, z),
     ];
 }
 

package/src/core/galleryDropMarker.ts

@@ -1,11 +1,11 @@
-import {StandardMaterial} from '@babylonjs/core/Materials/standardMaterial';
-import {Color3} from '@babylonjs/core/Maths/math.color';
-import {Vector3} from '@babylonjs/core/Maths/math.vector';
-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 {DEFAULT_GALLERY_SPACING, gallerySpan} from './galleryLayout';
+import {StandardMaterial} from '@babylonjs/core/Materials/standardMaterial.js';
+import {Color3} from '@babylonjs/core/Maths/math.color.js';
+import {Vector3} from '@babylonjs/core/Maths/math.vector.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 {DEFAULT_GALLERY_SPACING, gallerySpan} from './galleryLayout.js';
 
 /** Ground decal shown while dragging gallery items over the viewport. */
 export class GalleryDropMarker {

package/src/core/galleryLayout.ts

@@ -1,7 +1,7 @@
-import type {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera';
-import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import type {Mesh} from '@babylonjs/core/Meshes/mesh';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera.js';
+import {Vector3} from '@babylonjs/core/Maths/math.vector.js';
+import type {Mesh} from '@babylonjs/core/Meshes/mesh.js';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 
 /** Default gap between neighbouring effects in a folder gallery import. */
 export const DEFAULT_GALLERY_SPACING = 4;

package/src/core/galleryPlayback.ts

@@ -1,5 +1,5 @@
 import {QuarksUtil} from 'babylon.quarks';
-import type {SceneEntry} from './sceneEntries';
+import type {SceneEntry} from './sceneEntries.js';
 
 function isPreviewEntry(entry: SceneEntry, previewRootIds: ReadonlySet<number>): boolean {
     return previewRootIds.has(entry.root.uniqueId);

package/src/core/galleryScene.ts

@@ -1,9 +1,9 @@
-import '@babylonjs/core/Culling/ray';
-import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import type {Scene} from '@babylonjs/core/scene';
+import '@babylonjs/core/Culling/ray.js';
+import {Vector3} from '@babylonjs/core/Maths/math.vector.js';
+import type {Scene} from '@babylonjs/core/scene.js';
 import type {BatchedRenderer} from 'babylon.quarks';
-import {DEFAULT_GALLERY_SPACING, galleryGridPosition} from './galleryLayout';
-import type {SceneEntry} from './sceneEntries';
+import {DEFAULT_GALLERY_SPACING, galleryGridPosition} from './galleryLayout.js';
+import type {SceneEntry} from './sceneEntries.js';
 
 /** Clears live particles and freezes simulation for one scene entry. */
 export function clearSceneEntrySimulation(entry: SceneEntry, renderer: BatchedRenderer): void {

package/src/core/gallerySelectionMarker.ts

@@ -1,10 +1,10 @@
-import {Color3} from '@babylonjs/core/Maths/math.color';
-import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh';
-import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Scene} from '@babylonjs/core/scene';
-import './lineShaders';
+import {Color3} from '@babylonjs/core/Maths/math.color.js';
+import {Vector3} from '@babylonjs/core/Maths/math.vector.js';
+import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh.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 './lineShaders.js';
 
 export const GROUND_RING_RADIUS = 1.2;
 const RING_SEGMENTS = 64;

package/src/core/groups.ts

@@ -1,4 +1,4 @@
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 
 /**
  * Groups the given nodes under a new organizational TransformNode. Each node's world

package/src/core/history.ts

@@ -1,4 +1,4 @@
-import type {EffectBinding} from './binding';
+import type {EffectBinding} from './binding.js';
 
 const COALESCE_MS = 400;
 const MAX_DEPTH = 50;

package/src/core/indexedDbProjectStore.ts

@@ -5,7 +5,7 @@ import type {
     StoredAsset,
     StoredScene,
     StoredSceneEntry,
-} from './projectStore';
+} from './projectStore.js';
 
 const DB_NAME = 'babylon-quarks-editor';
 const DB_VERSION = 1;

package/src/core/lineShaders.ts

@@ -3,5 +3,5 @@
 // Babylon never looks, it falls back to fetching `src/Shaders/color.fragment.fx`, gets the
 // page's HTML back and the selection rings never render. Registering the shader up front, from
 // the same module graph as the rest of the editor, makes the lookup succeed either way.
-import '@babylonjs/core/Shaders/color.fragment';
-import '@babylonjs/core/Shaders/color.vertex';
+import '@babylonjs/core/Shaders/color.fragment.js';
+import '@babylonjs/core/Shaders/color.vertex.js';

package/src/core/loadEffect.ts

@@ -1,6 +1,6 @@
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Node} from '@babylonjs/core/node';
-import type {Scene} from '@babylonjs/core/scene';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {Node} from '@babylonjs/core/node.js';
+import type {Scene} from '@babylonjs/core/scene.js';
 import type {BatchedRenderer, ParticleSystem} from 'babylon.quarks';
 import {ParticleEmitter, QuarksLoader, QuarksUtil} from 'babylon.quarks';
 

package/src/core/pickAssetFiles.ts

@@ -1,4 +1,4 @@
-import {isAssetImportFile, relativePathOf} from './assets';
+import {isAssetImportFile, relativePathOf} from './assets.js';
 
 interface DirectoryPickerWindow {
     showDirectoryPicker?: (options?: {mode?: 'read' | 'readwrite'}) => Promise<FileSystemDirectoryHandle>;
@@ -54,7 +54,7 @@ export async function pickAssetFolderFiles(): Promise<File[] | null | undefined>
     }
 
     try {
-        const dir = (await picker.call(window, {mode: 'read'})) as DirectoryHandleWithEntries;
+        const dir = (await picker.call(window, {mode: 'read'})) as unknown as DirectoryHandleWithEntries;
         const files = await readAssetFilesFromDirectory(dir);
         return files.sort((a, b) => relativePathOf(a).localeCompare(relativePathOf(b)));
     } catch (err) {

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

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;
 

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,

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,
@@ -8,7 +8,7 @@ import {
     RenderMode,
     Vector4,
 } from 'babylon.quarks';
-import type {EffectBinding} from './binding';
+import type {EffectBinding} from './binding.js';
 
 export interface ChildSystemOptions {
     name?: string;

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,8 +1,8 @@
-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;

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/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,6 @@
-export {EffectBinding} from './core/binding';
-export type {EditorListener} from './core/binding';
-export {GroundPlaneResolver, ensureGroundResolver} from './core/collision';
+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 +11,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 +28,7 @@ export type {
     StoredAsset,
     StoredScene,
     StoredSceneEntry,
-} from './core/projectStore';
+} from './core/projectStore.js';
 export {
     DEFAULT_SHAPE_PARAMS,
     SHAPE_PARAM_KEYS,
@@ -36,10 +36,10 @@ 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 {buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces} from './core/values.js';
+export type {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,11 +17,11 @@ 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;

package/src/react/ChoiceDialog.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {buttonStyle, theme} from './theme';
+import {buttonStyle, theme} from './theme.js';
 
 export interface ChoiceDialogAction {
     label: string;

package/src/react/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
-import {theme} from './theme';
+import {theme} from './theme.js';
 
 export interface ContextMenuItem {
     label: string;

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;

package/src/react/EditorWorkspace.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import {IndexedDbProjectStore} from '../core/indexedDbProjectStore';
-import type {ProjectMeta, ProjectStore} from '../core/projectStore';
-import {EffectEditorHost, type EffectEditorHostProps} from './EffectEditorHost';
-import {ProjectsPage} from './ProjectsPage';
-import {theme} from './theme';
+import {IndexedDbProjectStore} from '../core/indexedDbProjectStore.js';
+import type {ProjectMeta, ProjectStore} from '../core/projectStore.js';
+import {EffectEditorHost, type EffectEditorHostProps} from './EffectEditorHost.js';
+import {ProjectsPage} from './ProjectsPage.js';
+import {theme} from './theme.js';
 
 export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
     /** Where projects are kept; defaults to the browser's IndexedDB. */