@jhits/plugin-images 0.0.1

package/src/config.ts

@@ -0,0 +1,179 @@
+/**
+ * Plugin Images Configuration
+ * Automatically creates required API routes in client apps
+ */
+
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Automatically creates plugin-images API catch-all route
+ * This route forwards requests to the plugin's API router
+ */
+/**
+ * @deprecated Routes are now handled by the unified /api/[pluginId]/[...path]/route.ts
+ * This function is kept for backwards compatibility but does nothing
+ */
+export function ensureImagesRoutes() {
+    // Routes are now handled by the unified /api/[pluginId]/[...path]/route.ts
+    // No need to generate individual routes anymore
+    return;
+    try {
+        // Find the host app directory (where next.config.ts is)
+        let appDir = process.cwd();
+        const possiblePaths = [
+            appDir,
+            join(appDir, '..'),
+            join(appDir, '..', '..'),
+        ];
+
+        for (const basePath of possiblePaths) {
+            const configPath = join(basePath, 'next.config.ts');
+            if (existsSync(configPath)) {
+                appDir = basePath;
+                break;
+            }
+        }
+
+        const apiDir = join(appDir, 'src', 'app', 'api');
+        const pluginImagesApiDir = join(apiDir, 'plugin-images', '[...path]');
+        const pluginImagesApiPath = join(pluginImagesApiDir, 'route.ts');
+
+        // Check if route already exists
+        if (existsSync(pluginImagesApiPath)) {
+            const fs = require('fs');
+            const existingContent = fs.readFileSync(pluginImagesApiPath, 'utf8');
+            if (existingContent.includes('@jhits/plugin-images') || existingContent.includes('plugin-images')) {
+                // Already set up, skip
+                return;
+            }
+        }
+
+        // Create plugin-images API catch-all route
+        mkdirSync(pluginImagesApiDir, { recursive: true });
+        writeFileSync(pluginImagesApiPath, `// Auto-generated by @jhits/plugin-images - Images Plugin API
+// This route is automatically created for the images plugin
+import { NextRequest } from 'next/server';
+import { handleImagesApi } from '@jhits/plugin-images/api';
+
+export async function GET(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleImagesApi(req, path);
+}
+
+export async function POST(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleImagesApi(req, path);
+}
+
+export async function PUT(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleImagesApi(req, path);
+}
+
+export async function DELETE(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleImagesApi(req, path);
+}
+
+export async function PATCH(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleImagesApi(req, path);
+}
+`);
+
+        // Also create uploads route for serving files
+        const uploadsApiDir = join(apiDir, 'uploads', '[filename]');
+        const uploadsApiPath = join(uploadsApiDir, 'route.ts');
+
+        if (!existsSync(uploadsApiPath)) {
+            mkdirSync(uploadsApiDir, { recursive: true });
+            writeFileSync(uploadsApiPath, `// Auto-generated by @jhits/plugin-images - Image Uploads API
+// This route is automatically created for the images plugin
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile } from 'fs/promises';
+import path from 'path';
+import { existsSync } from 'fs';
+
+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 filePath = path.join(process.cwd(), 'data', 'uploads', sanitizedFilename);
+
+    try {
+        const fileBuffer = await readFile(filePath);
+
+        // Determine content type based on extension
+        const ext = path.extname(sanitizedFilename).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) {
+        console.error('File serving error:', e);
+        return new NextResponse('File not found', { status: 404 });
+    }
+}
+
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    const { filename } = await params;
+
+    if (!filename) {
+        return new NextResponse('Missing filename', { status: 400 });
+    }
+
+    const sanitizedFilename = path.basename(filename);
+    const filePath = path.join(process.cwd(), 'data', 'uploads', sanitizedFilename);
+
+    if (!existsSync(filePath)) {
+        return new NextResponse('File not found', { status: 404 });
+    }
+
+    try {
+        const { unlink } = require('fs/promises');
+        await unlink(filePath);
+        return NextResponse.json({ success: true, message: \`"\${sanitizedFilename}" deleted successfully.\` });
+    } catch (error) {
+        console.error('Failed to delete file:', error);
+        return new NextResponse('Failed to delete file', { status: 500 });
+    }
+}
+`);
+        }
+    } catch (error) {
+        // Ignore errors - route might already exist or app structure is different
+        console.warn('[plugin-images] Could not ensure images routes:', error);
+    }
+}

