## Demo: entity-props

### EntityDemo.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import EntityIsland from './EntityIsland.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const name = 'friend';
</script>

<DemoPage
  title="HTML Entities in Props"
  description="Static string-literal props on a hydrated island can contain HTML entities (&amp;, &quot;, &lt;, &copy;). They decode to their characters before reaching the island — identically on the server and after hydration — so the SSR text and the hydrated text always match."
  {sources}
>
  <section class="intro">
    <p>
      The parent (server-only) passes literal HTML entities in <code>string="…"</code> attributes on a <code>mochi:hydrate</code> island. Svelte decodes them for the SSR render,
      and Mochi's preprocessor decodes the same value into the serialized props the client hydrates with — so the two never disagree. Watch the
      <strong>Rendered on</strong> line flip from <code>server</code> to <code>client</code> after hydration while every value stays the same.
    </p>
    <pre><code
        >{`<EntityIsland
  label="Tom &amp; Jerry"
  quote="She said &quot;hi&quot;"
  comparison="5 &lt; 10 &amp;&amp; 10 &gt; 5"
  copyright="&copy; 2026 Mochi"
  greeting="Hi &amp; welcome, {name}"
  mochi:hydrate
/>`}</code
      ></pre>
  </section>

  <EntityIsland
    label="Tom &amp; Jerry"
    quote="She said &quot;hi&quot;"
    comparison="5 &lt; 10 &amp;&amp; 10 &gt; 5"
    copyright="&copy; 2026 Mochi"
    greeting="Hi &amp; welcome, {name}"
    mochi:hydrate
  />
</DemoPage>

<style>
  .intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

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

  .intro strong {
    color: var(--text);
  }

  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;
    color: var(--text);
  }
</style>
```

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

  let {
    label,
    quote,
    comparison,
    copyright,
    greeting,
  }: {
    label: string;
    quote: string;
    comparison: string;
    copyright: string;
    greeting: string;
  } = $props();

  // The `authored` column shows the raw attribute text as written in the parent
  // (`&amp;`, `&quot;`, …); the `value` column shows what the island actually
  // received. They must differ — the entity is decoded before it reaches the prop.
  const rows: Array<{ name: string; authored: string; value: string }> = $derived([
    { name: 'label', authored: 'Tom &amp; Jerry', value: label },
    { name: 'quote', authored: 'She said &quot;hi&quot;', value: quote },
    { name: 'comparison', authored: '5 &lt; 10 &amp;&amp; 10 &gt; 5', value: comparison },
    { name: 'copyright', authored: '&copy; 2026 Mochi', value: copyright },
    { name: 'greeting (mixed)', authored: 'Hi &amp; welcome, {name}', value: greeting },
  ]);
</script>

<div class="island">
  <p class="where">
    Rendered on: <strong>{isBrowser ? 'client (hydrated)' : 'server (SSR)'}</strong>
  </p>
  <table>
    <thead>
      <tr>
        <th>Prop</th>
        <th>Authored attribute</th>
        <th>Value received</th>
      </tr>
    </thead>
    <tbody>
      {#each rows as row (row.name)}
        <tr>
          <td><code>{row.name}</code></td>
          <td><code>{row.authored}</code></td>
          <td class="value">{row.value}</td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>

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

  .where {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  .where strong {
    color: var(--text);
    font-family: var(--font-mono);
  }

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

  th,
  td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }

  th {
    color: var(--text-subtle);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

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

  .value {
    color: var(--text);
    font-weight: 600;
  }
</style>
```

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

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