@jhits/plugin-images 0.0.8 → 0.0.10

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

@@ -1 +0,0 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["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/src/components/Image.js

@@ -1,229 +0,0 @@
-'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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(_a) {
-    var { id, alt, width, height, className = '', fill = false, sizes, priority = false, objectFit = 'cover', objectPosition = 'center', style, editable = true } = _a, props = __rest(_a, ["id", "alt", "width", "height", "className", "fill", "sizes", "priority", "objectFit", "objectPosition", "style", "editable"]) // 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(() => {
-        var _a, _b, _c, _d, _e;
-        return ({
-            brightness: (_a = props.brightness) !== null && _a !== void 0 ? _a : apiData.brightness,
-            blur: (_b = props.blur) !== null && _b !== void 0 ? _b : apiData.blur,
-            scale: (_c = props.scale) !== null && _c !== void 0 ? _c : apiData.scale,
-            positionX: (_d = props.positionX) !== null && _d !== void 0 ? _d : apiData.positionX,
-            positionY: (_e = props.positionY) !== null && _e !== void 0 ? _e : apiData.positionY,
-            filename: apiData.filename || id
-        });
-    }, [props, apiData, id]);
-    // 3. Optimized Image Resolution
-    const fetchImageMetadata = useCallback(async (targetId) => {
-        var _a, _b, _c, _d, _e;
-        const isLikelyPath = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(targetId) || /^\d+-/.test(targetId);
-        if (isLikelyPath) {
-            setApiData(prev => (Object.assign(Object.assign({}, 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 = (_a = data.positionX) !== null && _a !== void 0 ? _a : 0;
-            const apiPositionY = (_b = data.positionY) !== null && _b !== void 0 ? _b : 0;
-            const apiScale = (_c = data.scale) !== null && _c !== void 0 ? _c : 1.0;
-            setApiData({
-                filename: data.filename || targetId,
-                brightness: (_d = data.brightness) !== null && _d !== void 0 ? _d : 100,
-                blur: (_e = data.blur) !== null && _e !== void 0 ? _e : 0,
-                scale: apiScale,
-                positionX: apiPositionX,
-                positionY: apiPositionY,
-            });
-            // Reset error state when resolution succeeds (in case it was set during pre-check)
-            setImageError(false);
-        }
-        catch (_f) {
-            setApiData(prev => (Object.assign(Object.assign({}, 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 => {
-            var _a;
-            if (data.loggedIn && ['admin', 'dev'].includes((_a = data.user) === null || _a === void 0 ? void 0 : _a.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) => {
-            var _a;
-            if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.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 => {
-                        var _a, _b, _c, _d, _e;
-                        return (Object.assign(Object.assign({}, prev), { brightness: (_a = eventData.brightness) !== null && _a !== void 0 ? _a : prev.brightness, blur: (_b = eventData.blur) !== null && _b !== void 0 ? _b : prev.blur, scale: (_c = eventData.scale) !== null && _c !== void 0 ? _c : prev.scale, positionX: (_d = eventData.positionX) !== null && _d !== void 0 ? _d : prev.positionX, positionY: (_e = eventData.positionY) !== null && _e !== void 0 ? _e : prev.positionY }));
-                    });
-                }
-            }
-        };
-        window.addEventListener('image-mapping-updated', handleUpdate);
-        return () => window.removeEventListener('image-mapping-updated', handleUpdate);
-    }, [id, fetchImageMetadata, hasProps]);
-    // 6. Layout & Transforms
-    const calculateBaseScale = useCallback(() => {
-        var _a, _b;
-        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 = (_a = containerRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            const parentHeight = (_b = containerRef.current.parentElement) === null || _b === void 0 ? void 0 : _b.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: Object.assign(Object.assign({}, style), { filter: filterStyle || (style === null || style === void 0 ? void 0 : 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: Object.assign(Object.assign({ 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: Object.assign(Object.assign({ 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/src/components/Image.tsx

@@ -1,343 +0,0 @@
-'use client';
-
-import NextImage from 'next/image';
-import React, { 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 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;
-    // Props take precedence over API-fetched values
-    scale?: number;
-    positionX?: number;
-    positionY?: number;
-    brightness?: number;
-    blur?: number;
-}
-
-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
-}: PluginImageProps) {
-    // 1. State management (Local only, used if props are undefined)
-    const [apiData, setApiData] = useState({
-        filename: null as string | 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<HTMLImageElement | null>(null);
-    const containerRef = useRef<HTMLDivElement>(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: string) => {
-        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: any) => {
-            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 (
-        <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}
-        >
-            {isResolving && (
-                <div className="absolute inset-0 z-20 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 animate-pulse">
-                    <Loader2 className="w-5 h-5 animate-spin text-neutral-400" />
-                </div>
-            )}
-
-            {hasTransforms && shouldFill ? (
-                baseSrc ? (
-                    <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
-                <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,
-                    }}
-                />
-            ) : (
-                <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 && (
-                <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]"
-                >
-                    <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl">
-                        <Edit2 size={14} className="text-primary" />
-                        <span className="text-[10px] font-bold uppercase tracking-widest">Edit</span>
-                    </div>
-                </button>
-            )}
-        </div>
-    );
-}

package/src/components/ImageBrowserModal.d.ts

@@ -1,13 +0,0 @@
-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/src/components/ImageBrowserModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageBrowserModal.d.ts","sourceRoot":"","sources":["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"}