## Demo: props-id

### PropsId.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';
  import Field from './Field.svelte';
  import LabeledField from './LabeledField.svelte';
  import ServerStamp from './ServerStamp.svelte';
  import ServerHydratedStamp from './ServerHydratedStamp.svelte';
  import ClientStamp from './ClientStamp.svelte';

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

<DemoPage
  title="Unique IDs"
  description="Svelte's native $props.id() generates an id unique to each component instance, consistent between server render and hydration — use it for label/for and aria links inside islands."
  {sources}
>
  <h3>Static component (no hydration)</h3>
  <p class="hint">$props.id() works with zero JavaScript shipped — the id is minted during SSR, no hydration required.</p>
  <Field />

  <h3>Two hydrated islands, two ids</h3>
  <p class="hint">Each instance gets its own id, so the label/for pairs never collide. Hydration reuses the server-generated value — the id you see was minted during SSR.</p>
  <LabeledField mochi:hydrate />
  <LabeledField mochi:hydrate />

  <h3>Server island</h3>
  <p class="hint">
    Deferred islands render in a separate request; Mochi namespaces their ids with the island's own id (via render's idPrefix) so they cannot collide with ids already on the page.
  </p>
  <ServerStamp mochi:defer />

  <h3>Server island that also hydrates</h3>
  <p class="hint">
    With <code>mochi:defer mochi:hydrate</code> the namespaced id is read back from the SSR markers when the fragment hydrates — click the button and the id stays exactly the same, proving
    the value survived from the deferred render into the hydrated client.
  </p>
  <ServerHydratedStamp mochi:defer mochi:hydrate />

  <h3>Two client-only islands, two ids</h3>
  <p class="hint">
    Client-only islands are never server-rendered, so each <code>$props.id()</code> is minted in the browser at mount. Svelte draws these from a global counter — unique even across
    separate
    <code>mount()</code> calls — so two independently-mounted islands still get distinct ids (e.g. <code>c1</code> and <code>c2</code>) without any SSR pass to keep them apart.
  </p>
  <ClientStamp mochi:clientOnly />
  <ClientStamp mochi:clientOnly />
</DemoPage>

<style>
  h3 {
    margin: 1.5rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
  }
  .hint {
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 0 0 0.5rem;
  }
</style>
```

### Field.svelte
```svelte
<script lang="ts">
  import type { Snippet } from 'svelte';

  let { children }: { children?: Snippet<[string]> } = $props();
  const uid = $props.id();
</script>

<div class="card">
  {@render children?.(uid)}
  <p class="uid">$props.id(): <code>{uid}</code></p>
</div>

<style>
  .card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .uid {
    margin: 0;
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.85em;
  }
</style>
```

### LabeledField.svelte
```svelte
<script lang="ts">
  import Field from './Field.svelte';

  let value = $state('');
</script>

<Field>
  {#snippet children(uid)}
    <label for="{uid}-name">Name</label>
    <input id="{uid}-name" type="text" bind:value placeholder="Type here…" />
    <button onclick={() => document.getElementById(`${uid}-name`)?.focus()}>Focus input via its id</button>
  {/snippet}
</Field>

<style>
  input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2, var(--surface));
    color: var(--text);
  }
  button {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    color: var(--text);
    cursor: pointer;
  }
</style>
```

### ServerStamp.svelte
```svelte
<script lang="ts">
  import Field from './Field.svelte';
</script>

<Field>
  <p>Rendered on demand in a separate request 🏝️</p>
</Field>

<style>
  p {
    margin: 0;
  }
</style>
```

### ServerHydratedStamp.svelte
```svelte
<script lang="ts">
  import Field from './Field.svelte';

  let clicks = $state(0);
</script>

<Field>
  <p>Rendered on the server, then hydrated 🏝️⚡</p>
  <button onclick={() => clicks++}>Clicked {clicks} times</button>
</Field>

<style>
  p {
    margin: 0;
  }
  button {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    color: var(--text);
    cursor: pointer;
  }
</style>
```

### ClientStamp.svelte
```svelte
<script lang="ts">
  import Field from './Field.svelte';
</script>

<Field>
  <p>Never server-rendered — the id is minted in the browser at mount 🏝️🖥️</p>
</Field>

<style>
  p {
    margin: 0;
  }
</style>
```

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

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