### Correct MoonShine Layout Initialization

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

This example shows the correct way to start your Blade template with MoonShine layout components. It avoids duplicating HTML tags by directly using the provided layout components.

```blade
<x-moonshine::layout>
    <x-moonshine::layout.html :with-alpine-js="true" :with-themes="true">
        <x-moonshine::layout.head>
            <x-moonshine::layout.meta name="csrf-token" :content="csrf_token()"/>
            <x-moonshine::layout.favicon />
            <x-moonshine::layout.assets>
                @vite(['resources/css/main.css', 'resources/js/app.js'], 'vendor/moonshine')
            </x-moonshine::layout.assets>
        </x-moonshine::layout.head>
        <x-moonshine::layout.body>
            <!-- Your content -->
        </x-moonshine::layout.body>
    </x-moonshine::layout.html>
</x-moonshine::layout>
```

--------------------------------

### MoonShine Menu Component `prepareBeforeRender()` Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

A real-world example of the `prepareBeforeRender` method from the MoonShine Menu component, showing conditional attribute setting and state modification based on component properties.

```php
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();

    if (! $this->isTop() && $this->isScrollTo()) {
        $this->customAttributes([
            'x-init' => "\$nextTick(() => \$el.querySelector('.menu-item._is-active')?.scrollIntoView())",
        ]);
    }

    if ($this->isTop()) {
        $this->items->topMode();
    }
}
```

--------------------------------

### Component Usage Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Demonstrates how to instantiate and configure a component using its fluent methods, such as `copyright` and `menu`.

```php
Footer::make()->copyright('© 2024 My Company')->menu([
    '/privacy' => 'Privacy Policy',
    '/terms' => 'Terms of Service',
])
```

--------------------------------

### Usage Example of Fluent Methods

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Illustrates how to use the fluent methods defined in a component for chained configuration.

```php
Alert::make()
    ->type('warning')
    ->message('Be careful!')
    ->dismissible()
```

--------------------------------

### Component Class Anatomy: `prepareBeforeRender()` Method - Styling and Alpine.js Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

This example demonstrates preparing component attributes within `prepareBeforeRender`, including merging styles and adding Alpine.js initialization for interactive elements.

```php
    if ($style) {
        $this->customAttributes([
            'style' => $style,
        ]);
    }

    // Example: Add Alpine.js initialization
    if ($this->isScrollable) {
        $this->customAttributes([
            'x-init' => "\$nextTick(() => \$el.querySelector('.active')?.scrollIntoView())",
        ]);
    }
}
```

--------------------------------

### Fluent Method Usage Examples

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Illustrates how to use the custom `boolean` and `image` fluent methods when creating field instances.

```php
Preview::make('Status')->boolean()
Preview::make('Avatar')->image()
Preview::make('Active')->boolean(hideTrue: true)
```

--------------------------------

### Alert Component Usage Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Demonstrates how to instantiate and configure the Alert component in PHP. Shows setting type, message, and making it dismissible.

```php
Alert::make()
    ->type('warning')
    ->message('This is a warning!')
    ->dismissible()
```

--------------------------------

### Manual PostCSS Configuration

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Install and configure PostCSS for your custom build. This involves installing the necessary package and creating a postcss.config.js file.

```shell
npm install @tailwindcss/postcss
```

```javascript
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
```

--------------------------------

### Real Example: Virtual Field Preparation

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Illustrates how to prepare a virtual field for rendering by removing its 'name' attribute, ensuring it is not submitted with form data.

```php
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();

    // Remove 'name' attribute so field isn't submitted
    $this->removeAttribute('name');
}

public function isCanApply(): bool
{
    return false; // Virtual fields don't save
}
```

--------------------------------

### Logo Path Examples

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Demonstrates different ways to specify the path for the main logo image, including relative paths and absolute URLs.

```blade
logo="/images/logo.svg"
```

```blade
logo="/vendor/moonshine/logo.png"
```

```blade
logo="/storage/logo.jpg"
```

```blade
logo="https://example.com/logo.svg"
```

--------------------------------

### Common Fluent Method Patterns

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Provides examples of common fluent method patterns for toggling features, configuring options, and setting related data.

```php
// Toggle feature
public function withSomething(): static
{
    $this->hasSomething = true;
    return $this;
}

// Configure option
public function variant(string $variant): static
{
    $this->variant = $variant;
    return $this;
}

// Set related data
public function options(array $options): static
{
    $this->options = $options;
    return $this;
}
```

--------------------------------

### Common Fluent Method Patterns

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Provides examples of common fluent method implementations, including toggling features, setting variants, setting content, and supporting closures.

