babylon.quarks-editor 0.19.0 → 0.20.0

package/src/core/galleryPlayback.ts

@@ -1,13 +1,13 @@
 import {QuarksUtil} from 'babylon.quarks';
-import type {GalleryEntry} from './loadEffectGallery';
+import type {SceneEntry} from './sceneEntries';
 
-function isPreviewEntry(entry: GalleryEntry, previewRootIds: ReadonlySet<number>): boolean {
-    return entry.inScene && previewRootIds.has(entry.root.uniqueId);
+function isPreviewEntry(entry: SceneEntry, previewRootIds: ReadonlySet<number>): boolean {
+    return previewRootIds.has(entry.root.uniqueId);
 }
 
-/** Freezes every gallery entry; unpauses all in-scene entries in the preview set when transport is playing. */
+/** Freezes every scene entry; unpauses the visible ones (the preview set) when transport is playing. */
 export function applyGalleryPlayback(
-    entries: GalleryEntry[],
+    entries: SceneEntry[],
     previewRootIds: ReadonlySet<number>,
     transportPlaying: boolean,
     focusFinishedRootIds: ReadonlySet<number> = new Set()
@@ -36,17 +36,17 @@ export function applyGalleryPlayback(
 }
 
 /** Whether any preview effect on stage should keep simulating. */
-export function hasActivePreview(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): boolean {
+export function hasActivePreview(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): boolean {
     return entries.some((entry) => isPreviewEntry(entry, previewRootIds));
 }
 
 /** In-scene preview effects currently in the preview set. */
-export function countActivePreviews(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number {
+export function countActivePreviews(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): number {
     return entries.filter((entry) => isPreviewEntry(entry, previewRootIds)).length;
 }
 
 /** Particle count across all active preview effects. */
-export function countGalleryParticles(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number {
+export function countGalleryParticles(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): number {
     let count = 0;
     for (const entry of entries) {
         if (!isPreviewEntry(entry, previewRootIds)) {
@@ -64,7 +64,7 @@ export function countGalleryParticles(entries: GalleryEntry[], previewRootIds: R
  * Returns true when any entry was paused (caller should refresh renderer batches).
  */
 export function pauseFinishedPreviews(
-    entries: GalleryEntry[],
+    entries: SceneEntry[],
     previewRootIds: ReadonlySet<number>,
     focusFinishedRootIds: ReadonlySet<number> = new Set()
 ): boolean {

package/src/core/galleryScene.ts

@@ -1,12 +1,11 @@
 import {Vector3} from '@babylonjs/core/Maths/math.vector';
-import type {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Scene} from '@babylonjs/core/scene';
 import type {BatchedRenderer} from 'babylon.quarks';
 import {DEFAULT_GALLERY_SPACING, galleryGridPosition} from './galleryLayout';
-import type {GalleryEntry} from './loadEffectGallery';
+import type {SceneEntry} from './sceneEntries';
 
-/** Clears live particles and freezes simulation for one placed catalog entry. */
-export function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: BatchedRenderer): void {
+/** Clears live particles and freezes simulation for one scene entry. */
+export function clearSceneEntrySimulation(entry: SceneEntry, renderer: BatchedRenderer): void {
     for (const system of entry.systems) {
         system.restart();
         system.pause();
@@ -14,59 +13,25 @@ export function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: Batch
     renderer.refreshBatches();
 }
 
-/** Parents a catalog entry into the live scene and registers its systems with the renderer. */
-export function placeGalleryEntryInScene(entry: GalleryEntry, renderer: BatchedRenderer, worldPosition: Vector3): void {
-    entry.root.setEnabled(true);
-    entry.root.parent = null;
-    entry.root.position.copyFrom(worldPosition);
-
-    if (!entry.inScene) {
-        for (const system of entry.systems) {
-            renderer.addSystem(system);
-            system.pause();
-        }
-        entry.inScene = true;
+/**
+ * Shows or hides a scene entry. A hidden entry keeps its place in the scene and stays editable,
+ * but has no particles, is not simulated and can't be picked in the viewport.
+ */
+export function setSceneEntryVisible(entry: SceneEntry, renderer: BatchedRenderer, visible: boolean): void {
+    if (!visible) {
+        clearSceneEntrySimulation(entry, renderer);
     }
+    entry.root.setEnabled(visible);
 }
 
-/** Spawns a batch of catalog effects in a square grid centered on `center`. */
-export function placeGalleryEntriesAt(
-    entries: GalleryEntry[],
-    renderer: BatchedRenderer,
-    center: Vector3,
-    spacing = DEFAULT_GALLERY_SPACING
-): void {
+/** Lays out a batch of new entries in a square grid centered on `center`. */
+export function placeSceneEntriesAt(entries: SceneEntry[], center: Vector3, spacing = DEFAULT_GALLERY_SPACING): void {
     entries.forEach((entry, index) => {
-        const offset = galleryGridPosition(index, entries.length, spacing);
-        const position = center.add(new Vector3(offset.x, 0, offset.z));
-        placeGalleryEntryInScene(entry, renderer, position);
+        const offset = entries.length === 1 ? {x: 0, z: 0} : galleryGridPosition(index, entries.length, spacing);
+        entry.root.position.copyFrom(center.add(new Vector3(offset.x, 0, offset.z)));
     });
 }
 
-/**
- * Unregisters a placed effect from the renderer and returns it to the hidden catalog.
- * Systems stay alive for inspector editing; drag into the viewport to place again.
- */
-export function removeGalleryEntryFromScene(
-    entry: GalleryEntry,
-    renderer: BatchedRenderer,
-    catalogRoot: TransformNode
-): void {
-    if (!entry.inScene) {
-        return;
-    }
-
-    clearGalleryEntrySimulation(entry, renderer);
-
-    for (const system of entry.systems) {
-        renderer.deleteSystem(system);
-    }
-
-    entry.root.parent = catalogRoot;
-    entry.root.setEnabled(false);
-    entry.inScene = false;
-}
-
 /** Raycasts the editor ground plane from canvas/client coordinates. */
 export function pickGroundPosition(scene: Scene, clientX: number, clientY: number): Vector3 {
     const canvas = scene.getEngine().getRenderingCanvas();
@@ -77,12 +42,3 @@ export function pickGroundPosition(scene: Scene, clientX: number, clientY: numbe
     const pick = scene.pick(clientX - rect.left, clientY - rect.top, (mesh) => mesh.name === 'ground');
     return pick?.pickedPoint?.clone() ?? Vector3.Zero();
 }
-
-/** Finds a gallery entry by Babylon node id from a drag payload. */
-export function findGalleryEntryById(entries: GalleryEntry[], id: string): GalleryEntry | undefined {
-    const numericId = Number(id);
-    if (!Number.isFinite(numericId)) {
-        return undefined;
-    }
-    return entries.find((entry) => entry.root.uniqueId === numericId);
-}

package/src/core/gallerySelectionMarker.ts

@@ -4,6 +4,7 @@ import {LinesMesh} from '@babylonjs/core/Meshes/linesMesh';
 import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode';
 import type {Scene} from '@babylonjs/core/scene';
+import './lineShaders';
 
 export const GROUND_RING_RADIUS = 1.2;
 const RING_SEGMENTS = 64;

package/src/core/history.ts

@@ -3,6 +3,12 @@ import type {EffectBinding} from './binding';
 const COALESCE_MS = 400;
 const MAX_DEPTH = 50;
 
+/** Undo/redo stacks of one effect, kept by the host while another effect is focused. */
+export interface HistoryStacks {
+    undo: string[];
+    redo: string[];
+}
+
 /**
  * Snapshot-based undo/redo over serialized effect JSON. Owned by the host (not the
  * binding) so history survives rebinding when a restore rebuilds the systems.
@@ -36,16 +42,31 @@ export class EffectHistory {
         this.lastCaptureTime = 0;
     }
 
-    /** Pushes an undo snapshot; rapid consecutive edits are coalesced into one step. */
+    /** The current stacks, to hand back to `restoreStacks` when this effect is focused again. */
+    saveStacks(): HistoryStacks {
+        return {undo: this.undoStack, redo: this.redoStack};
+    }
+
+    restoreStacks(stacks: HistoryStacks | undefined): void {
+        this.undoStack = stacks?.undo ?? [];
+        this.redoStack = stacks?.redo ?? [];
+        this.lastCaptureTime = 0;
+    }
+
+    /**
+     * Pushes an undo snapshot. A burst of edits — typing a number, dragging a curve handle or a
+     * slider — is one step: each edit within COALESCE_MS of the previous one extends the burst.
+     */
     capture(): void {
         if (!this.binding) {
             return;
         }
         const now = Date.now();
-        if (now - this.lastCaptureTime < COALESCE_MS && this.undoStack.length > 0) {
+        const continuesBurst = now - this.lastCaptureTime < COALESCE_MS && this.undoStack.length > 0;
+        this.lastCaptureTime = now;
+        if (continuesBurst) {
             return;
         }
-        this.lastCaptureTime = now;
         this.undoStack.push(this.binding.exportJSON());
         if (this.undoStack.length > MAX_DEPTH) {
             this.undoStack.shift();

package/src/core/indexedDbProjectStore.ts

@@ -0,0 +1,357 @@
+import type {
+    ProjectMeta,
+    ProjectStore,
+    StorageEstimate,
+    StoredAsset,
+    StoredScene,
+    StoredSceneEntry,
+} from './projectStore';
+
+const DB_NAME = 'babylon-quarks-editor';
+const DB_VERSION = 1;
+const FILE_REF = 'quarks-file:';
+const FILE_REF_PATTERN = /quarks-file:([0-9a-z]+)/g;
+
+interface AssetRecord extends StoredAsset {
+    projectId: string;
+}
+interface FileRecord {
+    projectId: string;
+    hash: string;
+    blob: Blob;
+}
+interface SceneRecord extends StoredScene {
+    projectId: string;
+}
+
+function request<T>(req: IDBRequest<T>): Promise<T> {
+    return new Promise((resolve, reject) => {
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+
+function done(tx: IDBTransaction): Promise<void> {
+    return new Promise((resolve, reject) => {
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+        tx.onabort = () => reject(tx.error ?? new Error('IndexedDB transaction aborted'));
+    });
+}
+
+function newId(): string {
+    return typeof crypto !== 'undefined' && 'randomUUID' in crypto
+        ? crypto.randomUUID()
+        : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+/** Content hash of a data URI, so the same texture is stored once per project. */
+async function hashString(text: string): Promise<string> {
+    if (typeof crypto !== 'undefined' && crypto.subtle) {
+        const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
+        return Array.from(new Uint8Array(digest).slice(0, 16), (b) => b.toString(16).padStart(2, '0')).join('');
+    }
+    // Insecure contexts have no crypto.subtle: a 53-bit string hash (cyrb53) twice, salted.
+    const cyrb53 = (seed: number) => {
+        let h1 = 0xdeadbeef ^ seed;
+        let h2 = 0x41c6ce57 ^ seed;
+        for (let i = 0; i < text.length; i++) {
+            const ch = text.charCodeAt(i);
+            h1 = Math.imul(h1 ^ ch, 2654435761);
+            h2 = Math.imul(h2 ^ ch, 1597334677);
+        }
+        h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+        h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+        return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(16);
+    };
+    return `${cyrb53(1)}${cyrb53(2)}`;
+}
+
+function blobToDataUrl(blob: Blob): 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(blob);
+    });
+}
+
+function imagesOf(json: unknown): Array<{url?: unknown}> {
+    const images = (json as {images?: unknown} | null)?.images;
+    return Array.isArray(images) ? images : [];
+}
+
+/**
+ * Projects in the browser's IndexedDB. Texture data URIs are pulled out of the effect JSON into
+ * a per-project file store keyed by content hash — 50 effects sharing a texture store it once —
+ * and put back as data URIs on load, so the editor only ever sees self-contained effects.
+ */
+export class IndexedDbProjectStore implements ProjectStore {
+    private dbPromise: Promise<IDBDatabase> | null = null;
+    /** data URI → hash, so re-saving unchanged textures skips hashing. */
+    private readonly hashByDataUrl = new Map<string, string>();
+    /** `${projectId}/${hash}` → data URI, so every effect sharing a file gets the same string. */
+    private readonly dataUrlByFile = new Map<string, Promise<string | null>>();
+
+    private db(): Promise<IDBDatabase> {
+        if (!this.dbPromise) {
+            this.dbPromise = new Promise((resolve, reject) => {
+                const open = indexedDB.open(DB_NAME, DB_VERSION);
+                open.onupgradeneeded = () => {
+                    const db = open.result;
+                    db.createObjectStore('projects', {keyPath: 'id'});
+                    db.createObjectStore('assets', {keyPath: ['projectId', 'path']}).createIndex(
+                        'projectId',
+                        'projectId'
+                    );
+                    db.createObjectStore('files', {keyPath: ['projectId', 'hash']}).createIndex(
+                        'projectId',
+                        'projectId'
+                    );
+                    db.createObjectStore('scenes', {keyPath: 'projectId'});
+                };
+                open.onsuccess = () => resolve(open.result);
+                open.onerror = () => reject(open.error);
+            });
+        }
+        return this.dbPromise;
+    }
+
+    // ---- projects -------------------------------------------------------------------------
+
+    async listProjects(): Promise<ProjectMeta[]> {
+        const db = await this.db();
+        const all = await request<ProjectMeta[]>(db.transaction('projects').objectStore('projects').getAll());
+        return all.sort((a, b) => b.updatedAt - a.updatedAt);
+    }
+
+    async getProject(id: string): Promise<ProjectMeta | null> {
+        const db = await this.db();
+        return (
+            (await request<ProjectMeta | undefined>(db.transaction('projects').objectStore('projects').get(id))) ?? null
+        );
+    }
+
+    async createProject(name: string): Promise<ProjectMeta> {
+        const now = Date.now();
+        const meta: ProjectMeta = {id: newId(), name, createdAt: now, updatedAt: now, assetCount: 0, sizeBytes: 0};
+        const db = await this.db();
+        const tx = db.transaction('projects', 'readwrite');
+        tx.objectStore('projects').put(meta);
+        await done(tx);
+        return meta;
+    }
+
+    async renameProject(id: string, name: string): Promise<void> {
+        const meta = await this.getProject(id);
+        if (!meta) return;
+        const db = await this.db();
+        const tx = db.transaction('projects', 'readwrite');
+        tx.objectStore('projects').put({...meta, name, updatedAt: Date.now()});
+        await done(tx);
+    }
+
+    async duplicateProject(id: string, name: string): Promise<ProjectMeta> {
+        const source = await this.getProject(id);
+        if (!source) throw new Error('Project not found.');
+        const db = await this.db();
+        const read = db.transaction(['assets', 'files', 'scenes']);
+        const [assets, files, scene] = await Promise.all([
+            request<AssetRecord[]>(read.objectStore('assets').index('projectId').getAll(id)),
+            request<FileRecord[]>(read.objectStore('files').index('projectId').getAll(id)),
+            request<SceneRecord | undefined>(read.objectStore('scenes').get(id)),
+        ]);
+        const now = Date.now();
+        const meta: ProjectMeta = {...source, id: newId(), name, createdAt: now, updatedAt: now};
+        const tx = db.transaction(['projects', 'assets', 'files', 'scenes'], 'readwrite');
+        tx.objectStore('projects').put(meta);
+        for (const asset of assets) tx.objectStore('assets').put({...asset, projectId: meta.id});
+        for (const file of files) tx.objectStore('files').put({...file, projectId: meta.id});
+        if (scene) tx.objectStore('scenes').put({...scene, projectId: meta.id});
+        await done(tx);
+        return meta;
+    }
+
+    async deleteProject(id: string): Promise<void> {
+        const db = await this.db();
+        const tx = db.transaction(['projects', 'assets', 'files', 'scenes'], 'readwrite');
+        tx.objectStore('projects').delete(id);
+        tx.objectStore('scenes').delete(id);
+        for (const name of ['assets', 'files'] as const) {
+            const keys = await request(tx.objectStore(name).index('projectId').getAllKeys(id));
+            for (const key of keys) tx.objectStore(name).delete(key);
+        }
+        await done(tx);
+        for (const key of [...this.dataUrlByFile.keys()]) {
+            if (key.startsWith(`${id}/`)) this.dataUrlByFile.delete(key);
+        }
+    }
+
+    // ---- assets ---------------------------------------------------------------------------
+
+    async loadAssets(projectId: string): Promise<StoredAsset[]> {
+        const db = await this.db();
+        const records = await request<AssetRecord[]>(
+            db.transaction('assets').objectStore('assets').index('projectId').getAll(projectId)
+        );
+        return Promise.all(
+            records.map(async ({path, name, json, missingFiles}) => ({
+                path,
+                name,
+                json: await this.unpack(projectId, json),
+                missingFiles,
+            }))
+        );
+    }
+
+    async putAssets(projectId: string, assets: StoredAsset[]): Promise<void> {
+        const files = new Map<string, Blob>();
+        const packed = await Promise.all(
+            assets.map(async (asset) => ({...asset, projectId, json: await this.pack(asset.json, files)}))
+        );
+        const db = await this.db();
+        const tx = db.transaction(['assets', 'files'], 'readwrite');
+        for (const record of packed) tx.objectStore('assets').put(record);
+        this.writeFiles(tx, projectId, files);
+        await done(tx);
+        await this.refresh(projectId);
+    }
+
+    async deleteAssets(projectId: string, paths: string[]): Promise<void> {
+        const db = await this.db();
+        const tx = db.transaction('assets', 'readwrite');
+        for (const path of paths) tx.objectStore('assets').delete([projectId, path]);
+        await done(tx);
+        await this.refresh(projectId);
+    }
+
+    // ---- scene ----------------------------------------------------------------------------
+
+    async loadScene(projectId: string): Promise<StoredScene | null> {
+        const db = await this.db();
+        const record = await request<SceneRecord | undefined>(
+            db.transaction('scenes').objectStore('scenes').get(projectId)
+        );
+        if (!record) return null;
+        const entries = await Promise.all(
+            record.entries.map(async (entry) => ({...entry, json: await this.unpack(projectId, entry.json)}))
+        );
+        return {entries, savedAt: record.savedAt};
+    }
+
+    async saveScene(projectId: string, scene: StoredScene): Promise<void> {
+        const files = new Map<string, Blob>();
+        const entries: StoredSceneEntry[] = await Promise.all(
+            scene.entries.map(async (entry) => ({...entry, json: await this.pack(entry.json, files)}))
+        );
+        const db = await this.db();
+        const tx = db.transaction(['scenes', 'files'], 'readwrite');
+        tx.objectStore('scenes').put({projectId, entries, savedAt: scene.savedAt});
+        this.writeFiles(tx, projectId, files);
+        await done(tx);
+        await this.refresh(projectId);
+    }
+
+    // ---- storage ----------------------------------------------------------------------------
+
+    async estimate(): Promise<StorageEstimate> {
+        const storage = typeof navigator !== 'undefined' ? navigator.storage : undefined;
+        const estimate = storage?.estimate ? await storage.estimate() : undefined;
+        const persisted = storage?.persisted ? await storage.persisted() : false;
+        return {usage: estimate?.usage ?? null, quota: estimate?.quota ?? null, persisted};
+    }
+
+    async requestPersistence(): Promise<boolean> {
+        const storage = typeof navigator !== 'undefined' ? navigator.storage : undefined;
+        return storage?.persist ? storage.persist() : false;
+    }
+
+    // ---- files ------------------------------------------------------------------------------
+
+    /** Clones `json` with each texture data URI replaced by a `quarks-file:<hash>` reference. */
+    private async pack(json: unknown, files: Map<string, Blob>): Promise<unknown> {
+        const clone = structuredClone(json);
+        for (const image of imagesOf(clone)) {
+            const url = image.url;
+            if (typeof url !== 'string' || !url.startsWith('data:')) continue;
+            let hash = this.hashByDataUrl.get(url);
+            if (!hash) {
+                hash = await hashString(url);
+                this.hashByDataUrl.set(url, hash);
+            }
+            if (!files.has(hash)) {
+                files.set(hash, await (await fetch(url)).blob());
+            }
+            image.url = FILE_REF + hash;
+        }
+        return clone;
+    }
+
+    /** Puts data URIs back in place of file references. */
+    private async unpack(projectId: string, json: unknown): Promise<unknown> {
+        for (const image of imagesOf(json)) {
+            const url = image.url;
+            if (typeof url !== 'string' || !url.startsWith(FILE_REF)) continue;
+            const dataUrl = await this.readFile(projectId, url.slice(FILE_REF.length));
+            image.url = dataUrl ?? '';
+        }
+        return json;
+    }
+
+    private readFile(projectId: string, hash: string): Promise<string | null> {
+        const key = `${projectId}/${hash}`;
+        let pending = this.dataUrlByFile.get(key);
+        if (!pending) {
+            pending = (async () => {
+                const db = await this.db();
+                const record = await request<FileRecord | undefined>(
+                    db.transaction('files').objectStore('files').get([projectId, hash])
+                );
+                if (!record) return null;
+                const dataUrl = await blobToDataUrl(record.blob);
+                this.hashByDataUrl.set(dataUrl, hash);
+                return dataUrl;
+            })();
+            this.dataUrlByFile.set(key, pending);
+        }
+        return pending;
+    }
+
+    private writeFiles(tx: IDBTransaction, projectId: string, files: Map<string, Blob>): void {
+        for (const [hash, blob] of files) {
+            tx.objectStore('files').put({projectId, hash, blob} satisfies FileRecord);
+        }
+    }
+
+    /** Drops files nothing references any more and updates the project's size/count. */
+    private async refresh(projectId: string): Promise<void> {
+        const db = await this.db();
+        const tx = db.transaction(['projects', 'assets', 'files', 'scenes'], 'readwrite');
+        const [meta, assets, files, scene] = await Promise.all([
+            request<ProjectMeta | undefined>(tx.objectStore('projects').get(projectId)),
+            request<AssetRecord[]>(tx.objectStore('assets').index('projectId').getAll(projectId)),
+            request<FileRecord[]>(tx.objectStore('files').index('projectId').getAll(projectId)),
+            request<SceneRecord | undefined>(tx.objectStore('scenes').get(projectId)),
+        ]);
+        const text = JSON.stringify([assets.map((asset) => asset.json), scene?.entries ?? []]);
+        const referenced = new Set([...text.matchAll(FILE_REF_PATTERN)].map((match) => match[1]));
+        let size = text.length;
+        for (const file of files) {
+            if (referenced.has(file.hash)) {
+                size += file.blob.size;
+            } else {
+                tx.objectStore('files').delete([projectId, file.hash]);
+                this.dataUrlByFile.delete(`${projectId}/${file.hash}`);
+            }
+        }
+        if (meta) {
+            tx.objectStore('projects').put({
+                ...meta,
+                assetCount: assets.length,
+                sizeBytes: size,
+                updatedAt: Date.now(),
+            });
+        }
+        await done(tx);
+    }
+}

package/src/core/lineShaders.ts

@@ -0,0 +1,7 @@
+// LinesMesh loads its "color" shader with a dynamic import. Under Vite's dev pre-bundling that
+// import can resolve to a second copy of Babylon's ShaderStore, so the shader registers where
+// Babylon never looks, it falls back to fetching `src/Shaders/color.fragment.fx`, gets the
+// page's HTML back and the selection rings never render. Registering the shader up front, from
+// the same module graph as the rest of the editor, makes the lookup succeed either way.
+import '@babylonjs/core/Shaders/color.fragment';
+import '@babylonjs/core/Shaders/color.vertex';

package/src/core/{pickGalleryFiles.ts → pickAssetFiles.ts}

@@ -1,4 +1,4 @@
-import {collectJsonFiles} from './loadEffectGallery';
+import {isAssetImportFile, relativePathOf} from './assets';
 
 interface DirectoryPickerWindow {
     showDirectoryPicker?: (options?: {mode?: 'read' | 'readwrite'}) => Promise<FileSystemDirectoryHandle>;
@@ -13,12 +13,15 @@ interface DirectoryHandleWithEntries {
     entries(): AsyncIterableIterator<[string, FileSystemDirectoryHandle | FileSystemFileHandle]>;
 }
 
-/** Recursively collects `.json` files from a directory handle (File System Access API). */
-async function readJsonFilesFromDirectory(dir: DirectoryHandleWithEntries, prefix = ''): Promise<File[]> {
+/**
+ * Recursively collects effect `.json` files and the image files they may reference from a
+ * directory handle (File System Access API).
+ */
+async function readAssetFilesFromDirectory(dir: DirectoryHandleWithEntries, prefix = ''): Promise<File[]> {
     const files: File[] = [];
     for await (const [name, entry] of dir.entries()) {
         if (entry.kind === 'file') {
-            if (!name.toLowerCase().endsWith('.json')) continue;
+            if (!isAssetImportFile(name)) continue;
             const file = await entry.getFile();
             Object.defineProperty(file, 'webkitRelativePath', {
                 value: prefix + name,
@@ -29,7 +32,7 @@ async function readJsonFilesFromDirectory(dir: DirectoryHandleWithEntries, prefi
         }
         if (entry.kind === 'directory') {
             files.push(
-                ...(await readJsonFilesFromDirectory(
+                ...(await readAssetFilesFromDirectory(
                     entry as unknown as DirectoryHandleWithEntries,
                     `${prefix}${name}/`
                 ))
@@ -41,9 +44,10 @@ async function readJsonFilesFromDirectory(dir: DirectoryHandleWithEntries, prefi
 
 /**
  * Opens a native folder picker when the host supports it. Returns `null` when the user
- * cancels, or when the API is unavailable (caller should fall back to `<input webkitdirectory>`).
+ * cancels, or `undefined` when the API is unavailable (caller should fall back to
+ * `<input webkitdirectory>`).
  */
-export async function pickGalleryJsonFiles(): Promise<File[] | null | undefined> {
+export async function pickAssetFolderFiles(): Promise<File[] | null | undefined> {
     const picker = (window as DirectoryPickerWindow).showDirectoryPicker;
     if (typeof picker !== 'function') {
         return undefined;
@@ -51,7 +55,8 @@ export async function pickGalleryJsonFiles(): Promise<File[] | null | undefined>
 
     try {
         const dir = (await picker.call(window, {mode: 'read'})) as DirectoryHandleWithEntries;
-        return collectJsonFiles(await readJsonFilesFromDirectory(dir));
+        const files = await readAssetFilesFromDirectory(dir);
+        return files.sort((a, b) => relativePathOf(a).localeCompare(relativePathOf(b)));
     } catch (err) {
         if (err instanceof DOMException && err.name === 'AbortError') {
             return null;