## Demo: lazy

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

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

<DemoPage
  title="Lazy Islands"
  description="You can mark islands with mochi:hydrate:visible so each one fetches its JS and CSS only when it scrolls into view, via an IntersectionObserver. Lazy islands also have the benefit of not loading their CSS until they come into view, great for secondary content far down the page."
  {sources}
>
  <div class="stack">
    {#each Array(6) as _, i (i)}
      <div class="item">
        <h3>Lazy Island #{i + 1}</h3>
        <LazyDemo mochi:hydrate:visible index={i + 1} />
      </div>
    {/each}
  </div>
</DemoPage>

<style>
  .stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .item h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }
</style>
```

### LazyDemo.svelte
```svelte
<script>
  import { isBrowser } from 'mochi-framework';

  let { index = 0 } = $props();
  const rand = isBrowser ? Math.random().toFixed(4) : null;
</script>

<div class="lazy-demo">
  <span class="index">#{index}</span>
  {#if isBrowser}
    <span class="status hydrated">Hydrated! {rand}</span>
  {:else}
    <span class="status waiting">Waiting to hydrate...</span>
  {/if}
</div>

<style>
  .lazy-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

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

  .status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .status.waiting {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
  }

  .status.hydrated {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
  }
</style>
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/lazy': Mochi.page('./src/demos/lazy/Lazy.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');
```