```php
// Toggle feature
public function withIcon(): static
{
    $this->hasIcon = true;
    return $this;
}

// Set variant
public function variant(string $variant): static
{
    $this->variant = $variant;
    return $this;
}

// Set content
public function title(string $title): static
{
    $this->title = $title;
    return $this;
}

// Closure support
public function text(string|Closure $text): static
{
    $this->text = $text;
    return $this;
}
```

--------------------------------

### Breadcrumbs Component Usage Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Demonstrates how to instantiate and populate the Breadcrumbs component with an array of URL-label pairs. Used to build navigation trails.

```php
Breadcrumbs::make()->items([
    '/' => 'Home',
    '/users' => 'Users',
    '#' => 'Edit User',
])
```

--------------------------------

### Component Class Anatomy: `prepareBeforeRender()` Method - Image Attributes Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Use the `prepareBeforeRender` method to process data and prepare component state before rendering. This example shows how to set image attributes based on component properties like width, height, and lazy loading.

```php
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();

    // Example: Prepare image attributes
    if ($this->width) {
        $this->imageAttributes['width'] = $this->width;
    }

    if ($this->height) {
        $this->imageAttributes['height'] = $this->height;
    }

    if ($this->lazy) {
        $this->imageAttributes['loading'] = 'lazy';
    }

    // Example: Merge styles
    $style = $this->objectFit ? "object-fit: {$this->objectFit};":
```

--------------------------------

### Basic Template Structure

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Start your Blade file with `<x-moonshine::layout>` to ensure correct MoonShine component integration and avoid duplicate HTML tags.

```blade
<x-moonshine::layout>
    {{-- Your Blade content here --}}
</x-moonshine::layout>
```

--------------------------------

### Stats Card Component Usage Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Shows how to create a Stats Card component, setting its label, value (using a Closure for dynamic data), icon, and color. Useful for displaying key metrics.

```php
StatsCard::make()
    ->label('Total Users')
    ->value(fn() => User::count())
    ->icon('users')
    ->color('success')
```

--------------------------------

### Customizing Preview Mode Rendering

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Provides an example of overriding the `resolvePreview` method to control how a field's value is rendered in preview mode.

```php
protected function resolvePreview(): Renderable|string
{
    return "<strong>{$this->toFormattedValue()}</strong>";
}
```

--------------------------------

### Grid Layout Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Use the grid component to create a 12-column layout. Customize spacing with the `gap` parameter and column spans for different screen sizes using `colSpan` and `adaptiveColSpan`.

```blade
<x-moonshine::layout.grid :gap="6">
    <x-moonshine::layout.column :colSpan="8" :adaptiveColSpan="12">
        <!-- Main content -->
    </x-moonshine::layout.column>
    <x-moonshine::layout.column :colSpan="4" :adaptiveColSpan="12">
        <!-- Side content -->
    </x-moonshine::layout.column>
</x-moonshine::layout.grid>
```

--------------------------------

### Flex Container Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Create flexible layouts using the flex component. Control vertical and horizontal alignment, column spans, and spacing between elements.

```blade
<x-moonshine::layout.flex
    :itemsAlign="'center'"
    :justifyAlign="'between'"
    :colSpan="12"
    :adaptiveColSpan="12"
    :withoutSpace="false"
>
    <div>Element 1</div>
    <div>Element 2</div>
</x-moonshine::layout.flex>
```

--------------------------------

### MobileBar with Different Desktop Navigation

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

This example demonstrates using MobileBar for mobile navigation while a separate TopBar handles desktop navigation. MobileBar must be placed above TopBar in the layout structure.

```blade
<x-moonshine::layout.wrapper>
    <!-- MobileBar for mobile devices (appears first) -->
    <x-moonshine::layout.mobile-bar>
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" logo="/logo.svg"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu menu--horizontal">
            <x-moonshine::layout.menu
                :elements="[
                    ['label' => 'Home', 'url' => '/'],
                    ['label' => 'Mobile-Only Menu', 'url' => '/mobile']
                ]"
            />
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger mobile-bar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.mobile-bar>

    <!-- TopBar for desktop -->
    <x-moonshine::layout.top-bar>
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" logo="/logo.svg"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu menu--horizontal">
            <x-moonshine::layout.menu
                :elements="[
                    ['label' => 'Dashboard', 'url' => '/dashboard'],
                    ['label' => 'Analytics', 'url' => '/analytics']
                ]"
            />
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger topbar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.top-bar>

    <!-- Main content -->
    <x-moonshine::layout.div class="layout-main">
        <x-moonshine::layout.div class="layout-page">
            <!-- Page content -->
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.wrapper>
```

--------------------------------

### Incorrect MoonShine Layout Structures

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Examples of incorrect layout structures that should be avoided. These will break styling and responsiveness.

