@jhits/plugin-images 0.0.13 → 0.0.15

package/dist/components/Image.js

@@ -1,227 +1,124 @@
 '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 { useState, useEffect, useCallback } 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,
+export let authCache = null;
+let authFetching = null;
+export async function checkAuthOnce() {
+    if (authCache !== null)
+        return authCache;
+    if (authFetching)
+        return authFetching;
+    authFetching = fetch('/api/me')
+        .then(res => res.json())
+        .then(data => {
+        const isAuth = data.loggedIn && ['admin', 'dev'].includes(data.user?.role);
+        authCache = isAuth;
+        return isAuth;
+    })
+        .catch(() => {
+        authCache = false;
+        return false;
     });
+    return authFetching;
+}
+export function Image({ id, alt, width, height, className = '', fill = false, sizes, priority = false, objectFit = 'cover', objectPosition = 'center', style, editable = true, }) {
+    const [resolvedFilename, setResolvedFilename] = useState(null);
     const [isResolving, setIsResolving] = useState(true);
-    const [baseScale, setBaseScale] = useState(1);
+    const [brightness, setBrightness] = useState(100);
+    const [blur, setBlur] = useState(0);
     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);
+    const [authChecked, setAuthChecked] = useState(false);
+    // Check authentication status if editable is true (default)
+    useEffect(() => {
+        if (editable && !authChecked) {
+            const checkAuth = async () => {
+                try {
+                    const res = await fetch('/api/me');
+                    const data = await res.json();
+                    if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
+                        setIsAuthenticated(true);
+                    }
+                }
+                catch (error) {
+                    // User is not authenticated or API call failed
+                    setIsAuthenticated(false);
+                }
+                finally {
+                    setAuthChecked(true);
+                }
+            };
+            checkAuth();
         }
-        catch {
-            setApiData(prev => ({ ...prev, filename: targetId }));
+        else if (!editable) {
+            // If explicitly set to false, skip auth check
+            setAuthChecked(true);
         }
-        finally {
+    }, [editable, authChecked]);
+    // Only allow editing if editable is true AND user is authenticated
+    const canEdit = editable && isAuthenticated;
+    const resolveImage = useCallback(() => {
+        const looksLikeFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(id) || /^\d+-/.test(id);
+        if (looksLikeFilename) {
+            setResolvedFilename(id);
             setIsResolving(false);
-        }
-    }, []);
-    // 4. Auth Check (Single mount only)
-    useEffect(() => {
-        if (!editable)
             return;
-        fetch('/api/me')
-            .then(res => res.json())
+        }
+        fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(id)}`)
+            .then(res => res.ok ? res.json() : { filename: id, brightness: 100, blur: 0 })
             .then(data => {
-            if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
-                setIsAuthenticated(true);
-            }
+            setResolvedFilename(data.filename || id);
+            setBrightness(data.brightness ?? 100);
+            setBlur(data.blur ?? 0);
+            setIsResolving(false);
         })
-            .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;
+            .catch(() => {
+            setResolvedFilename(id);
+            setBrightness(100);
+            setBlur(0);
+            setIsResolving(false);
+        });
+    }, [id]);
     useEffect(() => {
-        fetchImageMetadata(id);
-        // Only listen to events if props are not provided
-        if (hasProps)
-            return;
-        const handleUpdate = (e) => {
+        resolveImage();
+        const handleMappingUpdate = (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,
-                    }));
-                }
+                setIsResolving(true);
+                if (e.detail.brightness !== undefined)
+                    setBrightness(e.detail.brightness);
+                if (e.detail.blur !== undefined)
+                    setBlur(e.detail.blur);
+                setTimeout(() => resolveImage(), 100);
             }
         };
-        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());
+        window.addEventListener('image-mapping-updated', handleMappingUpdate);
+        return () => window.removeEventListener('image-mapping-updated', handleMappingUpdate);
+    }, [id, resolveImage]);
+    const src = resolvedFilename
+        ? `/api/uploads/${encodeURIComponent(resolvedFilename)}`
+        : `/api/uploads/${encodeURIComponent(id)}`;
+    // Logic: If the user passes 'w-full' or 'h-full', or explicit 'fill', 
+    // we must use Next.js fill mode to make object-fit work.
     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: {
+    // Default sizes for fill images when not provided - use unoptimized since these are API routes
+    const imageSizes = shouldFill ? (sizes || undefined) : sizes;
+    const filterStyle = brightness !== 100 || blur !== 0
+        ? `brightness(${brightness}%) blur(${blur}px)`
+        : undefined;
+    const handleEditClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(new CustomEvent('open-image-editor', {
+            detail: { id, currentBrightness: brightness, currentBlur: blur }
+        }));
+    };
+    return (_jsxs("div", { 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" })] }) }))] }));
+            filter: filterStyle || style?.filter,
+        }, "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" }) })), _jsx(NextImage, { src: src, alt: alt, width: !shouldFill ? width : undefined, height: !shouldFill ? height : undefined, fill: shouldFill, sizes: imageSizes, unoptimized: true, priority: priority, className: `transition-all duration-500 ease-in-out ${editable ? 'group-hover/image:scale-105' : ''}`, style: {
+                    objectFit: objectFit,
+                    objectPosition: objectPosition,
+                } }), canEdit && (_jsxs("div", { onClick: handleEditClick, className: "absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 cursor-pointer", children: [_jsx("div", { className: "absolute inset-0 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]" }), _jsxs("div", { className: "relative flex items-center gap-2 px-4 py-2.5 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl scale-90 group-hover/image:scale-100 transition-all duration-300 border border-neutral-300 dark:border-neutral-700", children: [_jsx(Edit2, { size: 14, strokeWidth: 2.5, className: "text-primary" }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest", children: "Edit" })] })] }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH;AAED,eAAO,MAAM,WAAW,4FAuStB,CAAC"}
+{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH;AAED,eAAO,MAAM,WAAW,4FAqItB,CAAC"}

package/dist/components/ImageEditor.js

@@ -1,172 +1,68 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo } from 'react';
-import { ZoomIn, RotateCcw, Maximize2, Sun, Droplets } from 'lucide-react';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { useState, useRef, useEffect, useImperativeHandle, forwardRef, useMemo } from 'react';
+import { RotateCcw, Maximize2 } from 'lucide-react';
+import { getImageFilter } from '../utils/transforms';
 export const ImageEditor = forwardRef(({ imageUrl, scale, positionX, positionY, brightness = 100, blur = 0, onScaleChange, onPositionChange, onBrightnessChange, onBlurChange, aspectRatio = '16/9', borderRadius = 'rounded-xl', imageId, }, ref) => {
     const containerRef = useRef(null);
-    const imageRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
     const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
-    const [baseScale, setBaseScale] = useState(0);
-    // Local state for brightness and blur (only applied on save)
     const [localBrightness, setLocalBrightness] = useState(brightness);
     const [localBlur, setLocalBlur] = useState(blur);
-    // Keep internal values in a ref to avoid stale closure issues during the final save
-    const currentValues = useRef({ scale, positionX, positionY, brightness, blur });
-    useEffect(() => {
-        currentValues.current = { scale, positionX, positionY, brightness: localBrightness, blur: localBlur };
-    }, [scale, positionX, positionY, localBrightness, localBlur]);
-    // Reset local values when props change (when editor opens with new values)
     useEffect(() => {
         setLocalBrightness(brightness);
         setLocalBlur(blur);
     }, [brightness, blur]);
-    // EXPOSE TO PARENT: Return current values so Parent can handle the DB Save
     useImperativeHandle(ref, () => ({
         flushSave: async () => {
-            // Read the latest values directly from props/state (they're in the dependency array, so they're current)
-            // The ref is kept in sync via useEffect, but read directly from props to avoid any timing issues
-            const latestScale = scale;
-            const latestPositionX = positionX;
-            const latestPositionY = positionY;
-            const latestBrightness = localBrightness;
-            const latestBlur = localBlur;
-            // Update the ref to ensure it's in sync (for any other code that might read it)
-            currentValues.current = {
-                scale: latestScale,
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
-            };
-            // DON'T call onBrightnessChange/onBlurChange here - they trigger saves
-            // The parent (via onEditorSave) will handle saving all values together
-            // This prevents duplicate saves
             return {
-                scale: Math.max(0.1, Math.min(5.0, latestScale)),
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
+                scale: Math.max(0.1, Math.min(5.0, scale)),
+                positionX: positionX,
+                positionY: positionY,
+                brightness: localBrightness,
+                blur: localBlur
             };
         }
     }), [scale, positionX, positionY, localBrightness, localBlur]);
-    const getClampedPosition = useCallback((x, y, currentScale) => {
-        if (!containerRef.current || !imageRef.current || baseScale === 0)
-            return { x, y };
-        const totalScale = baseScale * currentScale;
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
-        // With minWidth/minHeight, the image maintains its natural aspect ratio
-        // but is scaled to cover the container. The scaled dimensions are based on natural size.
-        const scaledWidth = imageRef.current.naturalWidth * totalScale;
-        const scaledHeight = imageRef.current.naturalHeight * totalScale;
-        const overflowX = Math.max(0, (scaledWidth - containerWidth) / 2);
-        const overflowY = Math.max(0, (scaledHeight - containerHeight) / 2);
-        // Convert overflow limits to percentage of CONTAINER (not natural size)
-        // Position values are container-relative, so limits must be too
-        const limitX = containerWidth > 0 ? (overflowX / containerWidth) * 100 : 0;
-        const limitY = containerHeight > 0 ? (overflowY / containerHeight) * 100 : 0;
-        return { x: Math.max(-limitX, Math.min(limitX, x)), y: Math.max(-limitY, Math.min(limitY, y)) };
-    }, [baseScale]);
     const handleScaleChange = (newScale) => {
-        const s = Math.max(0.1, Math.min(5.0, newScale));
-        onScaleChange(s);
-        const clamped = getClampedPosition(positionX, positionY, s);
-        onPositionChange(clamped.x, clamped.y);
+        onScaleChange(Math.max(0.1, Math.min(5.0, newScale)));
     };
-    const calculateBaseScale = useCallback(() => {
-        if (!imageRef.current || !containerRef.current)
-            return;
-        const img = imageRef.current;
-        const container = containerRef.current;
-        const containerWidth = container.offsetWidth;
-        const containerHeight = container.offsetHeight;
-        // Ensure container has dimensions before calculating
-        if (containerWidth === 0 || containerHeight === 0) {
-            // Try to get dimensions from computed styles or parent
-            const parentWidth = container.parentElement?.clientWidth;
-            const parentHeight = container.parentElement?.clientHeight;
-            if (parentWidth && parentHeight && img.naturalWidth > 0) {
-                const widthRatio = parentWidth / img.naturalWidth;
-                const heightRatio = parentHeight / img.naturalHeight;
-                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-                setBaseScale(calculatedBaseScale);
-            }
-            return;
-        }
-        if (img.naturalWidth === 0 || img.naturalHeight === 0)
-            return;
-        setBaseScale(Math.max(containerWidth / img.naturalWidth, containerHeight / img.naturalHeight));
-    }, []);
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const obs = new ResizeObserver(calculateBaseScale);
-        obs.observe(containerRef.current);
-        return () => obs.disconnect();
-    }, [calculateBaseScale]);
     useEffect(() => {
         if (!isDragging)
             return;
         const move = (e) => {
-            if (!containerRef.current || !imageRef.current || baseScale === 0)
+            if (!containerRef.current)
                 return;
-            const rect = containerRef.current.getBoundingClientRect();
-            // Calculate movement in screen pixels
             const mouseDeltaX = e.clientX - dragStart.x;
             const mouseDeltaY = e.clientY - dragStart.y;
-            // Convert screen pixel movement to percentage of CONTAINER
-            // Since the image is now width: 100%; height: 100%, percentages are container-relative
-            // This makes position values consistent across different container sizes
-            const dx = containerRef.current && containerRef.current.offsetWidth > 0
-                ? (mouseDeltaX / containerRef.current.offsetWidth) * 100
-                : 0;
-            const dy = containerRef.current && containerRef.current.offsetHeight > 0
-                ? (mouseDeltaY / containerRef.current.offsetHeight) * 100
-                : 0;
-            const newPositionX = dragStartPosition.x + dx;
-            const newPositionY = dragStartPosition.y + dy;
-            const clamped = getClampedPosition(newPositionX, newPositionY, scale);
-            onPositionChange(clamped.x, clamped.y);
+            const dx = (mouseDeltaX / containerRef.current.offsetWidth) * 100;
+            const dy = (mouseDeltaY / containerRef.current.offsetHeight) * 100;
+            onPositionChange(dragStartPosition.x + dx, dragStartPosition.y + dy);
         };
         const up = () => setIsDragging(false);
         window.addEventListener('mousemove', move);
         window.addEventListener('mouseup', up);
         return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
-    }, [isDragging, dragStart, dragStartPosition, scale, baseScale, getClampedPosition, onPositionChange]);
+    }, [isDragging, dragStart, dragStartPosition, onPositionChange]);
     const aspectValue = useMemo(() => {
         if (aspectRatio === 'auto')
             return undefined;
         const [w, h] = aspectRatio.split('/').map(Number);
         return w / h;
     }, [aspectRatio]);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [_jsx("div", { className: "flex-1 bg-neutral-50 dark:bg-neutral-950 rounded-2xl p-4 lg:p-6 flex items-center justify-center border border-neutral-300 dark:border-neutral-700 relative group/canvas min-w-0", children: _jsx("div", { ref: containerRef, className: `relative shadow-2xl overflow-hidden ${borderRadius} bg-neutral-100 dark:bg-neutral-900 w-full max-w-full border border-neutral-200 dark:border-neutral-800`, style: { aspectRatio: aspectValue, height: aspectValue && aspectValue < 1 ? '400px' : 'auto', width: aspectValue && aspectValue < 1 ? 'auto' : '100%', cursor: isDragging ? 'grabbing' : 'grab' }, onMouseDown: (e) => {
+    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [_jsx("div", { className: "flex-1 bg-neutral-50 dark:bg-neutral-950 rounded-2xl p-4 lg:p-6 flex items-center justify-center border border-neutral-300 dark:border-neutral-700 relative group/canvas min-w-0", children: _jsx("div", { ref: containerRef, className: `relative shadow-2xl overflow-hidden ${borderRadius} bg-neutral-100 dark:bg-neutral-900 w-full max-w-full border border-neutral-200 dark:border-neutral-800`, style: {
+                        aspectRatio: aspectValue,
+                        cursor: isDragging ? 'grabbing' : 'grab'
+                    }, onMouseDown: (e) => {
                         setIsDragging(true);
                         setDragStart({ x: e.clientX, y: e.clientY });
-                        // Convert stored position to visual percentage for dragging
-                        // stored = visual, so we can use positionX directly as visual percentage
                         setDragStartPosition({ x: positionX, y: positionY });
                         e.preventDefault();
-                    }, children: _jsx("img", { ref: imageRef, src: imageUrl, alt: "Editor", onLoad: calculateBaseScale, 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
+                    }, children: _jsx("img", { src: imageUrl, alt: "Editor", className: "w-full h-full object-cover select-none pointer-events-none", style: {
                             filter: getImageFilter(localBrightness, localBlur),
-                            transform: baseScale > 0 ? getImageTransform({ scale, positionX, positionY, baseScale }, true) : 'translate(-50%, -50%)',
+                            transform: `translate(${positionX}%, ${positionY}%) scale(${scale})`,
                             transformOrigin: 'center center'
-                        }, draggable: false }) }) }), _jsx("div", { className: "w-full lg:w-80 space-y-4", children: _jsxs("div", { className: "p-6 bg-white dark:bg-neutral-900 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg dark:shadow-neutral-950/50 space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(ZoomIn, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Zoom Level"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(scale * 100), "%"] }), _jsx("button", { onClick: () => handleScaleChange(1), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset zoom", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0.1", max: "5", step: "0.01", value: scale, onChange: (e) => handleScaleChange(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] }), onBrightnessChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Sun, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Brightness"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(localBrightness), "%"] }), _jsx("button", { onClick: () => setLocalBrightness(100), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset brightness", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0", max: "200", step: "1", value: localBrightness, onChange: (e) => setLocalBrightness(parseInt(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), onBlurChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Droplets, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Blur"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [localBlur, "px"] }), _jsx("button", { onClick: () => setLocalBlur(0), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset blur", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0", max: "20", step: "0.5", value: localBlur, onChange: (e) => setLocalBlur(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("button", { onClick: () => onPositionChange(0, 0), className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30", children: [_jsx(Maximize2, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Center" })] }), _jsxs("button", { onClick: () => {
-                                        handleScaleChange(1);
-                                        if (onBrightnessChange)
-                                            setLocalBrightness(100);
-                                        if (onBlurChange)
-                                            setLocalBlur(0);
-                                        onPositionChange(0, 0);
-                                    }, className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30", children: [_jsx(RotateCcw, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Reset All" })] })] })] }) })] }));
+                        } }) }) }), _jsx("div", { className: "w-full lg:w-80 space-y-4", children: _jsxs("div", { className: "p-6 bg-white dark:bg-neutral-900 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg dark:shadow-neutral-950/50 space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: "Zoom Level" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary", children: [Math.round(scale * 100), "%"] }), _jsx("button", { onClick: () => handleScaleChange(1), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg", children: _jsx(RotateCcw, { size: 12 }) })] })] }), _jsx("input", { type: "range", min: "0.1", max: "5", step: "0.01", value: scale, onChange: (e) => handleScaleChange(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] }), onBrightnessChange && (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 mb-4 block", children: "Brightness" }), _jsx("input", { type: "range", min: "0", max: "200", step: "1", value: localBrightness, onChange: (e) => setLocalBrightness(parseInt(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), onBlurChange && (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 mb-4 block", children: "Blur" }), _jsx("input", { type: "range", min: "0", max: "20", step: "0.5", value: localBlur, onChange: (e) => setLocalBlur(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("button", { onClick: () => onPositionChange(0, 0), className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl border border-transparent hover:border-primary/20", children: [_jsx(Maximize2, { size: 16 }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest", children: "Center" })] }), _jsxs("button", { onClick: () => { handleScaleChange(1); setLocalBrightness(100); setLocalBlur(0); onPositionChange(0, 0); }, className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl border border-transparent hover:border-primary/20", children: [_jsx(RotateCcw, { size: 16 }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest", children: "Reset" })] })] })] }) })] }));
 });
 ImageEditor.displayName = 'ImageEditor';

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

@@ -1 +1 @@
-{"version":3,"file":"ImagePicker.d.ts","sourceRoot":"","sources":["../../src/components/ImagePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EAAE,QAAQ,EAAE,UAAgB,EAAE,IAAQ,EAAE,KAAW,EAAE,SAAa,EAAE,SAAa,EACtF,WAAoB,EAAE,YAA2B,EAAE,kBAAkB,EAAE,YAAY,EACnF,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAsB,GAC5F,EAAE,gBAAgB,2CAuPlB"}
+{"version":3,"file":"ImagePicker.d.ts","sourceRoot":"","sources":["../../src/components/ImagePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAOjD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EAAE,QAAQ,EAAE,UAAgB,EAAE,IAAQ,EAAE,KAAW,EAAE,SAAa,EAAE,SAAa,EACtF,WAAoB,EAAE,YAA2B,EAAE,kBAAkB,EAAE,YAAY,EACnF,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAsB,GAC5F,EAAE,gBAAgB,2CAmKlB"}