## Demo: nested-components

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

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

<DemoPage
  title="Nested Components"
  description="Hydrating a component with mochi:hydrate automatically hydrates all its children. Nested mochi:hydrate directives are forbidden and result in a fatal error."
  {sources}
>
  <section class="mode">
    <header>
      <h2><code>mochi:hydrate</code> on the root</h2>
      <p>One island wraps the whole five-level tree. Mochi serializes the root and its descendants once, ships a single bundle, and Svelte hydrates the entire subtree together.</p>
    </header>
    <Level mochi:hydrate />
  </section>

  <section class="mode">
    <header>
      <h2><code>mochi:defer</code> + <code>mochi:hydrate</code></h2>
      <p>
        The same recursive tree, rendered lazily as a server island. The placeholder ships with the page; the browser fetches the rendered HTML on demand. Because <code
          >mochi:hydrate</code
        > is also set, Svelte takes over once the fetched markup lands.
      </p>
    </header>
    <Level mochi:defer mochi:hydrate>
      <div class="placeholder">Loading nested tree from server<span class="dots"></span></div>
    </Level>
  </section>
</DemoPage>

<style>
  .mode {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }

  .mode header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .mode h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 500;
  }

  .mode h2 code,
  .mode p code {
    font-family: var(--font-mono);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
  }

  .mode p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

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

### Level.svelte
```svelte
<script lang="ts">
  import { isBrowser } from 'mochi-framework';
  import Badge from '../../components/Badge.svelte';
  import Self from './Level.svelte';

  let { depth = 1, max = 5 }: { depth?: number; max?: number } = $props();

  let Next = $state(Self);
  let count = $state(0);

  const tag = $derived(depth === 1 ? ' (root)' : depth === max ? ' (leaf)' : '');
</script>

<div class="level" class:hydrated={isBrowser}>
  <div class="header">
    <span class="name">Level {depth}{tag}</span>
    <Badge kind={isBrowser ? 'success' : 'info'}>
      {isBrowser ? 'hydrated' : 'SSR only'}
    </Badge>
  </div>
  <button onclick={() => count++}>L{depth} clicked {count} {count === 1 ? 'time' : 'times'}</button>
  {#if depth < max}
    <Next depth={depth + 1} {max} />
  {/if}
</div>

<style>
  .level {
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition:
      border-color 0.12s ease,
      background 0.12s ease;
  }

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

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
  }

  button {
    align-self: flex-start;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }

  button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-soft-text);
  }
</style>
```

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

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

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

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

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