## Demo: client-only

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

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

<DemoPage
  title="Client-only Islands"
  description="Components marked mochi:clientOnly are never server-rendered — SSR ships only an empty wrapper (plus optional fallback content), and the component mounts in the browser. The canvas below reads window.devicePixelRatio and getComputedStyle at the top of its script, which would crash any SSR render."
  {sources}
>
  <BrowserCanvas mochi:clientOnly waves={4}>
    <div class="skeleton">Mounting in the browser…</div>
  </BrowserCanvas>
  <p class="facts">
    The animation runs on <code>requestAnimationFrame</code> with a live fps counter, scaled to <code>window.devicePixelRatio</code> — browser APIs read at the top of the component's
    script. This paragraph, by contrast, sits outside the island — it ships with the SSR HTML and doesn't move when the component mounts.
  </p>

  <div class="spacer">
    <p>Scroll down — the island below is marked <code>mochi:clientOnly:visible</code>, so it stays a fallback until it reaches the viewport, then mounts in the browser.</p>
  </div>

  <h2 class="visible-heading">Lazy client-only with <code>mochi:clientOnly:visible</code></h2>
  <MountClock mochi:clientOnly:visible={{ rootMargin: '0px' }} label="Lazy island">
    <div class="skeleton">Mounts when scrolled into view…</div>
  </MountClock>
  <p class="facts">
    Same browser-only mount as above, but deferred: an <code>IntersectionObserver</code> holds off the <code>mount()</code> until the placeholder enters the viewport, and the component's
    bundle and CSS load only then. Open the console to see it mount as you scroll.
  </p>
</DemoPage>

<style>
  .facts {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    margin: 1rem 0;
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
  }

  .visible-heading {
    font-size: 1rem;
    margin: 0 0 0.75rem;
  }

  .skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
  }
</style>
```

### BrowserCanvas.svelte
```svelte
<script lang="ts">
  import type { ClientOnlyProps } from 'mochi-framework';

  let { waves = 3 }: ClientOnlyProps<{ waves?: number }> = $props();

  // These top-level browser reads would crash an SSR render — safe here
  // because mochi:clientOnly components never run on the server.
  const dpr = window.devicePixelRatio;
  const theme = getComputedStyle(document.documentElement);
  const accent = theme.getPropertyValue('--accent').trim();
  const textMuted = theme.getPropertyValue('--text-muted').trim();

  let canvas: HTMLCanvasElement;

  $effect(() => {
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      return;
    }

    let width = 0;
    let height = 0;
    const resize = () => {
      width = canvas.clientWidth;
      height = canvas.clientHeight;
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      // Re-setting canvas.width wipes the context state, so re-apply the
      // dpr scale absolutely instead of accumulating ctx.scale() calls.
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);

    let frame: number;
    let frames = 0;
    let lastFpsUpdate = 0;
    let fps = 0;
    const draw = (t: number) => {
      frames++;
      if (t - lastFpsUpdate >= 500) {
        fps = Math.round((frames * 1000) / (t - lastFpsUpdate));
        frames = 0;
        lastFpsUpdate = t;
      }
      ctx.clearRect(0, 0, width, height);
      for (let line = 0; line < waves; line++) {
        ctx.beginPath();
        for (let x = 0; x <= width; x += 4) {
          const y = height / 2 + Math.sin(x / 60 + t / (600 + line * 200)) * (height / 4) * Math.sin(t / 2000 + line);
          if (x === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        ctx.strokeStyle = accent;
        ctx.globalAlpha = 1 - (line / waves) * 0.75;
        ctx.lineWidth = 2;
        ctx.stroke();
      }
      ctx.globalAlpha = 1;
      ctx.fillStyle = textMuted;
      ctx.font = '12px ui-monospace, monospace';
      if (fps > 0) {
        ctx.fillText(`${fps} fps`, 12, height - 12);
      }
      frame = requestAnimationFrame(draw);
    };
    frame = requestAnimationFrame(draw);
    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
    };
  });
</script>

<canvas bind:this={canvas}></canvas>

<style>
  canvas {
    display: block;
    width: 100%;
    height: 160px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
</style>
```

### MountClock.svelte
```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import type { ClientOnlyProps } from 'mochi-framework';

  let { label = 'Lazy island' }: ClientOnlyProps<{ label?: string }> = $props();

  // `performance.now()` at the top level captures the moment this component
  // mounts in the browser — a client-only concept with no SSR equivalent.
  const mountedAt = performance.now();
  let seconds = $state(0);

  onMount(() => {
    const id = setInterval(() => {
      seconds = Math.floor((performance.now() - mountedAt) / 1000);
    }, 1000);
    return () => clearInterval(id);
  });
</script>

<div class="probe">
  <span class="dot"></span>
  {label}: mounted on scroll <strong>{seconds}s</strong> ago.
</div>

<style>
  .probe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.9rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
  }
</style>
```

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

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