## Demo: island-props

### ServerRenderedParent.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import ClientRenderedChild from './ClientRenderedChild.svelte';
  import { typeOf } from './devalueTypeOf.ts';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const shared = { x: 1 };
  const cyclic: { name: string; self?: unknown } = { name: 'cyclic' };
  cyclic.self = cyclic;

  const dateVal = new Date('2025-01-15T12:00:00Z');
  const regexpVal = /hello\s+world/gi;
  const mapVal = new Map<string, number>([
    ['a', 1],
    ['b', 2],
    ['c', 3],
  ]);
  const setVal = new Set([10, 20, 30]);
  const bigintVal = 9007199254740993n;
  const urlVal = new URL('https://mochi.dev/docs?version=5');
  const searchParamsVal = new URLSearchParams('theme=dark&lang=en');
  const typedArrayVal = new Uint8Array([72, 101, 108, 108, 111]);
  const undefinedVal = undefined;
  const infinityVal = Infinity;
  const nanVal = NaN;
  const negZeroVal = -0;
  const repeatedRef = [shared, shared];
  const cyclicRef = cyclic;

  const serverTypes: Record<string, string> = {
    Date: typeOf(dateVal),
    RegExp: typeOf(regexpVal),
    Map: typeOf(mapVal),
    Set: typeOf(setVal),
    BigInt: typeOf(bigintVal),
    URL: typeOf(urlVal),
    URLSearchParams: typeOf(searchParamsVal),
    Uint8Array: typeOf(typedArrayVal),
    undefined: typeOf(undefinedVal),
    Infinity: typeOf(infinityVal),
    NaN: typeOf(nanVal),
    '-0': typeOf(negZeroVal),
    'Repeated ref': typeOf(repeatedRef),
    'Cyclic ref': typeOf(cyclicRef),
  };
</script>

<DemoPage
  title="Crossing the server-client boundary with props"
  description="Props you pass from a server-rendered parent to a hydrated child island are automatically serialized via devalue, preserving Date, RegExp, Map, Set, BigInt, URL, typed arrays, undefined, Infinity, NaN, -0, and even repeated and cyclic references — all reconstructed identically on the client."
  {sources}
>
  <section class="parent">
    <header>
      <h2>ServerRenderedParent.svelte</h2>
      <p>
        Runs only on the server. No <code>mochi:hydrate</code> directive, so this component ships zero JavaScript — its output is inert HTML. It builds a props bag covering every
        type devalue supports and hands it off to the child below. The <code>Server type</code> column in the child is captured here, before serialization; the
        <code>Client type</code> column is resolved after hydration. Matching values prove the round-trip preserved each type.
      </p>
    </header>
    <pre><code
        >{`const dateVal = new Date('2025-01-15T12:00:00Z');
const mapVal = new Map([['a', 1], ['b', 2], ['c', 3]]);
const setVal = new Set([10, 20, 30]);
const bigintVal = 9007199254740993n;
const urlVal = new URL('https://mochi.dev/docs?version=5');
// ...
const cyclic: { name: string; self?: unknown } = { name: 'cyclic' };
cyclic.self = cyclic;
const cyclicRef = cyclic;`}</code
      ></pre>
  </section>

  <div class="arrow" aria-hidden="true">
    <span>props</span>
    <span class="line"></span>
    <span class="head">▼</span>
  </div>

  <ClientRenderedChild
    {dateVal}
    {regexpVal}
    {mapVal}
    {setVal}
    {bigintVal}
    {urlVal}
    {searchParamsVal}
    {typedArrayVal}
    {undefinedVal}
    {infinityVal}
    {nanVal}
    {negZeroVal}
    {repeatedRef}
    {cyclicRef}
    {serverTypes}
    mochi:hydrate
  />
</DemoPage>

<style>
  .parent {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .parent header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .parent h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }

  .parent p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .parent 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;
  }

  pre {
    margin: 0;
    padding: 0.75rem 0.85rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    color: var(--text);
  }

  .arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--text-subtle);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.4rem 0;
  }

  .arrow .line {
    width: 2px;
    height: 1.25rem;
    background: var(--border-strong);
  }

  .arrow .head {
    color: var(--border-strong);
    line-height: 1;
  }
