babylon.quarks-editor 0.26.0 → 0.27.0

package/dist/core/scrub.d.ts

@@ -1,5 +1,5 @@
 import type { BatchedRenderer } from 'babylon.quarks';
-import type { EffectBinding } from './binding';
+import type { EffectBinding } from './binding.js';
 /** Unpauses every system in the focused effect. */
 export declare function playFocus(binding: EffectBinding): void;
 /** Freezes the focused effect at its current simulation state. */

package/dist/core/shapes.d.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, EmitterMode } from 'babylon.quarks';
 export type ShapeType = 'point' | 'sphere' | 'hemisphere' | 'cone' | 'circle' | 'donut' | 'rectangle' | 'grid' | 'box' | 'edge' | 'mesh_surface';

package/dist/core/systems.d.ts

@@ -1,6 +1,6 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import { ParticleSystem } from 'babylon.quarks';
-import type { EffectBinding } from './binding';
+import type { EffectBinding } from './binding.js';
 export interface ChildSystemOptions {
     name?: string;
     /** One-shot burst (sub-emitter target) instead of a looping stream. */

package/dist/core/textureExport.d.ts

@@ -1,4 +1,4 @@
-import type { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import type { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
 /**
  * Ensures a texture's `.url` can be reloaded in a different Scene/Engine, baking its live
  * GPU pixels into a real base64 PNG data URI when it currently only carries Babylon's

package/dist/core/timeline.d.ts

@@ -1,6 +1,6 @@
-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 type { EffectBinding } from './binding';
+import type { EffectBinding } from './binding.js';
 export type TimelineRow = {
     kind: 'group';
     node: TransformNode;

package/dist/core/transport.d.ts

@@ -1,7 +1,7 @@
-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 { type PlaybackState } from './playback';
+import type { EffectBinding } from './binding.js';
+import { type PlaybackState } from './playback.js';
 /**
  * Stage Play/Pause shared by the viewport transport bar and the timeline. Pressing Play on a
  * one-shot focus that already parked at its end replays it from the start.

package/dist/core/transport.js

@@ -1,5 +1,5 @@
-import { clearFocusFinished, isFocusFinished, setFocusElapsed } from './playback';
-import { playFocus, scrubFocusTo } from './scrub';
+import { clearFocusFinished, isFocusFinished, setFocusElapsed } 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
  * one-shot focus that already parked at its end replays it from the start.

package/dist/core/viewportPicker.d.ts

@@ -1,7 +1,7 @@
-import '@babylonjs/core/Culling/ray';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import type { Scene } from '@babylonjs/core/scene';
-import type { SceneEntry } from './sceneEntries';
+import '@babylonjs/core/Culling/ray.js';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import type { Scene } from '@babylonjs/core/scene.js';
+import type { SceneEntry } from './sceneEntries.js';
 /**
  * Viewport pick/hover for visible scene effect roots only (not child emitters).
  * Hover uses the same ground ring as focus selection, in yellow.

package/dist/core/viewportPicker.js

@@ -1,7 +1,7 @@
-import '@babylonjs/core/Culling/ray';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { EDITOR_SCENE_NODE_METADATA } from './editorScene';
-import { GROUND_RING_RADIUS, GalleryHoverMarker } from './gallerySelectionMarker';
+import '@babylonjs/core/Culling/ray.js';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js';
+import { EDITOR_SCENE_NODE_METADATA } from './editorScene.js';
+import { GROUND_RING_RADIUS, GalleryHoverMarker } from './gallerySelectionMarker.js';
 /** Invisible pick proxy size — matches the ground ring footprint. */
 const PICK_DIAMETER = GROUND_RING_RADIUS * 2;
 /**
@@ -34,9 +34,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. */
     setHover(effectRoot) {

package/dist/index.d.ts

@@ -1,21 +1,21 @@
-export { EffectBinding } from './core/binding';
-export type { EditorListener } from './core/binding';
-export { GroundPlaneResolver, ensureGroundResolver } from './core/collision';
-export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, 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';
-export type { ProjectMeta, ProjectStore, StorageEstimate, StoredAsset, StoredScene, StoredSceneEntry, } from './core/projectStore';
-export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, 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';
+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, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } 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, StorageEstimate, StoredAsset, StoredScene, StoredSceneEntry, } from './core/projectStore.js';
+export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } 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/dist/index.js

@@ -1,12 +1,12 @@
-export { EffectBinding } from './core/binding';
-export { GroundPlaneResolver, ensureGroundResolver } from './core/collision';
-export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } from './core/colors';
-export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree';
-export { EffectHistory } from './core/history';
-export { IndexedDbProjectStore } from './core/indexedDbProjectStore';
-export { applyRendererMaterial, getMaterialLabel } from './core/material';
-export { formatBytes } from './core/projectStore';
-export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes';
-export { createChildSystem } from './core/systems';
-export { ensurePortableTextureUrl } from './core/textureExport';
-export { buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces } from './core/values';
+export { EffectBinding } from './core/binding.js';
+export { GroundPlaneResolver, ensureGroundResolver } from './core/collision.js';
+export { DEFAULT_GRADIENT_STOPS, buildColorOverLife, buildGradient, findBehavior, hexToRgb, rgbToHex, rgbaToVector4, stopToCss, stopsToCssGradient, } from './core/colors.js';
+export { buildEffectTree, collectSystems, serializeEffectForest, serializeEffectTree } from './core/effectTree.js';
+export { EffectHistory } from './core/history.js';
+export { IndexedDbProjectStore } from './core/indexedDbProjectStore.js';
+export { applyRendererMaterial, getMaterialLabel } from './core/material.js';
+export { formatBytes } from './core/projectStore.js';
+export { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from './core/shapes.js';
+export { createChildSystem } from './core/systems.js';
+export { ensurePortableTextureUrl } from './core/textureExport.js';
+export { buildCurve, buildScalar, mergePieces, readPieces, readScalar, sampleCurve, splitPieces } from './core/values.js';

package/dist/react/AssetsPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type AssetDragPayload } from '../core/assetTree';
-import { type AssetLoadProgress, type EffectAsset } from '../core/assets';
+import { type AssetDragPayload } from '../core/assetTree.js';
+import { type AssetLoadProgress, type EffectAsset } from '../core/assets.js';
 export interface AssetsPanelProps {
     assets: EffectAsset[];
     /** Scene instance count per asset id. */

package/dist/react/AssetsPanel.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, ExclamationTriangleIcon, FolderIcon, FolderOpenIcon, SparklesIcon, } from '@heroicons/react/24/solid';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { setAssetDragSession } from '../core/assetDragSession';
-import { buildAssetTree, collectFolderAssets, folderChildren, searchAssets, writeAssetDrag, } from '../core/assetTree';
-import { assetIconUrl } from '../core/assets';
-import { ContextMenu } from './ContextMenu';
-import { iconStyle } from './icons';
-import { buttonStyle, hiddenFileInputStyle, inputStyle, theme } from './theme';
+import { setAssetDragSession } from '../core/assetDragSession.js';
+import { buildAssetTree, collectFolderAssets, folderChildren, searchAssets, writeAssetDrag, } from '../core/assetTree.js';
+import { assetIconUrl } from '../core/assets.js';
+import { ContextMenu } from './ContextMenu.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, hiddenFileInputStyle, inputStyle, theme } from './theme.js';
 const TREE_WIDTH = 200;
 const TILE_WIDTH = 92;
 function beginAssetDrag(e, payload) {

package/dist/react/ChoiceDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { buttonStyle, theme } from './theme';
+import { buttonStyle, theme } from './theme.js';
 /** Confirmation modal with several outcomes (e.g. Save / Don't save / Cancel). */
 export function ChoiceDialog(props) {
     const { title, message, actions, onCancel } = props;

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,6 @@
 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';
 export interface EditorWorkspaceProps extends Omit<EffectEditorHostProps, 'project' | 'onExitProject' | 'effectJson'> {
     /** Where projects are kept; defaults to the browser's IndexedDB. */
     store?: ProjectStore;

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;

package/dist/react/EffectEditor.d.ts

@@ -1,8 +1,8 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+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';
 export interface EffectEditorProps {
     binding: EffectBinding;
     /** Currently selected system, lifted up so the timeline panel and this module stack agree. */

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,11 +1,11 @@
-import '@babylonjs/core/Culling/ray';
-import { Scene } from '@babylonjs/core/scene';
+import '@babylonjs/core/Culling/ray.js';
+import { Scene } from '@babylonjs/core/scene.js';
 import { BatchedRenderer } from 'babylon.quarks';
 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';
+import { EffectBinding } from '../core/binding.js';
+import { EffectHistory } from '../core/history.js';
+import type { ProjectStore } from '../core/projectStore.js';
+import type { GeometryData, GeometryOption, TextureOption } from './modules.js';
 export interface EffectEditorHostHandle {
     binding: EffectBinding;
     history: EffectHistory;

package/dist/react/EffectEditorHost.js

@@ -1,55 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
 // scene.pick lives in Ray's side effect (Babylon 9.31 no longer pulls it in); gizmos pick through it.
-import '@babylonjs/core/Culling/ray';
-import { Engine } from '@babylonjs/core/Engines/engine';
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
-import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager';
-import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
-import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 as BVector3 } from '@babylonjs/core/Maths/math.vector';
-import { Viewport } from '@babylonjs/core/Maths/math.viewport';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer';
-import { Scene } from '@babylonjs/core/scene';
-import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial';
+import '@babylonjs/core/Culling/ray.js';
+import { Engine } from '@babylonjs/core/Engines/engine.js';
+import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
+import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager.js';
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
+import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
+import { Vector3 as BVector3 } from '@babylonjs/core/Maths/math.vector.js';
+import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js';
+import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial.js';
 import { ArrowLeftIcon, ArrowPathIcon, ArrowsPointingOutIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, ChevronDownIcon, ChevronUpIcon, CubeTransparentIcon, CursorArrowRaysIcon, MapPinIcon, Square2StackIcon, XMarkIcon, } from '@heroicons/react/24/solid';
 import { BatchedRenderer, QuarksUtil } from 'babylon.quarks';
 import { useCallback, useDeferredValue, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { getAssetDragSession, setAssetDragSession } from '../core/assetDragSession';
-import { ASSET_DRAG_MIME, describeAssetDrag, readAssetDrag } from '../core/assetTree';
-import { collectJsonFiles, createEffectAsset, loadEffectAssets, mergeAssets, removeAssets, } from '../core/assets';
-import { createSceneDefaultEntry } from '../core/defaultEffect';
-import { serializeEffectTree } from '../core/effectTree';
-import { EmitterShapeWireframes } from '../core/emitterShapeWireframe';
-import { GalleryDropMarker } from '../core/galleryDropMarker';
-import { cancelGalleryCameraFocus, focusGalleryEntry } from '../core/galleryLayout';
-import { applyGalleryPlayback, countGalleryParticles, hasActivePreview, pauseFinishedPreviews, } from '../core/galleryPlayback';
-import { pickGroundPosition, placeSceneEntriesAt, setSceneEntryVisible } from '../core/galleryScene';
-import { GallerySelectionMarker } from '../core/gallerySelectionMarker';
-import { EffectHistory } from '../core/history';
-import { parseEffectFromJson } from '../core/loadEffect';
-import { pickAssetFolderFiles } from '../core/pickAssetFiles';
-import { clearFocusFinished, createPlaybackState, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback';
-import { logRenderMismatch } from '../core/renderDebug';
-import { bindingFromSceneEntry, countInstancesByAsset, disposeSceneEntry, instantiateSceneEntry, } from '../core/sceneEntries';
-import { pauseFocus, scrubFocusToSettled } from '../core/scrub';
-import { computeTimelineRows, computeTimelineSpan } from '../core/timeline';
-import { notifyTransformChanged, subscribeTransform } from '../core/transformStore';
-import { toggleStagePlayback } from '../core/transport';
-import { GalleryViewportPicker } from '../core/viewportPicker';
-import { AssetsPanel } from './AssetsPanel';
-import { ChoiceDialog } from './ChoiceDialog';
-import { EffectEditor } from './EffectEditor';
-import { EffectTreeView } from './EffectTreeView';
-import { MessageDialog } from './MessageDialog';
-import { PromptDialog } from './PromptDialog';
-import { ScenePanel } from './ScenePanel';
-import { TimelinePanel } from './TimelinePanel';
-import { TransportBar } from './TransportBar';
-import { iconStyle } from './icons';
-import { buttonStyle, globalEditorStyles, theme } from './theme';
+import { getAssetDragSession, setAssetDragSession } from '../core/assetDragSession.js';
+import { ASSET_DRAG_MIME, describeAssetDrag, readAssetDrag } from '../core/assetTree.js';
+import { collectJsonFiles, createEffectAsset, loadEffectAssets, mergeAssets, removeAssets, } from '../core/assets.js';
+import { createSceneDefaultEntry } from '../core/defaultEffect.js';
+import { serializeEffectTree } from '../core/effectTree.js';
+import { EmitterShapeWireframes } from '../core/emitterShapeWireframe.js';
+import { GalleryDropMarker } from '../core/galleryDropMarker.js';
+import { cancelGalleryCameraFocus, focusGalleryEntry } from '../core/galleryLayout.js';
+import { applyGalleryPlayback, countGalleryParticles, hasActivePreview, pauseFinishedPreviews, } from '../core/galleryPlayback.js';
+import { pickGroundPosition, placeSceneEntriesAt, setSceneEntryVisible } from '../core/galleryScene.js';
+import { GallerySelectionMarker } from '../core/gallerySelectionMarker.js';
+import { EffectHistory } from '../core/history.js';
+import { parseEffectFromJson } from '../core/loadEffect.js';
+import { pickAssetFolderFiles } from '../core/pickAssetFiles.js';
+import { clearFocusFinished, createPlaybackState, getFocusElapsed, isFocusFinished, markFocusFinished, setFocusElapsed, } from '../core/playback.js';
+import { logRenderMismatch } from '../core/renderDebug.js';
+import { bindingFromSceneEntry, countInstancesByAsset, disposeSceneEntry, instantiateSceneEntry, } from '../core/sceneEntries.js';
+import { pauseFocus, scrubFocusToSettled } from '../core/scrub.js';
+import { computeTimelineRows, computeTimelineSpan } from '../core/timeline.js';
+import { notifyTransformChanged, subscribeTransform } from '../core/transformStore.js';
+import { toggleStagePlayback } from '../core/transport.js';
+import { GalleryViewportPicker } from '../core/viewportPicker.js';
+import { AssetsPanel } from './AssetsPanel.js';
+import { ChoiceDialog } from './ChoiceDialog.js';
+import { EffectEditor } from './EffectEditor.js';
+import { EffectTreeView } from './EffectTreeView.js';
+import { MessageDialog } from './MessageDialog.js';
+import { PromptDialog } from './PromptDialog.js';
+import { ScenePanel } from './ScenePanel.js';
+import { TimelinePanel } from './TimelinePanel.js';
+import { TransportBar } from './TransportBar.js';
+import { iconStyle } from './icons.js';
+import { buttonStyle, globalEditorStyles, theme } from './theme.js';
 /**
  * The effect's JSON, with a warning when it points at object URLs: a texture
  * dropped in from disk lives at a `blob:` URL that dies with the page, so the
@@ -274,11 +274,12 @@ export function EffectEditorHost(props) {
         })();
     };
     useEffect(() => {
-        const engine = new Engine(canvasRef.current, true);
+        const canvas = canvasRef.current;
+        const engine = new Engine(canvas, true);
         const scene = new Scene(engine);
         scene.clearColor = new Color4(0.03, 0.04, 0.09, 1);
         const camera = new ArcRotateCamera('cam', -Math.PI / 2, 1.15, 9, new BVector3(0, 1.4, 0), scene);
-        camera.attachControl(canvasRef.current, true);
+        camera.attachControl(canvas, true);
         camera.wheelDeltaPercentage = 0.01;
         // Mesh render mode particles are lit (billboard modes ignore these); the grid is visual
         // reference only and is not a physics collider.
@@ -330,7 +331,7 @@ export function EffectEditorHost(props) {
         };
         const state = stateRef.current;
         const handleViewportPointerLeave = () => viewportPicker.setHover(null);
-        canvasRef.current?.addEventListener('pointerleave', handleViewportPointerLeave);
+        canvas.addEventListener('pointerleave', handleViewportPointerLeave);
         const pointerObserver = scene.onPointerObservable.add((pointerInfo) => {
             if (assetDragDepthRef.current > 0) {
                 return;
@@ -1118,7 +1119,7 @@ export function EffectEditorHost(props) {
             }
         });
         const resizeObserver = new ResizeObserver(() => engine.resize());
-        resizeObserver.observe(canvasRef.current);
+        resizeObserver.observe(canvas);
         const onKey = (e) => {
             const key = e.key.toLowerCase();
             if ((e.ctrlKey || e.metaKey) && key === 's') {
@@ -1181,13 +1182,13 @@ export function EffectEditorHost(props) {
             emitterWireframesRef.current = null;
             viewportPicker.dispose();
             viewportPickerRef.current = null;
-            canvasRef.current?.removeEventListener('pointerleave', handleViewportPointerLeave);
+            canvas.removeEventListener('pointerleave', handleViewportPointerLeave);
             scene.onPointerObservable.remove(pointerObserver);
             gizmoManager.dispose();
             gizmoUtilityLayer.dispose();
             engine.dispose();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- mount only: builds the engine and scene once
     }, []);
     useEffect(() => {
         playbackRef.current.stagePlaying = stagePlaying;
@@ -1320,11 +1321,6 @@ export function EffectEditorHost(props) {
         gm.attachToNode(target);
     }, [selectedNode, binding, isAssetsLoading]);
     const state = stateRef.current;
-    const gizmoNode = selectedNode && !selectedNode.isDisposed()
-        ? selectedNode
-        : binding?.root && !binding.root.isDisposed()
-            ? binding.root
-            : null;
     const allSystems = binding ? [binding.system, ...binding.subSystems] : [];
     const activeSystem = binding ? (allSystems.find((s) => s.emitter === selectedNode) ?? binding.system) : null;
     // The inspector is the expensive part of a selection change (every module re-renders for the
@@ -1344,17 +1340,18 @@ export function EffectEditorHost(props) {
     const instanceCounts = useMemo(() => countInstancesByAsset(sceneEntries), [sceneEntries]);
     const showTimeline = Boolean(binding && activeSystem && state);
     const timelinePlaybackEnabled = !focusedRoot || visibleRootIdSet.has(focusedRoot.uniqueId);
+    const { resolveTexture, resolveGeometry } = props;
     const resolveTextureForEditor = useCallback((url) => {
         const scene = stateRef.current?.scene;
-        return scene && props.resolveTexture ? props.resolveTexture(url, scene) : undefined;
-    }, [props.resolveTexture]);
+        return scene && resolveTexture ? resolveTexture(url, scene) : undefined;
+    }, [resolveTexture]);
     const resolveGeometryForEditor = useCallback((file) => {
         const scene = stateRef.current?.scene;
-        if (!scene || !props.resolveGeometry) {
+        if (!scene || !resolveGeometry) {
             return Promise.reject(new Error('Geometry loader is not available.'));
         }
-        return props.resolveGeometry(file, scene);
-    }, [props.resolveGeometry]);
+        return resolveGeometry(file, scene);
+    }, [resolveGeometry]);
     return (_jsxs("div", { className: "qe-root", style: {
             display: 'flex',
             flexDirection: 'column',

package/dist/react/EffectTreeView.d.ts

@@ -1,4 +1,4 @@
-import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import React from 'react';
 export interface EffectTreeViewProps {
     root: TransformNode;

package/dist/react/EffectTreeView.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, FolderIcon, SparklesIcon } from '@heroicons/react/24/solid';
 import { useState } from 'react';
-import { buildEffectTree } from '../core/effectTree';
-import { iconStyle } from './icons';
-import { theme } from './theme';
+import { buildEffectTree } from '../core/effectTree.js';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
 const ROW_HEIGHT = 26;
 function TreeRow(props) {
     const { item, level, indent, selectedNode, collapsed, onToggle, onSelect } = props;

package/dist/react/GradientEditor.d.ts

@@ -1,4 +1,4 @@
-import { GradientStop } from '../core/colors';
+import { GradientStop } from '../core/colors.js';
 /** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
 export declare function GradientEditor(props: {
     stops: GradientStop[];

package/dist/react/GradientEditor.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { hexToRgb, rgbToHex, stopsToCssGradient } from '../core/colors';
-import { NumberField, Row } from './fields';
-import { buttonStyle, theme } from './theme';
+import { hexToRgb, rgbToHex, stopsToCssGradient } from '../core/colors.js';
+import { NumberField, Row } from './fields.js';
+import { buttonStyle, theme } from './theme.js';
 const BAR_WIDTH = 218;
 /** Gradient editor: RGBA stops on a bar — click to add, drag to move, edit the selected stop. */
 export function GradientEditor(props) {

package/dist/react/InspectorInfoIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InformationCircleIcon } from '@heroicons/react/24/solid';
-import { iconStyle } from './icons';
-import { theme } from './theme';
-import { Tooltip } from './Tooltip';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
+import { Tooltip } from './Tooltip.js';
 /** Small info icon with a themed inspector tooltip. */
 export function InspectorInfoIcon(props) {
     const size = props.size ?? 13;

package/dist/react/InspectorLabel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getInspectorHint } from './inspectorHints';
-import { InspectorInfoIcon } from './InspectorInfoIcon';
-import { labelStyle } from './theme';
+import { getInspectorHint } from './inspectorHints.js';
+import { InspectorInfoIcon } from './InspectorInfoIcon.js';
+import { labelStyle } from './theme.js';
 /** Inspector row label with an optional info icon tooltip. */
 export function InspectorLabel(props) {
     if (!props.label) {

package/dist/react/MessageDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buttonStyle, theme } from './theme';
+import { buttonStyle, theme } from './theme.js';
 /** Modal for info and error messages — same chrome as PromptDialog, no text input. */
 export function MessageDialog(props) {
     const { title, message, confirmLabel = 'OK', onClose } = props;