babylon.quarks-editor 0.26.0 → 0.28.0

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) => {
@@ -75,17 +99,19 @@ function ColorInput(props) {
                     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))) })] }));
 }
+/** The Main module (Unity's main module): duration, looping, start delay, life, speed, size, rotation and colour. */
 export function MainModule({ binding }) {
     const system = binding.system;
     const startColor = system.startColor;
     const colorMode = startColor instanceof RandomColor ? 'random' : startColor instanceof ColorRange ? 'range' : 'constant';
-    const twoColors = startColor instanceof RandomColor || startColor instanceof ColorRange;
-    const colorA = twoColors
-        ? startColor.a
+    const twoColor = startColor instanceof RandomColor || startColor instanceof ColorRange ? startColor : null;
+    const colorA = twoColor
+        ? twoColor.a
         : startColor instanceof ConstantColor
             ? startColor.color
             : new Vector4(1, 1, 1, 1);
-    const colorB = twoColors ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const colorB = twoColor ? twoColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const twoColors = twoColor !== null;
     /** The two-colour generator of the current mode. */
     const makeTwoColors = (a, b) => colorMode === 'range' ? new ColorRange(a, b) : new RandomColor(a, b);
     const rotation = system.startRotation;
@@ -111,34 +137,36 @@ export function MainModule({ binding }) {
         const cur = s.startRotation;
         s.startRotation = new EulerGenerator(axis === 'x' ? new ConstantValue(v) : cur.angleX, axis === 'y' ? new ConstantValue(v) : cur.angleY, axis === 'z' ? new ConstantValue(v) : cur.angleZ);
     });
-    const startSize = system.startSize;
-    const size3D = startSize.type === 'vec3function';
+    const startSize3D = system.startSize instanceof Vector3Function ? system.startSize : null;
     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(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' },
                     ], onChange: (mode) => binding.apply((s) => (s.cullingMode = mode)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                     s.startDelay = g;
                     s.restart();
-                }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: size3D ? '3d' : 'uniform', options: [
+                }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: startSize3D ? '3d' : 'uniform', options: [
                         { value: 'uniform', label: 'Uniform' },
                         { value: '3d', label: '3D (per axis)' },
                     ], onChange: (mode) => binding.apply((s) => {
                         const cur = s.startSize;
-                        if (mode === '3d') {
+                        if (mode === '3d' && cur.type !== 'vec3function') {
                             // Seed all three axes from the current uniform generator.
                             s.startSize = new Vector3Function(cur.clone(), cur.clone(), cur.clone());
                         }
-                        else {
+                        else if (mode !== '3d' && cur instanceof Vector3Function) {
                             // Collapse back to the X-axis generator.
-                            s.startSize = s.startSize.x;
+                            s.startSize = cur.x;
                         }
-                    }) }) }), !size3D && (_jsx(ValueField, { label: "", generator: system.startSize, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => (s.startSize = g)) })), size3D && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(ValueField, { label: axis.toUpperCase(), generator: startSize[axis], min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+                    }) }) }), !startSize3D && (_jsx(ValueField, { label: "", generator: system.startSize, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => (s.startSize = g)) })), startSize3D && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(ValueField, { label: axis.toUpperCase(), generator: startSize3D[axis], min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                         const cur = s.startSize;
                         s.startSize = new Vector3Function(axis === 'x' ? g : cur.x, axis === 'y' ? g : cur.y, axis === 'z' ? g : cur.z);
                     }) }, axis))) })), _jsx(Row, { label: "Start color", children: _jsx(SelectField, { value: colorGenMode, options: [
@@ -194,6 +222,7 @@ export function MainModule({ binding }) {
                                     s.startRotation = new AxisAngleGenerator(next, axisAngle.angle);
                                 }) }, axis))) }) }), _jsx(ValueField, { label: "  Angle (rad)", generator: axisAngle.angle, curveMax: Math.PI * 2, onChange: (g) => binding.apply((s) => (s.startRotation = new AxisAngleGenerator(axisAngle.axis.clone(), g))) })] })), rotationMode === 'angle' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: rotationState.value, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new ConstantValue(v))) }) })), rotationMode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: rotationState.min, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(v, rotationState.max))) }), _jsx(NumberField, { value: rotationState.max, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(rotationState.min, v))) })] }) }))] }));
 }
