# SCREEN-CONVENTIONS — Urbino Manager · screen-mock konvenciók
**Dátum.** 2026.05.24 · **Forrás-állapot.** 28 screen-fájl a `manager-system/preview/screens/`-ben. **Cél.** A 9. lépés (átadási csomag) előtti vizuális és strukturális konvenciók dokumentálása. A Claude Code-átadás során ez a fájl mondja meg, "így van a 28 screen mintázva, így kell az új-screent is".
**Olvasási útmutató.** Minden szekció: **A konvenció** · **Miért így** · **Példa fájl(ok)**. Az `[eltérés]` blokk dokumentálja az explicit kivételeket; ezeket NEM hibaként, hanem indokolt különbségként kezeli.
> **Scope.** Ez a fájl **konvenció-dokumentum, NEM fix-up checklist.** A 28 meglévő screen-mock fizikai módosítását NEM írja elő (l. user-megbeszélés 2026.05.24: regresszió-kockázat + Claude Code Angular-portolás redundáns React-cleanup-pal). A meglévő inkonzisztenciák az AUDIT-2.md cleanup-listájában szerepelnek; ez a fájl ÚJ screen építéséhez ad mintát, NEM régi javításához.
---
## 1. Fájl-struktúra — a 4 kötelező blokk
Minden screen-mock-fájl 4 strukturális blokkból áll, ebben a sorrendben:
```html
Urbino Manager · S<N> — A<N> <Screen-név> (screen)
A
...
...
Spec:...mdDöntések: D-, ...
```
**Példa.** `a4-fooldal.html`, `a5-riportok-lista.html`, `a10-hirek-szerkeszto.html` — mind a 4 blokkot pontosan ebben a sorrendben hordozza.
---
## 2. CSS link-tag sorrend (KÖTELEZŐ)
**A konvenció.** A `` tag-eknek **ebben a sorrendben** kell betöltődniük:
```
1. design-system/colors_and_type.css (tokenek + alap)
2. design-system/components/layout.css (--u-page, .u-page--*)
3. design-system/components/.css (per-screen szükséges DS-component-ek)
— gyakori: avatar, breadcrumb, button, card, chip, dialog, form-field,
icon, input, list-tile, pagination, popover, table, tabs, toast
4. manager-system/organisms/_styles.css (MINDIG az utolsó)
```
**Miért így.** A CSS-cascade a sorrend-szerinti utolsó-deklaráció-wins elvét követi. A DS-szabályok először érvénybe lépnek (default-token-értékek), majd a manager-organism-szabályok felülbírálhatják a manager-specifikus mintákon. **Ha a `_styles.css` előbb betöltődik, a DS-tab-color override-okat a manager-cascade nem éri el.**
**Konkrét eset.** A `_styles.css` `.mgr-tab-filter` szelektor magyarázata az `[data-tone="overdue"]` modifierre — ezt a `tabs.css` `.u-tabs__count` szabályait felülírja. Ha a sorrend fordított, az overdue-dot szín nem érvényesül.
**Eltérés.** Az UX-explorer fájlok (`*-explorer.html`) kevesebb DS-component-css-t használnak — csak a `colors_and_type.css` + `layout.css` + esetenként 1-2 component, mert az inline `.ux-card__*` mockoknak nincs szükségük a teljes komponens-set-re. ✅
---
## 3. Script-src sorrend (KÖTELEZŐ)
**A konvenció.**
```
1. React + ReactDOM + Babel (UMD + integrity-hash, PINNED)
2. data/mock.js (chrome-mock: tenant + currentUser + navCounts)
3. design-canvas.jsx (DesignCanvas + DCSection + DCArtboard)
4. organisms/icon.jsx (MgrIcon — szinte minden organism függ tőle)
5. organisms/.jsx (függés-rendben — l. ORGANISMS.md "Cross-organism fogyasztások")
```
**Függés-rend szabályok** (AUDIT.md 4.1):
- `icon.jsx` mindig az **első** organism-script (MgrIcon-t minden más organism `window.Icon`-ként alias-ezi).
- `icon-picker.jsx` `category-tree-editor.jsx` ELŐTT (CTE fogyasztja az iconGlyph-et).
- `map-widget.jsx` `location-picker.jsx` ELŐTT (LP fogyasztja a MapWidget-et).
- `user-picker.jsx` `group-member-list.jsx` ELŐTT (GML edit-mode-ban beágyazva UP-t használ).
- `publish-state-chip.jsx` + `cover-image-uploader.jsx` + `rich-text-editor.jsx` + `photo-uploader.jsx` MIND `content-editor.jsx` ELŐTT.
- A többi: betűrendben, vagy a screen-fájl logikai csoportosítása szerint.
**Miért így.** A `Object.assign(window, ...)` exportok script-tag-sorrendben futnak; a fogyasztó wrapper-IIFE az `window.X`-et destrukturálva olvassa be — ha a fogyasztó előbb fut, `undefined`-et kap.
**Példa.** `a4-fooldal.html:215-225` mind a 8 organismet függés-rendben tölti: `icon → page-header → app-shell → user-chip → empty-state → status-track → kpi-card → team-performance-table`.
**Pinned-versions.** A React + ReactDOM + Babel SHA-384 integrity-hash-szel rögzített verziókat használ (`react@18.3.1`, `babel-standalone@7.29.0`). **Sose használj nem-pinned URL-t** (l. system-prompt React + Babel section); a Claude Code-átadáskor a fejlesztő ezt Angular-import-ra cseréli, de a mock-szinten kötelezően-pinned.
---
## 4. Screen-header pattern
**A konvenció.** Minden hi-fi screen-mock kötelezően kezdődik egy `` blokkal a `` tetején, a `