@nice2dev/game-engine 1.0.5 → 1.0.10

package/dist/cjs/editor/AssetBrowser.js

@@ -0,0 +1,1191 @@
+'use strict';
+
+/**
+ * @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,
+};
+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,
+};
+// ============================================================
+// 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;
+        });
+    }
+    async generateAudioThumbnail(file, size) {
+        try {
+            // Initialize audio context if needed
+            if (!this.audioContext) {
+                this.audioContext = new AudioContext();
+            }
+            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);
+            }
+            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;
+        });
+    }
+    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')}`;
+    }
+}
+// ============================================================
+// 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 };
+        }
+        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: '⭐',
+            color: '#f9e2af',
+            assetIds: [],
+            createdAt: Date.now(),
+            isSmartCollection: true,
+            smartFilter: { favorites: true },
+        });
+        this.collections.set('recent', {
+            id: 'recent',
+            name: 'Recent',
+            description: 'Recently used assets',
+            icon: '🕐',
+            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: '📦',
+            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 },
+        };
+        // 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?.();
+        }
+    }
+    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();
+            }
+        }
+    }
+    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?.();
+        }
+    }
+    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: '📁',
+            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?.();
+            }
+        }
+    }
+    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`;
+    }
+    getAssetTypeIcon(type) {
+        const icons = {
+            image: '🖼️',
+            sprite: '🎨',
+            spritesheet: '📊',
+            tilemap: '🗺️',
+            audio: '🔊',
+            music: '🎵',
+            sfx: '💥',
+            model: '🎲',
+            material: '🎨',
+            shader: '✨',
+            script: '📜',
+            scene: '🎬',
+            prefab: '📦',
+            animation: '🎞️',
+            font: '🔤',
+            particle: '💫',
+            terrain: '🏔️',
+            video: '🎥',
+            json: '📋',
+            other: '📄',
+        };
+        return icons[type] ?? '📄';
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createAssetBrowser(config) {
+    return new AssetBrowser(config);
+}
+function createThumbnailGenerator() {
+    return new ThumbnailGenerator();
+}
+
+exports.AssetBrowser = AssetBrowser;
+exports.DEFAULT_BROWSER_CONFIG = DEFAULT_BROWSER_CONFIG;
+exports.DEFAULT_IMPORT_OPTIONS = DEFAULT_IMPORT_OPTIONS;
+exports.ThumbnailGenerator = ThumbnailGenerator;
+exports.createAssetBrowser = createAssetBrowser;
+exports.createThumbnailGenerator = createThumbnailGenerator;
+//# sourceMappingURL=AssetBrowser.js.map