@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/MediaBrowser.tsx

@@ -75,7 +75,7 @@ function MediaPreview({ item }: { item: MediaItem }) {
     )
   }
 
-  return <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />
+  return <FileImage className="text-muted-foreground h-6 w-6 sm:h-8 sm:w-8" />
 }
 
 type MediaSortKey = 'name' | 'type' | 'size' | 'date'
@@ -348,17 +348,17 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
       >
         {label}
         {active ? (
           sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="w-3 h-3" />
+            <ArrowUp className="h-3 w-3" />
           ) : (
-            <ArrowDown className="w-3 h-3" />
+            <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+          <ArrowUpDown className="h-3 w-3 text-gray-400" />
         )}
       </button>
     )
@@ -366,39 +366,39 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
         </div>
       )}
 
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-3">
           <button
             type="button"
             onClick={() => setSidebarOpen((prev) => !prev)}
-            className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="w-5 h-5 text-gray-600" />
+            <FolderInput className="h-5 w-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Media Library</h1>
+            <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Media Library</h1>
             <p className="text-sm text-gray-600">{filteredAndSorted.length} files</p>
           </div>
         </div>
@@ -414,21 +414,21 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           <button
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
+            className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
           >
             {uploading ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
+              <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
-              <Upload className="w-4 h-4" />
+              <Upload className="h-4 w-4" />
             )}
             {uploading ? 'Uploading...' : 'Upload Files'}
           </button>
         </div>
       </div>
 
-      <div className="flex gap-4 flex-1 min-h-0 overflow-hidden">
+      <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
         {sidebarOpen && (
-          <div className="w-56 shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col">
+          <div className="flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
             <FolderTree
               scope="media"
               selected={folderSel}
@@ -443,24 +443,24 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           </div>
         )}
 
-        <div className="flex-1 flex flex-col min-w-0">
-          <div className="bg-white rounded-lg border border-gray-200 mb-4">
-            <div className="p-3 flex items-center justify-between">
-              <div className="flex items-center gap-3 flex-1">
-                <div className="flex-1 max-w-md relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+            <div className="flex items-center justify-between p-3">
+              <div className="flex flex-1 items-center gap-3">
+                <div className="relative max-w-md flex-1">
+                  <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                   <input
                     type="text"
                     placeholder="Search media..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <select
                   value={filterType}
                   onChange={(e) => setFilterType(e.target.value)}
-                  className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="all">All Types</option>
                   <option value="image">Images</option>
@@ -468,25 +468,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                   <option value="document">Documents</option>
                 </select>
               </div>
-              <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
+              <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
                 <button
                   onClick={() => setViewMode('grid')}
