<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('theme', {
            mode: 'light',
            toggle() {
                this.mode = this.mode === 'light' ? 'dark' : 'light';
            }
        });
    });
</script>

<div x-data>
    <p>Current Theme: <span x-text="$store.theme.mode"></span></p>
    <button @click="$store.theme.toggle()">Toggle Theme</button>
</div>

<div x-data>
    <p>Theme: <span x-text="$store.theme.mode"></span></p>
</div>

<div x-data>
    <button @click="$store.theme.toggle()">Change Theme</button>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('counter', {
            value: 0,
            increment() {
                this.value++;
            },
            decrement() {
                this.value--;
            }
        });
    });
</script>

<div x-data>
    <p>Counter: <span x-text="$store.counter.value"></span></p>
    <button @click="$store.counter.increment()">Increment</button>
    <button @click="$store.counter.decrement()">Decrement</button>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('visibility', {
            isVisible: false,
            toggle() {
                this.isVisible = !this.isVisible;
            }
        });
    });
</script>

<div x-data>
    <button @click="$store.visibility.toggle()">Toggle Visibility</button>
    <div x-show="$store.visibility.isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This content is toggled by a store.</p>
    </div>
</div>

<div x-data x-init="$watch('$store.theme.mode', value => console.log(`Theme changed to: ${value}`))">
    <p>Theme: <span x-text="$store.theme.mode"></span></p>
    <button @click="$store.theme.toggle()">Toggle Theme</button>
</div>

<div x-data>
    <h1>Parent Component</h1>
    <p>Theme: <span x-text="$store.theme.mode"></span></p>
    <child-component></child-component>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('theme', {
            mode: 'light',
            toggle() {
                this.mode = this.mode === 'light' ? 'dark' : 'light';
            }
        });

        Alpine.data('childComponent', () => ({
            toggleTheme() {
                this.$store.theme.toggle();
            }
        }));
    });
</script>

<div x-data="childComponent">
    <h2>Child Component</h2>
    <button @click="toggleTheme()">Toggle Theme from Child</button>
</div>