# Urbino public-spa · átadó-csomag
**Egyirányú export a kanonikus design-forrásból** — generálva: **2026. 10. 05.** (37. kör — karbantartó utókör: lábléc-kánon, Kilépés csak az avatar-menüben, „Mégsem” fókusz-fejléc, katalógus-szövegek, hiányzó állapot-keretek; a mockok szerkezetileg újragenerálva)
Belépő: **`00-index.html`**.
> **A fejlesztés forrása a spec.** Az `urbino-docs` repó `apps/polgari-web/spec/` két feature-specje (`10_publikus_oldalak_es_seo.md` · `20_webes_capture_es_koveto_oldal.md`, **v2.0 — implementálható**) a kötés; **ütközésnél a spec dönt**, ez a csomag vizuális és viselkedési referencia. A szövegek kanonikus katalógusa a spec-rétegben él: `apps/polgari-web/spec/i18n/hu.json`.
>
> **A v1-ből kimaradó, megtervezett modulok** (nincsenek a csomagban): kérdőív + lakcím és lakcím-kapu (SF-140) · átlátható költségvetés (SF-144) · online-program helyszín-változat (SF-142) · fiókos „Várt települések” sor (SF-138) · demó-kérés űrlap (SF-141 — helyette „Demót kérek” e-mail-gomb).
A képernyő-szintű igazság a design-projekt `.dc.html` munkafájljaiban él (élő Tweaks + komment-horgonyok); ezt a csomagot **nem szerkesztjük kézzel** — javítás a forrásban, majd re-export.
---
## ⚠ A csomag vizuális referencia, NEM kódkiindulás
A `preview/screens/*.html` mockok és az `export/` PNG-k egyetlen kérdésre válaszolnak: **minek hogyan kell kinéznie, és milyen állapotai vannak.** Inline-stílusú, fixture-beégetett JSX-et tartalmaznak, mert a mock célja a pixel-hű snapshot — ez a forma a termék-kódban **káros**.
**A kód az `urbino-docs` spec alapján készül**, az Urbino design systemre építve. A `KONTRAKTUS.md` és az `ATADAS.md` **ebben a körben nem része az exportnak** — a 37. kör döntései (fejléc-kontextus, lábléc-kánon, Kilépés, fókusz-fejléc) a spec 20 4.5c-jében kanonikusak; a dobozban a spec-oldalon tartott, tisztított példány marad érvényben (ha kell), a reszponzív kontraktus a W11-ben él:
1. **Stílus-sorrend:** DS-osztály (`u-btn`, `u-card`, `u-chip`…) → DS-token (`var(--u-*)`) → nyers px **csak geometriára**. A mockok inline `style` objektumait ne portold; a DS-atomokat ne építsd újra.
2. **Szöveg:** minden string a spec-réteg katalógusából jön (`apps/polgari-web/spec/i18n/hu.json`, 555 kulcs, `{{param}}` alak). Beégetett magyar string a kódban nincs; ez a csomag szövegkatalógust nem tartalmaz.
3. **Adat:** a `fixtures/demo.json` az első képernyő backend nélküli rendereléséhez van — a mezőnkénti láthatóság (publikus / own / soha) a kontraktusban **kötött**.
4. **Viselkedés:** ami a keretből nem látszik (route-ok, megőrzött állapot, állapotgépek, reszponzív lépcsők), azt a két feature-spec adja; a reszponzív kontraktus táblái a W11 mockban (és a `Reszponzív nézetek.dc.html` t29 szakaszában) állnak.
Ugyanez igaz a design-projekt `Prototípus.dc.html` fájljára: generált kivonat, emberi bejáráshoz — **nem** kód-referencia, és nem része ennek a csomagnak.
---
## Mi van benne
```
00-index.html belépő-oldal (bemenetek + screen-lista + kánon-emlékeztető)
README.md ez a fájl
fejlesztoi-bemenetek/ demó-adat a design-projektből (a KONTRAKTUS/ATADAS a 37. körben kivezetve az exportból — a spec a forrás)
fixtures/demo.json demó-adatkészlet láthatósági jelöléssel + a három időhorgony
design-canvas.jsx DesignCanvas + DCSection + DCArtboard (mock-állvány — nem termék-kód)
design-system/ Urbino DS másolat (tokens · components · fonts) + OLVASS-EL.md (ütközés-jegyzet)
public-spa-system/
data/mock.js chrome-mock + fixture-kánon (TENANT · CURRENT_USER · RAIL_COUNTS · ANCHORS · STATUS · CATEGORIES · REPORTS)
organisms/
_styles.css organizmus-CSS (.cit-* prefix; keyframes + interakció-horgok)
icon.jsx Icon — Lucide inline SVG map (60 ikon, nincs CDN-függés)
chips.jsx StatusChip + CatChip — 4+2 badge-készlet a Továbbítva-val (ATADAS §5)
app-header.jsx CitHeader (publikus/fiók/belépés, popover-trigger település-chippel) + CitHeaderFocus (capture)
private-strip.jsx PrivateStrip — a kánon-szöveg szó szerint
account-rail.jsx AccountRail — sín-szabályokkal (üresnél nincs szám; skeleton-pill)
page-footer.jsx PageFooter — település-alak · gyökér-alak · egyszerűsített (/app, hibaoldalak); kompakt kivezetve, a capture-ön nincs lábléc (P-1)
case-timeline.jsx CaseTimeline — „Mi történt eddig” (DS status-timeline)
report-card.jsx ReportCard — publikus rács-kártya (hairline-os státusz- és kategória-chip)
assets/ logo-full/mark/mark-white.svg + balatonalmadi-legifoto.jpg
preview/screens/ W0–W15 screen-mockok (15 fájl — új: W14 /app, W15 jogi oldalak; a W7 és a W11b kivezetve, a reszponzív készlet egy fájlban)
export/ 139 PNG — a v1-hatókör keretei, screenenként mappázva
00-keret-index.md PNG ↔ keret-id ↔ forrásfájl leltár
```
## Használat
- Minden `preview/screens/*.html` önállóan megnyitható (React + Babel CDN-ről, pinned verzióval; a DS és az organizmusok helyi fájlok). A nagyobb fájlok (W3 · W8 · W11 · W11b) betöltése pár másodperc — a Babel a böngészőben fordít.
- Egy screen-fájl = a felület **összes kanonikus állapota** DesignCanvas-mátrixban (normál / üres / skeleton / hiba / lezárult …). A jobb felső zoom-váltó csak nézet.
- A **W0 app-chrome** katalógus az organizmusokat izoláltan mutatja, és tartalmazza a 14a fejléc-spec sávjait + a nyitott menüket (26a avatar-menü · 26b település-váltó).
- A **W11** hordozza a reszponzív **kontraktust** (transzformáció- és öröklés-tábla) és az archetípus-kereteket is (a korábbi W11b beolvadt). A lépcső-értékek kötöttek, a kiadás módja szabad.
- Az `export/` PNG-k a design-forrás keretei tweak-alapállapotban, segédvonalak nélkül (1920 → 0,5×, minden más natív).
## Konvenciók a screen-fájlokban
1. **4 blokk:** bundler-thumbnail → DS-CSS link-sor (organism-CSS utolsó) → screen-header banner (mock-only dokumentáció) → root + pinned script-sor + babel-blokk.
2. **Script-sorrend:** React/ReactDOM/Babel → `data/mock.js` → `design-canvas.jsx` → `organisms/icon.jsx` (mindig első organizmus) → többi organizmus függés-rendben.
3. **State-komponensek** (`StateNormal`, `State17f`, …) a kanonikus keretek 1:1 portjai; a közös chrome organizmus-hívás (``, `` …), minden más inline-stílusú JSX DS-osztályokkal.
4. **Tartalmi fixture-ök** inline élnek az állapotokban (snapshot-elv); a gépi készlet a `fejlesztoi-bemenetek/fixtures/demo.json`-ban, a chrome-kánon a `data/mock.js`-ben.
## Eltérések a design-forráshoz képest (tudatos)
- **Ikonok:** a `.dc.html` forrás helyi `assets/icons/*.svg` fájlokat húz; a csomag `Icon` organizmusa ugyanezeket inline SVG-ként, **currentColor**-ral adja (a DS-szabály szerinti, éles viselkedés). Árnyalatnyi tónus-eltérés a PNG-khez képest ebből jöhet.
- **Kép-slotok:** a design-fájlok drag-and-drop kép-helyei itt statikus placeholder-dobozok (`data-image-slot` attribútummal) — éles felületen valós fotó/asset kerül a helyükre. A **W13** hét slotja valós manager-app képernyőt vár (tartalmi input).
- **Saját chrome-mal dolgozó keretek:** a gyökéroldal és a B2B oldal fejléce/lábléce szándékosan más (3 menüpont, valós horgony-linkek), a mobil keretek (W11 · W11b) pedig önálló ≤900-as fejlécet használnak — ezeknél a markup inline marad, hogy a snapshot pontos legyen.
- **Annotált spec-keretek** (14a fejléc-spec): a szaggatott jelölő-vonalak a spec rajzai, nem UI-elemek.
- **A DS-másolat doc-kommentjei** helyenként régebbiek a projekt kánonjánál (`#BA-2026-…` azonosító, 4 lépcsős
életciklus, `.u-chip--elutasitva`). A CSS érvényes, a példaszövegek nem — részletek:
`design-system/OLVASS-EL.md`.
- **A mockok CDN-ről töltik a React/Babel fájlokat** (pinned verzió + SRI). Hálózat nélkül üres oldalt adnak;
ilyenkor az `export/` PNG-k a tarták. A DS, az organizmusok és az assetek helyi fájlok — azok offline is jók.
## Re-export
A csomagot a design-projekt export-pipeline-ja állítja elő a `.dc.html` forrásokból (frame → JSX, organizmus-cserével és forrás-összevetéssel), majd a PNG-ket keretenként exportálja. Változás esetén: a `.dc.html` forrást javítjuk, majd a teljes csomagot újrageneráljuk — **kézi patch a csomagban tilos.**