# DS audit — page-layout réteg

**Dátum:** 2026.05.21
**Tárgy:** A `urbino-mgr` admin felület első 4 mock-screenjének megépítése során
felszínre került design-system gapek és bugok.
**Hatás:** Bárki, aki manager-screent épít, jelenleg **kénytelen inline-magic-numbereket
írni**, mert a deklarált page-layout réteg nem működik.

---

## TL;DR

Három baj van, egy patch-csomagban javítható:

1. **Bug.** A `tokens/README.md` (Layer 2 felsorolás) és a `components/layout.css`
   szerint létezik `--u-page-px`, `--u-page-py`, `--u-page-max-w`, `--u-sidebar-w`
   token. **A `tokens/semantic.css`-ben egyik sincs definiálva** — a
   `.u-page` osztály ezért jelenleg *nem csinál semmit*: a `max-width: var(--u-page-max-w)`
   üresre oldódik, a böngésző elhagyja, és minden screen full-width lesz.
2. **Hiány.** A `docs/spacing.md` §4.2 *("Max content widths")* négy szám-kategóriát
   nevez meg (manager canvas, citizen web, modal, detail-view), de a négyből
   **csak kettő** *(modal width-sm/md/lg)* van CSS-classba fordítva. A manager
   canvas (1280) és a detail-view (1280 + 320 sidebar) ad-hoc inline-stílussal
   épül minden screenen, ami szétszórja a számokat *(saját mockjaim: 1280 / 1320 / 1320)*.
3. **Hiány — új koncepció.** Az űrlap-orientált screenek *(Beállítások, hír-szerkesztő,
   program-szerkesztő, info-szerkesztő)* keskenyebb content-szélességet kívánnak
   *(720–960 px az olvashatóságért, lásd `docs/spacing.md` §5.2 form-recipe)*.
   A jelenlegi DS-ben ehhez **nincs név**. A saját Beállítások-mockom 960-at használt
   "ránézésre" — pont az a fajta ad-hoc döntés, amit a `spacing.md` §1
   szabálya tilt.

---

## A bug részletesen

### A jelenlegi állapot

`components/layout.css` 142. sortól:

```css
.u-page {
  width: 100%;
  margin-inline: auto;
  padding: var(--u-page-py) var(--u-page-px);
  max-width: var(--u-page-max-w);
  box-sizing: border-box;
}
```

A három `var()` egyikére sincs `:root` szintű definíció. Ellenőrzés:

```bash
grep -r "u-page-max-w:" tokens/      # → No matches found
grep -r "u-page-px:"    tokens/      # → No matches found
grep -r "u-page-py:"    tokens/      # → No matches found
grep -r "u-sidebar-w:"  tokens/      # → No matches found
```

A `tokens/README.md` mindenesetre a Layer 2-listán (semantic):

> **Layout:** `--u-page-px`, `--u-page-py`, `--u-page-max-w`, `--u-sidebar-w`

### Mi a hatás

A `.u-page` osztály jelenleg gyakorlatilag csak `width: 100%; margin-inline: auto`
— a padding és max-width nem érvényesül. A `--u-page-px` várt értékét
*(24 px manager / 16–32 px citizen)* a `.u-page--cit-mobile` és `.u-page--cit-web`
variánsok **felülírják saját értékkel**, ami működik — de a default manager-eset
csak `padding: 0` lesz.

Ezért a `Urbino Manager.html` mockok inline `style={{ maxWidth: 1280, margin: '0 auto' }}`-vel
építkeznek. Ez **nem a fejlesztő hibája, a DS hibája**.

---

## Mit változtat a patch

| Fájl | Változás | Layer |
|---|---|---|
| `tokens/semantic.css` | **Új** `LAYOUT` szekció: `--u-page-px`, `--u-page-py`, `--u-page-max-w`, `--u-page-max-w-form`, `--u-page-max-w-detail`, `--u-sidebar-w`, `--u-detail-sidebar-w` definiálva | 2 |
| `tokens/world-cit.css` | **Új** `--u-page-px` és `--u-page-max-w` override-ok (a `world-cit.css`-be illeszkedik a meglévő mintával) | 3 |
| `components/layout.css` | **Új** `.u-page--detail` (grid: `1fr 320px`) és `.u-page--form` (max-width: form-w) osztályok. A meglévő `.u-page--mgr` változatlan | — |
| `docs/spacing.md` | §4.2 tábla bővül a "form" sorral, és minden sor mellé bekerül a megfelelő CSS-class | docs |
| `preview/page-layout-templates.html` | **Új** specimen: vizuálisan mutatja az öt manager-template-et *(canvas / data / detail / form / dense)* | preview |

**Új token-érték nincs** — minden szám már szerepel a `docs/spacing.md`-ben.
A patch egyszerűen **codifálja** azt, amit a docs már kimond.

---

## Mi az "egyedi komponens" javaslat

A 4 mock-screen mockolása közben **három olyan vizuális minta** lett összeálítva,
ami a DS-ben még nincs, de ismétlődni fog a többi screenen is. **Nem ennek a
patchnek a része** — egy következő iterációban érdemes a DS-be felvenni:

| Minta | Hol használtam | Javaslat |
|---|---|---|
| **`u-status-track`** — 4-lépéses állapot-csík az adatlap tetején | Bejelentés-adatlap | DS-component, mert a `Ticket`-állapotgép vizualizációja minden Ticket-detail screenen ismétlődik *(spec: `02_globalis_allapotgep.md`)* |
| **`u-kpi-card`** — nagyméretű KPI-kártya tabular-nums + lefúrás-affordancia | Dashboard | DS-component, mert riportokban és tartalmi statisztikákban is ismétlődni fog |
| **`u-tabs--underline`** | Bejelentés-lista | A meglévő `tabs.css`-ben **pill-tab** van; ide hozzáadható egy `--underline` variáns (a `chrome/list/tabs` minta szerint) |

Ezeket nem itt javítjuk — flag-elésnek szánom, hogy a következő DS-iterációban
felvegyetek. Addig **lokális komponensként** működnek a manager-projektben.