# Notemark — .NET 10 Blazor Server Specification (Markdown Editor + Preview + Share)

## 0) Goal
Notemark is a minimalist Markdown editor web app built with **.NET 10 Blazor Server**.

- First visit generates a **GUID sessionId**
- Markdown is saved as a **file on disk** (no database)
- Fullscreen editor, optional preview split view
- Share links:
  - **Readonly** → preview only
  - **Editable** → preview only + Edit button

---

## 1) Tech Stack
- .NET 10
- Blazor Server
- Markdown rendering: Markdig
- HTML sanitization: Ganss.XSS (HtmlSanitizer)
- Persistence: File system only

---

## 2) UI Requirements

### Editor Page (`/`)
- Minimalist text editor (no toolbar)
- Preview OFF → editor uses 100% window
- Preview ON → editor 50% + preview 50%

Top bar:
- Preview toggle
- Save status (Saving/Saved/Error)
- Share button

### Shared Preview (`/s/{token}`)
- Default view: rendered Markdown only
- If editable: show **Edit** → opens `/e/{token}`

### Shared Editor (`/e/{token}`)
- Same editor UI
- Autosave writes into shared session document

---

## 3) Persistence (No DB)

### Sessions
- Cookie: `mk_session`
- Markdown stored in:

```
data/sessions/{sessionId}.md
```

### Share tokens
Stored in:

```
data/shares/{token}.json
```

Example:

```json
{
  "sessionId": "GUID",
  "mode": "editable",
  "createdAt": "2026-01-30T10:00:00Z",
  "expiresAt": null,
  "revokedAt": null
}
```

---

## 4) Light & Dark Mode Support

### Default Light Mode Palette
| Element | HEX |
|--------|------|
| Background | #F9FAFB |
| Surface | #FFFFFF |
| Border | #E5E7EB |
| Primary Text | #111827 |
| Secondary Text | #6B7280 |
| Accent | #4F46E5 |
| Accent Hover | #4338CA |
| Success | #10B981 |
| Error | #F43F5E |

### Dark Mode Palette
| Element | HEX |
|--------|------|
| Background | #0B0F19 |
| Surface | #111827 |
| Border | #1F2937 |
| Primary Text | #F9FAFB |
| Secondary Text | #9CA3AF |
| Accent | #22D3EE |
| Accent Hover | #06B6D4 |
| Success | #4ADE80 |
| Error | #FB7185 |

### Behavior
- Auto detect using `prefers-color-scheme`
- Toggle optional in top bar
- Colors applied via CSS variables:

```css
:root {
  --bg: #F9FAFB;
  --accent: #4F46E5;
}

[data-theme="dark"] {
  --bg: #0B0F19;
  --accent: #22D3EE;
}
```

---

## 5) Acceptance Criteria (MVP)
1. Visiting `/` creates GUID session and saves markdown into file
2. Editor is fullscreen; preview splits 50/50
3. Autosave works with indicator
4. Share modal returns readonly + editable links
5. `/s/{token}` always shows preview only
6. Editable share supports `/e/{token}` editing
7. Markdown preview is sanitized and safe
8. Light/Dark themes work correctly

---

## Deployment Note
The `data/` folder must be mounted as persistent storage in Docker/Kubernetes.