@jhits/plugin-images 0.0.4 → 0.0.5

package/package.json

@@ -1,39 +1,26 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
-  "browser": {
-    "mongodb": false,
-    "server-only": false,
-    "./src/api/api-server.ts": false,
-    "./src/index.server.ts": false
-  },
   "exports": {
     ".": {
       "types": "./src/index.tsx",
-      "import": "./src/index.tsx",
       "default": "./src/index.tsx"
     },
     "./server": {
       "types": "./src/index.server.ts",
-      "import": "./src/index.server.ts",
       "default": "./src/index.server.ts"
-    },
-    "./components/*": {
-      "types": "./src/components/*.tsx",
-      "default": "./src/components/*.tsx"
     }
   },
   "dependencies": {
-    "@jhits/plugin-core": "^0.0.1",
     "mongodb": "^7.0.0",
     "lucide-react": "^0.562.0",
-    "server-only": "^0.0.1"
+    "@jhits/plugin-core": "0.0.1"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -57,4 +44,4 @@
     "src",
     "package.json"
   ]
-}
+}

package/src/api/resolve/route.ts

@@ -9,6 +9,91 @@ 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);
@@ -43,7 +128,7 @@ export async function GET(request: NextRequest) {
             );
         }
 
-        const mappings = JSON.parse(await readFile(mappingsPath, 'utf-8'));
+        const mappings = await readMappingsSafely();
         const mapping = mappings[id];
 
         if (!mapping) {
@@ -57,12 +142,20 @@ export async function GET(request: NextRequest) {
         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) {
@@ -84,7 +177,7 @@ export async function POST(request: NextRequest) {
         await ensureMappingsFile();
         
         const body = await request.json();
-        const { id, filename, brightness, blur } = body;
+        const { id, filename, brightness, blur, scale, positionX, positionY } = body;
 
         if (!id || !filename) {
             return NextResponse.json(
@@ -93,16 +186,39 @@ export async function POST(request: NextRequest) {
             );
         }
 
-        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 }),
-        };
+        // Acquire write lock to prevent concurrent writes
+        const releaseLock = await acquireLock();
         
-        await writeFile(mappingsPath, JSON.stringify(mappings, null, 2));
+        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,
@@ -110,6 +226,9 @@ export async function POST(request: NextRequest) {
             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);

package/src/api/upload/index.ts

@@ -1,12 +1,8 @@
 /**
  * Image Upload API Handler
  * POST /api/plugin-images/upload - Handles image file uploads
- * 
- * SERVER-ONLY: This module must never be imported by client code
  */
 
-import 'server-only';
-
 import { NextRequest, NextResponse } from 'next/server';
 import { writeFile, mkdir } from 'fs/promises';
 import path from 'path';

package/src/components/BackgroundImage.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Image } from './Image';
-import { Edit2, Loader2 } from 'lucide-react';
+import { Edit2 } from 'lucide-react';
 
 export interface BackgroundImageProps {
     id: string;
@@ -11,14 +11,8 @@ export interface BackgroundImageProps {
     children?: React.ReactNode;
     backgroundSize?: 'cover' | 'contain' | 'auto' | string;
     backgroundPosition?: string;
-    backgroundRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y';
 }
 
-/**
- * BackgroundImage Component
- * * A container that handles a background image with admin edit capabilities.
- * The edit button appears on hover anywhere within the container.
- */
 export function BackgroundImage({
     id,
     className = '',
@@ -30,17 +24,16 @@ export function BackgroundImage({
     const [isAdmin, setIsAdmin] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
 
-    // Authentication check for Admin/Dev users
     useEffect(() => {
         const checkUser = async () => {
             try {
                 const res = await fetch('/api/me');
                 const data = await res.json();
-                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
+                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
                     setIsAdmin(true);
                 }
             } catch (error) {
-                console.error('Failed to check user role:', error);
+                console.error('Auth error:', error);
             } finally {
                 setIsLoading(false);
             }
@@ -51,60 +44,48 @@ export function BackgroundImage({
     const handleEditClick = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        // Dispatch event to the GlobalImageEditor
         window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
     };
 
     return (
         <div
-            data-background-image-component="true"
-            data-background-image-id={id}
-            className={`group relative overflow-hidden w-full ${className}`}
-            style={style}
+            className={`group relative overflow-hidden ${className}`}
+            style={{ ...style, minHeight: style.minHeight ?? '300px' }} // Ensure visibility
+            data-background-id={id}
         >
-            {/* 1. BACKGROUND IMAGE LAYER (z-0) */}
-            <div className="absolute inset-0 z-0 pointer-events-none">
+            {/* 1. THE BACKGROUND LAYER 
+               We force 'fill' and 'w-full h-full' to ensure the internal 
+               Image component triggers its 'shouldFill' logic correctly.
+            */}
+            <div className="absolute inset-0 z-0">
                 <Image
                     id={id}
                     alt=""
                     fill
+                    priority
                     className="w-full h-full"
-                    objectFit={backgroundSize === 'cover' ? 'cover' : 'contain'}
+                    objectFit={backgroundSize as any}
                     objectPosition={backgroundPosition}
-                    editable={false} // We handle the button manually below
+                    editable={false}
                 />
             </div>
 
-            {/* 2. CONTENT LAYER (z-10) */}
+            {/* 2. CONTENT LAYER */}
             <div className="relative z-10 w-full h-full">
                 {children}
             </div>
 
-            {/* 3. ADMIN UI LAYER (z-50) - Dashboard Theme */}
+            {/* 3. ADMIN UI */}
             {!isLoading && isAdmin && (
-                <div className="absolute inset-0 z-50 pointer-events-none">
-                    <button
-                        type="button"
-                        onClick={handleEditClick}
-                        className="
-                            pointer-events-auto absolute bottom-8 left-8 
-                            flex items-center gap-3 px-6 py-3 
-                            bg-neutral-100 dark:bg-neutral-800 
-                            text-neutral-900 dark:text-neutral-100 
-                            rounded-full shadow-2xl 
-                            border border-neutral-300 dark:border-neutral-700 
-                            cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-700
-                            opacity-0 group-hover:opacity-100 
-                            translate-y-4 group-hover:translate-y-0 
-                            transition-all duration-500 ease-out
-                        "
-                    >
-                        <Edit2 size={16} strokeWidth={2.5} className="text-primary" />
-                        <span className="text-[11px] font-black uppercase tracking-[0.2em]">
-                            Edit Background
-                        </span>
-                    </button>
-                </div>
+                <button
+                    onClick={handleEditClick}
+                    className="absolute bottom-8 left-8 z-50 flex items-center gap-3 px-6 py-3 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl border border-neutral-200 dark:border-neutral-700 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 ease-out"
+                >
+                    <Edit2 size={16} className="text-primary" />
+                    <span className="text-[11px] font-black uppercase tracking-widest">
+                        Edit Background
+                    </span>
+                </button>
             )}
         </div>
     );