```blade
<!-- ❌ WRONG: Missing layout-main and layout-page -->
<x-moonshine::layout.wrapper>
    <x-moonshine::layout.sidebar>...</x-moonshine::layout.sidebar>
    <x-moonshine::layout.content>
        <!-- This will break styling and responsiveness -->
    </x-moonshine::layout.content>
</x-moonshine::layout.wrapper>
```

```blade
<!-- ❌ WRONG: Incorrect class names -->
<x-moonshine::layout.wrapper>
    <x-moonshine::layout.div class="main-layout">  <!-- Wrong class -->
        <x-moonshine::layout.div class="page-layout">  <!-- Wrong class -->
            <x-moonshine::layout.content>...</x-moonshine::layout.content>
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.wrapper>
```

--------------------------------

### Integrate Burger Component in Layouts

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Examples demonstrating the integration of the x-moonshine::layout.burger component within different layout sections like sidebar, topbar, and mobile-bar.

```blade
<!-- In Sidebar -->
<x-moonshine::layout.sidebar :collapsed="true">
    <x-moonshine::layout.div class="menu-header">
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" :logo="'/logo.png'"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger sidebar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.sidebar>
```

```blade
<!-- In TopBar -->
<x-moonshine::layout.top-bar>
    <x-moonshine::layout.div class="menu-actions">
        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger topbar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.top-bar>
```

```blade
<!-- In MobileBar -->
<x-moonshine::layout.mobile-bar>
    <x-moonshine::layout.div class="menu-burger">
        <x-moonshine::layout.burger mobile-bar />
    </x-moonshine::layout.div>
</x-moonshine::layout.mobile-bar>
```

--------------------------------

### Icon Component Examples

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Display individual icons using the icon component. Supports various styles (outline, solid, mini, micro) and allows customization of size and color.

```blade
<!-- Outline icons (default) -->
<x-moonshine::icon icon="home" />
<x-moonshine::icon icon="users" />
<x-moonshine::icon icon="cog-6-tooth" />
```

```blade
<!-- Solid icons -->
<x-moonshine::icon icon="s.home" />
<x-moonshine::icon icon="s.users" />
<x-moonshine::icon icon="s.heart" />
```

```blade
<!-- Mini icons -->
<x-moonshine::icon icon="m.star" />
<x-moonshine::icon icon="m.bell" />
```

```blade
<!-- Micro icons -->
<x-moonshine::icon icon="c.check" />
<x-moonshine::icon icon="c.x-mark" />
```

```blade
<!-- With custom size and color -->
<x-moonshine::icon icon="academic-cap" size="8" color="primary" />
```

--------------------------------

### MobileBar within Layout Wrapper Example

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Demonstrates using MobileBar alongside TopBar within a layout wrapper to provide different navigation for mobile and desktop users. The MobileBar must be placed above the TopBar.

```blade
<!-- Desktop shows TopBar menu, mobile shows different MobileBar menu -->
<x-moonshine::layout.wrapper>
    <!-- MobileBar for mobile devices (appears first) -->
    <x-moonshine::layout.mobile-bar>
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" logo="/logo.svg"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu menu--horizontal">
            <x-moonshine::layout.menu
                :elements="[
                    ['label' => 'Home', 'url' => '/'],
                    ['label' => 'Mobile-Only Menu', 'url' => '/mobile']
                ]"
            />
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger mobile-bar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.mobile-bar>

    <!-- TopBar for desktop -->
    <x-moonshine::layout.top-bar>
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" logo="/logo.svg"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu menu--horizontal">
            <x-moonshine::layout.menu
                :elements="[
                    ['label' => 'Dashboard', 'url' => '/dashboard'],
                    ['label' => 'Analytics', 'url' => '/analytics']
                ]"
            />
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger topbar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.top-bar>

    <!-- Main content -->
    <x-moonshine::layout.div class="layout-main">
        <x-moonshine::layout.div class="layout-page">
            <!-- Page content -->
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.wrapper>
```

--------------------------------

### Usage Example for RatingField

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Demonstrates how to instantiate and configure the custom RatingField in a MoonShine resource. Allows setting a custom maximum rating and choosing between star or number display.

```php
Rating::make('Score')
    ->max(10)
    ->variant('numbers')

```

--------------------------------

### System Data Available in Field Views

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Illustrates the system data automatically provided to all field views, such as value, attributes, label, column, and errors. This example shows how to use these directly in a simple form input.

```blade
@props([
'value',
'attributes',
'label',
'column',
'errors',
])

<!-- You can use these immediately -->
<div>
    <label>{{ $label }}</label>
    <input
        type="text"
        value="{{ $value }}"
        {{ $attributes }}
    />
    @if($errors)
        <span class="error">{{ $errors }}</span>
    @endif
</div>
```

