## Demo: captcha

### Captcha.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import CaptchaForm from './CaptchaForm.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';
  import type { MintedCaptcha } from 'mochi-framework';

  let { captcha }: { captcha: MintedCaptcha } = $props();

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

<DemoPage
  title="Captcha"
  description="A slide-to-verify captcha with no third party and no tracking. Sliding advances a hash chain and solves a proof-of-work, so a passing submit proves the page was really loaded and the work was really done."
  {sources}
>
  <p>
    <code>mintCaptcha()</code> seals a single-use token at SSR. Sliding the handle advances a hash chain one link per step, then solves a proof-of-work over the final link — so the
    challenge only exists once the slide has actually run, and never appears in the page.
    <code>verifyCaptcha()</code> re-derives it server-side.
  </p>
  <p>
    The submit button is <strong>not</strong> gated on the captcha here, so you can submit without solving it and watch the server reject you.
  </p>
  <p>
    <strong>Submit twice (replay)</strong> verifies the same token twice in one action — the first call burns the nonce, so the second is a real replay. A failure carries a
    <code>reason</code>, shown under each message: solve the captcha first and you get <code>replay</code>, which the demo answers with its own copy. Leave it unsolved and every
    probe-able failure — tampered, too fast, expired, bad proof-of-work — collapses to <code>rejected</code> behind one generic message, so a bot can't tell them apart.
  </p>

  <CaptchaForm mochi:hydrate {captcha} />
</DemoPage>

<style>
  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>
```

### CaptchaForm.svelte
```svelte
<script lang="ts">
  import { enhance } from 'mochi-framework';
  import type { MochiSubmitFunction, MintedCaptcha } from 'mochi-framework';
  import { MochiCaptcha } from 'mochi-framework/components';

  let { captcha }: { captcha: MintedCaptcha } = $props();

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

  const handleSubmit: MochiSubmitFunction = () => {
    pending = true;
    errorMessage = null;
    errorReason = null;
    return ({ result }) => {
      pending = false;
      if (result.type === 'success') {
        sentMessage = (result.data as { message?: string })?.message ?? 'Verified.';
      } else if (result.type === 'failure') {
        const data = result.data as { error?: string; reason?: string };
        errorMessage = data?.error ?? 'Verification failed.';
        errorReason = data?.reason ?? null;
      }
    };
  };
</script>

{#if sentMessage}
  <div class="sent">
    <p>✅ {sentMessage}</p>
    <!-- A full navigation, not a state reset: the token minted at SSR is
         single-use and this submit burned it — a reload mints a fresh one. -->
    <a href="/demos/captcha/">Reload for a fresh challenge</a>
  </div>
{:else}
  <form method="POST" action="?/submit" {@attach enhance(handleSubmit)}>
    <label>
      <span>Your name</span>
      <input name="name" autocomplete="name" />
    </label>

    <MochiCaptcha {...captcha} emoji="🍡" label="Slide the mochi to the right" />

    {#if errorMessage}
      <p class="error" role="alert">
        {errorMessage}
        {#if errorReason}
          <span class="reason">reason: {errorReason}</span>
        {/if}
      </p>
    {/if}

    <div class="actions">
      <!-- Deliberately not gated on the captcha, so you can submit unsolved and
           watch the server reject it. Real forms should disable until verified. -->
      <button type="submit" disabled={pending}>{pending ? 'Checking…' : 'Submit'}</button>
      <button type="submit" formaction="?/replay" class="secondary" disabled={pending}>Submit twice (replay)</button>
    </div>
  </form>
{/if}

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 26rem;
    margin-top: 0.75rem;

    /* The widget's own defaults are light-only; map the site palette onto them
       so it follows the theme toggle. */
    --mochi-captcha-accent: var(--accent);
    --mochi-captcha-accent-soft: var(--accent-soft);
    --mochi-captcha-accent-soft-text: var(--accent-soft-text);
    --mochi-captcha-border: var(--border);
    --mochi-captcha-track-bg: var(--surface-muted);
    --mochi-captcha-handle-bg: var(--surface);
    --mochi-captcha-hint-text: var(--text-subtle);
  }

  label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  input {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
  }

  input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
  }

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

  .reason {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.75;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .sent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.75rem;
    font-size: 0.95rem;
  }

  .sent p {
    margin: 0;
  }

  .sent a {
    font-size: 0.85rem;
    color: var(--accent);
  }

  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.secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
    font-weight: 500;
  }

  button.secondary:hover:not(:disabled) {
    background: var(--surface-muted);
    color: var(--text);
  }

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

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

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/captcha': Mochi.page('./src/demos/captcha/Captcha.svelte', {
    serverProps: () => ({ captcha: mintCaptcha() }),
    actions: {
      submit: async ({ formData }) => {
        const captcha = await verifyCaptcha(formData);
        if (!captcha.ok) {
          return fail(400, { error: captcha.error, reason: captcha.reason });
        }
        const name = String(formData.get('name') ?? '').trim();
        return success({ message: `Verified — nice to meet you, ${name || 'stranger'}.` });
      },

      // Verifies the same token twice: the first call burns the nonce, so the
      // second is a genuine replay rather than a faked message. Lets one click
      // reach the `reason === 'replay'` branch without solving two captchas.
      // An unsolved token fails both calls and lands on 'rejected' instead,
      // which is the other half of what this demonstrates.
      replay: async ({ formData }) => {
        await verifyCaptcha(formData);
        const captcha = await verifyCaptcha(formData);
        if (!captcha.ok) {
          return fail(400, {
            error: captcha.reason === 'replay' ? 'Our own copy: that token is spent — reload for a fresh challenge.' : captcha.error,
            reason: captcha.reason,
          });
        }
        return success({ message: 'Unexpected — the nonce survived a double verify.' });
      },
    },
  }),
};
```

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