# Usage Guide

HTML prototypes for the Sonr Motr WASM Wallet using [Web Awesome](https://webawesome.com) components.

## Quick Start

```bash
bun install
bun run dev
```

Open http://localhost:5156

## Available Views

### Auth Views (Popup/Webview Optimized)

| Path | Purpose |
|------|---------|
| `/` | Onboarding landing page |
| `/register.html` | WebAuthn registration |
| `/login.html` | WebAuthn sign-in |
| `/authorize.html` | OAuth consent screen |
| `/demo.html` | Auth webview showcase |

### Dashboard Views

| Path | Purpose |
|------|---------|
| `/accounts.html` | Account management |
| `/activity.html` | Activity feed |
| `/tokens.html` | Token display |
| `/asset.html` | Asset detail page |
| `/nfts.html` | NFT gallery |
| `/transactions.html` | Transaction history |
| `/connections.html` | Connected apps |
| `/device.html` | Device detail page |
| `/service.html` | Connected service detail |
| `/settings.html` | Wallet settings |

## Project Structure

```
wa-sink/
├── sink/                  # HTML prototypes
│   ├── welcome.html
│   ├── register.html
│   ├── login.html
│   ├── authorize.html
│   ├── demo.html
│   ├── accounts.html
│   ├── activity.html
│   ├── tokens.html
│   ├── asset.html
│   ├── nfts.html
│   ├── transactions.html
│   ├── connections.html
│   ├── device.html
│   ├── service.html
│   ├── settings.html
│   ├── dashboard.html
│   └── charts.js
├── autoloader.js          # Web Awesome loader
├── serve.ts               # Bun dev server
└── package.json
```

## Viewport Sizes (Auth Views)

| Preset | Dimensions | Use Case |
|--------|------------|----------|
| Small | 360 x 540 | Mobile popup |
| Medium | 420 x 600 | Default popup |
| Large | 480 x 680 | Desktop popup |
| Mobile | 375 x 667 | iPhone viewport |

## Web Awesome Components

Primary color: `#17c2ff`

### Layout Classes

- `wa-stack` - Vertical flex
- `wa-cluster` - Horizontal flex
- `wa-grid` - CSS grid
- `wa-flank` - Space-between

Gap sizes: `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`

### Typography

- Headings: `wa-heading-xs` through `wa-heading-2xl`
- Captions: `wa-caption-xs`, `wa-caption-s`, `wa-caption-m`
- Labels: `wa-label-s`, `wa-label-m`

## Templ Migration

Each HTML file contains a migration guide comment at the top with conversion instructions for Go templ templates.

See [MIGRATION.md](MIGRATION.md) for detailed migration patterns and HTMX integration examples.