--------------------------------

### Vite Configuration for Custom Build

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Manually configure your vite.config.js file for a custom build. This setup ensures that your custom CSS and JavaScript are processed correctly alongside MoonShine's assets.

```js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '@moonshine-resources': '/vendor/moonshine/moonshine/src/UI/resources',
        }
    },
});
```

--------------------------------

### Basic Template Structure

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

The Blade file must start with `<x-moonshine::layout>` and not with `<!DOCTYPE html>`. MoonShine components automatically generate the basic HTML document structure.

```blade
<x-moonshine::layout>
    {{-- Your Blade content --}}
</x-moonshine::layout>
```

--------------------------------

### Create Ocean Blue Color Palette

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-palettes/references/palettes.md

Implement the PaletteContract to define a custom color palette for the Moonshine UI. This example creates an 'Ocean Blue' theme with specific color values for light and dark modes.

```php
<?php

declare(strict_types=1);

namespace App\MoonShine\Palettes;

use MoonShine\Contracts\ColorManager\PaletteContract;

final class OceanBluePalette implements PaletteContract
{
    public function getDescription(): string
    {
        return 'Ocean blue theme';
    }

    public function getColors(): array
    {
        return [
            'body' => '0.985 0.008 240',
            'primary' => '0.58 0.24 240',
            'primary-text' => '0.985 0.008 240',
            'secondary' => '0.92 0.06 240',
            'secondary-text' => '0.22 0.02 240',
            'base' => [
                'text' => '0.22 0.02 240',
                'stroke' => '0.58 0.24 240 / 20%',
                'default' => '0.985 0.008 240',
                50 => '0.969 0.016 240',
                100 => '0.95 0.025 240',
                200 => '0.93 0.045 240',
                300 => '0.90 0.07 240',
                400 => '0.86 0.11 240',
                500 => '0.77 0.16 240',
                600 => '0.67 0.20 240',
                700 => '0.58 0.24 240',
                800 => '0.48 0.19 240',
                900 => '0.38 0.14 240',
            ],
            'success' => '0.64 0.22 142.49',
            'success-text' => '0.46 0.16 142.49',
            'warning' => '0.75 0.17 75.35',
            'warning-text' => '0.5 0.10 76.10',
            'error' => '0.58 0.21 26.855',
            'error-text' => '0.37 0.145 26.85',
            'info' => '0.60 0.219 240',  // Match primary hue
            'info-text' => '0.35 0.12 240',
        ];
    }

    public function getDarkColors(): array
    {
        return [
            'body' => '0.18 0.04 240',
            'primary' => '0.72 0.18 240',
            'primary-text' => '0.16 0.05 240',
            'secondary' => '0.48 0.14 240',
            'secondary-text' => '0.94 0.04 240',
            'base' => [
                'text' => '0.90 0.03 240',
                'stroke' => '0.72 0.18 240 / 20%',
                'default' => '0.22 0.05 240',
                50 => '0.24 0.05 240',
                100 => '0.29 0.06 240',
                200 => '0.33 0.07 240',
                300 => '0.39 0.09 240',
                400 => '0.46 0.12 240',
                500 => '0.54 0.15 240',
                600 => '0.63 0.17 240',
                700 => '0.72 0.18 240',
                800 => '0.80 0.15 240',
                900 => '0.87 0.12 240',
            ],
            'success' => '0.64 0.22 142.495',
            'success-text' => '0.93 0.12 144.46',
            'warning' => '0.9 0.22 92.72',
            'warning-text' => '0.99 0.072 107.64',
            'error' => '0.589 0.214 26.855',
            'error-text' => '0.71 0.24 25.96',
            'info' => '0.6 0.22 240',
            'info-text' => '0.88 0.065 240',
        ];
    }
}

```

--------------------------------

### Conditional Field Display in Preview

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Implement conditional logic for displaying field values in preview mode. This example handles boolean and image types, allowing for custom rendering based on their values.

```php
use MoonShine\UI\Components\Boolean;

protected function resolvePreview(): Renderable|string
{
    $value = $this->toFormattedValue();

    if ($this->isBoolean) {
        $value = (bool) $value;

        return match (true) {
            $this->hideTrue && $value => '',
            $this->hideFalse && !$value => '',
            default => (string) Boolean::make($value)->render(),
        };
    }

    if ($this->isImage) {
        return Thumbnails::make($value)->render();
    }

    return (string) $value;
}
```

--------------------------------

### Example Usage of Custom Tailwind Class

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

After setting up a custom build, you can use any Tailwind classes in your templates. This example demonstrates using a gradient class.

