babylon.quarks-editor 0.26.0 → 0.27.0

package/src/react/EffectEditor.tsx

@@ -1,8 +1,9 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {ParticleSystem} from 'babylon.quarks';
 import React, {useEffect, useSyncExternalStore} from 'react';
-import {EffectBinding} from '../core/binding';
+import {EffectBinding} from '../core/binding.js';
 import {
+    AttractorModule,
     CollisionModule,
     ColorBySpeedModule,
     EmitDirectionModule,
@@ -22,8 +23,8 @@ import {
     TurbulenceModule,
     VelocityOverLifeModule,
     WidthOverTrailModule,
-} from './behaviorModules';
-import type {GeometryData, GeometryOption, TextureOption} from './modules';
+} from './behaviorModules.js';
+import type {GeometryData, GeometryOption, TextureOption} from './modules.js';
 import {
     ColorOverLifeModule,
     EmissionModule,
@@ -31,10 +32,10 @@ import {
     RendererModule,
     ShapeModule,
     SizeOverLifeModule,
-} from './modules';
-import {ObjectModule} from './ObjectModule';
-import {SubEmittersModule} from './SubEmittersModule';
-import {theme} from './theme';
+} from './modules.js';
+import {ObjectModule} from './ObjectModule.js';
+import {SubEmittersModule} from './SubEmittersModule.js';
+import {theme} from './theme.js';
 
 export interface EffectEditorProps {
     binding: EffectBinding;
@@ -112,6 +113,7 @@ export const EffectEditor = React.memo(function EffectEditor(props: EffectEditor
             <InheritVelocityModule binding={binding} />
             <ForceOverLifeModule binding={binding} />
             <GravityModule binding={binding} />
+            <AttractorModule binding={binding} />
             <OrbitOverLifeModule binding={binding} />
             <ColorOverLifeModule binding={binding} />
             <ColorBySpeedModule binding={binding} />

package/src/react/EffectEditorHost.tsx

@@ -1,19 +1,19 @@
-import {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera';
+import {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera.js';
 // scene.pick lives in Ray's side effect (Babylon 9.31 no longer pulls it in); gizmos pick through it.
-import '@babylonjs/core/Culling/ray';
-import {Engine} from '@babylonjs/core/Engines/engine';
-import {PointerEventTypes} from '@babylonjs/core/Events/pointerEvents';
-import {GizmoManager} from '@babylonjs/core/Gizmos/gizmoManager';
-import {DirectionalLight} from '@babylonjs/core/Lights/directionalLight';
-import {Color3, Color4} from '@babylonjs/core/Maths/math.color';
-import {Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector';
-import {Viewport} from '@babylonjs/core/Maths/math.viewport';
-import type {Mesh} from '@babylonjs/core/Meshes/mesh';
-import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
-import {UtilityLayerRenderer} from '@babylonjs/core/Rendering/utilityLayerRenderer';
-import {Scene} from '@babylonjs/core/scene';
-import {GridMaterial} from '@babylonjs/materials/grid/gridMaterial';
+import '@babylonjs/core/Culling/ray.js';
+import {Engine} from '@babylonjs/core/Engines/engine.js';
+import {PointerEventTypes} from '@babylonjs/core/Events/pointerEvents.js';
+import {GizmoManager} from '@babylonjs/core/Gizmos/gizmoManager.js';
+import {DirectionalLight} from '@babylonjs/core/Lights/directionalLight.js';
+import {Color3, Color4} from '@babylonjs/core/Maths/math.color.js';
+import {Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector.js';
+import {Viewport} from '@babylonjs/core/Maths/math.viewport.js';
+import type {Mesh} from '@babylonjs/core/Meshes/mesh.js';
+import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder.js';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
+import {UtilityLayerRenderer} from '@babylonjs/core/Rendering/utilityLayerRenderer.js';
+import {Scene} from '@babylonjs/core/scene.js';
+import {GridMaterial} from '@babylonjs/materials/grid/gridMaterial.js';
 import {
     ArrowLeftIcon,
     ArrowPathIcon,
@@ -31,8 +31,8 @@ import {
 import {BatchedRenderer, QuarksUtil} from 'babylon.quarks';
 import React, {useCallback, useDeferredValue, useEffect, useMemo, useReducer, useRef, useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import {getAssetDragSession, setAssetDragSession} from '../core/assetDragSession';
-import {ASSET_DRAG_MIME, describeAssetDrag, readAssetDrag, type AssetDragPayload} from '../core/assetTree';
+import {getAssetDragSession, setAssetDragSession} from '../core/assetDragSession.js';
+import {ASSET_DRAG_MIME, describeAssetDrag, readAssetDrag, type AssetDragPayload} from '../core/assetTree.js';
 import {
     collectJsonFiles,
     createEffectAsset,
@@ -41,24 +41,24 @@ import {
     removeAssets,
     type AssetLoadProgress,
     type EffectAsset,
-} from '../core/assets';
-import {EffectBinding} from '../core/binding';
-import {createSceneDefaultEntry} from '../core/defaultEffect';
-import {serializeEffectTree} from '../core/effectTree';
-import {EmitterShapeWireframes} from '../core/emitterShapeWireframe';
-import {GalleryDropMarker} from '../core/galleryDropMarker';
-import {cancelGalleryCameraFocus, focusGalleryEntry} from '../core/galleryLayout';
+} from '../core/assets.js';
+import {EffectBinding} from '../core/binding.js';
+import {createSceneDefaultEntry} from '../core/defaultEffect.js';
+import {serializeEffectTree} from '../core/effectTree.js';
+import {EmitterShapeWireframes} from '../core/emitterShapeWireframe.js';
+import {GalleryDropMarker} from '../core/galleryDropMarker.js';
+import {cancelGalleryCameraFocus, focusGalleryEntry} from '../core/galleryLayout.js';
 import {
     applyGalleryPlayback,
     countGalleryParticles,
     hasActivePreview,
     pauseFinishedPreviews,
-} from '../core/galleryPlayback';
-import {pickGroundPosition, placeSceneEntriesAt, setSceneEntryVisible} from '../core/galleryScene';
-import {GallerySelectionMarker} from '../core/gallerySelectionMarker';
-import {EffectHistory, type HistoryStacks} from '../core/history';
-import {parseEffectFromJson} from '../core/loadEffect';
-import {pickAssetFolderFiles} from '../core/pickAssetFiles';
+} from '../core/galleryPlayback.js';
+import {pickGroundPosition, placeSceneEntriesAt, setSceneEntryVisible} from '../core/galleryScene.js';
+import {GallerySelectionMarker} from '../core/gallerySelectionMarker.js';
+import {EffectHistory, type HistoryStacks} from '../core/history.js';
+import {parseEffectFromJson} from '../core/loadEffect.js';
+import {pickAssetFolderFiles} from '../core/pickAssetFiles.js';
 import {
     clearFocusFinished,
     createPlaybackState,
@@ -67,33 +67,33 @@ import {
     markFocusFinished,
     setFocusElapsed,
     type PlaybackState,
-} from '../core/playback';
-import type {ProjectStore, StoredAsset, StoredScene} from '../core/projectStore';
-import {logRenderMismatch} from '../core/renderDebug';
+} from '../core/playback.js';
+import type {ProjectStore, StoredAsset, StoredScene} from '../core/projectStore.js';
+import {logRenderMismatch} from '../core/renderDebug.js';
 import {
     bindingFromSceneEntry,
     countInstancesByAsset,
     disposeSceneEntry,
     instantiateSceneEntry,
     type SceneEntry,
-} from '../core/sceneEntries';
-import {pauseFocus, scrubFocusToSettled} from '../core/scrub';
-import {computeTimelineRows, computeTimelineSpan} from '../core/timeline';
-import {notifyTransformChanged, subscribeTransform} from '../core/transformStore';
-import {toggleStagePlayback} from '../core/transport';
-import {GalleryViewportPicker} from '../core/viewportPicker';
-import {AssetsPanel} from './AssetsPanel';
-import {ChoiceDialog} from './ChoiceDialog';
-import {EffectEditor} from './EffectEditor';
-import {EffectTreeView} from './EffectTreeView';
-import {MessageDialog} from './MessageDialog';
-import {PromptDialog} from './PromptDialog';
-import {ScenePanel} from './ScenePanel';
-import {TimelinePanel} from './TimelinePanel';
-import {TransportBar} from './TransportBar';
-import {iconStyle, type HeroIcon} from './icons';
-import type {GeometryData, GeometryOption, TextureOption} from './modules';
-import {buttonStyle, globalEditorStyles, theme} from './theme';
+} from '../core/sceneEntries.js';
+import {pauseFocus, scrubFocusToSettled} from '../core/scrub.js';
+import {computeTimelineRows, computeTimelineSpan} from '../core/timeline.js';
+import {notifyTransformChanged, subscribeTransform} from '../core/transformStore.js';
+import {toggleStagePlayback} from '../core/transport.js';
+import {GalleryViewportPicker} from '../core/viewportPicker.js';
+import {AssetsPanel} from './AssetsPanel.js';
+import {ChoiceDialog} from './ChoiceDialog.js';
+import {EffectEditor} from './EffectEditor.js';
+import {EffectTreeView} from './EffectTreeView.js';
+import {MessageDialog} from './MessageDialog.js';
+import {PromptDialog} from './PromptDialog.js';
+import {ScenePanel} from './ScenePanel.js';
+import {TimelinePanel} from './TimelinePanel.js';
+import {TransportBar} from './TransportBar.js';
+import {iconStyle, type HeroIcon} from './icons.js';
+import type {GeometryData, GeometryOption, TextureOption} from './modules.js';
+import {buttonStyle, globalEditorStyles, theme} from './theme.js';
 
 /**
  * The effect's JSON, with a warning when it points at object URLs: a texture
@@ -390,11 +390,12 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
     };
 
     useEffect(() => {
-        const engine = new Engine(canvasRef.current!, true);
+        const canvas = canvasRef.current!;
+        const engine = new Engine(canvas, true);
         const scene = new Scene(engine);
         scene.clearColor = new Color4(0.03, 0.04, 0.09, 1);
         const camera = new ArcRotateCamera('cam', -Math.PI / 2, 1.15, 9, new BVector3(0, 1.4, 0), scene);
-        camera.attachControl(canvasRef.current!, true);
+        camera.attachControl(canvas, true);
         camera.wheelDeltaPercentage = 0.01;
 
         // Mesh render mode particles are lit (billboard modes ignore these); the grid is visual
@@ -453,7 +454,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
         const state = stateRef.current;
 
         const handleViewportPointerLeave = () => viewportPicker.setHover(null);
-        canvasRef.current?.addEventListener('pointerleave', handleViewportPointerLeave);
+        canvas.addEventListener('pointerleave', handleViewportPointerLeave);
 
         const pointerObserver = scene.onPointerObservable.add((pointerInfo) => {
             if (assetDragDepthRef.current > 0) {
@@ -1313,7 +1314,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
         });
 
         const resizeObserver = new ResizeObserver(() => engine.resize());
-        resizeObserver.observe(canvasRef.current!);
+        resizeObserver.observe(canvas);
         const onKey = (e: KeyboardEvent) => {
             const key = e.key.toLowerCase();
             if ((e.ctrlKey || e.metaKey) && key === 's') {
@@ -1375,13 +1376,13 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
             emitterWireframesRef.current = null;
             viewportPicker.dispose();
             viewportPickerRef.current = null;
-            canvasRef.current?.removeEventListener('pointerleave', handleViewportPointerLeave);
+            canvas.removeEventListener('pointerleave', handleViewportPointerLeave);
             scene.onPointerObservable.remove(pointerObserver);
             gizmoManager.dispose();
             gizmoUtilityLayer.dispose();
             engine.dispose();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- mount only: builds the engine and scene once
     }, []);
 
     useEffect(() => {
@@ -1527,13 +1528,6 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
     }, [selectedNode, binding, isAssetsLoading]);
 
     const state = stateRef.current;
-    const gizmoNode =
-        selectedNode && !selectedNode.isDisposed()
-            ? selectedNode
-            : binding?.root && !binding.root.isDisposed()
-              ? binding.root
-              : null;
-
     const allSystems = binding ? [binding.system, ...binding.subSystems] : [];
     const activeSystem = binding ? (allSystems.find((s) => s.emitter === selectedNode) ?? binding.system) : null;
     // The inspector is the expensive part of a selection change (every module re-renders for the
@@ -1554,22 +1548,23 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
     const instanceCounts = useMemo(() => countInstancesByAsset(sceneEntries), [sceneEntries]);
     const showTimeline = Boolean(binding && activeSystem && state);
     const timelinePlaybackEnabled = !focusedRoot || visibleRootIdSet.has(focusedRoot.uniqueId);
+    const {resolveTexture, resolveGeometry} = props;
     const resolveTextureForEditor = useCallback(
         (url: string) => {
             const scene = stateRef.current?.scene;
-            return scene && props.resolveTexture ? props.resolveTexture(url, scene) : undefined;
+            return scene && resolveTexture ? resolveTexture(url, scene) : undefined;
         },
-        [props.resolveTexture]
+        [resolveTexture]
     );
     const resolveGeometryForEditor = useCallback(
         (file: File) => {
             const scene = stateRef.current?.scene;
-            if (!scene || !props.resolveGeometry) {
+            if (!scene || !resolveGeometry) {
                 return Promise.reject(new Error('Geometry loader is not available.'));
             }
-            return props.resolveGeometry(file, scene);
+            return resolveGeometry(file, scene);
         },
-        [props.resolveGeometry]
+        [resolveGeometry]
     );
 
     return (

package/src/react/EffectTreeView.tsx

@@ -1,9 +1,9 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {ChevronDownIcon, ChevronRightIcon, FolderIcon, SparklesIcon} from '@heroicons/react/24/solid';
 import React, {useState} from 'react';
-import {buildEffectTree, type EffectTreeNode} from '../core/effectTree';
-import {iconStyle} from './icons';
-import {theme} from './theme';
+import {buildEffectTree, type EffectTreeNode} from '../core/effectTree.js';
+import {iconStyle} from './icons.js';
+import {theme} from './theme.js';
 
 export interface EffectTreeViewProps {
     root: TransformNode;

package/src/react/GradientEditor.tsx

@@ -1,7 +1,7 @@
 import {useRef, useState} from 'react';
-import {GradientStop, hexToRgb, rgbToHex, stopsToCssGradient} from '../core/colors';
-import {NumberField, Row} from './fields';
-import {buttonStyle, theme} from './theme';
+import {GradientStop, hexToRgb, rgbToHex, stopsToCssGradient} from '../core/colors.js';
+import {NumberField, Row} from './fields.js';
+import {buttonStyle, theme} from './theme.js';
 
 const BAR_WIDTH = 218;
 

package/src/react/InspectorInfoIcon.tsx

@@ -1,8 +1,8 @@
 import {InformationCircleIcon} from '@heroicons/react/24/solid';
 import React from 'react';
-import {iconStyle} from './icons';
-import {theme} from './theme';
-import {Tooltip} from './Tooltip';
+import {iconStyle} from './icons.js';
+import {theme} from './theme.js';
+import {Tooltip} from './Tooltip.js';
 
 /** Small info icon with a themed inspector tooltip. */
 export function InspectorInfoIcon(props: {

package/src/react/InspectorLabel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {getInspectorHint} from './inspectorHints';
-import {InspectorInfoIcon} from './InspectorInfoIcon';
-import {labelStyle} from './theme';
+import {getInspectorHint} from './inspectorHints.js';
+import {InspectorInfoIcon} from './InspectorInfoIcon.js';
+import {labelStyle} from './theme.js';
 
 /** Inspector row label with an optional info icon tooltip. */
 export function InspectorLabel(props: {label: string; hint?: string; hintKey?: string}): React.ReactElement | null {

package/src/react/MessageDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {buttonStyle, theme} from './theme';
+import {buttonStyle, theme} from './theme.js';
 
 export interface MessageDialogProps {
     title: string;

package/src/react/ModuleSection.tsx

@@ -1,9 +1,9 @@
 import {ChevronDownIcon, ChevronRightIcon} from '@heroicons/react/24/solid';
 import React, {useState} from 'react';
-import {iconStyle} from './icons';
-import {getInspectorHint} from './inspectorHints';
-import {InspectorInfoIcon} from './InspectorInfoIcon';
-import {theme} from './theme';
+import {iconStyle} from './icons.js';
+import {getInspectorHint} from './inspectorHints.js';
+import {InspectorInfoIcon} from './InspectorInfoIcon.js';
+import {theme} from './theme.js';
 
 /** Unity-style module foldout with an optional enable checkbox. */
 export function ModuleSection(props: {

package/src/react/ObjectModule.tsx

@@ -1,9 +1,9 @@
-import {Quaternion} from '@babylonjs/core/Maths/math.vector';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import {Quaternion} from '@babylonjs/core/Maths/math.vector.js';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {useSyncExternalStore} from 'react';
-import {getTransformRevision, notifyTransformChanged, subscribeTransform} from '../core/transformStore';
-import {ModuleSection} from './ModuleSection';
-import {NumberField, Row} from './fields';
+import {getTransformRevision, notifyTransformChanged, subscribeTransform} from '../core/transformStore.js';
+import {ModuleSection} from './ModuleSection.js';
+import {NumberField, Row} from './fields.js';
 
 const RAD_TO_DEG = 180 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180;

package/src/react/ProjectsPage.tsx

@@ -1,11 +1,11 @@
 import {ArrowLeftIcon, FolderIcon, PlusIcon} from '@heroicons/react/24/solid';
 import React, {useCallback, useEffect, useState} from 'react';
-import {formatBytes, type ProjectMeta, type ProjectStore, type StorageEstimate} from '../core/projectStore';
-import {ChoiceDialog} from './ChoiceDialog';
-import {ContextMenu, type ContextMenuItem} from './ContextMenu';
-import {iconStyle} from './icons';
-import {PromptDialog} from './PromptDialog';
-import {buttonStyle, globalEditorStyles, theme} from './theme';
+import {formatBytes, type ProjectMeta, type ProjectStore, type StorageEstimate} from '../core/projectStore.js';
+import {ChoiceDialog} from './ChoiceDialog.js';
+import {ContextMenu, type ContextMenuItem} from './ContextMenu.js';
+import {iconStyle} from './icons.js';
+import {PromptDialog} from './PromptDialog.js';
+import {buttonStyle, globalEditorStyles, theme} from './theme.js';
 
 export interface ProjectsPageProps {
     store: ProjectStore;

package/src/react/PromptDialog.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {buttonStyle, inputStyle, theme} from './theme';
+import {buttonStyle, inputStyle, theme} from './theme.js';
 
 export interface PromptDialogProps {
     title: string;

package/src/react/ScenePanel.tsx

@@ -1,4 +1,4 @@
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
+import type {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import {
     ChevronDownIcon,
     ChevronRightIcon,
@@ -9,12 +9,12 @@ import {
     ViewfinderCircleIcon,
 } from '@heroicons/react/24/solid';
 import React, {useEffect, useState} from 'react';
-import {buildEffectTree} from '../core/effectTree';
-import type {SceneEntry} from '../core/sceneEntries';
-import {ContextMenu, type ContextMenuItem} from './ContextMenu';
-import {EffectTreeView} from './EffectTreeView';
-import {iconStyle} from './icons';
-import {buttonStyle, theme} from './theme';
+import {buildEffectTree} from '../core/effectTree.js';
+import type {SceneEntry} from '../core/sceneEntries.js';
+import {ContextMenu, type ContextMenuItem} from './ContextMenu.js';
+import {EffectTreeView} from './EffectTreeView.js';
+import {iconStyle} from './icons.js';
+import {buttonStyle, theme} from './theme.js';
 
 const ROW_HEIGHT = 34;
 

package/src/react/SubEmittersModule.tsx

@@ -1,11 +1,11 @@
 import type {ParticleEmitter, ParticleSystem} from 'babylon.quarks';
 import {EmitSubParticleSystem, SubParticleEmitMode} from 'babylon.quarks';
-import {EffectBinding} from '../core/binding';
-import {findBehavior} from '../core/colors';
-import {createChildSystem} from '../core/systems';
-import {ModuleSection} from './ModuleSection';
-import {CheckboxField, NumberField, Row, SelectField} from './fields';
-import {theme} from './theme';
+import {EffectBinding} from '../core/binding.js';
+import {findBehavior} from '../core/colors.js';
+import {createChildSystem} from '../core/systems.js';
+import {ModuleSection} from './ModuleSection.js';
+import {CheckboxField, NumberField, Row, SelectField} from './fields.js';
+import {theme} from './theme.js';
 
 /**
  * Sub Emitters module for the currently selected system. The spawned target lives as a

package/src/react/TextureSelect.tsx

@@ -0,0 +1,118 @@
+import type {BaseTexture} from '@babylonjs/core/Materials/Textures/baseTexture.js';
+import {useState} from 'react';
+import {SelectField} from './fields.js';
+import type {TextureOption} from './modules.js';
+import {PromptDialog} from './PromptDialog.js';
+
+/** A texture-like object the host's `resolveTexture` returned; only its `url` is read here. */
+type TextureLike = {url?: string} | null | undefined;
+
+/** The url a texture-like object was loaded from, or '' for none. */
+export function textureUrlOf(texture: unknown): string {
+    return (texture as TextureLike)?.url ?? '';
+}
+
+/**
+ * Picks a texture for one slot: a host preset, a custom URL, a file from disk, or none. The
+ * current texture stays selectable when it is not among the presets. Used by the Renderer
+ * module for the map and for the ramp, mask and noise of the texture effects.
+ */
+export function TextureSelect(props: {
+    /** The slot's current texture (anything with a `url`), or null for none. */
+    value: unknown;
+    textureOptions?: TextureOption[];
+    /** Turns a URL or `data:` URI into the host's texture object; null when it cannot. */
+    loadTexture: (url: string) => unknown;
+    /** The host's texture object, assumed to be a Babylon texture, or null for none. */
+    onChange: (texture: BaseTexture | null) => void;
+    /** Label of the "none" entry. Default "(none)". */
+    noneLabel?: string;
+    /** Shows a thumbnail of the current texture under the select. Default false. */
+    preview?: boolean;
+    /** Title of the custom URL prompt. Default "Texture URL". */
+    promptTitle?: string;
+}) {
+    const currentUrl = textureUrlOf(props.value);
+    const options = props.textureOptions ?? [];
+    const isPreset = options.some((o) => o.url === currentUrl);
+    const [prompting, setPrompting] = useState(false);
+    const apply = (url: string) => {
+        const texture = props.loadTexture(url);
+        if (texture) {
+            props.onChange(texture as BaseTexture);
+        }
+    };
+    return (
+        <>
+            <SelectField
+                value={!currentUrl ? '__none' : isPreset ? currentUrl : '__current'}
+                options={[
+                    {value: '__none', label: props.noneLabel ?? '(none)'},
+                    ...(currentUrl && !isPreset
+                        ? [{value: '__current', label: `(current) ${currentUrl.slice(-24)}`}]
+                        : []),
+                    ...options.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') {
+                        props.onChange(null);
+                        return;
+                    }
+                    if (url === '__url') {
+                        setPrompting(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 = () => apply(reader.result as string);
+                            reader.readAsDataURL(file);
+                        };
+                        input.click();
+                        return;
+                    }
+                    apply(url);
+                }}
+            />
+            {prompting && (
+                <PromptDialog
+                    title={props.promptTitle ?? 'Texture URL'}
+                    defaultValue={currentUrl}
+                    placeholder="https://…"
+                    onSubmit={(url) => {
+                        apply(url);
+                        setPrompting(false);
+                    }}
+                    onCancel={() => setPrompting(false)}
+                />
+            )}
+            {props.preview && currentUrl && (
+                <img
+                    src={currentUrl}
+                    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',
+                    }}
+                />
+            )}
+        </>
+    );
+}

package/src/react/TextureUVField.tsx

@@ -0,0 +1,62 @@
+import type {TextureUV, UVChannel} from 'babylon.quarks';
+import {NumberField, Row, SelectField} from './fields.js';
+
+/** A `[u, v]` pair of number inputs. */
+function PairField(props: {value: [number, number]; step: number; onChange: (next: [number, number]) => void}) {
+    return (
+        <div style={{display: 'flex', gap: 6}}>
+            {[0, 1].map((i) => (
+                <NumberField
+                    key={i}
+                    value={props.value[i]}
+                    step={props.step}
+                    onChange={(v) => {
+                        const next: [number, number] = [props.value[0], props.value[1]];
+                        next[i] = v;
+                        props.onChange(next);
+                    }}
+                />
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Rows for how a texture is laid over the particle (`TextureUV`): its UV channel, then
+ * tiling and offset as Unity's material Tiling / Offset, then a scroll as Unreal's Panner.
+ * One field for the map, the erosion mask and the distortion noise alike.
+ */
+export function TextureUVField(props: {
+    /** The complete layout as the system holds it. */
+    value: TextureUV;
+    /** Called with the whole layout, one field changed. */
+    onChange: (next: TextureUV) => void;
+    /** Prefix of each row's label, so several layouts in one module stay apart. Default none. */
+    labelPrefix?: string;
+}) {
+    const prefix = props.labelPrefix ?? '';
+    const patch = (fields: Partial<TextureUV>) => props.onChange({...props.value, ...fields});
+    return (
+        <>
+            <Row label={`${prefix}UV channel`} hintKey="UV channel">
+                <SelectField<UVChannel>
+                    value={props.value.channel}
+                    options={[
+                        {value: 0, label: 'UV0 (sprite / mesh UV)'},
+                        {value: 1, label: 'UV1 (mesh second set, along a trail)'},
+                    ]}
+                    onChange={(channel) => patch({channel})}
+                />
+            </Row>
+            <Row label={`${prefix}Tiling`} hintKey="Tiling">
+                <PairField value={props.value.tiling} step={0.5} onChange={(tiling) => patch({tiling})} />
+            </Row>
+            <Row label={`${prefix}Offset`} hintKey="Offset">
+                <PairField value={props.value.offset} step={0.05} onChange={(offset) => patch({offset})} />
+            </Row>
+            <Row label={`${prefix}Scroll`} hintKey="Scroll">
+                <PairField value={props.value.scroll} step={0.05} onChange={(scroll) => patch({scroll})} />
+            </Row>
+        </>
+    );
+}