<div x-data>
    <button @click="$dispatch('custom-event', { message: 'Hello from Component 1' })">Send Event</button>
</div>

<div x-data @custom-event.window="alert($event.detail.message)">
    <p>Waiting for Event...</p>
</div>

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('send-message', { message: 'Hello from Component 1' })">
        Send Message
    </button>
</div>

<!-- Component 2 -->
<div x-data @send-message.window="alert($event.detail.message)">
    <p>Waiting for Message...</p>
</div>

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('broadcast-event', { message: 'This is a broadcast!' })">
        Broadcast Event
    </button>
</div>

<!-- Component 2 -->
<div x-data @broadcast-event.window="console.log('Component 2:', $event.detail.message)">
    <p>Component 2 is listening...</p>
</div>

<!-- Component 3 -->
<div x-data @broadcast-event.window="console.log('Component 3:', $event.detail.message)">
    <p>Component 3 is listening...</p>
</div>

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('update-counter', { increment: 1 })">
        Increment Counter
    </button>
</div>

<!-- Component 2 -->
<div x-data="{ counter: 0 }" @update-counter.window="counter += $event.detail.increment">
    <p>Counter: <span x-text="counter"></span></p>
</div>

<!-- Parent Component -->
<div x-data>
    <button @click="$dispatch('parent-event', { info: 'Triggered from Parent' })">Trigger Parent Event</button>
    <div x-data @parent-event.window="$dispatch('child-event', { detail: $event.detail.info })">
        <!-- Child Component -->
        <div x-data @child-event.window="alert('Child Event: ' + $event.detail)">
            <p>Listening for Child Event...</p>
        </div>
    </div>
</div>

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('toggle-visibility')">Toggle Visibility</button>
</div>

<!-- Component 2 -->
<div x-data="{ isVisible: false }" @toggle-visibility.window="isVisible = !isVisible">
    <div x-show="isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This content toggles visibility.</p>
    </div>
</div>