@jhits/plugin-images 0.0.1

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jhits/plugin-images",
+  "version": "0.0.1",
+  "description": "Image management and storage plugin for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "mongodb": "^7.0.0",
+    "lucide-react": "^0.562.0"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20.19.27",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "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,122 @@
+/**
+ * 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');
+
+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 = JSON.parse(await readFile(mappingsPath, 'utf-8'));
+        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;
+
+        return NextResponse.json({
+            id,
+            filename,
+            brightness,
+            blur,
+            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 } = body;
+
+        if (!id || !filename) {
+            return NextResponse.json(
+                { error: 'Missing id or filename' },
+                { status: 400 }
+            );
+        }
+
+        const mappings = JSON.parse(await readFile(mappingsPath, 'utf-8'));
+        
+        // Store as object with optional brightness and blur
+        mappings[id] = {
+            filename,
+            ...(brightness !== undefined && { brightness }),
+            ...(blur !== undefined && { blur }),
+        };
+        
+        await writeFile(mappingsPath, JSON.stringify(mappings, null, 2));
+
+        return NextResponse.json({
+            success: true,
+            id,
+            filename,
+            brightness: brightness ?? 100,
+            blur: blur ?? 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 }
+        );
+    }
+}
+

package/src/api/uploads/[filename]/route.ts

@@ -0,0 +1,93 @@
+/**
+ * Image Uploads API Route
+ * Serves uploaded images for the plugin-images system
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, unlink } from 'fs/promises';
+import path from 'path';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    const { filename } = await params;
+
+    // Security: Prevent directory traversal (only allow the filename)
+    const sanitizedFilename = path.basename(filename);
+    const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+    
+    // If filename doesn't have an extension, try common image extensions
+    let filePath = path.join(uploadsDir, sanitizedFilename);
+    const hasExtension = path.extname(sanitizedFilename).length > 0;
+    
+    if (!hasExtension) {
+        // Try common image extensions
+        const extensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg'];
+        let found = false;
+        for (const ext of extensions) {
+            const testPath = filePath + ext;
+            try {
+                await readFile(testPath);
+                filePath = testPath;
+                found = true;
+                break;
+            } catch {
+                // Continue to next extension
+            }
+        }
+        if (!found) {
+            // If no extension found, try the original filename
+            filePath = path.join(uploadsDir, sanitizedFilename);
+        }
+    }
+
+    try {
+        const fileBuffer = await readFile(filePath);
+
+        // Determine content type based on extension
+        const ext = path.extname(filePath).toLowerCase();
+        let contentType = 'application/octet-stream';
+        if (ext === '.png') contentType = 'image/png';
+        else if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
+        else if (ext === '.gif') contentType = 'image/gif';
+        else if (ext === '.webp') contentType = 'image/webp';
+        else if (ext === '.svg') contentType = 'image/svg+xml';
+
+        return new NextResponse(fileBuffer, {
+            headers: {
+                'Content-Type': contentType,
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
+    } catch (e) {
+        // Don't log errors for missing files - it's expected for some requests
+        return new NextResponse('File not found', { status: 404 });
+    }
+}
+
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    const { filename } = await params;
+
+    // Security: Prevent directory traversal (only allow the filename)
+    const sanitizedFilename = path.basename(filename);
+    const filePath = path.join(process.cwd(), 'data', 'uploads', sanitizedFilename);
+
+    try {
+        await unlink(filePath);
+        return NextResponse.json({ success: true, message: 'File deleted' });
+    } catch (e: any) {
+        if (e.code === 'ENOENT') {
+            return NextResponse.json({ error: 'File not found' }, { status: 404 });
+        }
+        console.error('File deletion error:', e);
+        return NextResponse.json(
+            { error: 'Failed to delete file', detail: e.message },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api-server.ts

@@ -0,0 +1,11 @@
+/**
+ * Plugin Images - Server-Only API Exports
+ * This file is only imported in server-side code (API routes)
+ * 
+ * IMPORTANT: This file uses Node.js modules (fs, path, etc.) and should NEVER
+ * be imported in client-side code. Only use in server-side API routes.
+ */
+
+// Re-export everything from the API index
+export * from './api';
+