babylon.quarks-editor 0.18.1 → 0.20.0

package/dist/react/modules.js

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

package/package.json

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

package/src/core/assetDragSession.ts

@@ -0,0 +1,12 @@
+import type {AssetDragPayload} from './assetTree';
+
+let activeDrag: AssetDragPayload | null = null;
+
+/** Stores the current asset drag payload for viewport preview (getData is drop-only in most browsers). */
+export function setAssetDragSession(payload: AssetDragPayload | null): void {
+    activeDrag = payload;
+}
+
+export function getAssetDragSession(): AssetDragPayload | null {
+    return activeDrag;
+}

package/src/core/assetTree.ts

@@ -0,0 +1,148 @@
+import type {EffectAsset} from './assets';
+
+export interface AssetTreeFolder {
+    kind: 'folder';
+    name: string;
+    path: string;
+    children: AssetTreeNode[];
+}
+
+export interface AssetTreeEffect {
+    kind: 'asset';
+    name: string;
+    path: string;
+    asset: EffectAsset;
+}
+
+export type AssetTreeNode = AssetTreeFolder | AssetTreeEffect;
+
+function compareNodes(a: AssetTreeNode, b: AssetTreeNode): number {
+    if (a.kind !== b.kind) {
+        return a.kind === 'folder' ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name, undefined, {sensitivity: 'base'});
+}
+
+/** Builds a folder tree from asset relative paths (e.g. `VFX/Fire/Explosion.json`). */
+export function buildAssetTree(assets: EffectAsset[]): AssetTreeNode[] {
+    const roots: AssetTreeNode[] = [];
+
+    for (const asset of assets) {
+        const segments = asset.path
+            .replace(/\.json$/i, '')
+            .split('/')
+            .filter(Boolean);
+        const fileName = segments.pop() ?? asset.name;
+        let level = roots;
+        let pathSoFar = '';
+
+        for (const segment of segments) {
+            pathSoFar = pathSoFar ? `${pathSoFar}/${segment}` : segment;
+            let folder = level.find((node): node is AssetTreeFolder => node.kind === 'folder' && node.name === segment);
+            if (!folder) {
+                folder = {kind: 'folder', name: segment, path: pathSoFar, children: []};
+                level.push(folder);
+            }
+            level = folder.children;
+        }
+
+        level.push({kind: 'asset', name: fileName, path: asset.path, asset});
+    }
+
+    const sortTree = (nodes: AssetTreeNode[]): void => {
+        nodes.sort(compareNodes);
+        for (const node of nodes) {
+            if (node.kind === 'folder') {
+                sortTree(node.children);
+            }
+        }
+    };
+
+    sortTree(roots);
+    return roots;
+}
+
+/** Children of the folder at `path` (`''` is the top level), or null when it no longer exists. */
+export function folderChildren(tree: AssetTreeNode[], path: string): AssetTreeNode[] | null {
+    let level = tree;
+    for (const segment of path.split('/').filter(Boolean)) {
+        const folder = level.find((node): node is AssetTreeFolder => node.kind === 'folder' && node.name === segment);
+        if (!folder) {
+            return null;
+        }
+        level = folder.children;
+    }
+    return level;
+}
+
+/** Assets whose name or path contains `query`, across every folder, sorted by name. */
+export function searchAssets(assets: EffectAsset[], query: string): EffectAsset[] {
+    const q = query.trim().toLowerCase();
+    return assets
+        .filter((asset) => `${asset.path} ${asset.name}`.toLowerCase().includes(q))
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, {sensitivity: 'base'}));
+}
+
+export const ASSET_DRAG_MIME = 'application/x-quarks-asset-drop';
+
+export type AssetDragPayload = {kind: 'asset'; id: number} | {kind: 'folder'; path: string};
+
+export function writeAssetDrag(dataTransfer: DataTransfer, payload: AssetDragPayload): void {
+    dataTransfer.setData(ASSET_DRAG_MIME, JSON.stringify(payload));
+    dataTransfer.effectAllowed = 'copy';
+}
+
+export function readAssetDrag(dataTransfer: DataTransfer): AssetDragPayload | null {
+    const raw = dataTransfer.getData(ASSET_DRAG_MIME);
+    if (!raw) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(raw) as AssetDragPayload;
+        if (parsed?.kind === 'asset' && typeof parsed.id === 'number') {
+            return parsed;
+        }
+        if (parsed?.kind === 'folder' && typeof parsed.path === 'string') {
+            return parsed;
+        }
+    } catch {
+        return null;
+    }
+    return null;
+}
+
+/** Returns every asset whose JSON path sits inside `folderPath` (recursive). */
+export function collectAssetsInFolder(assets: EffectAsset[], folderPath: string): EffectAsset[] {
+    const prefix = `${folderPath}/`;
+    return assets.filter((asset) => asset.path.startsWith(prefix));
+}
+
+/** Collects all assets under a folder tree node. */
+export function collectFolderAssets(node: AssetTreeFolder): EffectAsset[] {
+    const collected: EffectAsset[] = [];
+    const walk = (nodes: AssetTreeNode[]): void => {
+        for (const child of nodes) {
+            if (child.kind === 'asset') {
+                collected.push(child.asset);
+            } else {
+                walk(child.children);
+            }
+        }
+    };
+    walk(node.children);
+    return collected;
+}
+
+/** Resolves a drag payload to the assets that would be instantiated on drop. */
+export function describeAssetDrag(
+    assets: EffectAsset[],
+    payload: AssetDragPayload
+): {assets: EffectAsset[]; label: string} {
+    if (payload.kind === 'asset') {
+        const asset = assets.find((item) => item.id === payload.id);
+        return {assets: asset ? [asset] : [], label: asset?.name ?? 'Effect'};
+    }
+
+    const label = payload.path.split('/').filter(Boolean).pop() ?? payload.path;
+    return {assets: collectAssetsInFolder(assets, payload.path), label};
+}