@jhits/plugin-images 0.0.13 → 0.0.15

package/dist/components/ImagePicker.js

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

package/dist/utils/fallback.d.ts

@@ -4,18 +4,23 @@
  * Also handles URL construction for image filenames
  */
 /**
- * Returns the URL for the fallback "image not found" image
- * Served from the plugin's API route
+ * Returns the URL for the fallback "image not found" image.
+ * Uses a static file from public/ so it works without any API/dashboard dependency.
  */
 export declare function getFallbackImageUrl(): string;
 /**
  * Constructs the full image URL from a filename or URL
  * - If it's already a full URL (http://, https://, or starts with /), returns as-is
- * - If it's a filename, constructs `/api/uploads/${filename}`
+ * - If it's a filename, constructs relative URL to /api/uploads/
  */
 export declare function constructImageUrl(src: string | null | undefined): string | null;
 /**
- * Validates if a URL is valid and can be used with Next.js Image component
+ * Constructs a direct static URL for the image, using STATIC_IMAGE_BASE_URL if available.
+ * This is intended for use as a fallback when API-driven serving fails.
+ */
+export declare function constructStaticImageUrl(filename: string | null | undefined): string | null;
+/**
+ * Validates if a URL is valid
  */
 export declare function isValidImageUrl(url: string | null | undefined): boolean;
 /**

package/dist/utils/fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../../src/utils/fallback.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAE5C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAY/E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAkBvE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAUtE"}
+{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../../src/utils/fallback.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAE5C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAsB/E;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAU1F;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAsBvE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAUtE"}

package/dist/utils/fallback.js

@@ -3,31 +3,56 @@
  * Provides a default fallback image URL when images fail to load or are invalid
  * Also handles URL construction for image filenames
  */
