@jhits/plugin-images 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,7 @@
   "dependencies": {
     "lucide-react": "^0.564.0",
     "mongodb": "^7.1.0",
-    "@jhits/plugin-core": "0.0.7"
+    "@jhits/plugin-core": "0.0.9"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -48,6 +48,7 @@
     "typescript": "^5.9.3"
   },
   "files": [
+    "src",
     "dist",
     "package.json"
   ],

package/src/api/fallback/route.ts

@@ -0,0 +1,69 @@
+/**
+ * Fallback Image API Route
+ * Serves the default "image not found" fallback image
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile } from 'fs/promises';
+import path from 'path';
+
+export async function GET(request: NextRequest) {
+    try {
+        // Try multiple possible paths for the fallback image
+        const possiblePaths = [
+            // Path in workspace root (monorepo development)
+            path.join(process.cwd(), 'packages', 'plugin-images', 'src', 'assets', 'noimagefound.jpg'),
+            // Path in node_modules (production)
+            path.join(process.cwd(), 'node_modules', '@jhits', 'plugin-images', 'src', 'assets', 'noimagefound.jpg'),
+            // Fallback to app's public folder if plugin image not found
+            path.join(process.cwd(), 'public', 'noimagefound.jpg'),
+        ];
+
+        let filePath: string | null = null;
+        for (const testPath of possiblePaths) {
+            try {
+                await readFile(testPath);
+                filePath = testPath;
+                break;
+            } catch {
+                // Continue to next path
+            }
+        }
+
+        if (!filePath) {
+            // If no image found, return a simple placeholder SVG
+            const svgPlaceholder = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
+                <rect width="400" height="300" fill="#f3f4f6"/>
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="16" fill="#9ca3af">Image not found</text>
+            </svg>`;
+            return new NextResponse(svgPlaceholder, {
+                headers: {
+                    'Content-Type': 'image/svg+xml',
+                    'Cache-Control': 'public, max-age=3600',
+                },
+            });
+        }
+
+        const fileBuffer = await readFile(filePath);
+
+        return new NextResponse(fileBuffer, {
+            headers: {
+                'Content-Type': 'image/jpeg',
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
+    } catch (error: any) {
+        console.error('[FallbackImage] Error serving fallback image:', error);
+        // Return SVG placeholder on error
+        const svgPlaceholder = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
+            <rect width="400" height="300" fill="#f3f4f6"/>
+            <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="16" fill="#9ca3af">Image not found</text>
+        </svg>`;
+        return new NextResponse(svgPlaceholder, {
+            headers: {
+                'Content-Type': 'image/svg+xml',
+                'Cache-Control': 'public, max-age=3600',
+            },
+        });
+    }
+}

package/src/api/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Plugin Images API Exports
+ */
+
+export { handleImagesApi } from './router';
+export { GET as GET_LIST } from './list';
+export { POST as POST_UPLOAD } from './upload';
+export { GET as GET_RESOLVE, POST as POST_RESOLVE } from './resolve/route';
+export { GET as GET_UPLOADS, DELETE as DELETE_UPLOADS } from './uploads/[filename]/route';
+

package/src/api/list/index.ts