+/** The Emission module (Unity's Emission): rate over time and distance, and bursts. */
 export function EmissionModule({ binding }) {
     const system = binding.system;
     const bursts = system.emissionBursts ?? [];
@@ -228,6 +257,7 @@ export function EmissionModule({ binding }) {
 // for them would edit a value the shape silently ignores, just like the old "default to
 // first texture" bug: a control that looks live but does nothing.
 const SHAPES_WITHOUT_MODE_SPREAD = new Set(['point', 'grid', 'box', 'mesh_surface']);
+/** The Shape module (Unity's Shape): the emitter shape and its settings. */
 export function ShapeModule({ binding }) {
     const system = binding.system;
     const type = getShapeType(system.emitterShape);
@@ -253,12 +283,11 @@ export function ShapeModule({ binding }) {
                                 { value: 3, label: 'Burst spread' },
                             ], onChange: (mode) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, mode }))) }) }), _jsx(Row, { label: "Spread", children: _jsx(NumberField, { value: params.spread, min: 0, step: 0.05, onChange: (spread) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, spread }))) }) })] })), _jsx(Row, { label: "Align to direction", children: _jsx(CheckboxField, { value: binding.system.alignToDirection, onChange: (v) => binding.apply((s) => (s.alignToDirection = v)) }) })] }));
 }
+/** The Size over Lifetime module (Unity's Size over Lifetime): size by a curve over the particle's life. */
 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) {
@@ -269,6 +298,7 @@ export function SizeOverLifeModule({ binding }) {
                     s.addBehavior(new SizeOverLife(buildCurve(pieces)));
                 }) }) }) }));
 }
+/** The Color over Lifetime module (Unity's Color over Lifetime): a gradient over the particle's life. */
 export function ColorOverLifeModule({ binding }) {
     const system = binding.system;
     const behavior = findBehavior(system.behaviors, 'ColorOverLife');
@@ -349,11 +379,16 @@ function MeshPreview({ positions, indices, size = 96, }) {
     }, [positions, indices, size]);
     return (_jsx("canvas", { ref: canvasRef, width: size, height: size, style: { width: size, height: size, border: '1px solid #2b3761', borderRadius: 6, background: '#0c1330' } }));
 }
+/** The Renderer module (Unity's Renderer): render mode, material, textures, sorting and mesh settings. */
 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,99 +421,76 @@ 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;
                     const triangleCount = (system.getRendererSettings().instancingIndices?.length ?? 0) / 3;
                     const hostGeometry = geometryOptions ?? [];
                     const applyGeometry = (g) => binding.apply((s) => {
+                        // The previous mesh's sets go first, so the positions setter gives
+                        // this mesh the library's own fallback UVs and normals; then every set
+                        // this mesh has. An unindexed mesh draws its vertices in sequence.
                         const settings = s.getRendererSettings();
-                        settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined);
-                        settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined);
-                        settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined);
+                        settings.instancingUVs = undefined;
+                        settings.instancingUVs2 = undefined;
+                        settings.instancingNormals = undefined;
                         s.instancingGeometry = new Float32Array(g.positions);
+                        s.instancingIndices = g.indices
+                            ? new Uint32Array(g.indices)
+                            : Uint32Array.from({ length: g.positions.length / 3 }, (_, i) => i);
+                        if (g.uvs)
+                            s.instancingUVs = new Float32Array(g.uvs);
+                        if (g.uvs2)
+                            s.instancingUVs2 = new Float32Array(g.uvs2);
+                        if (g.normals)
+                            settings.instancingNormals = new Float32Array(g.normals);
                     });
                     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 +521,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 +534,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' },
@@ -548,7 +561,11 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                         }) }, axis))) }) })), system.renderMode === RenderMode.Mesh && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Env map atlas", children: _jsx(SelectField, { value: system.getRendererSettings().reflectionAtlas?.url ?? '', options: [
                                 { value: '', label: 'None' },
                                 ...(textureOptions ?? []).map((option) => ({ value: option.url, label: option.label })),