+// If set, this URL will be used as a fallback for static images, served directly by Nginx/CDN.
+// Example: NEXT_PUBLIC_STATIC_IMAGE_BASE_URL=https://cdn.yourdomain.com/static-uploads
+const STATIC_IMAGE_BASE_URL = process.env.NEXT_PUBLIC_STATIC_IMAGE_BASE_URL || '';
 /**
- * Returns the URL for the fallback "image not found" image
- * Served from the plugin's API route
+ * Returns the URL for the fallback "image not found" image.
+ * Uses a static file from public/ so it works without any API/dashboard dependency.
  */
 export function getFallbackImageUrl() {
-    return '/api/plugin-images/fallback';
+    return `/noimagefound.jpg`;
 }
 /**
  * Constructs the full image URL from a filename or URL
  * - If it's already a full URL (http://, https://, or starts with /), returns as-is
- * - If it's a filename, constructs `/api/uploads/${filename}`
+ * - If it's a filename, constructs relative URL to /api/uploads/
  */
 export function constructImageUrl(src) {
     if (!src || typeof src !== 'string') {
         return null;
     }
-    // If it's already a full URL (absolute or relative), return as-is
-    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('/')) {
+    // If it's already an absolute URL (http:// or https://), return as-is
+    if (src.startsWith('http://') || src.startsWith('https://')) {
         return src;
     }
-    // Otherwise, it's a filename - construct the API URL
+    // If it starts with /api/uploads, return as-is (already relative API path)
+    if (src.startsWith('/api/uploads/')) {
+        return src;
+    }
+    // If it starts with / but is not an API path, it might be a local asset, keep as-is
+    if (src.startsWith('/')) {
+        return src;
+    }
+    // Otherwise, it's a raw filename - construct the relative API URL
     return `/api/uploads/${src}`;
 }
 /**
- * Validates if a URL is valid and can be used with Next.js Image component
+ * Constructs a direct static URL for the image, using STATIC_IMAGE_BASE_URL if available.
+ * This is intended for use as a fallback when API-driven serving fails.
+ */
+export function constructStaticImageUrl(filename) {
+    if (!filename || !STATIC_IMAGE_BASE_URL) {
+        return null;
+    }
+    // Ensure filename doesn't start with /api/uploads/ if it was passed through from constructImageUrl
+    const cleanFilename = filename.startsWith('/api/uploads/') ? filename.replace('/api/uploads/', '') : filename;
+    // Ensure base URL ends with a slash
+    const baseUrl = STATIC_IMAGE_BASE_URL.endsWith('/') ? STATIC_IMAGE_BASE_URL : `${STATIC_IMAGE_BASE_URL}/`;
+    return `${baseUrl}${cleanFilename}`;
+}
+/**
+ * Validates if a URL is valid
  */
 export function isValidImageUrl(url) {
     if (!url || typeof url !== 'string') {
@@ -35,13 +60,16 @@ export function isValidImageUrl(url) {
     }
     // Check if it's a valid URL format
     try {
-        // For relative URLs (starting with /), they're valid
+        // Absolute URLs (including http/https)
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            new URL(url);
+            return true;
+        }
+        // Relative URLs starting with /
         if (url.startsWith('/')) {
             return true;
         }
-        // For absolute URLs, validate the URL format
-        new URL(url);
-        return true;
+        return false;
     }
     catch {
         return false;

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

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

package/dist/utils/transforms.js

@@ -17,19 +17,16 @@
  */
 export function getImageTransform(options, needsCentering = false, caller) {
     const { scale, positionX, positionY, baseScale = 1 } = options;
+    // We combine baseScale (which brings image to min-cover size) with user's zoom scale
     const totalScale = baseScale * scale;
-    // 1. Center the image (if using top:50% left:50%)
+    // Center via translate -50% -50% (if top:50% left:50% is used)
     const center = needsCentering ? 'translate(-50%, -50%)' : '';
-    // 2. Apply the scaling (base x zoom) FIRST
-    // This ensures the position offset is relative to the scaled visual size
-    const zoom = `scale(${totalScale})`;
-    // 3. Apply the offset (positionX/Y) AFTER scaling
-    // Position values are stored as percentage of CONTAINER
-    // Since scale is applied first, the translate is relative to the scaled visual size
+    // Position offset (stored as % of container)
+    // We apply this AFTER scaling so it moves relative to the scaled visual size
     const offset = `translate(${positionX}%, ${positionY}%)`;
-    // Combining them: Center first, then scale, then move
-    // Order matters: scale before translate ensures position is relative to visual size
-    return `${center} ${zoom} ${offset}`.trim();
+    // Order: Center -> Move -> Scale
+    // This ensures position is relative to visual container space
+    return `${center} ${offset} scale(${totalScale})`.trim();
 }
 export function getImageFilter(brightness = 100, blur = 0) {
     if (brightness === 100 && blur === 0)

package/dist/views/ImageManager/components/CleanupLibraryModal.d.ts

@@ -0,0 +1,12 @@
+import { StorageStats } from '../types';
+interface CleanupLibraryModalProps {
+    isOpen: boolean;
+    stats: StorageStats | null;
+    unusedCount: number;
+    isCleaning: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+export declare function CleanupLibraryModal({ isOpen, stats, unusedCount, isCleaning, onClose, onConfirm }: CleanupLibraryModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CleanupLibraryModal.d.ts.map

package/dist/views/ImageManager/components/CleanupLibraryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CleanupLibraryModal.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/CleanupLibraryModal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,UAAU,wBAAwB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,OAAO,EACP,SAAS,EACZ,EAAE,wBAAwB,2CAwE1B"}

package/dist/views/ImageManager/components/CleanupLibraryModal.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X, Zap, Loader2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+export function CleanupLibraryModal({ isOpen, stats, unusedCount, isCleaning, onClose, onConfirm }) {
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-md", children: _jsxs(motion.div, { initial: { opacity: 0, scale: 0.9, y: 20 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.9, y: 20 }, className: "glass-panel w-full max-w-lg rounded-[3rem] shadow-2xl overflow-hidden flex flex-col border border-white/10 dark:border-black/10", children: [_jsxs("div", { className: "p-10 pb-6 flex justify-between items-center shrink-0", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2", children: "Library Optimization" }), _jsx("p", { className: "text-[10px] font-black text-amber-500 uppercase tracking-[0.2em]", children: "Maintenance Mode" })] }), _jsx("button", { onClick: onClose, className: "hover:rotate-90 hover:text-red-500 transition-all p-3 bg-dashboard-bg rounded-2xl border border-dashboard-border active:scale-90", children: _jsx(X, { size: 24 }) })] }), _jsxs("div", { className: "px-10 pb-10 space-y-8", children: [_jsxs("div", { className: "flex items-center gap-4 p-6 bg-amber-500/5 border border-amber-500/20 rounded-3xl", children: [_jsx(Zap, { className: "text-amber-500 shrink-0", size: 32 }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-black text-amber-500 uppercase tracking-tight", children: "Mass Deletion Warning" }), _jsxs("p", { className: "text-xs text-dashboard-text-secondary font-medium mt-1 leading-relaxed italic", children: [unusedCount, " standalone assets will be purged from the cloud repository."] })] })] }), _jsxs("div", { className: "p-8 bg-dashboard-bg/50 border border-dashboard-border rounded-[2rem] space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] font-black text-dashboard-text-secondary uppercase tracking-widest opacity-60", children: "Repository Total" }), _jsx("span", { className: "text-sm font-black text-dashboard-text", children: stats?.totalImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between border-t border-dashboard-border/30 pt-4", children: [_jsx("span", { className: "text-[10px] font-black text-primary uppercase tracking-widest", children: "Active Assets" }), _jsx("span", { className: "text-sm font-black text-primary", children: stats?.usedImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between border-t border-dashboard-border/30 pt-4", children: [_jsx("span", { className: "text-[10px] font-black text-red-500 uppercase tracking-widest", children: "Purge Bundle" }), _jsx("span", { className: "text-sm font-black text-red-500", children: unusedCount })] })] }), _jsxs("div", { className: "flex gap-4 pt-4", children: [_jsx("button", { onClick: onClose, className: "flex-1 py-4 bg-dashboard-bg text-dashboard-text-secondary border border-dashboard-border rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-dashboard-card transition-all active:scale-[0.98]", children: "Abort" }), _jsxs("button", { onClick: onConfirm, disabled: isCleaning, className: "flex-1 py-4 bg-red-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-xl shadow-red-500/20 hover:bg-red-600 transition-all active:scale-[0.98] flex items-center justify-center gap-3", children: [isCleaning && _jsx(Loader2, { size: 16, className: "animate-spin" }), "Initialize Purge"] })] })] })] }) })) }));
+}

package/dist/views/ImageManager/components/DeleteImageModal.d.ts

@@ -0,0 +1,15 @@
+import { ImageMetadata } from '../types';
+interface DeleteImageModalProps {
+    isOpen: boolean;
+    image: ImageMetadata | null;
+    inUse: boolean;
+    usage: any[];
+    isDeleting: boolean;
+    formatFileSize: (bytes: number) => string;
+    formatDate: (date: string) => string;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+export declare function DeleteImageModal({ isOpen, image, inUse, usage, isDeleting, formatFileSize, formatDate, onClose, onConfirm }: DeleteImageModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DeleteImageModal.d.ts.map

package/dist/views/ImageManager/components/DeleteImageModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteImageModal.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/DeleteImageModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,qBAAqB;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,UAAU,EACV,OAAO,EACP,SAAS,EACZ,EAAE,qBAAqB,2CAiHvB"}

package/dist/views/ImageManager/components/DeleteImageModal.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { X, AlertTriangle, ExternalLink, Loader2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+export function DeleteImageModal({ isOpen, image, inUse, usage, isDeleting, formatFileSize, formatDate, onClose, onConfirm }) {
+    return (_jsx(AnimatePresence, { children: isOpen && image && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-md", children: _jsxs(motion.div, { initial: { opacity: 0, scale: 0.9, y: 20 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.9, y: 20 }, className: "glass-panel w-full max-w-lg rounded-[3rem] shadow-2xl overflow-hidden flex flex-col border border-white/10 dark:border-black/10", children: [_jsxs("div", { className: "p-10 pb-6 flex justify-between items-center shrink-0", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2", children: "Purge Asset" }), _jsx("p", { className: "text-[10px] font-black text-red-500 uppercase tracking-[0.2em]", children: "Destructive Action" })] }), _jsx("button", { onClick: onClose, className: "hover:rotate-90 hover:text-red-500 transition-all p-3 bg-dashboard-bg rounded-2xl border border-dashboard-border active:scale-90", children: _jsx(X, { size: 24 }) })] }), _jsxs("div", { className: "px-10 pb-10 space-y-8", children: [inUse ? (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-4 p-6 bg-red-500/5 border border-red-500/20 rounded-3xl", children: [_jsx(AlertTriangle, { className: "text-red-500 shrink-0", size: 32 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-black text-red-500 uppercase tracking-tight", children: "System Integrity Violation" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary font-medium mt-1 leading-relaxed italic", children: "This asset is actively connected to content and cannot be purged while linked." })] })] }), (usage.length > 0) && (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-[10px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] ml-1", children: "Active Connections:" }), _jsx("div", { className: "space-y-3 max-h-[250px] overflow-y-auto pr-2 custom-scrollbar", children: usage.map((item, idx) => (_jsxs("div", { className: "flex items-center justify-between p-4 bg-dashboard-bg/50 border border-dashboard-border rounded-2xl group hover:border-primary/30 transition-all", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-black text-dashboard-text uppercase tracking-tight", children: item.title }), _jsxs("p", { className: "text-[9px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60 mt-0.5", children: [item.plugin, " \u2022 ", item.type] })] }), item.url && (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "p-3 bg-dashboard-card text-primary rounded-xl border border-dashboard-border group-hover:bg-primary group-hover:text-white transition-all shadow-sm", children: _jsx(ExternalLink, { size: 14 }) }))] }, idx))) })] }))] })) : (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "flex items-center gap-6 p-6 bg-dashboard-bg/50 border border-dashboard-border rounded-[2rem]", children: [_jsx("div", { className: "size-24 relative bg-dashboard-card rounded-2xl overflow-hidden border border-dashboard-border shadow-inner", children: _jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-lg font-black text-dashboard-text uppercase tracking-tight truncate", children: image.filename }), _jsxs("div", { className: "flex flex-col gap-1 mt-1", children: [_jsx("span", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60", children: formatFileSize(image.size) }), _jsx("span", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60", children: formatDate(image.uploadedAt) })] })] })] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium leading-relaxed text-center italic px-4 opacity-70", children: "Are you certain you wish to permanently purge this asset from the repository? This operation is irreversible." })] })), _jsxs("div", { className: "flex gap-4 pt-4 border-t border-dashboard-border/50", children: [_jsx("button", { onClick: onClose, className: "flex-1 py-4 bg-dashboard-bg text-dashboard-text-secondary border border-dashboard-border rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-dashboard-card hover:text-dashboard-text transition-all active:scale-[0.98]", children: "Abort Protocol" }), !inUse && (_jsxs("button", { onClick: onConfirm, disabled: isDeleting, className: "flex-1 py-4 bg-red-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-xl shadow-red-500/20 hover:bg-red-600 transition-all active:scale-[0.98] flex items-center justify-center gap-3", children: [isDeleting && _jsx(Loader2, { size: 16, className: "animate-spin" }), "Confirm Purge"] }))] })] })] }) })) }));
+}

package/dist/views/ImageManager/components/ImageGrid.d.ts

@@ -0,0 +1,12 @@
+import { ImageMetadata } from '../types';
+interface ImageGridProps {
+    images: ImageMetadata[];
+    isImageInUse: (filename: string) => boolean;
+    getImageUsage: (filename: string) => any[];
+    formatFileSize: (bytes: number) => string;
+    onViewFull: (url: string) => void;
+    onDelete: (image: ImageMetadata) => void;
+}
+export declare function ImageGrid({ images, isImageInUse, getImageUsage, formatFileSize, onViewFull, onDelete }: ImageGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageGrid.d.ts.map

package/dist/views/ImageManager/components/ImageGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGrid.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/ImageGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,cAAc;IACpB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC;IAC3C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,SAAS,CAAC,EACtB,MAAM,EACN,YAAY,EACZ,aAAa,EACb,cAAc,EACd,UAAU,EACV,QAAQ,EACX,EAAE,cAAc,2CA+FhB"}

package/dist/views/ImageManager/components/ImageGrid.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Maximize2, Trash2, CheckCircle2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+export function ImageGrid({ images, isImageInUse, getImageUsage, formatFileSize, onViewFull, onDelete }) {
+    return (_jsx("div", { className: "columns-2 sm:columns-3 lg:columns-4 xl:columns-5 gap-6 space-y-6", children: _jsx(AnimatePresence, { mode: "popLayout", children: images.map((image, index) => {
+                const usage = getImageUsage(image.filename);
+                const inUse = isImageInUse(image.filename);
+                return (_jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.3, delay: index * 0.02 }, className: "break-inside-avoid mb-6 group relative", children: _jsxs("div", { className: `relative bg-dashboard-card/40 rounded-2xl overflow-hidden border transition-all duration-500 shadow-sm group-hover:shadow-xl group-hover:shadow-primary/10 ${inUse
+                            ? 'border-dashboard-border/40'
+                            : 'border-dashboard-border/60 group-hover:border-primary/30'}`, children: [_jsx("img", { src: image.url, alt: image.filename, className: "w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700 block", crossOrigin: "anonymous", loading: "lazy" }), inUse && (_jsxs("div", { className: "absolute top-3 right-3 px-2.5 py-1 bg-emerald-500/90 backdrop-blur-sm text-white text-[8px] font-bold uppercase tracking-wider rounded-full flex items-center gap-1.5 shadow-lg shadow-emerald-500/20 z-20", children: [_jsx(CheckCircle2, { size: 10 }), "In Use"] })), _jsxs("div", { className: "absolute inset-0 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-between p-5", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-black/10 via-black/40 to-black/70 backdrop-blur-[1px]" }), _jsxs("div", { className: "relative z-20 flex-1 flex items-center justify-center gap-2.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [_jsx("button", { onClick: () => onViewFull(image.url), className: "p-3 bg-white text-primary rounded-xl hover:scale-105 active:scale-95 transition-all shadow-xl", title: "View Image", children: _jsx(Maximize2, { size: 18 }) }), _jsx("button", { onClick: () => onDelete(image), className: `p-3 rounded-xl shadow-xl transition-all hover:scale-105 active:scale-95 ${inUse
+                                                    ? 'bg-white/10 text-white/30 cursor-not-allowed'
+                                                    : 'bg-red-500 text-white hover:bg-red-600'}`, title: inUse ? 'Image is in use' : 'Delete Image', disabled: inUse, children: _jsx(Trash2, { size: 18 }) })] }), _jsxs("div", { className: "relative z-20 space-y-1.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300 delay-75", children: [_jsx("p", { className: "text-[11px] font-bold text-white tracking-tight truncate w-full", title: image.filename, children: image.filename }), _jsxs("div", { className: "flex items-center justify-between border-t border-white/10 pt-1.5", children: [_jsx("span", { className: "text-[9px] font-bold text-white/60 uppercase tracking-widest", children: formatFileSize(image.size) }), inUse ? (_jsx("span", { className: "text-[9px] text-emerald-400 font-bold uppercase", children: usage.length > 0 ? `${usage.length} Uses` : 'Active' })) : (_jsx("span", { className: "text-[9px] text-white/40 font-bold uppercase", children: "Available" }))] })] })] })] }) }, image.id));
+            }) }) }));
+}

package/dist/views/ImageManager/components/ImageManagerHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ImageManagerHeaderProps {
+    uploading: boolean;
+    unusedCount: number;
+    onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onRefresh: () => void;
+    onShowCleanup: () => void;
+}
+export declare function ImageManagerHeader({ uploading, unusedCount, onUpload, onRefresh, onShowCleanup }: ImageManagerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageManagerHeader.d.ts.map

package/dist/views/ImageManager/components/ImageManagerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageManagerHeader.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/ImageManagerHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,uBAAuB;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,EAChB,EAAE,uBAAuB,2CAoDzB"}

package/dist/views/ImageManager/components/ImageManagerHeader.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileImage, Zap, Loader2, Upload, RefreshCw } from 'lucide-react';
+export function ImageManagerHeader({ uploading, unusedCount, onUpload, onRefresh, onShowCleanup }) {
+    return (_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-end justify-between gap-8 px-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/15 border border-primary/30 text-primary text-[10px] font-bold uppercase tracking-wider shadow-sm", children: [_jsx(FileImage, { size: 12 }), _jsx("span", { children: "Media Library" })] }), _jsxs("div", { children: [_jsxs("h1", { className: "text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2", children: ["Images ", _jsx("span", { className: "text-primary", children: "&" }), " Media"] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium max-w-md leading-relaxed opacity-80", children: "Upload and manage your images. See exactly where they are used across your website." })] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [unusedCount > 0 && (_jsxs("button", { onClick: onShowCleanup, className: "group flex items-center gap-3 px-6 py-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-amber-600 rounded-2xl text-[10px] font-bold uppercase tracking-widest transition-all hover:bg-amber-500/10 hover:border-amber-500/20 active:scale-95 shadow-sm", children: [_jsx(Zap, { size: 16 }), "Cleanup Library"] })), _jsxs("label", { className: "group relative flex items-center gap-3 px-7 py-3.5 bg-primary text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest overflow-hidden transition-all hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20 cursor-pointer", children: [uploading ? _jsx(Loader2, { size: 18, className: "relative z-10 animate-spin" }) : _jsx(Upload, { size: 18, className: "relative z-10" }), _jsx("span", { className: "relative z-10", children: uploading ? 'Uploading...' : 'Upload Media' }), _jsx("input", { type: "file", accept: "image/*", multiple: true, onChange: onUpload, className: "hidden", disabled: uploading })] }), _jsx("button", { onClick: onRefresh, className: "p-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-dashboard-text-secondary hover:text-primary hover:border-primary/30 transition-all rounded-2xl active:scale-95", title: "Refresh Gallery", children: _jsx(RefreshCw, { size: 18 }) })] })] }));
+}

