Quantum stack

O înregistrare citită ca quante: fiecare quantă e un fapt etichetă–valoare. Perechile care țin împreună împart un card, cardurile se stivuiesc. Clasele stau peste clasele DS — .list-group, .list-row.value, .btn.link — și le schimbă doar unde o quantă diferă, deci orice alt rând de listă rămâne pe aspectul lui din List row. Un fapt a cărui valoare are nevoie de toată lățimea — o cronologie, o propoziție — e un .quantum-block: cardul lui, eticheta deasupra. Formalizat din Dublin (shared/dublin-ui/quantum-stack.tsx), regulă cu regulă.

.quantum-stack                       div  · coloană, 10px între grupuri
└─ .list-group.quantum-group         dl   · un card alb, --r-lg, 8px sus și jos, fără linii
   └─ .list-row.value.quantum-pair   div  · rând de 40px, eticheta stânga, valoarea dreapta
      ├─ .list-row-title             dt   · eticheta — 14px, fog, 400
      └─ .list-row-value             dd   · valoarea — 14px, ink, 500, se rupe dacă e lungă
         └─ .btn.link.quantum-action a / button · când valoarea e o acțiune — roz, 500, icon 16px
└─ .list-group.quantum-block         dl   · un fapt pe toată lățimea, cardul lui, frate al grupurilor
   ├─ .quantum-block-label           dt   · eticheta DEASUPRA — 14 / 22px, fog, 400
   └─ .quantum-block-body            dd   · corpul, la 8px — text (14px, ink, 500) sau o .timeline

Stiva din dialogul unei cheltuieli, pe suprafața dialogului (bej-1). Fiecare fapt e un grup al lui, în afară de tipul documentului și documentul însuși, care țin împreună. În dialog: Record view.

Stiva din dialogul unei facturi. Viața facturii nu încape la dreapta unei etichete, deci e un .quantum-block: cardul lui, eticheta deasupra în același fog de 14px ca perechile (nu eticheta de 11px majuscule), iar corpul — o Timeline — pe toată lățimea. Blocul stă în stivă între grupuri, la aceiași 10px.

Ce pui în valoare decide cum se citește — nu există variantă de ținut în pas cu conținutul. Informația (un text, o sumă, un <time>, un .badge) e ink la 14px / 500. O acțiune e .btn.link.quantum-action: roz, aceeași mărime și greutate ca o valoare text, cu un icon Lucide opțional înaintea etichetei — un <a> pentru o descărcare sau o pagină, un <button> pentru o acțiune pe loc. Doar linkul e ținta; rândul rămâne inert, așa că un grup poate amesteca rânduri de informație și de acțiune.

Rândul unei quante are 40px, în 8px de padding de card, fără linie între rânduri. Un grup cu un rând păstrează deci cei 56px ai rândului DS (40 + 2 × 8), iar perechile din același grup stau la 40px, despărțite doar de spațiu — un card de două rânduri are 96px și se citește ca o unitate lângă cardurile de 56px. Gruparea o fac golul de 10px dintre carduri și hairline-ul cardului.

O pereche își pune valoarea la dreapta etichetei. Unele valori au nevoie de lățimea cardului: o cronologie, o propoziție. .quantum-block e tot un fapt etichetă–valoare — un <dl> cu un <dt> și un <dd> — dar eticheta stă deasupra, iar corpul dedesubt, la 8px, în 16px × 20px de card. Un corp text se citește ca o valoare (14px / 500, ink) și se rupe; o Timeline își pune singură tipografia. Cardul lui, nu un rând într-un grup: lângă perechi, în același card, ar avea nevoie de o linie, iar grupurile n-au.

.list-row-value e nowrap pentru cifre. Într-o quantă valoarea ia white-space: normal și min-width: 0, iar eticheta flex-shrink: 0: o adresă lungă se rupe pe mai multe rânduri în loc să împingă eticheta afară. O sumă își păstrează propriul nowrap.