babylon.quarks-editor 0.18.1 → 0.19.0

package/dist/react/TimelineTrackRow.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, PencilSquareIcon, PlusIcon, SparklesIcon, SquaresPlusIcon, XMarkIcon, } from '@heroicons/react/24/solid';
+import { useState } from 'react';
 import { buildEffectTree, collectSystems } from '../core/effectTree';
-import { createChildSystem, removeSystems } from '../core/systems';
 import { ungroupNode } from '../core/groups';
+import { createChildSystem, removeSystems } from '../core/systems';
 import { PromptDialog } from './PromptDialog';
 import { iconStyle } from './icons';
 import { theme } from './theme';
@@ -20,7 +20,7 @@ const ROW_HEIGHT = 28;
 const checkboxButton = { ...iconButton, width: 12, height: 12 };
 /** One row of the timeline: a label cell (name + actions) and, for tracks, a bar cell. */
 export function TimelineTrackRow(props) {
-    const { row, binding, selected, onSelectNode, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect } = props;
+    const { row, binding, selected, onSelectNode, pxPerSecond, offsetPx, collapsed, onToggleCollapse, hidden, onToggleVisible, groupSelected, onToggleGroupSelect, } = props;
     const [renaming, setRenaming] = useState(false);
     const isRoot = row.node === binding.root;
     const labelStyle = {
@@ -44,10 +44,17 @@ export function TimelineTrackRow(props) {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, borderTop: `1px solid ${theme.border}` }, onClick: () => onSelectNode(row.node), children: [!isRoot && (_jsx("button", { className: "qe-hover", title: groupSelected ? 'Remove from group selection' : 'Select for grouping', style: { ...checkboxButton, color: groupSelected ? theme.accent : theme.textDim }, onClick: (e) => {
                                 e.stopPropagation();
                                 onToggleGroupSelect();
-                            }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: { width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box' } })) })), _jsx("span", { className: "qe-hover", title: collapsed ? 'Expand' : 'Collapse', style: { color: theme.textDim, width: 12, cursor: 'pointer', display: 'inline-flex' }, onClick: (e) => {
+                            }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: {
+                                    width: 10,
+                                    height: 10,
+                                    border: `1px solid currentColor`,
+                                    borderRadius: 2,
+                                    display: 'block',
+                                    boxSizing: 'border-box',
+                                } })) })), _jsx("span", { className: "qe-hover", title: collapsed ? 'Expand' : 'Collapse', style: { color: theme.textDim, width: 12, cursor: 'pointer', display: 'inline-flex' }, onClick: (e) => {
                                 e.stopPropagation();
                                 onToggleCollapse?.();
-                            }, children: collapsed ? _jsx(ChevronRightIcon, { style: iconStyle(12) }) : _jsx(ChevronDownIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: row.name }), _jsx("button", { className: "qe-hover", title: "Add system to this group", style: { ...iconButton, color: theme.accent }, onClick: (e) => {
+                            }, children: collapsed ? (_jsx(ChevronRightIcon, { style: iconStyle(12) })) : (_jsx(ChevronDownIcon, { style: iconStyle(12) })) }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: row.name }), _jsx("button", { className: "qe-hover", title: "Add system to this group", style: { ...iconButton, color: theme.accent }, onClick: (e) => {
                                 e.stopPropagation();
                                 let created;
                                 binding.apply(() => {
@@ -82,7 +89,14 @@ export function TimelineTrackRow(props) {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "qe-hover-bg", style: { ...labelStyle, opacity: hidden ? 0.5 : 1 }, onClick: () => onSelectNode(row.node), children: [!isRoot && (_jsx("button", { className: "qe-hover", title: groupSelected ? 'Remove from group selection' : 'Select for grouping', style: { ...checkboxButton, color: groupSelected ? theme.accent : theme.textDim }, onClick: (e) => {
                             e.stopPropagation();
                             onToggleGroupSelect();
-                        }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: { width: 10, height: 10, border: `1px solid currentColor`, borderRadius: 2, display: 'block', boxSizing: 'border-box' } })) })), _jsx("button", { className: "qe-hover", title: hidden ? 'Show in viewport' : 'Hide in viewport', style: { ...iconButton, color: hidden ? theme.textDim : theme.accent }, onClick: (e) => {
+                        }, children: groupSelected ? (_jsx(CheckIcon, { style: iconStyle(12) })) : (_jsx("span", { style: {
+                                width: 10,
+                                height: 10,
+                                border: `1px solid currentColor`,
+                                borderRadius: 2,
+                                display: 'block',
+                                boxSizing: 'border-box',
+                            } })) })), _jsx("button", { className: "qe-hover", title: hidden ? 'Show in viewport' : 'Hide in viewport', style: { ...iconButton, color: hidden ? theme.textDim : theme.accent }, onClick: (e) => {
                             e.stopPropagation();
                             onToggleVisible?.();
                         }, children: hidden ? _jsx(EyeSlashIcon, { style: iconStyle(12) }) : _jsx(EyeIcon, { style: iconStyle(12) }) }), _jsx("span", { style: { color: theme.accent, display: 'inline-flex' }, children: _jsx(SparklesIcon, { style: iconStyle(11) }) }), _jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: [row.name, system.onlyUsedByOther ? ' (sub)' : ''] }), !isRoot && (_jsx("button", { className: "qe-hover", title: "Rename", style: { ...iconButton, color: theme.textDim }, onClick: (e) => {

package/dist/react/ValueField.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ScalarGenerator } from '../core/values';
 /**
  * Unity-like value field: Constant | Random Between Two Constants | Curve,
@@ -12,4 +11,4 @@ export declare function ValueField(props: {
     onChange: (generator: ScalarGenerator) => void;
     min?: number;
     curveMax?: number;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/react/behaviorModules.js

@@ -3,10 +3,10 @@ import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, Constant
 import { ensureGroundResolver } from '../core/collision';
 import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, readGradientStops } from '../core/colors';
 import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
-import { GradientEditor } from './GradientEditor';
 import { CurveEditor } from './CurveEditor';
-import { ModuleSection } from './ModuleSection';
 import { NumberField, Row, SelectField } from './fields';
+import { GradientEditor } from './GradientEditor';
+import { ModuleSection } from './ModuleSection';
 import { ValueField } from './ValueField';
 function removeBehaviorOfType(behaviors, type) {
     for (let i = behaviors.length - 1; i >= 0; i--) {
@@ -81,7 +81,9 @@ function SpeedRangeRows({ binding, behavior }) {
     return (_jsx(Row, { label: "Speed range", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: behavior.speedRange.a, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(v, behavior.speedRange.b))) }), _jsx(NumberField, { value: behavior.speedRange.b, min: 0, onChange: (v) => binding.apply(() => (behavior.speedRange = new IntervalValue(behavior.speedRange.a, v))) })] }) }));
 }
 export function ColorBySpeedModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Color by Speed", type: "ColorBySpeed", create: () => new ColorBySpeed(buildGradient(DEFAULT_GRADIENT_STOPS), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: behavior.color instanceof Gradient ? readGradientStops(behavior.color) : DEFAULT_GRADIENT_STOPS, onChange: (stops) => binding.apply(() => (behavior.color = buildGradient(stops))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Color by Speed", type: "ColorBySpeed", create: () => new ColorBySpeed(buildGradient(DEFAULT_GRADIENT_STOPS), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: behavior.color instanceof Gradient
+                            ? readGradientStops(behavior.color)
+                            : DEFAULT_GRADIENT_STOPS, onChange: (stops) => binding.apply(() => (behavior.color = buildGradient(stops))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
 }
 export function SizeBySpeedModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Size by Speed", type: "SizeBySpeed", create: () => new SizeBySpeed(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [0.5, 0.8, 1.2, 1.5] }), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.size), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.size = buildCurve(pieces))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
@@ -106,7 +108,13 @@ export function TextureSheetModule({ binding }) {
     const startIdx = Math.min(Math.max(0, Math.round(readScalar(system.startTileIndex).value)), tiles - 1);
     const startCol = startIdx % u;
     const startRow = Math.floor(startIdx / u);
-    return (_jsxs(ModuleSection, { title: "Texture Sheet Animation", defaultOpen: false, children: [textureUrl && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: { position: 'relative', width: 218, border: '1px solid #2b3761', borderRadius: 6, overflow: 'hidden' }, children: [_jsx("img", { src: textureUrl, alt: "texture atlas", style: { width: '100%', display: 'block' } }), _jsx("div", { style: {
+    return (_jsxs(ModuleSection, { title: "Texture Sheet Animation", defaultOpen: false, children: [textureUrl && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: {
+                            position: 'relative',
+                            width: 218,
+                            border: '1px solid #2b3761',
+                            borderRadius: 6,
+                            overflow: 'hidden',
+                        }, children: [_jsx("img", { src: textureUrl, alt: "texture atlas", style: { width: '100%', display: 'block' } }), _jsx("div", { style: {
                                     position: 'absolute',
                                     inset: 0,
                                     pointerEvents: 'none',
@@ -133,7 +141,13 @@ export function TextureSheetModule({ binding }) {
                                     }, children: startIdx }) })] }), _jsxs("div", { style: { fontSize: 11, color: '#b7c6ea', marginTop: 3 }, children: [u, " \u00D7 ", v, " = ", tiles, " tiles; frame indices 0\u2013", tiles - 1, "; start tile", ' ', _jsx("span", { style: { color: '#ffce6b', fontWeight: 600 }, children: startIdx })] })] })), _jsx(Row, { label: "Tiles U", children: _jsx(NumberField, { value: system.uTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.uTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Tiles V", children: _jsx(NumberField, { value: system.vTileCount, min: 1, step: 1, onChange: (v) => binding.apply((s) => (s.vTileCount = Math.round(v))) }) }), _jsx(Row, { label: "Blend tiles", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: system.blendTiles, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => (s.blendTiles = e.target.checked)) }) }), _jsx(Row, { label: "Start tile", children: _jsx(NumberField, { value: readScalar(system.startTileIndex).value, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.startTileIndex = new ConstantValue(Math.round(v)))) }) }), _jsx(Row, { label: "Animate frames", children: _jsx("input", { type: "checkbox", className: "qe-hover", checked: !!frameBehavior, style: { justifySelf: 'start', width: 15, height: 15, accentColor: '#78a5ff', cursor: 'pointer' }, onChange: (e) => binding.apply((s) => {
                         removeBehaviorOfType(s.behaviors, 'FrameOverLife');
                         if (e.target.checked) {
-                            s.addBehavior(new FrameOverLife(buildScalar({ mode: 'curve', value: 0, min: 0, max: tiles - 1, curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1] })));
+                            s.addBehavior(new FrameOverLife(buildScalar({
+                                mode: 'curve',
+                                value: 0,
+                                min: 0,
+                                max: tiles - 1,
+                                curve: [0, (tiles - 1) / 3, (2 * (tiles - 1)) / 3, tiles - 1],
+                            })));
                         }
                     }) }) }), frameBehavior && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) }))] }));
 }

package/dist/react/index.d.ts

@@ -1,24 +1,24 @@
+export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
+export { CurveEditor } from './CurveEditor';
 export { EffectEditor } from './EffectEditor';
 export type { EffectEditorProps } from './EffectEditor';
-export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
-export type { TextureOption, GeometryOption, GeometryData } from './modules';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
+export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost';
+export { CheckboxField, NumberField, Row, SelectField } from './fields';
+export { GalleryPanel } from './GalleryPanel';
+export type { GalleryPanelProps } from './GalleryPanel';
+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 { PromptDialog } from './PromptDialog';
+export type { PromptDialogProps } from './PromptDialog';
 export { SubEmittersModule } from './SubEmittersModule';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
 export { TimelinePanel } from './TimelinePanel';
-export type { TimelinePanelProps, PlaybackState } from './TimelinePanel';
+export type { PlaybackState, TimelinePanelProps } from './TimelinePanel';
 export { TimelineTrackRow } from './TimelineTrackRow';
 export type { TimelineTrackRowProps } from './TimelineTrackRow';
-export { ModuleSection } from './ModuleSection';
-export { PromptDialog } from './PromptDialog';
-export type { PromptDialogProps } from './PromptDialog';
-export { CurveEditor } from './CurveEditor';
-export { GradientEditor } from './GradientEditor';
 export { ValueField } from './ValueField';
-export { Row, NumberField, CheckboxField, SelectField } from './fields';
-export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
-export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
-export { MessageDialog } from './MessageDialog';
-export type { MessageDialogProps } from './MessageDialog';
-export { GalleryPanel } from './GalleryPanel';
-export type { GalleryPanelProps } from './GalleryPanel';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
-export type { EffectEditorHostProps, EffectEditorHostHandle } from './EffectEditorHost';

package/dist/react/index.js

@@ -1,16 +1,16 @@
+export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
+export { CurveEditor } from './CurveEditor';
 export { EffectEditor } from './EffectEditor';
-export { SpeedOverLifeModule, LimitSpeedOverLifeModule, ForceOverLifeModule, GravityModule, RotationOverLifeModule, NoiseModule, TurbulenceModule, CollisionModule, EmitDirectionModule, TextureSheetModule, ColorBySpeedModule, SizeBySpeedModule, RotationBySpeedModule, OrbitOverLifeModule, WidthOverTrailModule, } from './behaviorModules';
+export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
+export { CheckboxField, NumberField, Row, SelectField } from './fields';
+export { GalleryPanel } from './GalleryPanel';
+export { GradientEditor } from './GradientEditor';
+export { MessageDialog } from './MessageDialog';
+export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
+export { ModuleSection } from './ModuleSection';
+export { PromptDialog } from './PromptDialog';
 export { SubEmittersModule } from './SubEmittersModule';
+export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
 export { TimelinePanel } from './TimelinePanel';
 export { TimelineTrackRow } from './TimelineTrackRow';
-export { ModuleSection } from './ModuleSection';
-export { PromptDialog } from './PromptDialog';
-export { CurveEditor } from './CurveEditor';
-export { GradientEditor } from './GradientEditor';
 export { ValueField } from './ValueField';
-export { Row, NumberField, CheckboxField, SelectField } from './fields';
-export { MainModule, EmissionModule, ShapeModule, SizeOverLifeModule, ColorOverLifeModule, RendererModule, } from './modules';
-export { theme, inputStyle, rowStyle, labelStyle, buttonStyle } from './theme';
-export { MessageDialog } from './MessageDialog';
-export { GalleryPanel } from './GalleryPanel';
-export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';

package/dist/react/modules.js

@@ -1,32 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo, useState } from 'react';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import { ColorOverLife, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3Function, Vector4, } from 'babylon.quarks';
+import React, { useMemo, useState } from 'react';
 import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors';
-import { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams } from '../core/shapes';
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
 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 { CheckboxField, NumberField, Row, SelectField } from './fields';
 import { ValueField } from './ValueField';
+import { CheckboxField, NumberField, Row, SelectField } from './fields';
 import { iconStyle } from './icons';
 import { theme } from './theme';
-import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { InspectorInfoIcon } from './InspectorInfoIcon';
 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]);
 const MESH_CUBE_POSITIONS = new Float32Array([
-    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
-    -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
+    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5,
+    -0.5, 0.5, 0.5,
 ]);
 const MESH_CUBE_INDICES = new Uint32Array([
-    0, 1, 2, 0, 2, 3, 4, 6, 5, 4, 7, 6, 0, 4, 5, 0, 5, 1,
-    3, 2, 6, 3, 6, 7, 0, 3, 7, 0, 7, 4, 1, 5, 6, 1, 6, 2,
+    0, 1, 2, 0, 2, 3, 4, 6, 5, 4, 7, 6, 0, 4, 5, 0, 5, 1, 3, 2, 6, 3, 6, 7, 0, 3, 7, 0, 7, 4, 1, 5, 6, 1, 6, 2,
 ]);
 function arraysEqual(a, b) {
     if (a.length !== b.length) {
@@ -65,21 +64,33 @@ function ColorInput(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) => {
                     const rgb = hexToRgb(e.target.value);
                     onChange(new Vector4(rgb.r, rgb.g, rgb.b, value.w));
-                }, style: { width: 42, height: 24, border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } }), _jsx(NumberField, { value: value.w, min: 0, step: 0.05, onChange: (a) => onChange(new Vector4(value.x, value.y, value.z, Math.min(1, a))) })] }));
+                }, style: {
+                    width: 42,
+                    height: 24,
+                    border: 'none',
+                    background: 'transparent',
+                    padding: 0,
+                    cursor: 'pointer',
+                } }), _jsx(NumberField, { value: value.w, min: 0, step: 0.05, onChange: (a) => onChange(new Vector4(value.x, value.y, value.z, Math.min(1, a))) })] }));
 }
 export function MainModule({ binding }) {
     const system = binding.system;
     const startColor = system.startColor;
     const colorMode = startColor instanceof RandomColor ? 'random' : 'constant';
-    const colorA = startColor instanceof RandomColor ? startColor.a
-        : startColor instanceof ConstantColor ? startColor.color
+    const colorA = startColor instanceof RandomColor
+        ? startColor.a
+        : startColor instanceof ConstantColor
+            ? startColor.color
             : new Vector4(1, 1, 1, 1);
     const colorB = startColor instanceof RandomColor ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
     const rotation = system.startRotation;
     const isEuler = rotation instanceof EulerGenerator;
-    const rotationMode = rotation instanceof RandomQuatGenerator ? '3d'
-        : isEuler ? 'euler'
-            : readScalar(rotation).mode === 'random' ? 'random'
+    const rotationMode = rotation instanceof RandomQuatGenerator
+        ? '3d'
+        : isEuler
+            ? 'euler'
+            : readScalar(rotation).mode === 'random'
+                ? 'random'
                 : 'angle';
     const rotationState = readScalar(rotation instanceof RandomQuatGenerator || isEuler ? undefined : rotation);
     const eulerAngles = {
@@ -93,8 +104,10 @@ export function MainModule({ binding }) {
     });
     const startSize = system.startSize;
     const size3D = startSize.type === 'vec3function';
-    const colorGenMode = startColor instanceof RandomColorBetweenGradient ? 'gradient2'
-        : startColor instanceof Gradient ? 'gradient'
+    const colorGenMode = startColor instanceof RandomColorBetweenGradient
+        ? 'gradient2'
+        : 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(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                     s.startDelay = g;
@@ -134,7 +147,8 @@ export function MainModule({ binding }) {
                             s.startColor = new ConstantColor(colorA);
                         }
                     }) }) }), (colorGenMode === 'constant' || colorGenMode === 'random') && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorA, onChange: (next) => binding.apply((s) => {
-                        s.startColor = colorGenMode === 'random' ? new RandomColor(next, colorB) : new ConstantColor(next);
+                        s.startColor =
+                            colorGenMode === 'random' ? new RandomColor(next, colorB) : new ConstantColor(next);
                     }) }) })), colorGenMode === 'random' && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorB, onChange: (next) => binding.apply((s) => (s.startColor = new RandomColor(colorA, next))) }) })), colorGenMode === 'gradient' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: readGradientStops(startColor), onChange: (stops) => binding.apply((s) => (s.startColor = buildGradient(stops))) }) })), colorGenMode === 'gradient2' && (_jsxs("div", { style: { marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(GradientEditor, { stops: readGradientStops(startColor.gradient1), onChange: (stops) => binding.apply((s) => {
                             const g = s.startColor;
                             s.startColor = new RandomColorBetweenGradient(buildGradient(stops), g.gradient2);
@@ -160,7 +174,14 @@ export function MainModule({ binding }) {
 export function EmissionModule({ binding }) {
     const system = binding.system;
     const bursts = system.emissionBursts ?? [];
-    return (_jsxs(ModuleSection, { title: "Emission", children: [_jsx(ValueField, { label: "Rate over time", generator: system.emissionOverTime, min: 0, curveMax: 500, onChange: (g) => binding.apply((s) => (s.emissionOverTime = g)) }), _jsx(ValueField, { label: "Rate over distance", generator: system.emissionOverDistance, min: 0, curveMax: 50, onChange: (g) => binding.apply((s) => (s.emissionOverDistance = g)) }), bursts.map((burst, i) => (_jsxs("div", { style: { marginTop: 8, padding: '6px 8px', border: '1px solid #22305c', borderRadius: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("span", { style: { fontSize: 11.5, color: '#9eb9ff' }, children: ["Burst ", i + 1] }), _jsx("button", { className: "qe-hover", style: { background: 'none', border: 'none', color: '#e08c8c', cursor: 'pointer', padding: 0, display: 'inline-flex' }, title: "Remove burst", onClick: () => binding.apply((s) => s.emissionBursts.splice(i, 1)), children: _jsx(XMarkIcon, { style: iconStyle(14) }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4 }, children: [_jsx(Row, { label: "Time", children: _jsx(NumberField, { value: burst.time, min: 0, onChange: (time) => binding.apply(() => (burst.time = time)) }) }), _jsx(Row, { label: "Count", children: _jsx(NumberField, { value: readScalar(burst.count).value, min: 0, step: 1, onChange: (count) => binding.apply(() => (burst.count = new ConstantValue(Math.round(count)))) }) }), _jsx(Row, { label: "Cycles", children: _jsx(NumberField, { value: burst.cycle, min: 1, step: 1, onChange: (v) => binding.apply(() => (burst.cycle = Math.round(v))) }) }), _jsx(Row, { label: "Interval", children: _jsx(NumberField, { value: burst.interval, min: 0.01, onChange: (v) => binding.apply(() => (burst.interval = v)) }) }), _jsx(Row, { label: "Probability", children: _jsx(NumberField, { value: burst.probability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (burst.probability = Math.min(1, v))) }) })] })] }, i))), _jsxs("button", { className: "qe-hover", style: {
+    return (_jsxs(ModuleSection, { title: "Emission", children: [_jsx(ValueField, { label: "Rate over time", generator: system.emissionOverTime, min: 0, curveMax: 500, onChange: (g) => binding.apply((s) => (s.emissionOverTime = g)) }), _jsx(ValueField, { label: "Rate over distance", generator: system.emissionOverDistance, min: 0, curveMax: 50, onChange: (g) => binding.apply((s) => (s.emissionOverDistance = g)) }), bursts.map((burst, i) => (_jsxs("div", { style: { marginTop: 8, padding: '6px 8px', border: '1px solid #22305c', borderRadius: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("span", { style: { fontSize: 11.5, color: '#9eb9ff' }, children: ["Burst ", i + 1] }), _jsx("button", { className: "qe-hover", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    color: '#e08c8c',
+                                    cursor: 'pointer',
+                                    padding: 0,
+                                    display: 'inline-flex',
+                                }, title: "Remove burst", onClick: () => binding.apply((s) => s.emissionBursts.splice(i, 1)), children: _jsx(XMarkIcon, { style: iconStyle(14) }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4 }, children: [_jsx(Row, { label: "Time", children: _jsx(NumberField, { value: burst.time, min: 0, onChange: (time) => binding.apply(() => (burst.time = time)) }) }), _jsx(Row, { label: "Count", children: _jsx(NumberField, { value: readScalar(burst.count).value, min: 0, step: 1, onChange: (count) => binding.apply(() => (burst.count = new ConstantValue(Math.round(count)))) }) }), _jsx(Row, { label: "Cycles", children: _jsx(NumberField, { value: burst.cycle, min: 1, step: 1, onChange: (v) => binding.apply(() => (burst.cycle = Math.round(v))) }) }), _jsx(Row, { label: "Interval", children: _jsx(NumberField, { value: burst.interval, min: 0.01, onChange: (v) => binding.apply(() => (burst.interval = v)) }) }), _jsx(Row, { label: "Probability", children: _jsx(NumberField, { value: burst.probability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (burst.probability = Math.min(1, v))) }) })] })] }, i))), _jsxs("button", { className: "qe-hover", style: {
                     marginTop: 8,
                     background: 'none',
                     border: '1px dashed #34477f',
@@ -172,7 +193,13 @@ export function EmissionModule({ binding }) {
                     display: 'inline-flex',
                     alignItems: 'center',
                     gap: 6,
-                }, onClick: () => binding.apply((s) => s.emissionBursts.push({ time: 0, count: new ConstantValue(20), cycle: 1, interval: 0.01, probability: 1 })), children: [_jsx(PlusIcon, { style: iconStyle(13) }), "Add burst"] })] }));
+                }, onClick: () => binding.apply((s) => s.emissionBursts.push({
+                    time: 0,
+                    count: new ConstantValue(20),
+                    cycle: 1,
+                    interval: 0.01,
+                    probability: 1,
+                })), children: [_jsx(PlusIcon, { style: iconStyle(13) }), "Add burst"] })] }));
 }
 // Shapes whose constructor doesn't accept `mode`/`spread` at all — showing those controls
 // for them would edit a value the shape silently ignores, just like the old "default to
@@ -202,7 +229,9 @@ export function ShapeModule({ binding }) {
 export function SizeOverLifeModule({ binding }) {
     const system = binding.system;
     const behavior = findBehavior(system.behaviors, 'SizeOverLife');
-    const curve = behavior ? readScalar(behavior.size).curve : [0.2, 1, 1, 0.4];
+    const curve = behavior
+        ? readScalar(behavior.size).curve
+        : [0.2, 1, 1, 0.4];
     return (_jsx(ModuleSection, { title: "Size over Lifetime", enabled: !!behavior, onToggle: (enabled) => binding.apply((s) => {
             removeBehavior(s, 'SizeOverLife');
             if (enabled) {
@@ -233,7 +262,7 @@ export function ColorOverLifeModule({ binding }) {
  * isometric rotation, scales them to fit, and strokes the triangle edges on a 2D canvas — enough
  * for the user to recognise which mesh they picked without spinning up a second Babylon scene.
  */
-function MeshPreview({ positions, indices, size = 96 }) {
+function MeshPreview({ positions, indices, size = 96, }) {
     const canvasRef = React.useRef(null);
     React.useEffect(() => {
         const canvas = canvasRef.current;
@@ -318,7 +347,8 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                         { value: RenderMode.Trail, label: 'Trail' },
                         { value: RenderMode.Mesh, label: 'Mesh' },
                     ], onChange: (mode) => binding.apply((s) => (s.renderMode = mode)) }) }), system.renderMode === RenderMode.Trail && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Trail length", children: _jsx(NumberField, { value: readScalar(system.rendererEmitterSettings.startLength).value, min: 1, step: 1, onChange: (v) => binding.apply((s) => {
-                                s.rendererEmitterSettings.startLength = new ConstantValue(Math.round(v));
+                                s.rendererEmitterSettings.startLength =
+                                    new ConstantValue(Math.round(v));
                             }) }) }), _jsx(Row, { label: "Follow origin", children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings.followLocalOrigin, onChange: (v) => binding.apply((s) => {
                                 s.rendererEmitterSettings.followLocalOrigin = 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: {

package/package.json

@@ -1,72 +1,72 @@
 {
-  "name": "babylon.quarks-editor",
-  "version": "0.18.1",
-  "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+    "name": "babylon.quarks-editor",
+    "version": "0.19.0",
+    "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./react": {
+            "import": "./dist/react/index.js",
+            "types": "./dist/react/index.d.ts"
+        }
     },
-    "./react": {
-      "import": "./dist/react/index.js",
-      "types": "./dist/react/index.d.ts"
+    "files": [
+        "dist",
+        "src",
+        "LICENSE",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "scripts": {
+        "clean": "rimraf dist",
+        "build": "npm run clean && tsc -p tsconfig.json"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Soullnik/babylon.quarks-standalone.git"
+    },
+    "keywords": [
+        "babylonjs",
+        "babylon.js",
+        "particles",
+        "particle-system",
+        "particle-editor",
+        "vfx",
+        "vfx-editor",
+        "shuriken",
+        "editor",
+        "react",
+        "quarks"
+    ],
+    "author": "soullnik <soullnik96@gmail.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/Soullnik/babylon.quarks-standalone/issues"
+    },
+    "homepage": "https://github.com/Soullnik/babylon.quarks-standalone#readme",
+    "peerDependencies": {
+        "@babylonjs/core": ">=9.0.0",
+        "@babylonjs/materials": ">=9.0.0",
+        "@heroicons/react": ">=2.0.0",
+        "@tanstack/react-virtual": ">=3.0.0",
+        "babylon.quarks": ">=0.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "devDependencies": {
+        "@babylonjs/materials": "9.6.2",
+        "@heroicons/react": "^2.2.0",
+        "@tanstack/react-virtual": "^3.14.6",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "rimraf": "^6.0.0",
+        "typescript": "^5.9.3"
     }
-  },
-  "files": [
-    "dist",
-    "src",
-    "LICENSE",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && tsc -p tsconfig.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Soullnik/babylon.quarks-standalone.git"
-  },
-  "keywords": [
-    "babylonjs",
-    "babylon.js",
-    "particles",
-    "particle-system",
-    "particle-editor",
-    "vfx",
-    "vfx-editor",
-    "shuriken",
-    "editor",
-    "react",
-    "quarks"
-  ],
-  "author": "soullnik <soullnik96@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Soullnik/babylon.quarks-standalone/issues"
-  },
-  "homepage": "https://github.com/Soullnik/babylon.quarks-standalone#readme",
-  "peerDependencies": {
-    "@babylonjs/core": ">=9.0.0",
-    "@babylonjs/materials": ">=9.0.0",
-    "@heroicons/react": ">=2.0.0",
-    "@tanstack/react-virtual": ">=3.0.0",
-    "babylon.quarks": ">=0.17.0",
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@babylonjs/materials": "9.6.2",
-    "@heroicons/react": "^2.2.0",
-    "@tanstack/react-virtual": "^3.14.6",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rimraf": "^6.0.0",
-    "typescript": "^5.9.3"
-  }
 }

package/src/core/binding.ts

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

package/src/core/colors.ts

@@ -1,5 +1,5 @@
-import {ColorOverLife, Gradient, Vector3, Vector4} from 'babylon.quarks';
 import type {Behavior} from 'babylon.quarks';
+import {ColorOverLife, Gradient, Vector3, Vector4} from 'babylon.quarks';
 
 /** One RGBA stop of the editable gradient (all channels 0..1, pos 0..1). */
 export interface GradientStop {

package/src/core/defaultEffect.ts

@@ -1,5 +1,5 @@
-import type {Scene} from '@babylonjs/core/scene';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {Scene} from '@babylonjs/core/scene';
 import {
     ColorOverLife,
     ConeEmitter,

package/src/core/effectTree.ts

@@ -1,7 +1,7 @@
-import {ParticleEmitter} from 'babylon.quarks';
-import type {ParticleSystem} from 'babylon.quarks';
-import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import {Matrix, Quaternion} from '@babylonjs/core/Maths/math.vector';
+import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {ParticleSystem} from 'babylon.quarks';
+import {ParticleEmitter} from 'babylon.quarks';
 import {isEditorSceneNode} from './editorScene';
 
 /** A node in the editor's effect hierarchy: a Group (organizational) or a ParticleEmitter. */
@@ -46,7 +46,7 @@ export function collectSystems(tree: EffectTreeNode): ParticleSystem[] {
 }
 
 interface SerializeMeta {
-    textures: {[k: string]: {url?: string; name?: string}};
+    textures: {[k: string]: {url?: string; name?: string; invertY?: boolean}};
     materials: {[k: string]: {[key: string]: unknown}};
     geometries: {[k: string]: unknown};
 }
@@ -72,7 +72,11 @@ function serializeNode(tree: EffectTreeNode, meta: SerializeMeta, fallbackUuid:
         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: 'ParticleEmitter',
+            ps: tree.system.toJSON(meta as never, {useUrlForImage: true} as never),
+        };
     }
     return {...base, type: 'Group'};
 }
@@ -113,13 +117,24 @@ function finishEnvelope(object: Record<string, unknown>, meta: SerializeMeta): s
     // 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}> = [];
+    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});
-            textures.push({uuid, image: imageUuid});
+            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});
         }