From 3d56324159c48165edb31c4e49e101b6ac467416 Mon Sep 17 00:00:00 2001
From: thapacodes4u <ankitgodarthapa@gmail.com>
Date: Thu, 9 Oct 2025 19:14:56 +0545
Subject: [PATCH 1/3] fix: Renamed mediaColumns methods to avoid trait conflict
 and updated Action namespace

---
 .../Components/Concerns/HasMediaPreview.php   | 12 +++++------
 .../Forms/Components/MediaGallery.php         |  2 +-
 tests/Feature/MediaGalleryTest.php            | 20 +++++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
index 916cf3e..207a5c3 100644
--- a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
+++ b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
@@ -51,14 +51,14 @@ public function thumbnailHeight(int|Closure $height): static
         return $this;
     }
 
-    public function columns(array|string|int|null $columns = 2): static
+    public function mediaColumns(array|string|int|null $columns = 2): static
     {
         $this->mediaColumns = $columns;
 
         return $this;
     }
 
-    public function gridColumns(int $columns): static
+    public function mediaGridColumns(int $columns): static
     {
         $this->mediaColumns = $columns;
 
@@ -85,7 +85,7 @@ public function getThumbnailHeight(): int
         return $this->evaluate($this->thumbnailHeight);
     }
 
-    public function getColumns(?string $breakpoint = null): array|string|int|null
+    public function getMediaColumns(?string $breakpoint = null): array|string|int|null
     {
         $columns = $this->evaluate($this->mediaColumns);
 
@@ -98,7 +98,7 @@ public function getColumns(?string $breakpoint = null): array|string|int|null
 
     public function getGridStyle(): string
     {
-        $columns = $this->getColumns();
+        $columns = $this->getMediaColumns();
 
         if (is_array($columns)) {
             $default = $columns['default'] ?? 4;
@@ -133,9 +133,9 @@ public function getGridClasses(): string
         return 'grid gap-3';
     }
 
-    public function getGridColumns(): int
+    public function getMediaGridColumns(): int
     {
-        $columns = $this->getColumns();
+        $columns = $this->getMediaColumns();
 
         if (is_array($columns)) {
             return $columns['default'] ?? 4;
diff --git a/src/Filament/Forms/Components/MediaGallery.php b/src/Filament/Forms/Components/MediaGallery.php
index 407a4c5..02fc4eb 100644
--- a/src/Filament/Forms/Components/MediaGallery.php
+++ b/src/Filament/Forms/Components/MediaGallery.php
@@ -7,7 +7,7 @@
 use Eclipse\Common\Filament\Forms\Components\Concerns\HasMediaPreview;
 use Eclipse\Common\Filament\Forms\Components\Concerns\HasMediaUploadOptions;
 use Exception;
-use Filament\Forms\Components\Actions\Action;
+use Filament\Actions\Action;
 use Filament\Forms\Components\Concerns\HasLoadingMessage;
 use Filament\Forms\Components\Concerns\HasNestedRecursiveValidationRules;
 use Filament\Forms\Components\Concerns\HasPlaceholder;
diff --git a/tests/Feature/MediaGalleryTest.php b/tests/Feature/MediaGalleryTest.php
index 73f104e..0c6d012 100644
--- a/tests/Feature/MediaGalleryTest.php
+++ b/tests/Feature/MediaGalleryTest.php
@@ -1,7 +1,7 @@
 <?php
 
 use Eclipse\Common\Filament\Forms\Components\MediaGallery;
-use Filament\Forms\Components\Actions\Action;
+use Filament\Actions\Action;
 
 test('media gallery can be configured with collection', function () {
     $field = MediaGallery::make('images')
@@ -12,12 +12,12 @@
 
 test('media gallery can be configured with preview options', function () {
     $field = MediaGallery::make('images')
-        ->columns(6)
+        ->mediaColumns(6)
         ->thumbnailHeight(200)
         ->lightbox(false)
         ->orderable(false);
 
-    expect($field->getColumns())->toBe(6)
+    expect($field->getMediaColumns())->toBe(6)
         ->and($field->getThumbnailHeight())->toBe(200)
         ->and($field->hasLightbox())->toBeFalse()
         ->and($field->isDragReorderable())->toBeFalse();
@@ -53,7 +53,7 @@
 
     expect($field->hasLightbox())->toBeFalse()
         ->and($field->isDragReorderable())->toBeFalse()
-        ->and($field->getColumns())->toBe(4)
+        ->and($field->getMediaColumns())->toBe(4)
         ->and($field->getThumbnailHeight())->toBe(150)
         ->and($field->getAllowFileUploads())->toBeFalse()
         ->and($field->getAllowUrlUploads())->toBeFalse();
@@ -138,20 +138,20 @@
 
 test('media gallery supports responsive columns', function () {
     $field = MediaGallery::make('images')
-        ->columns([
+        ->mediaColumns([
             'default' => 2,
             'sm' => 3,
             'lg' => 4,
             'xl' => 6,
         ]);
 
-    expect($field->getColumns())->toBe([
+    expect($field->getMediaColumns())->toBe([
         'default' => 2,
         'sm' => 3,
         'lg' => 4,
         'xl' => 6,
     ])
-        ->and($field->getGridColumns())->toBe(2)
+        ->and($field->getMediaGridColumns())->toBe(2)
         ->and($field->getGridClasses())->toBe('grid gap-3')
         ->and($field->getGridStyle())->toContain('grid-template-columns: repeat(2, 1fr)')
         ->and($field->getGridStyle())->toContain('@media (min-width: 640px)')
@@ -159,10 +159,10 @@
 });
 
 test('media gallery columns method works with simple integer', function () {
-    $field = MediaGallery::make('images')->columns(5);
+    $field = MediaGallery::make('images')->mediaColumns(5);
 
-    expect($field->getColumns())->toBe(5)
-        ->and($field->getGridColumns())->toBe(5)
+    expect($field->getMediaColumns())->toBe(5)
+        ->and($field->getMediaGridColumns())->toBe(5)
         ->and($field->getGridClasses())->toBe('grid gap-3')
         ->and($field->getGridStyle())->toBe('grid-template-columns: repeat(5, 1fr);');
 });

From 209879eea8332bf032fce9c8c17fdd917646b21e Mon Sep 17 00:00:00 2001
From: thapacodes4u <ankitgodarthapa@gmail.com>
Date: Thu, 9 Oct 2025 20:18:14 +0545
Subject: [PATCH 2/3] refactor: remove duplicate methods

---
 docs/MediaGallery.md                           | 16 ++++++++--------
 .../Components/Concerns/HasMediaPreview.php    | 18 ------------------
 tests/Feature/MediaGalleryTest.php             |  2 --
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/docs/MediaGallery.md b/docs/MediaGallery.md
index 12397f4..f317400 100644
--- a/docs/MediaGallery.md
+++ b/docs/MediaGallery.md
@@ -36,7 +36,7 @@ MediaGallery::make('images')
 
 ```php
 MediaGallery::make('images')
-    ->columns(6) // Number of columns (default: 4)
+    ->mediaColumns(6) // Number of columns (default: 4)
     ->thumbnailHeight(200) // Thumbnail height in pixels (default: 150)
     ->preview() // Enable lightbox preview (disabled by default)
     ->orderable() // Enable drag & drop reordering (disabled by default)
@@ -46,7 +46,7 @@ MediaGallery::make('images')
 
 ```php
 MediaGallery::make('images')
-    ->columns([
+    ->mediaColumns([
         'default' => 2,
         'sm' => 3,
         'lg' => 4,
@@ -57,7 +57,7 @@ MediaGallery::make('images')
 ## Methods Available
 
 ### Layout Control
-- `columns(int|array)` - Set number of grid columns or responsive column configuration (default: 4)
+- `mediaColumns(int|array)` - Set number of grid columns or responsive column configuration (default: 4)
 - `thumbnailHeight(int)` - Set thumbnail image height in pixels (default: 150)
 
 ### Interactive Features
@@ -108,7 +108,7 @@ MediaGallery::make('images')
     ->collection('gallery')
     ->allowUploads()
     ->preview() // Enables lightbox
-    ->columns(3)
+    ->mediaColumns(3)
     ->thumbnailHeight(180)
 ```
 
@@ -118,7 +118,7 @@ MediaGallery::make('images')
     ->collection('portfolio')
     ->allowUploads()
     ->orderable() // Enables drag & drop
-    ->columns(5)
+    ->mediaColumns(5)
     ->maxFiles(50)
 ```
 
@@ -135,7 +135,7 @@ MediaGallery::make('images')
 MediaGallery::make('images')
     ->collection('external-media')
     ->allowUrlUploads() // Only URL uploads
-    ->columns(6)
+    ->mediaColumns(6)
 ```
 
 ### Complete Configuration
@@ -144,7 +144,7 @@ MediaGallery::make('images')
     ->collection('products')
     ->allowUploads() // Enable both upload methods
     ->maxFiles(20)
-    ->columns(4)
+    ->mediaColumns(4)
     ->thumbnailHeight(180)
     ->preview() // Enable lightbox
     ->orderable() // Enable reordering
@@ -156,7 +156,7 @@ MediaGallery::make('images')
 MediaGallery::make('images')
     ->collection(fn () => $this->record?->category . '-images')
     ->maxFiles(fn () => $this->record?->isPremium() ? 50 : 10)
-    ->columns(fn () => $this->getColumnCount())
+    ->mediaColumns(fn () => $this->getColumnCount())
 ```
 
 ## Default Behaviors
diff --git a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
index 207a5c3..24c5322 100644
--- a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
+++ b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
@@ -58,13 +58,6 @@ public function mediaColumns(array|string|int|null $columns = 2): static
         return $this;
     }
 
-    public function mediaGridColumns(int $columns): static
-    {
-        $this->mediaColumns = $columns;
-
-        return $this;
-    }
-
     public function hasLightbox(): bool
     {
         return $this->evaluate($this->hasLightbox);
@@ -132,15 +125,4 @@ public function getGridClasses(): string
     {
         return 'grid gap-3';
     }
-
-    public function getMediaGridColumns(): int
-    {
-        $columns = $this->getMediaColumns();
-
-        if (is_array($columns)) {
-            return $columns['default'] ?? 4;
-        }
-
-        return (int) ($columns ?? 4);
-    }
 }
diff --git a/tests/Feature/MediaGalleryTest.php b/tests/Feature/MediaGalleryTest.php
index 0c6d012..aa86e44 100644
--- a/tests/Feature/MediaGalleryTest.php
+++ b/tests/Feature/MediaGalleryTest.php
@@ -151,7 +151,6 @@
         'lg' => 4,
         'xl' => 6,
     ])
-        ->and($field->getMediaGridColumns())->toBe(2)
         ->and($field->getGridClasses())->toBe('grid gap-3')
         ->and($field->getGridStyle())->toContain('grid-template-columns: repeat(2, 1fr)')
         ->and($field->getGridStyle())->toContain('@media (min-width: 640px)')
@@ -162,7 +161,6 @@
     $field = MediaGallery::make('images')->mediaColumns(5);
 
     expect($field->getMediaColumns())->toBe(5)
-        ->and($field->getMediaGridColumns())->toBe(5)
         ->and($field->getGridClasses())->toBe('grid gap-3')
         ->and($field->getGridStyle())->toBe('grid-template-columns: repeat(5, 1fr);');
 });

From cbbfda5b2f82ff51cb67732e040008da501a1b4e Mon Sep 17 00:00:00 2001
From: thapacodes4u <ankitgodarthapa@gmail.com>
Date: Fri, 10 Oct 2025 07:14:31 +0545
Subject: [PATCH 3/3] fix: complete MediaGallery Filament v4 migration

---
 resources/css/media-gallery.css               | 337 +++++++++++++++++-
 .../views/components/media-lightbox.blade.php |   6 +-
 .../views/components/media-preview.blade.php  |   6 +-
 .../forms/components/media-gallery.blade.php  | 122 +++----
 src/CommonServiceProvider.php                 |  11 +-
 .../Components/Concerns/HasMediaPreview.php   |   2 +-
 .../Forms/Components/MediaGallery.php         |  75 ++--
 tests/Feature/MediaGalleryTest.php            |   4 +-
 8 files changed, 430 insertions(+), 133 deletions(-)

diff --git a/resources/css/media-gallery.css b/resources/css/media-gallery.css
index 77be8dc..80a86ee 100644
--- a/resources/css/media-gallery.css
+++ b/resources/css/media-gallery.css
@@ -2,6 +2,12 @@
     display: none !important;
 }
 
+.eclipse-media-gallery {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .eclipse-media-gallery [draggable="true"] {
     cursor: move;
 }
@@ -10,6 +16,291 @@
     cursor: grabbing;
 }
 
+.eclipse-media-gallery-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+    .eclipse-media-gallery-header {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.eclipse-media-gallery-bulk-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.eclipse-media-gallery-select-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.eclipse-media-gallery-select-text {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: rgb(55 65 81);
+    user-select: none;
+}
+
+.dark .eclipse-media-gallery-select-text {
+    color: rgb(209 213 219);
+}
+
+.eclipse-media-gallery-bulk-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: 0.5rem;
+}
+
+.eclipse-media-gallery-action-buttons {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.eclipse-media-gallery-grid-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.eclipse-media-gallery-grid {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.eclipse-media-gallery-card {
+    position: relative;
+    overflow: hidden;
+    transition: all 300ms;
+    border-radius: 0.75rem;
+    background-color: rgb(255 255 255);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
+.dark .eclipse-media-gallery-card {
+    background-color: rgb(17 24 39);
+    --tw-ring-color: rgb(255 255 255 / 0.1);
+}
+
+.eclipse-media-gallery-card.draggable {
+    cursor: move;
+}
+
+.eclipse-media-gallery-card.hoverable:hover {
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.eclipse-media-gallery-card.selected {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: rgb(59 130 246);
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    background-color: rgb(239 246 255);
+}
+
+.dark .eclipse-media-gallery-card.selected {
+    --tw-ring-color: rgb(96 165 250);
+    background-color: rgb(30 58 138 / 0.2);
+}
+
+.eclipse-media-gallery-card.dragged {
+    opacity: 0.5;
+}
+
+.eclipse-media-gallery-card.drag-over {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: rgb(96 165 250);
+    background-color: rgb(239 246 255);
+}
+
+.dark .eclipse-media-gallery-card.drag-over {
+    background-color: rgb(30 58 138 / 0.2);
+}
+
+.eclipse-image-card-container {
+    position: relative;
+    background-color: rgb(243 244 246);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.eclipse-image-card-img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    user-select: none;
+    pointer-events: none;
+}
+
+.eclipse-image-card-img.clickable {
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.eclipse-image-card-cover-badge {
+    position: absolute;
+    z-index: 20;
+    top: 8px;
+    left: 8px;
+}
+
+.eclipse-image-card-content {
+    padding: 0.75rem;
+}
+
+.eclipse-image-card-title {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: rgb(17 24 39);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dark .eclipse-image-card-title {
+    color: rgb(243 244 246);
+}
+
+.eclipse-image-card-description {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(75 85 99);
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.dark .eclipse-image-card-description {
+    color: rgb(156 163 175);
+}
+
+.eclipse-image-card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+}
+
+.eclipse-image-card-buttons {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.eclipse-media-gallery-empty {
+    text-align: center;
+    border-radius: 0.75rem;
+    background-color: rgb(249 250 251 / 0.3);
+    min-height: 280px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 3rem 1.5rem;
+    border-width: 2px;
+    border-style: dashed;
+    border-color: rgb(209 213 219);
+}
+
+.dark .eclipse-media-gallery-empty {
+    background-color: rgb(17 24 39 / 0.3);
+    border-color: rgb(75 85 99);
+}
+
+.eclipse-media-gallery-empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.eclipse-media-gallery-empty-icon-wrapper {
+    padding: 1rem;
+    border-radius: 9999px;
+    background-color: rgb(243 244 246);
+}
+
+.dark .eclipse-media-gallery-empty-icon-wrapper {
+    background-color: rgb(31 41 55);
+}
+
+.eclipse-media-gallery-empty-icon {
+    height: 3rem;
+    width: 3rem;
+    color: rgb(156 163 175);
+}
+
+.dark .eclipse-media-gallery-empty-icon {
+    color: rgb(107 114 128);
+}
+
+.eclipse-media-gallery-empty-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.eclipse-media-gallery-empty-title {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+.dark .eclipse-media-gallery-empty-title {
+    color: rgb(229 231 235);
+}
+
+.eclipse-media-gallery-empty-description {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(107 114 128);
+    max-width: 32rem;
+}
+
+.dark .eclipse-media-gallery-empty-description {
+    color: rgb(156 163 175);
+}
+
+.eclipse-media-gallery-empty-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
 .eclipse-image-lightbox-overlay {
     position: fixed;
     top: 0;
@@ -135,19 +426,47 @@
     line-height: 1.5;
 }
 
-.eclipse-image-card-container {
-    background-color: #f3f4f6;
-    cursor: pointer;
+.eclipse-icon-sm {
+    height: 1rem;
+    width: 1rem;
+}
+
+.eclipse-icon-md {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.eclipse-icon-lg {
+    height: 2rem;
+    width: 2rem;
+}
+
+.eclipse-icon-xl {
+    height: 3rem;
+    width: 3rem;
+}
+
+.eclipse-media-preview {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    overflow: hidden;
+    gap: 0.5rem;
 }
 
-.eclipse-image-card-img {
+.eclipse-media-preview-image {
     max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
+    max-height: 12rem;
     object-fit: contain;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.eclipse-media-preview-filename {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(107 114 128);
+}
+
+.dark .eclipse-media-preview-filename {
+    color: rgb(156 163 175);
 }
\ No newline at end of file
diff --git a/resources/views/components/media-lightbox.blade.php b/resources/views/components/media-lightbox.blade.php
index 628c4a9..6e7e57b 100644
--- a/resources/views/components/media-lightbox.blade.php
+++ b/resources/views/components/media-lightbox.blade.php
@@ -12,7 +12,7 @@ class="eclipse-image-lightbox-overlay"
 
     <div class="eclipse-image-lightbox-container" @click.stop>
         <button type="button" @click.stop="lightboxOpen = false" class="eclipse-image-lightbox-close">
-            <x-filament::icon icon="heroicon-m-x-mark" class="h-6 w-6" />
+            <x-filament::icon icon="heroicon-m-x-mark" class="eclipse-icon-md" />
         </button>
 
         <div class="eclipse-image-lightbox-image-wrapper">
@@ -27,11 +27,11 @@ class="eclipse-image-lightbox-image">
         <template x-if="state && state.length > 1">
             <div>
                 <button type="button" @click.stop.prevent="previousImage()" class="eclipse-image-lightbox-nav prev">
-                    <x-filament::icon icon="heroicon-m-chevron-left" class="h-6 w-6" />
+                    <x-filament::icon icon="heroicon-m-chevron-left" class="eclipse-icon-md" />
                 </button>
 
                 <button type="button" @click.stop.prevent="nextImage()" class="eclipse-image-lightbox-nav next">
-                    <x-filament::icon icon="heroicon-m-chevron-right" class="h-6 w-6" />
+                    <x-filament::icon icon="heroicon-m-chevron-right" class="eclipse-icon-md" />
                 </button>
             </div>
         </template>
diff --git a/resources/views/components/media-preview.blade.php b/resources/views/components/media-preview.blade.php
index c8a2147..a339059 100644
--- a/resources/views/components/media-preview.blade.php
+++ b/resources/views/components/media-preview.blade.php
@@ -1,8 +1,8 @@
-<div class="flex flex-col items-center space-y-2">
+<div class="eclipse-media-preview">
     <img
         src="{{ $url }}"
         alt="{{ $filename }}"
-        class="max-w-full max-h-48 object-contain rounded-lg shadow-sm"
+        class="eclipse-media-preview-image"
     />
-    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $filename }}</p>
+    <p class="eclipse-media-preview-filename">{{ $filename }}</p>
 </div>
\ No newline at end of file
diff --git a/resources/views/filament/forms/components/media-gallery.blade.php b/resources/views/filament/forms/components/media-gallery.blade.php
index 83b667d..64c4882 100644
--- a/resources/views/filament/forms/components/media-gallery.blade.php
+++ b/resources/views/filament/forms/components/media-gallery.blade.php
@@ -5,32 +5,35 @@
     $gridStyle = $getGridStyle();
     $thumbnailHeight = $getThumbnailHeight();
     $statePath = $getStatePath();
+    $componentKey = $getKey();
     $gridId = 'media-gallery-grid-' . str_replace(['.', '[', ']'], '-', $statePath);
 @endphp
 
+@assets(['eclipse-common::media-gallery-styles', 'eclipse-common::media-gallery-scripts'])
+
 <x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
     <div x-data="{
         ...window.mediaGallery({
             state: $wire.{{ $applyStateBindingModifiers("entangle('{$statePath}')") }},
             getLocale: () => $wire.activeLocale || 'en',
         }),
-    
+
         selectedImages: [],
-    
+
         bulkActionsOpen: false,
-    
+
         draggedIndex: null,
-    
+
         get hasSelection() { return this.selectedImages.length > 0; },
-    
+
         get selectedCount() { return this.selectedImages.length; },
-    
+
         get totalCount() { return this.state ? this.state.length : 0; },
-    
+
         get allSelected() { return this.totalCount > 0 && this.selectedImages.length === this.totalCount; },
-    
+
         get someSelected() { return this.selectedImages.length > 0 && this.selectedImages.length < this.totalCount; },
-    
+
         toggleSelectAll() {
             if (this.allSelected) {
                 this.selectedImages = [];
@@ -39,7 +42,7 @@
             }
             this.updateBulkActionsVisibility();
         },
-    
+
         toggleImageSelection(uuid) {
             const index = this.selectedImages.indexOf(uuid);
             if (index > -1) {
@@ -49,44 +52,42 @@
             }
             this.updateBulkActionsVisibility();
         },
-    
+
         updateBulkActionsVisibility() {
             this.bulkActionsOpen = this.hasSelection;
         },
-    
+
         clearSelection() {
             this.selectedImages = [];
             this.bulkActionsOpen = false;
         },
-    
+
         async bulkDelete() {
             if (this.selectedImages.length === 0) return;
-    
+
             try {
-                await $wire.mountFormComponentAction('{{ $statePath }}', 'bulkDelete', {
-                    arguments: { uuids: this.selectedImages }
-                });
+                await $wire.mountAction('bulkDelete', { uuids: this.selectedImages }, { schemaComponent: '{{ $componentKey }}' });
                 this.clearSelection();
             } catch (error) {
                 // Don't clear selection on error so user can retry
             }
         }
     }" wire:key="media-gallery-{{ str_replace('.', '-', $statePath) }}"
-        class="eclipse-media-gallery" style="display: flex; flex-direction: column; gap: 1rem;">
-        <div x-show="state && state.length > 0" class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+        class="eclipse-media-gallery">
+        <div x-show="state && state.length > 0" class="eclipse-media-gallery-header">
             @if ($getAllowBulkDelete())
-            <div class="flex items-center gap-3">
-                <label class="flex items-center gap-2 cursor-pointer">
+            <div class="eclipse-media-gallery-bulk-controls">
+                <label class="eclipse-media-gallery-select-label">
                     <x-filament::input.checkbox :checked="false" x-bind:checked="allSelected"
-                        x-on:change="toggleSelectAll()" class="flex-shrink-0" />
-                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300 select-none">
+                        x-on:change="toggleSelectAll()" />
+                    <span class="eclipse-media-gallery-select-text">
                         <span x-show="!hasSelection">Select All</span>
                         <span x-show="allSelected">Deselect All</span>
                         <span x-show="someSelected && !allSelected" x-text="`${selectedCount} selected`"></span>
                     </span>
                 </label>
 
-                <div x-show="hasSelection" x-transition class="flex items-center gap-2 ml-2">
+                <div x-show="hasSelection" x-transition class="eclipse-media-gallery-bulk-actions">
                     <x-filament::button size="xs" color="danger" icon="heroicon-o-trash" x-on:click="bulkDelete()">
                         Delete
                     </x-filament::button>
@@ -96,16 +97,16 @@ class="eclipse-media-gallery" style="display: flex; flex-direction: column; gap:
             <div></div>
             @endif
 
-            <div class="flex items-center gap-2 flex-shrink-0">
+            <div class="eclipse-media-gallery-action-buttons">
                 @if ($getAllowFileUploads() && $getAction('upload'))
                     <x-filament::button size="xs" color="primary" icon="heroicon-o-arrow-up-tray"
-                        x-on:click="$wire.mountFormComponentAction('{{ $statePath }}', 'upload')">
+                        x-on:click="$wire.mountAction('upload', {}, { schemaComponent: '{{ $componentKey }}' })">
                         Upload Files
                     </x-filament::button>
                 @endif
                 @if ($getAllowUrlUploads() && $getAction('urlUpload'))
                     <x-filament::button size="xs" color="gray" icon="heroicon-o-link"
-                        x-on:click="$wire.mountFormComponentAction('{{ $statePath }}', 'urlUpload')">
+                        x-on:click="$wire.mountAction('urlUpload', {}, { schemaComponent: '{{ $componentKey }}' })">
                         Add from URL
                     </x-filament::button>
                 @endif
@@ -113,7 +114,7 @@ class="eclipse-media-gallery" style="display: flex; flex-direction: column; gap:
         </div>
 
         <div x-cloak wire:ignore>
-            <div x-show="state && state.length > 0" style="display: flex; flex-direction: column; gap: 1rem;">
+            <div x-show="state && state.length > 0" class="eclipse-media-gallery-grid-wrapper">
 
                 @if (str_contains($gridStyle, '@media'))
                     <style>
@@ -127,17 +128,14 @@ class="eclipse-media-gallery" style="display: flex; flex-direction: column; gap:
                 @endif
                 <template x-for="(image, index) in state" :key="image.uuid">
                     <div @class([
-                        'fi-section relative group overflow-hidden transition-all duration-300',
-                        'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
-                        'cursor-move' => $isDraggable,
-                        'hover:shadow-md' => !$isDraggable,
+                        'eclipse-media-gallery-card',
+                        'draggable' => $isDraggable,
+                        'hoverable' => !$isDraggable,
                     ])
                         :class="{
-                            'ring-2 ring-primary-600 dark:ring-primary-400 shadow-lg bg-primary-50 dark:bg-primary-900/20': selectedImages
-                                .includes(image.uuid),
-                            'opacity-50': draggedIndex === index,
-                            'ring-2 ring-primary-400 bg-primary-50 dark:bg-primary-900/20': draggedIndex !== null &&
-                                draggedIndex !== index
+                            'selected': selectedImages.includes(image.uuid),
+                            'dragged': draggedIndex === index,
+                            'drag-over': draggedIndex !== null && draggedIndex !== index
                         }"
                         @if ($isDraggable) draggable="true"
                         @dragstart="draggedIndex = index"
@@ -146,24 +144,27 @@ class="eclipse-media-gallery" style="display: flex; flex-direction: column; gap:
                             if (draggedIndex !== index) {
                                 const item = state.splice(draggedIndex, 1)[0];
                                 state.splice(index, 0, item);
-                                $wire.mountFormComponentAction('{{ $statePath }}', 'reorder', { items: state.map(img => img.uuid) });
+                                $wire.mountAction('reorder', { items: state.map(img => img.uuid) }, { schemaComponent: '{{ $componentKey }}' });
                             }
                             draggedIndex = null;
                         "
                         @dragend="draggedIndex = null" @endif>
 
                         <div class="eclipse-image-card-container"
-                            style="position: relative; height: {{ $thumbnailHeight }}px;">
+                            style="height: {{ $thumbnailHeight }}px;">
                             <img :src="image.thumb_url || image.url" :alt="image.file_name"
-                                class="eclipse-image-card-img select-none pointer-events-none" draggable="false"
-                                @if ($hasLightboxPreview) @click="openImageModal(index)"
-                                    style="cursor: pointer; pointer-events: auto;" @endif />
+                                @class([
+                                    'eclipse-image-card-img',
+                                    'clickable' => $hasLightboxPreview,
+                                ])
+                                draggable="false"
+                                @if ($hasLightboxPreview) @click="openImageModal(index)" @endif />
 
 
-                            <div class="absolute z-20" style="top: 8px; left: 8px;">
+                            <div class="eclipse-image-card-cover-badge">
                                 <template x-if="!image.is_cover">
                                     <x-filament::button size="xs" color="primary"
-                                        x-on:click.stop="$wire.mountFormComponentAction('{{ $statePath }}', 'setCover', { arguments: { uuid: image.uuid } })"
+                                        x-on:click.stop="$wire.mountAction('setCover', { uuid: image.uuid }, { schemaComponent: '{{ $componentKey }}' })"
                                         class="shadow-sm">
                                         Set as Cover
                                     </x-filament::button>
@@ -175,20 +176,20 @@ class="shadow-sm">
                                 </template>
                             </div>
                         </div>
-                        <div class="p-3">
-                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate"
+                        <div class="eclipse-image-card-content">
+                            <p class="eclipse-image-card-title"
                                 x-text="getLocalizedName(image)"></p>
-                            <p class="text-xs text-gray-600 dark:text-gray-400 line-clamp-1"
+                            <p class="eclipse-image-card-description"
                                 x-text="getLocalizedDescription(image)" x-show="getLocalizedDescription(image)"></p>
-                            <div class="flex flex-wrap items-center justify-between mt-2">
-                                <div class="flex items-center gap-2">
+                            <div class="eclipse-image-card-actions">
+                                <div class="eclipse-image-card-buttons">
                                     <x-filament::button size="xs" color="gray" icon="heroicon-m-pencil-square"
-                                        x-on:click="$wire.mountFormComponentAction('{{ $statePath }}', 'editImage', { arguments: { uuid: image.uuid, selectedLocale: getLocale() } })">
+                                        x-on:click="$wire.mountAction('editImage', { uuid: image.uuid, selectedLocale: getLocale() }, { schemaComponent: '{{ $componentKey }}' })">
                                         Edit
                                     </x-filament::button>
 
                                     <x-filament::button size="xs" color="danger" icon="heroicon-m-trash"
-                                        x-on:click="$wire.mountFormComponentAction('{{ $statePath }}', 'deleteImage', { arguments: { uuid: image.uuid } })">
+                                        x-on:click="$wire.mountAction('deleteImage', { uuid: image.uuid }, { schemaComponent: '{{ $componentKey }}' })">
                                         Delete
                                     </x-filament::button>
                                 </div>
@@ -196,7 +197,7 @@ class="shadow-sm">
                                 @if ($getAllowBulkDelete())
                                 <x-filament::input.checkbox :checked="false"
                                     x-bind:checked="selectedImages.includes(image.uuid)"
-                                    x-on:change="toggleImageSelection(image.uuid)" class="flex-shrink-0" />
+                                    x-on:change="toggleImageSelection(image.uuid)" />
                                 @endif
                             </div>
                         </div>
@@ -206,15 +207,14 @@ class="shadow-sm">
         </div>
 
         <div x-show="!state || state.length === 0"
-            class="text-center rounded-xl bg-gray-50/30 dark:bg-gray-900/30 min-h-[280px] flex flex-col items-center justify-center gap-6 py-12 px-6 border-2 border-dashed border-gray-300 dark:border-gray-600"
-            style="border-style: dashed !important;">
-            <div class="flex flex-col items-center gap-4">
-                <div class="p-4 rounded-full bg-gray-100 dark:bg-gray-800">
-                    <x-filament::icon icon="heroicon-o-photo" class="h-12 w-12 text-gray-400 dark:text-gray-500" />
+            class="eclipse-media-gallery-empty">
+            <div class="eclipse-media-gallery-empty-content">
+                <div class="eclipse-media-gallery-empty-icon-wrapper">
+                    <x-filament::icon icon="heroicon-o-photo" class="eclipse-media-gallery-empty-icon" />
                 </div>
-                <div class="space-y-2">
-                    <p class="text-base font-semibold text-gray-700 dark:text-gray-200">No images uploaded yet</p>
-                    <p class="text-sm text-gray-500 dark:text-gray-400 max-w-sm">
+                <div class="eclipse-media-gallery-empty-text">
+                    <p class="eclipse-media-gallery-empty-title">No images uploaded yet</p>
+                    <p class="eclipse-media-gallery-empty-description">
                         @if ($getAllowFileUploads() || $getAllowUrlUploads())
                             Click "Upload Files" or "Add from URL" to add your first image
                         @else
@@ -224,7 +224,7 @@ class="text-center rounded-xl bg-gray-50/30 dark:bg-gray-900/30 min-h-[280px] fl
                 </div>
 
                 @if ($getAllowFileUploads() || $getAllowUrlUploads())
-                    <div class="flex items-center gap-3 mt-2">
+                    <div class="eclipse-media-gallery-empty-actions">
                         @if ($getAllowFileUploads() && $getAction('upload'))
                             {{ $getAction('upload') }}
                         @endif
diff --git a/src/CommonServiceProvider.php b/src/CommonServiceProvider.php
index 58c4703..94f1472 100644
--- a/src/CommonServiceProvider.php
+++ b/src/CommonServiceProvider.php
@@ -37,13 +37,10 @@ public function register(): self
     public function bootingPackage(): void
     {
         FilamentAsset::register([
-            Css::make('media-gallery', __DIR__.'/../resources/css/media-gallery.css'),
-            Js::make('media-gallery', __DIR__.'/../resources/js/media-gallery.js'),
-        ], package: static::$name);
-
-        FilamentAsset::register([
-            Css::make('slider-column', asset('vendor/eclipse-common/slider-column.css')),
-            Js::make('slider-column', asset('vendor/eclipse-common/slider-column.js')),
+            Css::make('media-gallery-styles', __DIR__.'/../resources/css/media-gallery.css'),
+            Js::make('media-gallery-scripts', __DIR__.'/../resources/js/media-gallery.js'),
+            Css::make('slider-column-styles', __DIR__.'/../resources/dist/slider-column.css'),
+            Js::make('slider-column-scripts', __DIR__.'/../resources/dist/slider-column.js'),
         ], 'eclipse-common');
 
         FilamentView::registerRenderHook(
diff --git a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
index 24c5322..3e15cf5 100644
--- a/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
+++ b/src/Filament/Forms/Components/Concerns/HasMediaPreview.php
@@ -123,6 +123,6 @@ public function getGridStyle(): string
 
     public function getGridClasses(): string
     {
-        return 'grid gap-3';
+        return 'eclipse-media-gallery-grid';
     }
 }
diff --git a/src/Filament/Forms/Components/MediaGallery.php b/src/Filament/Forms/Components/MediaGallery.php
index 02fc4eb..2366082 100644
--- a/src/Filament/Forms/Components/MediaGallery.php
+++ b/src/Filament/Forms/Components/MediaGallery.php
@@ -192,38 +192,13 @@ protected function removeDeletedMedia(Model $record, array $state): void
 
     public function getAvailableLocales(): array
     {
-        $locales = [];
-
-        try {
-            $livewire = $this->getLivewire();
-
-            if ($livewire && method_exists($livewire, 'getTranslatableLocales')) {
-                $plugin = filament('spatie-laravel-translatable');
-                foreach ($livewire->getTranslatableLocales() as $locale) {
-                    $locales[$locale] = $plugin->getLocaleLabel($locale) ?? $locale;
-                }
-            }
-        } catch (Exception $e) {
-        }
-
-        if (empty($locales)) {
-            $locales = config('eclipsephp.locales', ['en' => 'English']);
-        }
-
-        return $locales;
-    }
-
-    public function getSelectedLocale(): string
-    {
-        try {
-            $livewire = $this->getLivewire();
-            if ($livewire && property_exists($livewire, 'activeLocale')) {
-                return $livewire->activeLocale;
-            }
-        } catch (Exception $e) {
+        if (class_exists(\Eclipse\Core\Models\Locale::class)) {
+            return \Eclipse\Core\Models\Locale::getAvailableLocales()
+                ->pluck('name', 'id')
+                ->toArray();
         }
 
-        return app()->getLocale();
+        return ['en' => 'English'];
     }
 
     public function imageConversions(array|Closure $conversions): static
@@ -863,7 +838,6 @@ public function getEditAction(): Action
             ->form(function (array $arguments) {
                 $args = $arguments['arguments'] ?? $arguments;
                 $uuid = $args['uuid'] ?? null;
-                $selectedLocale = $args['selectedLocale'] ?? $this->getSelectedLocale();
                 $state = $this->getState();
                 $image = collect($state)->firstWhere('uuid', $uuid);
 
@@ -871,7 +845,16 @@ public function getEditAction(): Action
                     return [];
                 }
 
-                $locales = $this->getAvailableLocales();
+                // Get locales directly from database to avoid any caching issues
+                $locales = [];
+                if (class_exists(\Eclipse\Core\Models\Locale::class)) {
+                    $locales = \Eclipse\Core\Models\Locale::getAvailableLocales()
+                        ->pluck('name', 'id')
+                        ->toArray();
+                }
+                if (empty($locales)) {
+                    $locales = ['en' => 'English'];
+                }
 
                 $fields = [];
 
@@ -884,26 +867,25 @@ public function getEditAction(): Action
                         ]);
                     });
 
-                if (count($locales) > 1) {
-                    $fields[] = Select::make('edit_locale')
-                        ->label('Language')
-                        ->options($locales)
-                        ->default($selectedLocale)
-                        ->live()
-                        ->afterStateUpdated(function ($state, $set) use ($image) {
-                            $set('name', $image['name'][$state] ?? '');
-                            $set('description', $image['description'][$state] ?? '');
-                        });
-                }
+                $defaultLocale = array_key_first($locales);
+                $fields[] = Select::make('locale')
+                    ->label('Language')
+                    ->options($locales)
+                    ->default($defaultLocale)
+                    ->live()
+                    ->afterStateUpdated(function ($state, $set) use ($image) {
+                        $set('name', $image['name'][$state] ?? '');
+                        $set('description', $image['description'][$state] ?? '');
+                    });
 
                 $fields[] = TextInput::make('name')
                     ->label('Name')
-                    ->default($image['name'][$selectedLocale] ?? '');
+                    ->default($image['name'][$defaultLocale] ?? '');
 
                 $fields[] = Textarea::make('description')
                     ->label('Description')
                     ->rows(3)
-                    ->default($image['description'][$selectedLocale] ?? '');
+                    ->default($image['description'][$defaultLocale] ?? '');
 
                 return $fields;
             })
@@ -916,13 +898,13 @@ public function getEditAction(): Action
                 }
 
                 $record = $this->getRecord();
+                $locale = $data['locale'] ?? array_key_first($this->getAvailableLocales());
 
                 if (! $record) {
                     $state = $this->getState();
                     $imageIndex = collect($state)->search(fn ($item) => $item['uuid'] === $uuid);
 
                     if ($imageIndex !== false) {
-                        $locale = $data['edit_locale'] ?? array_key_first($this->getAvailableLocales());
                         $state[$imageIndex]['name'][$locale] = $data['name'] ?? '';
                         $state[$imageIndex]['description'][$locale] = $data['description'] ?? '';
 
@@ -942,7 +924,6 @@ public function getEditAction(): Action
                     $nameTranslations = $media->getCustomProperty('name', []);
                     $descriptionTranslations = $media->getCustomProperty('description', []);
 
-                    $locale = $data['edit_locale'] ?? array_key_first($this->getAvailableLocales());
                     $nameTranslations[$locale] = $data['name'] ?? '';
                     $descriptionTranslations[$locale] = $data['description'] ?? '';
 
diff --git a/tests/Feature/MediaGalleryTest.php b/tests/Feature/MediaGalleryTest.php
index aa86e44..098dad7 100644
--- a/tests/Feature/MediaGalleryTest.php
+++ b/tests/Feature/MediaGalleryTest.php
@@ -151,7 +151,7 @@
         'lg' => 4,
         'xl' => 6,
     ])
-        ->and($field->getGridClasses())->toBe('grid gap-3')
+        ->and($field->getGridClasses())->toBe('eclipse-media-gallery-grid')
         ->and($field->getGridStyle())->toContain('grid-template-columns: repeat(2, 1fr)')
         ->and($field->getGridStyle())->toContain('@media (min-width: 640px)')
         ->and($field->getGridStyle())->toContain('@media (min-width: 1024px)');
@@ -161,7 +161,7 @@
     $field = MediaGallery::make('images')->mediaColumns(5);
 
     expect($field->getMediaColumns())->toBe(5)
-        ->and($field->getGridClasses())->toBe('grid gap-3')
+        ->and($field->getGridClasses())->toBe('eclipse-media-gallery-grid')
         ->and($field->getGridStyle())->toBe('grid-template-columns: repeat(5, 1fr);');
 });