GDS — catalog componente (oameni + agenți)

Catalogul canonic al paletei Constructor / pachetelor @gstack/*.

Registry: https://git.esempla.systems/govtech/gstack/gstyle/-/packages

Instalare

.npmrc

@gstack:registry=https://git.esempla.systems/api/v4/projects/581/packages/npm/
//git.esempla.systems/api/v4/projects/581/packages/npm/:_authToken=${NPM_TOKEN}

npm install @gstack/gds-core @gstack/gds-angular

import { GdsTableComponent, GdsSidenavComponent } from '@gstack/gds-angular';
import type { TableData, SidenavData } from '@gstack/gds-core';

Accent la root: :root { --gds-accent: var(--gds-accent-indigo); }
(indigo | emerald | amber | rose | blue | teal) — vezi global-styles.md.

Fiecare paletă definește primary / secondary (fundal), text normal / text white, și stări positive (verde) / neutral (galben) / negative (roșu).
blue = stil GLog (shell deschis + accent #1d4ed8).

Reguli pentru agenți

1. Contractele de date sunt doar în @gstack/gds-core (blocks.ts).
2. Importă componente standalone din @gstack/gds-angular — doar ce folosești.
3. Nu hardcoda culori; folosește tokens / --gds-accent.
4. Canvas: gds-shell / gds-block. Pagină manuală: leaf gds-*.
5. Citește components/web/<slug>/<slug>.md înainte de a folosi o componentă.
6. Tema pe canvas (accent, font, bordură, lang, artboard) → global-styles.md — pe project.meta, nu pe blocuri.

STRUCTURE

Paletă	Selector	BlockKind	Rol
Sidenav	gds-sidenav	—	Opțional. Header · Menu · Footer — fiecare slot brand/profil: iconiță, titlu, subtitlu.

BLOCKS

Paletă	Selector	BlockKind	Rol
KPI row	gds-kpi-row	kpi-row	Rând de carduri KPI (≥1, fără plafon): etichetă, valoare, iconiță colț, delta opțional, accent pe un card.
Bar chart	gds-bar-chart	bar-chart	Grafic bare verticale.
HBar chart	gds-hbar-chart	hbar-chart	Grafic bare orizontale.
Line chart	gds-line-chart	line-chart	Sparkline linie, opțional cu arie umplută.
Donut chart	gds-donut-chart	donut-chart	Inel (donut) cu legendă — pentru distribuții.
Table	gds-table	table	Tabel: Aspect · Columns · Rows — căutare, filtru pe status, detalii pe rând.
Table Data	gds-table-data	table-data	Clonă separată a tabelului (TableDataData), evoluează independent de table.
Form	gds-form	form	Formular mock: câmpuri text / select / toggle + buton submit (UI, fără submit real).
Alertă	gds-alert	alert	Banner inline cu severity: info / warning / success / error.
Alert modal	gds-alert-modal	alert-modal	Dialog centrat de confirmare (warning callout + Anulează / Confirmă).
Activity	gds-activity	activity	Listă/feed de evenimente (opțional stil GLog: badge, meta, tag).
CTA banner	gds-cta	cta-banner	Banner CTA pe accent, cu 1–2 butoane.
CTA card	gds-cta	cta-card	Card CTA bordurat, cu 1–2 butoane.
Search bar	gds-search	search	Bară de căutare cu buton și chips de filtre rapide.
Top bar	gds-topbar	topbar	Bară superioară web: breadcrumb, segmente, notificări, profil (GLog).
Top bar control	gds-topbar-controll	topbar-controll	Clonă topbar: același chrome (breadcrumb, segmente, notificări, profil).
Top bar menu	gds-brand-bar	brand-bar	Bară brand: iconiță, titlu, versiune, subtitlu, nav opțional + status integrare; tone surface/primary/ink.
Antet pagină	gds-page-header	page-header	Antet: titlu, descriere și badge status (ex. în timp real).
Footer minimal	gds-site-footer	site-footer	Footer: copyright / legal; opțional marcă + titlu și panou ink; lipire jos opțională.
Navigare site	gds-site-nav	site-nav	Bară portal: marcă, linkuri, chip wallet, limbă, CTA, user.
Hero	gds-hero	hero	Bandă marketing: badge, titlu, text, card căutare (label/hint), statistici.
Metode de plată	gds-method-list	method-list	Listă metode selectabile cu radio (card / portmoneu / terminal).
Chitanță	gds-receipt	receipt	Chitanță plată: cod, câmpuri, total, acțiuni PDF / istorie.
Portmoneu	gds-wallet-card	wallet-card	Card sold e-wallet cu buton alimentare.
Coloane arhitectură	gds-arch-cols	arch-cols	Panou coloane pe straturi: antet + itemi cu punct/notă.
Autentificare	gds-auth-gate	auth-gate	Poartă login: Sign in / Sign up, inputuri, Login / Register cu link pagină opțional.
Autorizare dispozitiv	gds-device-auth	device-auth	Model + IMEI + buton Authorize (stil Auth gate, o stare).
Profil utilizator	gds-user-profile	user-profile	Profil: avatar, nume, rol, email opțional și buton Logout.
Card	gds-card	card	Card de conținut atomic (marcă, titlu, status, text, meta, stats, acțiune).
Antet secțiune	gds-section-header	section-header	Titlu + text opțional / contor / acțiune — fără conținut sau grilă.
Card detaliu	gds-detail-card	detail-card	Detaliu entitate: înapoi, câmpuri, etichete, CTA.
Image	gds-image	image	Imagine sau placeholder stilizat, cu ratio, colțuri rotunjite și caption.
Video	gds-video	video	Player video mock (poster + play/progress) — UI, nu redare reală.
Progres bare	gds-progress	progress-bars	Bare de progres etichetate (0–100%).
Progres inele	gds-progress	progress-rings	Inele conice de progres (0–100%).
Progres pași	gds-progress	progress-steps	Tracker pe pași (finalizat / neînceput).
FAQ	gds-faq	faq	Listă FAQ tip accordion (întrebare / răspuns).
Slider	gds-slider	slider	Carusel de slide-uri (titlu, text, imagine opțională) cu săgeți, dots, autoplay.
Chat widget	gds-chat	chat	Widget de chat flotant: buton launcher + panou cu mesaje mock bot/user.
Jurnale de log	gds-log-journal	log-journal	Panou GLog: filtre, severitate, expand + integritate (Preview/export interactive).
Rutare evenimente	gds-log-routing	log-routing	Grupă evenimente: activare globală, toggle per rând, destinații LOCAL / GLOG (itemi dinamici).
Taburi	gds-tabs	tabs	Bandă de taburi subliniate (etichetă + count opțional).
Pipeline ciclu	gds-pipeline	pipeline	Etape orizontale lifecycle: etichetă, contor, detaliu, ton.
Termene	gds-deadline-list	deadline-list	Listă termene: badge zile + subiect + ref mono.
Notificări	gds-notification-list	notification-list	Inbox notificări: citite/necitite, icon, acțiune.
Toast	gds-toast	toast	Snackbar flotant de confirmare.
Teanc notificări	gds-toast-stack	toast-stack	Teanc de notificări în colț: titlu, text, linie meta, auto-închidere și „×”.
Niveluri de log	gds-log-levels	log-levels	Niveluri TRACE…ERROR per modul (select colorat).
Filtre chips	gds-filter-chips	filter-chips	Chips categorie / rol sau control segmentat (Cards / Tabel).
Butoane filtru	gds-filter-buttons	filter-buttons	Butoane colorate tip/categorie (tone soft → solid), cu count și output select.
Listă sarcini	gds-task-list	task-list	Sarcini / rezoluții: mod compact dashboard sau carduri complete cu prioritate și termen.
Card toggle	gds-toggle-card	toggle-card	Un singur card metodă cu switch on/off.
Hartă GPS	gds-map-canvas	map-canvas	Panou schematic cu pini GPS (%).
Hartă GPS (Leaflet)	gds-gps-map	gps-map	Hartă reală + detaliu pe aceeași înălțime (flat).
Card rol	gds-role-card	role-card	Titlu + contor + listă bullet (roluri / capacități).
Timeline	gds-timeline	timeline	Pași verticali cu badge (flux autentificare browser).
Endpoint-uri API	gds-api-endpoints	api-endpoints	Listă REST: badge metodă HTTP + cale mono (+ description?).
Panou cod	gds-code-panel	code-panel	Panou snippet mono (ink / surface) cu notă opțională.
Listă acțiuni	gds-action-list	action-list	Rânduri cu icon, titlu/text, meta opțional și buton de acțiune.
Încărcare fișier	gds-file-upload	file-upload	Dropzone import Excel + preview fișier validat (mock).
Butoane	gds-button-row	button-row	Rând variante buton (primary / secondary / ghost / danger / icon).
Badge & status	gds-badge-row	badge-row	Status, rol, mono, contor.
Mostre culoare	gds-swatches	swatches	Carduri token de culoare (fundații).
Comparație	gds-compare	compare	Tabel două coloane (înainte/după, mapare).
Spațiere & raze	gds-space-scale	space-scale	Scară vizuală spațiere sau raze.
Drawer	gds-drawer	drawer	Panou lateral: antet, taburi, câmpuri/istoric/acțiuni.

Helpers (nu apar ca blocuri separate în paletă)

Nume	Selector	BlockKind	Rol
Block (dispatcher)	gds-block	any	Afișează un singur bloc după `block.
Shell	gds-shell	—	Shell: sidenav opțional + toate blocurile dintr-un GdsMockDoc.

Constructor — proiect / canvas

Ghid	Rol
Projects	Biblioteca multi-proiect: create / rename / switch / delete, LibraryFile, GdsProject, persistence localStorage only.
Pages	Creare / modificare / ștergere pagini web (GdsPage, DocStore, MAX_PAGES) + page workflows + mod orchestrat paralel — pentru agenți AI și autori.
Global Styles	Accent, font, bordură, lang, artboard pe GdsProject.meta + mapare CSS / DocStore (agenți + autori).
Layout structural	Grila de 12 coloane, content area, span-uri, pairing, ritm vertical și validare pentru agenți.
Design quality	Rubrică observabilă pe screenshot (aliniere, spațiu mort, ierarhie, responsive) + design-quality.json pentru review agenți.
AI design rules	Regulile hard (RULE.*) injectate în fiecare tur al agentului: ordine, geometrie, sizing, date, proces — cu marcaj enforced / checked.
AI designer checklist	Auto-critică după fiecare mutație (footer, auth, IA one-job, lățimi) + rețete Utilizatori / Configurare.

Flutter

Paleta mobilă Constructor (FLUTTER_BLOCK_KINDS): header, bottom-menu, auth-gate, device-auth + 50+ atomi nativi — vezi flutter.md, projects/gds-core/src/lib/flutter-catalog.ts, și docs per slug în components/mobile/<slug>/<slug>.md.