babylon.quarks-editor 0.25.0 → 0.27.0

package/dist/react/index.d.ts

@@ -1,38 +1,40 @@
-export { AssetsPanel } from './AssetsPanel';
-export type { AssetsPanelProps } from './AssetsPanel';
-export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
-export { ChoiceDialog } from './ChoiceDialog';
-export type { ChoiceDialogAction, ChoiceDialogProps } from './ChoiceDialog';
-export { ContextMenu } from './ContextMenu';
-export type { ContextMenuItem, ContextMenuProps } from './ContextMenu';
-export { CurveEditor } from './CurveEditor';
-export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace';
-export type { EditorWorkspaceProps } from './EditorWorkspace';
-export { EffectEditor } from './EffectEditor';
-export type { EffectEditorProps } from './EffectEditor';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
-export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost';
-export { EffectTreeView } from './EffectTreeView';
-export type { EffectTreeViewProps } from './EffectTreeView';
-export { CheckboxField, NumberField, Row, SelectField } from './fields';
-export { GradientEditor } from './GradientEditor';
-export { MessageDialog } from './MessageDialog';
-export type { MessageDialogProps } from './MessageDialog';
-export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
-export type { GeometryData, GeometryOption, TextureOption } from './modules';
-export { ModuleSection } from './ModuleSection';
-export { ProjectsPage } from './ProjectsPage';
-export type { ProjectsPageProps } from './ProjectsPage';
-export { PromptDialog } from './PromptDialog';
-export type { PromptDialogProps } from './PromptDialog';
-export { ScenePanel } from './ScenePanel';
-export type { ScenePanelProps } from './ScenePanel';
-export { SubEmittersModule } from './SubEmittersModule';
-export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
-export { TimelinePanel } from './TimelinePanel';
-export type { PlaybackState, TimelinePanelProps } from './TimelinePanel';
-export { TimelineTrackRow } from './TimelineTrackRow';
-export type { TimelineTrackRowProps } from './TimelineTrackRow';
-export { TransportBar } from './TransportBar';
-export type { TransportBarProps } from './TransportBar';
-export { ValueField } from './ValueField';
+export { AssetsPanel } from './AssetsPanel.js';
+export type { AssetsPanelProps } from './AssetsPanel.js';
+export { AttractorModule, CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules.js';
+export { ChoiceDialog } from './ChoiceDialog.js';
+export type { ChoiceDialogAction, ChoiceDialogProps } from './ChoiceDialog.js';
+export { ContextMenu } from './ContextMenu.js';
+export type { ContextMenuItem, ContextMenuProps } from './ContextMenu.js';
+export { CurveEditor } from './CurveEditor.js';
+export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace.js';
+export type { EditorWorkspaceProps } from './EditorWorkspace.js';
+export { EffectEditor } from './EffectEditor.js';
+export type { EffectEditorProps } from './EffectEditor.js';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost.js';
+export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost.js';
+export { EffectTreeView } from './EffectTreeView.js';
+export type { EffectTreeViewProps } from './EffectTreeView.js';
+export { CheckboxField, NumberField, Row, SelectField } from './fields.js';
+export { GradientEditor } from './GradientEditor.js';
+export { MessageDialog } from './MessageDialog.js';
+export type { MessageDialogProps } from './MessageDialog.js';
+export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules.js';
+export type { GeometryData, GeometryOption, TextureOption } from './modules.js';
+export { ModuleSection } from './ModuleSection.js';
+export { ProjectsPage } from './ProjectsPage.js';
+export type { ProjectsPageProps } from './ProjectsPage.js';
+export { PromptDialog } from './PromptDialog.js';
+export type { PromptDialogProps } from './PromptDialog.js';
+export { ScenePanel } from './ScenePanel.js';
+export type { ScenePanelProps } from './ScenePanel.js';
+export { SubEmittersModule } from './SubEmittersModule.js';
+export { TextureSelect, textureUrlOf } from './TextureSelect.js';
+export { TextureUVField } from './TextureUVField.js';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme.js';
+export { TimelinePanel } from './TimelinePanel.js';
+export type { PlaybackState, TimelinePanelProps } from './TimelinePanel.js';
+export { TimelineTrackRow } from './TimelineTrackRow.js';
+export type { TimelineTrackRowProps } from './TimelineTrackRow.js';
+export { TransportBar } from './TransportBar.js';
+export type { TransportBarProps } from './TransportBar.js';
+export { ValueField } from './ValueField.js';

package/dist/react/index.js

@@ -1,23 +1,25 @@
-export { AssetsPanel } from './AssetsPanel';
-export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
-export { ChoiceDialog } from './ChoiceDialog';
-export { ContextMenu } from './ContextMenu';
-export { CurveEditor } from './CurveEditor';
-export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace';
-export { EffectEditor } from './EffectEditor';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
-export { EffectTreeView } from './EffectTreeView';
-export { CheckboxField, NumberField, Row, SelectField } from './fields';
-export { GradientEditor } from './GradientEditor';
-export { MessageDialog } from './MessageDialog';
-export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
-export { ModuleSection } from './ModuleSection';
-export { ProjectsPage } from './ProjectsPage';
-export { PromptDialog } from './PromptDialog';
-export { ScenePanel } from './ScenePanel';
-export { SubEmittersModule } from './SubEmittersModule';
-export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
-export { TimelinePanel } from './TimelinePanel';
-export { TimelineTrackRow } from './TimelineTrackRow';
-export { TransportBar } from './TransportBar';
-export { ValueField } from './ValueField';
+export { AssetsPanel } from './AssetsPanel.js';
+export { AttractorModule, CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules.js';
+export { ChoiceDialog } from './ChoiceDialog.js';
+export { ContextMenu } from './ContextMenu.js';
+export { CurveEditor } from './CurveEditor.js';
+export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace.js';
+export { EffectEditor } from './EffectEditor.js';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost.js';
+export { EffectTreeView } from './EffectTreeView.js';
+export { CheckboxField, NumberField, Row, SelectField } from './fields.js';
+export { GradientEditor } from './GradientEditor.js';
+export { MessageDialog } from './MessageDialog.js';
+export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules.js';
+export { ModuleSection } from './ModuleSection.js';
+export { ProjectsPage } from './ProjectsPage.js';
+export { PromptDialog } from './PromptDialog.js';
+export { ScenePanel } from './ScenePanel.js';
+export { SubEmittersModule } from './SubEmittersModule.js';
+export { TextureSelect, textureUrlOf } from './TextureSelect.js';
+export { TextureUVField } from './TextureUVField.js';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme.js';
+export { TimelinePanel } from './TimelinePanel.js';
+export { TimelineTrackRow } from './TimelineTrackRow.js';
+export { TransportBar } from './TransportBar.js';
+export { ValueField } from './ValueField.js';

package/dist/react/inspectorHints.js

@@ -13,6 +13,7 @@ const INSPECTOR_HINTS = {
     'Velocity over Lifetime': 'Adds linear and orbital velocity each frame in local or world space.',
     'Inherit Velocity': 'Copies the emitter’s movement into new particle velocity.',
     Gravity: 'Applies a constant downward force (Earth-like gravity by default).',
+    Attractor: 'Pulls particles towards a point, harder the nearer they are (a point gravity).',
     'Rotation over Lifetime': 'Spins particles by setting angular velocity over lifetime.',
     Noise: 'Procedural noise that jitters particle position and rotation.',
     Turbulence: '3D turbulent velocity field that swirls particles through space.',
@@ -30,7 +31,9 @@ const INSPECTOR_HINTS = {
     Duration: 'How long the particle system runs before stopping (non-looping) or one loop cycle.',
     Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
     'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
+    'Scaling mode': 'What the emitter’s scale does to a world-space system: only the shape and sizes, or speeds and forces too (Unity’s Scaling Mode).',
     Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
+    'Warm-up time': 'Seconds of the cycle simulated before the first frame of a looping system (Niagara’s Warmup Time); 0 warms up a whole cycle, as Unity does.',
     'Start delay': 'Wait time before emission starts after play or restart.',
     'Start lifetime': 'How long each spawned particle lives before dying.',
     'Start speed': 'Initial speed along the emission direction when a particle is born.',
@@ -66,12 +69,32 @@ const INSPECTOR_HINTS = {
     'Render mode': 'Orientation and geometry used to draw each particle.',
     'Trail length': 'Maximum number of trail segments per particle (trail mode).',
     'Follow origin': 'Keeps the trail anchored to the emitter origin instead of the particle head.',
+    'Texture mode': 'How the texture runs along the ribbon: once by distance, once with each segment an equal share, repeated per world unit, or once per segment.',
+    'Texture scale': 'Repeats of the texture: per world unit (tile), per segment (repeat), or over the ribbon.',
+    'Min vertex distance': 'The particle has to move this far before a new point is fixed; the last point follows it meanwhile. 0: a point every step.',
+    'Trail time': 'How long a point is kept, in seconds, within the trail length. 0: until the trail length is reached.',
     'Speed factor': 'How much particle speed stretches the billboard (stretched billboard mode).',
     'Length factor': 'Base stretch multiplier for stretched billboards.',
     Source: 'Material preset loaded from the effect JSON (read-only reference).',
     'Blend mode': 'How particle color is composited over the background.',
     Transparent: 'Enables alpha blending for soft edges and fade-outs.',
     Texture: 'Sprite or flipbook image applied to each particle.',
+    'UV channel': 'Which UV set the texture reads: the sprite or mesh UV, or a mesh’s second set / the length of a trail.',
+    Tiling: 'Repeats of the texture across the UV range, U and V (Unity’s material Tiling).',
+    Offset: 'Shift of the texture in UV units after tiling, U and V (Unity’s material Offset).',
+    Scroll: 'UV units per second the texture moves on the renderer’s clock (Unreal’s Panner).',
+    'Flip U/V': 'Fraction of particles mirrored horizontally and vertically, picked at birth (Unity’s renderer Flip).',
+    Ramp: 'Colour ramp read left to right; without one there is no gradient map.',
+    'Ramp channel': 'Which value of the map texel picks the colour along the ramp: one channel of a packed texture, or luminance.',
+    Erosion: 'Lets alpha erode the shape through a mask instead of fading it.',
+    'Erosion mask': 'Texture whose red channel orders what goes first; none uses the map’s own alpha.',
+    Softness: 'Width of the soft transition at the erosion cut, in mask units.',
+    'Edge width': 'Width of the glowing band above the erosion cut; 0 draws none.',
+    'Edge color': 'Linear RGB added in the edge band; may exceed 1 for a glow.',
+    'Noise texture': 'Texture whose red and green channels push the map’s UV about; it should repeat.',
+    'Distortion strength': 'How far the map’s UV is pushed at most, in UV units.',
+    'Swept trail': 'Spans the ribbon along a fixed axis of the emitter instead of facing the camera (a weapon trail).',
+    'Side axis': 'Local axis the swept trail spans its width along; give a unit vector.',
     'Alpha test': 'Pixels below this alpha are discarded (cutout/hard edges).',
     'Depth write': 'Writes to the depth buffer — usually off for additive particles.',
     'Depth test': 'Whether particles are occluded by scene geometry.',
@@ -85,6 +108,14 @@ const INSPECTOR_HINTS = {
     'Blend tiles': 'Smoothly blends between adjacent atlas tiles during animation.',
     'Start tile': 'Atlas cell index where playback begins (0 = top-left).',
     'Animate frames': 'Enables frame-over-lifetime curve to cycle through atlas tiles.',
+    'Time mode': 'Lifetime samples the curve over each particle’s life; FPS plays frames by age from the curve’s frame.',
+    FPS: 'Frames per second in FPS mode.',
+    Loop: 'In FPS mode, wrap back to the first frame of the segment, or hold the last.',
+    'Random frame': 'In FPS mode, show a random frame of the segment every tick instead of the next one.',
+    'Frame count': 'Frames in the segment that plays, from the first frame; 0 means no segment.',
+    'Start frame': 'Starts each particle on a random one of the first N frames (Unity’s Start Frame); editing sets a 0…N range.',
+    'attractor.center': 'Point in the system’s space particles are pulled towards.',
+    'attractor.magnitude': 'Pull strength, divided by the squared distance to the center.',
     // Sub emitters
     Trigger: 'When the child system is spawned: on particle birth, death, or every frame.',
     'Use velocity': 'Orients the sub-emitter spawn using the parent particle’s velocity.',

package/dist/react/modules.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EffectBinding } from '../core/binding';
+import { EffectBinding } from '../core/binding.js';
 interface ModuleProps {
     binding: EffectBinding;
 }
@@ -22,6 +22,8 @@ export interface GeometryOption {
     positions: Float32Array | number[];
     indices?: Uint32Array | number[];
     uvs?: Float32Array | number[];
+    /** A second UV set (glTF `TEXCOORD_1`), what textures on UV channel 1 read on the mesh. */
+    uvs2?: Float32Array | number[];
     normals?: Float32Array | number[];
 }
 /** Vertex buffers a host loader (e.g. a GLB importer) returns for the Mesh render mode. */

package/dist/react/modules.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { AxisAngleGenerator, BoxEmitFrom, ColorOverLife, ColorRange, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3, Vector3Function, Vector4, } from 'babylon.quarks';
-import React, { useMemo, useState } from 'react';
-import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors';
-import { applyRendererMaterial, getMaterialLabel } from '../core/material';
-import { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from '../core/shapes';
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
-import { CurveEditor } from './CurveEditor';
-import { GradientEditor } from './GradientEditor';
-import { InspectorInfoIcon } from './InspectorInfoIcon';
-import { ModuleSection } from './ModuleSection';
-import { PromptDialog } from './PromptDialog';
-import { ValueField } from './ValueField';
-import { CheckboxField, NumberField, Row, SelectField } from './fields';
-import { iconStyle } from './icons';
-import { theme } from './theme';
+import { AxisAngleGenerator, BoxEmitFrom, ColorOverLife, ColorRange, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector2, Vector3, Vector3Function, Vector4, normalizeTextureUV, } from 'babylon.quarks';
+import React, { useMemo } from 'react';
+import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors.js';
+import { applyRendererMaterial, getMaterialLabel } from '../core/material.js';
+import { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from '../core/shapes.js';
+import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
+import { CurveEditor } from './CurveEditor.js';
+import { GradientEditor } from './GradientEditor.js';
+import { InspectorInfoIcon } from './InspectorInfoIcon.js';
+import { ModuleSection } from './ModuleSection.js';
+import { TextureSelect } from './TextureSelect.js';
+import { TextureUVField } from './TextureUVField.js';
+import { ValueField } from './ValueField.js';
+import { CheckboxField, NumberField, Row, SelectField } from './fields.js';
+import { iconStyle } from './icons.js';
+import { theme } from './theme.js';
 const MESH_QUAD_POSITIONS = new Float32Array([-0.5, -0.5, 0, 0.5, -0.5, 0, 0.5, 0.5, 0, -0.5, 0.5, 0]);
 const MESH_QUAD_INDICES = new Uint32Array([0, 1, 2, 0, 2, 3]);
 const MESH_QUAD_UVS = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
@@ -61,6 +62,29 @@ const PARAM_LABELS = {
     depth: 'Depth',
     speed: 'Speed (lengths/s)',
 };
+/** Uppercase group title inside a module, as the Renderer's "Material" heading. */
+function SubHeader(props) {
+    return (_jsxs("div", { style: {
+            marginTop: 10,
+            marginBottom: 2,
+            fontSize: 11,
+            fontWeight: 600,
+            color: '#7c8db5',
+            textTransform: 'uppercase',
+            letterSpacing: 0.4,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 5,
+        }, children: [props.title, _jsx(InspectorInfoIcon, { content: props.hint, size: 12 })] }));
+}
+/** Three number inputs editing a Vector3 by value. */
+function AxisField(props) {
+    return (_jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: props.value[axis], step: 0.1, onChange: (v) => {
+                const next = props.value.clone();
+                next[axis] = v;
+                props.onChange(next);
+            } }, axis))) }));
+}
 function ColorInput(props) {
     const { value, onChange } = props;
     return (_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("input", { type: "color", className: "qe-hover", value: rgbToHex(value.x, value.y, value.z), onChange: (e) => {
@@ -118,7 +142,10 @@ export function MainModule({ binding }) {
         : startColor instanceof Gradient
             ? 'gradient'
             : colorMode;
-    return (_jsxs(ModuleSection, { title: "Main", children: [_jsx(Row, { label: "Duration", children: _jsx(NumberField, { value: system.duration, min: 0.05, onChange: (v) => binding.apply((s) => (s.duration = v)) }) }), _jsx(Row, { label: "Looping", children: _jsx(CheckboxField, { value: system.looping, onChange: (v) => binding.apply((s) => (s.looping = v)) }) }), _jsx(Row, { label: "World space", children: _jsx(CheckboxField, { value: system.worldSpace, onChange: (v) => binding.apply((s) => (s.worldSpace = v)) }) }), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), _jsx(Row, { label: "Playback speed", children: _jsx(NumberField, { value: system.playbackSpeed, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.playbackSpeed = Math.max(0, v))) }) }), _jsxs(Row, { label: "Fixed seed", children: [_jsx(CheckboxField, { value: system.seed !== undefined, onChange: (v) => binding.apply((s) => (s.seed = v ? (s.seed ?? 1) : undefined)) }), system.seed !== undefined && (_jsx(NumberField, { value: system.seed, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.seed = Math.max(0, Math.floor(v)))) }))] }), _jsx(Row, { label: "Off screen", children: _jsx(SelectField, { value: system.cullingMode, options: [
+    return (_jsxs(ModuleSection, { title: "Main", children: [_jsx(Row, { label: "Duration", children: _jsx(NumberField, { value: system.duration, min: 0.05, onChange: (v) => binding.apply((s) => (s.duration = v)) }) }), _jsx(Row, { label: "Looping", children: _jsx(CheckboxField, { value: system.looping, onChange: (v) => binding.apply((s) => (s.looping = v)) }) }), _jsx(Row, { label: "World space", children: _jsx(CheckboxField, { value: system.worldSpace, onChange: (v) => binding.apply((s) => (s.worldSpace = v)) }) }), system.worldSpace && (_jsx(Row, { label: "Scaling mode", children: _jsx(SelectField, { value: system.scalingMode, options: [
+                        { value: 'shape', label: 'Shape (sizes and shape only)' },
+                        { value: 'hierarchy', label: 'Hierarchy (motion scales too)' },
+                    ], onChange: (mode) => binding.apply((s) => (s.scalingMode = mode)) }) })), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), system.prewarm && (_jsx(Row, { label: "Warm-up time", children: _jsx(NumberField, { value: system.prewarmTime, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.prewarmTime = Math.max(0, v))) }) })), _jsx(Row, { label: "Playback speed", children: _jsx(NumberField, { value: system.playbackSpeed, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.playbackSpeed = Math.max(0, v))) }) }), _jsxs(Row, { label: "Fixed seed", children: [_jsx(CheckboxField, { value: system.seed !== undefined, onChange: (v) => binding.apply((s) => (s.seed = v ? (s.seed ?? 1) : undefined)) }), system.seed !== undefined && (_jsx(NumberField, { value: system.seed, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.seed = Math.max(0, Math.floor(v)))) }))] }), _jsx(Row, { label: "Off screen", children: _jsx(SelectField, { value: system.cullingMode, options: [
                         { value: 'always', label: 'Always simulate' },
                         { value: 'pause', label: 'Pause' },
                         { value: 'pauseAndCatchUp', label: 'Pause and catch up' },
@@ -351,9 +378,13 @@ function MeshPreview({ positions, indices, size = 96, }) {
 }
 export function RendererModule({ binding, textureOptions, geometryOptions, resolveTexture, resolveGeometry, }) {
     const system = binding.system;
-    const currentTextureUrl = system.texture?.url ?? '';
-    const [promptingTextureUrl, setPromptingTextureUrl] = useState(false);
     const materialLabel = getMaterialLabel(system.material);
+    const isMesh = system.renderMode === RenderMode.Mesh;
+    const gradientMap = system.gradientMap;
+    const erosion = system.erosion;
+    const distortion = system.uvDistortion;
+    const patchErosion = (patch) => binding.apply((s) => (s.erosion = { ...s.erosion, ...patch }));
+    const patchDistortion = (patch) => binding.apply((s) => (s.uvDistortion = { ...s.uvDistortion, ...patch }));
     const loadTexture = useMemo(() => {
         return (url) => {
             if (resolveTexture) {
@@ -386,88 +417,53 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                         ['dieWithParticle', 'Die with particle'],
                     ].map(([key, label]) => (_jsx(Row, { label: label, children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings[key], onChange: (v) => binding.apply((s) => {
                                 s.rendererEmitterSettings[key] = v;
-                            }) }) }, key))), _jsx(Row, { label: "Head width scale", children: _jsx(NumberField, { value: system.rendererEmitterSettings.headWidthScale ?? 1, min: 0, step: 0.1, onChange: (v) => binding.apply((s) => {
-                                s.rendererEmitterSettings.headWidthScale = v;
-                            }) }) })] })), system.renderMode === RenderMode.StretchedBillBoard && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Speed factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.speedFactor ?? 0, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.speedFactor = v)) }) }), _jsx(Row, { label: "Length factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.lengthFactor ?? 2, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.lengthFactor = v)) }) })] })), _jsxs("div", { style: {
-                    marginTop: 10,
-                    marginBottom: 2,
-                    fontSize: 11,
-                    fontWeight: 600,
-                    color: '#7c8db5',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.4,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 5,
-                }, children: ["Material", _jsx(InspectorInfoIcon, { content: "Shader and blending settings applied to the particle sprite or mesh.", size: 12 })] }), materialLabel ? (_jsx(Row, { label: "Source", children: _jsx("div", { style: { fontSize: 12, color: theme.textDim, lineHeight: 1.45 }, children: materialLabel }) })) : null, _jsx(Row, { label: "Blend mode", children: _jsx(SelectField, { value: system.blending, options: [
+                            }) }) }, key))), _jsx(Row, { label: "Tessellation", children: _jsx(NumberField, { value: system.rendererEmitterSettings.tessellation ?? 0, min: 0, max: 16, step: 1, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.tessellation = Math.round(v);
+                            }) }) }), _jsx(Row, { label: "Curve tension", children: _jsx(NumberField, { value: system.rendererEmitterSettings.curveTension ?? 0, min: 0, max: 1, step: 0.05, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.curveTension = v;
+                            }) }) }), _jsx(Row, { label: "Texture mode", children: _jsx(SelectField, { value: system.rendererEmitterSettings.textureMode ?? 'stretch', options: [
+                                { value: 'stretch', label: 'Stretch (once, by distance)' },
+                                { value: 'distributePerSegment', label: 'Distribute per segment' },
+                                { value: 'tile', label: 'Tile (per world unit)' },
+                                { value: 'repeatPerSegment', label: 'Repeat per segment' },
+                            ], onChange: (mode) => binding.apply((s) => {
+                                s.rendererEmitterSettings.textureMode =
+                                    mode === 'stretch' ? undefined : mode;
+                            }) }) }), _jsx(Row, { label: "Texture scale", children: _jsx(NumberField, { value: system.rendererEmitterSettings.textureScale ?? 1, min: 0.01, step: 0.1, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.textureScale = v === 1 ? undefined : v;
+                            }) }) }), _jsx(Row, { label: "Min vertex distance", children: _jsx(NumberField, { value: system.rendererEmitterSettings.minVertexDistance ?? 0, min: 0, step: 0.05, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.minVertexDistance =
+                                    v > 0 ? v : undefined;
+                            }) }) }), _jsx(Row, { label: "Trail time", children: _jsx(NumberField, { value: system.rendererEmitterSettings.lifetime ?? 0, min: 0, step: 0.1, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.lifetime = v > 0 ? v : undefined;
+                            }) }) }), _jsx(Row, { label: "Swept trail", children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings.sideAxis, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.sideAxis = v
+                                    ? new Vector3(0, 1, 0)
+                                    : undefined;
+                            }) }) }), system.rendererEmitterSettings.sideAxis && (_jsx(Row, { label: "Side axis", children: _jsx(AxisField, { value: system.rendererEmitterSettings.sideAxis, onChange: (axis) => binding.apply((s) => {
+                                // The axis's length scales the width: keep it a unit vector.
+                                s.rendererEmitterSettings.sideAxis =
+                                    axis.length() > 0 ? axis.normalize() : axis;
+                            }) }) }))] })), system.renderMode === RenderMode.StretchedBillBoard && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Speed factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.speedFactor ?? 0, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.speedFactor = v)) }) }), _jsx(Row, { label: "Length factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.lengthFactor ?? 2, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.lengthFactor = v)) }) })] })), _jsx(SubHeader, { title: "Material", hint: "Shader and blending settings applied to the particle sprite or mesh." }), materialLabel ? (_jsx(Row, { label: "Source", children: _jsx("div", { style: { fontSize: 12, color: theme.textDim, lineHeight: 1.45 }, children: materialLabel }) })) : null, _jsx(Row, { label: "Blend mode", children: _jsx(SelectField, { value: system.blending, options: [
                         { value: 1, label: 'Additive' },
                         { value: 2, label: 'Alpha blend' },
                         { value: 3, label: 'Subtract' },
                         { value: 4, label: 'Multiply' },
-                    ], onChange: (blend) => patchMaterial({ blendMode: blend }) }) }), _jsx(Row, { label: "Transparent", children: _jsx(CheckboxField, { value: !!system.getRendererSettings().materialTransparent, onChange: (v) => patchMaterial({ transparent: v }) }) }), _jsxs(Row, { label: "Texture", children: [_jsx(SelectField, { value: !currentTextureUrl
-                            ? '__none'
-                            : (textureOptions ?? []).some((o) => o.url === currentTextureUrl)
-                                ? currentTextureUrl
-                                : '__current', options: [
-                            { value: '__none', label: '(none)' },
-                            ...(currentTextureUrl && !(textureOptions ?? []).some((o) => o.url === currentTextureUrl)
-                                ? [{ value: '__current', label: `(current) ${currentTextureUrl.slice(-24)}` }]
-                                : []),
-                            ...(textureOptions ?? []).map((o) => ({ value: o.url, label: o.label })),
-                            { value: '__url', label: 'Custom URL…' },
-                            { value: '__file', label: 'Load from file…' },
-                        ], onChange: (url) => {
-                            if (url === '__current') {
-                                return;
-                            }
-                            if (url === '__none') {
-                                patchMaterial({ texture: null });
-                                return;
-                            }
-                            if (url === '__url') {
-                                setPromptingTextureUrl(true);
-                                return;
-                            }
-                            if (url === '__file') {
-                                const input = document.createElement('input');
-                                input.type = 'file';
-                                input.accept = 'image/*';
-                                input.onchange = () => {
-                                    const file = input.files?.[0];
-                                    if (!file) {
-                                        return;
-                                    }
-                                    const reader = new FileReader();
-                                    reader.onload = () => {
-                                        const texture = loadTexture(reader.result);
-                                        if (texture) {
-                                            patchMaterial({ texture });
-                                        }
-                                    };
-                                    reader.readAsDataURL(file);
-                                };
-                                input.click();
-                                return;
-                            }
-                            const texture = loadTexture(url);
-                            if (texture) {
-                                patchMaterial({ texture });
-                            }
-                        } }), promptingTextureUrl && (_jsx(PromptDialog, { title: "Texture URL", defaultValue: currentTextureUrl, placeholder: "https://\u2026", onSubmit: (url) => {
-                            const texture = loadTexture(url);
-                            if (texture) {
-                                patchMaterial({ texture });
-                            }
-                            setPromptingTextureUrl(false);
-                        }, onCancel: () => setPromptingTextureUrl(false) })), currentTextureUrl && (_jsx("img", { src: currentTextureUrl, alt: "texture preview", style: {
-                            width: 64,
-                            height: 64,
-                            marginTop: 6,
-                            objectFit: 'contain',
-                            borderRadius: 6,
-                            border: '1px solid #2b3761',
-                            background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
-                        } }))] }), _jsx(Row, { label: "Alpha test", children: _jsx(NumberField, { value: system.getRendererSettings().materialAlphaTest ?? 0, min: 0, step: 0.05, onChange: (v) => patchMaterial({ alphaTest: Math.min(1, v) }) }) }), _jsx(Row, { label: "Depth write", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthWrite, onChange: (v) => patchMaterial({ depthWrite: v }) }) }), _jsx(Row, { label: "Depth test", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthTest, onChange: (v) => patchMaterial({ depthTest: v }) }) }), system.renderMode === RenderMode.Mesh &&
+                    ], onChange: (blend) => patchMaterial({ blendMode: blend }) }) }), _jsx(Row, { label: "Transparent", children: _jsx(CheckboxField, { value: !!system.getRendererSettings().materialTransparent, onChange: (v) => patchMaterial({ transparent: v }) }) }), _jsx(Row, { label: "Texture", children: _jsx(TextureSelect, { value: system.texture, textureOptions: textureOptions, loadTexture: loadTexture, onChange: (texture) => patchMaterial({ texture }), preview: true }) }), _jsx(TextureUVField, { labelPrefix: "Map ", value: system.mapUV ?? normalizeTextureUV(undefined), onChange: (uv) => binding.apply((s) => (s.mapUV = uv)) }), !isMesh && (_jsx(Row, { label: "Flip U/V", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y'].map((axis) => (_jsx(NumberField, { value: system.flip?.[axis] ?? 0, min: 0, max: 1, step: 0.1, onChange: (v) => binding.apply((s) => {
+                            const next = s.flip?.clone() ?? new Vector2(0, 0);
+                            next[axis] = Math.min(1, Math.max(0, v));
+                            s.flip = next.x === 0 && next.y === 0 ? undefined : next;
+                        }) }, axis))) }) })), _jsx(Row, { label: "Alpha test", children: _jsx(NumberField, { value: system.getRendererSettings().materialAlphaTest ?? 0, min: 0, step: 0.05, onChange: (v) => patchMaterial({ alphaTest: Math.min(1, v) }) }) }), _jsx(Row, { label: "Depth write", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthWrite, onChange: (v) => patchMaterial({ depthWrite: v }) }) }), _jsx(Row, { label: "Depth test", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthTest, onChange: (v) => patchMaterial({ depthTest: v }) }) }), _jsx(SubHeader, { title: "Gradient map", hint: "Recolours the map through a colour ramp: one channel of the map, or its luminance, picks a colour along the ramp." }), _jsx(Row, { label: "Ramp", children: _jsx(TextureSelect, { value: gradientMap?.ramp, textureOptions: textureOptions, loadTexture: loadTexture, promptTitle: "Ramp texture URL", onChange: (ramp) => binding.apply((s) => (s.gradientMap = ramp ? { ...s.gradientMap, ramp } : undefined)) }) }), gradientMap && (_jsx(Row, { label: "Ramp channel", children: _jsx(SelectField, { value: gradientMap.channel, options: [
+                        { value: 'r', label: 'Red' },
+                        { value: 'g', label: 'Green' },
+                        { value: 'b', label: 'Blue' },
+                        { value: 'a', label: 'Alpha (ramp alpha replaces)' },
+                        { value: 'luminance', label: 'Luminance' },
+                    ], onChange: (channel) => binding.apply((s) => (s.gradientMap = { ...s.gradientMap, channel })) }) })), _jsx(SubHeader, { title: "Erosion", hint: "Alpha decides how much of the shape is left instead of how transparent it is, so a fading alpha dissolves or wipes the shape away." }), _jsx(Row, { label: "Erosion", children: _jsx(CheckboxField, { value: !!erosion, onChange: (v) => binding.apply((s) => (s.erosion = v ? {} : undefined)) }) }), erosion && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Erosion mask", children: _jsx(TextureSelect, { value: erosion.mask, textureOptions: textureOptions, loadTexture: loadTexture, noneLabel: "(map alpha)", promptTitle: "Erosion mask URL", onChange: (mask) => patchErosion({ mask }) }) }), erosion.mask && (_jsx(TextureUVField, { labelPrefix: "Mask ", value: erosion.maskUV, onChange: (maskUV) => patchErosion({ maskUV }) })), _jsx(Row, { label: "Softness", children: _jsx(NumberField, { value: erosion.softness, min: 0.0001, step: 0.01, onChange: (softness) => patchErosion({ softness }) }) }), _jsx(Row, { label: "Edge width", children: _jsx(NumberField, { value: erosion.edgeWidth, min: 0, step: 0.01, onChange: (edgeWidth) => patchErosion({ edgeWidth }) }) }), (erosion.edgeWidth > 0 || erosion.edgeColor.some((c) => c !== 1)) && (_jsx(Row, { label: "Edge color", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1, 2].map((channel) => (_jsx(NumberField, { value: erosion.edgeColor[channel], min: 0, step: 0.05, onChange: (v) => {
+                                    const edgeColor = [...erosion.edgeColor];
+                                    edgeColor[channel] = v;
+                                    patchErosion({ edgeColor });
+                                } }, channel))) }) }))] })), _jsx(SubHeader, { title: "UV distortion", hint: "A scrolling noise texture pushes the map's UV about, for heat shimmer and licking, breathing shapes." }), _jsx(Row, { label: "Noise texture", children: _jsx(TextureSelect, { value: distortion?.map, textureOptions: textureOptions, loadTexture: loadTexture, promptTitle: "Distortion noise URL", onChange: (map) => binding.apply((s) => (s.uvDistortion = map ? { ...s.uvDistortion, map } : undefined)) }) }), distortion && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Distortion strength", children: _jsx(NumberField, { value: distortion.strength, min: 0, step: 0.01, onChange: (strength) => patchDistortion({ strength }) }) }), _jsx(TextureUVField, { labelPrefix: "Noise ", value: distortion.mapUV, onChange: (mapUV) => patchDistortion({ mapUV }) })] })), system.renderMode === RenderMode.Mesh &&
                 (() => {
                     const preset = detectGeometryPreset(system.instancingGeometry);
                     const vertexCount = system.instancingGeometry.length / 3;
@@ -475,10 +471,12 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                     const hostGeometry = geometryOptions ?? [];
                     const applyGeometry = (g) => binding.apply((s) => {
                         const settings = s.getRendererSettings();
+                        // Positions first: the setter keeps or drops the other sets by vertex count.
+                        s.instancingGeometry = new Float32Array(g.positions);
                         settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined);
                         settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined);
+                        settings.instancingUVs2 = (g.uvs2 ? new Float32Array(g.uvs2) : undefined);
                         settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined);
-                        s.instancingGeometry = new Float32Array(g.positions);
                     });
                     return (_jsx(Row, { label: "Geometry", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(SelectField, { value: preset, options: [
                                         ...(preset === 'custom' ? [{ value: 'custom', label: 'Custom (imported)' }] : []),
@@ -509,6 +507,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                         }
                                         binding.apply((s) => {
                                             const settings = s.getRendererSettings();
+                                            settings.instancingUVs2 = undefined;
                                             if (next === 'cube') {
                                                 settings.instancingIndices = MESH_CUBE_INDICES;
                                                 settings.instancingUVs = undefined;
@@ -521,7 +520,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                                 s.instancingGeometry = MESH_QUAD_POSITIONS;
                                             }
                                         });
-                                    } }), _jsx(MeshPreview, { positions: system.instancingGeometry, indices: system.getRendererSettings().instancingIndices }), preset === 'custom' && (_jsxs("span", { style: { fontSize: 10.5, color: '#9eb9ff' }, children: [vertexCount, " verts / ", triangleCount, " tris \u2014 picking a preset replaces this mesh"] }))] }) }));
+                                    } }), _jsx(MeshPreview, { positions: system.instancingGeometry, indices: system.getRendererSettings().instancingIndices }), preset === 'custom' && (_jsxs("span", { style: { fontSize: 10.5, color: '#9eb9ff' }, children: [vertexCount, " verts / ", triangleCount, " tris", system.getRendererSettings().instancingUVs2 ? ' / 2 UV sets' : '', " \u2014 picking a preset replaces this mesh"] }))] }) }));
                 })(), system.renderMode === RenderMode.Mesh && (_jsx(Row, { label: "Lighting", children: _jsx(SelectField, { value: system.lighting, options: [
                         { value: 'fixed', label: 'Fixed light' },
                         { value: 'scene', label: 'Scene light' },
@@ -539,6 +538,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                     return (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Rim mode", children: _jsx(SelectField, { value: rim.mode, options: [
                                         { value: 'add', label: 'Add (glow)' },
                                         { value: 'mix', label: 'Mix (outline)' },
+                                        { value: 'fade', label: 'Fade (faces fade, edges stay)' },
                                     ], onChange: (mode) => patchRim({ mode }) }) }), _jsx(Row, { label: "Rim color", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1, 2].map((channel) => (_jsx(NumberField, { value: rim.color[channel], min: 0, step: 0.05, onChange: (v) => setChannel(channel, v) }, channel))) }) }), _jsx(Row, { label: "Rim power", children: _jsx(NumberField, { value: rim.power, min: 0.01, step: 0.25, onChange: (power) => patchRim({ power }) }) }), _jsx(Row, { label: "Rim strength", children: _jsx(NumberField, { value: rim.strength, min: 0, step: 0.05, onChange: (strength) => patchRim({ strength }) }) })] }));
                 })(), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Rendering group", children: _jsx(NumberField, { value: system.renderingGroupId, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.renderingGroupId = Math.max(0, Math.round(v)))) }) }), _jsx(Row, { label: "Layer mask", children: _jsx(NumberField, { value: system.layers.mask, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.layers.mask = Math.max(0, Math.floor(v)))) }) }), _jsxs(Row, { label: "Max particles", children: [_jsx(CheckboxField, { value: system.maxParticles !== undefined, onChange: (v) => binding.apply((s) => (s.maxParticles = v ? 1000 : undefined)) }), system.maxParticles !== undefined && (_jsx(NumberField, { value: system.maxParticles, min: 1, step: 10, onChange: (v) => binding.apply((s) => (s.maxParticles = Math.max(1, Math.floor(v)))) }))] }), system.renderMode !== RenderMode.Mesh && system.renderMode !== RenderMode.Trail && (_jsx(Row, { label: "Pivot", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: system.pivot?.[axis] ?? 0, step: 0.05, onChange: (v) => binding.apply((s) => {
                             const next = (s.pivot ?? new Vector3()).clone();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.25.0",
