## Demo: nested-islands

### NestedIslands.svelte
```svelte
<script>
  import DemoPage from '../../components/DemoPage.svelte';
  import DeferWithHydrators from './DeferWithHydrators.svelte';
  import DeferNest from './DeferNest.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<DemoPage
  title="Nested Islands"
  description="Server islands can contain other islands. The first example is a mochi:defer server island wrapping several mochi:hydrate components — the deferred fetch delivers them, then each counter hydrates on its own. The second nests two more islands inside a mochi:defer server island: another mochi:defer server island and a mochi:defer mochi:hydrate one. Open the debug bar (bottom toolbar) to see each island accounted for exactly once."
  {sources}
>
  <p class="delay-note">The islands below are delayed on purpose to show the loading state.</p>

  <h3>1. mochi:defer server island with mochi:hydrate components inside</h3>
  <DeferWithHydrators mochi:defer>
    <div class="island-loading">Loading server island<span class="dots"></span></div>
  </DeferWithHydrators>

  <div class="spacer"></div>

  <h3>2. mochi:defer server island nesting two more islands</h3>
  <DeferNest mochi:defer>
    <div class="island-loading">Loading server island<span class="dots"></span></div>
  </DeferNest>
</DemoPage>

<style>
  .delay-note {
    margin-bottom: 0.75rem;
    color: var(--text-subtle);
    font-size: 0.9rem;
  }

  h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
  }

  .spacer {
    height: 1.25rem;
  }

  .island-loading {
    padding: 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-style: italic;
    text-align: center;
  }

  .dots::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
  }

  @keyframes dots {
    0% {
      content: '';
    }
    25% {
      content: '.';
    }
    50% {
      content: '..';
    }
    75% {
      content: '...';
    }
  }
</style>
```

### DeferWithHydrators.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';
  import Counter from './Counter.svelte';

  await (isServer ? delay(800, 1500) : Promise.resolve());

  const renderedAt = new Date().toLocaleTimeString();
</script>

<div class="defer-box">
  <p>Server island (<code>mochi:defer</code>), rendered at {renderedAt}.</p>
  <p>It contains three independently hydrated counters — click them:</p>
  <div class="row">
    <Counter mochi:hydrate label="Alpha" />
    <Counter mochi:hydrate label="Beta" />
    <Counter mochi:hydrate label="Gamma" />
  </div>
</div>

<style>
  .defer-box {
    padding: 1rem 1.1rem;
    border: 2px dashed var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--badge-info-bg);
    color: var(--text);
  }

  .defer-box p {
    margin: 0 0 0.5rem;
  }

  .row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  code {
    font-family: var(--font-mono);
  }
</style>
```

### Counter.svelte
```svelte
<script>
  let { label = 'Counter' } = $props();
  let count = $state(0);
</script>

<button class="counter" onclick={() => count++}>{label}: <strong>{count}</strong></button>

<style>
  .counter {
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--badge-info-bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }
</style>
```

### DeferNest.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';
  import InnerServer from './InnerServer.svelte';
  import HydratedServer from './HydratedServer.svelte';

  await (isServer ? delay(800, 1500) : Promise.resolve());
</script>

<div class="defer-box">
  <p>Outer server island (<code>mochi:defer</code>). It nests two more islands:</p>
  <InnerServer mochi:defer label="Inner server island">
    <div class="island-loading">Loading inner server island<span class="dots"></span></div>
  </InnerServer>
  <HydratedServer mochi:defer mochi:hydrate label="Inner hydrated server island">
    <div class="island-loading">Loading hydrated server island<span class="dots"></span></div>
  </HydratedServer>
</div>

<style>
  .defer-box {
    padding: 1rem 1.1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text);
  }

  .defer-box > p {
    margin: 0 0 0.6rem;
  }

  .island-loading {
    margin-top: 0.6rem;
    padding: 0.85rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-style: italic;
    text-align: center;
  }

  .dots::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
  }

  code {
    font-family: var(--font-mono);
  }

  @keyframes dots {
    0% {
      content: '';
    }
    25% {
      content: '.';
    }
    50% {
      content: '..';
    }
    75% {
      content: '...';
    }
  }
</style>
```

### InnerServer.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';

  let { label = 'Inner server island' } = $props();
  const islandId = $props.id();

  await (isServer ? delay(600, 1200) : Promise.resolve());

  const randomNumber = Math.floor(Math.random() * 1000);
</script>

<div class="inner-server">
  <p>{label} (<code>mochi:defer</code>)</p>
  <p class="meta">Random number from the server: <strong>{randomNumber}</strong></p>
  <p class="meta">$props.id(): <strong>{islandId}</strong></p>
</div>

<style>
  .inner-server {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--badge-warning-text);
    border-radius: var(--radius-md);
    background: var(--badge-warning-bg);
    color: var(--text);
  }

  .inner-server p {
    margin: 0 0 0.35rem;
  }

  .inner-server p:last-child {
    margin-bottom: 0;
  }

  .meta {
    font-size: 0.92em;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  code {
    font-family: var(--font-mono);
  }
</style>
```

### HydratedServer.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';

  let { label = 'Hydrated server island' } = $props();
  const islandId = $props.id();

  await (isServer ? delay(600, 1200) : Promise.resolve());

  let count = $state(0);
</script>

<div class="hydrated-server">
  <p>{label} (<code>mochi:defer mochi:hydrate</code>)</p>
  <p class="meta">$props.id(): <strong>{islandId}</strong></p>
  <button onclick={() => count++}>Hydrated, clicked <strong>{count}</strong> times</button>
</div>

<style>
  .hydrated-server {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--badge-success-text, var(--badge-info-text));
    border-radius: var(--radius-md);
    background: var(--badge-success-bg, var(--badge-info-bg));
    color: var(--text);
    margin-top: 0.6rem;
  }

  .hydrated-server p {
    margin: 0 0 0.35rem;
  }

  .meta {
    font-size: 0.92em;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  button {
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }

  code {
    font-family: var(--font-mono);
  }
</style>
```

### routes.ts
```ts
import { Mochi } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/nested-islands': Mochi.page('./src/demos/nested-islands/NestedIslands.svelte'),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```