babylon.quarks-editor 0.17.8 → 0.18.0

package/dist/react/fields.js

@@ -1,16 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { inputStyle, labelStyle, rowStyle } from './theme';
+import React, { useEffect, useState } from 'react';
+import { InspectorLabel } from './InspectorLabel';
+import { inputStyle, rowStyle } from './theme';
 export function Row(props) {
-    return (_jsxs("div", { style: rowStyle, children: [_jsx("span", { style: labelStyle, title: props.label, children: props.label }), props.children] }));
+    return (_jsxs("div", { style: rowStyle, children: [_jsx(InspectorLabel, { label: props.label, hint: props.hint, hintKey: props.hintKey }), props.children] }));
 }
 /** Number input that keeps focus-friendly local text state and commits parsed values. */
 export function NumberField(props) {
     const [text, setText] = useState(String(round(props.value)));
+    const focusedRef = React.useRef(false);
     useEffect(() => {
-        setText(String(round(props.value)));
+        if (!focusedRef.current) {
+            setText(String(round(props.value)));
+        }
     }, [props.value]);
-    return (_jsx("input", { type: "number", className: "qe-hover", style: inputStyle, value: text, step: props.step ?? 0.1, min: props.min, onChange: (e) => {
+    return (_jsx("input", { type: "number", className: "qe-hover", style: inputStyle, value: text, step: props.step ?? 0.1, min: props.min, onFocus: () => {
+            focusedRef.current = true;
+        }, onBlur: () => {
+            focusedRef.current = false;
+            setText(String(round(props.value)));
+        }, onChange: (e) => {
             setText(e.target.value);
             const parsed = parseFloat(e.target.value);
             if (!Number.isNaN(parsed)) {

package/dist/react/icons.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType, CSSProperties, SVGProps } from 'react';
+export type HeroIcon = ComponentType<SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+}>;
+/** Shared size/style for toolbar and inline icon buttons. */
+export declare function iconStyle(size?: number, extra?: CSSProperties): CSSProperties;

package/dist/react/icons.js

@@ -0,0 +1,10 @@
+/** Shared size/style for toolbar and inline icon buttons. */
+export function iconStyle(size = 14, extra) {
+    return {
+        width: size,
+        height: size,
+        flexShrink: 0,
+        display: 'block',
+        ...extra,
+    };
+}

package/dist/react/index.d.ts

@@ -16,5 +16,9 @@ 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

@@ -11,4 +11,6 @@ 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/inspectorHints.d.ts

@@ -0,0 +1,2 @@
+/** Returns the English tooltip for an inspector label or hint key. */
+export declare function getInspectorHint(key: string): string | undefined;

package/dist/react/inspectorHints.js

@@ -0,0 +1,138 @@
+/** English tooltips for inspector labels and module titles. */
+const INSPECTOR_HINTS = {
+    // Module titles
+    Main: 'Core timing and initial particle properties when each particle is born.',
+    Emission: 'How many particles spawn continuously, along movement, or in timed bursts.',
+    Shape: 'The volume or surface particles spawn from (sphere, box, cone, mesh, etc.).',
+    'Size over Lifetime': 'Multiplies each particle’s size over its normalized lifetime (0 = birth, 1 = death).',
+    'Color over Lifetime': 'Tints color and alpha over each particle’s normalized lifetime.',
+    Renderer: 'How particles are rendered: billboard mode, material, texture, depth, and sort order.',
+    'Speed over Lifetime': 'Multiplies particle speed over normalized lifetime.',
+    'Limit Speed over Lifetime': 'Clamps particle speed and optionally dampens velocity toward the limit.',
+    'Force over Lifetime': 'Adds constant world-space acceleration (force per mass) over lifetime.',
+    'Velocity over Lifetime': 'Adds linear and orbital velocity each frame in local or world space.',
+    'Inherit Velocity': 'Copies the emitter’s movement into new particle velocity.',
+    Gravity: 'Applies a constant downward force (Earth-like gravity by default).',
+    'Rotation over Lifetime': 'Spins particles by setting angular velocity over lifetime.',
+    Noise: 'Procedural noise that jitters particle position and rotation.',
+    Turbulence: '3D turbulent velocity field that swirls particles through space.',
+    'Randomize Direction': 'Randomizes emission direction within a cone angle around the shape normal.',
+    Collision: 'Bounces particles off a ground plane in the editor preview.',
+    'Color by Speed': 'Maps particle color from current speed using a gradient.',
+    'Size by Speed': 'Maps particle size from current speed using a curve.',
+    'Rotation by Speed': 'Maps angular velocity from current speed.',
+    'Orbit over Lifetime': 'Orbits particles around a local axis over their lifetime.',
+    'Width over Trail': 'Controls trail ribbon width along the particle path (trail render mode).',
+    'Texture Sheet Animation': 'Animates UV tiles on the texture like a flipbook sprite sheet.',
+    'Sub Emitters': 'Spawns a linked child particle system on birth, death, or every frame.',
+    Object: 'Transform of the selected node. Moving the stage parent is preview-only and not exported.',
+    // Main
+    Duration: 'How long the particle system runs before stopping (non-looping) or one loop cycle.',
+    Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
+    'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
+    Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
+    'Start delay': 'Wait time before emission starts after play or restart.',
+    'Start lifetime': 'How long each spawned particle lives before dying.',
+    'Start speed': 'Initial speed along the emission direction when a particle is born.',
+    'Start size': 'Initial size of particles — uniform scalar or separate X/Y/Z for mesh billboards.',
+    'Start color': 'Initial color: solid, random between two, or gradient-based.',
+    'Start rotation': 'Initial orientation: fixed angle, random, per-axis Euler, or random 3D quaternion.',
+    '  X (rad)': 'Start rotation around the local X axis in radians.',
+    '  Y (rad)': 'Start rotation around the local Y axis in radians.',
+    '  Z (rad)': 'Start rotation around the local Z axis in radians.',
+    // Emission
+    'Rate over time': 'Particles spawned per second while the system is playing.',
+    'Rate over distance': 'Particles spawned per unit of emitter movement.',
+    Time: 'Seconds from effect start when this burst fires.',
+    Count: 'Number of particles emitted in each burst cycle.',
+    Cycles: 'How many times the burst repeats.',
+    Interval: 'Seconds between repeated cycles of the same burst.',
+    Probability: 'Chance (0–1) that the burst or sub-emitter spawn actually happens.',
+    // Shape
+    'shape.type': 'Emitter volume type that defines where new particles appear.',
+    Radius: 'Outer radius of spherical or circular emitter shapes.',
+    Arc: 'Angular span (radians) of partial circle or sphere emission.',
+    Thickness: 'Shell thickness for hollow shapes (0 = surface, 1 = filled volume).',
+    Angle: 'Cone opening angle for cone-shaped emitters.',
+    'Donut radius': 'Inner tube radius of a torus/donut emitter.',
+    Width: 'Emitter extent along the local X axis (box/grid shapes).',
+    Height: 'Emitter extent along the local Y axis (box/grid shapes).',
+    Columns: 'Number of grid columns for grid-shaped emission.',
+    Rows: 'Number of grid rows for grid-shaped emission.',
+    'Source mesh': 'Scene mesh whose surface particles spawn from (mesh surface shape).',
+    'Emit mode': 'How particles are distributed across the shape: random, loop, ping-pong, or burst spread.',
+    Spread: 'Randomizes spawn position within the shape (0 = exact shape, higher = more scatter).',
+    // Renderer
+    'Render mode': 'Orientation and geometry used to draw each particle.',
+    'Trail length': 'Maximum number of trail segments per particle (trail mode).',
+    'Follow origin': 'Keeps the trail anchored to the emitter origin instead of the particle head.',
+    'Speed factor': 'How much particle speed stretches the billboard (stretched billboard mode).',
+    'Length factor': 'Base stretch multiplier for stretched billboards.',
+    Source: 'Material preset loaded from the effect JSON (read-only reference).',
+    'Blend mode': 'How particle color is composited over the background.',
+    Transparent: 'Enables alpha blending for soft edges and fade-outs.',
+    Texture: 'Sprite or flipbook image applied to each particle.',
+    'Alpha test': 'Pixels below this alpha are discarded (cutout/hard edges).',
+    'Depth write': 'Writes to the depth buffer — usually off for additive particles.',
+    'Depth test': 'Whether particles are occluded by scene geometry.',
+    Geometry: 'Mesh vertices used when render mode is Mesh.',
+    'Render order': 'Sort priority within the batch — higher draws on top.',
+    'Soft particles': 'Fades particles near intersecting geometry to reduce hard cutouts.',
+    'Fade near/far': 'Distance range (near, far) for soft-particle depth fading.',
+    // Texture sheet
+    'Tiles U': 'Number of horizontal cells in the texture atlas.',
+    'Tiles V': 'Number of vertical cells in the texture atlas.',
+    'Blend tiles': 'Smoothly blends between adjacent atlas tiles during animation.',
+    'Start tile': 'Atlas cell index where playback begins (0 = top-left).',
+    'Animate frames': 'Enables frame-over-lifetime curve to cycle through atlas tiles.',
+    // Sub emitters
+    Trigger: 'When the child system is spawned: on particle birth, death, or every frame.',
+    'Use velocity': 'Orients the sub-emitter spawn using the parent particle’s velocity.',
+    // Object transform
+    Position: 'Local X/Y/Z position of the selected emitter or group node.',
+    Rotation: 'Local rotation in degrees (Euler) of the selected node.',
+    Scale: 'Local X/Y/Z scale of the selected node.',
+    // Gradient editor
+    'Stop color': 'RGB color at the selected gradient key.',
+    'Stop alpha': 'Opacity at the selected gradient key (0 = transparent, 1 = opaque).',
+    'Stop position': 'Normalized position of this key along the gradient (0 = start, 1 = end).',
+    // Shared / behavior fields
+    Dampen: 'How quickly velocity is reduced when speed exceeds the limit (0 = hard clamp, 1 = smooth).',
+    Space: 'Whether velocity is applied in local emitter space or world space.',
+    'Linear X': 'Added velocity along local/world X over lifetime.',
+    'Linear Y': 'Added velocity along local/world Y over lifetime.',
+    'Linear Z': 'Added velocity along local/world Z over lifetime.',
+    'Orbital X': 'Orbital rotation speed around the X axis (radians per second).',
+    'Orbital Y': 'Orbital rotation speed around the Y axis (radians per second).',
+    'Orbital Z': 'Orbital rotation speed around the Z axis (radians per second).',
+    Multiplier: 'Scales how much emitter velocity is copied to new particles.',
+    'inheritVelocity.mode': 'Initial copies spawn-time velocity; Current uses live emitter velocity.',
+    'gravity.strength': 'Magnitude of the downward force applied to every particle.',
+    'noise.frequency': 'How quickly the noise pattern changes over time and space.',
+    'noise.strength': 'Overall intensity of the noise displacement.',
+    'Position amount': 'How strongly noise affects particle position.',
+    'Rotation amount': 'How strongly noise affects particle rotation.',
+    'turbulence.scale': 'Size of turbulence cells — larger values make smoother, broader swirls.',
+    Octaves: 'Number of noise layers combined for finer turbulent detail.',
+    'turbulence.strength': 'Per-axis multiplier for turbulent velocity.',
+    'Time scale': 'How fast the turbulence field evolves over time (per axis).',
+    'Angle (rad)': 'Maximum random deflection from the base emit direction, in radians.',
+    Bounce: 'Energy retained after hitting the ground (0 = no bounce, 1 = full bounce).',
+    'Floor Y': 'World-space Y height of the preview ground plane used for collision.',
+    'Speed range': 'Particle speed range (min, max) that maps to the color/size/rotation curve.',
+    'Orbit speed': 'Angular speed of orbit around the configured axis over lifetime.',
+    'rotationOverLife.velocity': 'Angular velocity applied over normalized lifetime (rad/s).',
+    'rotationBySpeed.velocity': 'Angular velocity mapped from particle speed (rad/s).',
+    // Size main axes
+    X: 'Start size along the local X axis.',
+    Y: 'Start size along the local Y axis.',
+    Z: 'Start size along the local Z axis.',
+    // Force over life axes
+    'force.x': 'Acceleration along world X applied over lifetime.',
+    'force.y': 'Acceleration along world Y applied over lifetime.',
+    'force.z': 'Acceleration along world Z applied over lifetime.',
+};
+/** Returns the English tooltip for an inspector label or hint key. */
+export function getInspectorHint(key) {
+    return INSPECTOR_HINTS[key];
+}

package/dist/react/modules.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
 import { ColorOverLife, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3Function, Vector4, } from 'babylon.quarks';
 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 { CurveEditor } from './CurveEditor';
 import { GradientEditor } from './GradientEditor';
 import { ModuleSection } from './ModuleSection';
 import { PromptDialog } from './PromptDialog';
 import { CheckboxField, NumberField, Row, SelectField } from './fields';
 import { ValueField } from './ValueField';
+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]);
@@ -154,7 +160,19 @@ 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', fontSize: 13 }, title: "Remove burst", onClick: () => binding.apply((s) => s.emissionBursts.splice(i, 1)), children: "\u2715" })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 4 }, children: [_jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Time", _jsx(NumberField, { value: burst.time, min: 0, onChange: (time) => binding.apply(() => (burst.time = time)) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Count", _jsx(NumberField, { value: readScalar(burst.count).value, min: 0, step: 1, onChange: (count) => binding.apply(() => (burst.count = new ConstantValue(Math.round(count)))) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Cycles", _jsx(NumberField, { value: burst.cycle, min: 1, step: 1, onChange: (v) => binding.apply(() => (burst.cycle = Math.round(v))) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Interval", _jsx(NumberField, { value: burst.interval, min: 0.01, onChange: (v) => binding.apply(() => (burst.interval = v)) })] }), _jsxs("label", { style: { fontSize: 10.5, color: '#b7c6ea' }, children: ["Probability", _jsx(NumberField, { value: burst.probability, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (burst.probability = Math.min(1, v))) })] })] })] }, i))), _jsx("button", { className: "qe-hover", style: { marginTop: 8, background: 'none', border: '1px dashed #34477f', color: '#9eb9ff', borderRadius: 8, padding: '5px 10px', cursor: 'pointer', fontSize: 12.5 }, onClick: () => binding.apply((s) => s.emissionBursts.push({ time: 0, count: new ConstantValue(20), cycle: 1, interval: 0.01, probability: 1 })), children: "+ Add burst" })] }));
+    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',
+                    color: '#9eb9ff',
+                    borderRadius: 8,
+                    padding: '5px 10px',
+                    cursor: 'pointer',
+                    fontSize: 12.5,
+                    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"] })] }));
 }
 // 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
@@ -168,7 +186,7 @@ export function ShapeModule({ binding }) {
     const scene = system.emitter.getScene();
     // 'vfxBatch' is the renderer's own internal instancing mesh — never a valid emission source.
     const meshOptions = scene.meshes.filter((m) => m instanceof Mesh && m.name !== 'vfxBatch' && m.getTotalVertices() > 0);
-    return (_jsxs(ModuleSection, { title: "Shape", children: [_jsx(Row, { label: "Shape", children: _jsx(SelectField, { value: type, options: SHAPE_TYPES, onChange: (next) => binding.apply((s) => (s.emitterShape = createShape(next, params))) }) }), keys.map((key) => (_jsx(Row, { label: PARAM_LABELS[key], children: _jsx(NumberField, { value: params[key], min: 0, onChange: (v) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, [key]: v }))) }) }, key))), type === 'mesh_surface' && (_jsx(Row, { label: "Source mesh", children: _jsx(SelectField, { value: params.mesh?.uniqueId != null ? String(params.mesh.uniqueId) : '__none', options: [
+    return (_jsxs(ModuleSection, { title: "Shape", children: [_jsx(Row, { label: "Shape", hintKey: "shape.type", children: _jsx(SelectField, { value: type, options: SHAPE_TYPES, onChange: (next) => binding.apply((s) => (s.emitterShape = createShape(next, params))) }) }), keys.map((key) => (_jsx(Row, { label: PARAM_LABELS[key], children: _jsx(NumberField, { value: params[key], min: 0, onChange: (v) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, [key]: v }))) }) }, key))), type === 'mesh_surface' && (_jsx(Row, { label: "Source mesh", children: _jsx(SelectField, { value: params.mesh?.uniqueId != null ? String(params.mesh.uniqueId) : '__none', options: [
                         { value: '__none', label: '(none)' },
                         ...meshOptions.map((m) => ({ value: String(m.uniqueId), label: m.name })),
                     ], onChange: (id) => {
@@ -279,6 +297,19 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
     const system = binding.system;
     const currentTextureUrl = system.texture?.url ?? '';
     const [promptingTextureUrl, setPromptingTextureUrl] = useState(false);
+    const materialLabel = getMaterialLabel(system.material);
+    const loadTexture = useMemo(() => {
+        return (url) => {
+            if (resolveTexture) {
+                return resolveTexture(url);
+            }
+            const scene = system.emitter.getScene();
+            return scene ? new Texture(url, scene) : null;
+        };
+    }, [resolveTexture, system]);
+    const patchMaterial = (patch) => {
+        binding.apply((s) => applyRendererMaterial(s, patch));
+    };
     return (_jsxs(ModuleSection, { title: "Renderer", children: [_jsx(Row, { label: "Render mode", children: _jsx(SelectField, { value: system.renderMode, options: [
                         { value: RenderMode.BillBoard, label: 'Billboard' },
                         { value: RenderMode.StretchedBillBoard, label: 'Stretched billboard' },
@@ -290,62 +321,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                 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)) }) })] })), 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) => {
-                        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);
-                        s.instancingGeometry = new Float32Array(g.positions);
-                    });
-                    return (_jsx(Row, { label: "Geometry", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(SelectField, { value: preset, options: [
-                                        ...(preset === 'custom' ? [{ value: 'custom', label: 'Custom (imported)' }] : []),
-                                        { value: 'quad', label: 'Quad' },
-                                        { value: 'cube', label: 'Cube' },
-                                        ...hostGeometry.map((g, i) => ({ value: `host:${i}`, label: g.label })),
-                                        ...(resolveGeometry ? [{ value: '__file', label: 'Load from file…' }] : []),
-                                    ], onChange: (next) => {
-                                        if (next === 'custom') {
-                                            return;
-                                        }
-                                        if (next === '__file') {
-                                            const input = document.createElement('input');
-                                            input.type = 'file';
-                                            input.accept = '.glb,.gltf,model/gltf-binary,model/gltf+json';
-                                            input.onchange = () => {
-                                                const file = input.files?.[0];
-                                                if (file) {
-                                                    resolveGeometry(file).then(applyGeometry);
-                                                }
-                                            };
-                                            input.click();
-                                            return;
-                                        }
-                                        if (next.startsWith('host:')) {
-                                            applyGeometry(hostGeometry[Number(next.slice(5))]);
-                                            return;
-                                        }
-                                        binding.apply((s) => {
-                                            const settings = s.getRendererSettings();
-                                            if (next === 'cube') {
-                                                settings.instancingIndices = MESH_CUBE_INDICES;
-                                                settings.instancingUVs = undefined;
-                                                settings.instancingNormals = undefined;
-                                                s.instancingGeometry = MESH_CUBE_POSITIONS;
-                                            }
-                                            else {
-                                                settings.instancingIndices = MESH_QUAD_INDICES;
-                                                settings.instancingUVs = MESH_QUAD_UVS;
-                                                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("div", { style: {
+                            }) }) })] })), 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,
@@ -353,15 +329,15 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                     color: '#7c8db5',
                     textTransform: 'uppercase',
                     letterSpacing: 0.4,
-                }, children: "Material" }), system.material != null && (_jsxs("div", { style: { fontSize: 10.5, color: '#9eb9ff', marginBottom: 2 }, children: ["Imported material: ", system.material.name ?? 'unnamed', " \u2014 settings below were derived from it"] })), _jsx(Row, { label: "Blend mode", children: _jsx(SelectField, { value: system.blending, options: [
+                    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: [
                         { value: 1, label: 'Additive' },
                         { value: 2, label: 'Alpha blend' },
                         { value: 3, label: 'Subtract' },
                         { value: 4, label: 'Multiply' },
-                    ], onChange: (blend) => binding.apply((s) => (s.blending = blend)) }) }), _jsx(Row, { label: "Transparent", children: _jsx(CheckboxField, { value: !!system.getRendererSettings().materialTransparent, onChange: (v) => binding.apply((s) => {
-                        s.getRendererSettings().materialTransparent = v;
-                        s.neededToUpdateRender = true;
-                    }) }) }), resolveTexture && (_jsxs(Row, { label: "Texture", children: [_jsx(SelectField, { value: !currentTextureUrl
+                    ], 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
@@ -378,7 +354,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                 return;
                             }
                             if (url === '__none') {
-                                binding.apply((s) => (s.texture = null));
+                                patchMaterial({ texture: null });
                                 return;
                             }
                             if (url === '__url') {
@@ -394,20 +370,27 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                     if (!file) {
                                         return;
                                     }
-                                    // Read as a data URI so the texture survives Export/Save/reimport;
-                                    // an object URL (blob:) would be dead after a reload.
                                     const reader = new FileReader();
                                     reader.onload = () => {
-                                        binding.apply((s) => (s.texture = resolveTexture(reader.result)));
+                                        const texture = loadTexture(reader.result);
+                                        if (texture) {
+                                            patchMaterial({ texture });
+                                        }
                                     };
                                     reader.readAsDataURL(file);
                                 };
                                 input.click();
                                 return;
                             }
-                            binding.apply((s) => (s.texture = resolveTexture(url)));
+                            const texture = loadTexture(url);
+                            if (texture) {
+                                patchMaterial({ texture });
+                            }
                         } }), promptingTextureUrl && (_jsx(PromptDialog, { title: "Texture URL", defaultValue: currentTextureUrl, placeholder: "https://\u2026", onSubmit: (url) => {
-                            binding.apply((s) => (s.texture = resolveTexture(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,
@@ -416,18 +399,63 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                             objectFit: 'contain',
                             borderRadius: 6,
                             border: '1px solid #2b3761',
-                            // Checkerboard so texture transparency is visible.
                             background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
-                        } }))] })), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) })), _jsx(Row, { label: "Alpha test", children: _jsx(NumberField, { value: system.getRendererSettings().materialAlphaTest ?? 0, min: 0, step: 0.05, onChange: (v) => binding.apply((s) => {
-                        s.getRendererSettings().materialAlphaTest = Math.min(1, v);
-                        s.neededToUpdateRender = true;
-                    }) }) }), _jsx(Row, { label: "Depth write", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthWrite, onChange: (v) => binding.apply((s) => {
-                        s.getRendererSettings().materialDepthWrite = v;
-                        s.neededToUpdateRender = true;
-                    }) }) }), _jsx(Row, { label: "Depth test", children: _jsx(CheckboxField, { value: system.getRendererSettings().materialDepthTest, onChange: (v) => binding.apply((s) => {
-                        s.getRendererSettings().materialDepthTest = v;
-                        s.neededToUpdateRender = true;
-                    }) }) })] }));
+                        } }))] }), _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 &&
+                (() => {
+                    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) => {
+                        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);
+                        s.instancingGeometry = new Float32Array(g.positions);
+                    });
+                    return (_jsx(Row, { label: "Geometry", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(SelectField, { value: preset, options: [
+                                        ...(preset === 'custom' ? [{ value: 'custom', label: 'Custom (imported)' }] : []),
+                                        { value: 'quad', label: 'Quad' },
+                                        { value: 'cube', label: 'Cube' },
+                                        ...hostGeometry.map((g, i) => ({ value: `host:${i}`, label: g.label })),
+                                        ...(resolveGeometry ? [{ value: '__file', label: 'Load from file…' }] : []),
+                                    ], onChange: (next) => {
+                                        if (next === 'custom') {
+                                            return;
+                                        }
+                                        if (next === '__file') {
+                                            const input = document.createElement('input');
+                                            input.type = 'file';
+                                            input.accept = '.glb,.gltf,model/gltf-binary,model/gltf+json';
+                                            input.onchange = () => {
+                                                const file = input.files?.[0];
+                                                if (file) {
+                                                    resolveGeometry(file).then(applyGeometry);
+                                                }
+                                            };
+                                            input.click();
+                                            return;
+                                        }
+                                        if (next.startsWith('host:')) {
+                                            applyGeometry(hostGeometry[Number(next.slice(5))]);
+                                            return;
+                                        }
+                                        binding.apply((s) => {
+                                            const settings = s.getRendererSettings();
+                                            if (next === 'cube') {
+                                                settings.instancingIndices = MESH_CUBE_INDICES;
+                                                settings.instancingUVs = undefined;
+                                                settings.instancingNormals = undefined;
+                                                s.instancingGeometry = MESH_CUBE_POSITIONS;
+                                            }
+                                            else {
+                                                settings.instancingIndices = MESH_QUAD_INDICES;
+                                                settings.instancingUVs = MESH_QUAD_UVS;
+                                                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(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) }))] }));
 }
 function removeBehavior(system, type) {
     const behaviors = system.behaviors;

package/dist/react/theme.d.ts

@@ -15,6 +15,8 @@ export declare const inputStyle: CSSProperties;
 export declare const rowStyle: CSSProperties;
 export declare const labelStyle: CSSProperties;
 export declare const buttonStyle: CSSProperties;
+/** Visually hides a file input while keeping it activatable via an associated <label>. */
+export declare const hiddenFileInputStyle: CSSProperties;
 /**
  * Two hover conventions, applied via className (inline `style` can't express `:hover`):
  * - `qe-hover` — brightens elements that already have a solid inline background/border

package/dist/react/theme.js

@@ -42,10 +42,22 @@ export const buttonStyle = {
     color: '#d8e3ff',
     padding: '6px 10px',
     borderRadius: 8,
-    fontSize: 12.5,
     cursor: 'pointer',
+    fontSize: 12.5,
     fontFamily: theme.font,
 };
+/** Visually hides a file input while keeping it activatable via an associated <label>. */
+export const hiddenFileInputStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0,
+};
 /**
  * Two hover conventions, applied via className (inline `style` can't express `:hover`):
  * - `qe-hover` — brightens elements that already have a solid inline background/border
@@ -98,4 +110,44 @@ select.qe-hover:hover, input.qe-hover:hover, select.qe-hover:focus, input.qe-hov
 .qe-root ::-webkit-scrollbar-corner {
     background: transparent;
 }
+.qe-tooltip {
+    z-index: 100000;
+    padding: 8px 10px;
+    font-size: 11.5px;
+    line-height: 1.45;
+    color: ${theme.text};
+    background: linear-gradient(180deg, rgba(18, 26, 52, 0.98), rgba(8, 12, 26, 0.98));
+    border: 1px solid ${theme.borderActive};
+    border-radius: 8px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
+    pointer-events: none;
+    font-family: ${theme.font};
+    animation: qe-tooltip-in 0.12s ease;
+}
+.qe-tooltip--right::before,
+.qe-tooltip--left::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    transform: translateY(-50%);
+}
+.qe-tooltip--right::before {
+    left: -10px;
+    border-right-color: ${theme.borderActive};
+}
+.qe-tooltip--left::before {
+    right: -10px;
+    border-left-color: ${theme.borderActive};
+}
+@keyframes qe-tooltip-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babylon.quarks-editor",
-  "version": "0.17.8",
+  "version": "0.18.0",
   "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,17 +52,21 @@
   "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",
-    "rimraf": "^6.0.0",
-    "typescript": "^5.9.3",
     "react-dom": "^19.0.0",
-    "@types/react-dom": "^19.0.0"
+    "rimraf": "^6.0.0",
+    "typescript": "^5.9.3"
   }
 }