```blade
<div class="bg-gradient-to-r from-blue-500 to-purple-600"></div>
```

--------------------------------

### Logo in Sidebar Header

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Example of integrating the logo component within a sidebar header for consistent branding.

```blade
<x-moonshine::layout.sidebar>
    <x-moonshine::layout.div class="menu-header">
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo
                href="/"
                logo="/images/company-logo.svg"
                logo-small="/images/company-icon.svg"
                title="Company Dashboard"
            />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.sidebar>
```

--------------------------------

### Basic Fluent Method Usage

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Demonstrates chaining fluent methods to configure a field's appearance and behavior.

```php
Preview::make('Content')
    ->boolean()
    ->image()
```

--------------------------------

### Basic OffCanvas Panel

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

A simple OffCanvas panel with a title and basic content. Use this as a starting point for custom panels.

```blade
<x-moonshine::off-canvas
    title="Settings Panel"
    :left="false"
    :wide="false"
    :full="false"
    :open="false"
>
    <x-slot:toggler>
        Open Settings
    </x-slot:toggler>

    <div>
        <p>Panel content here</p>
        <button class="btn btn-primary">Save</button>
    </div>
</x-moonshine::off-canvas>
```

--------------------------------

### Integrate Burger Button in Sidebar Layout

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Example of integrating the x-moonshine::layout.burger component within a sidebar layout to control the sidebar menu.

```blade
<x-moonshine::layout.sidebar :collapsed="true">
    <x-moonshine::layout.div class="menu-header">
        <x-moonshine::layout.div class="menu-logo">
            <x-moonshine::layout.logo href="/" :logo="'/logo.png'"/>
        </x-moonshine::layout.div>

        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger sidebar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.sidebar>
```

--------------------------------

### Basic Link Buttons and Native Links

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Demonstrates the basic usage of `link-button` for styled buttons and `link-native` for natural link appearance.

```blade
<!-- Basic link button -->
<x-moonshine::link-button href="/dashboard">
    Go to Dashboard
</x-moonshine::link-button>

<!-- Native link style -->
<x-moonshine::link-native href="/profile">
    View Profile
</x-moonshine::link-native>

<!-- Filled link button -->
<x-moonshine::link-button href="/settings" :filled="true">
    Settings
</x-moonshine::link-button>
```

--------------------------------

### Configuring Component with Fluent Methods

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/SKILL.md

Fluent methods allow for a chainable configuration of component properties. Each method should return `static` to enable method chaining.

```php
public function title(string $title): static
{
    $this->title = $title;
    return $this;
}
```

--------------------------------

### Creating Fluent Methods in a Component

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Shows how to implement fluent methods for configuring component properties. Each method must return `$this` to enable method chaining.

```php
class Alert extends MoonShineComponent
{
    protected string $type = 'info';
    protected string $message = '';
    protected bool $dismissible = false;

    public function type(string $type): static
    {
        $this->type = $type;
        return $this; // ← MUST return $this
    }

    public function message(string $message): static
    {
        $this->message = $message;
        return $this;
    }

    public function dismissible(bool $dismissible = true): static
    {
        $this->dismissible = $dismissible;
        return $this;
    }
}
```

--------------------------------

### Using Heroicons in MoonShine

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Demonstrates how to specify different icon styles (outline, solid, mini, micro) using the `icon` attribute.

```blade
icon="home"
- outline home icon
```

```blade
icon="s.home"
- solid home icon
```

```blade
icon="m.home"
- mini home icon
```

```blade
icon="c.home"
- micro home icon
```

--------------------------------

### Custom CSS Entry Point for Build

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Define your main CSS file (e.g., app.css) to import MoonShine's core styles and include necessary directives for Tailwind CSS processing. This file acts as the entry point for your custom build.

```css
@import '../../vendor/moonshine/moonshine/src/UI/resources/css/main.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
```

--------------------------------

### Integrate Burger Button in MobileBar Layout

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Example of integrating the x-moonshine::layout.burger component within a mobile bar layout to control the mobile-specific dropdown menu.

```blade
<x-moonshine::layout.mobile-bar>
    <x-moonshine::layout.div class="menu-burger">
        <x-moonshine::layout.burger mobile-bar />
    </x-moonshine::layout.div>
</x-moonshine::layout.mobile-bar>
```

--------------------------------

### Integrate Burger Button in TopBar Layout

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Example of integrating the x-moonshine::layout.burger component within a top bar layout to control the top navigation bar menu.

```blade
<x-moonshine::layout.top-bar>
    <x-moonshine::layout.div class="menu-actions">
        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger topbar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.top-bar>
```

--------------------------------

### Preparing Before Rendering with prepareBeforeRender()

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/SKILL.md

