@jhits/plugin-images 0.0.14 → 0.0.15

package/dist/views/ImageManager.d.ts

@@ -1,6 +1,6 @@
 /**
  * Image Manager View
- * Full-featured image management with CRUD operations and usage tracking
+ * Refactored modular interface for media management
  */
 export interface ImageManagerViewProps {
     siteId: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["../../src/views/ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAuDH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAqBD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAssBzE"}
+{"version":3,"file":"ImageManager.d.ts","sourceRoot":"","sources":["../../src/views/ImageManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAsBH,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAmBD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAqRzE"}

package/dist/views/ImageManager.js

@@ -1,12 +1,19 @@
 /**
  * Image Manager View
- * Full-featured image management with CRUD operations and usage tracking
+ * Refactored modular interface for media management
  */
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { Search, Trash2, Upload, Image as ImageIcon, Grid3x3, List, Loader2, AlertTriangle, CheckCircle, ExternalLink, X, RefreshCw, Eye, HardDrive, CheckCircle2, Circle, Trash } from 'lucide-react';
-import Image from 'next/image';
+import { ImageIcon, Loader2 } from 'lucide-react';
+// Components
+import { ImageManagerHeader } from './ImageManager/components/ImageManagerHeader';
+import { ImageManagerStats } from './ImageManager/components/ImageManagerStats';
+import { ImageManagerToolbar } from './ImageManager/components/ImageManagerToolbar';
+import { ImageGrid } from './ImageManager/components/ImageGrid';
+import { ImageTable } from './ImageManager/components/ImageTable';
+import { DeleteImageModal } from './ImageManager/components/DeleteImageModal';
+import { CleanupLibraryModal } from './ImageManager/components/CleanupLibraryModal';
 function formatFileSize(bytes) {
     if (bytes === 0)
         return '0 B';
@@ -17,12 +24,10 @@ function formatFileSize(bytes) {
 }
 function formatDate(dateString) {
     const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(undefined, {
         year: 'numeric',
         month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
+        day: 'numeric'
     });
 }
 export function ImageManagerView({ siteId, locale }) {
@@ -96,6 +101,7 @@ export function ImageManagerView({ siteId, locale }) {
                     setImages(prev => [data.image, ...prev]);
                 }
             }
+            handleRefresh();
         }
         catch (error) {
             console.error('Upload failed:', error);
@@ -118,6 +124,7 @@ export function ImageManagerView({ siteId, locale }) {
                 setImages(prev => prev.filter(img => img.id !== selectedImage.id));
                 setShowDeleteModal(false);
                 setSelectedImage(null);
+                handleRefresh();
             }
             else {
                 const error = await response.json();
@@ -156,18 +163,19 @@ export function ImageManagerView({ siteId, locale }) {
             }
             if (deletedCount > 0) {
                 setImages(prev => prev.filter(img => isImageInUse(img.filename)));
+                handleRefresh();
             }
             setShowCleanupModal(false);
             if (failedCount > 0) {
                 alert(`Deleted ${deletedCount} images. ${failedCount} failed.`);
             }
             else {
-                alert(`Successfully deleted ${deletedCount} unused image${deletedCount !== 1 ? 's' : ''}.`);
+                alert(`Successfully deleted ${deletedCount} unused assets.`);
             }
         }
         catch (error) {
             console.error('Cleanup failed:', error);
-            alert('Failed to cleanup images');
+            alert('Failed to cleanup assets');
         }
         finally {
             setCleaning(false);
@@ -192,46 +200,14 @@ export function ImageManagerView({ siteId, locale }) {
     const isImageInUse = (filename) => {
         return isImageMapped(filename) || getImageUsage(filename).length > 0;
     };
-    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2", children: "Images" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Upload and manage your media library" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [stats && stats.availableImages > 0 && (_jsxs("button", { onClick: () => setShowCleanupModal(true), className: "inline-flex items-center gap-2 px-4 py-3 bg-red-500/10 text-red-600 dark:text-red-400 rounded-full text-[10px] font-bold uppercase tracking-widest hover:bg-red-500/20 transition-all", title: `Remove ${stats.availableImages} unused images`, children: [_jsx(Trash, { size: 16 }), "Clean Up"] })), _jsxs("label", { className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer", children: [uploading ? (_jsx(Loader2, { size: 16, className: "animate-spin" })) : (_jsx(Upload, { size: 16 })), uploading ? 'Uploading...' : 'Upload', _jsx("input", { type: "file", accept: "image/*", multiple: true, onChange: handleUpload, className: "hidden", disabled: uploading })] }), _jsx("button", { onClick: handleRefresh, className: "p-3 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors", title: "Refresh", children: _jsx(RefreshCw, { size: 16 }) })] })] }), stats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-8", children: [_jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-primary/10 rounded-xl", children: _jsx(ImageIcon, { className: "text-primary", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Total Images" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.totalImages })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-amber-500/10 rounded-xl", children: _jsx(HardDrive, { className: "text-amber-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Storage Used" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: formatFileSize(stats.totalSize) })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-red-500/10 rounded-xl", children: _jsx(CheckCircle2, { className: "text-red-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "In Use" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.usedImages })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-green-500/10 rounded-xl", children: _jsx(Circle, { className: "text-green-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Available" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.availableImages })] })] })), _jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [_jsxs("div", { className: "relative flex-1 max-w-md", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400", size: 18 }), _jsx("input", { type: "text", placeholder: "Search images...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full pl-12 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-300 dark:border-neutral-700 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" })] }), _jsxs("div", { className: "flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700", children: [_jsx("button", { onClick: () => setViewMode('grid'), className: `p-2 rounded-full transition-all ${viewMode === 'grid'
-                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Grid View", children: _jsx(Grid3x3, { size: 18 }) }), _jsx("button", { onClick: () => setViewMode('list'), className: `p-2 rounded-full transition-all ${viewMode === 'list'
-                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "List View", children: _jsx(List, { size: 18 }) })] })] }), loading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx(Loader2, { size: 32, className: "animate-spin text-primary" }) })) : filteredImages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 text-center", children: [_jsx("div", { className: "w-24 h-24 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center mb-6", children: _jsx(ImageIcon, { size: 40, className: "text-neutral-400" }) }), _jsx("h3", { className: "text-xl font-bold text-neutral-600 dark:text-neutral-400 mb-2", children: search ? 'No images found' : 'No images yet' }), _jsx("p", { className: "text-neutral-500 dark:text-neutral-500 mb-6", children: search ? 'Try a different search term' : 'Upload your first image to get started' }), !search && (_jsxs("label", { className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer", children: [_jsx(Upload, { size: 16 }), "Upload Image", _jsx("input", { type: "file", accept: "image/*", onChange: handleUpload, className: "hidden" })] }))] })) : viewMode === 'grid' ? (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: filteredImages.map((image) => {
-                    const usage = getImageUsage(image.filename);
-                    const inUse = isImageInUse(image.filename);
-                    return (_jsxs("div", { className: `group relative bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border transition-all hover:shadow-lg ${inUse
-                            ? 'border-amber-300 dark:border-amber-700'
-                            : 'border-neutral-200 dark:border-neutral-700 hover:border-primary/50'}`, children: [_jsxs("div", { className: "aspect-square relative bg-neutral-200 dark:bg-neutral-700", children: [_jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }), _jsxs("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100", children: [_jsx("button", { onClick: () => window.open(image.url, '_blank'), className: "p-2 bg-white dark:bg-neutral-900 rounded-full text-primary hover:bg-primary/10 transition-colors", title: "View full size", children: _jsx(Eye, { size: 16 }) }), _jsx("button", { onClick: () => {
-                                                    setSelectedImage(image);
-                                                    setShowDeleteModal(true);
-                                                }, className: `p-2 bg-white dark:bg-neutral-900 rounded-full transition-colors ${inUse
-                                                    ? 'text-neutral-400 cursor-not-allowed'
-                                                    : 'text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'}`, title: inUse ? 'Cannot delete - image is in use' : 'Delete', disabled: inUse, children: _jsx(Trash2, { size: 16 }) })] }), inUse && (_jsxs("div", { className: "absolute top-2 right-2 px-2 py-1 bg-red-500 text-white text-[10px] font-bold uppercase rounded-full flex items-center gap-1 shadow-lg", children: [_jsx(CheckCircle, { size: 10 }), "In Use"] }))] }), _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300 truncate", title: image.filename, children: image.filename }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: "text-[10px] text-neutral-500", children: formatFileSize(image.size) }), inUse ? (_jsx("p", { className: "text-[10px] text-red-500 dark:text-red-400 font-bold", children: usage.length > 0 ? `${usage.length} ref${usage.length > 1 ? 's' : ''}` : 'mapped' })) : (_jsx("p", { className: "text-[10px] text-green-500 dark:text-green-400 font-bold", children: "available" }))] })] })] }, image.id));
-                }) })) : (_jsx("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-700", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "bg-neutral-200 dark:bg-neutral-700/50", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Preview" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Filename" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Size" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Uploaded" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Status" }), _jsx("th", { className: "text-right px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-neutral-200 dark:divide-neutral-700", children: filteredImages.map((image) => {
-                                const usage = getImageUsage(image.filename);
-                                const inUse = isImageInUse(image.filename);
-                                return (_jsxs("tr", { className: `transition-colors ${inUse
-                                        ? 'bg-amber-50/30 dark:bg-amber-900/5 hover:bg-amber-50/50 dark:hover:bg-amber-900/10'
-                                        : 'hover:bg-neutral-200/50 dark:hover:bg-neutral-700/30'}`, children: [_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: `w-12 h-12 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden ring-2 ${inUse ? 'ring-red-400 dark:ring-red-600' : 'ring-transparent'}`, children: _jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }) }) }), _jsx("td", { className: "px-4 py-3", children: _jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 truncate max-w-[200px]", title: image.filename, children: image.filename }) }), _jsx("td", { className: "px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400", children: formatFileSize(image.size) }), _jsx("td", { className: "px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400", children: formatDate(image.uploadedAt) }), _jsx("td", { className: "px-4 py-3", children: inUse ? (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-bold rounded-full", children: [_jsx(CheckCircle, { size: 12 }), "In Use", usage.length > 0 ? ` (${usage.length})` : ''] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium rounded-full", children: [_jsx(Circle, { size: 12 }), "Available"] })) }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => window.open(image.url, '_blank'), className: "p-2 text-neutral-500 hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-lg transition-colors", title: "View", children: _jsx(Eye, { size: 16 }) }), _jsx("button", { onClick: () => {
-                                                            setSelectedImage(image);
-                                                            setShowDeleteModal(true);
-                                                        }, className: `p-2 rounded-lg transition-colors ${inUse
-                                                            ? 'text-neutral-400 cursor-not-allowed'
-                                                            : 'text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'}`, title: inUse ? 'Cannot delete - image is in use' : 'Delete', disabled: inUse, children: _jsx(Trash2, { size: 16 }) })] }) })] }, image.id));
-                            }) })] }) })), showDeleteModal && selectedImage && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-xl font-bold text-neutral-900 dark:text-white", children: "Delete Image" }), _jsx("button", { onClick: () => {
-                                        setShowDeleteModal(false);
-                                        setSelectedImage(null);
-                                    }, className: "p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg", children: _jsx(X, { size: 20 }) })] }), (() => {
-                            const usage = getImageUsage(selectedImage.filename);
-                            const inUse = isImageInUse(selectedImage.filename);
-                            const isMapped = isImageMapped(selectedImage.filename);
-                            return (_jsxs(_Fragment, { children: [inUse ? (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl mb-4", children: [_jsx(AlertTriangle, { className: "text-red-500 shrink-0", size: 24 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200", children: isMapped && usage.length === 0
-                                                                    ? 'This image is mapped to content'
-                                                                    : 'This image is currently in use' }), _jsx("p", { className: "text-xs text-red-600 dark:text-red-400 mt-1", children: isMapped && usage.length === 0
-                                                                    ? 'The image is linked via semantic ID mapping.'
-                                                                    : 'Please remove the image from all content before deleting.' })] })] }), (usage.length > 0) && (_jsxs("div", { className: "space-y-2 max-h-[200px] overflow-y-auto", children: [_jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Used in:" }), usage.map((item, idx) => (_jsxs("div", { className: "flex items-center justify-between p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: item.title }), _jsxs("p", { className: "text-xs text-neutral-500", children: [item.plugin, " - ", item.type] })] }), item.url && (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors", children: _jsx(ExternalLink, { size: 16 }) }))] }, idx)))] })), isMapped && usage.length === 0 && (_jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mt-2", children: "This image is being used through semantic ID mappings. Delete the mapping first." }))] })) : (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-4 mb-4", children: [_jsx("div", { className: "w-20 h-20 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden shrink-0", children: _jsx(Image, { src: selectedImage.url, alt: selectedImage.filename, fill: true, className: "object-cover", unoptimized: true }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-neutral-900 dark:text-white", children: selectedImage.filename }), _jsx("p", { className: "text-sm text-neutral-500", children: formatFileSize(selectedImage.size) }), _jsx("p", { className: "text-sm text-neutral-500", children: formatDate(selectedImage.uploadedAt) })] })] }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Are you sure you want to delete this image? This action cannot be undone." })] })), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { onClick: () => {
-                                                    setShowDeleteModal(false);
-                                                    setSelectedImage(null);
-                                                }, className: "px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", children: "Cancel" }), !inUse && (_jsxs("button", { onClick: handleDelete, disabled: deleting, className: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2", children: [deleting && _jsx(Loader2, { size: 16, className: "animate-spin" }), "Delete"] }))] })] }));
-                        })()] }) })), showCleanupModal && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-xl font-bold text-neutral-900 dark:text-white", children: "Clean Up Unused Images" }), _jsx("button", { onClick: () => setShowCleanupModal(false), className: "p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl mb-4", children: [_jsx(AlertTriangle, { className: "text-amber-500 shrink-0", size: 24 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-amber-800 dark:text-amber-200", children: "Warning: This action cannot be undone" }), _jsxs("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-1", children: [getUnusedImagesCount(), " unused image", getUnusedImagesCount() !== 1 ? 's' : '', " will be permanently deleted."] })] })] }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-4", children: "This will delete all images that are not currently in use by any content (blogs, newsletters, or user avatars)." }), _jsxs("div", { className: "p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "Total images:" }), _jsx("span", { className: "font-bold text-neutral-900 dark:text-white", children: stats?.totalImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between text-sm mt-2", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "In use:" }), _jsx("span", { className: "font-bold text-red-500", children: stats?.usedImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between text-sm mt-2", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "Will be deleted:" }), _jsx("span", { className: "font-bold text-red-500", children: getUnusedImagesCount() })] })] })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { onClick: () => setShowCleanupModal(false), className: "px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", children: "Cancel" }), _jsxs("button", { onClick: handleCleanup, disabled: cleaning, className: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2", children: [cleaning && _jsx(Loader2, { size: 16, className: "animate-spin" }), cleaning ? 'Deleting...' : `Delete ${getUnusedImagesCount()} Images`] })] })] }) }))] }));
+    return (_jsxs("div", { className: "w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 pb-10 bg-transparent", children: [_jsx(ImageManagerHeader, { uploading: uploading, unusedCount: getUnusedImagesCount(), onUpload: handleUpload, onRefresh: handleRefresh, onShowCleanup: () => setShowCleanupModal(true) }), stats && _jsx(ImageManagerStats, { stats: stats, formatFileSize: formatFileSize }), _jsx(ImageManagerToolbar, { search: search, setSearch: setSearch, viewMode: viewMode, setViewMode: setViewMode }), _jsx("div", { className: "flex-1 px-4 min-h-[400px]", children: loading ? (_jsx("div", { className: "h-full flex items-center justify-center py-20", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(Loader2, { size: 40, className: "animate-spin text-primary opacity-40" }), _jsx("p", { className: "text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse", children: "Syncing Library" })] }) })) : filteredImages.length === 0 ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center py-32 text-center", children: [_jsxs("div", { className: "size-24 bg-dashboard-card/40 rounded-3xl border border-dashed border-dashboard-border/50 flex items-center justify-center mb-6 relative", children: [_jsx(ImageIcon, { size: 40, className: "text-dashboard-text-secondary opacity-20" }), _jsx("div", { className: "absolute inset-0 bg-primary/5 rounded-3xl animate-pulse" })] }), _jsx("h3", { className: "text-xl font-bold text-dashboard-text tracking-tight opacity-40 mb-1.5", children: search ? 'Reference Not Found' : 'Repository Empty' }), _jsx("p", { className: "text-xs text-dashboard-text-secondary font-medium opacity-60", children: search ? 'Try refining your search parameters' : 'Upload your first image to begin building your library' })] })) : viewMode === 'grid' ? (_jsx(ImageGrid, { images: filteredImages, isImageInUse: isImageInUse, getImageUsage: getImageUsage, formatFileSize: formatFileSize, onViewFull: (url) => window.open(url, '_blank'), onDelete: (img) => {
+                        setSelectedImage(img);
+                        setShowDeleteModal(true);
+                    } })) : (_jsx(ImageTable, { images: filteredImages, isImageInUse: isImageInUse, getImageUsage: getImageUsage, formatFileSize: formatFileSize, formatDate: formatDate, onViewFull: (url) => window.open(url, '_blank'), onDelete: (img) => {
+                        setSelectedImage(img);
+                        setShowDeleteModal(true);
+                    } })) }), _jsx(DeleteImageModal, { isOpen: showDeleteModal, image: selectedImage, inUse: selectedImage ? isImageInUse(selectedImage.filename) : false, usage: selectedImage ? getImageUsage(selectedImage.filename) : [], isDeleting: deleting, formatFileSize: formatFileSize, formatDate: formatDate, onClose: () => {
+                    setShowDeleteModal(false);
+                    setSelectedImage(null);
+                }, onConfirm: handleDelete }), _jsx(CleanupLibraryModal, { isOpen: showCleanupModal, stats: stats, unusedCount: getUnusedImagesCount(), isCleaning: cleaning, onClose: () => setShowCleanupModal(false), onConfirm: handleCleanup })] }));
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "import": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./src": {
       "types": "./src/index.tsx",
@@ -19,12 +19,13 @@
       "default": "./src/index.tsx"
     },
     "./server": {
-      "types": "./src/index.server.ts",
-      "import": "./src/index.server.ts",
-      "default": "./src/index.server.ts"
+      "types": "./dist/index.server.d.ts",
+      "import": "./dist/index.server.js",
+      "default": "./dist/index.server.js"
     }
   },
   "dependencies": {
+    "framer-motion": "^12.36.0",
     "lucide-react": "^0.564.0",
     "mongodb": "^7.1.0",
     "@jhits/plugin-core": "0.0.10"