@nice2dev/game-engine 1.3.15 → 1.3.17

package/dist/esm/editor/AssetBrowser.js

@@ -1,1184 +1,1103 @@
-/**
- * @file AssetBrowser.ts
- * @description Advanced Asset Browser with thumbnails, search, tags, favorites
- * PRO-1.4: Professional Editor Features
- *
- * Features:
- * - Thumbnail generation for all asset types
- * - Advanced search with filters
- * - Tag management and filtering
- * - Favorites system
- * - Recent assets tracking
- * - Collections/folders
- * - Asset metadata editing
- * - Drag & drop support
- * - Import/export
- * - Asset dependencies
- * - Quick preview
- */
 const DEFAULT_IMPORT_OPTIONS = {
-    folder: '/',
-    generateThumbnail: true,
-    thumbnailSize: 128,
-    autoTag: true,
-    preserveStructure: false,
-    overwriteExisting: false,
-    optimize: false,
-    maxImageSize: 4096,
-    imageQuality: 0.9,
+  folder: "/",
+  generateThumbnail: true,
+  thumbnailSize: 128,
+  autoTag: true,
+  preserveStructure: false,
+  overwriteExisting: false,
+  optimize: false,
+  maxImageSize: 4096,
+  imageQuality: 0.9
 };
 const DEFAULT_BROWSER_CONFIG = {
-    viewMode: 'grid',
-    sortMode: 'name-asc',
-    showHiddenFiles: false,
-    showSystemFolders: false,
-    thumbnailSize: 'medium',
-    showDetails: true,
-    groupByType: false,
-    recentCount: 20,
-    importOptions: DEFAULT_IMPORT_OPTIONS,
+  viewMode: "grid",
+  sortMode: "name-asc",
+  showHiddenFiles: false,
+  showSystemFolders: false,
+  thumbnailSize: "medium",
+  showDetails: true,
+  groupByType: false,
+  recentCount: 20,
+  importOptions: DEFAULT_IMPORT_OPTIONS
 };