package/src/index.server.ts

@@ -0,0 +1,11 @@
+/**
+ * Plugin Images - Server-Only Entry Point
+ * This file exports only server-side API handlers
+ * Used by the dynamic plugin router via @jhits/plugin-images/server
+ * 
+ * Note: This file is server-only (no 'use server' needed - that's only for Server Actions)
+ */
+
+export { handleImagesApi as handleApi } from './api/router';
+export { handleImagesApi } from './api/router'; // Keep original export for backward compatibility
+

package/src/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * Plugin Images - Main Entry Point
+ * Image management plugin for uploading, searching, and managing images
+ */
+
+'use client';
+
+import React from 'react';
+import { ImageManagerView } from './views/ImageManager';
+
+export interface PluginProps {
+    subPath: string[];
+    siteId: string;
+    locale: string;
+}
+
+export default function ImagesPlugin({ subPath, siteId, locale }: PluginProps) {
+    const route = subPath[0] || 'manager';
+
+    switch (route) {
+        case 'manager':
+            return <ImageManagerView siteId={siteId} locale={locale} />;
+        
+        default:
+            return <ImageManagerView siteId={siteId} locale={locale} />;
+    }
+}
+
+// Export for use as default
+export { ImagesPlugin as Index };
+
+// Export components for use in other plugins
+export { ImagePicker } from './components/ImagePicker';
+export { GlobalImageEditor } from './components/GlobalImageEditor';
+export { ImagesPluginInit } from './components/ImagesPluginInit';
+export { Image } from './components/Image';
+export { BackgroundImage } from './components/BackgroundImage';
+export type { ImagePickerProps, ImageMetadata } from './types';
+export type { PluginImageProps } from './components/Image';
+export type { BackgroundImageProps } from './components/BackgroundImage';
+
+// Export initialization utility
+export { initImagesPlugin } from './init';
+export type { ImagesPluginConfig } from './init';
+
+// Export utility functions
+export { 
+    getFallbackImageUrl, 
+    isValidImageUrl, 
+    getSafeImageUrl,
+    constructImageUrl 
+} from './utils/fallback';
+
+// Note: API handlers are server-only and exported from ./index.ts (server entry point)
+// They are NOT exported here to prevent client/server context mixing
+

package/src/init.tsx

@@ -0,0 +1,58 @@
+/**
+ * Images Plugin Initialization Utility
+ * 
+ * Simple function to initialize the images plugin with client configuration.
+ * Call this once in your app (e.g., in root layout) to enable global image editing.
+ * 
+ * @example
+ * ```typescript
+ * import { initImagesPlugin } from '@jhits/plugin-images/init';
+ * import { imagesConfig } from '@/plugins/images-config';
+ * 
+ * // Call once when your app loads
+ * initImagesPlugin(imagesConfig);
+ * ```
+ */
+
+'use client';
+
+export interface ImagesPluginConfig {
+    /** Enable global image editor (default: true) */
+    enabled?: boolean;
+    /** Custom styling for the editor modal */
+    className?: string;
+    /** Custom styling for the modal overlay */
+    overlayClassName?: string;
+}
+
+/**
+ * Initialize the images plugin with client configuration
+ * 
+ * This function sets up the window global that the plugin reads from automatically.
+ * Call this once when your app loads, before the plugin component is rendered.
+ * 
+ * @param config - Images plugin configuration (enabled, styling, etc.)
+ */
+export function initImagesPlugin(config?: ImagesPluginConfig): void {
+    if (typeof window === 'undefined') {
+        // Server-side: no-op
+        return;
+    }
+
+    // Initialize the global plugin props object if it doesn't exist
+    if (!(window as any).__JHITS_PLUGIN_PROPS__) {
+        (window as any).__JHITS_PLUGIN_PROPS__ = {};
+    }
+
+    // Set images plugin configuration
+    (window as any).__JHITS_PLUGIN_PROPS__['plugin-images'] = {
+        enabled: config?.enabled !== undefined ? config.enabled : true,
+        className: config?.className,
+        overlayClassName: config?.overlayClassName,
+    };
+
+    console.log('[ImagesPlugin] Initialized with config:', {
+        enabled: config?.enabled !== undefined ? config.enabled : true,
+    });
+}
+

package/src/types/index.ts

