## Demo: portable-text

### PortableTextDemo.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import Callout from '../../../../docs/_components/Callout.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { highlightCode } from '../../lib/highlight.server';
  import { files } from './files.ts';
  import { playgroundJson } from './blocks.ts';
  import Playground from './Playground.svelte';

  const sv = (code: string) => highlightCode(code, 'svelte');
  const ts = (code: string) => highlightCode(code, 'typescript');

  const codeInstall = await highlightCode('bun add @portabletext/svelte', 'bash');
  const codeImport = await ts("import { PortableText } from '@portabletext/svelte';");
  const codeBasic = await sv('<PortableText value={blocks} />');
  const codePair = await sv('<Playground source={playgroundJson} />\n<Playground mochi:hydrate source={playgroundJson} />');

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

<DemoPage
  title="Portable Text"
  description="@portabletext/svelte renders Portable Text — the JSON format editors like Sanity emit for rich text — by mapping each block, mark, style and list onto a Svelte component you own."
  {sources}
>
  <p>
    Portable Text stores rich text as an array of JSON blocks instead of HTML, so the same content can render to a web page, a PDF or a native app. <a
      href="https://github.com/portabletext/svelte-portabletext"
      target="_blank"
      rel="noopener noreferrer">@portabletext/svelte</a
    >
    is the official Svelte 5 renderer for it; the format itself is documented at
    <a href="https://portabletext.org" target="_blank" rel="noopener noreferrer">portabletext.org</a>. Everything on this page is server-rendered by Mochi except the last section.
  </p>

  <h3>Install</h3>
  <CodeSnippet html={codeInstall} />
  <CodeSnippet html={codeImport} />
  <CodeSnippet html={codeBasic} />

  <h3>The same renderer, hydrated and not</h3>
  <p>
    Both panels below are the same component rendered from the same JSON. The left one is plain SSR markup; the right one carries <code>mochi:hydrate</code>, so the renderer ships
    to the browser and re-runs on every keystroke.
  </p>
  <div class="pair">
    <Playground source={playgroundJson} />
    <Playground mochi:hydrate source={playgroundJson} />
  </div>
  <CodeSnippet html={codePair} />
  <Callout type="info">
    Hydration is all-or-nothing per island: the right panel ships <code>@portabletext/svelte</code> plus every component it references, and its props are serialized in plain text into
    the page. The left panel ships nothing.
  </Callout>
</DemoPage>

<style>
  p code,
  h3 code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }

  .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  @media (max-width: 720px) {
    .pair {
      grid-template-columns: 1fr;
    }
  }
</style>
```

### blocks.ts
```ts
import type { InputValue } from '@portabletext/svelte';

// Every block and span carries an explicit _key: the renderer mints Math.random() keys for
// missing ones, which would differ between the server render and the hydrated one.

export const playground = [
  {
    _type: 'block',
    _key: 'pg1',
    style: 'h3',
    children: [{ _type: 'span', _key: 'pg1s1', text: 'A rendered heading' }],
  },
  {
    _type: 'block',
    _key: 'pg2',
    style: 'normal',
    children: [
      { _type: 'span', _key: 'pg2s1', text: 'A paragraph with a ' },
      { _type: 'span', _key: 'pg2s2', text: 'highlighted', marks: ['highlight'] },
      { _type: 'span', _key: 'pg2s3', text: ' word.' },
    ],
  },
  { _type: 'callout', _key: 'pg3', text: 'And a custom callout block.' },
] satisfies InputValue;

export const playgroundJson = JSON.stringify(playground, null, 2);
```

### CalloutBlock.svelte
```svelte
<script lang="ts">
  import type { CustomBlockComponentProps } from '@portabletext/svelte';
  import Info from '@lucide/svelte/icons/info';

  type Callout = { tone?: string; text?: string };

  let { portableText }: { portableText: CustomBlockComponentProps<Callout> } = $props();

  let { value, isInline } = $derived(portableText);
</script>

{#if isInline}
  <span class="pt-callout inline"><Info size={13} aria-hidden="true" />{value.text}</span>
{:else}
  <aside class="pt-callout">
    <Info size={15} aria-hidden="true" />
    <span>{value.text}</span>
    {#if value.tone}
      <span class="tone">{value.tone}</span>
    {/if}
  </aside>
{/if}

<style>
  .pt-callout {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent-soft);
    color: var(--accent-soft-text);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
  }

  aside.pt-callout {
    margin: 0.75rem 0;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  .inline {
    display: inline-flex;
    padding: 0.05rem 0.4rem;
    vertical-align: baseline;
  }

  .tone {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    opacity: 0.7;
  }
</style>
```

### Highlight.svelte
```svelte
<script lang="ts">
  import type { MarkComponentProps } from '@portabletext/svelte';
  import type { Snippet } from 'svelte';

  // A decorator has no markDef, so `portableText.value` is undefined here.
  let { children }: { portableText: MarkComponentProps<'highlight'>; children: Snippet } = $props();
</script>

<mark>{@render children()}</mark>

<style>
  mark {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
    padding: 0.05rem 0.25rem;
    border-radius: var(--radius-sm);
  }
</style>
```

### Playground.svelte
```svelte
<script lang="ts">
  import { PortableText } from '@portabletext/svelte';
  import type { InputValue } from '@portabletext/svelte';
  import { isHydratable } from 'mochi-framework';
  import Badge from '../../components/Badge.svelte';
  import CalloutBlock from './CalloutBlock.svelte';
  import Highlight from './Highlight.svelte';

  let { source }: { source: string } = $props();

  const live = isHydratable();
  const uid = $props.id();

  // svelte-ignore state_referenced_locally
  let text = $state(source);
  let parsed = $derived.by(() => {
    try {
      return { value: JSON.parse(text) as InputValue, error: null };
    } catch (e) {
      return { value: null, error: (e as Error).message };
    }
  });
</script>

<div class="playground">
  <div class="head">
    <Badge kind={live ? 'success' : 'info'}>{live ? 'mochi:hydrate' : 'SSR only'}</Badge>
    <span class="note">{live ? 'edit the JSON — the output re-renders' : 'no JavaScript shipped — the field is read-only'}</span>
  </div>

  <label class="sr-only" for="pt-source-{uid}">Portable Text JSON</label>
  <textarea id="pt-source-{uid}" bind:value={text} readonly={!live} spellcheck="false" rows="12"></textarea>

  {#if parsed.error}
    <p class="error">{parsed.error}</p>
  {/if}

  <div class="output">
    <PortableText value={parsed.value ?? []} components={{ types: { callout: CalloutBlock }, marks: { highlight: Highlight } }} onMissingComponent={false} />
  </div>
</div>

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

  .head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .note {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--code-bg);
    color: var(--code-text);
    resize: vertical;
  }

  textarea[readonly] {
    opacity: 0.65;
    cursor: not-allowed;
  }

  .error {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--badge-danger-text);
  }

  .output {
    padding: 0.1rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.9rem;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
</style>
```

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

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