# JSON DevTools

Kompletný jednostránkový nástroj na prácu s JSON-om pri vývoji REST API.
Bez frameworkov, bez npm, bez build procesu a bez backendu.

**Formatter · Tree viewer · Diff · API Request builder · História**

---

## Ukážky

### Formatter — živá validácia a syntax highlighting

![Formatter](docs/Screenshot-Formatter.png)

Vľavo vstup, vpravo zvýraznený výstup. Chyba vo vstupe sa zobrazí s presným
riadkom, stĺpcom a výrezom textu.

### Tree viewer — typy, počty položiek, JSONPath

![Tree](docs/Screenshot-Tree.png)

Strom zobrazuje typ každej hodnoty (`string`, `number`, `boolean`, `null`) a počet
položiek objektov/polí (`{6}`, `[5]`). Každý uzol sa dá skopírovať ako **JSONPath**
alebo ako **konkrétna hodnota**.

### API Request builder — stav, trvanie, headers, odpoveď

![API Request](docs/Screenshot-API-Request.png)

Status, trvanie požiadavky, response headers a automaticky naformátovaná JSON
odpoveď. Pri chybe CORS sa zobrazí podrobné vysvetlenie príčiny.

---

## Spustenie

Aplikácia je čisto statická — otvorte **`src/index.html`** priamo v prehliadači
(dvojklikom) a všetko beží lokálne.

Voliteľne cez lokálny server (odporúčané, ak chcete testovať `fetch()` proti
API s CORS z `http://localhost`):

```bash
python -m http.server 8080 --directory src
# potom otvorte http://localhost:8080/
```

> Otvorenie cez `file://` funguje, ale prehliadač považuje pôvod stránky za `null`
> — časť API (hlavičky, CORS) môže byť obmedzená. Aplikácia v tom prípade zobrazí
> podrobné vysvetlenie.

---

## Štruktúra repozitára

```
JSONdevTools/
├── src/                          # samotná aplikácia (jediný adresár, ktorý sa publikuje)
│   ├── index.html                # štruktúra UI (5 panelov, ARIA role, modál skratiek)
│   ├── style.css                 # tmavý / svetlý motív, responzívne rozloženie, resizable panely
│   └── app.js                    # celá logika (vanilla ES6+), bez závislostí
├── tests/
│   └── logic.test.js             # Node testy logiky (bez prehliadača)
├── docs/
│   ├── Screenshot-Formatter.png
│   ├── Screenshot-Tree.png
│   └── Screenshot-API-Request.png
├── AGENTS.md                     # projektové pravidlá pre AI agenty
├── LICENSE
└── README.md
```

---

## Nástroje

### 1. Formatter
* Vloženie JSON textu, načítanie súboru (tlačidlo alebo pretiahnutie myšou)
* Živá validácia s presnou hláškou chyby: **riadok, stĺpec, pozícia, výrez textu**
* Pretty print (2 medzery) / Minify
* Kopírovanie výsledku, stiahnutie `.json` súboru
* Syntax highlighting výstupu

### 2. Tree
* Rozbaľovanie / zbaľovanie uzlov, zobrazenie typov a počtu položiek (`{6}`, `[5]`)
* Vyhľadávanie v kľúčoch aj hodnotách, zvýraznenie zhôd, automatické rozbavenie
  rodičov zhôd
* Kopírovanie **JSONPath** (`$.user.roles[1]`) a **konkrétnej hodnoty** uzla
* Ovládanie klávesnicou: `↑`/`↓` pohyb, `→`/`←` rozbaliť/zbaliť, `Enter`/`Space`
  prepnúť, `C` kopírovať hodnotu, `P` kopírovať path

### 3. Diff
* Dva editory vedľa sebe (A = pôvodné, B = nové)
* Rekurzívne porovnanie vnorených objektov a polí
* Rozdiely: **pridané / odstránené / zmenené** (vrátane zmeny typu) s JSONPath
* Súhrnný počet rozdielov, kopírovanie výsledkov porovnania ako JSON

### 4. API Request
* Metódy `GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS`
* URL endpointu, query parametre, vlastné HTTP hlavičky
* Autentifikácia: Bearer token alebo Basic (`user:heslo`)
* JSON request body (s formátovaním / minifikovaním)
* `fetch()` s 30 s timeoutom, meranie trvania, zobrazenie HTTP statusu
* Response headers, automaticky naformátovaná JSON odpoveď, surový text pri
  neplatnom JSON
* Detailné vysvetlenie **CORS** chýb (chýbajúca hlavička, preflight, `file://`,
  DNS, proxy) s návrhmi riešenia

### 5. História
* Posledných **20 JSON dokumentov** a **20 API požiadaviek**
* Ukladá sa do `localStorage`
* Vymazanie jednotlivých záznamov aj celej historie
* **Citlivé údaje sa neukladajú**: hlavička `Authorization`, `Cookie`, `X-Api-Key`
  sa z záznamu vymaže, tokeny žijú iba v pamäti stránky

---

## Klávesové skratky

| Skratka | Akcia |
|---|---|
| `Ctrl+Shift+F` | Pretty print |
| `Ctrl+Shift+M` | Minify |
| `Ctrl+Shift+C` | Kopírovať výstup |
| `Ctrl+Shift+O` | Otvoriť JSON súbor |
| `Ctrl+S` | Stiahnuť JSON súbor |
| `Ctrl+Enter` | Odoslať API požiadavku |
| `Ctrl+Shift+D` | Prepnuť motív |
| `Ctrl+Shift+K` | Focus na vyhľadávanie v strome |
| `Ctrl+Shift+X` | Vyčistiť aktuálny editor |
| `1` … `5` | Prepnutie nástroja (mimo textových polí) |
| `?` | Zoznam skratiek |
| `Esc` | Zavrieť okno / zrušiť vyhľadávanie |

Na macOS použite `Cmd` namiesto `Ctrl`.

---

## Príkazy

```bash
node tests/logic.test.js   # testy logiky – 93 assertov, bez prehliadača
```

Testy nepoužívajú žiadny prehliadač ani externé závislosti: `app.js` sa načíta
do izolovaného `vm` kontextu s minimálnym DOM stubom a overuje sa diff algoritmus,
sanitizácia historie, cesty uzlov, syntax highlighting a konzistencia ID medzi
HTML a JavaScriptom.

---

## Bezpečnosť a súkromie

* Aplikácia je čisto statická — žiadne CDN, žiadne externé závislosti.
* Údaje sa nikam neposielajú, **okrem API požiadaviek, ktoré sám spustíte**
  na URL, ktorú zadáte vy.
* Všetko (história, motív, šírky panelov) sa ukladá lokálne v `localStorage`.
* Pre zapnutie svetlého motívu jednorazovo cez URL: `src/index.html?theme=light`.