Create universal PanZoom component for all Filament contexts

- Unified PanZoom component that works in Forms, Infolists, Tables, etc.
- Single API: PanZoom::make() works everywhere
- Removed redundant separate components
- Updated README with universal usage examples
- Simplified view with universal wrapper detection
- No need for separate Form/Infolist components anymore

Author: Lui Wing Leung

README.md

@@ -79,88 +79,73 @@ You can use the component directly in any Blade view:
 ])
 ```
 
-### In Filament Forms
+### Universal Usage
 
-Use the simple PanZoom component in your Filament forms:
+The PanZoom component works everywhere in Filament - Forms, Infolists, Tables, etc. One simple API:
 
 ```php
 use SolutionForest\FilamentPanzoom\Components\PanZoom;
 
+// Works in Forms, Infolists, Tables - anywhere!
 PanZoom::make('image_viewer')
     ->label('Receipt Image')
     ->imageUrl(fn ($record) => $record?->image_url ?? '/placeholder.jpg')
     ->imageId(fn ($record) => 'receipt-' . ($record?->id ?? 'new'))
     ->columnSpanFull(),
 ```
 
-### In Filament Resources
-
-Complete example in a Filament Resource:
+### Usage Examples
 
+**In Forms:**
 ```php
-<?php
-
-namespace App\Filament\Resources;
+public static function form(Form $form): Form
+{
+    return $form->schema([
+        PanZoom::make('image_preview')
+            ->imageUrl(fn ($record) => $record?->image_url)
+            ->columnSpanFull(),
+    ]);
+}
+```
 
-use Filament\Forms;
-use Filament\Forms\Form;
-use Filament\Resources\Resource;
-use SolutionForest\FilamentPanzoom\Components\PanZoom;
+**In Infolists:**
+```php
+public function infolist(Infolist $infolist): Infolist
+{
+    return $infolist->schema([
+        PanZoom::make('receipt_image')
+            ->imageUrl(fn ($record) => asset('storage/' . $record->image_path))
+            ->imageId(fn ($record) => 'receipt-' . $record->id),
+    ]);
+}
+```
 
-class ReceiptResource extends Resource
+**In Table Actions:**
+```php
+public static function table(Table $table): Table
 {
-    public static function form(Form $form): Form
-    {
-        return $form
-            ->schema([
-                Forms\Components\TextInput::make('title')
-                    ->required(),
-                
-                Forms\Components\FileUpload::make('image')
-                    ->image()
-                    ->required(),
-                
-                // Simple Pan & Zoom component
+    return $table->actions([
+        Action::make('viewImage')
+            ->form([
                 PanZoom::make('image_viewer')
-                    ->label('Image Preview')
-                    ->imageUrl(fn ($record) => $record?->image_url ?? '/placeholder.jpg')
-                    ->imageId(fn ($record) => 'receipt-' . ($record?->id ?? 'new'))
-                    ->columnSpanFull()
-                    ->hidden(fn ($record) => !$record?->image_url),
-            ]);
-    }
+                    ->imageUrl(fn ($record) => $record->image_url),
+            ])
+    ]);
 }
 ```
 
-### In Filament Pages
-
-For custom Filament pages:
-
+**In Custom Pages:**
 ```php
-// In your Filament Page class
-protected function getViewData(): array
+protected function getFormSchema(): array
 {
     return [
-        'imageUrl' => 'path/to/your/image.jpg',
-        'imageId' => 'my-image-viewer',
+        PanZoom::make('document_viewer')
+            ->imageUrl($this->imageUrl)
+            ->columnSpanFull(),
     ];
 }
 ```
 
-Then in your page view:
-```blade
-<x-filament-panels::page>
-    <div class="space-y-6">
-        <h2>Document Viewer</h2>
-        
-        @include('filament-panzoom::filament-panzoom', [
-            'imageUrl' => $imageUrl,
-            'imageId' => $imageId
-        ])
-    </div>
-</x-filament-panels::page>
-```
-
 ## Component Properties
 
 The component accepts the following properties:

resources/views/components/pan-zoom.blade.php

@@ -1,4 +1,22 @@
-<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+@php
+    // Universal wrapper - works for forms, infolists, and other contexts
+    $wrapperComponent = null;
+    $wrapperData = [];
+    
+    if (method_exists($this, 'getFieldWrapperView')) {
+        // Forms context
+        $wrapperComponent = $this->getFieldWrapperView();
+        $wrapperData = ['field' => $field ?? $this];
+    } elseif (method_exists($this, 'getEntryWrapperView')) {
+        // Infolist context
+        $wrapperComponent = $this->getEntryWrapperView();
+        $wrapperData = ['entry' => $entry ?? $this];
+    }
+@endphp
+
+@if($wrapperComponent)
+    <x-dynamic-component :component="$wrapperComponent" :field="$wrapperData['field'] ?? null" :entry="$wrapperData['entry'] ?? null">
+@endif
     <div 
         x-data="interactiveImage({{ json_encode($getImageUrl()) }}, '{{ $getImageId() }}')"
         class="relative bg-gray-50 rounded-lg border border-gray-200 overflow-hidden w-full"
@@ -65,4 +83,7 @@ class="w-8 h-8 flex items-center justify-center bg-white hover:bg-gray-50 border
             <span x-text="`${Math.round(scale * 100)}%`"></span>
         </div>
     </div>
-</x-dynamic-component>
+
+@if($wrapperComponent)
+    </x-dynamic-component>
+@endif

src/Components/PanZoom.php

@@ -2,17 +2,20 @@
 
 namespace SolutionForest\FilamentPanzoom\Components;
 
-use Filament\Forms\Components\Field;
+use Filament\Forms\Components\Component;
+use Filament\Support\Concerns\EvaluatesClosures;
 
-class PanZoom extends Field
+class PanZoom extends Component
 {
+    use EvaluatesClosures;
+
     protected string $view = 'filament-panzoom::components.pan-zoom';
 
     protected string | \Closure | null $imageUrl = null;
 
     protected string | \Closure | null $imageId = null;
 
-    public static function make(string $name): static
+    public static function make(string $name = 'panzoom'): static
     {
         $static = app(static::class, ['name' => $name]);
         $static->configure();