## Demo: form-return-data

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

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

<DemoPage
  title="Using form return data"
  description={`You can return data from an action via success(...). With {@attach enhance(...)}, the JSON result updates the UI in place. Without it, the page re-renders and the component can read the value from getRequestContext().form.`}
  {sources}
>
  <p>
    A minimal action that returns a random number via <code>success({'{ value }'})</code>. The hydrated version updates the input reactively; the non-hydrated version re-renders
    the whole page and the component reads the value from <code>getRequestContext().form</code>.
  </p>
  <h3>With <code>{'{@attach enhance(...)}'}</code></h3>
  <RandomRoll label="The enhance attachment fills the input via fetch + JSON, no reload" mochi:hydrate />
  <h3>Plain HTML</h3>
  <RandomRoll label="Full HTML POST, page re-renders, RandomRoll reads the value from the request's form snapshot via !isHydratable && isServer" />
</DemoPage>

<style>
  h3 {
    margin: 1.5rem 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
  }

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

  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;
  }
</style>
```

### RandomRoll.svelte
```svelte
<script lang="ts">
  import { enhance, isServer, getRequestContext } from 'mochi-framework';
  import type { MochiSubmitFunction } from 'mochi-framework';

  let { label, isHydratable }: { label: string; isHydratable?: boolean } = $props();

  // svelte-ignore state_referenced_locally
  const _form = !isHydratable && isServer ? getRequestContext().form : null;
  const initialValue = _form?.ok && _form.action === 'random' && typeof _form.data.value === 'number' ? _form.data.value : null;

  let currentValue = $state<number | null>(initialValue);
  let pending = $state(false);

  const handleRoll: MochiSubmitFunction<{ value: number }> = () => {
    pending = true;
    return ({ result }) => {
      pending = false;
      if (result.type === 'success' && result.data) {
        currentValue = result.data.value;
      }
    };
  };
</script>

<form method="POST" action="?/random" class="roll" {@attach enhance(handleRoll)}>
  <p class="label">{label}</p>
  <label>
    <span>Random number</span>
    <input type="text" readonly value={currentValue ?? ''} placeholder="(click roll)" />
  </label>
  <button type="submit" disabled={pending}>{pending ? 'Rolling…' : 'Roll'}</button>
</form>

<style>
  .roll {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.75rem;
  }

  .label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-subtle);
  }

  .roll label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  .roll input {
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 1rem;
    width: 8rem;
    text-align: center;
  }

  .roll button {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-text);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }

  .roll button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .roll button:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
</style>
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/form-return-data': Mochi.page('./src/demos/form-return-data/FormReturnData.svelte', {
    actions: {
      random: () => success({ value: Math.floor(Math.random() * 100) + 1 }),
    },
  }),
};
```

### 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');
```