## Demo: form-errors

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

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

<DemoPage
  title="Form Errors"
  description={`Both standard HTML forms and progressively enhanced forms can handle errors gracefully. With {@attach enhance(...)}, the error message is shown inline. Without it, Mochi renders the server error page.`}
  {sources}
>
  <p>
    The action throws a plain <code>Error</code>. With <code>{'{@attach enhance(...)}'}</code> the error message is shown inline. Without it, the server renders the Mochi error page.
  </p>
  <h3>With <code>{'{@attach enhance(...)}'}</code></h3>
  <ErrorDemo label="The enhance attachment catches the thrown error and shows it inline" mochi:hydrate />
  <h3>Plain HTML</h3>
  <ErrorDemo label="Plain POST, server throws, Mochi renders the error page (press back to return)" />
</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>
```

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

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

  let errorMessage = $state<string | null>(null);
  let pending = $state(false);

  const handleSubmit: MochiSubmitFunction = () => {
    pending = true;
    errorMessage = null;
    return ({ result }) => {
      pending = false;
      if (result.type === 'error') {
        errorMessage = (result.error as { message?: string })?.message ?? 'Unknown server error';
      }
    };
  };
</script>

<div class="demo-block">
  <p class="label">{label}</p>
  <form method="POST" action="?/throwError" {@attach enhance(handleSubmit)}>
    {#if errorMessage}
      <p class="error" role="alert">{errorMessage}</p>
    {/if}
    <button type="submit" disabled={pending}>{pending ? 'Throwing…' : 'Trigger server error'}</button>
  </form>
</div>

<style>
  .demo-block {
    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);
  }

  .error {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
  }

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

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

  button:hover:not(:disabled) {
    opacity: 0.85;
  }
</style>
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/form-errors': Mochi.page('./src/demos/form-errors/FormErrors.svelte', {
    actions: {
      throwError: () => {
        throw new Error('Something went wrong on the server');
      },
    },
  }),
};
```

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