Files

T

Lucas WintherandClaude Opus 5.5 4942461f79 Add typecheck + CI checks, light theme with self-hosted Inter, fix real-model test

- Typecheck: typescript 7 devDependency, `bun run typecheck`; CI gains a
  `check` stage (install, typecheck, fast tests) gating image builds (D-038).
- Light theme: every colour is a token; prefers-color-scheme: light
  overrides them. Inter Variable self-hosted from @fontsource-variable/inter,
  kept out of Bun's CSS inlining and precached (scripts/fonts.ts, D-037).
  Backend select no longer overflows on narrow phones.
- tests/live-real-model.test.ts: time budget scales with clip length and
  en_alien gets a measured WER bar; it had failed since July (D-039).
- Delete the temporary isolate_wer2.ts; fix icon "not checked in" comments
  and the README's model-weights location.
- Agent docs: branch naming, typecheck, CI, Bun CSS gotcha, permissions.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2026-10-29 20:52:13 +01:00

2.1 KiB

Raw Blame History

Design

Derived from the shipped src/index.css (single stylesheet, plain CSS, no framework). Describes what exists, not an aspiration. Update in the same commit as visual changes.

Foundations

Theme: dark by default, light when the OS prefers it (@media (prefers-color-scheme: light) overrides the tokens; no in-app toggle). <meta name="theme-color"> has a variant per scheme. The PWA manifest and icons stay dark (#16181d).
Tokens (:root, dark → light): --bg #16181d → #f5f6f8 · --fg #e8e8e8 → #1a1d23 · --muted #9aa3b2 → #5b6372 · --panel #1f232b → #ffffff · --border #343a46 → #d3d8e0 · --surface-raised (inputs, code) · --surface-selected (selected/drag-active) · --accent #7aa2f7 → #2f5bd3 + --on-accent · --success / -bg / -border · --danger / -muted / -bg / -border + --on-danger · --live (recording) · --shadow. No raw colours outside the token block — add a token (with both values) instead.
Contrast: every text/background token pair is ≥ 4.5:1 in both themes (checked when the light theme landed, D-037). Re-check any new pair.
Type: Inter Variable, self-hosted (@fontsource-variable/inter, 7 unicode-range subsets served from /fonts/, precached; see scripts/fonts.ts, D-037). Body line-height 1.5; h1 2.2rem / 1.15.
Layout: single centred column, .app { max-width: 720px; padding: 2.5rem 1.25rem 3rem; gap: 1.5rem }, body { min-width: 320px }.
Radius: 8px for controls (most common); 10–14px for panels/cards; 999px for pills/badges.
Motion: 0.15s colour/border transitions; pulse (live dot) and blink (cursor) animations, disabled under prefers-reduced-motion.
Browser surfaces: accent-color and ::selection come from --accent.

Components

One BEM-ish class block per React component in src/components/ (.model-picker, .dropzone, .live-controls, .engine-toggle, .auth-panel, .update-toast, …), with modifier classes like -selected, -active, -disabled. Interactive states use :hover:enabled and :focus-visible. .visually-hidden exists for screen-reader-only text.

2.1 KiB Raw Blame History Unescape Escape

Design

Foundations

Components

2.1 KiB

Raw Blame History