## Getting Started

### Minimal Setup
1. **Installation**:
   ```bash
   composer require flobbos/page-composer
   php artisan page-composer:install

Follow prompts (name is arbitrary).

Publish Assets:

php artisan vendor:publish --provider="Flobbos\PageComposer\PageComposerServiceProvider"

Select TranslatableDB and PageComposer options.

Configure Dependencies:
- Update config/translatable-db.php:
```
'language_model' => 'Flobbos\PageComposer\Models\Language',
```
- Add Tailwind paths in tailwind.config.js:
```
content: [
  "./vendor/flobbos/page-composer/src/resources/views/**/*.blade.php",
],
```
- Add @stack('scripts') and @stack('styles') to your layout file.
Run Migrations:
```
php artisan migrate
```

Add Routes (in routes/web.php):

route('page-composer::pages.index');
route('page-composer::pages.create');
route('page-composer::pages.edit', $page_id);
route('page-composer::pages.detail', $page_id);

First Use Case

Create a new page via route('page-composer::pages.create') and:

Add a row (click "+ Row").
Insert a column (click "+ Column").
Drag a text element from the sidebar into the column.
Edit the text using the Quill editor.
Save and preview with route('page-composer::pages.detail', $page_id).

Implementation Patterns

Core Workflow

Page Structure:
- Pages contain rows (e.g., hero, content, footer).
- Rows contain columns (configurable via column_presets).
- Columns hold elements (text, images, custom components).
Element Management:
- Built-in Elements: Text, HeadlineText, Image, Video (extendable via app/Livewire/PageComposerElements/).
- Custom Elements:
  - Create a new Livewire component (e.g., app/Livewire/PageComposerElements/MyElement.php).
  - Register it in config/pagecomposer.php under custom_elements.
  - Use the Element Creator (if enabled) to scaffold a new element.
Livewire Integration:
- All editors use Livewire 4 for real-time updates.
- Drag-and-drop for rows/columns/elements uses wire:sort (replaces wire:sortable).
- Example row sorting in a Livewire component:
```
public function sortRows($id, $position) {
    $this->page->rows[$position] = $this->page->rows[$id];
    unset($this->page->rows[$id]);
}
```
Translation Handling:
- Uses flobbos/translatable-db for multi-language support.
- Translate page content via the Language dropdown in the editor.
Previewing:
- Use route('page-composer::pages.detail', $page_id) to render pages with:
```
@livewire('page-composer::page-detail', ['page' => $page], key($page->id))
```

Integration Tips

Frontend Rendering: Loop through rows/columns/elements in your Blade templates:

@foreach($page->rows as $row)
    <div class="flex">
        @foreach($row->columns as $column)
            <div class="{{ config('pagecomposer.column_widths'][$column->size] }}">
                {!! $column->element->render() !!}
            </div>
        @endforeach
    </div>
@endforeach

Dynamic Layouts: Override column_presets in config/pagecomposer.php to enforce consistent layouts:

'column_presets' => [
    ['size' => 12, 'label' => 'Full', 'group' => 'full'],
    ['size' => 6, 'label' => 'Half', 'group' => 'halves'],
],

Element Styling: Use Tailwind classes from column_widths (e.g., w-full, w-1/2) for responsive columns.
Asset Management: Uploaded images/videos are stored in storage/app/public/page-composer. Symlink to public:
```
php artisan storage:link --force
```

Caching: Clear caches after major changes:

php artisan view:clear
php artisan config:clear

Gotchas and Tips

Pitfalls

Stale Row Space:
- If columns appear misaligned, run:
```
php artisan page-composer:sync-row-space --dry-run
```
- Use --dry-run to preview changes before applying.
Quill Editor Conflicts:
- Avoid naming Alpine components quillEditor (use pageComposerEditor instead).
- If publishing custom elements, ensure they reference the correct Alpine component:
```
<div x-data="pageComposerEditor({})">
```
Livewire 4 Migration:
- Replace wire:sortable with wire:sort in custom components.
- Update sort handlers from (array $items) to ($id, $position) (zero-based).
Tailwind Class Mismatches:
- Ensure column_widths in config/pagecomposer.php matches your Tailwind classes.
- Missing sizes default to w-full.
Translation Issues:
- Verify language_model in config/translatable-db.php points to Flobbos\PageComposer\Models\Language.
- Run php artisan config:clear if translations fail to load.
Element Creator in Production:
- Disable showElementCreator in production to hide the stub generator:
```
'showElementCreator' => env('APP_DEBUG'),
```

Debugging

Livewire Errors: Check the browser console for Alpine/Quill conflicts. Disable other quillEditor components temporarily.
Database Issues: Use --dry-run for migrations to inspect SQL changes:
```
php artisan migrate --dry-run
```

Asset Loading: Ensure @stack('scripts') and @stack('styles') are in your layout. Verify Tailwind scans the package views:

// tailwind.config.js
content: [
    "./vendor/flobbos/page-composer/src/resources/views/**/*.blade.php",
    "./resources/views/**/*.blade.php",
],

Extension Points

Custom Elements:
- Extend Flobbos\PageComposer\Livewire\Elements\BaseElement for new elements.
- Register in config/pagecomposer.php:
```
'custom_elements' => [
    'MyElement' => \App\Livewire\PageComposerElements\MyElement::class,
],
```

Element Rendering: Override the render() method in custom elements to modify output:

public function render() {
    return view('livewire.page-composer-elements.my-element', ['element' => $this]);
}

Validation Rules: Extend default rules in config/pagecomposer.php:
```
'rules' => [
    'page.custom_field' => 'required|string',
],
```
Column Presets: Dynamically load presets from a database or API by overriding the getColumnPresets() method in a service provider.

Middleware: Customize route middleware in config/pagecomposer.php:

'middleware' => [
    'web',
    'auth:sanctum',
    'verified',
    \App\Policies\PageComposerPolicy::class, // Example custom policy
],

Performance Tips

Lazy-Load Elements: Use wire:ignore for heavy elements (e.g., videos) to improve initial load time:
```
<div wire:ignore>{{ $element->render() }}</div>
```

Cache Page Renders: Cache the page-detail Livewire component by key:

@livewire('page-composer::page-detail', ['page' => $page], key($page->id . '-' . $page->locale))

Batch Sync: For large sites, sync row space in batches:
```
php artisan page-composer:sync-row-space --batch=100
```

Configuration Quirks

Quill Toolbar: The default toolbar is minimal. Add groups to enable more formatting:
```
'quill_toolbar' => [
    [['header' => [false, 1,
```

Page Composer Laravel Package