File size: 3,380 Bytes
557ab38 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | # Ledger UI
The Paper & Ink frontend for the structured-data-extraction API.
## Stack
- **Vite + React + TypeScript** — fast dev loop, small bundle.
- **Tailwind** — utility layout only. All colors, typography, and design
tokens live as CSS variables in `src/styles/theme.css`, so dark/light mode
is a single attribute flip on `<html data-theme="...">`.
- **Motion** (`motion/react`) — component-level animation.
- **React Three Fiber + drei + three** — the 3D paper sheet in the hero.
- **Google Fonts** — Instrument Serif (display), Geist (UI), JetBrains Mono
(code). All free.
## Run locally
```bash
# 1. Install
cd ui
npm install
# 2. Point at the API (in another terminal, from the repo root):
uvicorn src.api.main:app --reload
# 3. Start the dev server
npm run dev
# open http://localhost:5173
```
Vite proxies `/api/*` to `http://localhost:8000`, so no CORS needed in dev.
## Configuration
- `VITE_API_BASE` (optional) — override the API origin for prod builds.
Defaults to `/api`.
## Design tokens
Everything visual is in `src/styles/theme.css`:
- `--bg`, `--surface`, `--surface-2`, `--rule` — surfaces + dividers
- `--ink`, `--ink-strong`, `--ink-soft`, `--ink-mute` — text weights
- `--accent`, `--accent-hover`, `--accent-soft` — coral
- `--sage`, `--mustard` — confidence tiers + warnings
To try a color, edit the variable — both modes update simultaneously.
## Project shape
```
ui/
├── index.html # font preload + theme priming (no-flash)
├── src/
│ ├── main.tsx # ReactDOM render
│ ├── App.tsx # page composition
│ ├── styles/
│ │ ├── theme.css # design tokens (light + dark)
│ │ └── globals.css # base + grain overlay + focus/cursor
│ ├── components/
│ │ ├── TopNav.tsx # logo + theme toggle
│ │ ├── ThemeToggle.tsx # hand-drawn sun/moon
│ │ ├── CustomCursor.tsx # spring-lag ink dot
│ │ ├── Hero.tsx # kinetic headline + stats + 3D scene
│ │ ├── PaperScene.tsx # R3F: floating paper w/ mouse parallax
│ │ ├── ExtractSection.tsx # workbench (dropzone + results)
│ │ ├── Dropzone.tsx # drop + browse + doc-type + samples
│ │ ├── ResultsPanel.tsx # composes the below
│ │ ├── ConfidenceInkwell.tsx # confidence as an ink vessel
│ │ ├── MetricsStrip.tsx # cost/latency/tokens/model
│ │ ├── JsonView.tsx # syntax-highlighted JSON
│ │ ├── WarningsList.tsx # model-flagged concerns
│ │ ├── HowItWorks.tsx # three chapters
│ │ ├── Numbers.tsx # magazine-style data page
│ │ └── Footer.tsx # signature line
│ ├── hooks/
│ │ ├── useTheme.ts # dark/light + localStorage
│ │ └── useExtract.ts # upload lifecycle
│ ├── lib/
│ │ ├── api.ts # thin fetch client + typed error envelope
│ │ └── samples.ts # committed sample docs
│ └── types.ts # mirrors src/schemas server-side
└── public/samples/ # sample_receipt.png, sample_invoice.pdf
```
|