@@ -0,0 +1,60 @@
+/**
+ * Image Plugin Types
+ */
+
+export interface ImageMetadata {
+    /** Unique image ID */
+    id: string;
+    /** Original filename */
+    filename: string;
+    /** File path/URL */
+    url: string;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    mimeType: string;
+    /** Image dimensions */
+    width?: number;
+    height?: number;
+    /** Alt text */
+    alt?: string;
+    /** Upload timestamp */
+    uploadedAt: string;
+    /** Uploaded by user ID */
+    uploadedBy?: string;
+    /** Tags for searching */
+    tags?: string[];
+}
+
+export interface ImageUploadResponse {
+    success: boolean;
+    image?: ImageMetadata;
+    error?: string;
+}
+
+export interface ImageListResponse {
+    images: ImageMetadata[];
+    total: number;
+    page: number;
+    limit: number;
+}
+
+export interface ImagePickerProps {
+    /** Current selected image URL */
+    value?: string;
+    /** Callback when image is selected */
+    onChange: (image: ImageMetadata | null) => void;
+    /** Whether dark mode is enabled */
+    darkMode?: boolean;
+    /** Show brightness and blur controls */
+    showEffects?: boolean;
+    /** Current brightness value (0-200, 100 = normal) */
+    brightness?: number;
+    /** Current blur value (0-20) */
+    blur?: number;
+    /** Callback when brightness changes */
+    onBrightnessChange?: (brightness: number) => void;
+    /** Callback when blur changes */
+    onBlurChange?: (blur: number) => void;
+}
+

package/src/utils/fallback.ts

@@ -0,0 +1,73 @@
+/**
+ * Fallback image utility
+ * Provides a default fallback image URL when images fail to load or are invalid
+ * Also handles URL construction for image filenames
+ */
+
+/**
+ * Returns the URL for the fallback "image not found" image
+ * Served from the plugin's API route
+ */
+export function getFallbackImageUrl(): string {
+    return '/api/plugin-images/fallback';
+}
+
+/**
+ * Constructs the full image URL from a filename or URL
+ * - If it's already a full URL (http://, https://, or starts with /), returns as-is
+ * - If it's a filename, constructs `/api/uploads/${filename}`
+ */
+export function constructImageUrl(src: string | null | undefined): string | null {
+    if (!src || typeof src !== 'string') {
+        return null;
+    }
+
+    // If it's already a full URL (absolute or relative), return as-is
+    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('/')) {
+        return src;
+    }
+
+    // Otherwise, it's a filename - construct the API URL
+    return `/api/uploads/${src}`;
+}
+
+/**
+ * Validates if a URL is valid and can be used with Next.js Image component
+ */
+export function isValidImageUrl(url: string | null | undefined): boolean {
+    if (!url || typeof url !== 'string') {
+        return false;
+    }
+
+    // Check if it's a valid URL format
+    try {
+        // For relative URLs (starting with /), they're valid
+        if (url.startsWith('/')) {
+            return true;
+        }
+
+        // For absolute URLs, validate the URL format
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Gets a safe image URL with automatic URL construction and fallback
+ * - Constructs the full URL if src is a filename
+ * - Falls back to the plugin's fallback image if invalid or missing
+ */
+export function getSafeImageUrl(src: string | null | undefined): string {
+    // First, construct the URL if it's a filename
+    const constructedUrl = constructImageUrl(src);
+    
+    // Then validate and return, or fallback
+    if (isValidImageUrl(constructedUrl)) {
+        return constructedUrl!;
+    }
+    
+    return getFallbackImageUrl();
+}
+

package/src/views/ImageManager.tsx

@@ -0,0 +1,30 @@
+/**
+ * Image Manager View
+ * Main view for managing uploaded images
+ */
+
+'use client';
+
+import React from 'react';
+
+export interface ImageManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+
+export function ImageManagerView({ siteId, locale }: ImageManagerViewProps) {
+    return (
+        <div className="min-h-screen bg-dashboard-bg p-8">
+            <div className="max-w-7xl mx-auto">
+                <h1 className="text-4xl font-black uppercase tracking-tighter text-dashboard-text mb-8">
+                    Image Manager
+                </h1>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-8">
+                    This plugin provides image upload and management functionality. 
+                    Use the ImagePicker component in other plugins to select images.
+                </p>
+            </div>
+        </div>
+    );
+}
+