package/dist/views/ImageManager/components/ImageManagerStats.d.ts

@@ -0,0 +1,8 @@
+import { StorageStats } from '../types';
+interface ImageManagerStatsProps {
+    stats: StorageStats;
+    formatFileSize: (bytes: number) => string;
+}
+export declare function ImageManagerStats({ stats, formatFileSize }: ImageManagerStatsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageManagerStats.d.ts.map

package/dist/views/ImageManager/components/ImageManagerStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageManagerStats.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/ImageManagerStats.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,UAAU,sBAAsB;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,sBAAsB,2CAgDlF"}

package/dist/views/ImageManager/components/ImageManagerStats.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image as ImageIcon, Database, CheckCircle2, Activity } from 'lucide-react';
+export function ImageManagerStats({ stats, formatFileSize }) {
+    return (_jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-5 px-4", children: [_jsxs("div", { className: "bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500", children: [_jsx("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-primary transition-all duration-700", children: _jsx(ImageIcon, { size: 80 }) }), _jsxs("div", { className: "relative z-10", children: [_jsx("label", { className: "text-[10px] font-bold text-primary uppercase tracking-widest mb-1 block opacity-80", children: "Total Assets" }), _jsx("p", { className: "text-2xl font-bold text-dashboard-text tracking-tight", children: stats.totalImages }), _jsx("p", { className: "text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60", children: "Optimized Library" })] })] }), _jsxs("div", { className: "bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500", children: [_jsx("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-amber-500 transition-all duration-700", children: _jsx(Database, { size: 80 }) }), _jsxs("div", { className: "relative z-10", children: [_jsx("label", { className: "text-[10px] font-bold text-amber-500 uppercase tracking-widest mb-1 block opacity-80", children: "Storage Usage" }), _jsx("p", { className: "text-2xl font-bold text-dashboard-text tracking-tight", children: formatFileSize(stats.totalSize) }), _jsx("p", { className: "text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60", children: "Cloud-optimized Storage" })] })] }), _jsxs("div", { className: "bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500", children: [_jsx("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-emerald-500 transition-all duration-700", children: _jsx(CheckCircle2, { size: 80 }) }), _jsxs("div", { className: "relative z-10", children: [_jsx("label", { className: "text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-1 block opacity-80", children: "Active Images" }), _jsx("p", { className: "text-2xl font-bold text-dashboard-text tracking-tight", children: stats.usedImages }), _jsx("p", { className: "text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60", children: "Linked to Website" })] })] }), _jsxs("div", { className: "bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500", children: [_jsx("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-neutral-500 transition-all duration-700", children: _jsx(Activity, { size: 80 }) }), _jsxs("div", { className: "relative z-10", children: [_jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest mb-1 block opacity-80", children: "Unused Assets" }), _jsx("p", { className: "text-2xl font-bold text-dashboard-text tracking-tight", children: stats.availableImages }), _jsx("p", { className: "text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60", children: "Ready for Removal" })] })] })] }));
+}