@@ -0,0 +1,96 @@
+/**
+ * Image List API Handler
+ * GET /api/plugin-images/list - Returns paginated list of uploaded images
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readdir, stat } from 'fs/promises';
+import path from 'path';
+
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const page = parseInt(searchParams.get('page') || '1');
+        const limit = parseInt(searchParams.get('limit') || '20');
+        const search = searchParams.get('search') || '';
+
+        // Read uploads directory
+        let files: string[] = [];
+        try {
+            files = await readdir(uploadsDir);
+        } catch (error) {
+            // Directory doesn't exist yet
+            return NextResponse.json({
+                images: [],
+                total: 0,
+                page: 1,
+                limit,
+            });
+        }
+
+        // Filter image files and get metadata
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
+        const imageFiles = files.filter(file => {
+            const ext = path.extname(file).toLowerCase();
+            return imageExtensions.includes(ext);
+        });
+
+        // Apply search filter if provided
+        const filteredFiles = search
+            ? imageFiles.filter(file => file.toLowerCase().includes(search.toLowerCase()))
+            : imageFiles;
+
+        // Sort by modification time (newest first)
+        const filesWithStats = await Promise.all(
+            filteredFiles.map(async (filename) => {
+                const filePath = path.join(uploadsDir, filename);
+                const stats = await stat(filePath);
+                return {
+                    filename,
+                    mtime: stats.mtime,
+                    size: stats.size,
+                };
+            })
+        );
+
+        filesWithStats.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
+
+        // Paginate
+        const start = (page - 1) * limit;
+        const end = start + limit;
+        const paginatedFiles = filesWithStats.slice(start, end);
+
+        // Build image metadata
+        const images = paginatedFiles.map(({ filename, mtime, size }) => {
+            const ext = path.extname(filename).toLowerCase();
+            const mimeType = ext === '.png' ? 'image/png' : 
+                           ext === '.webp' ? 'image/webp' :
+                           ext === '.gif' ? 'image/gif' : 'image/jpeg';
+
+            return {
+                id: filename,
+                filename,
+                url: `/api/uploads/${filename}`,
+                size,
+                mimeType,
+                uploadedAt: mtime.toISOString(),
+            };
+        });
+
+        return NextResponse.json({
+            images,
+            total: filteredFiles.length,
+            page,
+            limit,
+        });
+    } catch (error) {
+        console.error('List images error:', error);
+        return NextResponse.json(
+            { error: 'Failed to list images' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api/resolve/route.ts

@@ -0,0 +1,241 @@
+/**
+ * Image ID Resolution API Route
+ * Resolves semantic image IDs to actual filenames
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import path from 'path';
+
+const mappingsPath = path.join(process.cwd(), 'data', 'image-mappings.json');
+
+// Simple mutex to prevent concurrent writes
+let writeLock = false;
+const writeQueue: Array<() => void> = [];
+
+async function acquireLock(): Promise<() => void> {
+    return new Promise((resolve) => {
+        if (!writeLock) {
+            writeLock = true;
+            resolve(() => {
+                writeLock = false;
+                const next = writeQueue.shift();
+                if (next) next();
+            });
+        } else {
+            writeQueue.push(() => {
+                writeLock = true;
+                resolve(() => {
+                    writeLock = false;
+                    const next = writeQueue.shift();
+                    if (next) next();
+                });
+            });
+        }
+    });
+}
+
+async function readMappingsSafely(): Promise<Record<string, any>> {
+    try {
+        const content = await readFile(mappingsPath, 'utf-8');
+        // Try to parse, if it fails, try to recover
+        try {
+            return JSON.parse(content);
+        } catch (parseError) {
+            console.error('JSON parse error, attempting recovery:', parseError);
+            // Try to extract valid JSON by finding the last complete object
+            const lines = content.split('\n');
+            let validContent = '';
+            let braceCount = 0;
+            let inString = false;
+            let escapeNext = false;
+            
+            for (const line of lines) {
+                for (let i = 0; i < line.length; i++) {
+                    const char = line[i];
+                    if (escapeNext) {
+                        escapeNext = false;
+                        validContent += char;
+                        continue;
+                    }
+                    if (char === '\\') {
+                        escapeNext = true;
+                        validContent += char;
+                        continue;
+                    }
+                    if (char === '"') {
+                        inString = !inString;
+                        validContent += char;
+                        continue;
+                    }
+                    if (!inString) {
+                        if (char === '{') braceCount++;
+                        if (char === '}') braceCount--;
+                    }
+                    validContent += char;
+                }
+                validContent += '\n';
+                // If we've closed all braces, we might have valid JSON
+                if (braceCount === 0 && validContent.trim().endsWith('}')) {
+                    try {
+                        return JSON.parse(validContent.trim());
+                    } catch {
+                        // Continue trying
+                    }
+                }
+            }
+            // If recovery failed, return empty object
+            console.error('Failed to recover JSON, using empty mappings');
+            return {};
+        }
+    } catch (error) {
+        console.error('Failed to read mappings file:', error);
+        return {};
+    }
+}
+
+async function ensureMappingsFile() {
+    try {
+        const dir = path.dirname(mappingsPath);
+        await mkdir(dir, { recursive: true });
+        
+        // Check if file exists, if not create empty mappings
+        try {
+            await readFile(mappingsPath);
+        } catch {
+            await writeFile(mappingsPath, JSON.stringify({}, null, 2));
+        }
+    } catch (error) {
+        // Ignore errors
+    }
+}
+
+/**
+ * GET /api/plugin-images/resolve?id=home-about-card
+ * Resolves a semantic image ID to the actual filename
+ */
+export async function GET(request: NextRequest) {
+    try {
+        await ensureMappingsFile();
+        
+        const { searchParams } = new URL(request.url);
+        const id = searchParams.get('id');
+        
+        if (!id) {
+            return NextResponse.json(
+                { error: 'Missing id parameter' },
+                { status: 400 }
+            );
+        }
+
+        const mappings = await readMappingsSafely();
+        const mapping = mappings[id];
+
+        if (!mapping) {
+            return NextResponse.json(
+                { error: 'Image ID not found', id },
+                { status: 404 }
+            );
+        }
+
+        // Support both old format (just filename string) and new format (object)
+        const filename = typeof mapping === 'string' ? mapping : mapping.filename;
+        const brightness = typeof mapping === 'object' ? (mapping.brightness ?? 100) : 100;
+        const blur = typeof mapping === 'object' ? (mapping.blur ?? 0) : 0;
+        // Ensure scale is within valid range (0.1 to 5.0), default to 1.0 if invalid
+        const rawScale = typeof mapping === 'object' ? (mapping.scale ?? 1.0) : 1.0;
+        const scale = rawScale > 0 && rawScale <= 5.0 ? Math.max(0.1, rawScale) : 1.0;
+        const positionX = typeof mapping === 'object' ? (mapping.positionX ?? 0) : 0;
+        const positionY = typeof mapping === 'object' ? (mapping.positionY ?? 0) : 0;
+
+        return NextResponse.json({
+            id,
+            filename,
+            brightness,
+            blur,
+            scale,
+            positionX,
+            positionY,
+            url: `/api/uploads/${encodeURIComponent(filename)}`,
+        });
+    } catch (error) {
+        console.error('Resolve error:', error);
+        return NextResponse.json(
+            { error: 'Failed to resolve image ID' },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-images/resolve
+ * Sets or updates the mapping between an ID and filename
+ * Body: { id: string, filename: string }
+ */
+export async function POST(request: NextRequest) {
+    try {
+        await ensureMappingsFile();
+        
+        const body = await request.json();
+        const { id, filename, brightness, blur, scale, positionX, positionY } = body;
+
+        if (!id || !filename) {
+            return NextResponse.json(
+                { error: 'Missing id or filename' },
+                { status: 400 }
+            );
+        }
+
+        // Acquire write lock to prevent concurrent writes
+        const releaseLock = await acquireLock();
+        
+        try {
+            const mappings = await readMappingsSafely();
+            
+            // Store as object with optional brightness, blur, scale, and position
+            // Merge with existing values to avoid overwriting fields that aren't provided
+            // Ensure scale is within valid range (0.1 to 5.0)
+            const safeScale = scale !== undefined ? Math.max(0.1, Math.min(5.0, scale)) : undefined;
+            const existing = mappings[id] || {};
+            mappings[id] = {
+                ...existing, // Preserve existing values
+                filename, // Always update filename
+                ...(brightness !== undefined && { brightness }),
+                ...(blur !== undefined && { blur }),
+                ...(safeScale !== undefined && { scale: safeScale }),
+                ...(positionX !== undefined && { positionX }),
+                ...(positionY !== undefined && { positionY }),
+            };
+            
+            // Write atomically using a temporary file
+            const tempPath = mappingsPath + '.tmp';
+            await writeFile(tempPath, JSON.stringify(mappings, null, 2), 'utf-8');
+            
+            // Atomic rename (this is atomic on most filesystems)
+            const { rename } = await import('fs/promises');
+            await rename(tempPath, mappingsPath);
+        } finally {
+            releaseLock();
+        }
+
+        console.log('SAVING TO DB:', { id, scale, brightness, blur, positionX, positionY });
+
+        return NextResponse.json({
+            success: true,
+            id,
+            filename,
+            brightness: brightness ?? 100,
+            blur: blur ?? 0,
+            scale: scale ?? 1.0,
+            positionX: positionX ?? 0,
+            positionY: positionY ?? 0,
+        });
+    } catch (error) {
+        console.error('Set mapping error:', error);
+        return NextResponse.json(
+            { error: 'Failed to set image mapping' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api/router.ts

@@ -0,0 +1,85 @@
+'use server';
+
+/**
+ * Plugin Images API Router
+ * Centralized API handler for all images plugin routes
+ * 
+ * This router handles requests to /api/plugin-images/*
+ * and routes them to the appropriate handler
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Handle images API requests
+ * Routes requests to appropriate handlers based on path
+ */
+export async function handleImagesApi(
+    req: NextRequest,
+    path: string[]
+): Promise<NextResponse> {
+    const method = req.method;
+    const route = path[0] || '';
+
+    try {
+        // Route: /api/plugin-images/list (list images)
+        if (!route || route === 'list') {
+            if (method === 'GET') {
+                const listModule = await import('./list');
+                return await listModule.GET(req);
+            }
+        }
+
+        // Route: /api/plugin-images/upload (upload image)
+        else if (route === 'upload') {
+            if (method === 'POST') {
+                const uploadModule = await import('./upload');
+                return await uploadModule.POST(req);
+            }
+        }
+
+        // Route: /api/plugin-images/resolve (resolve image ID)
+        else if (route === 'resolve') {
+            if (method === 'GET' || method === 'POST') {
+                const resolveModule = await import('./resolve/route');
+                if (method === 'GET') {
+                    return await resolveModule.GET(req);
+                }
+                return await resolveModule.POST(req);
+            }
+        }
+
+        // Route: /api/plugin-images/uploads/[filename] (serve/delete image)
+        else if (route === 'uploads' && path[1]) {
+            const filename = path[1];
+            if (method === 'GET' || method === 'DELETE') {
+                const uploadsModule = await import('./uploads/[filename]/route');
+                if (method === 'GET') {
+                    return await uploadsModule.GET(req, { params: Promise.resolve({ filename }) });
+                }
+                return await uploadsModule.DELETE(req, { params: Promise.resolve({ filename }) });
+            }
+        }
+
+        // Route: /api/plugin-images/fallback (serve fallback image)
+        else if (route === 'fallback') {
+            if (method === 'GET') {
+                const fallbackModule = await import('./fallback/route');
+                return await fallbackModule.GET(req);
+            }
+        }
+
+        // Method not allowed
+        return NextResponse.json(
+            { error: `Method ${method} not allowed for route: ${route || '/'}` },
+            { status: 405 }
+        );
+    } catch (error: any) {
+        console.error('[ImagesApiRouter] Error:', error);
+        return NextResponse.json(
+            { error: error.message || 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api/upload/index.ts

@@ -0,0 +1,88 @@
+/**
+ * Image Upload API Handler
+ * POST /api/plugin-images/upload - Handles image file uploads
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, mkdir } from 'fs/promises';
+import path from 'path';
+import { randomBytes } from 'crypto';
+
+// Ensure uploads directory exists
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+async function ensureUploadsDir() {
+    try {
+        await mkdir(uploadsDir, { recursive: true });
+    } catch (error) {
+        // Directory might already exist
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        await ensureUploadsDir();
+
+        const formData = await request.formData();
+        const file = formData.get('file') as File;
+
+        if (!file) {
+            return NextResponse.json(
+                { success: false, error: 'No file provided' },
+                { status: 400 }
+            );
+        }
+
+        // Validate file type
+        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
+        if (!allowedTypes.includes(file.type)) {
+            return NextResponse.json(
+                { success: false, error: 'Invalid file type. Only images are allowed.' },
+                { status: 400 }
+            );
+        }
+
+        // Validate file size (max 10MB)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            return NextResponse.json(
+                { success: false, error: 'File size exceeds 10MB limit' },
+                { status: 400 }
+            );
+        }
+
+        // Generate unique filename
+        const ext = path.extname(file.name);
+        const uniqueId = randomBytes(16).toString('hex');
+        const timestamp = Date.now();
+        const uniqueFilename = `${timestamp}-${uniqueId}${ext}`;
+        const filePath = path.join(uploadsDir, uniqueFilename);
+
+        // Save file
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+        await writeFile(filePath, buffer);
+
+        // Get image dimensions (basic - could use sharp for better handling)
+        const imageMetadata = {
+            id: uniqueFilename,
+            filename: file.name,
+            url: `/api/uploads/${uniqueFilename}`,
+            size: file.size,
+            mimeType: file.type,
+            uploadedAt: new Date().toISOString(),
+        };
+
+        return NextResponse.json({
+            success: true,
+            image: imageMetadata,
+        });
+    } catch (error) {
+        console.error('Upload error:', error);
+        return NextResponse.json(
+            { success: false, error: 'Failed to upload image' },
+            { status: 500 }
+        );
+    }
+}
+