-                  className={`p-1.5 rounded transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
                 >
-                  <Grid3x3 className="w-4 h-4" />
+                  <Grid3x3 className="h-4 w-4" />
                 </button>
                 <button
                   onClick={() => setViewMode('list')}
-                  className={`p-1.5 rounded transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                  className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
                 >
-                  <List className="w-4 h-4" />
+                  <List className="h-4 w-4" />
                 </button>
               </div>
             </div>
           </div>
 
           {selectedMedia.length > 0 && (
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
+            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
               <div className="flex items-center justify-between">
                 <span className="text-sm text-blue-900">
                   {selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected
@@ -497,13 +497,13 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       for (const id of selectedMedia) await deleteMedia(id)
                       setSelectedMedia([])
                     }}
-                    className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                    className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700"
                   >
                     Delete Selected
                   </button>
                   <button
                     onClick={() => setSelectedMedia([])}
-                    className="px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors"
+                    className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50"
                   >
                     Cancel
                   </button>
@@ -514,10 +514,10 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
           {filteredAndSorted.length === 0 && !loading ? (
             <div className="flex flex-col items-center justify-center py-16 text-center">
-              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-                <ImageIcon className="w-6 h-6 text-gray-400" />
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+                <ImageIcon className="h-6 w-6 text-gray-400" />
               </div>
-              <h3 className="text-sm font-medium text-gray-900 mb-1">
+              <h3 className="mb-1 text-sm font-medium text-gray-900">
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized media'
                   : folderSel.type === 'folder'
@@ -527,13 +527,13 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               <p className="text-sm text-gray-500">Upload your first file to get started.</p>
             </div>
           ) : (
-            <div className="flex gap-4 flex-1 overflow-hidden min-h-0">
+            <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
               <div
-                className={`bg-white rounded-lg border border-gray-200 overflow-hidden transition-all duration-200 ${panelOpen ? 'flex-1 min-w-0' : 'w-full'}`}
+                className={`overflow-hidden rounded-lg border border-gray-200 bg-white transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
               >
                 {viewMode === 'grid' ? (
                   <div
-                    className={`grid gap-2 sm:gap-3 p-2 sm:p-3 overflow-y-auto h-full ${
+                    className={`grid h-full gap-2 overflow-y-auto p-2 sm:gap-3 sm:p-3 ${
                       panelOpen
                         ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
                         : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
@@ -545,7 +545,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       return (
                         <div
                           key={item.id}
-                          className={`group relative aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all ${
+                          className={`group relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all ${
                             isActive
                               ? 'border-blue-500 ring-2 ring-blue-200'
                               : selectedMedia.includes(item.id)
@@ -556,36 +556,36 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           draggable
                           onDragStart={(e) => handleDragStart(e, item.id)}
                         >
-                          <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                          <div className="flex h-full w-full items-center justify-center bg-gray-100">
                             <MediaPreview item={item} />
                           </div>
-                          <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
-                            <div className="absolute bottom-0 left-0 right-0 p-2">
-                              <p className="text-white text-xs font-medium truncate">{item.name}</p>
-                              <p className="text-white/80 text-xs">{item.size}</p>
+                          <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
+                            <div className="absolute right-0 bottom-0 left-0 p-2">
+                              <p className="truncate text-xs font-medium text-white">{item.name}</p>
+                              <p className="text-xs text-white/80">{item.size}</p>
                             </div>
                           </div>
                           {hasIssues && (
                             <div
-                              className="absolute top-1.5 left-1.5 w-5 h-5 bg-yellow-500 rounded-full flex items-center justify-center"
+                              className="absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-yellow-500"
                               title="Needs attention"
                             >
-                              <AlertTriangle className="w-3 h-3 text-white" />
+                              <AlertTriangle className="h-3 w-3 text-white" />
                             </div>
                           )}
                           <div
-                            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                            className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
                             onClick={(e) => handleCheckbox(e, item.id)}
                           >
                             <div
-                              className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                              className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
                                 selectedMedia.includes(item.id)
-                                  ? 'bg-blue-600 border-blue-600'
-                                  : 'bg-white/80 border-gray-400'
+                                  ? 'border-blue-600 bg-blue-600'
+                                  : 'border-gray-400 bg-white/80'
                               }`}
                             >
                               {selectedMedia.includes(item.id) && (
-                                <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
+                                <svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 12 12">
                                   <path
                                     d="M10 3L4.5 8.5L2 6"
                                     stroke="currentColor"
@@ -602,9 +602,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     })}
                   </div>
                 ) : (
-                  <div className="overflow-y-auto h-full">
+                  <div className="h-full overflow-y-auto">
                     <table className="w-full">
-                      <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                      <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                         <tr>
                           <th className="w-8 px-3 py-2 text-left">
                             <input
@@ -642,7 +642,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           return (
                             <tr
                               key={item.id}
-                              className={`transition-colors cursor-pointer ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
+                              className={`cursor-pointer transition-colors ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
                               onClick={() => openDetail(item)}
                               draggable
                               onDragStart={(e) => handleDragStart(e, item.id)}
@@ -660,12 +660,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                                   className="rounded border-gray-300"
                                 />
                               </td>
-                              <td className="px-1 py-2 cursor-grab">
-                                <GripVertical className="w-4 h-4 text-gray-300" />
+                              <td className="cursor-grab px-1 py-2">
+                                <GripVertical className="h-4 w-4 text-gray-300" />
                               </td>
                               <td className="px-3 py-2">
                                 <div className="flex items-center gap-3">
-                                  <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
+                                  <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded bg-gray-100">
                                     <MediaPreview item={item} />
                                   </div>
                                   <span className="text-sm font-medium text-gray-900">
@@ -680,11 +680,11 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               <td className="px-3 py-2 text-sm text-gray-600">{item.date}</td>
                               <td className="px-3 py-2">
                                 {hasIssues ? (
-                                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-                                    <AlertTriangle className="w-3 h-3" /> Needs attention
+                                  <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <AlertTriangle className="h-3 w-3" /> Needs attention
                                   </span>
                                 ) : (
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                  <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                                     Complete
                                   </span>
                                 )}
@@ -699,37 +699,37 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               </div>
 
               {panelOpen && activeItem && (
-                <div className="w-80 lg:w-96 bg-white rounded-lg border border-gray-200 overflow-y-auto shrink-0 flex flex-col">
-                  <div className="flex items-center justify-between p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
-                    <h3 className="text-sm font-semibold text-gray-900 truncate">
+                <div className="flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white lg:w-96">
+                  <div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white p-4">
+                    <h3 className="truncate text-sm font-semibold text-gray-900">
                       {activeItem.name}
                     </h3>
                     <button
                       onClick={closeDetail}
-                      className="p-1 hover:bg-gray-100 rounded transition-colors"
+                      className="rounded p-1 transition-colors hover:bg-gray-100"
                       aria-label="Close panel"
                     >
-                      <X className="w-4 h-4 text-gray-500" />
+                      <X className="h-4 w-4 text-gray-500" />
                     </button>
                   </div>
 
                   <div className="flex-1 overflow-y-auto">
-                    <div className="p-4 border-b border-gray-200">
-                      <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
+                    <div className="border-b border-gray-200 p-4">
+                      <div className="flex aspect-video items-center justify-center overflow-hidden rounded-lg bg-gray-100">
                         {isImageMedia(activeItem) ? (
                           <MediaPreview item={activeItem} />
                         ) : (
-                          <ImageIcon className="w-12 h-12 text-gray-300" />
+                          <ImageIcon className="h-12 w-12 text-gray-300" />
                         )}
                       </div>
                     </div>
 
                     {issues.length > 0 && (
-                      <div className="mx-4 mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                      <div className="mx-4 mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3">
                         <div className="flex items-start gap-2">
-                          <AlertTriangle className="w-4 h-4 text-yellow-600 mt-0.5 shrink-0" />
+                          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-600" />
                           <div>
-                            <p className="text-xs font-semibold text-yellow-900 mb-1">
+                            <p className="mb-1 text-xs font-semibold text-yellow-900">
                               {issues.length} issue{issues.length !== 1 ? 's' : ''} found
                             </p>
                             <ul className="space-y-0.5">
@@ -748,78 +748,78 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                             if (!activeItem.title) await handleAiGenerate('title')
                             if (activeItem.sizeBytes > 2000000) await handleAiGenerate('optimize')
                           }}
-                          className="mt-2 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+                          className="mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg bg-yellow-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-yellow-700"
                         >
-                          <Sparkles className="w-3.5 h-3.5" />
+                          <Sparkles className="h-3.5 w-3.5" />
                           AI Fix All Issues
                         </button>
                       </div>
                     )}
 
-                    <div className="p-4 border-b border-gray-200 space-y-3">
-                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                    <div className="space-y-3 border-b border-gray-200 p-4">
+                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
                         File Information
                       </h4>
                       <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <div className="text-xs text-gray-500 mb-0.5">Format</div>
+                          <div className="mb-0.5 text-xs text-gray-500">Format</div>
                           <div className="text-sm text-gray-900">
                             {activeItem.format ?? 'Unknown'}
                           </div>
                         </div>
                         <div>
-                          <div className="text-xs text-gray-500 mb-0.5">File Size</div>
-                          <div className="text-sm text-gray-900 flex items-center gap-1">
+                          <div className="mb-0.5 text-xs text-gray-500">File Size</div>
+                          <div className="flex items-center gap-1 text-sm text-gray-900">
                             {activeItem.size}
                             {activeItem.sizeBytes > 2000000 && (
-                              <span className="text-yellow-600 text-xs">(large)</span>
+                              <span className="text-xs text-yellow-600">(large)</span>
                             )}
                           </div>
                         </div>
                         <div>
-                          <div className="text-xs text-gray-500 mb-0.5">Dimensions</div>
+                          <div className="mb-0.5 text-xs text-gray-500">Dimensions</div>
                           <div className="text-sm text-gray-900">
                             {activeItem.dimensions ?? '—'}
                           </div>
                         </div>
                         <div>
-                          <div className="text-xs text-gray-500 mb-0.5">Uploaded</div>
+                          <div className="mb-0.5 text-xs text-gray-500">Uploaded</div>
                           <div className="text-sm text-gray-900">{activeItem.date}</div>
                         </div>
                       </div>
 
                       <div>
-                        <div className="text-xs text-gray-500 mb-1">URL</div>
+                        <div className="mb-1 text-xs text-gray-500">URL</div>
                         <div className="flex items-center gap-1">
-                          <code className="flex-1 text-xs bg-gray-50 border border-gray-200 px-2 py-1.5 rounded text-gray-700 truncate">
+                          <code className="flex-1 truncate rounded border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs text-gray-700">
                             {activeItem.url}
                           </code>
                           <button
                             onClick={handleCopyUrl}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors shrink-0"
+                            className="shrink-0 rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Copy URL"
                           >
-                            <Copy className="w-3.5 h-3.5 text-gray-500" />
+                            <Copy className="h-3.5 w-3.5 text-gray-500" />
                           </button>
                         </div>
                       </div>
                     </div>
 
-                    <div className="p-4 border-b border-gray-200 space-y-4">
-                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                    <div className="space-y-4 border-b border-gray-200 p-4">
+                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
                         SEO & Accessibility
                       </h4>
 
                       <div>
-                        <div className="flex items-center justify-between mb-1">
+                        <div className="mb-1 flex items-center justify-between">
                           <label className="text-sm font-medium text-gray-700">Alt Tag</label>
                           <button
                             type="button"
                             onClick={() => handleAiGenerate('alt')}
                             disabled={aiGenerating === 'alt'}
-                            className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                            className="flex items-center gap-1 text-xs text-indigo-600 transition-colors hover:text-indigo-700 disabled:opacity-50"
                           >
-                            <Bot className="w-3.5 h-3.5" />
+                            <Bot className="h-3.5 w-3.5" />
                             {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
                           </button>
                         </div>
@@ -828,25 +828,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           onChange={(e) => setEditAlt(e.target.value)}
                           placeholder="Describe this image for accessibility..."
                           rows={2}
-                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                          className="w-full resize-none rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         />
                         {!editAlt && (
-                          <p className="text-xs text-red-500 mt-1">
+                          <p className="mt-1 text-xs text-red-500">
                             Required for accessibility and SEO
                           </p>
                         )}
                       </div>
 
                       <div>
-                        <div className="flex items-center justify-between mb-1">
+                        <div className="mb-1 flex items-center justify-between">
                           <label className="text-sm font-medium text-gray-700">Title</label>
                           <button
                             type="button"
                             onClick={() => handleAiGenerate('title')}
                             disabled={aiGenerating === 'title'}
-                            className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                            className="flex items-center gap-1 text-xs text-indigo-600 transition-colors hover:text-indigo-700 disabled:opacity-50"
                           >
-                            <Bot className="w-3.5 h-3.5" />
+                            <Bot className="h-3.5 w-3.5" />
                             {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
                           </button>
                         </div>
@@ -855,25 +855,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                           value={editTitle}
                           onChange={(e) => setEditTitle(e.target.value)}
                           placeholder="Image title..."
-                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         />
                       </div>
 
                       <div>
-                        <label className="text-sm font-medium text-gray-700 mb-1 block">
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
                           File Name
                         </label>
                         <input
                           type="text"
                           value={editFilename}
                           onChange={(e) => setEditFilename(e.target.value)}
-                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         />
                       </div>
                     </div>
 
                     {isImageMedia(activeItem) && activeItem.url && (
-                      <div className="p-4 border-b border-gray-200">
+                      <div className="border-b border-gray-200 p-4">
                         <FocalPointPicker
                           imageUrl={activeItem.url}
                           focalX={focalX}
@@ -886,8 +886,8 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       </div>
                     )}
 
-                    <div className="p-4 border-b border-gray-200">
-                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">
+                    <div className="border-b border-gray-200 p-4">
+                      <h4 className="mb-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">
                         Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
                       </h4>
                       {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
@@ -897,23 +897,23 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               key={i}
                               type="button"
                               onClick={() => onNavigate?.(usage.path)}
-                              className="w-full flex items-center gap-2 p-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                              className="flex w-full items-center gap-2 rounded-lg border border-gray-200 p-2 text-left transition-colors hover:bg-gray-50"
                             >
-                              <Link2 className="w-4 h-4 text-gray-400 shrink-0" />
-                              <span className="text-sm text-gray-900 flex-1 truncate">
+                              <Link2 className="h-4 w-4 shrink-0 text-gray-400" />
+                              <span className="flex-1 truncate text-sm text-gray-900">
                                 {usage.page}
                               </span>
-                              <ExternalLink className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                              <ExternalLink className="h-3.5 w-3.5 shrink-0 text-gray-400" />
                             </button>
                           ))}
                         </div>
                       ) : (
-                        <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
+                        <div className="rounded-lg border border-orange-200 bg-orange-50 p-3">
                           <div className="flex items-start gap-2">
-                            <AlertTriangle className="w-4 h-4 text-orange-600 mt-0.5 shrink-0" />
+                            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-orange-600" />
                             <div>
                               <p className="text-xs font-medium text-orange-900">Orphaned media</p>
-                              <p className="text-xs text-orange-700 mt-0.5">
+                              <p className="mt-0.5 text-xs text-orange-700">
                                 This file isn&apos;t used on any page. Consider deleting it to save
                                 storage.
                               </p>
@@ -923,38 +923,38 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                       )}
                     </div>
 
-                    <div className="p-4 space-y-3">
-                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                    <div className="space-y-3 p-4">
+                      <h4 className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
                         AI Optimization
                       </h4>
                       <button
                         type="button"
                         onClick={() => handleAiGenerate('optimize')}
                         disabled={aiGenerating === 'optimize'}
-                        className="w-full flex items-center gap-2 p-3 rounded-lg border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition-colors text-left disabled:opacity-50"
+                        className="flex w-full items-center gap-2 rounded-lg border border-indigo-200 bg-indigo-50 p-3 text-left transition-colors hover:bg-indigo-100 disabled:opacity-50"
                       >
                         <Sparkles
-                          className={`w-5 h-5 text-indigo-600 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
+                          className={`h-5 w-5 shrink-0 text-indigo-600 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
                         />
                         <div className="flex-1">
                           <div className="text-sm font-medium text-indigo-900">
                             {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
                           </div>
-                          <div className="text-xs text-indigo-700 mt-0.5">
+                          <div className="mt-0.5 text-xs text-indigo-700">
                             Compress and convert to modern format (WebP/AVIF)
                           </div>
                         </div>
                       </button>
                       <button
                         type="button"
-                        className="w-full flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                        className="flex w-full items-center gap-2 rounded-lg border border-gray-200 p-3 text-left transition-colors hover:bg-gray-50"
                       >
-                        <Bot className="w-5 h-5 text-gray-500 shrink-0" />
+                        <Bot className="h-5 w-5 shrink-0 text-gray-500" />
                         <div className="flex-1">
                           <div className="text-sm font-medium text-gray-900">
                             AI Content Analysis
                           </div>
-                          <div className="text-xs text-gray-600 mt-0.5">
+                          <div className="mt-0.5 text-xs text-gray-600">
                             Detect objects, faces, text, and suggest categories
                           </div>
                         </div>
@@ -962,30 +962,30 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
                   </div>
 
-                  <div className="p-4 border-t border-gray-200 bg-white sticky bottom-0 flex items-center gap-2">
+                  <div className="sticky bottom-0 flex items-center gap-2 border-t border-gray-200 bg-white p-4">
                     <button
                       type="button"
                       onClick={handleSaveDetails}
                       disabled={saving}
-                      className="flex-1 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                      className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
                     >
-                      {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                      {saving && <Loader2 className="h-4 w-4 animate-spin" />}
                       {saving ? 'Saving...' : 'Save Changes'}
                     </button>
                     <button
                       type="button"
-                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      className="rounded-lg p-2 transition-colors hover:bg-gray-100"
                       title="Download"
                     >
-                      <Download className="w-4 h-4 text-gray-600" />
+                      <Download className="h-4 w-4 text-gray-600" />
                     </button>
                     <button
                       type="button"
                       onClick={() => deleteMedia(activeItem.id)}
-                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      className="rounded-lg p-2 transition-colors hover:bg-gray-100"
                       title="Delete"
                     >
-                      <Trash2 className="w-4 h-4 text-red-600" />
+                      <Trash2 className="h-4 w-4 text-red-600" />
                     </button>
                   </div>
                 </div>