@jhits/plugin-images 0.0.5 → 0.0.7

package/src/utils/fallback.js

@@ -0,0 +1,63 @@
+/**
+ * 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() {
+    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) {
+    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) {
+    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 (_a) {
+        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) {
+    // 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/utils/transforms.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Image Transform Utilities
+ */
+export interface ImageTransformOptions {
+    scale: number;
+    positionX: number;
+    positionY: number;
+    baseScale?: number;
+}
+/**
+ * Calculates the CSS transform string
+ * Order: Center -> Scale -> Translate (Offset)
+ *
+ * Position values are stored as percentages of the CONTAINER, not the image.
+ * This makes them consistent across different container sizes.
+ *
+ * IMPORTANT: The image uses width: auto; height: auto with minWidth: 100%; minHeight: 100%
+ * This allows the image to maintain its natural aspect ratio while ensuring it covers the container.
+ * baseScale handles the "fitting" to ensure the image is large enough to fill the container.
+ *
+ * Applying SCALE before POSITION makes the position relative to the visual size you see,
+ * not the original raw file size. This ensures consistent positioning across different scales.
+ */
+export declare function getImageTransform(options: ImageTransformOptions, needsCentering?: boolean, caller?: string): string;
+export declare function getImageFilter(brightness?: number, blur?: number): string | undefined;
+//# sourceMappingURL=transforms.d.ts.map

package/src/utils/transforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transforms.d.ts","sourceRoot":"","sources":["transforms.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC7B,OAAO,EAAE,qBAAqB,EAC9B,cAAc,GAAE,OAAe,EAC/B,MAAM,CAAC,EAAE,MAAM,GAChB,MAAM,CAmBR;AAED,wBAAgB,cAAc,CAAC,UAAU,GAAE,MAAY,EAAE,IAAI,GAAE,MAAU,GAAG,MAAM,GAAG,SAAS,CAG7F"}

package/src/utils/transforms.js

@@ -0,0 +1,38 @@
+/**
+ * Image Transform Utilities
+ */
+/**
+ * Calculates the CSS transform string
+ * Order: Center -> Scale -> Translate (Offset)
+ *
+ * Position values are stored as percentages of the CONTAINER, not the image.
+ * This makes them consistent across different container sizes.
+ *
+ * IMPORTANT: The image uses width: auto; height: auto with minWidth: 100%; minHeight: 100%
+ * This allows the image to maintain its natural aspect ratio while ensuring it covers the container.
+ * baseScale handles the "fitting" to ensure the image is large enough to fill the container.
+ *
+ * Applying SCALE before POSITION makes the position relative to the visual size you see,
+ * not the original raw file size. This ensures consistent positioning across different scales.
+ */
+export function getImageTransform(options, needsCentering = false, caller) {
+    const { scale, positionX, positionY, baseScale = 1 } = options;
+    const totalScale = baseScale * scale;
+    // 1. Center the image (if using top:50% left:50%)
+    const center = needsCentering ? 'translate(-50%, -50%)' : '';
+    // 2. Apply the scaling (base x zoom) FIRST
+    // This ensures the position offset is relative to the scaled visual size
+    const zoom = `scale(${totalScale})`;
+    // 3. Apply the offset (positionX/Y) AFTER scaling
+    // Position values are stored as percentage of CONTAINER
+    // Since scale is applied first, the translate is relative to the scaled visual size
+    const offset = `translate(${positionX}%, ${positionY}%)`;
+    // Combining them: Center first, then scale, then move
+    // Order matters: scale before translate ensures position is relative to visual size
+    return `${center} ${zoom} ${offset}`.trim();
+}
+export function getImageFilter(brightness = 100, blur = 0) {
+    if (brightness === 100 && blur === 0)
+        return undefined;
+    return `brightness(${brightness}%) blur(${blur}px)`;
+}

