## Demo: form-cancel

### FormCancel.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import CancelDemo from './CancelDemo.svelte';
  import AbortDemo from './AbortDemo.svelte';
  import PlainDemo from './PlainDemo.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

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

<DemoPage
  title="Cancelling form submissions"
  description={`Inside {@attach enhance(...)} there are two distinct cancellation points: cancel() short-circuits before the fetch is issued; controller.abort() stops a request that is already in flight. They solve different problems — they are not interchangeable.`}
  {sources}
>
  <p>The action sleeps 3 s to simulate a slow lookup. Each variant below uses the same action but cancels at a different point — or not at all.</p>

  <h3><code>cancel()</code> — pre-flight short-circuit</h3>
  <p>
    The <code>submit</code> callback receives <code>cancel</code>. Calling it skips the fetch entirely — no request is sent, no result callback runs. Use this for client-side
    validation or any condition you can check before leaving the browser.
  </p>
  <CancelDemo label="Type fewer than 3 characters and submit — cancel() fires, no network request" mochi:hydrate />

  <h3><code>controller.abort()</code> — in-flight cancellation</h3>
  <p>
    The <code>submit</code> callback also receives an
    <code>AbortController</code>. Calling <code>controller.abort()</code>
    stops a fetch that has already started. Here a 1.5 s timeout aborts the 3 s lookup; <code>enhance</code> swallows the <code>AbortError</code> and resets the form to idle.
  </p>
  <AbortDemo label="Submit any query — the request aborts after 1.5 s" mochi:hydrate />

  <h3>Plain HTML — no <code>enhance</code></h3>
  <p>Without JavaScript there is nothing to cancel. The browser POSTs and waits the full 3 s, then the page re-renders with the result.</p>
  <PlainDemo label="Plain POST — waits the full 3 s, page re-renders with the result" />
</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>
```

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

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

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

  const handleSubmit: MochiSubmitFunction<{ result: string }, { error: string }> = ({ cancel, formData }) => {
    const query = String(formData.get('query') ?? '').trim();
    result = null;
    message = null;
    if (query.length < 3) {
      cancel();
      message = 'Query must be at least 3 characters — no request sent.';
      return;
    }
    return ({ result: r }) => {
      if (r.type === 'success' && r.data) {
        result = r.data.result;
      } else if (r.type === 'failure' && r.data) {
        message = r.data.error;
      }
    };
  };

  const opts: MochiEnhanceOptions<{ result: string }, { error: string }> = {
    submit: handleSubmit,
    onPending: (v) => {
      pending = v;
    },
  };
</script>

<div class="demo-block">
  <p class="label">{label}</p>
  <form method="POST" action="?/lookup" class="lookup" {@attach enhance(opts)}>
    <label>
      <span>Query</span>
      <input name="query" placeholder="Enter at least 3 characters…" disabled={pending} />
    </label>
    <button type="submit" disabled={pending}>{pending ? 'Searching…' : 'Search'}</button>
  </form>
  {#if result}
    <p class="result" role="status">{result}</p>
  {/if}
  {#if message}
    <p class="message" role="alert">{message}</p>
  {/if}
</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);
  }

  .lookup {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

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

  .lookup input {
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    min-width: 16rem;
  }

  .lookup input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .lookup input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }

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

  .result {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text);
  }

  .message {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-subtle);
    font-style: italic;
  }
</style>
```

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

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

  let pending = $state(false);
  let result = $state<string | null>(null);
  let message = $state<string | null>(null);
  let gotResult = false;
  let timeoutId: ReturnType<typeof setTimeout> | null = null;

  const handleSubmit: MochiSubmitFunction<{ result: string }, { error: string }> = ({ controller }) => {
    result = null;
    message = null;
    gotResult = false;
    timeoutId = setTimeout(() => controller.abort(), 1500);
    return ({ result: r }) => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      timeoutId = null;
      gotResult = true;
      if (r.type === 'success' && r.data) {
        result = r.data.result;
      } else if (r.type === 'failure' && r.data) {
        message = r.data.error;
      }
    };
  };

  const opts: MochiEnhanceOptions<{ result: string }, { error: string }> = {
    submit: handleSubmit,
    onPending: (v) => {
      pending = v;
      if (!v && !gotResult) {
        message = 'Request timed out after 1.5 s — aborted in flight.';
      }
    },
  };
</script>

<div class="demo-block">
  <p class="label">{label}</p>
  <form method="POST" action="?/lookup" class="lookup" {@attach enhance(opts)}>
    <label>
      <span>Query</span>
      <input name="query" placeholder="Enter a name…" required disabled={pending} />
    </label>
    <button type="submit" disabled={pending}>{pending ? 'Searching…' : 'Search'}</button>
  </form>
  {#if result}
    <p class="result" role="status">{result}</p>
  {/if}
  {#if message}
    <p class="message" role="alert">{message}</p>
  {/if}
</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);
  }

  .lookup {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

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

  .lookup input {
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    min-width: 16rem;
  }

  .lookup input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .lookup input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }

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

  .result {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text);
  }

  .message {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-subtle);
    font-style: italic;
  }
</style>
```

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

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

  const _form = isServer ? getRequestContext().form : null;
  const initialResult: string | null = _form?.ok && _form.action === 'lookup' ? String(_form.data.result ?? '') : null;
  const initialMessage: string | null = !_form?.ok && _form?.action === 'lookup' ? String(_form.data.error ?? '') : null;
</script>

<div class="demo-block">
  <p class="label">{label}</p>
  <form method="POST" action="?/lookup" class="lookup">
    <label>
      <span>Query</span>
      <input name="query" placeholder="Enter a name…" required />
    </label>
    <button type="submit">Search</button>
  </form>
  {#if initialResult}
    <p class="result" role="status">{initialResult}</p>
  {/if}
  {#if initialMessage}
    <p class="message" role="alert">{initialMessage}</p>
  {/if}
</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);
  }

  .lookup {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

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

  .lookup input {
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    min-width: 16rem;
  }

  .lookup input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }

  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:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  .result {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text);
  }

  .message {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-subtle);
    font-style: italic;
  }
</style>
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/form-cancel': Mochi.page('./src/demos/form-cancel/FormCancel.svelte', {
    actions: {
      lookup: async ({ formData }) => {
        const query = String(formData.get('query') ?? '').trim();
        if (!query) {
          return fail(400, { error: 'Query is required' });
        }
        await Bun.sleep(3000);
        return success({ result: `Found: ${query} — status active` });
      },
    },
  }),
};
```

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