## Demo: shared-state

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

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

<DemoPage
  title="Shared State"
  description="You can share reactive $state between separately-hydrated islands. Click either button — the count stays in sync across both."
  {sources}
>
  <div class="row">
    <CounterButton mochi:hydrate />
    <CounterButton mochi:hydrate />
  </div>
</DemoPage>

<style>
  .row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
</style>
```

### CounterButton.svelte
```svelte
<script lang="ts">
  import { getLikes, like } from '../../stores/likes.svelte.ts';
</script>

<button class="counter-btn" onclick={like}>
  <span class="counter-label">♥ Likes</span>
  <span class="counter-value">{getLikes() ?? 0}</span>
</button>

<style>
  .counter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--surface-muted);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.12s ease,
      border-color 0.12s ease,
      color 0.12s ease;
  }

  .counter-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-soft-text);
  }

  .counter-btn:active {
    transform: translateY(1px);
  }

  .counter-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .counter-label {
    color: var(--text-muted);
    font-size: 1rem;
  }

  .counter-btn:hover .counter-label {
    color: inherit;
  }

  .counter-value {
    background: var(--accent-soft);
    color: var(--accent-soft-text);
    border-radius: 999px;
    padding: 0.1rem 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 1.8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .counter-btn:hover .counter-value {
    background: var(--surface);
  }
</style>
```

### likes.svelte.ts
```ts
const STORAGE_KEY = 'likes';

const stored = typeof localStorage !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null;

let likes: number | null = $state(stored !== null ? Number(stored) : null);

export function getLikes(): number | null {
  return likes;
}

export function like() {
  likes = (likes ?? 0) + 1;
  localStorage.setItem(STORAGE_KEY, String(likes));
}
```

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

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