Implement `prepareBeforeRender()` to process logic before the component is rendered. This is the place to prepare attributes or merge styles.

```php
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();
    // Prepare attributes, merge styles here
}
```

--------------------------------

### Using the value() Helper

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Demonstrates the use of the `value()` helper function to evaluate closures or return values directly, typically for properties that can accept either.

```php
use function MoonShine\UI\Components\Layout\value;

public function getCopyright(): string
{
    // value() evaluates closures, returns as-is for strings
    return value($this->copyright);
}
```

--------------------------------

### Best Practice: Move Logic from Blade to PHP

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Demonstrates the recommended approach of moving conditional logic for view attributes from Blade views to the `prepareBeforeRender()` method in PHP classes.

```php
// ✅ GOOD - Logic in PHP class
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();

    if ($this->width) {
        $this->imageAttributes['width'] = $this->width;
    }

    if ($this->height) {
        $this->imageAttributes['height'] = $this->height;
    }

    if ($this->lazy) {
        $this->imageAttributes['loading'] = 'lazy';
    }
}

protected function viewData(): array
{
    return [
        'imageAttributes' => $this->imageAttributes,
    ];
}
```

--------------------------------

### Using Heroicons in MoonShine

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Demonstrates how to use Heroicons for icon display by specifying the icon name with optional prefixes for different styles (solid, mini, micro).

```blade
icon="home"
```

```blade
icon="s.home"
```

```blade
icon="m.home"
```

```blade
icon="c.home"
```

--------------------------------

### Page Footer with Links

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Construct a footer containing copyright information and navigation links.

```blade
<x-moonshine::layout.footer>
    <x-moonshine::layout.flex :justifyAlign="'between'">
        <div>
            <p>&copy; 2024 Your Company</p>
        </div>
        <div>
            <x-moonshine::link-native href="/privacy">Privacy</x-moonshine::link-native>
            <x-moonshine::link-native href="/terms">Terms</x-moonshine::link-native>
        </div>
    </x-moonshine::layout.flex>
</x-moonshine::layout.footer>
```

--------------------------------

### Open Graph Meta Tag

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Include an Open Graph meta tag, for example, to set the 'og:title'. Use the 'property' attribute for non-standard names and 'content' for the value.

```blade
<x-moonshine::layout.meta
    property="og:title"
    content="Admin Dashboard"
/>
```

--------------------------------

### Implement a JSON Editor Field

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Create a field for editing JSON data. This example decodes incoming JSON strings and encodes arrays back into JSON strings before saving.

```php
class JsonEditor extends Field
{
    protected function resolveValue(): mixed
    {
        $value = $this->toValue();
        return is_string($value) ? json_decode($value, true) : $value;
    }

    protected function resolveOnApply(): ?Closure
    {
        return function (mixed $item): mixed {
            $value = $this->getRequestValue();

            // Convert array to JSON string
            $json = is_array($value) ? json_encode($value) : $value;

            data_set($item, $this->getColumn(), $json);

            return $item;
        };
    }

    protected function viewData(): array
    {
        return [
            'value' => json_encode($this->toValue(), JSON_PRETTY_PRINT),
        ];
    }
}
```

--------------------------------

### Alpine.js Integration for Field Interactivity

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Shows how to integrate Alpine.js directly into a field template for client-side interactivity. This example creates a simple counter with increment functionality and binds it to a hidden input.

```blade
@props(['value' => ''])

<div x-data="{ count: {{ $value ?? 0 }} }">
    <button @click="count++">Increment</button>
    <span x-text="count"></span>

    <input
        type="hidden"
        {{ $attributes }}
        x-model="count"
    />
</div>
```

--------------------------------

### Publish MoonShine Assets Template

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-components/references/blade-components.md

Use this command to automatically publish and configure MoonShine's assets template, including vite.config.js and postcss.config.js. This is recommended for custom builds.

```shell
php artisan moonshine:publish
```

--------------------------------

### Default Mode Field Initialization

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Shows how to initialize a Text field for default mode, typically used for interactive data entry in forms.

```php
Text::make('Title') // Renders <input type="text">
```

--------------------------------

### Preview Mode Field Initialization

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Demonstrates initializing a Text field for preview mode, used for read-only display in tables. The field automatically switches to this mode in TableBuilder.

```php
Text::make('Title') // Renders formatted text value
```

--------------------------------

### Use Type Hints for Clarity (PHP)

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Employ type hints for method return types and parameters to enhance code readability and prevent type-related errors. This makes the expected data types explicit.

```php
protected function resolvePreview(): Renderable|string
{
    return (string) $this->toFormattedValue();
}

public function variant(string $variant): static
{
    $this->variant = $variant;
    return $this;
}
```