</style>
```

### ClientRenderedChild.svelte
```svelte
<script lang="ts">
  import { isBrowser } from 'mochi-framework';
  import Badge from '../../components/Badge.svelte';
  import { typeOf } from './devalueTypeOf.ts';

  let {
    dateVal,
    regexpVal,
    mapVal,
    setVal,
    bigintVal,
    urlVal,
    searchParamsVal,
    typedArrayVal,
    undefinedVal,
    infinityVal,
    nanVal,
    negZeroVal,
    repeatedRef,
    cyclicRef,
    serverTypes,
  }: {
    dateVal: Date;
    regexpVal: RegExp;
    mapVal: Map<string, number>;
    setVal: Set<number>;
    bigintVal: bigint;
    urlVal: URL;
    searchParamsVal: URLSearchParams;
    typedArrayVal: Uint8Array;
    undefinedVal: undefined;
    infinityVal: number;
    nanVal: number;
    negZeroVal: number;
    repeatedRef: { x: number }[];
    cyclicRef: { name: string; self?: unknown };
    serverTypes: Record<string, string>;
  } = $props();

  function display(v: unknown): string {
    if (v === undefined) {
      return 'undefined';
    }
    if (v === null) {
      return 'null';
    }
    if (typeof v === 'number') {
      if (Number.isNaN(v)) {
        return 'NaN';
      }
      if (v === Infinity) {
        return 'Infinity';
      }
      if (Object.is(v, -0)) {
        return '-0';
      }
    }
    if (typeof v === 'bigint') {
      return `${v}n`;
    }
    if (v instanceof Date) {
      return v.toISOString();
    }
    if (v instanceof RegExp) {
      return String(v);
    }
    if (v instanceof Map) {
      return `Map(${v.size}) { ${[...v.entries()].map(([k, val]) => `${k} => ${val}`).join(', ')} }`;
    }
    if (v instanceof Set) {
      return `Set(${v.size}) { ${[...v].join(', ')} }`;
    }
    if (v instanceof URL) {
      return v.href;
    }
    if (v instanceof URLSearchParams) {
      return v.toString();
    }
    if (v instanceof Uint8Array) {
      return `Uint8Array [${[...v].join(', ')}]`;
    }
    if (Array.isArray(v)) {
      return JSON.stringify(v);
    }
    if (typeof v === 'object' && v !== null) {
      if ((v as { self?: unknown }).self === v) {
        return '{ self: [Circular] }';
      }
      return JSON.stringify(v);
    }
    return String(v);
  }

  // svelte-ignore state_referenced_locally
  const rows = [
    { label: 'Date', value: dateVal },
    { label: 'RegExp', value: regexpVal },
    { label: 'Map', value: mapVal },
    { label: 'Set', value: setVal },
    { label: 'BigInt', value: bigintVal },
    { label: 'URL', value: urlVal },
    { label: 'URLSearchParams', value: searchParamsVal },
    { label: 'Uint8Array', value: typedArrayVal },
    { label: 'undefined', value: undefinedVal },
    { label: 'Infinity', value: infinityVal },
    { label: 'NaN', value: nanVal },
    { label: '-0', value: negZeroVal },
    { label: 'Repeated ref', value: repeatedRef },
    { label: 'Cyclic ref', value: cyclicRef },
  ];
</script>

<div class="target" class:hydrated={isBrowser}>
  <div class="header">
    <span class="title">ClientRenderedChild.svelte</span>
    <Badge kind={isBrowser ? 'success' : 'info'}>
      {isBrowser ? 'Client (hydrated)' : 'Server (SSR)'}
    </Badge>
  </div>

  <table>
    <thead>
      <tr>
        <th>Prop</th>
        <th>Value</th>
        <th>Server type</th>
        <th>Client type</th>
      </tr>
    </thead>
    <tbody>
      {#each rows as row (row.label)}
        <tr>
          <td class="label"><code>{row.label}</code></td>
          <td class="value"><code>{display(row.value)}</code></td>
          <td class="type"><code>{serverTypes[row.label] ?? '—'}</code></td>
          <td class="type"><code>{isBrowser ? typeOf(row.value) : '—'}</code></td>
        </tr>
      {/each}
      <tr>
        <td class="label"><code>Repeated ref</code></td>
        <td class="value"><code>{repeatedRef[0] === repeatedRef[1] ? 'same ref' : 'different refs'}</code></td>
        <td class="type"><code>identity check</code></td>
        <td class="type"><code>{isBrowser ? 'identity check' : '—'}</code></td>
      </tr>
      <tr>
        <td class="label"><code>Cyclic ref</code></td>
        <td class="value"><code>{cyclicRef.self === cyclicRef ? 'self === obj' : 'broken'}</code></td>
        <td class="type"><code>identity check</code></td>
        <td class="type"><code>{isBrowser ? 'identity check' : '—'}</code></td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .target {
    padding: 1rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-x: auto;
    transition:
      border-color 0.12s ease,
      background 0.12s ease;
  }

  .target.hydrated {
    border-color: var(--badge-success-text);
    background: var(--badge-success-bg);
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

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

  table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  th {
    text-align: left;
    padding: 0.4rem 0.55rem;
    border-bottom: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }

  .label code {
    font-weight: 600;
    color: var(--text);
  }

  .value code,
  .type code {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
    word-break: break-all;
  }

  .type code {
    color: var(--text-muted);
  }
</style>
```

### devalueTypeOf.ts
```ts
export function typeOf(v: unknown): string {
  if (v === undefined) {
    return 'undefined';
  }
  if (v === null) {
    return 'null';
  }
  if (typeof v === 'bigint') {
    return 'BigInt';
  }
  if (typeof v === 'number') {
    if (Number.isNaN(v)) {
      return 'NaN';
    }
    if (v === Infinity) {
      return 'Infinity';
    }
    if (Object.is(v, -0)) {
      return '-0';
    }
  }
  if (v instanceof Date) {
    return 'Date';
  }
  if (v instanceof RegExp) {
    return 'RegExp';
  }
  if (v instanceof Map) {
    return 'Map';
  }
  if (v instanceof Set) {
    return 'Set';
  }
  if (v instanceof URL) {
    return 'URL';
  }
  if (v instanceof URLSearchParams) {
    return 'URLSearchParams';
  }
  if (v instanceof Uint8Array) {
    return 'Uint8Array';
  }
  if (ArrayBuffer.isView(v)) {
    return (v as { constructor: { name: string } }).constructor.name;
  }
  if (Array.isArray(v)) {
    return 'Array';
  }
  return typeof v;
}
```

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

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