package/dist/views/ImageManager/components/ImageManagerToolbar.d.ts

@@ -0,0 +1,9 @@
+interface ImageManagerToolbarProps {
+    search: string;
+    setSearch: (value: string) => void;
+    viewMode: 'grid' | 'list';
+    setViewMode: (mode: 'grid' | 'list') => void;
+}
+export declare function ImageManagerToolbar({ search, setSearch, viewMode, setViewMode }: ImageManagerToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageManagerToolbar.d.ts.map

package/dist/views/ImageManager/components/ImageManagerToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageManagerToolbar.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/ImageManagerToolbar.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,QAAQ,EACR,WAAW,EACd,EAAE,wBAAwB,2CA0C1B"}

package/dist/views/ImageManager/components/ImageManagerToolbar.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, Grid3x3, List } from 'lucide-react';
+export function ImageManagerToolbar({ search, setSearch, viewMode, setViewMode }) {
+    return (_jsx("div", { className: "px-4", children: _jsxs("div", { className: "flex flex-col sm:flex-row items-center gap-4 p-2 bg-dashboard-card/30 backdrop-blur-xl border border-dashboard-border/40 rounded-2xl shadow-sm", children: [_jsxs("div", { className: "relative flex-1 group w-full", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors duration-300", size: 18 }), _jsx("input", { type: "text", placeholder: "Search assets by filename...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full pl-12 pr-6 py-3 bg-transparent border-none outline-none text-sm font-semibold text-dashboard-text placeholder:text-dashboard-text-secondary/30" })] }), _jsxs("div", { className: "flex items-center gap-1.5 p-1.5 bg-dashboard-bg/50 rounded-xl border border-dashboard-border/40", children: [_jsx("button", { onClick: () => setViewMode('grid'), className: `p-2.5 rounded-lg transition-all ${viewMode === 'grid'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'}`, title: "Grid View", children: _jsx(Grid3x3, { size: 18 }) }), _jsx("button", { onClick: () => setViewMode('list'), className: `p-2.5 rounded-lg transition-all ${viewMode === 'list'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'}`, title: "List View", children: _jsx(List, { size: 18 }) })] })] }) }));
+}

package/dist/views/ImageManager/components/ImageTable.d.ts

@@ -0,0 +1,13 @@
+import { ImageMetadata } from '../types';
+interface ImageTableProps {
+    images: ImageMetadata[];
+    isImageInUse: (filename: string) => boolean;
+    getImageUsage: (filename: string) => any[];
+    formatFileSize: (bytes: number) => string;
+    formatDate: (date: string) => string;
+    onViewFull: (url: string) => void;
+    onDelete: (image: ImageMetadata) => void;
+}
+export declare function ImageTable({ images, isImageInUse, getImageUsage, formatFileSize, formatDate, onViewFull, onDelete }: ImageTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageTable.d.ts.map

package/dist/views/ImageManager/components/ImageTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTable.d.ts","sourceRoot":"","sources":["../../../../src/views/ImageManager/components/ImageTable.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,eAAe;IACrB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC;IAC3C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,aAAa,EACb,cAAc,EACd,UAAU,EACV,UAAU,EACV,QAAQ,EACX,EAAE,eAAe,2CA8FjB"}

package/dist/views/ImageManager/components/ImageTable.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { Eye, Trash2, Circle, CheckCircle2 } from 'lucide-react';
+export function ImageTable({ images, isImageInUse, getImageUsage, formatFileSize, formatDate, onViewFull, onDelete }) {
+    return (_jsx("div", { className: "bg-dashboard-card/40 rounded-2xl overflow-hidden border border-dashboard-border/40 shadow-sm", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest border-b border-dashboard-border/40 bg-dashboard-bg/20", children: [_jsx("th", { className: "px-8 py-5", children: "Asset Reference" }), _jsx("th", { className: "px-8 py-5", children: "File Size" }), _jsx("th", { className: "px-8 py-5", children: "Uploaded" }), _jsx("th", { className: "px-8 py-5", children: "Usage Status" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border/30", children: images.map((image) => {
+                        const usage = getImageUsage(image.filename);
+                        const inUse = isImageInUse(image.filename);
+                        return (_jsxs("tr", { className: "group hover:bg-primary/[0.03] transition-colors", children: [_jsx("td", { className: "px-8 py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: `size-12 relative bg-dashboard-bg/50 rounded-xl overflow-hidden border transition-all ${inUse ? 'border-primary/30' : 'border-dashboard-border/60'}`, children: _jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-bold text-dashboard-text text-sm tracking-tight group-hover:text-primary transition-colors truncate max-w-[250px]", title: image.filename, children: image.filename }), _jsx("p", { className: "text-[9px] font-medium text-dashboard-text-secondary opacity-60 uppercase tracking-widest", children: "Media Asset" })] })] }) }), _jsx("td", { className: "px-8 py-4", children: _jsx("span", { className: "text-xs font-semibold text-dashboard-text/70", children: formatFileSize(image.size) }) }), _jsx("td", { className: "px-8 py-4", children: _jsx("span", { className: "text-xs font-semibold text-dashboard-text/70", children: formatDate(image.uploadedAt) }) }), _jsx("td", { className: "px-8 py-4", children: inUse ? (_jsxs("span", { className: "inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 rounded-full text-[9px] font-bold uppercase tracking-wider", children: [_jsx(CheckCircle2, { size: 10 }), "Active", usage.length > 0 ? ` (${usage.length})` : ''] })) : (_jsxs("span", { className: "inline-flex items-center gap-2 px-3 py-1 bg-dashboard-bg/50 border border-dashboard-border/60 text-dashboard-text-secondary/60 rounded-full text-[9px] font-bold uppercase tracking-wider", children: [_jsx(Circle, { size: 10 }), "Unlinked"] })) }), _jsx("td", { className: "px-8 py-4 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [_jsx("button", { onClick: () => onViewFull(image.url), className: "p-2.5 text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 rounded-lg transition-all active:scale-90", title: "View Image", children: _jsx(Eye, { size: 18 }) }), _jsx("button", { onClick: () => onDelete(image), className: `p-2.5 rounded-lg transition-all active:scale-90 ${inUse
+                                                    ? 'text-neutral-300 cursor-not-allowed opacity-20'
+                                                    : 'text-dashboard-text-secondary hover:text-red-500 hover:bg-red-500/10'}`, disabled: inUse, title: "Delete Image", children: _jsx(Trash2, { size: 18 }) })] }) })] }, image.id));
+                    }) })] }) }));
+}

package/dist/views/ImageManager/types.d.ts

@@ -0,0 +1,26 @@
+export interface ImageMetadata {
+    id: string;
+    filename: string;
+    url: string;
+    size: number;
+    mimeType: string;
+    uploadedAt: string;
+}
+export interface ImageUsage {
+    imageId: string;
+    filename: string;
+    usage: Array<{
+        plugin: string;
+        type: string;
+        title: string;
+        id: string;
+        url?: string;
+    }>;
+}
+export interface StorageStats {
+    totalImages: number;
+    totalSize: number;
+    usedImages: number;
+    availableImages: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/views/ImageManager/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/views/ImageManager/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;QACT,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACN;AAED,MAAM,WAAW,YAAY;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CAC3B"}

package/dist/views/ImageManager/types.js

@@ -0,0 +1 @@
+export {};