babylon.quarks-editor 0.19.0 → 0.20.0

package/dist/react/behaviorModules.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
-import { ensureGroundResolver } from '../core/collision';
-import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, readGradientStops } from '../core/colors';
+import { ApplyCollision, ApplyForce, ChangeEmitDirection, ColorBySpeed, ConstantValue, ForceOverLife, FrameOverLife, getPhysicsResolver, Gradient, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors';
 import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values';
 import { CurveEditor } from './CurveEditor';
 import { NumberField, Row, SelectField } from './fields';
@@ -71,10 +70,9 @@ export function EmitDirectionModule({ binding }) {
     return (_jsx(BehaviorModule, { binding: binding, title: "Randomize Direction", type: "ChangeEmitDirection", create: () => new ChangeEmitDirection(new IntervalValue(0, Math.PI / 6)), children: (behavior) => (_jsx(ValueField, { label: "Angle (rad)", generator: behavior.angle, min: 0, curveMax: Math.PI, onChange: (g) => binding.apply(() => (behavior.angle = g)) })) }));
 }
 export function CollisionModule({ binding }) {
-    // Ensure the shared ground-plane resolver exists before any ApplyCollision is created,
-    // otherwise its update() would dereference an undefined resolver.
-    const resolver = ensureGroundResolver();
-    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(ensureGroundResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx(Row, { label: "Floor Y", children: _jsx(NumberField, { value: resolver.y, step: 0.1, onChange: (v) => binding.apply(() => (resolver.y = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Collides against a ground plane. Bounce is saved with the effect; Floor Y is an editor preview aid (a host can register its own colliders)." })] })) }));
+    // Like Unity: Collision stores bounce only. Colliders are host-provided via
+    // setPhysicsResolver — the editor never invents a ground plane.
+    return (_jsx(BehaviorModule, { binding: binding, title: "Collision", type: "ApplyCollision", create: () => new ApplyCollision(getPhysicsResolver(), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Bounce", children: _jsx(NumberField, { value: behavior.bounce, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.bounce = v)) }) }), _jsx("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 4 }, children: "Bounce is saved with the effect. Colliders come from the host (setPhysicsResolver) \u2014 without one, Collision is inert." })] })) }));
 }
 /** Shared speed-range rows for the "by Speed" trio. */
 function SpeedRangeRows({ binding, behavior }) {

package/dist/react/index.d.ts

@@ -1,24 +1,38 @@
+export { AssetsPanel } from './AssetsPanel';
+export type { AssetsPanelProps } from './AssetsPanel';
 export { CollisionModule, ColorBySpeedModule, EmitDirectionModule, ForceOverLifeModule, GravityModule, LimitSpeedOverLifeModule, NoiseModule, OrbitOverLifeModule, RotationBySpeedModule, RotationOverLifeModule, SizeBySpeedModule, SpeedOverLifeModule, TextureSheetModule, TurbulenceModule, WidthOverTrailModule, } from './behaviorModules';
+export { ChoiceDialog } from './ChoiceDialog';
+export type { ChoiceDialogAction, ChoiceDialogProps } from './ChoiceDialog';
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuItem, ContextMenuProps } from './ContextMenu';
 export { CurveEditor } from './CurveEditor';
+export { EditorWorkspace, QuarksEditorWorkspace } from './EditorWorkspace';
+export type { EditorWorkspaceProps } from './EditorWorkspace';
 export { EffectEditor } from './EffectEditor';
 export type { EffectEditorProps } from './EffectEditor';
 export { EffectEditorHost, QuarksEffectEditor } from './EffectEditorHost';
 export type { EffectEditorHostHandle, EffectEditorHostProps } from './EffectEditorHost';
+export { EffectTreeView } from './EffectTreeView';
+export type { EffectTreeViewProps } from './EffectTreeView';
 export { CheckboxField, NumberField, Row, SelectField } from './fields';
-export { GalleryPanel } from './GalleryPanel';
-export type { GalleryPanelProps } from './GalleryPanel';
 export { GradientEditor } from './GradientEditor';
 export { MessageDialog } from './MessageDialog';
 export type { MessageDialogProps } from './MessageDialog';
 export { ColorOverLifeModule, EmissionModule, MainModule, RendererModule, ShapeModule, SizeOverLifeModule, } from './modules';
 export type { GeometryData, GeometryOption, TextureOption } from './modules';
 export { ModuleSection } from './ModuleSection';
+export { ProjectsPage } from './ProjectsPage';
+export type { ProjectsPageProps } from './ProjectsPage';
 export { PromptDialog } from './PromptDialog';
 export type { PromptDialogProps } from './PromptDialog';
+export { ScenePanel } from './ScenePanel';
+export type { ScenePanelProps } from './ScenePanel';
 export { SubEmittersModule } from './SubEmittersModule';
 export { buttonStyle, inputStyle, labelStyle, rowStyle, theme } from './theme';
 export { TimelinePanel } from './TimelinePanel';
 export type { PlaybackState, TimelinePanelProps } from './TimelinePanel';
 export { TimelineTrackRow } from './TimelineTrackRow';
 export type { TimelineTrackRowProps } from './TimelineTrackRow';
+export { TransportBar } from './TransportBar';
+export type { TransportBarProps } from './TransportBar';
 export { ValueField } from './ValueField';

package/dist/react/index.js

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

package/dist/react/inspectorHints.js

@@ -117,8 +117,7 @@ const INSPECTOR_HINTS = {
     '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.',
+    Bounce: 'Energy retained after a collision (0 = stick, 1 = full bounce). Colliders are host-provided.',
     '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).',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.19.0",
+    "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",

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};
+}

package/src/core/assets.ts

@@ -0,0 +1,262 @@
+import {QuarksLoader} from 'babylon.quarks';
+
+/**
+ * One effect file in the Assets panel. Holds the source JSON only — nothing is live in the
+ * Babylon scene until the asset is dropped into the viewport, and every drop instantiates a
+ * fresh, independent copy (see `instantiateSceneEntry`).
+ */
+export interface EffectAsset {
+    id: number;
+    name: string;
+    /** Relative path inside the imported folder (preserves subfolders). */
+    path: string;
+    /** Quarks JSON with every external file reference already inlined. */
+    json: unknown;
+    /** Texture/geometry files the effect references that were not among the imported files. */
+    missingFiles: string[];
+}
+
+export interface AssetLoadProgress {
+    done: number;
+    total: number;
+    loaded: number;
+    failed: number;
+}
+
+const YIELD_EVERY = 8;
+const IMAGE_FILE = /\.(png|jpe?g|webp|gif|bmp)$/i;
+
+let nextAssetId = 1;
+
+function yieldToBrowser(): Promise<void> {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+export function relativePathOf(file: File): string {
+    return ((file as File & {webkitRelativePath?: string}).webkitRelativePath || file.name).replace(/\\/g, '/');
+}
+
+/** Files an asset import reads: effect `.json` files plus the images/geometries they may reference. */
+export function isAssetImportFile(name: string): boolean {
+    return /\.json$/i.test(name) || IMAGE_FILE.test(name);
+}
+
+/** Collects `.json` files from a picker result, sorted by relative path. */
+export function collectJsonFiles(files: FileList | File[]): File[] {
+    return Array.from(files)
+        .filter((file) => file.name.toLowerCase().endsWith('.json'))
+        .sort((a, b) => relativePathOf(a).localeCompare(relativePathOf(b)));
+}
+
+/** Resolves `url` against the folder of `fromPath` (`a/b/fx.json` + `../t.png` → `a/t.png`). */
+export function resolveRelativePath(fromPath: string, url: string): string {
+    const segments = fromPath.split('/').slice(0, -1);
+    for (const part of url.split('/')) {
+        if (part === '..') {
+            segments.pop();
+        } else if (part !== '.' && part !== '') {
+            segments.push(part);
+        }
+    }
+    return segments.join('/');
+}
+
+function isExternalUrl(url: string): boolean {
+    return /^(data|blob):/i.test(url) || /^[a-z][a-z0-9+.-]*:\/\//i.test(url) || url.startsWith('/');
+}
+
+function readAsDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+
+/** True for a Quarks effect envelope with at least one particle emitter. */
+export function isEffectJson(json: unknown): boolean {
+    const object = (json as {object?: unknown} | null)?.object;
+    const walk = (node: unknown): boolean => {
+        if (!node || typeof node !== 'object') return false;
+        const typed = node as {type?: unknown; children?: unknown};
+        if (typed.type === 'ParticleEmitter') return true;
+        return Array.isArray(typed.children) && typed.children.some(walk);
+    };
+    return walk(object);
+}
+
+/**
+ * Looks files up by path relative to the import root, falling back to the bare file name — a
+ * multi-file "Import effect" pick has no folder structure, only names.
+ */
+class ImportedFileIndex {
+    private readonly byPath = new Map<string, File>();
+    private readonly byName = new Map<string, File>();
+    private readonly cache = new Map<File, Promise<unknown>>();
+
+    constructor(files: File[]) {
+        for (const file of files) {
+            this.byPath.set(relativePathOf(file).toLowerCase(), file);
+            if (!this.byName.has(file.name.toLowerCase())) {
+                this.byName.set(file.name.toLowerCase(), file);
+            }
+        }
+    }
+
+    find(fromPath: string, url: string): File | undefined {
+        const clean = decodeURIComponent(url.split(/[?#]/)[0]);
+        return (
+            this.byPath.get(resolveRelativePath(fromPath, clean).toLowerCase()) ??
+            this.byName.get((clean.split('/').pop() ?? clean).toLowerCase())
+        );
+    }
+
+    /** Reads each file once, however many effects reference it. */
+    read<T>(file: File, read: (file: File) => Promise<T>): Promise<T> {
+        let pending = this.cache.get(file);
+        if (!pending) {
+            pending = read(file);
+            this.cache.set(file, pending);
+        }
+        return pending as Promise<T>;
+    }
+}
+
+/**
+ * Inlines what an "assets as files" export put in separate files: image urls become data URIs
+ * and external geometries are read into the JSON, so the effect loads (and later exports) as a
+ * self-contained effect. Returns the references that could not be found among the files.
+ */
+async function inlineExternalFiles(json: any, effectPath: string, index: ImportedFileIndex): Promise<string[]> {
+    const missing: string[] = [];
+
+    for (const image of Array.isArray(json.images) ? json.images : []) {
+        const url = image?.url;
+        if (typeof url !== 'string' || isExternalUrl(url)) continue;
+        const file = index.find(effectPath, url);
+        if (file) {
+            image.url = await index.read(file, readAsDataUrl);
+        } else {
+            missing.push(url);
+        }
+    }
+
+    await QuarksLoader.resolveExternalGeometries(json, async (url) => {
+        const file = index.find(effectPath, url);
+        if (!file) {
+            missing.push(url);
+            throw new Error('not among the imported files');
+        }
+        return index.read(file, async (f) => JSON.parse(await f.text()));
+    });
+
+    return missing;
+}
+
+/**
+ * Reads every effect JSON among `files` into an asset. Files that are not effects (geometry
+ * files, unrelated JSON, images) are skipped silently; unreadable JSON is skipped with a warning.
+ */
+export async function loadEffectAssets(
+    files: FileList | File[],
+    onProgress: (progress: AssetLoadProgress) => void
+): Promise<EffectAsset[]> {
+    const all = Array.from(files).filter((file) => isAssetImportFile(file.name));
+    const jsonFiles = collectJsonFiles(all);
+    const index = new ImportedFileIndex(all);
+    const assets: EffectAsset[] = [];
+    let failed = 0;
+
+    onProgress({done: 0, total: jsonFiles.length, loaded: 0, failed: 0});
+
+    for (let i = 0; i < jsonFiles.length; i++) {
+        const file = jsonFiles[i];
+        const path = relativePathOf(file);
+        try {
+            const json = JSON.parse(await file.text());
+            if (isEffectJson(json)) {
+                const missingFiles = await inlineExternalFiles(json, path, index);
+                if (missingFiles.length > 0) {
+                    console.warn(`[Quarks editor] "${path}" references files that were not imported:`, missingFiles);
+                }
+                assets.push({id: nextAssetId++, name: file.name.replace(/\.json$/i, ''), path, json, missingFiles});
+            }
+        } catch (err) {
+            failed++;
+            console.warn(`[Quarks editor] Skipped "${path}":`, err);
+        }
+
+        onProgress({done: i + 1, total: jsonFiles.length, loaded: assets.length, failed});
+
+        if ((i + 1) % YIELD_EVERY === 0) {
+            await yieldToBrowser();
+        }
+    }
+
+    return assets;
+}
+
+/** Wraps an in-memory effect JSON (e.g. the host's `effectJson`) as an asset. */
+export function createEffectAsset(name: string, path: string, json: unknown): EffectAsset {
+    return {id: nextAssetId++, name, path, json, missingFiles: []};
+}
+
+/** Merges newly imported assets, skipping paths already in the list. */
+export function mergeAssets(
+    existing: EffectAsset[],
+    incoming: EffectAsset[]
+): {merged: EffectAsset[]; added: EffectAsset[]; skipped: number} {
+    const paths = new Set(existing.map((asset) => asset.path));
+    const added: EffectAsset[] = [];
+    for (const asset of incoming) {
+        if (paths.has(asset.path)) continue;
+        paths.add(asset.path);
+        added.push(asset);
+    }
+    return {merged: [...existing, ...added], added, skipped: incoming.length - added.length};
+}
+
+/** Removes one asset, or every asset under a folder path. */
+export function removeAssets(
+    assets: EffectAsset[],
+    target: {kind: 'asset'; id: number} | {kind: 'folder'; path: string}
+): EffectAsset[] {
+    if (target.kind === 'asset') {
+        return assets.filter((asset) => asset.id !== target.id);
+    }
+    const prefix = `${target.path}/`;
+    return assets.filter((asset) => !asset.path.startsWith(prefix));
+}
+
+const iconCache = new WeakMap<EffectAsset, string | null>();
+
+/**
+ * Url of the effect's main texture — the first emitter's material map — used as its icon in
+ * the Assets panel. Falls back to the first image; null when the effect has no texture.
+ */
+export function assetIconUrl(asset: EffectAsset): string | null {
+    const cached = iconCache.get(asset);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const json = asset.json as any;
+    const findMaterial = (node: any): string | undefined => {
+        if (!node || typeof node !== 'object') return undefined;
+        if (node.type === 'ParticleEmitter' && node.ps?.material) return node.ps.material;
+        for (const child of Array.isArray(node.children) ? node.children : []) {
+            const found = findMaterial(child);
+            if (found) return found;
+        }
+        return undefined;
+    };
+    const byUuid = (list: unknown, uuid: unknown) =>
+        (Array.isArray(list) ? list : []).find((item: any) => item?.uuid === uuid) as any;
+
+    const material = byUuid(json?.materials, findMaterial(json?.object));
+    const texture = byUuid(json?.textures, material?.map ?? material?.texture);
+    const image = byUuid(json?.images, texture?.image) ?? (Array.isArray(json?.images) ? json.images[0] : undefined);
+    const url = typeof image?.url === 'string' && image.url ? image.url : null;
+    iconCache.set(asset, url);
+    return url;
+}

package/src/core/binding.ts

@@ -77,6 +77,14 @@ export class EffectBinding {
         this.notify();
     }
 
+    /**
+     * Notifies subscribers of a change made outside `apply()` — e.g. a transform edited by the
+     * gizmo, or a sub-system edited through its own nested binding.
+     */
+    markChanged(): void {
+        this.notify();
+    }
+
     private notify(): void {
         this.revision++;
         for (const listener of this.listeners) {

package/src/core/collision.ts

@@ -1,9 +1,8 @@
 import {Vector3, getPhysicsResolver, setPhysicsResolver} from 'babylon.quarks';
 
 /**
- * A horizontal ground plane collider. quarks.core's ApplyCollision behavior delegates to a
- * host-provided `PhysicsResolver` (a global singleton) and ships no collider primitive of its
- * own, so the editor supplies this — the common "particles bounce off the floor" case.
+ * A horizontal ground plane collider for hosts/demos that opt in via ensureGroundResolver /
+ * setPhysicsResolver. The editor never registers this automatically.
  *
  * `resolve` returns true and fills the surface normal when the point is at or below the plane,
  * which is exactly what ApplyCollision.update reflects the velocity against.
@@ -21,8 +20,8 @@ export class GroundPlaneResolver {
 }
 
 /**
- * Registers (once) a shared ground-plane resolver so ApplyCollision behaviors — whether added
- * in the inspector or deserialized from imported JSON — have something to collide against.
+ * Opt-in helper for hosts/demos that want a simple floor collider.
+ * The editor does not call this — like Unity, collision needs an explicit host-provided resolver.
  * Idempotent: an already-registered resolver is left untouched and returned.
  */
 export function ensureGroundResolver(): GroundPlaneResolver {

package/src/core/defaultEffect.ts

@@ -11,9 +11,9 @@ import {
     Vector4,
 } from 'babylon.quarks';
 import {DEFAULT_GRADIENT_STOPS, buildGradient} from './colors';
-import type {GalleryEntry} from './loadEffectGallery';
+import {uniqueEntryName, type SceneEntry} from './sceneEntries';
 
-export interface CreateGalleryDefaultOptions {
+export interface CreateSceneDefaultOptions {
     resolveTexture?: (url: string, scene: Scene) => unknown;
     textureUrl?: string;
 }
@@ -44,31 +44,18 @@ export function createDefaultEffect(
     return system;
 }
 
-/** Adds a blank preset effect to the hidden gallery catalog (not in the renderer yet). */
-export function createGalleryDefaultEntry(
+/** Creates a preset effect as a new scene entry (systems not registered with the renderer yet). */
+export function createSceneDefaultEntry(
     scene: Scene,
-    catalogRoot: TransformNode,
-    existing: GalleryEntry[],
-    options: CreateGalleryDefaultOptions = {}
-): GalleryEntry {
-    const takenNames = new Set(existing.map((entry) => entry.name));
-    const takenPaths = new Set(existing.map((entry) => entry.path));
-
-    let name = existing.length === 0 ? 'Effect' : 'New Effect';
-    let suffix = 2;
-    while (takenNames.has(name) || takenPaths.has(`_created/${name}.json`)) {
-        name = `New Effect ${suffix}`;
-        suffix++;
-    }
-
-    const path = `_created/${name}.json`;
+    existing: SceneEntry[],
+    options: CreateSceneDefaultOptions = {}
+): SceneEntry {
+    const name = uniqueEntryName(existing.length === 0 ? 'Effect' : 'New Effect', existing);
     const system = createDefaultEffect(scene, options.resolveTexture, options.textureUrl);
     system.pause();
 
     const root = new TransformNode(name, scene);
     system.emitter.parent = root;
-    root.parent = catalogRoot;
-    root.setEnabled(false);
 
-    return {name, path, root, systems: [system], inScene: false};
+    return {name, path: `_created/${name}.json`, assetId: null, root, systems: [system]};
 }

package/src/core/emitterShapeWireframe.ts

@@ -7,6 +7,7 @@ import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Scene} from '@babylonjs/core/scene';
 import type {ParticleSystem} from 'babylon.quarks';
 import {EDITOR_SCENE_NODE_METADATA} from './editorScene';
+import './lineShaders';
 import {getShapeType, readShapeParams} from './shapes';
 
 const LINE_COLOR = new Color3(0.45, 0.82, 1);