@jhits/plugin-images 0.0.10 → 0.0.12

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';
+

package/src/components/BackgroundImage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface BackgroundImageProps {
+    id: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
+    backgroundPosition?: string;
+}
+export declare function BackgroundImage({ id, className, style, children, backgroundSize, backgroundPosition, }: BackgroundImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackgroundImage.d.ts.map

package/src/components/BackgroundImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundImage.d.ts","sourceRoot":"","sources":["BackgroundImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAAC,EAC5B,EAAE,EACF,SAAc,EACd,KAAU,EACV,QAAQ,EACR,cAAwB,EACxB,kBAA6B,GAChC,EAAE,oBAAoB,2CAqEtB"}

package/src/components/BackgroundImage.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Image } from './Image';
+import { Edit2 } from 'lucide-react';
+
+export interface BackgroundImageProps {
+    id: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
+    backgroundPosition?: string;
+}
+
+export function BackgroundImage({
+    id,
+    className = '',
+    style = {},
+    children,
+    backgroundSize = 'cover',
+    backgroundPosition = 'center',
+}: BackgroundImageProps) {
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const checkUser = async () => {
+            try {
+                const res = await fetch('/api/me');
+                const data = await res.json();
+                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
+                    setIsAdmin(true);
+                }
+            } catch (error) {
+                console.error('Auth error:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        checkUser();
+    }, []);
+
+    const handleEditClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
+    };
+
+    return (
+        <div
+            className={`group relative overflow-hidden ${className}`}
+            style={{ ...style, minHeight: style.minHeight ?? '300px' }} // Ensure visibility
+            data-background-id={id}
+        >
+            {/* 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 as any}
+                    objectPosition={backgroundPosition}
+                    editable={false}
+                />
+            </div>
+
+            {/* 2. CONTENT LAYER */}
+            <div className="relative z-10 w-full h-full">
+                {children}
+            </div>
+
+            {/* 3. ADMIN UI */}
+            {!isLoading && isAdmin && (
+                <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>
+    );
+}

package/src/components/GlobalImageEditor/config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Configuration utilities for GlobalImageEditor
+ */
+import type { PluginConfig } from './types';
+/**
+ * Read plugin configuration from window global
+ */
+export declare function getPluginConfig(): PluginConfig;
+//# sourceMappingURL=config.d.ts.map

package/src/components/GlobalImageEditor/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;GAEG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAW9C"}

package/src/components/GlobalImageEditor/config.ts

@@ -0,0 +1,21 @@
+/**
+ * Configuration utilities for GlobalImageEditor
+ */
+
+import type { PluginConfig } from './types';
+
+/**
+ * Read plugin configuration from window global
+ */
+export function getPluginConfig(): PluginConfig {
+    if (typeof window === 'undefined') {
+        return { enabled: false };
+    }
+    
+    const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-images'];
+    return {
+        enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
+        className: pluginProps?.className,
+        overlayClassName: pluginProps?.overlayClassName,
+    };
+}

package/src/components/GlobalImageEditor/eventHandlers.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Event handlers for image changes and effects
+ */
+import type { SelectedImage } from './types';
+import type { ImageMetadata } from '../../types';
+/**
+ * Apply image changes to DOM and save to API
+ */
+export declare function handleImageChange(image: ImageMetadata | null, selectedImage: SelectedImage, onClose: () => void): Promise<void>;
+/**
+ * Handle brightness change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export declare function handleBrightnessChange(brightness: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
+/**
+ * Handle blur change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export declare function handleBlurChange(blur: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
+//# sourceMappingURL=eventHandlers.d.ts.map

package/src/components/GlobalImageEditor/eventHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["eventHandlers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;GAEG;AACH,wBAAsB,iBAAiB,CACnC,KAAK,EAAE,aAAa,GAAG,IAAI,EAC3B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,MAAM,IAAI,GACpB,OAAO,CAAC,IAAI,CAAC,CAiDf;AAoID;;;GAGG;AACH,wBAAsB,sBAAsB,CACxC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CAClC,IAAI,EAAE,MAAM,EACZ,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf"}

package/src/components/GlobalImageEditor/eventHandlers.ts

@@ -0,0 +1,267 @@
+/**
+ * Event handlers for image changes and effects
+ */
+
+import type { SelectedImage } from './types';
+import type { ImageMetadata } from '../../types';
+import { getFilename, saveTransformToAPI, normalizePosition } from './saveLogic';
+
+/**
+ * Apply image changes to DOM and save to API
+ */
+export async function handleImageChange(
+    image: ImageMetadata | null,
+    selectedImage: SelectedImage,
+    onClose: () => void
+): Promise<void> {
+    if (!image) return;
+
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                     element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) {
+        console.error('[GlobalImageEditor] No semantic ID found for image');
+        return;
+    }
+    
+    // Extract filename from image URL or use image.id
+    const filename = image.url.split('/').pop()?.split('?')[0] || image.id;
+    const normalizedPositionX = normalizePosition(selectedImage.positionX);
+    const normalizedPositionY = normalizePosition(selectedImage.positionY);
+    
+    // Save the mapping between semantic ID and filename, including effects and transforms
+    await saveTransformToAPI(
+        semanticId,
+        filename,
+        selectedImage.scale,
+        normalizedPositionX,
+        normalizedPositionY,
+        selectedImage.brightness,
+        selectedImage.blur
+    );
+    
+    // Update image src immediately - handle background images differently
+    if (selectedImage.isBackground) {
+        updateBackgroundImage(element, image.url, selectedImage, normalizedPositionX, normalizedPositionY);
+    } else {
+        updateRegularImage(element, image.url, semanticId, selectedImage, normalizedPositionX, normalizedPositionY);
+    }
+    
+    // Dispatch a custom event to notify Image components to re-resolve
+    window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+        detail: { 
+            id: semanticId, 
+            filename, 
+            brightness: selectedImage.brightness, 
+            blur: selectedImage.blur,
+            scale: selectedImage.scale,
+            positionX: selectedImage.positionX,
+            positionY: selectedImage.positionY,
+        }
+    }));
+    
+    onClose();
+}
+
+/**
+ * Update background image element
+ */
+function updateBackgroundImage(
+    element: HTMLElement,
+    imageUrl: string,
+    selectedImage: SelectedImage,
+    normalizedPositionX: number,
+    normalizedPositionY: number
+): void {
+    // For background images, update the nested Image component
+    const imgWrapper = element.querySelector('[data-image-id]');
+    if (imgWrapper) {
+        const img = imgWrapper.querySelector('img');
+        if (img) {
+            img.src = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+    } else {
+        // Fallback: update background-image style if no nested Image component
+        const bgImage = window.getComputedStyle(element).backgroundImage;
+        if (bgImage && bgImage !== 'none') {
+            element.style.backgroundImage = `url(${imageUrl})`;
+        }
+    }
+    
+    // Store attributes on the background container
+    const semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id') || '';
+    element.setAttribute('data-background-image-id', semanticId);
+    element.setAttribute('data-edited-src', imageUrl);
+    element.setAttribute('data-brightness', selectedImage.brightness.toString());
+    element.setAttribute('data-blur', selectedImage.blur.toString());
+    element.setAttribute('data-scale', selectedImage.scale.toString());
+    element.setAttribute('data-position-x', normalizedPositionX.toString());
+    element.setAttribute('data-position-y', normalizedPositionY.toString());
+    
+    // Apply filter to the wrapper element
+    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+    } else {
+        element.style.filter = '';
+    }
+}
+
+/**
+ * Update regular image element
+ */
+function updateRegularImage(
+    element: HTMLElement,
+    imageUrl: string,
+    semanticId: string,
+    selectedImage: SelectedImage,
+    normalizedPositionX: number,
+    normalizedPositionY: number
+): void {
+    if (element.tagName === 'IMG') {
+        (element as HTMLImageElement).src = imageUrl;
+        element.setAttribute('data-edited-src', imageUrl);
+        element.setAttribute('data-image-id', semanticId);
+        element.setAttribute('data-brightness', selectedImage.brightness.toString());
+        element.setAttribute('data-blur', selectedImage.blur.toString());
+        
+        // Apply filter
+        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+        } else {
+            element.style.filter = '';
+        }
+    } else {
+        // Next.js Image wrapper - find the actual img element
+        const img = element.querySelector('img');
+        if (img) {
+            img.src = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+        element.setAttribute('data-image-id', semanticId);
+        element.setAttribute('data-edited-src', imageUrl);
+        element.setAttribute('data-brightness', selectedImage.brightness.toString());
+        element.setAttribute('data-blur', selectedImage.blur.toString());
+        element.setAttribute('data-scale', selectedImage.scale.toString());
+        element.setAttribute('data-position-x', normalizedPositionX.toString());
+        element.setAttribute('data-position-y', normalizedPositionY.toString());
+        
+        // Apply filter to wrapper
+        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+        } else {
+            element.style.filter = '';
+        }
+    }
+}
+
+/**
+ * Get filename from element for saving effects
+ */
+async function getFilenameFromElement(
+    semanticId: string,
+    selectedImage: SelectedImage
+): Promise<string> {
+    const filename = await getFilename(semanticId, selectedImage);
+    if (filename) return filename;
+
+    const { element } = selectedImage;
+    if (selectedImage.isBackground) {
+        const bgImage = window.getComputedStyle(element).backgroundImage;
+        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+        if (urlMatch && urlMatch[1]) {
+            return urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+        }
+    } else {
+        let imgSrc: string | null = null;
+        if (element instanceof HTMLImageElement && element.src) {
+            imgSrc = element.src;
+        } else {
+            const img = element.querySelector('img') as HTMLImageElement | null;
+            if (img?.src) {
+                imgSrc = img.src;
+            }
+        }
+        if (imgSrc) {
+            return imgSrc.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+        }
+    }
+    return semanticId;
+}
+
+/**
+ * Handle brightness change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBrightnessChange(
+    brightness: number,
+    selectedImage: SelectedImage,
+    setSelectedImage: (image: SelectedImage) => void,
+    saveImmediately: boolean = true
+): Promise<void> {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                      element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) return;
+
+    const currentFilter = element.style.filter || '';
+    const blurMatch = currentFilter.match(/blur\((\d+)px\)/);
+    const blur = blurMatch ? parseInt(blurMatch[1]) : selectedImage.blur;
+    
+    // Update the selectedImage state
+    setSelectedImage({
+        ...selectedImage,
+        brightness,
+    });
+    
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-brightness', brightness.toString());
+    
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}
+
+/**
+ * Handle blur change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBlurChange(
+    blur: number,
+    selectedImage: SelectedImage,
+    setSelectedImage: (image: SelectedImage) => void,
+    saveImmediately: boolean = true
+): Promise<void> {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                      element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) return;
+
+    const currentFilter = element.style.filter || '';
+    const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
+    const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
+    
+    // Update the selectedImage state
+    setSelectedImage({
+        ...selectedImage,
+        blur,
+    });
+    
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-blur', blur.toString());
+    
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}

package/src/components/GlobalImageEditor/imageDetection.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Image detection and parsing utilities
+ */
+import type { SelectedImage } from './types';
+/**
+ * Extract image source from element (handles Next.js Image wrapper)
+ */
+export declare function getImageSource(element: HTMLElement, isBackground: boolean): {
+    currentSrc: string;
+    actualImgElement: HTMLImageElement | null;
+};
+/**
+ * Parse image data from element to create SelectedImage
+ */
+export declare function parseImageData(element: HTMLElement, id: string, currentBrightness?: number, currentBlur?: number): SelectedImage | null;
+//# sourceMappingURL=imageDetection.d.ts.map

package/src/components/GlobalImageEditor/imageDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageDetection.d.ts","sourceRoot":"","sources":["imageDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC7C,CAmCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC1B,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE,MAAM,EACV,iBAAiB,CAAC,EAAE,MAAM,EAC1B,WAAW,CAAC,EAAE,MAAM,GACrB,aAAa,GAAG,IAAI,CAoGtB"}