-// ============================================================
-// Thumbnail Generator
-// ============================================================
 class ThumbnailGenerator {
-    constructor() {
-        this.audioContext = null;
-        this.canvas = document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
-    }
-    async generateThumbnail(file, type, size = 128) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        switch (type) {
-            case 'image':
-            case 'sprite':
-            case 'spritesheet':
-                return this.generateImageThumbnail(file, size);
-            case 'audio':
-            case 'music':
-            case 'sfx':
-                return this.generateAudioThumbnail(file, size);
-            case 'video':
-                return this.generateVideoThumbnail(file, size);
-            case 'model':
-                return this.generateModelThumbnail(size);
-            case 'material':
-                return this.generateMaterialThumbnail(size);
-            case 'shader':
-                return this.generateShaderThumbnail(size);
-            case 'script':
-                return this.generateScriptThumbnail(size);
-            case 'scene':
-                return this.generateSceneThumbnail(size);
-            case 'prefab':
-                return this.generatePrefabThumbnail(size);
-            case 'font':
-                return this.generateFontThumbnail(file, size);
-            case 'particle':
-                return this.generateParticleThumbnail(size);
-            case 'json':
-                return this.generateJsonThumbnail(size);
-            default:
-                return this.generateGenericThumbnail(size);
-        }
-    }
-    async generateImageThumbnail(file, size) {
-        return new Promise((resolve) => {
-            const img = new Image();
-            const url = URL.createObjectURL(file);
-            img.onload = () => {
-                const scale = Math.min(size / img.width, size / img.height, 1);
-                const width = Math.round(img.width * scale);
-                const height = Math.round(img.height * scale);
-                this.canvas.width = width;
-                this.canvas.height = height;
-                // Draw checkerboard for transparency
-                this.drawCheckerboard(width, height);
-                this.ctx.drawImage(img, 0, 0, width, height);
-                URL.revokeObjectURL(url);
-                resolve({
-                    dataUrl: this.canvas.toDataURL('image/png'),
-                    width,
-                    height,
-                    generated: Date.now(),
-                });
-            };
-            img.onerror = () => {
-                URL.revokeObjectURL(url);
-                resolve(this.generateGenericThumbnail(size, 'image'));
-            };
-            img.src = url;
+  constructor() {
+    this.audioContext = null;
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d");
+  }
+  async generateThumbnail(file, type, size = 128) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    switch (type) {
+      case "image":
+      case "sprite":
+      case "spritesheet":
+        return this.generateImageThumbnail(file, size);
+      case "audio":
+      case "music":
+      case "sfx":
+        return this.generateAudioThumbnail(file, size);
+      case "video":
+        return this.generateVideoThumbnail(file, size);
+      case "model":
+        return this.generateModelThumbnail(size);
+      case "material":
+        return this.generateMaterialThumbnail(size);
+      case "shader":
+        return this.generateShaderThumbnail(size);
+      case "script":
+        return this.generateScriptThumbnail(size);
+      case "scene":
+        return this.generateSceneThumbnail(size);
+      case "prefab":
+        return this.generatePrefabThumbnail(size);
+      case "font":
+        return this.generateFontThumbnail(file, size);
+      case "particle":
+        return this.generateParticleThumbnail(size);
+      case "json":
+        return this.generateJsonThumbnail(size);
+      default:
+        return this.generateGenericThumbnail(size);
+    }
+  }
+  async generateImageThumbnail(file, size) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      const url = URL.createObjectURL(file);
+      img.onload = () => {
+        const scale = Math.min(size / img.width, size / img.height, 1);
+        const width = Math.round(img.width * scale);
+        const height = Math.round(img.height * scale);
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.drawCheckerboard(width, height);
+        this.ctx.drawImage(img, 0, 0, width, height);
+        URL.revokeObjectURL(url);
+        resolve({
+          dataUrl: this.canvas.toDataURL("image/png"),
+          width,
+          height,
+          generated: Date.now()
         });
-    }
-    async generateAudioThumbnail(file, size) {
-        try {
-            // Initialize audio context if needed
-            if (!this.audioContext) {
-                this.audioContext = new AudioContext();
+      };
+      img.onerror = () => {
+        URL.revokeObjectURL(url);
+        resolve(this.generateGenericThumbnail(size, "image"));
+      };
+      img.src = url;
+    });
+  }
+  async generateAudioThumbnail(file, size) {
+    try {
+      if (!this.audioContext) {
+        this.audioContext = new AudioContext();
+      }
+      const arrayBuffer = await file.arrayBuffer();
+      const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      this.canvas.width = size;
+      this.canvas.height = size;
+      this.ctx.fillStyle = "#1a1a2e";
+      this.ctx.fillRect(0, 0, size, size);
+      const data = audioBuffer.getChannelData(0);
+      const step = Math.ceil(data.length / size);
+      const amp = size / 4;
+      this.ctx.strokeStyle = "#4FC3F7";
+      this.ctx.lineWidth = 1;
+      this.ctx.beginPath();
+      for (let i = 0; i < size; i++) {
+        let min = 1;
+        let max = -1;
+        for (let j = 0; j < step; j++) {
+          const sample = data[i * step + j];
+          if (sample !== void 0) {
+            if (sample < min) {
+              min = sample;
             }
-            const arrayBuffer = await file.arrayBuffer();
-            const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
-            // Draw waveform
-            this.canvas.width = size;
-            this.canvas.height = size;
-            this.ctx.fillStyle = '#1a1a2e';
-            this.ctx.fillRect(0, 0, size, size);
-            const data = audioBuffer.getChannelData(0);
-            const step = Math.ceil(data.length / size);
-            const amp = size / 4;
-            this.ctx.strokeStyle = '#4FC3F7';
-            this.ctx.lineWidth = 1;
-            this.ctx.beginPath();
-            for (let i = 0; i < size; i++) {
-                let min = 1;
-                let max = -1;
-                for (let j = 0; j < step; j++) {
-                    const sample = data[i * step + j];
-                    if (sample !== undefined) {
-                        if (sample < min) {
-                            min = sample;
-                        }
-                        if (sample > max) {
-                            max = sample;
-                        }
-                    }
-                }
-                const y1 = size / 2 + min * amp;
-                const y2 = size / 2 + max * amp;
-                this.ctx.moveTo(i, y1);
-                this.ctx.lineTo(i, y2);
+            if (sample > max) {
+              max = sample;
             }
-            this.ctx.stroke();
-            // Draw duration
-            const duration = audioBuffer.duration;
-            this.ctx.fillStyle = 'white';
-            this.ctx.font = '10px sans-serif';
-            this.ctx.fillText(this.formatDuration(duration), 4, size - 4);
-            return {
-                dataUrl: this.canvas.toDataURL('image/png'),
-                width: size,
-                height: size,
-                generated: Date.now(),
-            };
-        }
-        catch {
-            return this.generateGenericThumbnail(size, 'audio');
+          }
         }
-    }
-    async generateVideoThumbnail(file, size) {
-        return new Promise((resolve) => {
-            const video = document.createElement('video');
-            const url = URL.createObjectURL(file);
-            video.onloadeddata = () => {
-                // Seek to 1 second or 10% of duration
-                video.currentTime = Math.min(1, video.duration * 0.1);
-            };
-            video.onseeked = () => {
-                const scale = Math.min(size / video.videoWidth, size / video.videoHeight);
-                const width = Math.round(video.videoWidth * scale);
-                const height = Math.round(video.videoHeight * scale);
-                this.canvas.width = width;
-                this.canvas.height = height;
-                this.ctx.drawImage(video, 0, 0, width, height);
-                // Draw play icon overlay
-                this.drawPlayIcon(width, height);
-                // Draw duration
-                this.ctx.fillStyle = 'rgba(0,0,0,0.7)';
-                this.ctx.fillRect(width - 40, height - 16, 36, 14);
-                this.ctx.fillStyle = 'white';
-                this.ctx.font = '10px sans-serif';
-                this.ctx.fillText(this.formatDuration(video.duration), width - 38, height - 5);
-                URL.revokeObjectURL(url);
-                resolve({
-                    dataUrl: this.canvas.toDataURL('image/png'),
-                    width,
-                    height,
-                    generated: Date.now(),
-                });
-            };
-            video.onerror = () => {
-                URL.revokeObjectURL(url);
-                resolve(this.generateGenericThumbnail(size, 'video'));
-            };
-            video.src = url;
+        const y1 = size / 2 + min * amp;
+        const y2 = size / 2 + max * amp;
+        this.ctx.moveTo(i, y1);
+        this.ctx.lineTo(i, y2);
+      }
+      this.ctx.stroke();
+      const duration = audioBuffer.duration;
+      this.ctx.fillStyle = "white";
+      this.ctx.font = "10px sans-serif";
+      this.ctx.fillText(this.formatDuration(duration), 4, size - 4);
+      return {
+        dataUrl: this.canvas.toDataURL("image/png"),
+        width: size,
+        height: size,
+        generated: Date.now()
+      };
+    } catch {
+      return this.generateGenericThumbnail(size, "audio");
+    }
+  }
+  async generateVideoThumbnail(file, size) {
+    return new Promise((resolve) => {
+      const video = document.createElement("video");
+      const url = URL.createObjectURL(file);
+      video.onloadeddata = () => {
+        video.currentTime = Math.min(1, video.duration * 0.1);
+      };
+      video.onseeked = () => {
+        const scale = Math.min(size / video.videoWidth, size / video.videoHeight);
+        const width = Math.round(video.videoWidth * scale);
+        const height = Math.round(video.videoHeight * scale);
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.ctx.drawImage(video, 0, 0, width, height);
+        this.drawPlayIcon(width, height);
+        this.ctx.fillStyle = "rgba(0,0,0,0.7)";
+        this.ctx.fillRect(width - 40, height - 16, 36, 14);
+        this.ctx.fillStyle = "white";
+        this.ctx.font = "10px sans-serif";
+        this.ctx.fillText(this.formatDuration(video.duration), width - 38, height - 5);
+        URL.revokeObjectURL(url);
+        resolve({
+          dataUrl: this.canvas.toDataURL("image/png"),
+          width,
+          height,
+          generated: Date.now()
         });
-    }
-    generateModelThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        // Draw a simple 3D cube wireframe
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        const cx = size / 2;
-        const cy = size / 2;
-        const s = size * 0.3;
-        this.ctx.strokeStyle = '#64B5F6';
-        this.ctx.lineWidth = 2;
-        // Front face
-        this.ctx.strokeRect(cx - s / 2, cy - s / 2 + s * 0.2, s, s);
-        // Back face connections
-        this.ctx.beginPath();
-        this.ctx.moveTo(cx - s / 2, cy - s / 2 + s * 0.2);
-        this.ctx.lineTo(cx - s / 2 + s * 0.3, cy - s / 2 - s * 0.1);
-        this.ctx.moveTo(cx + s / 2, cy - s / 2 + s * 0.2);
-        this.ctx.lineTo(cx + s / 2 + s * 0.3, cy - s / 2 - s * 0.1);
-        this.ctx.moveTo(cx + s / 2, cy + s / 2 + s * 0.2);
-        this.ctx.lineTo(cx + s / 2 + s * 0.3, cy + s / 2 - s * 0.1);
-        this.ctx.stroke();
-        // Back face
-        this.ctx.strokeRect(cx - s / 2 + s * 0.3, cy - s / 2 - s * 0.1, s, s);
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateMaterialThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        // Draw a sphere-like gradient
-        const gradient = this.ctx.createRadialGradient(size * 0.4, size * 0.4, 0, size / 2, size / 2, size * 0.4);
-        gradient.addColorStop(0, '#ffffff');
-        gradient.addColorStop(0.5, '#4FC3F7');
-        gradient.addColorStop(1, '#1a1a2e');
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        this.ctx.beginPath();
-        this.ctx.arc(size / 2, size / 2, size * 0.35, 0, Math.PI * 2);
-        this.ctx.fillStyle = gradient;
-        this.ctx.fill();
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateShaderThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        // Draw shader-like pattern
-        for (let y = 0; y < size; y++) {
-            for (let x = 0; x < size; x++) {
-                const r = Math.sin(x * 0.1 + y * 0.05) * 127 + 128;
-                const g = Math.cos(y * 0.1) * 127 + 128;
-                const b = Math.sin((x + y) * 0.05) * 127 + 128;
-                this.ctx.fillStyle = `rgb(${r},${g},${b})`;
-                this.ctx.fillRect(x, y, 1, 1);
-            }
-        }
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateScriptThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1e1e2e';
-        this.ctx.fillRect(0, 0, size, size);
-        // Draw code-like lines
-        const lineHeight = 8;
-        const colors = ['#f38ba8', '#89b4fa', '#a6e3a1', '#f9e2af', '#cdd6f4'];
-        for (let i = 0; i < size / lineHeight; i++) {
-            const y = i * lineHeight + 4;
-            const indent = (i % 4) * 8;
-            const width = Math.random() * (size * 0.6) + size * 0.2 - indent;
-            this.ctx.fillStyle = colors[i % colors.length];
-            this.ctx.fillRect(8 + indent, y, width, 4);
-        }
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateSceneThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        // Sky gradient
-        const skyGradient = this.ctx.createLinearGradient(0, 0, 0, size * 0.6);
-        skyGradient.addColorStop(0, '#1a1a2e');
-        skyGradient.addColorStop(1, '#4a4a6e');
-        this.ctx.fillStyle = skyGradient;
-        this.ctx.fillRect(0, 0, size, size * 0.6);
-        // Ground
-        this.ctx.fillStyle = '#2d5a27';
-        this.ctx.fillRect(0, size * 0.6, size, size * 0.4);
-        // Sun
-        this.ctx.beginPath();
-        this.ctx.arc(size * 0.75, size * 0.25, size * 0.1, 0, Math.PI * 2);
-        this.ctx.fillStyle = '#f9e2af';
-        this.ctx.fill();
-        // Simple tree
-        this.ctx.fillStyle = '#1a3d1a';
-        this.ctx.beginPath();
-        this.ctx.moveTo(size * 0.3, size * 0.4);
-        this.ctx.lineTo(size * 0.4, size * 0.6);
-        this.ctx.lineTo(size * 0.2, size * 0.6);
-        this.ctx.closePath();
-        this.ctx.fill();
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generatePrefabThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        // Draw prefab icon (cube with link)
-        const cx = size / 2;
-        const cy = size / 2;
-        const s = size * 0.3;
-        this.ctx.fillStyle = '#89b4fa';
-        this.ctx.fillRect(cx - s / 2, cy - s / 2, s, s);
-        this.ctx.strokeStyle = '#1a1a2e';
-        this.ctx.lineWidth = 2;
-        this.ctx.strokeRect(cx - s / 2, cy - s / 2, s, s);
-        // Link icon
-        this.ctx.fillStyle = '#a6e3a1';
-        this.ctx.beginPath();
-        this.ctx.arc(cx + s / 2, cy + s / 2, s * 0.2, 0, Math.PI * 2);
-        this.ctx.fill();
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    async generateFontThumbnail(file, size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        try {
-            const fontData = await file.arrayBuffer();
-            const font = new FontFace('preview-font', fontData);
-            await font.load();
-            document.fonts.add(font);
-            this.ctx.fillStyle = '#cdd6f4';
-            this.ctx.font = `${size * 0.6}px preview-font`;
-            this.ctx.textAlign = 'center';
-            this.ctx.textBaseline = 'middle';
-            this.ctx.fillText('Aa', size / 2, size / 2);
-        }
-        catch {
-            // Fallback
-            this.ctx.fillStyle = '#cdd6f4';
-            this.ctx.font = `${size * 0.4}px serif`;
-            this.ctx.textAlign = 'center';
-            this.ctx.textBaseline = 'middle';
-            this.ctx.fillText('Aa', size / 2, size / 2);
-        }
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateParticleThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        // Draw particles
-        const particleCount = 30;
-        for (let i = 0; i < particleCount; i++) {
-            const x = size / 2 + (Math.random() - 0.5) * size * 0.6;
-            const y = size / 2 + (Math.random() - 0.5) * size * 0.6;
-            const r = Math.random() * 4 + 2;
-            const alpha = Math.random() * 0.5 + 0.5;
-            this.ctx.beginPath();
-            this.ctx.arc(x, y, r, 0, Math.PI * 2);
-            this.ctx.fillStyle = `rgba(255, 180, 100, ${alpha})`;
-            this.ctx.fill();
-        }
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateJsonThumbnail(size) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        // Draw JSON brackets
-        this.ctx.fillStyle = '#f9e2af';
-        this.ctx.font = `bold ${size * 0.5}px monospace`;
-        this.ctx.textAlign = 'center';
-        this.ctx.textBaseline = 'middle';
-        this.ctx.fillText('{ }', size / 2, size / 2);
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    generateGenericThumbnail(size, type) {
-        this.canvas.width = size;
-        this.canvas.height = size;
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.fillRect(0, 0, size, size);
-        // Draw file icon
-        const iconColors = {
-            image: '#89b4fa',
-            audio: '#f38ba8',
-            video: '#a6e3a1',
-            model: '#f9e2af',
-            script: '#cba6f7',
-        };
-        const color = iconColors[type ?? ''] ?? '#cdd6f4';
-        // File shape
-        this.ctx.fillStyle = color;
-        this.ctx.beginPath();
-        this.ctx.moveTo(size * 0.25, size * 0.15);
-        this.ctx.lineTo(size * 0.55, size * 0.15);
-        this.ctx.lineTo(size * 0.75, size * 0.35);
-        this.ctx.lineTo(size * 0.75, size * 0.85);
-        this.ctx.lineTo(size * 0.25, size * 0.85);
-        this.ctx.closePath();
-        this.ctx.fill();
-        // Fold corner
-        this.ctx.fillStyle = '#1a1a2e';
-        this.ctx.beginPath();
-        this.ctx.moveTo(size * 0.55, size * 0.15);
-        this.ctx.lineTo(size * 0.55, size * 0.35);
-        this.ctx.lineTo(size * 0.75, size * 0.35);
-        this.ctx.closePath();
-        this.ctx.fill();
-        return {
-            dataUrl: this.canvas.toDataURL('image/png'),
-            width: size,
-            height: size,
-            generated: Date.now(),
-        };
-    }
-    drawCheckerboard(width, height) {
-        const checkSize = 8;
-        for (let y = 0; y < height; y += checkSize) {
-            for (let x = 0; x < width; x += checkSize) {
-                this.ctx.fillStyle = ((x + y) / checkSize) % 2 === 0 ? '#ffffff' : '#cccccc';
-                this.ctx.fillRect(x, y, checkSize, checkSize);
-            }
-        }
-    }
-    drawPlayIcon(width, height) {
-        const cx = width / 2;
-        const cy = height / 2;
-        const r = Math.min(width, height) * 0.15;
-        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        this.ctx.beginPath();
-        this.ctx.arc(cx, cy, r, 0, Math.PI * 2);
-        this.ctx.fill();
-        this.ctx.fillStyle = 'white';
-        this.ctx.beginPath();
-        this.ctx.moveTo(cx - r * 0.3, cy - r * 0.5);
-        this.ctx.lineTo(cx + r * 0.5, cy);
-        this.ctx.lineTo(cx - r * 0.3, cy + r * 0.5);
-        this.ctx.closePath();
-        this.ctx.fill();
-    }
-    formatDuration(seconds) {
-        const mins = Math.floor(seconds / 60);
-        const secs = Math.floor(seconds % 60);
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
+      };
+      video.onerror = () => {
+        URL.revokeObjectURL(url);
+        resolve(this.generateGenericThumbnail(size, "video"));
+      };
+      video.src = url;
+    });
+  }
+  generateModelThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    const cx = size / 2;
+    const cy = size / 2;
+    const s = size * 0.3;
+    this.ctx.strokeStyle = "#64B5F6";
+    this.ctx.lineWidth = 2;
+    this.ctx.strokeRect(cx - s / 2, cy - s / 2 + s * 0.2, s, s);
+    this.ctx.beginPath();
+    this.ctx.moveTo(cx - s / 2, cy - s / 2 + s * 0.2);
+    this.ctx.lineTo(cx - s / 2 + s * 0.3, cy - s / 2 - s * 0.1);
+    this.ctx.moveTo(cx + s / 2, cy - s / 2 + s * 0.2);
+    this.ctx.lineTo(cx + s / 2 + s * 0.3, cy - s / 2 - s * 0.1);
+    this.ctx.moveTo(cx + s / 2, cy + s / 2 + s * 0.2);
+    this.ctx.lineTo(cx + s / 2 + s * 0.3, cy + s / 2 - s * 0.1);
+    this.ctx.stroke();
+    this.ctx.strokeRect(cx - s / 2 + s * 0.3, cy - s / 2 - s * 0.1, s, s);
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateMaterialThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    const gradient = this.ctx.createRadialGradient(
+      size * 0.4,
+      size * 0.4,
+      0,
+      size / 2,
+      size / 2,
+      size * 0.4
+    );
+    gradient.addColorStop(0, "#ffffff");
+    gradient.addColorStop(0.5, "#4FC3F7");
+    gradient.addColorStop(1, "#1a1a2e");
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    this.ctx.beginPath();
+    this.ctx.arc(size / 2, size / 2, size * 0.35, 0, Math.PI * 2);
+    this.ctx.fillStyle = gradient;
+    this.ctx.fill();
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateShaderThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        const r = Math.sin(x * 0.1 + y * 0.05) * 127 + 128;
+        const g = Math.cos(y * 0.1) * 127 + 128;
+        const b = Math.sin((x + y) * 0.05) * 127 + 128;
+        this.ctx.fillStyle = `rgb(${r},${g},${b})`;
+        this.ctx.fillRect(x, y, 1, 1);
+      }
+    }
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateScriptThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1e1e2e";
+    this.ctx.fillRect(0, 0, size, size);
+    const lineHeight = 8;
+    const colors = ["#f38ba8", "#89b4fa", "#a6e3a1", "#f9e2af", "#cdd6f4"];
+    for (let i = 0; i < size / lineHeight; i++) {
+      const y = i * lineHeight + 4;
+      const indent = i % 4 * 8;
+      const width = Math.random() * (size * 0.6) + size * 0.2 - indent;
+      this.ctx.fillStyle = colors[i % colors.length];
+      this.ctx.fillRect(8 + indent, y, width, 4);
+    }
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateSceneThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    const skyGradient = this.ctx.createLinearGradient(0, 0, 0, size * 0.6);
+    skyGradient.addColorStop(0, "#1a1a2e");
+    skyGradient.addColorStop(1, "#4a4a6e");
+    this.ctx.fillStyle = skyGradient;
+    this.ctx.fillRect(0, 0, size, size * 0.6);
+    this.ctx.fillStyle = "#2d5a27";
+    this.ctx.fillRect(0, size * 0.6, size, size * 0.4);
+    this.ctx.beginPath();
+    this.ctx.arc(size * 0.75, size * 0.25, size * 0.1, 0, Math.PI * 2);
+    this.ctx.fillStyle = "#f9e2af";
+    this.ctx.fill();
+    this.ctx.fillStyle = "#1a3d1a";
+    this.ctx.beginPath();
+    this.ctx.moveTo(size * 0.3, size * 0.4);
+    this.ctx.lineTo(size * 0.4, size * 0.6);
+    this.ctx.lineTo(size * 0.2, size * 0.6);
+    this.ctx.closePath();
+    this.ctx.fill();
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generatePrefabThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    const cx = size / 2;
+    const cy = size / 2;
+    const s = size * 0.3;
+    this.ctx.fillStyle = "#89b4fa";
+    this.ctx.fillRect(cx - s / 2, cy - s / 2, s, s);
+    this.ctx.strokeStyle = "#1a1a2e";
+    this.ctx.lineWidth = 2;
+    this.ctx.strokeRect(cx - s / 2, cy - s / 2, s, s);
+    this.ctx.fillStyle = "#a6e3a1";
+    this.ctx.beginPath();
+    this.ctx.arc(cx + s / 2, cy + s / 2, s * 0.2, 0, Math.PI * 2);
+    this.ctx.fill();
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  async generateFontThumbnail(file, size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    try {
+      const fontData = await file.arrayBuffer();
+      const font = new FontFace("preview-font", fontData);
+      await font.load();
+      document.fonts.add(font);
+      this.ctx.fillStyle = "#cdd6f4";
+      this.ctx.font = `${size * 0.6}px preview-font`;
+      this.ctx.textAlign = "center";
+      this.ctx.textBaseline = "middle";
+      this.ctx.fillText("Aa", size / 2, size / 2);
+    } catch {
+      this.ctx.fillStyle = "#cdd6f4";
+      this.ctx.font = `${size * 0.4}px serif`;
+      this.ctx.textAlign = "center";
+      this.ctx.textBaseline = "middle";
+      this.ctx.fillText("Aa", size / 2, size / 2);
+    }
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateParticleThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    const particleCount = 30;
+    for (let i = 0; i < particleCount; i++) {
+      const x = size / 2 + (Math.random() - 0.5) * size * 0.6;
+      const y = size / 2 + (Math.random() - 0.5) * size * 0.6;
+      const r = Math.random() * 4 + 2;
+      const alpha = Math.random() * 0.5 + 0.5;
+      this.ctx.beginPath();
+      this.ctx.arc(x, y, r, 0, Math.PI * 2);
+      this.ctx.fillStyle = `rgba(255, 180, 100, ${alpha})`;
+      this.ctx.fill();
+    }
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateJsonThumbnail(size) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    this.ctx.fillStyle = "#f9e2af";
+    this.ctx.font = `bold ${size * 0.5}px monospace`;
+    this.ctx.textAlign = "center";
+    this.ctx.textBaseline = "middle";
+    this.ctx.fillText("{ }", size / 2, size / 2);
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  generateGenericThumbnail(size, type) {
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.fillRect(0, 0, size, size);
+    const iconColors = {
+      image: "#89b4fa",
+      audio: "#f38ba8",
+      video: "#a6e3a1",
+      model: "#f9e2af",
+      script: "#cba6f7"
+    };
+    const color = iconColors[type ?? ""] ?? "#cdd6f4";
+    this.ctx.fillStyle = color;
+    this.ctx.beginPath();
+    this.ctx.moveTo(size * 0.25, size * 0.15);
+    this.ctx.lineTo(size * 0.55, size * 0.15);
+    this.ctx.lineTo(size * 0.75, size * 0.35);
+    this.ctx.lineTo(size * 0.75, size * 0.85);
+    this.ctx.lineTo(size * 0.25, size * 0.85);
+    this.ctx.closePath();
+    this.ctx.fill();
+    this.ctx.fillStyle = "#1a1a2e";
+    this.ctx.beginPath();
+    this.ctx.moveTo(size * 0.55, size * 0.15);
+    this.ctx.lineTo(size * 0.55, size * 0.35);
+    this.ctx.lineTo(size * 0.75, size * 0.35);
+    this.ctx.closePath();
+    this.ctx.fill();
+    return {
+      dataUrl: this.canvas.toDataURL("image/png"),
+      width: size,
+      height: size,
+      generated: Date.now()
+    };
+  }
+  drawCheckerboard(width, height) {
+    const checkSize = 8;
+    for (let y = 0; y < height; y += checkSize) {
+      for (let x = 0; x < width; x += checkSize) {
+        this.ctx.fillStyle = (x + y) / checkSize % 2 === 0 ? "#ffffff" : "#cccccc";
+        this.ctx.fillRect(x, y, checkSize, checkSize);
+      }
+    }
+  }
+  drawPlayIcon(width, height) {
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = Math.min(width, height) * 0.15;
+    this.ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+    this.ctx.beginPath();
+    this.ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    this.ctx.fill();
+    this.ctx.fillStyle = "white";
+    this.ctx.beginPath();
+    this.ctx.moveTo(cx - r * 0.3, cy - r * 0.5);
+    this.ctx.lineTo(cx + r * 0.5, cy);
+    this.ctx.lineTo(cx - r * 0.3, cy + r * 0.5);
+    this.ctx.closePath();
+    this.ctx.fill();
+  }
+  formatDuration(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  }
 }
-// ============================================================
-// Asset Browser System
-// ============================================================
 class AssetBrowser {
-    constructor(config) {
-        this.config = { ...DEFAULT_BROWSER_CONFIG };
-        this.assets = new Map();
-        this.folders = new Map();
-        this.collections = new Map();
-        this.blobStore = new Map();
-        // State
-        this.currentFolderId = 'root';
-        this.selectedIds = new Set();
-        this.recentAssetIds = [];
-        this.allTags = new Set();
-        if (config) {
-            this.config = { ...this.config, ...config };
+  constructor(config) {
+    this.config = { ...DEFAULT_BROWSER_CONFIG };
+    this.assets = /* @__PURE__ */ new Map();
+    this.folders = /* @__PURE__ */ new Map();
+    this.collections = /* @__PURE__ */ new Map();
+    this.blobStore = /* @__PURE__ */ new Map();
+    this.currentFolderId = "root";
+    this.selectedIds = /* @__PURE__ */ new Set();
+    this.recentAssetIds = [];
+    this.allTags = /* @__PURE__ */ new Set();
+    if (config) {
+      this.config = { ...this.config, ...config };
+    }
+    this.thumbnailGenerator = new ThumbnailGenerator();
+    this.folders.set("root", {
+      id: "root",
+      name: "Assets",
+      path: "/",
+      parentId: null,
+      expanded: true,
+      children: [],
+      assets: [],
+      createdAt: Date.now(),
+      isSystem: true
+    });
+    this.createDefaultCollections();
+  }
+  createDefaultCollections() {
+    this.collections.set("favorites", {
+      id: "favorites",
+      name: "Favorites",
+      description: "Your favorite assets",
+      icon: "star",
+      color: "#f9e2af",
+      assetIds: [],
+      createdAt: Date.now(),
+      isSmartCollection: true,
+      smartFilter: { favorites: true }
+    });
+    this.collections.set("recent", {
+      id: "recent",
+      name: "Recent",
+      description: "Recently used assets",
+      icon: "clock",
+      color: "#89b4fa",
+      assetIds: [],
+      createdAt: Date.now(),
+      isSmartCollection: true,
+      smartFilter: { recent: true }
+    });
+    this.collections.set("unused", {
+      id: "unused",
+      name: "Unused",
+      description: "Assets not referenced by any scene",
+      icon: "box",
+      color: "#cdd6f4",
+      assetIds: [],
+      createdAt: Date.now(),
+      isSmartCollection: true,
+      smartFilter: { unused: true }
+    });
+  }
+  // ─── Configuration ─────────────────────────────────────
+  setConfig(config) {
+    this.config = { ...this.config, ...config };
+    this.onChange?.();
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  // ─── Asset Import ──────────────────────────────────────
+  async importFiles(files, options) {
+    const opts = { ...this.config.importOptions, ...options };
+    const results = [];
+    for (const file of Array.from(files)) {
+      const asset = await this.importFile(file, opts);
+      if (asset) {
+        results.push(asset);
+      }
+    }
+    this.onChange?.();
+    return results;
+  }
+  async importFile(file, options) {
+    const opts = { ...this.config.importOptions, ...options };
+    const type = this.inferAssetType(file);
+    const id = `asset_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = Date.now();
+    const folderId = opts.folder === "/" ? "root" : this.findOrCreateFolder(opts.folder);
+    const asset = {
+      id,
+      name: file.name,
+      type,
+      path: `${this.getFolderPath(folderId)}/${file.name}`,
+      size: file.size,
+      mimeType: file.type,
+      tags: opts.autoTag ? this.autoGenerateTags(file, type) : [],
+      description: "",
+      author: "",
+      license: "",
+      version: "1.0.0",
+      customProperties: {},
+      createdAt: now,
+      modifiedAt: now,
+      importedAt: now,
+      usageCount: 0,
+      lastUsedAt: null,
+      folderId,
+      dependencies: [],
+      dependents: [],
+      isFavorite: false,
+      importSettings: { ...opts }
+    };
+    if (opts.generateThumbnail) {
+      asset.thumbnailGenerating = true;
+      const thumbnail = await this.thumbnailGenerator.generateThumbnail(
+        file,
+        type,
+        opts.thumbnailSize
+      );
+      if (thumbnail) {
+        asset.thumbnail = thumbnail;
+      }
+      asset.thumbnailGenerating = false;
+    }
+    this.assets.set(id, asset);
+    this.blobStore.set(id, file);
+    const folder = this.folders.get(folderId);
+    if (folder) {
+      folder.assets.push(id);
+    }
+    for (const tag of asset.tags) {
+      this.allTags.add(tag);
+    }
+    return asset;
+  }
+  inferAssetType(file) {
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+    const mime = file.type;
+    if (mime.startsWith("image/")) {
+      if (file.name.includes("spritesheet") || file.name.includes("atlas")) {
+        return "spritesheet";
+      }
+      return "image";
+    }
+    if (mime.startsWith("audio/")) {
+      if (file.name.includes("music") || file.name.includes("bgm")) {
+        return "music";
+      }
+      if (file.name.includes("sfx") || file.name.includes("effect")) {
+        return "sfx";
+      }
+      return "audio";
+    }
+    if (mime.startsWith("video/")) {
+      return "video";
+    }
+    const extMap = {
+      // Models
+      gltf: "model",
+      glb: "model",
+      obj: "model",
+      fbx: "model",
+      dae: "model",
+      // Materials & Shaders
+      mtl: "material",
+      mat: "material",
+      shader: "shader",
+      vert: "shader",
+      frag: "shader",
+      glsl: "shader",
+      // Scripts
+      js: "script",
+      ts: "script",
+      lua: "script",
+      // Data
+      json: "json",
+      ndg: "scene",
+      scene: "scene",
+      prefab: "prefab",
+      anim: "animation",
+      // Fonts
+      ttf: "font",
+      otf: "font",
+      woff: "font",
+      woff2: "font",
+      // Particles
+      particle: "particle",
+      emitter: "particle",
+      // Terrain
+      terrain: "terrain",
+      heightmap: "terrain",
+      // Tilemaps
+      tmx: "tilemap",
+      tsx: "tilemap",
+      ldtk: "tilemap"
+    };
+    return extMap[ext] ?? "other";
+  }
+  autoGenerateTags(file, type) {
+    const tags = [type];
+    const ext = file.name.split(".").pop()?.toLowerCase();
+    if (ext) {
+      tags.push(ext);
+    }
+    if (file.size < 10 * 1024) {
+      tags.push("small");
+    } else if (file.size > 1024 * 1024) {
+      tags.push("large");
+    }
+    const nameLower = file.name.toLowerCase();
+    const keywords = [
+      "ui",
+      "icon",
+      "background",
+      "player",
+      "enemy",
+      "item",
+      "effect",
+      "ambient",
+      "loop"
+    ];
+    for (const keyword of keywords) {
+      if (nameLower.includes(keyword)) {
+        tags.push(keyword);
+      }
+    }
+    return tags;
+  }
+  findOrCreateFolder(path) {
+    const parts = path.split("/").filter(Boolean);
+    let currentFolder = this.folders.get("root");
+    let currentPath = "";
+    for (const part of parts) {
+      currentPath += "/" + part;
+      let childFolder;
+      for (const childId of currentFolder.children) {
+        const child = this.folders.get(childId);
+        if (child?.name === part) {
+          childFolder = child;
+          break;
         }
-        this.thumbnailGenerator = new ThumbnailGenerator();
-        // Create root folder
-        this.folders.set('root', {
-            id: 'root',
-            name: 'Assets',
-            path: '/',
-            parentId: null,
-            expanded: true,
-            children: [],
-            assets: [],
-            createdAt: Date.now(),
-            isSystem: true,
-        });
-        // Create system collections
-        this.createDefaultCollections();
-    }
-    createDefaultCollections() {
-        this.collections.set('favorites', {
-            id: 'favorites',
-            name: 'Favorites',
-            description: 'Your favorite assets',
-            icon: 'star',
-            color: '#f9e2af',
-            assetIds: [],
-            createdAt: Date.now(),
-            isSmartCollection: true,
-            smartFilter: { favorites: true },
-        });
-        this.collections.set('recent', {
-            id: 'recent',
-            name: 'Recent',
-            description: 'Recently used assets',
-            icon: 'clock',
-            color: '#89b4fa',
-            assetIds: [],
-            createdAt: Date.now(),
-            isSmartCollection: true,
-            smartFilter: { recent: true },
-        });
-        this.collections.set('unused', {
-            id: 'unused',
-            name: 'Unused',
-            description: 'Assets not referenced by any scene',
-            icon: 'box',
-            color: '#cdd6f4',
-            assetIds: [],
-            createdAt: Date.now(),
-            isSmartCollection: true,
-            smartFilter: { unused: true },
-        });
-    }
-    // ─── Configuration ─────────────────────────────────────
-    setConfig(config) {
-        this.config = { ...this.config, ...config };
-        this.onChange?.();
-    }
-    getConfig() {
-        return { ...this.config };
-    }
-    // ─── Asset Import ──────────────────────────────────────
-    async importFiles(files, options) {
-        const opts = { ...this.config.importOptions, ...options };
-        const results = [];
-        for (const file of Array.from(files)) {
-            const asset = await this.importFile(file, opts);
-            if (asset) {
-                results.push(asset);
-            }
-        }
-        this.onChange?.();
-        return results;
-    }
-    async importFile(file, options) {
-        const opts = { ...this.config.importOptions, ...options };
-        const type = this.inferAssetType(file);
-        const id = `asset_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        const now = Date.now();
-        // Get target folder
-        const folderId = opts.folder === '/' ? 'root' : this.findOrCreateFolder(opts.folder);
-        const asset = {
-            id,
-            name: file.name,
-            type,
-            path: `${this.getFolderPath(folderId)}/${file.name}`,
-            size: file.size,
-            mimeType: file.type,
-            tags: opts.autoTag ? this.autoGenerateTags(file, type) : [],
-            description: '',
-            author: '',
-            license: '',
-            version: '1.0.0',
-            customProperties: {},
-            createdAt: now,
-            modifiedAt: now,
-            importedAt: now,
-            usageCount: 0,
-            lastUsedAt: null,
-            folderId,
-            dependencies: [],
-            dependents: [],
-            isFavorite: false,
-            importSettings: { ...opts },
+      }
+      if (!childFolder) {
+        childFolder = {
+          id: `folder_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+          name: part,
+          path: currentPath,
+          parentId: currentFolder.id,
+          expanded: false,
+          children: [],
+          assets: [],
+          createdAt: Date.now()
         };
-        // Generate thumbnail
-        if (opts.generateThumbnail) {
-            asset.thumbnailGenerating = true;
-            const thumbnail = await this.thumbnailGenerator.generateThumbnail(file, type, opts.thumbnailSize);
-            if (thumbnail) {
-                asset.thumbnail = thumbnail;
-            }
-            asset.thumbnailGenerating = false;
-        }
-        // Store asset and blob
-        this.assets.set(id, asset);
-        this.blobStore.set(id, file);
-        // Add to folder
-        const folder = this.folders.get(folderId);
-        if (folder) {
-            folder.assets.push(id);
-        }
-        // Update tags
-        for (const tag of asset.tags) {
-            this.allTags.add(tag);
-        }
-        return asset;
-    }
-    inferAssetType(file) {
-        const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
-        const mime = file.type;
-        // Images
-        if (mime.startsWith('image/')) {
-            if (file.name.includes('spritesheet') || file.name.includes('atlas')) {
-                return 'spritesheet';
-            }
-            return 'image';
-        }
-        // Audio
-        if (mime.startsWith('audio/')) {
-            if (file.name.includes('music') || file.name.includes('bgm')) {
-                return 'music';
-            }
-            if (file.name.includes('sfx') || file.name.includes('effect')) {
-                return 'sfx';
-            }
-            return 'audio';
-        }
-        // Video
-        if (mime.startsWith('video/')) {
-            return 'video';
-        }
-        // By extension
-        const extMap = {
-            // Models
-            gltf: 'model',
-            glb: 'model',
-            obj: 'model',
-            fbx: 'model',
-            dae: 'model',
-            // Materials & Shaders
-            mtl: 'material',
-            mat: 'material',
-            shader: 'shader',
-            vert: 'shader',
-            frag: 'shader',
-            glsl: 'shader',
-            // Scripts
-            js: 'script',
-            ts: 'script',
-            lua: 'script',
-            // Data
-            json: 'json',
-            ndg: 'scene',
-            scene: 'scene',
-            prefab: 'prefab',
-            anim: 'animation',
-            // Fonts
-            ttf: 'font',
-            otf: 'font',
-            woff: 'font',
-            woff2: 'font',
-            // Particles
-            particle: 'particle',
-            emitter: 'particle',
-            // Terrain
-            terrain: 'terrain',
-            heightmap: 'terrain',
-            // Tilemaps
-            tmx: 'tilemap',
-            tsx: 'tilemap',
-            ldtk: 'tilemap',
-        };
-        return extMap[ext] ?? 'other';
-    }
-    autoGenerateTags(file, type) {
-        const tags = [type];
-        // Add extension as tag
-        const ext = file.name.split('.').pop()?.toLowerCase();
-        if (ext) {
-            tags.push(ext);
-        }
-        // Size-based tags
-        if (file.size < 10 * 1024) {
-            tags.push('small');
-        }
-        else if (file.size > 1024 * 1024) {
-            tags.push('large');
-        }
-        // Name-based tags
-        const nameLower = file.name.toLowerCase();
-        const keywords = [
-            'ui',
-            'icon',
-            'background',
-            'player',
-            'enemy',
-            'item',
-            'effect',
-            'ambient',
-            'loop',
-        ];
-        for (const keyword of keywords) {
-            if (nameLower.includes(keyword)) {
-                tags.push(keyword);
-            }
-        }
-        return tags;
-    }
-    findOrCreateFolder(path) {
-        const parts = path.split('/').filter(Boolean);
-        let currentFolder = this.folders.get('root');
-        let currentPath = '';
-        for (const part of parts) {
-            currentPath += '/' + part;
-            let childFolder;
-            for (const childId of currentFolder.children) {
-                const child = this.folders.get(childId);
-                if (child?.name === part) {
-                    childFolder = child;
-                    break;
-                }
-            }
-            if (!childFolder) {
-                // Create folder
-                childFolder = {
-                    id: `folder_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-                    name: part,
-                    path: currentPath,
-                    parentId: currentFolder.id,
-                    expanded: false,
-                    children: [],
-                    assets: [],
-                    createdAt: Date.now(),
-                };
-                this.folders.set(childFolder.id, childFolder);
-                currentFolder.children.push(childFolder.id);
-            }
-            currentFolder = childFolder;
-        }
-        return currentFolder.id;
-    }
-    getFolderPath(folderId) {
-        const folder = this.folders.get(folderId);
-        return folder?.path ?? '/';
-    }
-    // ─── Asset Access ──────────────────────────────────────
-    getAsset(id) {
-        return this.assets.get(id);
-    }
-    getAssetBlob(id) {
-        return this.blobStore.get(id);
-    }
-    getAllAssets() {
-        return Array.from(this.assets.values());
-    }
-    getFilteredAssets(filter) {
-        return this.getAllAssets().filter((asset) => this.matchesFilter(asset, filter));
-    }
-    matchesFilter(asset, filter) {
-        // Type filter
-        if (filter.types && filter.types.length > 0) {
-            if (!filter.types.includes(asset.type)) {
-                return false;
-            }
-        }
-        // Tag filter
-        if (filter.tags && filter.tags.length > 0) {
-            if (filter.tagsMode === 'all') {
-                if (!filter.tags.every((tag) => asset.tags.includes(tag))) {
-                    return false;
-                }
-            }
-            else {
-                if (!filter.tags.some((tag) => asset.tags.includes(tag))) {
-                    return false;
-                }
-            }
-        }
-        // Search filter
-        if (filter.search) {
-            const searchLower = filter.search.toLowerCase();
-            const fields = filter.searchFields ?? ['name', 'tags', 'description', 'path'];
-            let found = false;
-            if (fields.includes('name') && asset.name.toLowerCase().includes(searchLower)) {
-                found = true;
-            }
-            if (fields.includes('path') && asset.path.toLowerCase().includes(searchLower)) {
-                found = true;
-            }
-            if (fields.includes('description') && asset.description.toLowerCase().includes(searchLower)) {
-                found = true;
-            }
-            if (fields.includes('tags') &&
-                asset.tags.some((t) => t.toLowerCase().includes(searchLower))) {
-                found = true;
-            }
-            if (!found) {
-                return false;
-            }
-        }
-        // Date range
-        if (filter.dateRange) {
-            if (asset.modifiedAt < filter.dateRange.from || asset.modifiedAt > filter.dateRange.to) {
-                return false;
-            }
-        }
-        // Size range
-        if (filter.sizeRange) {
-            if (asset.size < filter.sizeRange.min || asset.size > filter.sizeRange.max) {
-                return false;
-            }
-        }
-        // Favorites
-        if (filter.favorites && !asset.isFavorite) {
-            return false;
-        }
-        // Recent
-        if (filter.recent && !this.recentAssetIds.includes(asset.id)) {
-            return false;
-        }
-        // Unused
-        if (filter.unused && asset.usageCount > 0) {
-            return false;
-        }
-        // Folder
-        if (filter.folderId) {
-            if (filter.includeSubfolders) {
-                const folderPath = this.getFolderPath(filter.folderId);
-                if (!asset.path.startsWith(folderPath)) {
-                    return false;
-                }
-            }
-            else {
-                if (asset.folderId !== filter.folderId) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    }
-    // ─── Sorting ───────────────────────────────────────────
-    getSortedAssets(assets, sortMode) {
-        const mode = sortMode ?? this.config.sortMode;
-        return [...assets].sort((a, b) => {
-            switch (mode) {
-                case 'name-asc':
-                    return a.name.localeCompare(b.name);
-                case 'name-desc':
-                    return b.name.localeCompare(a.name);
-                case 'date-asc':
-                    return a.modifiedAt - b.modifiedAt;
-                case 'date-desc':
-                    return b.modifiedAt - a.modifiedAt;
-                case 'size-asc':
-                    return a.size - b.size;
-                case 'size-desc':
-                    return b.size - a.size;
-                case 'type':
-                    return a.type.localeCompare(b.type);
-                default:
-                    return 0;
-            }
-        });
-    }
-    // ─── Favorites ─────────────────────────────────────────
-    toggleFavorite(assetId) {
-        const asset = this.assets.get(assetId);
-        if (asset) {
-            asset.isFavorite = !asset.isFavorite;
-            this.onChange?.();
+        this.folders.set(childFolder.id, childFolder);
+        currentFolder.children.push(childFolder.id);
+      }
+      currentFolder = childFolder;
+    }
+    return currentFolder.id;
+  }
+  getFolderPath(folderId) {
+    const folder = this.folders.get(folderId);
+    return folder?.path ?? "/";
+  }
+  // ─── Asset Access ──────────────────────────────────────
+  getAsset(id) {
+    return this.assets.get(id);
+  }
+  getAssetBlob(id) {
+    return this.blobStore.get(id);
+  }
+  getAllAssets() {
+    return Array.from(this.assets.values());
+  }
+  getFilteredAssets(filter) {
+    return this.getAllAssets().filter((asset) => this.matchesFilter(asset, filter));
+  }
+  matchesFilter(asset, filter) {
+    if (filter.types && filter.types.length > 0) {
+      if (!filter.types.includes(asset.type)) {
+        return false;
+      }
+    }
+    if (filter.tags && filter.tags.length > 0) {
+      if (filter.tagsMode === "all") {
+        if (!filter.tags.every((tag) => asset.tags.includes(tag))) {
+          return false;
         }
-    }
-    getFavorites() {
-        return this.getAllAssets().filter((a) => a.isFavorite);
-    }
-    // ─── Recent ────────────────────────────────────────────
-    markAsUsed(assetId) {
-        const asset = this.assets.get(assetId);
-        if (asset) {
-            asset.usageCount++;
-            asset.lastUsedAt = Date.now();
-            // Update recent list
-            this.recentAssetIds = this.recentAssetIds.filter((id) => id !== assetId);
-            this.recentAssetIds.unshift(assetId);
-            if (this.recentAssetIds.length > this.config.recentCount) {
-                this.recentAssetIds.pop();
-            }
+      } else {
+        if (!filter.tags.some((tag) => asset.tags.includes(tag))) {
+          return false;
         }
-    }
-    getRecentAssets() {
-        return this.recentAssetIds
-            .map((id) => this.assets.get(id))
-            .filter((a) => a !== undefined);
-    }
-    // ─── Tags ──────────────────────────────────────────────
-    getAllTags() {
-        return Array.from(this.allTags).sort();
-    }
-    addTag(assetId, tag) {
-        const asset = this.assets.get(assetId);
-        if (asset && !asset.tags.includes(tag)) {
-            asset.tags.push(tag);
-            this.allTags.add(tag);
-            this.onChange?.();
+      }
+    }
+    if (filter.search) {
+      const searchLower = filter.search.toLowerCase();
+      const fields = filter.searchFields ?? ["name", "tags", "description", "path"];
+      let found = false;
+      if (fields.includes("name") && asset.name.toLowerCase().includes(searchLower)) {
+        found = true;
+      }
+      if (fields.includes("path") && asset.path.toLowerCase().includes(searchLower)) {
+        found = true;
+      }
+      if (fields.includes("description") && asset.description.toLowerCase().includes(searchLower)) {
+        found = true;
+      }
+      if (fields.includes("tags") && asset.tags.some((t) => t.toLowerCase().includes(searchLower))) {
+        found = true;
+      }
+      if (!found) {
+        return false;
+      }
+    }
+    if (filter.dateRange) {
+      if (asset.modifiedAt < filter.dateRange.from || asset.modifiedAt > filter.dateRange.to) {
+        return false;
+      }
+    }
+    if (filter.sizeRange) {
+      if (asset.size < filter.sizeRange.min || asset.size > filter.sizeRange.max) {
+        return false;
+      }
+    }
+    if (filter.favorites && !asset.isFavorite) {
+      return false;
+    }
+    if (filter.recent && !this.recentAssetIds.includes(asset.id)) {
+      return false;
+    }
+    if (filter.unused && asset.usageCount > 0) {
+      return false;
+    }
+    if (filter.folderId) {
+      if (filter.includeSubfolders) {
+        const folderPath = this.getFolderPath(filter.folderId);
+        if (!asset.path.startsWith(folderPath)) {
+          return false;
         }
-    }
-    removeTag(assetId, tag) {
-        const asset = this.assets.get(assetId);
-        if (asset) {
-            asset.tags = asset.tags.filter((t) => t !== tag);
-            this.onChange?.();
+      } else {
+        if (asset.folderId !== filter.folderId) {
+          return false;
         }
-    }
-    // ─── Folders ───────────────────────────────────────────
-    getFolder(id) {
-        return this.folders.get(id);
-    }
-    getRootFolder() {
-        return this.folders.get('root');
-    }
-    createFolder(name, parentId = 'root') {
-        const parent = this.folders.get(parentId);
-        const path = parent ? `${parent.path}/${name}`.replace('//', '/') : `/${name}`;
-        const folder = {
-            id: `folder_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-            name,
-            path,
-            parentId,
-            expanded: false,
-            children: [],
-            assets: [],
-            createdAt: Date.now(),
-        };
-        this.folders.set(folder.id, folder);
-        if (parent) {
-            parent.children.push(folder.id);
-        }
-        this.onChange?.();
-        return folder;
-    }
-    setCurrentFolder(folderId) {
-        this.currentFolderId = folderId;
+      }
+    }
+    return true;
+  }
+  // ─── Sorting ───────────────────────────────────────────
+  getSortedAssets(assets, sortMode) {
+    const mode = sortMode ?? this.config.sortMode;
+    return [...assets].sort((a, b) => {
+      switch (mode) {
+        case "name-asc":
+          return a.name.localeCompare(b.name);
+        case "name-desc":
+          return b.name.localeCompare(a.name);
+        case "date-asc":
+          return a.modifiedAt - b.modifiedAt;
+        case "date-desc":
+          return b.modifiedAt - a.modifiedAt;
+        case "size-asc":
+          return a.size - b.size;
+        case "size-desc":
+          return b.size - a.size;
+        case "type":
+          return a.type.localeCompare(b.type);
+        default:
+          return 0;
+      }
+    });
+  }
+  // ─── Favorites ─────────────────────────────────────────
+  toggleFavorite(assetId) {
+    const asset = this.assets.get(assetId);
+    if (asset) {
+      asset.isFavorite = !asset.isFavorite;
+      this.onChange?.();
+    }
+  }
+  getFavorites() {
+    return this.getAllAssets().filter((a) => a.isFavorite);
+  }
+  // ─── Recent ────────────────────────────────────────────
+  markAsUsed(assetId) {
+    const asset = this.assets.get(assetId);
+    if (asset) {
+      asset.usageCount++;
+      asset.lastUsedAt = Date.now();
+      this.recentAssetIds = this.recentAssetIds.filter((id) => id !== assetId);
+      this.recentAssetIds.unshift(assetId);
+      if (this.recentAssetIds.length > this.config.recentCount) {
+        this.recentAssetIds.pop();
+      }
+    }
+  }
+  getRecentAssets() {
+    return this.recentAssetIds.map((id) => this.assets.get(id)).filter((a) => a !== void 0);
+  }
+  // ─── Tags ──────────────────────────────────────────────
+  getAllTags() {
+    return Array.from(this.allTags).sort();
+  }
+  addTag(assetId, tag) {
+    const asset = this.assets.get(assetId);
+    if (asset && !asset.tags.includes(tag)) {
+      asset.tags.push(tag);
+      this.allTags.add(tag);
+      this.onChange?.();
+    }
+  }
+  removeTag(assetId, tag) {
+    const asset = this.assets.get(assetId);
+    if (asset) {
+      asset.tags = asset.tags.filter((t) => t !== tag);
+      this.onChange?.();
+    }
+  }
+  // ─── Folders ───────────────────────────────────────────
+  getFolder(id) {
+    return this.folders.get(id);
+  }
+  getRootFolder() {
+    return this.folders.get("root");
+  }
+  createFolder(name, parentId = "root") {
+    const parent = this.folders.get(parentId);
+    const path = parent ? `${parent.path}/${name}`.replace("//", "/") : `/${name}`;
+    const folder = {
+      id: `folder_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      name,
+      path,
+      parentId,
+      expanded: false,
+      children: [],
+      assets: [],
+      createdAt: Date.now()
+    };
+    this.folders.set(folder.id, folder);
+    if (parent) {
+      parent.children.push(folder.id);
+    }
+    this.onChange?.();
+    return folder;
+  }
+  setCurrentFolder(folderId) {
+    this.currentFolderId = folderId;
+    this.onChange?.();
+  }
+  getCurrentFolder() {
+    return this.folders.get(this.currentFolderId) ?? this.getRootFolder();
+  }
+  // ─── Collections ───────────────────────────────────────
+  getCollection(id) {
+    return this.collections.get(id);
+  }
+  getAllCollections() {
+    return Array.from(this.collections.values());
+  }
+  createCollection(name, description = "") {
+    const collection = {
+      id: `collection_${Date.now()}`,
+      name,
+      description,
+      icon: "folder",
+      color: "#cdd6f4",
+      assetIds: [],
+      createdAt: Date.now(),
+      isSmartCollection: false
+    };
+    this.collections.set(collection.id, collection);
+    this.onChange?.();
+    return collection;
+  }
+  addToCollection(collectionId, assetId) {
+    const collection = this.collections.get(collectionId);
+    if (collection && !collection.isSmartCollection) {
+      if (!collection.assetIds.includes(assetId)) {
+        collection.assetIds.push(assetId);
         this.onChange?.();
-    }
-    getCurrentFolder() {
-        return this.folders.get(this.currentFolderId) ?? this.getRootFolder();
-    }
-    // ─── Collections ───────────────────────────────────────
-    getCollection(id) {
-        return this.collections.get(id);
-    }
-    getAllCollections() {
-        return Array.from(this.collections.values());
-    }
-    createCollection(name, description = '') {
-        const collection = {
-            id: `collection_${Date.now()}`,
-            name,
-            description,
-            icon: 'folder',
-            color: '#cdd6f4',
-            assetIds: [],
-            createdAt: Date.now(),
-            isSmartCollection: false,
-        };
+      }
+    }
+  }
+  removeFromCollection(collectionId, assetId) {
+    const collection = this.collections.get(collectionId);
+    if (collection && !collection.isSmartCollection) {
+      collection.assetIds = collection.assetIds.filter((id) => id !== assetId);
+      this.onChange?.();
+    }
+  }
+  // ─── Selection ─────────────────────────────────────────
+  select(assetId, addToSelection = false) {
+    if (!addToSelection) {
+      this.selectedIds.clear();
+    }
+    this.selectedIds.add(assetId);
+    this.onSelectionChange?.(Array.from(this.selectedIds));
+  }
+  deselect(assetId) {
+    this.selectedIds.delete(assetId);
+    this.onSelectionChange?.(Array.from(this.selectedIds));
+  }
+  clearSelection() {
+    this.selectedIds.clear();
+    this.onSelectionChange?.(Array.from(this.selectedIds));
+  }
+  getSelectedAssets() {
+    return Array.from(this.selectedIds).map((id) => this.assets.get(id)).filter((a) => a !== void 0);
+  }
+  // ─── Asset Modification ────────────────────────────────
+  updateAsset(assetId, updates) {
+    const asset = this.assets.get(assetId);
+    if (asset) {
+      Object.assign(asset, updates);
+      asset.modifiedAt = Date.now();
+      this.onChange?.();
+    }
+  }
+  deleteAsset(assetId) {
+    const asset = this.assets.get(assetId);
+    if (!asset) {
+      return;
+    }
+    const folder = this.folders.get(asset.folderId);
+    if (folder) {
+      folder.assets = folder.assets.filter((id) => id !== assetId);
+    }
+    for (const collection of this.collections.values()) {
+      collection.assetIds = collection.assetIds.filter((id) => id !== assetId);
+    }
+    this.recentAssetIds = this.recentAssetIds.filter((id) => id !== assetId);
+    this.selectedIds.delete(assetId);
+    this.assets.delete(assetId);
+    this.blobStore.delete(assetId);
+    this.onChange?.();
+  }
+  // ─── Export/Import ─────────────────────────────────────
+  exportAssetMetadata() {
+    const data = {
+      version: 1,
+      assets: Array.from(this.assets.values()).map((a) => ({
+        ...a,
+        thumbnail: void 0
+        // Don't export thumbnails
+      })),
+      folders: Array.from(this.folders.values()),
+      collections: Array.from(this.collections.values()),
+      tags: Array.from(this.allTags)
+    };
+    return JSON.stringify(data, null, 2);
+  }
+  importAssetMetadata(json) {
+    try {
+      const data = JSON.parse(json);
+      if (data.version !== 1) {
+        throw new Error("Unsupported version");
+      }
+      for (const asset of data.assets) {
+        this.assets.set(asset.id, asset);
+      }
+      for (const folder of data.folders) {
+        this.folders.set(folder.id, folder);
+      }
+      for (const collection of data.collections) {
         this.collections.set(collection.id, collection);
-        this.onChange?.();
-        return collection;
-    }
-    addToCollection(collectionId, assetId) {
-        const collection = this.collections.get(collectionId);
-        if (collection && !collection.isSmartCollection) {
-            if (!collection.assetIds.includes(assetId)) {
-                collection.assetIds.push(assetId);
-                this.onChange?.();
-            }
-        }
-    }
-    removeFromCollection(collectionId, assetId) {
-        const collection = this.collections.get(collectionId);
-        if (collection && !collection.isSmartCollection) {
-            collection.assetIds = collection.assetIds.filter((id) => id !== assetId);
-            this.onChange?.();
-        }
-    }
-    // ─── Selection ─────────────────────────────────────────
-    select(assetId, addToSelection = false) {
-        if (!addToSelection) {
-            this.selectedIds.clear();
-        }
-        this.selectedIds.add(assetId);
-        this.onSelectionChange?.(Array.from(this.selectedIds));
-    }
-    deselect(assetId) {
-        this.selectedIds.delete(assetId);
-        this.onSelectionChange?.(Array.from(this.selectedIds));
-    }
-    clearSelection() {
-        this.selectedIds.clear();
-        this.onSelectionChange?.(Array.from(this.selectedIds));
-    }
-    getSelectedAssets() {
-        return Array.from(this.selectedIds)
-            .map((id) => this.assets.get(id))
-            .filter((a) => a !== undefined);
-    }
-    // ─── Asset Modification ────────────────────────────────
-    updateAsset(assetId, updates) {
-        const asset = this.assets.get(assetId);
-        if (asset) {
-            Object.assign(asset, updates);
-            asset.modifiedAt = Date.now();
-            this.onChange?.();
-        }
-    }
-    deleteAsset(assetId) {
-        const asset = this.assets.get(assetId);
-        if (!asset) {
-            return;
-        }
-        // Remove from folder
-        const folder = this.folders.get(asset.folderId);
-        if (folder) {
-            folder.assets = folder.assets.filter((id) => id !== assetId);
-        }
-        // Remove from collections
-        for (const collection of this.collections.values()) {
-            collection.assetIds = collection.assetIds.filter((id) => id !== assetId);
-        }
-        // Remove from recent
-        this.recentAssetIds = this.recentAssetIds.filter((id) => id !== assetId);
-        // Remove from selection
-        this.selectedIds.delete(assetId);
-        // Remove asset and blob
-        this.assets.delete(assetId);
-        this.blobStore.delete(assetId);
-        this.onChange?.();
-    }
-    // ─── Export/Import ─────────────────────────────────────
-    exportAssetMetadata() {
-        const data = {
-            version: 1,
-            assets: Array.from(this.assets.values()).map((a) => ({
-                ...a,
-                thumbnail: undefined, // Don't export thumbnails
-            })),
-            folders: Array.from(this.folders.values()),
-            collections: Array.from(this.collections.values()),
-            tags: Array.from(this.allTags),
-        };
-        return JSON.stringify(data, null, 2);
-    }
-    importAssetMetadata(json) {
-        try {
-            const data = JSON.parse(json);
-            if (data.version !== 1) {
-                throw new Error('Unsupported version');
-            }
-            // Restore assets (without blobs/thumbnails)
-            for (const asset of data.assets) {
-                this.assets.set(asset.id, asset);
-            }
-            // Restore folders
-            for (const folder of data.folders) {
-                this.folders.set(folder.id, folder);
-            }
-            // Restore collections
-            for (const collection of data.collections) {
-                this.collections.set(collection.id, collection);
-            }
-            // Restore tags
-            this.allTags = new Set(data.tags);
-            this.onChange?.();
-        }
-        catch (error) {
-            console.error('Failed to import asset metadata:', error);
-        }
-    }
-    // ─── Callbacks ─────────────────────────────────────────
-    setOnChange(callback) {
-        this.onChange = callback;
-    }
-    setOnSelectionChange(callback) {
-        this.onSelectionChange = callback;
-    }
-    setOnAssetOpen(callback) {
-        this.onAssetOpen = callback;
-    }
-    openAsset(assetId) {
-        const asset = this.assets.get(assetId);
-        if (asset) {
-            this.markAsUsed(assetId);
-            this.onAssetOpen?.(asset);
-        }
-    }
-    // ─── Utilities ─────────────────────────────────────────
-    formatFileSize(bytes) {
-        if (bytes < 1024) {
-            return `${bytes} B`;
-        }
-        if (bytes < 1024 * 1024) {
-            return `${(bytes / 1024).toFixed(1)} KB`;
-        }
-        if (bytes < 1024 * 1024 * 1024) {
-            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-        }
-        return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-    }
-    /** NiceIcon name for an asset type. */
-    getAssetTypeIcon(type) {
-        const icons = {
-            image: 'image',
-            sprite: 'palette',
-            spritesheet: 'grid',
-            tilemap: 'map-pin',
-            audio: 'volume',
-            music: 'music',
-            sfx: 'zap',
-            model: 'box',
-            material: 'palette',
-            shader: 'wand',
-            script: 'code',
-            scene: 'video',
-            prefab: 'box',
-            animation: 'video',
-            font: 'type',
-            particle: 'star',
-            terrain: 'mountain',
-            video: 'video',
-            json: 'file',
-            other: 'file',
-        };
-        return icons[type] ?? 'file';
-    }
+      }
+      this.allTags = new Set(data.tags);
+      this.onChange?.();
+    } catch (error) {
+      console.error("Failed to import asset metadata:", error);
+    }
+  }
+  // ─── Callbacks ─────────────────────────────────────────
+  setOnChange(callback) {
+    this.onChange = callback;
+  }
+  setOnSelectionChange(callback) {
+    this.onSelectionChange = callback;
+  }
+  setOnAssetOpen(callback) {
+    this.onAssetOpen = callback;
+  }
+  openAsset(assetId) {
+    const asset = this.assets.get(assetId);
+    if (asset) {
+      this.markAsUsed(assetId);
+      this.onAssetOpen?.(asset);
+    }
+  }
+  // ─── Utilities ─────────────────────────────────────────
+  formatFileSize(bytes) {
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    if (bytes < 1024 * 1024 * 1024) {
+      return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  }
+  /** NiceIcon name for an asset type. */
+  getAssetTypeIcon(type) {
+    const icons = {
+      image: "image",
+      sprite: "palette",
+      spritesheet: "grid",
+      tilemap: "map-pin",
+      audio: "volume",
+      music: "music",
+      sfx: "zap",
+      model: "box",
+      material: "palette",
+      shader: "wand",
+      script: "code",
+      scene: "video",
+      prefab: "box",
+      animation: "video",
+      font: "type",
+      particle: "star",
+      terrain: "mountain",
+      video: "video",
+      json: "file",
+      other: "file"
+    };
+    return icons[type] ?? "file";
+  }
 }
-// ============================================================
-// Factory Functions
-// ============================================================
 function createAssetBrowser(config) {
-    return new AssetBrowser(config);
+  return new AssetBrowser(config);
 }
 function createThumbnailGenerator() {
-    return new ThumbnailGenerator();
+  return new ThumbnailGenerator();
 }
-
-export { AssetBrowser, DEFAULT_BROWSER_CONFIG, DEFAULT_IMPORT_OPTIONS, ThumbnailGenerator, createAssetBrowser, createThumbnailGenerator };
+export {
+  AssetBrowser,
+  DEFAULT_BROWSER_CONFIG,
+  DEFAULT_IMPORT_OPTIONS,
+  ThumbnailGenerator,
+  createAssetBrowser,
+  createThumbnailGenerator
+};