## Demo: form-redirects

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

  const sources = await loadSources(files);

  let { redirected }: { redirected: boolean } = $props();
</script>

<DemoPage
  title="Form Redirects"
  description={`You can return redirect(<code>, …) from an action. With {@attach enhance(...)}, the JSON envelope is intercepted before navigating. Without it, the browser follows the native 303 response.`}
  {sources}
>
  {#if redirected}
    <p class="redirect-flash" role="status">Redirected here via HTTP 303 (non-enhanced path).</p>
  {/if}

  <p>
    The action returns <code>redirect(303, …)</code>. With <code>{'{@attach enhance(...)}'}</code> the JSON envelope is intercepted so you can inspect it before navigating. Without it,
    the browser follows the HTTP 303.
  </p>
  <h3>With <code>{'{@attach enhance(...)}'}</code></h3>
  <RedirectDemo label="The enhance attachment intercepts the redirect envelope; click Follow to navigate" mochi:hydrate />
  <h3>Plain HTML</h3>
  <RedirectDemo label="Plain POST, server returns 303, browser follows the Location header" />
</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;
  }

  .redirect-flash {
    padding: 0.5rem 0.75rem;
    background: var(--badge-info-bg, #dbeafe);
    color: var(--badge-info-text, #1e40af);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin: 0 0 1rem;
  }
</style>
```

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

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

  let redirectResult = $state<{ status: number; location: string } | null>(null);
  let pending = $state(false);

  // Intercept the redirect instead of immediately navigating so we can show
  // the JSON envelope. Call follow() to actually navigate.
  const handleSubmit: MochiSubmitFunction = () => {
    pending = true;
    redirectResult = null;
    return ({ result }: { result: MochiEnhanceResult }) => {
      pending = false;
      if (result.type === 'redirect') {
        redirectResult = { status: result.status, location: result.location };
      }
    };
  };

  function follow(): void {
    if (redirectResult) {
      window.location.assign(redirectResult.location);
    }
  }
</script>

<div class="demo-block">
  <p class="label">{label}</p>
  <form method="POST" action="?/doRedirect" {@attach enhance(handleSubmit)}>
    {#if redirectResult}
      <div class="result" role="status">
        <p>Server returned <code>type: "redirect"</code></p>
        <p><code>status: {redirectResult.status}</code></p>
        <p><code>location: "{redirectResult.location}"</code></p>
        <button type="button" onclick={follow}>Follow redirect</button>
      </div>
    {:else}
      <button type="submit" disabled={pending}>{pending ? 'Redirecting…' : 'Trigger redirect'}</button>
    {/if}
  </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);
  }

  .result {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
  }

  .result p {
    margin: 0;
  }

  .result button {
    margin-top: 0.5rem;
    align-self: flex-start;
  }

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

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

  button:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
</style>
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/form-redirects': Mochi.page('./src/demos/form-redirects/FormRedirects.svelte', {
    serverProps: () => {
      const { url } = getRequestContext();
      return { redirected: url.searchParams.has('redirected') };
    },
    actions: {
      doRedirect: () => redirect(303, '/demos/form-redirects?redirected=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');
```