# ADR-0002 — Frontend framework: Svelte + TypeScript

- **Status:** Accepted
- **Date:** 2026-06-30
- **Context source:** Design doc §"UX and Performance Principles", NFR-RES-1

## Context

Tauri (ADR-0001) renders a web frontend. We need light/dark theming, a three-pane layout
(meetings list · transcript/notes · summary/participants), live-updating transcript and
waveform, and a Markdown editor — all while keeping per-view memory and render cost low.

## Options considered

- **React** — largest ecosystem and component availability, but ships a runtime + virtual DOM;
  heavier than necessary for our footprint goals.
- **Vue** — middle ground; runtime overhead between React and Svelte.
- **Svelte** — compiles components to small imperative JS with no shipped framework runtime;
  smallest bundles and lowest memory; fine-grained reactivity ideal for high-frequency
  transcript/waveform updates.
- **SolidJS** — comparably lean, but smaller ecosystem/talent pool than Svelte.

## Decision

**Use Svelte with TypeScript, bundled by Vite.** Best memory/performance profile and a good fit
for streaming UI updates, with enough ecosystem maturity for an OSS project.

## Consequences

- **Positive:** smallest footprint; simple, fast reactive updates for live transcript; first-class
  Vite integration with Tauri.
- **Negative:** smaller component ecosystem than React (mitigated: WA's UI is bespoke); team must
  know Svelte 5 reactivity model.
- Theming via CSS custom properties + `prefers-color-scheme`, with a user override stored in
  settings (FR-UX-2).

## Revisit if
We need a large third-party component (e.g. complex data grid) only available for React/Vue, or
hiring constraints favor React.