feat(cropper): add aspect ratio options (1:1, 4:3, 16:9, free) and fix styling

js/components/pages/page-create.js

@@ -5,6 +5,7 @@ import { directus } from '../../services/directus.js'
 import { SUPPORTED_CURRENCIES } from '../../services/currency.js'
 import '../location-picker.js'
 import '../pow-captcha.js'
+import '../image-cropper.js'
 
 const STORAGE_KEY = 'dgray_create_draft'
 
@@ -359,6 +360,8 @@ class PageCreate extends HTMLElement {
                         </div>
                     ` : ''}
                     
+                    <image-cropper id="image-cropper"></image-cropper>
+                    
                     <div class="form-actions">
                         <button type="button" class="btn btn-outline btn-lg" id="cancel-btn">
                             ${t('create.cancel')}
@@ -436,18 +439,37 @@ class PageCreate extends HTMLElement {
 
     handleImageSelect(e) {
         const files = Array.from(e.target.files)
+        this.pendingFiles = [...files]
+        this.processNextImage()
+    }
+
+    processNextImage() {
+        if (this.pendingFiles.length === 0) return
+        if (this.imageFiles.length >= 5) {
+            this.pendingFiles = []
+            return
+        }
         
-        files.forEach(file => {
-            if (this.imageFiles.length >= 5) return
-            this.imageFiles.push(file)
-            
-            const reader = new FileReader()
-            reader.onload = (e) => {
-                this.imagePreviews.push(e.target.result)
-                this.updateImagePreviews()
-            }
-            reader.readAsDataURL(file)
-        })
+        const file = this.pendingFiles.shift()
+        const cropper = this.querySelector('#image-cropper')
+        
+        if (cropper) {
+            cropper.open(
+                file,
+                (croppedFile, previewUrl) => {
+                    // On crop complete
+                    this.imageFiles.push(croppedFile)
+                    this.imagePreviews.push(previewUrl)
+                    this.updateImagePreviews()
+                    // Process next image
+                    this.processNextImage()
+                },
+                () => {
+                    // On cancel - skip this image
+                    this.processNextImage()
+                }
+            )
+        }
     }
     
     updateImagePreviews() {