src/App.svelte

<script lang="ts">
  import ModelStatus from './components/ModelStatus.svelte';
  import PromptPanel from './components/PromptPanel.svelte';
  import BaselinePanel from './components/BaselinePanel.svelte';
  import WatermarkPanel from './components/WatermarkPanel.svelte';
  import { baselineCollapsed } from './lib/stores/app-state';
</script>

<main>
  <header class="hero">
    <h1>LLM Text Watermark Microscope</h1>
    <p class="dim">
      Walk through three generations of text watermarking — Kirchenbauer 2023, k-SemStamp 2024,
      TextSeal 2026 — by setting the secrets yourself and watching each step of decoding. Every
      model run happens locally on your GPU via WebGPU.
    </p>
  </header>

  <ModelStatus />
  <PromptPanel />

  <div class="split" class:narrow-baseline={$baselineCollapsed}>
    <BaselinePanel />
    <WatermarkPanel />
  </div>

  <footer class="dim small">
    <a href="https://arxiv.org/abs/2301.10226" target="_blank" rel="noreferrer">Kirchenbauer et al. 2023</a>
    ·
    <a href="https://arxiv.org/abs/2402.11399" target="_blank" rel="noreferrer">Hou et al. 2024</a>
    ·
    <a href="https://arxiv.org/abs/2605.12456" target="_blank" rel="noreferrer">Sander et al. 2026</a>
    · educational re-implementations; see the README for fidelity notes. This verifies a specific
    watermark with a known key — it is not an AI-text detector.
  </footer>
</main>

<style>
  main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 18px 60px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .hero h1 {
    margin: 0 0 4px;
    font-size: 25px;
    letter-spacing: -0.01em;
  }
  .hero p {
    margin: 0;
    max-width: 900px;
  }
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 14px;
    /* Both cards share a height so the two texts sit on the same baseline. */
    align-items: stretch;
  }
  .split.narrow-baseline {
    grid-template-columns: auto minmax(0, 1fr);
  }
  @media (max-width: 1000px) {
    /* Watermark panel first: it is where the interaction happens. */
    .split {
      display: flex;
      flex-direction: column-reverse;
    }
  }
  footer {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
  footer a {
    color: var(--text-dim);
  }
</style>