```php
protected function resolvePreview()
{
    return $this->toFormattedValue();
}

public function variant($variant)
{
    $this->variant = $variant;
    return $this;
}
```

--------------------------------

### Nested Components with AbstractWithComponents

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Extend `AbstractWithComponents` to create components that can contain other Moonshine components. The nested components are rendered using `<x-moonshine::components />`.

```php
use MoonShine\UI\Components\AbstractWithComponents;
use MoonShine\Contracts\UI\ComponentContract;

class Footer extends AbstractWithComponents
{
    protected string $view = 'admin.components.footer';

    /**
     * @param  iterable<array-key, ComponentContract>  $components
     */
    public function __construct(
        iterable $components = [],
        protected array $menu = []
    )
    {
        parent::__construct($components);
    }

    protected function viewData(): array
    {
        return [
            'menu' => $this->menu,
        ];
    }
}
```

```blade
@props([
    'components' => [],
    'menu' => []
])

<footer {{ $attributes }}>
    <!-- Render nested components -->
    <x-moonshine::components :components="$components" />

    {{ $slot ?? '' }}

    <nav>
        @foreach($menu as $link => $label)
            <a href="{{ $link }}">{{ $label }}</a>
        @endforeach
    </nav>
</footer>
```

--------------------------------

### Passing Custom Data to Field Views

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Shows how to pass custom data from a PHP class's `viewData()` method to a Blade template. This example uses 'options' and 'isReadonly' props to render a disabled select dropdown.

```php
// In PHP class
protected function viewData(): array
{
    return [
        // Don't pass 'value' - it's already available!
        'options' => $this->getOptions(),
        'isReadonly' => $this->isReadonly(),
    ];
}
```

```blade
<!-- In Blade template -->
@props([
    // System data (always available, don't need to declare)
    'value',
    'attributes',
    'label',

    // Your custom data from viewData()
    'options',
    'isReadonly',
])

<select {{ $attributes }} @if($isReadonly) disabled @endif>
    @foreach($options as $key => $label)
        <option value="{{ $key }}" @selected($key == $value)>
            {{ $label }}
        </option>
    @endforeach
</select>
```

--------------------------------

### Real-world Blade Example for Yandex Map Field

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

This comprehensive Blade component demonstrates a Yandex Map field with proper handling of multiple instances. It generates unique IDs, passes configuration to the Alpine.js component, and allows attribute customization from PHP, ensuring independent operation and no ID conflicts.

```blade
@props([
    'value',
    'attributes',
    'defaultLat' => 55.751244,
    'defaultLng' => 37.618423,
    'defaultZoom' => 10,
])

<div
    x-data="yandexMap({
        lat: {{ $value['lat'] ?? $defaultLat }},
        lng: {{ $value['lng'] ?? $defaultLng }},
        zoom: {{ $defaultZoom }},
        fieldId: '{{ $attributes->get('id', 'yandex-map-' . uniqid()) }}'
    })"
    x-init="initMap()"
    {{ $attributes->except(['name', 'id']) }}
    class="yandex-map-field">
    <div class="grid grid-cols-1 gap-4">
        <div :id="fieldId" class="map-container h-64"></div>

        <input
            type="hidden"
            {{ $attributes->only(['name']) }}
            x-model="coordinates"
        />
    </div>
</div>
```

--------------------------------

### Moonshine Field Value Access Methods

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Use these methods to retrieve field values in different contexts. `toValue()` gets the raw model value, `toFormattedValue()` applies formatters for display, and `getRequestValue()` fetches data from form submissions. `getColumn()` returns the database column name, and `getLabel()` retrieves the field's display label.

```php
// Get raw value from model (use in viewData() for default mode)
$this->toValue()
```

```php
// Get formatted value (use in resolvePreview() for preview mode)
$this->toFormattedValue()
```

```php
// Get value from request (form submission)
$this->getRequestValue()
```

```php
// Get field's database column name
$this->getColumn()
```

```php
// Get field's label
$this->getLabel()
```

--------------------------------

### Use Type Hints for Clarity and Safety (PHP)

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Utilize type hints in method signatures and return types for better code clarity, maintainability, and compile-time error checking. This applies to both parameters and return values.

```php
// ✅ CORRECT
public function title(string $title): static
{
    $this->title = $title;
    return $this;
}

protected function viewData(): array
{
    return ['title' => $this->title];
}
```

```php
// ❌ WRONG
public function title($title)
{
    $this->title = $title;
    return $this;
}
```

--------------------------------

### Preparing Logic Before Rendering

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/SKILL.md

Use prepareBeforeRender() to execute logic, such as adding attributes or preparing data, just before the field is rendered.

