babylon.quarks-editor 0.19.0 → 0.21.0

package/dist/core/galleryPlayback.d.ts

@@ -1,14 +1,14 @@
-import type { GalleryEntry } from './loadEffectGallery';
-/** Freezes every gallery entry; unpauses all in-scene entries in the preview set when transport is playing. */
-export declare function applyGalleryPlayback(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>, transportPlaying: boolean, focusFinishedRootIds?: ReadonlySet<number>): void;
+import type { SceneEntry } from './sceneEntries';
+/** Freezes every scene entry; unpauses the visible ones (the preview set) when transport is playing. */
+export declare function applyGalleryPlayback(entries: SceneEntry[], previewRootIds: ReadonlySet<number>, transportPlaying: boolean, focusFinishedRootIds?: ReadonlySet<number>): void;
 /** Whether any preview effect on stage should keep simulating. */
-export declare function hasActivePreview(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): boolean;
+export declare function hasActivePreview(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): boolean;
 /** In-scene preview effects currently in the preview set. */
-export declare function countActivePreviews(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number;
+export declare function countActivePreviews(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): number;
 /** Particle count across all active preview effects. */
-export declare function countGalleryParticles(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>): number;
+export declare function countGalleryParticles(entries: SceneEntry[], previewRootIds: ReadonlySet<number>): number;
 /**
  * Pauses one-shot preview effects whose particle systems report `isFinished()`.
  * Returns true when any entry was paused (caller should refresh renderer batches).
  */
-export declare function pauseFinishedPreviews(entries: GalleryEntry[], previewRootIds: ReadonlySet<number>, focusFinishedRootIds?: ReadonlySet<number>): boolean;
+export declare function pauseFinishedPreviews(entries: SceneEntry[], previewRootIds: ReadonlySet<number>, focusFinishedRootIds?: ReadonlySet<number>): boolean;

package/dist/core/galleryPlayback.js

@@ -1,8 +1,8 @@
 import { QuarksUtil } from 'babylon.quarks';
 function isPreviewEntry(entry, previewRootIds) {
-    return entry.inScene && previewRootIds.has(entry.root.uniqueId);
+    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, previewRootIds, transportPlaying, focusFinishedRootIds = new Set()) {
     for (const entry of entries) {
         for (const system of entry.systems) {

package/dist/core/galleryScene.d.ts

@@ -1,20 +1,15 @@
 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 type { GalleryEntry } from './loadEffectGallery';
-/** Clears live particles and freezes simulation for one placed catalog entry. */
-export declare function clearGalleryEntrySimulation(entry: GalleryEntry, renderer: BatchedRenderer): void;
-/** Parents a catalog entry into the live scene and registers its systems with the renderer. */
-export declare function placeGalleryEntryInScene(entry: GalleryEntry, renderer: BatchedRenderer, worldPosition: Vector3): void;
-/** Spawns a batch of catalog effects in a square grid centered on `center`. */
-export declare function placeGalleryEntriesAt(entries: GalleryEntry[], renderer: BatchedRenderer, center: Vector3, spacing?: number): void;
+import type { SceneEntry } from './sceneEntries';
+/** Clears live particles and freezes simulation for one scene entry. */
+export declare function clearSceneEntrySimulation(entry: SceneEntry, renderer: BatchedRenderer): void;
 /**
- * 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.
+ * 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 declare function removeGalleryEntryFromScene(entry: GalleryEntry, renderer: BatchedRenderer, catalogRoot: TransformNode): void;
+export declare function setSceneEntryVisible(entry: SceneEntry, renderer: BatchedRenderer, visible: boolean): void;
+/** Lays out a batch of new entries in a square grid centered on `center`. */
+export declare function placeSceneEntriesAt(entries: SceneEntry[], center: Vector3, spacing?: number): void;
 /** Raycasts the editor ground plane from canvas/client coordinates. */
 export declare function pickGroundPosition(scene: Scene, clientX: number, clientY: number): Vector3;
-/** Finds a gallery entry by Babylon node id from a drag payload. */
-export declare function findGalleryEntryById(entries: GalleryEntry[], id: string): GalleryEntry | undefined;

package/dist/core/galleryScene.js

@@ -1,50 +1,30 @@
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { DEFAULT_GALLERY_SPACING, galleryGridPosition } from './galleryLayout';
-/** Clears live particles and freezes simulation for one placed catalog entry. */
-export function clearGalleryEntrySimulation(entry, renderer) {
+/** Clears live particles and freezes simulation for one scene entry. */
+export function clearSceneEntrySimulation(entry, renderer) {
     for (const system of entry.systems) {
         system.restart();
         system.pause();
     }
     renderer.refreshBatches();
 }
-/** Parents a catalog entry into the live scene and registers its systems with the renderer. */
-export function placeGalleryEntryInScene(entry, renderer, worldPosition) {
-    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, renderer, visible) {
+    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, renderer, center, spacing = DEFAULT_GALLERY_SPACING) {
+/** Lays out a batch of new entries in a square grid centered on `center`. */
+export function placeSceneEntriesAt(entries, center, spacing = DEFAULT_GALLERY_SPACING) {
     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, renderer, catalogRoot) {
-    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, clientX, clientY) {
     const canvas = scene.getEngine().getRenderingCanvas();
@@ -55,11 +35,3 @@ export function pickGroundPosition(scene, clientX, clientY) {
     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, id) {
-    const numericId = Number(id);
-    if (!Number.isFinite(numericId)) {
-        return undefined;
-    }
-    return entries.find((entry) => entry.root.uniqueId === numericId);
-}

package/dist/core/gallerySelectionMarker.d.ts

@@ -1,6 +1,7 @@
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import type { Scene } from '@babylonjs/core/scene';
+import './lineShaders';
 export declare const GROUND_RING_RADIUS = 1.2;
 /** Flat ground ring that tracks a transform on the XZ plane. */
 declare class GroundRingMarker {

package/dist/core/gallerySelectionMarker.js

@@ -2,6 +2,7 @@ import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import './lineShaders';
 export const GROUND_RING_RADIUS = 1.2;
 const RING_SEGMENTS = 64;
 const RING_Y = 0.03;

package/dist/core/history.d.ts

@@ -1,4 +1,9 @@
 import type { EffectBinding } from './binding';
+/** 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.
@@ -16,7 +21,13 @@ export declare class EffectHistory {
     get canUndo(): boolean;
     get canRedo(): boolean;
     clear(): void;
-    /** 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;
+    restoreStacks(stacks: HistoryStacks | undefined): void;
+    /**
+     * 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;
     /** Returns the previous effect state as parsed JSON, or null when nothing to undo. */
     undo(): unknown | null;

package/dist/core/history.js

@@ -30,16 +30,29 @@ export class EffectHistory {
         this.redoStack = [];
         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() {
+        return { undo: this.undoStack, redo: this.redoStack };
+    }
+    restoreStacks(stacks) {
+        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() {
         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/dist/core/indexedDbProjectStore.d.ts

@@ -0,0 +1,35 @@
+import type { ProjectMeta, ProjectStore, StorageEstimate, StoredAsset, StoredScene } from './projectStore';
+/**
+ * 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 declare class IndexedDbProjectStore implements ProjectStore {
+    private dbPromise;
+    /** data URI → hash, so re-saving unchanged textures skips hashing. */
+    private readonly hashByDataUrl;
+    /** `${projectId}/${hash}` → data URI, so every effect sharing a file gets the same string. */
+    private readonly dataUrlByFile;
+    private db;
+    listProjects(): Promise<ProjectMeta[]>;
+    getProject(id: string): Promise<ProjectMeta | null>;
+    createProject(name: string): Promise<ProjectMeta>;
+    renameProject(id: string, name: string): Promise<void>;
+    duplicateProject(id: string, name: string): Promise<ProjectMeta>;
+    deleteProject(id: string): Promise<void>;
+    loadAssets(projectId: string): Promise<StoredAsset[]>;
+    putAssets(projectId: string, assets: StoredAsset[]): Promise<void>;
+    deleteAssets(projectId: string, paths: string[]): Promise<void>;
+    loadScene(projectId: string): Promise<StoredScene | null>;
+    saveScene(projectId: string, scene: StoredScene): Promise<void>;
+    estimate(): Promise<StorageEstimate>;
+    requestPersistence(): Promise<boolean>;
+    /** Clones `json` with each texture data URI replaced by a `quarks-file:<hash>` reference. */
+    private pack;
+    /** Puts data URIs back in place of file references. */
+    private unpack;
+    private readFile;
+    private writeFiles;
+    /** Drops files nothing references any more and updates the project's size/count. */
+    private refresh;
+}

package/dist/core/indexedDbProjectStore.js

@@ -0,0 +1,299 @@
+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;
+function request(req) {
+    return new Promise((resolve, reject) => {
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+function done(tx) {
+    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() {
+    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) {
+    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) => {
+        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) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+    });
+}
+function imagesOf(json) {
+    const images = json?.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 {
+    constructor() {
+        this.dbPromise = null;
+        /** data URI → hash, so re-saving unchanged textures skips hashing. */
+        this.hashByDataUrl = new Map();
+        /** `${projectId}/${hash}` → data URI, so every effect sharing a file gets the same string. */
+        this.dataUrlByFile = new Map();
+    }
+    db() {
+        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() {
+        const db = await this.db();
+        const all = await request(db.transaction('projects').objectStore('projects').getAll());
+        return all.sort((a, b) => b.updatedAt - a.updatedAt);
+    }
+    async getProject(id) {
+        const db = await this.db();
+        return ((await request(db.transaction('projects').objectStore('projects').get(id))) ?? null);
+    }
+    async createProject(name) {
+        const now = Date.now();
+        const meta = { 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, name) {
+        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, name) {
+        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(read.objectStore('assets').index('projectId').getAll(id)),
+            request(read.objectStore('files').index('projectId').getAll(id)),
+            request(read.objectStore('scenes').get(id)),
+        ]);
+        const now = Date.now();
+        const meta = { ...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) {
+        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']) {
+            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) {
+        const db = await this.db();
+        const records = await request(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, assets) {
+        const files = new Map();
+        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, paths) {
+        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) {
+        const db = await this.db();
+        const record = await request(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, scene) {
+        const files = new Map();
+        const entries = 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() {
+        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() {
+        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. */
+    async pack(json, files) {
+        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. */
+    async unpack(projectId, json) {
+        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;
+    }
+    readFile(projectId, hash) {
+        const key = `${projectId}/${hash}`;
+        let pending = this.dataUrlByFile.get(key);
+        if (!pending) {
+            pending = (async () => {
+                const db = await this.db();
+                const record = await request(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;
+    }
+    writeFiles(tx, projectId, files) {
+        for (const [hash, blob] of files) {
+            tx.objectStore('files').put({ projectId, hash, blob });
+        }
+    }
+    /** Drops files nothing references any more and updates the project's size/count. */
+    async refresh(projectId) {
+        const db = await this.db();
+        const tx = db.transaction(['projects', 'assets', 'files', 'scenes'], 'readwrite');
+        const [meta, assets, files, scene] = await Promise.all([
+            request(tx.objectStore('projects').get(projectId)),
+            request(tx.objectStore('assets').index('projectId').getAll(projectId)),
+            request(tx.objectStore('files').index('projectId').getAll(projectId)),
+            request(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/dist/core/lineShaders.d.ts

@@ -0,0 +1,2 @@
+import '@babylonjs/core/Shaders/color.fragment';
+import '@babylonjs/core/Shaders/color.vertex';

package/dist/core/lineShaders.js

@@ -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/dist/core/pickAssetFiles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Opens a native folder picker when the host supports it. Returns `null` when the user
+ * cancels, or `undefined` when the API is unavailable (caller should fall back to
+ * `<input webkitdirectory>`).
+ */
+export declare function pickAssetFolderFiles(): Promise<File[] | null | undefined>;

package/dist/core/{pickGalleryFiles.js → pickAssetFiles.js}

@@ -1,10 +1,13 @@
-import { collectJsonFiles } from './loadEffectGallery';
-/** Recursively collects `.json` files from a directory handle (File System Access API). */
-async function readJsonFilesFromDirectory(dir, prefix = '') {
+import { isAssetImportFile, relativePathOf } from './assets';
+/**
+ * Recursively collects effect `.json` files and the image files they may reference from a
+ * directory handle (File System Access API).
+ */
+async function readAssetFilesFromDirectory(dir, prefix = '') {
     const files = [];
     for await (const [name, entry] of dir.entries()) {
         if (entry.kind === 'file') {
-            if (!name.toLowerCase().endsWith('.json'))
+            if (!isAssetImportFile(name))
                 continue;
             const file = await entry.getFile();
             Object.defineProperty(file, 'webkitRelativePath', {
@@ -15,23 +18,25 @@ async function readJsonFilesFromDirectory(dir, prefix = '') {
             continue;
         }
         if (entry.kind === 'directory') {
-            files.push(...(await readJsonFilesFromDirectory(entry, `${prefix}${name}/`)));
+            files.push(...(await readAssetFilesFromDirectory(entry, `${prefix}${name}/`)));
         }
     }
     return files;
 }
 /**
  * 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() {
+export async function pickAssetFolderFiles() {
     const picker = window.showDirectoryPicker;
     if (typeof picker !== 'function') {
         return undefined;
     }
     try {
         const dir = (await picker.call(window, { mode: 'read' }));
-        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') {