-                            ], onChange: (url) => patchMaterial({ reflectionAtlas: url ? loadTexture(url) : null }) }) }), _jsx(Row, { label: "Reflection level", children: _jsx(NumberField, { value: system.getRendererSettings().reflectionLevel ?? 1, min: 0, step: 0.1, onChange: (v) => patchMaterial({ reflectionLevel: Math.max(0, v) }) }) })] })), _jsx(Row, { label: "Sort mode", children: _jsx(SelectField, { value: system.sortMode, options: [
+                            ], onChange: (url) => patchMaterial({ reflectionAtlas: url ? loadTexture(url) : null }) }) }), _jsx(Row, { label: "Reflection level", children: _jsx(NumberField, { value: system.getRendererSettings().reflectionLevel ?? 1, min: 0, step: 0.1, onChange: (v) => patchMaterial({ reflectionLevel: Math.max(0, v) }) }) })] })), isMesh && (_jsx(Row, { label: "Render face", children: _jsx(SelectField, { value: system.renderFace, options: [
+                        { value: 'both', label: 'Both' },
+                        { value: 'front', label: 'Front' },
+                        { value: 'back', label: 'Back' },
+                    ], onChange: (face) => binding.apply((s) => (s.renderFace = face)) }) })), _jsx(Row, { label: "Sort mode", children: _jsx(SelectField, { value: system.sortMode, options: [
                         { value: 'none', label: 'None' },
                         { value: 'distance', label: 'By distance' },
                         { value: 'oldestInFront', label: 'Oldest in front' },

package/dist/react/theme.d.ts

@@ -1,19 +1,34 @@
 import type { CSSProperties } from 'react';
+/** The editor's colours and font, for hosts that style their own panels to match. */
 export declare const theme: {
+    /** Background of the side panels and docks. */
     panelBg: string;
+    /** Background of an inspector module or a framed list. */
     sectionBg: string;
+    /** Borders and separators. */
     border: string;
+    /** The border of a selected or switched-on control. */
     borderActive: string;
+    /** Body text. */
     text: string;
+    /** Labels and secondary text. */
     textDim: string;
+    /** Highlights, such as a Save button with something to save. */
     accent: string;
+    /** Background of inputs. */
     inputBg: string;
+    /** The line of curve editors. */
     curveStroke: string;
+    /** The editor's font stack. */
     font: string;
 };
+/** Style of a text or number input. */
 export declare const inputStyle: CSSProperties;
+/** Style of an inspector row: a label column, then the controls. */
 export declare const rowStyle: CSSProperties;
+/** Style of an inspector row's label. */
 export declare const labelStyle: CSSProperties;
+/** Style of a button. */
 export declare const buttonStyle: CSSProperties;
 /** Visually hides a file input while keeping it activatable via an associated <label>. */
 export declare const hiddenFileInputStyle: CSSProperties;

package/dist/react/theme.js

@@ -1,15 +1,27 @@
+/** The editor's colours and font, for hosts that style their own panels to match. */
 export const theme = {
+    /** Background of the side panels and docks. */
     panelBg: 'linear-gradient(180deg, rgba(12, 18, 38, 0.92), rgba(6, 10, 22, 0.94))',
+    /** Background of an inspector module or a framed list. */
     sectionBg: 'rgba(10, 16, 34, 0.6)',
+    /** Borders and separators. */
     border: '#2a365f',
+    /** The border of a selected or switched-on control. */
     borderActive: '#4f6fbe',
+    /** Body text. */
     text: '#eef3ff',
+    /** Labels and secondary text. */
     textDim: '#b7c6ea',
+    /** Highlights, such as a Save button with something to save. */
     accent: '#9eb9ff',
+    /** Background of inputs. */
     inputBg: 'rgba(7, 11, 22, 0.82)',
+    /** The line of curve editors. */
     curveStroke: '#78a5ff',
+    /** The editor's font stack. */
     font: 'Inter, Segoe UI, Roboto, sans-serif',
 };
+/** Style of a text or number input. */
 export const inputStyle = {
     background: theme.inputBg,
     border: `1px solid ${theme.border}`,
@@ -22,6 +34,7 @@ export const inputStyle = {
     boxSizing: 'border-box',
     fontFamily: theme.font,
 };
+/** Style of an inspector row: a label column, then the controls. */
 export const rowStyle = {
     display: 'grid',
     gridTemplateColumns: '110px 1fr',
@@ -29,6 +42,7 @@ export const rowStyle = {
     gap: 8,
     marginTop: 6,
 };
+/** Style of an inspector row's label. */
 export const labelStyle = {
     color: theme.textDim,
     fontSize: 12,
@@ -36,6 +50,7 @@ export const labelStyle = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
 };
+/** Style of a button. */
 export const buttonStyle = {
     border: `1px solid #4563ad`,
     background: 'rgba(28, 48, 98, 0.55)',

package/dist/session.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The editor's headless session: scene, camera, gizmos, history, scene entries, assets, prefab
+ * mode and project save/load, without React. It builds the whole viewport (grid, gizmos, markers),
+ * so it has its own entry point and the UI-free `babylon.quarks-editor` entry stays light.
+ *
+ * @packageDocumentation
+ */
+export { createEditorSession } from './core/editorSession.js';
+export type { EditorFrameStats, EditorProject, EditorSession, EditorSessionOptions, EditorSessionView, EffectEditorHostHandle, PrefabInfo, } from './core/editorSession.js';

package/dist/session.js

@@ -0,0 +1,8 @@
+/**
+ * The editor's headless session: scene, camera, gizmos, history, scene entries, assets, prefab
+ * mode and project save/load, without React. It builds the whole viewport (grid, gizmos, markers),
+ * so it has its own entry point and the UI-free `babylon.quarks-editor` entry stays light.
+ *
+ * @packageDocumentation
+ */
+export { createEditorSession } from './core/editorSession.js';

package/package.json

@@ -1,19 +1,24 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.26.0",
+    "version": "0.28.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"
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./session": {
+            "types": "./dist/session.d.ts",
+            "import": "./dist/session.js"
         },
         "./react": {
-            "import": "./dist/react/index.js",
-            "types": "./dist/react/index.d.ts"
-        }
+            "types": "./dist/react/index.d.ts",
+            "import": "./dist/react/index.js"
+        },
+        "./package.json": "./package.json"
     },
     "files": [
         "dist",
@@ -25,7 +30,8 @@
     "scripts": {
         "clean": "rimraf dist",
         "build": "npm run clean && tsc -p tsconfig.json",
-        "test": "jest"
+        "test": "jest",
+        "docs:check": "typedoc --out node_modules/.cache/typedoc-check"
     },
     "repository": {
         "type": "git",
@@ -51,11 +57,11 @@
     },
     "homepage": "https://github.com/Soullnik/babylon.quarks-standalone#readme",
     "peerDependencies": {
-        "@babylonjs/core": ">=9.0.0",
-        "@babylonjs/materials": ">=9.0.0",
+        "@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",
+        "babylon.quarks": "~0.28.0",
         "react": ">=18",
         "react-dom": ">=18"
     },
@@ -65,9 +71,10 @@
         "@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",
-        "typescript": "^5.9.3"
+        "typescript": "^6.0.3"
     }
 }

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';
@@ -85,7 +85,20 @@ export function searchAssets(assets: EffectAsset[], query: string): EffectAsset[
 
 export const ASSET_DRAG_MIME = 'application/x-quarks-asset-drop';
 
-export type AssetDragPayload = {kind: 'asset'; id: number} | {kind: 'folder'; path: string};
+/** What is dragged out of the Assets panel: one asset, or every asset under a folder. */
+export type AssetDragPayload =
+    | {
+          /** One asset. */
+          kind: 'asset';
+          /** The asset's id. */
+          id: number;
+      }
+    | {
+          /** A folder. */
+          kind: 'folder';
+          /** The folder's path; every asset under it is dragged. */
+          path: string;
+      };
 
 export function writeAssetDrag(dataTransfer: DataTransfer, payload: AssetDragPayload): void {
     dataTransfer.setData(ASSET_DRAG_MIME, JSON.stringify(payload));