package/src/views/ImageManager.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Image Manager View
+ * Main view for managing uploaded images
+ */
+export interface ImageManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function ImageManagerView({ siteId, locale }: ImageManagerViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageManager.d.ts.map

package/src/views/ImageManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAczE"}

package/src/views/ImageManager.js

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

package/src/components/GlobalImageEditor/GlobalImageEditor.tsx

@@ -1,374 +0,0 @@
-/**
- * Global Image Editor Component
- * Allows clicking on any image in the client app to edit it (admin/dev only)
- * 
- * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- */
-
-'use client';
-
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { X, Edit2 } from 'lucide-react';
-import { ImagePicker } from '../ImagePicker';
-import type { ImageMetadata } from '../../types';
-import type { SelectedImage, PendingTransform } from './types';
-import { getPluginConfig } from './config';
-import { parseImageData } from './imageDetection';
-import { setupImageHandlers } from './imageSetup';
-import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './saveLogic';
-import { handleImageChange, handleBrightnessChange, handleBlurChange } from './eventHandlers';
-
-export function GlobalImageEditor() {
-    // Configuration
-    const config = useMemo(() => getPluginConfig(), []);
-    
-    // State
-    const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [userRole, setUserRole] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-
-    // Refs for save debouncing
-    const saveTransformTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const pendingTransformRef = useRef<PendingTransform | null>(null);
-
-    // Check if user is admin/dev
-    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')) {
-                    setUserRole(data.user.role);
-                }
-            } catch (error) {
-                console.error('Failed to check user role:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-
-    // Listen for open-image-editor custom event from Image/BackgroundImage components
-    useEffect(() => {
-        if (!userRole) return;
-
-        const handleOpenEditor = async (e: CustomEvent) => {
-            const { id, currentBrightness, currentBlur } = e.detail || {};
-            if (!id) return;
-
-            console.log('[GlobalImageEditor] open-image-editor event received for id:', id);
-
-            // Find the element by data-image-id or data-background-image-id
-            let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`) as HTMLElement;
-            
-            if (!element) {
-                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`) as HTMLElement;
-            }
-
-            if (!element) {
-                console.error('[GlobalImageEditor] Element not found for id:', id);
-                return;
-            }
-
-            // Extract semantic ID
-            const semanticId = element.getAttribute('data-image-id') || 
-                             element.getAttribute('data-background-image-id') || 
-                             id;
-
-            // Parse image data
-            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
-            
-            if (!imageData) {
-                console.error('[GlobalImageEditor] Failed to parse image data');
-                return;
-            }
-
-            // Store semantic ID on element if not already set
-            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
-                element.setAttribute('data-background-image-id', semanticId);
-            } else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
-                element.setAttribute('data-image-id', semanticId);
-            }
-
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        };
-
-        window.addEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-
-        return () => {
-            window.removeEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-        };
-    }, [userRole]);
-
-    // Add click handlers to all images
-    useEffect(() => {
-        if (isLoading || !userRole) {
-            console.log('[GlobalImageEditor] Skipping image handlers - isLoading:', isLoading, 'userRole:', userRole);
-            return;
-        }
-
-        console.log('[GlobalImageEditor] Setting up image handlers for role:', userRole);
-        
-        const cleanup = setupImageHandlers((imageData) => {
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        });
-
-        // Setup immediately and also after a short delay to catch dynamically loaded images
-        const timeoutId = setTimeout(() => {
-            const cleanup2 = setupImageHandlers((imageData) => {
-                setSelectedImage(imageData);
-                setIsOpen(true);
-            });
-            // Note: This creates a new cleanup, but the first one will handle the initial setup
-        }, 500);
-        
-        return () => {
-            clearTimeout(timeoutId);
-            cleanup();
-        };
-    }, [isLoading, userRole]);
-
-    // Save image transform (scale/position) to API with debouncing
-    const saveImageTransformHandler = useCallback(async (
-        scale: number,
-        positionX: number,
-        positionY: number,
-        immediate: boolean = false,
-        brightnessOverride?: number,
-        blurOverride?: number
-    ) => {
-        if (!selectedImage) return;
-
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') || 
-                         element.getAttribute('data-background-image-id');
-        
-        if (!semanticId) return;
-
-        const filename = await getFilename(semanticId, selectedImage);
-        if (!filename) {
-            console.error('[GlobalImageEditor] getFilename returned null for semanticId:', semanticId);
-            return;
-        }
-        console.log('[GlobalImageEditor] getFilename returned:', filename, 'for semanticId:', semanticId);
-
-        // Use override values if provided, otherwise use selectedImage values
-        // IMPORTANT: Overrides contain the latest values from the editor
-        const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : (selectedImage?.brightness ?? 100);
-        const finalBlur = blurOverride !== undefined ? blurOverride : (selectedImage?.blur ?? 0);
-
-        // Store pending transform
-        pendingTransformRef.current = { 
-            scale, 
-            positionX, 
-            positionY,
-            semanticId,
-            filename
-        };
-
-        // Clear existing timeout
-        if (saveTransformTimeoutRef.current) {
-            clearTimeout(saveTransformTimeoutRef.current);
-            saveTransformTimeoutRef.current = null;
-        }
-
-        // If immediate save is requested (e.g., when "Done" is clicked), save right away
-        if (immediate) {
-            const normalizedPositionX = normalizePosition(positionX);
-            const normalizedPositionY = normalizePosition(positionY);
-
-            console.log('[GlobalImageEditor] Immediate save to API:', { semanticId, filename, scale, normalizedPositionX, normalizedPositionY, finalBrightness, finalBlur });
-            await saveTransformToAPI(
-                semanticId,
-                filename,
-                scale,
-                normalizedPositionX,
-                normalizedPositionY,
-                finalBrightness,
-                finalBlur
-            );
-            pendingTransformRef.current = null;
-            return;
-        }
-
-        // Debounce: save after 300ms of no changes
-        saveTransformTimeoutRef.current = setTimeout(async () => {
-            const pending = pendingTransformRef.current;
-            if (pending && selectedImage) {
-                await flushPendingSave(pending, selectedImage);
-            }
-        }, 300);
-    }, [selectedImage]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (saveTransformTimeoutRef.current) {
-                clearTimeout(saveTransformTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    // Event handlers
-    const handleImageChangeWrapper = useCallback(async (image: ImageMetadata | null) => {
-        if (!selectedImage) return;
-        await handleImageChange(image, selectedImage, handleClose);
-    }, [selectedImage]);
-
-    const handleBrightnessChangeWrapper = useCallback(async (brightness: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
-        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleBlurChangeWrapper = useCallback(async (blur: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
-        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleEditorSave = useCallback(async (
-        finalScale: number,
-        finalPositionX: number,
-        finalPositionY: number,
-        finalBrightness?: number,
-        finalBlur?: number
-    ) => {
-        console.log('[GlobalImageEditor] handleEditorSave callback created/updated');
-        console.log('[GlobalImageEditor] handleEditorSave called:', { finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur, hasSelectedImage: !!selectedImage });
-        if (selectedImage) {
-            // Use provided values if they're not undefined, otherwise fall back to selectedImage values
-            // Note: 0 is a valid value for blur, so we check for undefined explicitly
-            const brightness = finalBrightness !== undefined ? finalBrightness : selectedImage.brightness;
-            const blur = finalBlur !== undefined ? finalBlur : selectedImage.blur;
-            
-            const updated = { 
-                ...selectedImage, 
-                scale: finalScale, 
-                positionX: finalPositionX, 
-                positionY: finalPositionY,
-                brightness,
-                blur,
-            };
-            setSelectedImage(updated);
-            
-            console.log('[GlobalImageEditor] Calling saveImageTransformHandler with:', { finalScale, finalPositionX, finalPositionY, brightness, blur, immediate: true });
-            // Only save once when editor closes with all final values
-            // ImagePicker prevents duplicate calls by not calling individual handlers when onEditorSave is provided
-            await saveImageTransformHandler(
-                finalScale, 
-                finalPositionX, 
-                finalPositionY, 
-                true, 
-                brightness, 
-                blur
-            );
-        } else {
-            console.error('[GlobalImageEditor] handleEditorSave called but selectedImage is null!');
-        }
-    }, [selectedImage, saveImageTransformHandler]);
-
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-        setSelectedImage(null);
-    }, []);
-
-    // Don't render if disabled or user is not admin/dev
-    if (!config.enabled || isLoading || !userRole) {
-        return null;
-    }
-
-    if (!isOpen || !selectedImage) {
-        return null;
-    }
-
-    return (
-        <div 
-            className={`fixed inset-0 z-[9999] flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
-            data-image-editor="true"
-            onClick={(e) => {
-                if (e.target === e.currentTarget) {
-                    handleClose();
-                }
-            }}
-        >
-            <div 
-                className={`relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-7xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* Header */}
-                <div className="flex items-center justify-between p-6 border-b dark:border-neutral-800">
-                    <h2 className="text-2xl font-bold dark:text-white">Edit Image</h2>
-                    <button
-                        onClick={handleClose}
-                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                        aria-label="Close editor"
-                    >
-                        <X className="w-5 h-5" />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="p-6">
-                    <ImagePicker
-                        value={selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc}
-                        onChange={handleImageChangeWrapper}
-                        brightness={selectedImage.brightness}
-                        blur={selectedImage.blur}
-                        scale={selectedImage.scale}
-                        positionX={selectedImage.positionX}
-                        positionY={selectedImage.positionY}
-                        onBrightnessChange={handleBrightnessChangeWrapper}
-                        onBlurChange={handleBlurChangeWrapper}
-                        onEditorSave={handleEditorSave}
-                        onScaleChange={async (newScale) => {
-                            console.log('[GlobalImageEditor] onScaleChange called:', newScale);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, scale: newScale };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY, false);
-                            }
-                        }}
-                        onPositionXChange={async (newPositionX) => {
-                            console.log('[GlobalImageEditor] onPositionXChange called:', newPositionX);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionX: newPositionX };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY, false);
-                            }
-                        }}
-                        onPositionYChange={async (newPositionY) => {
-                            console.log('[GlobalImageEditor] onPositionYChange called:', newPositionY);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionY: newPositionY };
-                                setSelectedImage(updated);
-                                // If onEditorSave wasn't provided, this might be called when editor closes
-                                // In that case, we should save immediately with all current values including brightness/blur
-                                // We'll save immediately to ensure the final state is persisted
-                                await saveImageTransformHandler(
-                                    updated.scale, 
-                                    updated.positionX, 
-                                    newPositionY, 
-                                    true, // Save immediately - this is likely the final callback when editor closes
-                                    updated.brightness,
-                                    updated.blur
-                                );
-                            }
-                        }}
-                        onEditorSave={handleEditorSave}
-                        showEffects={true}
-                        darkMode={false}
-                        aspectRatio={selectedImage.aspectRatio}
-                        borderRadius={selectedImage.borderRadius}
-                        objectFit={selectedImage.objectFit}
-                        objectPosition={selectedImage.objectPosition}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}