```php
protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();
    // Add attributes, prepare data here
}
```

--------------------------------

### Full TopBar Structure

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Demonstrates the complete structure of the TopBar component with logo, menu, and actions.

```blade
<x-moonshine::layout.top-bar>
    <x-moonshine::layout.div class="menu-logo">
        <x-moonshine::layout.logo
            href="/"
            logo="/logo.svg"
            logo-small="/logo-small.svg"
            :minimized="true"
        />
    </x-moonshine::layout.div>

    <x-moonshine::layout.div class="menu menu--horizontal">
        <x-moonshine::layout.menu
            :top="true"
            :elements="[
                ['label' => 'Dashboard', 'url' => '/'],
                ['label' => 'Users', 'url' => '/users'],
                ['label' => 'Settings', 'url' => '/settings']
            ]"
        />
    </x-moonshine::layout.div>

    <x-moonshine::layout.div class="menu-actions">
        <div class="menu-divider menu-divider--vertical"></div>
        <x-moonshine::layout.theme-switcher/>
        <x-moonshine::layout.div class="menu-burger">
            <x-moonshine::layout.burger topbar />
        </x-moonshine::layout.div>
    </x-moonshine::layout.div>
</x-moonshine::layout.top-bar>
```

--------------------------------

### Basic Thumbnails

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Displays a simple array of image URLs as thumbnails.

```blade
<x-moonshine::thumbnails
    :items="[
        '/images/thumb1.jpg',
        '/images/thumb2.jpg',
        '/images/thumb3.jpg'
    ]"
/>
```

--------------------------------

### Define Component Assets

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Use the protected `assets()` method to register CSS and JS files for a component. Ensure assets are stored in the `public/` directory.

```php
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;

class Chart extends MoonShineComponent
{
    protected string $view = 'admin.components.chart';

    protected function assets(): array
    {
        return [
            Css::make('/css/chart.css'),
            Js::make('/js/chart.js'),
        ];
    }
}
```

--------------------------------

### Raw Mode Field Initialization

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-field/references/fields-development.md

Illustrates initializing a Date field for raw mode, which returns the unformatted value, typically used for exports.

```php
Date::make('Created') // Returns raw timestamp
```

--------------------------------

### Component Class Anatomy: Constructor

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-component/references/components-development.md

Components can accept parameters in their constructor. These parameters can be used to initialize component properties.

```php
public function __construct(
    protected array $menu = [],
    protected string|Closure $copyright = ''
)
{
    parent::__construct();
}
```

--------------------------------

### Header with Navigation and Search

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Construct a top header component that includes a responsive burger menu, breadcrumbs, a search bar, and locale switcher. The `menu-burger` wrapper is crucial for responsive behavior, especially on mobile devices.

```blade
<x-moonshine::layout.header>
    <x-moonshine::layout.div class="menu-burger">
        <x-moonshine::layout.burger sidebar />
    </x-moonshine::layout.div>
    <x-moonshine::breadcrumbs :items="['#' => 'Home']"/>
    <x-moonshine::layout.search placeholder="Search" />
    <x-moonshine::layout.locales :locales="collect()"/>
</x-moonshine::layout.header>
```

--------------------------------

### Basic Page Footer

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Create a simple page footer with custom content.

```blade
<x-moonshine::layout.footer>
    <p>&copy; 2024 Your Company. All rights reserved.</p>
</x-moonshine::layout.footer>
```

--------------------------------

### Using Divider for Visual Separation

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/references/blade-components.md

Illustrates how to use the `<x-moonshine::layout.divider />` component to create a visual dividing line with spacing between components. This is useful for separating distinct sections of content.

```blade
<x-moonshine::layout.content>
    <x-moonshine::card>
        <h2>User Statistics</h2>
        <p>Overview of user data</p>
    </x-moonshine::card>

    <x-moonshine::layout.divider />

    <x-moonshine::card>
        <h2>Recent Activity</h2>
        <p>Latest user actions</p>
    </x-moonshine::card>
</x-moonshine::layout.content>
```

--------------------------------

### Including Assets in Head

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-layout/SKILL.md

Essential for any MoonShine layout, this snippet ensures your main CSS and JavaScript files are loaded correctly.

```blade
@vite([
    'resources/css/main.css',
    'resources/js/app.js'
], 'vendor/moonshine')
```

--------------------------------

### Registering a Custom Palette Globally in Config

Source: https://github.com/moonshine-software/moonshine/blob/4.x/skills/moonshine-palettes/references/palettes.md

Alternatively, register your custom palette class globally in the config/moonshine.php file.

```php
'palette' => \App\MoonShine\Palettes\YourPaletteName::class,
```