@jhits/plugin-images 0.0.11 → 0.0.12

package/src/components/ImagePicker.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Search, Image as ImageIcon, Settings } from 'lucide-react';
+import type { ImagePickerProps } from '../types';
+import type { ImageMetadata } from '../types';
+import { ImageEditor, type ImageEditorHandle } from './ImageEditor';
+import { ImageBrowserModal } from './ImageBrowserModal';
+import { useImagePicker } from '../hooks/useImagePicker';
+import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { getFallbackImageUrl } from '../utils/fallback';
+
+export function ImagePicker({
+    value, onChange, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0,
+    aspectRatio = '16/9', borderRadius = 'rounded-xl', onBrightnessChange, onBlurChange,
+    onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor = false,
+}: ImagePickerProps) {
+
+    const [transforms, setTransforms] = useState({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
+    const [isBrowserOpen, setIsBrowserOpen] = useState(false);
+    const [previewBaseScale, setPreviewBaseScale] = useState<number | null>(null);
+    const [previewImageError, setPreviewImageError] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+    const previewImageRef = useRef<HTMLImageElement>(null);
+    const previewContainerRef = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<ImageEditorHandle | null>(null);
+
+    const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
+
+    // Reset preview error when selected image changes
+    useEffect(() => {
+        setPreviewImageError(false);
+    }, [selectedImage?.id, selectedImage?.url]);
+
+    // Handle SSR & portal target - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+
+        if (typeof document === 'undefined') return;
+
+        // If we're inside the GlobalImageEditor overlay, portal into that instead of document.body
+        // This ensures the browser/editor modals share the same stacking context
+        const editorContainer = previewContainerRef.current?.closest('[data-image-editor="true"]') as HTMLElement | null;
+        if (editorContainer) {
+            setPortalTarget(editorContainer);
+        } else {
+            setPortalTarget(document.body);
+        }
+    }, []);
+
+    // Auto-open editor if requested (e.g., when opening from edit button)
+    // Only auto-open once when the prop first becomes true, not on every render
+    const hasAutoOpenedRef = useRef(false);
+    useEffect(() => {
+        if (autoOpenEditor && selectedImage && !isEditorOpen && !hasAutoOpenedRef.current) {
+            // Small delay to ensure ImagePicker is fully rendered
+            const timer = setTimeout(() => {
+                setIsEditorOpen(true);
+                hasAutoOpenedRef.current = true;
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+        // Reset the flag when autoOpenEditor becomes false
+        if (!autoOpenEditor) {
+            hasAutoOpenedRef.current = false;
+        }
+    }, [autoOpenEditor, selectedImage, isEditorOpen]);
+
+    useEffect(() => {
+        if (!isEditorOpen) setTransforms({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
+    }, [scale, positionX, positionY, isEditorOpen]);
+
+    const calculatePreviewBaseScale = useCallback(() => {
+        if (!previewImageRef.current || !previewContainerRef.current) return;
+        const fit = Math.max(previewContainerRef.current.offsetWidth / previewImageRef.current.naturalWidth,
+            previewContainerRef.current.offsetHeight / previewImageRef.current.naturalHeight);
+        setPreviewBaseScale(fit);
+    }, []);
+
+    // Handle editor save - delegate to parent callbacks instead of saving directly
+    // This ensures all saves go through a single location (GlobalImageEditor.saveImageTransform)
+    const handleEditorSave = async () => {
+        if (!editorRef.current || !selectedImage) return;
+
+        try {
+            // 1. Get current values from Editor UI (this will also call onBrightnessChange and onBlurChange)
+            const final = await editorRef.current.flushSave();
+
+            // 2. Normalize position values - if they're -50% (centering value), treat as 0
+            const normalizedPositionX = final.positionX === -50 ? 0 : final.positionX;
+            const normalizedPositionY = final.positionY === -50 ? 0 : final.positionY;
+
+            // 3. If onEditorSave is provided, use it exclusively to prevent duplicate saves
+            // Otherwise, update parent state through individual callbacks
+            console.log('[ImagePicker] handleEditorSave - final values:', final, 'has onEditorSave:', !!onEditorSave);
+            if (onEditorSave) {
+                // onEditorSave handles everything - don't call individual handlers to avoid duplicates
+                console.log('[ImagePicker] Calling onEditorSave with:', { scale: final.scale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: final.brightness, blur: final.blur });
+                onEditorSave(final.scale, normalizedPositionX, normalizedPositionY, final.brightness, final.blur);
+            } else {
+                // Fallback: update parent state through individual callbacks
+                // Since onEditorSave is not provided, call all callbacks and they should handle saving
+                // The last one (onPositionYChange) will trigger the final save
+                console.log('[ImagePicker] No onEditorSave, using individual callbacks');
+                // Update scale first
+                onScaleChange?.(final.scale);
+                // Update positions - these will trigger saves
+                onPositionXChange?.(normalizedPositionX);
+                // Last callback - this should trigger the final save with all values
+                // We need to ensure this saves immediately with all final values including brightness/blur
+                onPositionYChange?.(normalizedPositionY);
+            }
+
+            // 5. Close the editor
+            setIsEditorOpen(false);
+        } catch (error) {
+            console.error('[ImagePicker] Failed to get editor values:', error);
+        }
+    };
+
+
+    const aspectValue = useMemo(() => {
+        if (aspectRatio === 'auto') return undefined;
+        const [w, h] = aspectRatio.split('/').map(Number);
+        return w / h;
+    }, [aspectRatio]);
+
+    return (
+        <div className="space-y-6">
+            {selectedImage ? (
+                <div className="relative group max-w-md mx-auto">
+                    <div className={`relative ${borderRadius} overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 shadow-lg transition-all duration-300 hover:shadow-xl`} style={{ aspectRatio: aspectValue, width: '100%' }}>
+                        <div ref={previewContainerRef} className="relative w-full h-full overflow-hidden">
+                            {previewImageError ? (
+                                <img
+                                    src={getFallbackImageUrl()}
+                                    alt={selectedImage.filename || 'Image not found'}
+                                    className="absolute max-w-none"
+                                    style={{
+                                        top: '50%', left: '50%', width: 'auto', height: 'auto',
+                                        minWidth: '100%', minHeight: '100%',
+                                        transform: 'translate(-50%, -50%)',
+                                        transformOrigin: 'center center',
+                                        objectFit: 'cover',
+                                    }}
+                                />
+                            ) : (
+                                <img
+                                    ref={previewImageRef} 
+                                    src={selectedImage.url} 
+                                    alt={selectedImage.filename}
+                                    className="absolute max-w-none" 
+                                    onLoad={calculatePreviewBaseScale}
+                                    onError={() => setPreviewImageError(true)}
+                                    style={{
+                                        top: '50%', left: '50%', width: 'auto', height: 'auto',
+                                        minWidth: '100%', minHeight: '100%',
+                                        filter: getImageFilter(brightness, blur),
+                                        transform: previewBaseScale ? getImageTransform({ scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, baseScale: previewBaseScale }, true) : 'translate(-50%, -50%)',
+                                        transformOrigin: 'center center',
+                                    }}
+                                />
+                            )}
+                        </div>
+                        {/* Overlay on hover */}
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" />
+                    </div>
+                </div>
+            ) : (
+                <div
+                    onClick={() => setIsBrowserOpen(true)}
+                    className="aspect-video bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950 rounded-2xl border-2 border-dashed border-neutral-300 dark:border-neutral-800 flex flex-col items-center justify-center text-neutral-400 hover:border-primary hover:text-primary cursor-pointer transition-all duration-300 hover:shadow-lg group"
+                >
+                    <div className="p-4 bg-white/50 dark:bg-neutral-800/50 rounded-full mb-3 group-hover:scale-110 transition-transform duration-300">
+                        <ImageIcon size={28} className="group-hover:scale-110 transition-transform duration-300" />
+                    </div>
+                    <span className="text-xs font-bold uppercase tracking-[0.15em] group-hover:tracking-[0.2em] transition-all duration-300">Select Image</span>
+                </div>
+            )}
+
+            <div className="flex flex-wrap items-center justify-center gap-3">
+                <button
+                    onClick={() => setIsBrowserOpen(true)}
+                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
+                >
+                    <Search size={16} />
+                    Browse
+                </button>
+                <button
+                    onClick={() => setIsEditorOpen(true)}
+                    disabled={!selectedImage}
+                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:shadow-sm disabled:hover:scale-100"
+                >
+                    <Settings size={16} />
+                    Edit
+                </button>
+            </div>
+
+            {isEditorOpen && selectedImage && mounted && portalTarget && createPortal(
+                <div className="fixed inset-0 z-[200] flex items-center justify-center bg-neutral-950/80 dark:bg-neutral-950/90 backdrop-blur-md p-4 animate-in fade-in duration-200">
+                    <div className="w-full max-w-4xl bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden shadow-2xl dark:shadow-neutral-950/50 flex flex-col max-h-[85vh] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300">
+                        <div className="flex-1 overflow-hidden p-4 lg:p-6">
+                            <ImageEditor
+                                ref={editorRef}
+                                imageUrl={selectedImage.url}
+                                scale={transforms.scale}
+                                positionX={transforms.positionX}
+                                positionY={transforms.positionY}
+                                brightness={brightness}
+                                blur={blur}
+                                onScaleChange={(s) => setTransforms(t => ({ ...t, scale: s }))}
+                                onPositionChange={(x, y) => {
+                                    // Only update local state during drag - don't trigger saves
+                                    // Saves will happen when editor closes via onEditorSave
+                                    setTransforms(t => ({ ...t, positionX: x, positionY: y }));
+                                }}
+                                onBrightnessChange={onBrightnessChange}
+                                onBlurChange={onBlurChange}
+                                aspectRatio={aspectRatio}
+                                borderRadius={borderRadius}
+                            />
+                        </div>
+                        <div className="px-6 py-5 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50/80 dark:bg-neutral-900/80 backdrop-blur-sm flex justify-end gap-3">
+                            <button
+                                onClick={() => setIsEditorOpen(false)}
+                                className="px-6 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl font-semibold text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={handleEditorSave}
+                                className="px-8 py-2.5 bg-primary text-white rounded-xl font-semibold shadow-md hover:shadow-lg hover:bg-primary/90 transition-all duration-200 active:scale-[0.98]"
+                            >
+                                Done
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                portalTarget
+            )}
+
+            <ImageBrowserModal
+                isOpen={isBrowserOpen}
+                onClose={() => setIsBrowserOpen(false)}
+                onSelectImage={(image) => {
+                    setSelectedImage(image);
+                    onChange?.(image);
+                    setIsBrowserOpen(false);
+                }}
+                selectedImageId={(() => {
+                    // Use resolved image's filename/URL if available, otherwise fall back to value
+                    // This ensures semantic IDs are resolved to actual filenames for matching
+                    if (selectedImage) {
+                        return selectedImage.filename || selectedImage.url || selectedImage.id || value;
+                    }
+                    return value;
+                })()}
+                darkMode={false}
+            />
+        </div>
+    );
+}

package/src/components/ImagesPluginInit.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Images Plugin Initialization Component
+ *
+ * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ * and renders the GlobalImageEditor if enabled.
+ *
+ * Render this once in your app layout after calling initImagesPlugin().
+ */
+/**
+ * Images Plugin Initialization Component
+ *
+ * Renders the global image editor if enabled in the plugin configuration.
+ * This component should be rendered in your app layout.
+ *
+ * @example
+ * ```tsx
+ * import { ImagesPluginInit } from '@jhits/plugin-images';
+ *
+ * // After calling initImagesPlugin() in a useEffect or script
+ * <ImagesPluginInit />
+ * ```
+ */
+export declare function ImagesPluginInit(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImagesPluginInit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagesPluginInit.d.ts","sourceRoot":"","sources":["ImagesPluginInit.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,4CAE/B"}

package/src/components/ImagesPluginInit.tsx

@@ -0,0 +1,31 @@
+/**
+ * Images Plugin Initialization Component
+ * 
+ * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ * and renders the GlobalImageEditor if enabled.
+ * 
+ * Render this once in your app layout after calling initImagesPlugin().
+ */
+
+'use client';
+
+import { GlobalImageEditor } from './GlobalImageEditor';
+
+/**
+ * Images Plugin Initialization Component
+ * 
+ * Renders the global image editor if enabled in the plugin configuration.
+ * This component should be rendered in your app layout.
+ * 
+ * @example
+ * ```tsx
+ * import { ImagesPluginInit } from '@jhits/plugin-images';
+ * 
+ * // After calling initImagesPlugin() in a useEffect or script
+ * <ImagesPluginInit />
+ * ```
+ */
+export function ImagesPluginInit() {
+    return <GlobalImageEditor />;
+}
+

package/src/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Image Picker Component Exports
+ */
+
+export { ImagePicker } from './ImagePicker';
+export { ImageEditor } from './ImageEditor';
+export { ImageEffectsPanel } from './ImageEffectsPanel';
+export { ImageBrowserModal } from './ImageBrowserModal';
+export type { ImagePickerProps } from '../types';
+

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/hooks/useImagePicker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hook for Image Picker Logic
+ */
+import type { ImageMetadata } from '../types';
+export interface UseImagePickerOptions {
+    value?: string;
+    images: ImageMetadata[];
+}
+export declare function useImagePicker({ value, images }: UseImagePickerOptions): {
+    selectedImage: ImageMetadata | null;
+    setSelectedImage: import("react").Dispatch<import("react").SetStateAction<ImageMetadata | null>>;
+    uploading: boolean;
+    fileInputRef: import("react").RefObject<HTMLInputElement | null>;
+    handleFileSelect: (e?: React.ChangeEvent<HTMLInputElement> | {
+        target: {
+            files: File[] | null;
+        };
+    }) => Promise<any>;
+};
+//# sourceMappingURL=useImagePicker.d.ts.map

package/src/hooks/useImagePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePicker.d.ts","sourceRoot":"","sources":["useImagePicker.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,qBAAqB;;;;;2BA6R/B,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;SAAE,CAAA;KAAE;EA8CjH"}