@jhits/plugin-images 0.0.6 → 0.0.7

package/dist/components/GlobalImageEditor.js

@@ -0,0 +1,232 @@
+/**
+ * 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { ImagePicker } from './ImagePicker';
+import { getPluginConfig } from './GlobalImageEditor/config';
+import { parseImageData } from './GlobalImageEditor/imageDetection';
+import { setupImageHandlers } from './GlobalImageEditor/imageSetup';
+import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './GlobalImageEditor/saveLogic';
+import { handleImageChange, handleBrightnessChange, handleBlurChange } from './GlobalImageEditor/eventHandlers';
+export function GlobalImageEditor() {
+    // Configuration
+    const config = useMemo(() => getPluginConfig(), []);
+    // State
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [userRole, setUserRole] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Refs for save debouncing
+    const saveTransformTimeoutRef = useRef(null);
+    const pendingTransformRef = useRef(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) => {
+            const { id, currentBrightness, currentBlur } = e.detail || {};
+            if (!id)
+                return;
+            // 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}"]`);
+            if (!element) {
+                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`);
+            }
+            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);
+        return () => {
+            window.removeEventListener('open-image-editor', handleOpenEditor);
+        };
+    }, [userRole]);
+    // Add click handlers to all images
+    useEffect(() => {
+        if (isLoading || !userRole) {
+            return;
+        }
+        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, positionX, positionY, immediate = false, brightnessOverride, blurOverride) => {
+        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)
+            return;
+        // 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);
+            // 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);
+            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) => {
+        if (!selectedImage)
+            return;
+        await handleImageChange(image, selectedImage, handleClose);
+    }, [selectedImage]);
+    const handleBrightnessChangeWrapper = useCallback(async (brightness) => {
+        if (!selectedImage)
+            return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+    const handleBlurChangeWrapper = useCallback(async (blur) => {
+        if (!selectedImage)
+            return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+    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 (_jsx("div", { className: `fixed inset-0 z-50 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();
+            }
+        }, children: _jsxs("div", { className: `relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b dark:border-neutral-800", children: [_jsx("h2", { className: "text-2xl font-bold dark:text-white", children: "Edit Image" }), _jsx("button", { onClick: handleClose, className: "p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", "aria-label": "Close editor", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "p-6", children: _jsx(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, onScaleChange: async (newScale) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, scale: newScale };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY);
+                            }
+                        }, onPositionXChange: async (newPositionX) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionX: newPositionX };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY);
+                            }
+                        }, onPositionYChange: async (newPositionY) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionY: newPositionY };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, updated.positionX, newPositionY);
+                            }
+                        }, onEditorSave: async (finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
+                            if (selectedImage) {
+                                // Update selectedImage with final values
+                                // Use provided brightness/blur if available, otherwise use current values
+                                const updated = {
+                                    ...selectedImage,
+                                    scale: finalScale,
+                                    positionX: finalPositionX,
+                                    positionY: finalPositionY,
+                                    brightness: finalBrightness !== undefined ? finalBrightness : selectedImage.brightness,
+                                    blur: finalBlur !== undefined ? finalBlur : selectedImage.blur
+                                };
+                                setSelectedImage(updated);
+                                // Save with the final brightness and blur values
+                                await saveImageTransformHandler(finalScale, finalPositionX, finalPositionY, true, updated.brightness, updated.blur);
+                            }
+                        }, showEffects: true, darkMode: false, aspectRatio: selectedImage.aspectRatio, borderRadius: selectedImage.borderRadius, objectFit: selectedImage.objectFit, objectPosition: selectedImage.objectPosition }) })] }) }));
+}

package/dist/components/Image.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface PluginImageProps {
+    id: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    fill?: boolean;
+    sizes?: string;
+    priority?: boolean;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+    style?: React.CSSProperties;
+    editable?: boolean;
+    scale?: number;
+    positionX?: number;
+    positionY?: number;
+    brightness?: number;
+    blur?: number;
+}
+export declare function Image({ id, alt, width, height, className, fill, sizes, priority, objectFit, objectPosition, style, editable, ...props }: PluginImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/components/Image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,MAAM,EACN,SAAc,EACd,IAAY,EACZ,KAAK,EACL,QAAgB,EAChB,SAAmB,EACnB,cAAyB,EACzB,KAAK,EACL,QAAe,EACf,GAAG,KAAK,EACX,EAAE,gBAAgB,2CA2SlB"}

package/dist/components/Image.js

@@ -0,0 +1,227 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NextImage from 'next/image';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Edit2, Loader2 } from 'lucide-react';
+import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { getFallbackImageUrl } from '../utils/fallback';
+export function Image({ id, alt, width, height, className = '', fill = false, sizes, priority = false, objectFit = 'cover', objectPosition = 'center', style, editable = true, ...props // Using rest for override props
+ }) {
+    // 1. State management (Local only, used if props are undefined)
+    const [apiData, setApiData] = useState({
+        filename: null,
+        brightness: 100,
+        blur: 0,
+        scale: 1.0,
+        positionX: 0,
+        positionY: 0,
+    });
+    const [isResolving, setIsResolving] = useState(true);
+    const [baseScale, setBaseScale] = useState(1);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const imageRef = useRef(null);
+    const containerRef = useRef(null);
+    // 2. Derive "Effective" values (Prop > Local State)
+    const effective = useMemo(() => ({
+        brightness: props.brightness ?? apiData.brightness,
+        blur: props.blur ?? apiData.blur,
+        scale: props.scale ?? apiData.scale,
+        positionX: props.positionX ?? apiData.positionX,
+        positionY: props.positionY ?? apiData.positionY,
+        filename: apiData.filename || id
+    }), [props, apiData, id]);
+    // 3. Optimized Image Resolution
+    const fetchImageMetadata = useCallback(async (targetId) => {
+        const isLikelyPath = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(targetId) || /^\d+-/.test(targetId);
+        if (isLikelyPath) {
+            setApiData(prev => ({ ...prev, filename: targetId }));
+            setIsResolving(false);
+            return;
+        }
+        try {
+            const res = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(targetId)}`);
+            if (!res.ok)
+                throw new Error();
+            const data = await res.json();
+            const apiPositionX = data.positionX ?? 0;
+            const apiPositionY = data.positionY ?? 0;
+            const apiScale = data.scale ?? 1.0;
+            setApiData({
+                filename: data.filename || targetId,
+                brightness: data.brightness ?? 100,
+                blur: data.blur ?? 0,
+                scale: apiScale,
+                positionX: apiPositionX,
+                positionY: apiPositionY,
+            });
+            // Reset error state when resolution succeeds (in case it was set during pre-check)
+            setImageError(false);
+        }
+        catch {
+            setApiData(prev => ({ ...prev, filename: targetId }));
+        }
+        finally {
+            setIsResolving(false);
+        }
+    }, []);
+    // 4. Auth Check (Single mount only)
+    useEffect(() => {
+        if (!editable)
+            return;
+        fetch('/api/me')
+            .then(res => res.json())
+            .then(data => {
+            if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
+                setIsAuthenticated(true);
+            }
+        })
+            .catch(() => setIsAuthenticated(false));
+    }, [editable]);
+    // 5. Stable Event Listener (Prevents closure staleness)
+    // Only fetch from API if props are not provided (parent controls the values)
+    const hasProps = props.scale !== undefined || props.positionX !== undefined || props.positionY !== undefined || props.brightness !== undefined || props.blur !== undefined;
+    useEffect(() => {
+        fetchImageMetadata(id);
+        // Only listen to events if props are not provided
+        if (hasProps)
+            return;
+        const handleUpdate = (e) => {
+            if (e.detail?.id === id) {
+                // Only update if the event contains new data
+                const eventData = e.detail;
+                if (eventData.scale !== undefined || eventData.positionX !== undefined || eventData.positionY !== undefined || eventData.brightness !== undefined || eventData.blur !== undefined) {
+                    // Update local state directly from event to avoid unnecessary API call
+                    setApiData(prev => ({
+                        ...prev,
+                        brightness: eventData.brightness ?? prev.brightness,
+                        blur: eventData.blur ?? prev.blur,
+                        scale: eventData.scale ?? prev.scale,
+                        positionX: eventData.positionX ?? prev.positionX,
+                        positionY: eventData.positionY ?? prev.positionY,
+                    }));
+                }
+            }
+        };
+        window.addEventListener('image-mapping-updated', handleUpdate);
+        return () => window.removeEventListener('image-mapping-updated', handleUpdate);
+    }, [id, fetchImageMetadata, hasProps]);
+    // 6. Layout & Transforms
+    const calculateBaseScale = useCallback(() => {
+        if (!imageRef.current || !containerRef.current)
+            return;
+        const containerWidth = containerRef.current.offsetWidth;
+        const containerHeight = containerRef.current.offsetHeight;
+        // Ensure container has dimensions before calculating
+        if (containerWidth === 0 || containerHeight === 0) {
+            // Try to get dimensions from computed styles or parent
+            const parentWidth = containerRef.current.parentElement?.clientWidth;
+            const parentHeight = containerRef.current.parentElement?.clientHeight;
+            if (parentWidth && parentHeight && imageRef.current.naturalWidth > 0) {
+                const widthRatio = parentWidth / imageRef.current.naturalWidth;
+                const heightRatio = parentHeight / imageRef.current.naturalHeight;
+                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
+                setBaseScale(calculatedBaseScale);
+            }
+            return;
+        }
+        if (imageRef.current.naturalWidth === 0 || imageRef.current.naturalHeight === 0)
+            return;
+        const widthRatio = containerWidth / imageRef.current.naturalWidth;
+        const heightRatio = containerHeight / imageRef.current.naturalHeight;
+        const calculatedBaseScale = Math.max(widthRatio, heightRatio);
+        setBaseScale(calculatedBaseScale);
+    }, []);
+    // Only construct image URL if we have a valid filename (not a semantic ID)
+    // Check if filename looks like an actual file (has extension or starts with timestamp)
+    const filename = effective.filename;
+    const hasFileExtension = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(filename);
+    const looksLikeTimestamp = /^\d+-/.test(filename);
+    const isValidFilename = hasFileExtension || looksLikeTimestamp;
+    // Don't construct URL until resolution is complete AND we have a valid filename
+    const shouldConstructUrl = !isResolving && isValidFilename;
+    const baseSrc = shouldConstructUrl ? `/api/uploads/${encodeURIComponent(filename)}` : null;
+    const src = imageError ? getFallbackImageUrl() : (baseSrc || getFallbackImageUrl());
+    const shouldFill = fill || className.includes('w-full') || className.includes('h-full');
+    const hasTransforms = effective.scale !== 1 || effective.positionX !== 0 || effective.positionY !== 0;
+    // Pre-check image URL to detect errors early (only for valid filenames after resolution)
+    useEffect(() => {
+        // Don't check if:
+        // 1. Already in error state
+        // 2. Still resolving
+        // 3. No valid base src
+        // 4. Base src is the fallback URL
+        if (imageError || isResolving || !baseSrc || baseSrc === getFallbackImageUrl() || !isValidFilename)
+            return;
+        const testImg = document.createElement('img');
+        const handleError = () => {
+            setImageError(true);
+        };
+        const handleLoad = () => {
+            setImageError(false);
+        };
+        testImg.onerror = handleError;
+        testImg.onload = handleLoad;
+        testImg.src = baseSrc;
+        return () => {
+            testImg.onerror = null;
+            testImg.onload = null;
+        };
+    }, [baseSrc, imageError, isResolving, isValidFilename]);
+    // Recalculate baseScale when container is resized
+    useEffect(() => {
+        if (!hasTransforms || !shouldFill || !containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            calculateBaseScale();
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, [hasTransforms, shouldFill, calculateBaseScale]);
+    const transformStyle = hasTransforms && baseScale > 0 ? (() => {
+        return getImageTransform({
+            scale: effective.scale,
+            positionX: effective.positionX,
+            positionY: effective.positionY,
+            baseScale
+        }, true);
+    })() : undefined;
+    const filterStyle = getImageFilter(effective.brightness, effective.blur);
+    return (_jsxs("div", { ref: containerRef, className: `group/image relative overflow-hidden transition-all duration-300 ${className}`, style: {
+            ...style,
+            filter: filterStyle || style?.filter,
+            // Ensure container has explicit positioning context
+            position: 'relative',
+        }, "data-image-id": id, children: [isResolving && (_jsx("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 animate-pulse", children: _jsx(Loader2, { className: "w-5 h-5 animate-spin text-neutral-400" }) })), hasTransforms && shouldFill ? (baseSrc ? (_jsx("img", { ref: imageRef, src: src, alt: alt, loading: priority ? 'eager' : 'lazy', onLoad: calculateBaseScale, onError: () => setImageError(true), className: "absolute max-w-none select-none", style: {
+                    top: '50%',
+                    left: '50%',
+                    width: 'auto', // Allow image to maintain natural aspect ratio
+                    height: 'auto', // Allow image to maintain natural aspect ratio
+                    minWidth: '100%', // Ensure image covers container width
+                    minHeight: '100%', // Ensure image covers container height
+                    transform: baseScale > 0 && transformStyle
+                        ? transformStyle
+                        : 'translate(-50%, -50%)',
+                    transformOrigin: 'center center',
+                    position: 'absolute',
+                }, draggable: false })) : null) : imageError || !baseSrc ? (
+            // Fallback to regular img tag when error occurs or no valid filename yet
+            _jsx("img", { src: getFallbackImageUrl(), alt: alt, loading: priority ? 'eager' : 'lazy', className: `transition-all duration-500 ${editable ? 'group-hover/image:scale-105' : ''}`, style: {
+                    objectFit,
+                    objectPosition,
+                    width: shouldFill ? '100%' : width,
+                    height: shouldFill ? '100%' : height,
+                    ...(transformStyle ? { transform: transformStyle } : {}),
+                    ...style,
+                } })) : (_jsx(NextImage, { src: src, alt: alt, width: !shouldFill ? width : undefined, height: !shouldFill ? height : undefined, fill: shouldFill, sizes: sizes || (shouldFill ? "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" : undefined), priority: priority, loading: priority ? 'eager' : undefined, className: `transition-all duration-500 ${editable ? 'group-hover/image:scale-105' : ''}`, style: {
+                    objectFit,
+                    objectPosition,
+                    ...(transformStyle ? { transform: transformStyle } : {}),
+                    ...style,
+                } })), editable && isAuthenticated && (_jsx("button", { onClick: (e) => {
+                    e.preventDefault();
+                    window.dispatchEvent(new CustomEvent('open-image-editor', {
+                        detail: { id, currentBrightness: effective.brightness, currentBlur: effective.blur }
+                    }));
+                }, className: "absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 backdrop-blur-[2px]", children: _jsxs("div", { className: "flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl", children: [_jsx(Edit2, { size: 14, className: "text-primary" }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Edit" })] }) }))] }));
+}

package/dist/components/ImageBrowserModal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ImageMetadata } from '../types';
+export interface ImageBrowserModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectImage: (image: ImageMetadata) => void;
+    selectedImageId?: string;
+    darkMode?: boolean;
+    onUpload?: (file: File) => Promise<void>;
+    uploading?: boolean;
+}
+export declare function ImageBrowserModal({ isOpen, onClose, onSelectImage, selectedImageId, darkMode, onUpload, uploading, }: ImageBrowserModalProps): React.ReactPortal | null;
+//# sourceMappingURL=ImageBrowserModal.d.ts.map

package/dist/components/ImageBrowserModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBrowserModal.d.ts","sourceRoot":"","sources":["../../src/components/ImageBrowserModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8P9C,MAAM,WAAW,sBAAsB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAID,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,aAAa,EACb,eAAe,EACf,QAAgB,EAChB,QAAQ,EACR,SAAiB,GACpB,EAAE,sBAAsB,4BA6iBxB"}