+    "version": "0.27.0",
     "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
     "type": "module",
     "main": "./dist/index.js",
@@ -55,7 +55,7 @@
         "@babylonjs/materials": ">=9.0.0",
         "@heroicons/react": ">=2.0.0",
         "@tanstack/react-virtual": ">=3.0.0",
-        "babylon.quarks": ">=0.17.0",
+        "babylon.quarks": "~0.27.0",
         "react": ">=18",
         "react-dom": ">=18"
     },
@@ -65,6 +65,7 @@
         "@tanstack/react-virtual": "^3.14.6",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
+        "fake-indexeddb": "^6.2.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "rimraf": "^6.0.0",

package/src/core/assetDragSession.ts

@@ -1,4 +1,4 @@
-import type {AssetDragPayload} from './assetTree';
+import type {AssetDragPayload} from './assetTree.js';
 
 let activeDrag: AssetDragPayload | null = null;
 

package/src/core/assetTree.ts

@@ -1,4 +1,4 @@
-import type {EffectAsset} from './assets';
+import type {EffectAsset} from './assets.js';
 
 export interface AssetTreeFolder {
     kind: 'folder';

package/src/core/binding.ts

@@ -1,7 +1,7 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {ParticleSystem} from 'babylon.quarks';
-import type {EffectTreeNode} from './effectTree';
-import {buildEffectTree, serializeEffectTree} from './effectTree';
+import type {EffectTreeNode} from './effectTree.js';
+import {buildEffectTree, serializeEffectTree} from './effectTree.js';
 
 export type EditorListener = () => void;
 

package/src/core/defaultEffect.ts

@@ -1,5 +1,5 @@
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import type {Scene} from '@babylonjs/core/scene';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import type {Scene} from '@babylonjs/core/scene.js';
 import {
     ColorOverLife,
     ConeEmitter,
@@ -10,8 +10,8 @@ import {
     RenderMode,
     Vector4,
 } from 'babylon.quarks';
-import {DEFAULT_GRADIENT_STOPS, buildGradient} from './colors';
-import {uniqueEntryName, type SceneEntry} from './sceneEntries';
+import {DEFAULT_GRADIENT_STOPS, buildGradient} from './colors.js';
+import {uniqueEntryName, type SceneEntry} from './sceneEntries.js';
 
 export interface CreateSceneDefaultOptions {
     resolveTexture?: (url: string, scene: Scene) => unknown;

package/src/core/editorScene.ts

@@ -1,4 +1,4 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 
 /** Marks meshes/nodes created only for editor interaction or overlays (not part of the effect). */
 export const EDITOR_SCENE_NODE_METADATA = {quarksEditorSceneNode: true as const};