# Stack technologiczny

## Główne technologie

| Warstwa | Technologia | Dlaczego |
|---------|-----------|----------|
| **Renderowanie** | Skia CanvasKit WASM | Ten sam silnik co Figma — sprawdzona wydajność, akceleracja GPU, idealny piksel |
| **Framework UI** | Vue 3 + VueUse | Reaktywne API kompozycji, doskonałe wsparcie TypeScript |
| **Komponenty** | Reka UI | Bezgłowe, dostępne prymitywy UI (drzewo, suwak, itp.) |
| **Stylowanie** | Tailwind CSS 4 | Utility-first, szybka iteracja, ciemny motyw |
| **Layout** | Yoga WASM | Silnik CSS flexbox od Mety, sprawdzony w React Native |
| **Format pliku** | Kiwi binarny + Zstd | Własny format Figmy — kompaktowy, szybkie parsowanie, kompatybilny z .fig |
| **Współpraca** | Trystero + Yjs | P2P WebRTC przez sygnalizację MQTT, sync CRDT, persystencja y-indexeddb |
| **Kolor** | culori | Konwersje przestrzeni kolorów (HSV, RGB, hex) |
| **AI/MCP** | MCP SDK + Hono | 90+ narzędzi dla kodowania AI, transporty stdio + HTTP |
| **JSX Transform** | Sucrase | 201 KB JSX → JS, synchroniczny, kompatybilny z przeglądarką |
| **Zdarzenia** | nanoevents | 108 bajtów, typowany emitter zdarzeń dla mutacji SceneGraph |
| **JSX Transform** | Sucrase | 201 KB JSX → JS, synchroniczny, kompatybilny z przeglądarką |
| **Zdarzenia** | nanoevents | 108 bajtów, typowany emitter zdarzeń dla mutacji SceneGraph |
| **JSX Transform** | Sucrase | Lightweight (201 KB) JSX → JS, synchronous, browser-compatible |
| **Events** | nanoevents | 108 bytes, typed event emitter for SceneGraph mutations |
| **Desktop** | Tauri v2 | ~5 MB natywna aplikacja (vs ~100 MB Electrona), backend Rust |
| **Build** | Vite 7 | Szybki HMR, natywne moduły ES |
| **Testowanie** | Playwright + bun:test | Regresja wizualna (E2E) + szybkie testy jednostkowe |
| **Linting** | oxlint | Oparty na Rust, rzędy wielkości szybszy niż ESLint |
| **Formatowanie** | oxfmt | Formater oparty na Rust |
| **Weryfikacja typów** | typescript-go (tsgo) | Natywna implementacja w Go sprawdzania typów TypeScript |

## Główne zależności

```json
{
  "canvaskit-wasm": "^0.40.0",
  "vue": "^3.5.29",
  "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
  "nanoevents": "^9.1.0",
  "sucrase": "^3.35.1",
  "reka-ui": "^2.8.2",
  "tailwindcss": "^4.2.1",
  "culori": "^4.0.2",
  "fzstd": "^0.1.1",
  "fflate": "^0.8.2",
  "trystero": "^0.20.0",
  "yjs": "^13.6.24",
  "y-indexeddb": "^9.0.12"
}
```

## Dlaczego nie...

### Dlaczego nie renderowanie SVG?

SVG jest wolny dla złożonych dokumentów. Każdy węzeł to element DOM — 10 000 węzłów oznacza 10 000 elementów DOM z narzutem layoutu, rysowania i kompozycji. CanvasKit rysuje wszystko na jednej powierzchni GPU.

### Dlaczego nie Electron (jak Figma desktop)?

Tauri v2 używa systemowego webview (~5 MB) zamiast pakowania Chromium (~100 MB). Backend Rust zapewnia natywną wydajność dla I/O plików i integracji systemowej.

### Dlaczego nie React?

Projekt migrował z Reacta do Vue 3 na wczesnym etapie. System reaktywności Vue i composable VueUse okazały się bardziej ergonomiczne.

### Dlaczego nie własny silnik layoutu?

Yoga jest utrzymywana przez Metę, przetestowana na miliardach urządzeń React Native i implementuje specyfikację CSS flexbox.

## Planowane technologie

| Technologia | Cel | Faza |
|-----------|---------|-------|
| CSS Grid w Yoga | Auto layout oparty na siatce | ✅ Obsługiwane przez [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) |