## Demo: is-hydratable

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

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

<DemoPage
  title="isHydratable()"
  description="isHydratable() reports whether the calling component is part of a subtree that will hydrate on this page load — at any nesting depth, with no prop forwarding. The same three-level probe is rendered four ways."
  {sources}
>
  <section class="mode">
    <header>
      <h2><code>mochi:hydrate</code></h2>
      <p>The island root seeds the whole subtree: every depth reports <code>true</code>.</p>
    </header>
    <HydrationProbe mochi:hydrate />
  </section>

  <section class="mode">
    <header>
      <h2>Plain SSR</h2>
      <p>The same tree without a directive never hydrates: every depth reports <code>false</code>.</p>
    </header>
    <HydrationProbe />
  </section>

  <section class="mode">
    <header>
      <h2><code>mochi:defer</code></h2>
      <p>A pure server island is fetched as HTML and never hydrates, so it also reports <code>false</code> — deferred is not hydrated.</p>
    </header>
    <HydrationProbe mochi:defer />
  </section>

  <section class="mode">
    <header>
      <h2><code>mochi:defer mochi:hydrate</code></h2>
      <p>An also-hydrated server island takes over after the fetch, so every depth reports <code>true</code>.</p>
    </header>
    <HydrationProbe mochi:defer mochi:hydrate />
  </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;
  }
</style>
```

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

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

  const hydratable = isHydratable();
</script>

<div class="probe">
  <div class="row">
    <div class="label">
      <span class="name">Depth {depth}</span>
      <code>isHydratable()</code>
    </div>
    <Badge kind={hydratable ? 'success' : 'info'}>{String(hydratable)}</Badge>
  </div>
  {#if depth < max}
    <Self depth={depth + 1} {max} />
  {/if}
</div>

<style>
  .probe {
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

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

  .row code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  @media (max-width: 480px) {
    .row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4rem;
    }
  }
</style>
```

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

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