## Demo: island-depth

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

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

<DemoPage
  title="Nested Island Max Depth"
  description="Server islands can nest to any depth: each mochi:defer island's HTML is fetched on demand, and when it arrives it may contain further mochi:defer islands that fetch in turn. This chain goes four levels deep — level 1 fetches level 2, which fetches level 3, which fetches level 4. The prebuild precompiles every level into the manifest in a single pass (Mochi discovers the whole chain eagerly at build time, regardless of nesting depth), so no level compiles on a request path in production."
  {sources}
>
  <p class="delay-note">Each level is delayed on purpose to show the loading state as the chain fetches.</p>

  <DepthLevel1 mochi:defer>
    <div class="island-loading">Loading level 1<span class="dots"></span></div>
  </DepthLevel1>
</DemoPage>

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

  .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>
```

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

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

<div class="level level-1">
  <p><strong>Level 1</strong> — server island (<code>mochi:defer</code>). It nests one more:</p>
  <DepthLevel2 mochi:defer>
    <div class="island-loading">Loading level 2<span class="dots"></span></div>
  </DepthLevel2>
</div>

<style>
  .level {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
  }

  .level > p {
    margin: 0 0 0.6rem;
  }

  .level-1 {
    background: var(--surface-muted);
  }

  .island-loading {
    padding: 0.85rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    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>
```

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

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

<div class="level level-2">
  <p><strong>Level 2</strong> — server island (<code>mochi:defer</code>). It nests one more:</p>
  <DepthLevel3 mochi:defer>
    <div class="island-loading">Loading level 3<span class="dots"></span></div>
  </DepthLevel3>
</div>

<style>
  .level {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
  }

  .level > p {
    margin: 0 0 0.6rem;
  }

  .level-2 {
    background: var(--surface-muted);
  }

  .island-loading {
    padding: 0.85rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    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>
```

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

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

<div class="level level-3">
  <p><strong>Level 3</strong> — server island (<code>mochi:defer</code>). It nests one more:</p>
  <DepthLevel4 mochi:defer>
    <div class="island-loading">Loading level 4<span class="dots"></span></div>
  </DepthLevel4>
</div>

<style>
  .level {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
  }

  .level > p {
    margin: 0 0 0.6rem;
  }

  .level-3 {
    background: var(--surface-muted);
  }

  .island-loading {
    padding: 0.85rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    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>
```

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

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

<div class="level level-4">
  <p><strong>Level 4</strong> — deepest server island (<code>mochi:defer</code>). No more nesting below.</p>
</div>

<style>
  .level {
    padding: 0.85rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
  }

  .level p {
    margin: 0;
  }

  .level-4 {
    background: var(--badge-info-bg);
    border-color: var(--badge-info-text);
  }

  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/island-depth': Mochi.page('./src/demos/island-depth/IslandDepth.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');
```