---
// src/components/Panel.astro
---

<div class="panel">
  <slot />
</div>

<style>
  .panel {
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
  }
</style>

// src/components/ReactCounter.jsx
import { useState } from 'react';

export default function ReactCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>React: {count}</button>;
}

<!-- src/components/SvelteToggle.svelte -->
<script>
  let on = $state(false);
</script>

<button onclick={() => (on = !on)}>
  Svelte: {on ? 'On' : 'Off'}
</button>

---
// src/pages/index.astro
import Panel from '../components/Panel.astro';
import ReactCounter from '../components/ReactCounter.jsx';
import SvelteToggle from '../components/SvelteToggle.svelte';
---

<Panel>
  <ReactCounter client:load />
  <SvelteToggle client:load />
</Panel>

<!--
  Notes:
  - ReactCounter and SvelteToggle are never nested inside each other
    directly - each sits as a sibling inside Panel's own <slot />.
  - The composition happens entirely at the Astro layer: Panel.astro
    doesn't know or care that its slotted content includes two
    different framework islands, it just renders whatever's placed
    between its own opening and closing tags.
  - Each island still hydrates completely independently, per its own
    client directive, exactly as covered in Chapter 7.
-->