Toate componentele

Explorează toate cele 308 componente Lyra UI. Filtrează după familie, caută după nume și încearcă previzualizări interactive sau deschide un exemplu documentat.

Conversație și chat

Spațiu de lucru de agent — Structură controlată și responsivă pentru o conversație cu IA, care reunește transcrierea, compozitorul de mesaje și un panou opțional de detalii pentru rulare, instrumente, recuperare, fundamentare și context.
Vizualizator audio — Vizualizare a activității vocale desenată pe canvas, care reflectă starea unui agent: inactiv, ascultă, gândește sau vorbește.
Selector de variante — Navigator controlat «‹ n / m ›» între variantele regenerate sau editate ale unui același mesaj de chat.
Compozitor mesaje chat — Câmp de introducere a mesajelor de chat, cu redimensionare automată și controale integrate de trimitere și oprire
Mesaj chat — Structură de bulă de chat bazată pe rol, cu avatar, insigne și un subsol care reflectă starea
Zonă de derulare a chatului — Container de derulare a transcrierii care gestionează ancorarea la final, o pastilă „mergi la ultimul mesaj” și un separator pentru mesajele necitite.
Punct de restaurare — Punct de restaurare inline al conversației, cu confirmare înainte de restaurare, pentru a readuce chatul la o stare anterioară.
Bloc de cod — Afișare de cod delimitat (fenced), cu evidențiere de sintaxă opțională, încărcată leneș, și buton de copiere.
Bloc de cod (nucleu) — Afișare de cod optimizată pentru dimensiunea build-ului, care evidențiază sintaxa doar pe baza unei hărți de gramatică furnizate la compilare.
Element de conversație — Rând selectabil din istoricul conversațiilor, care afișează titlul, previzualizarea și marca temporală a unei sesiuni.
Stare generare — Afișează timpul scurs, tokenurile și debitul în timp ce răspunsul IA este transmis în flux.
Separator de preluare — Separator etichetat care marchează transferul controlului între agenți într-o transcriere.
Markdown — Randare securizată (sanitizată) de Markdown în HTML, cu tabele, cod și linkuri în stil GFM
Markdown (nucleu) — Randare de Markdown optimizată pentru dimensiunea build-ului, care evidențiază codul doar pe baza unei hărți de gramatică furnizate la compilare.
Acțiuni pentru mesaj — Bară de acțiuni per mesaj pentru un mesaj de chat, cu copiere, regenerare, editare și feedback integrate.
Feedback pentru mesaj — Evaluare cu degetul în sus/jos pentru un mesaj al asistentului, cu un panou opțional de detalii pentru motiv și comentariu.
Selectare model — Selector de furnizor și model, cu catalog fix sau introducere personalizată în text liber.
Panou setări model — Selector de model asociat cu un cursor de temperatură, pentru configurarea unui agent.
Apasă pentru a vorbi — Buton de captură a microfonului care preia întregul ciclu de viață de cerere a permisiunii, înregistrare și eliberare a resurselor, pentru utilizare prin apăsare susținută sau prin comutare.
Stare flux — Afișează faza unei singure conexiuni în flux, cu detectare a blocajelor bazată pe heartbeat.
Text în flux — Randează incremental textul în flux al asistentului, combinând actualizările rapide de tokenuri.
Text în flux (nucleu) — Randare de text în flux optimizată pentru dimensiunea build-ului, al cărei mod Markdown evidențiază blocurile de cod doar pe baza unei hărți de gramatică furnizate la compilare.
Chip-uri de sugestii — Rând derulabil de chip-uri cu prompturi inițiale sau de continuare, care transmite componentei gazdă textul selectat.
Listă de fire de discuție — Bară laterală de conversații, grupată și căutabilă, cu acțiuni pe rând de fixare, arhivare, ștergere și redenumire.
Flux de transcriere — Flux live de subtitrări pentru o sesiune vocală în desfășurare, cu trecerea de la text provizoriu la text final și derulare cu ancorare la final.
Indicator de scriere — Indiciu vizual de prezență care arată că asistentul compune un răspuns
Insignă de utilizare — Bandă compactă de tokenuri, cost și latență pentru un mesaj sau o rulare, cu o defalcare afișată într-un indiciu la survolare.
Selector de voce — Selector de voci TTS peste un catalog furnizat, cu previzualizare audio inline și gestionarea valorilor perimate.
Randare de widgeturi — Randează un arbore de widgeturi JSON declarative, transmis în flux de un agent, printr-un registru de corespondență tip-componentă restricționat la o listă albă.
Părți ale mesajului — Randează părți ordonate și intercalabile ale mesajelor IA folosind primitive pentru text, raționament, instrumente, citări, atașamente și media.
Introducere prompt — Combină redactarea promptului cu atașamente, selectarea modelului, vocii și surselor, mențiuni, comenzi și rânduri în așteptare.
Coadă de prompturi — Gestionează o coadă controlată de prompturi ulterioare care pot fi editate, reordonate, eliminate sau trimise imediat.
Sesiune în timp real — Oferă o interfață de sesiune vocală independentă de furnizor pentru conectare, activitate, transcriere, captură, dezactivarea sunetului și întrerupere.
Bară pentru selecție — Poziționează acțiunile de întrebare, citare, referențiere și copiere lângă textul selectat, păstrând ancora documentului.

Instrumente și observabilitate pentru agenți

Flux de activitate — Jurnal de activitate în flux continuu (doar adăugare) al acțiunilor detaliate ale unui agent, care se restrânge într-un rezumat al pașilor finalizați odată ce rularea se încheie.
Dashboard de evaluare a agenților — Vizualizare de ansamblu controlată a evaluărilor, care asociază carduri de metrici cu un grafic de tendință și cu istoricul stărilor pentru fiecare rulare.
Întrebare a agentului — Colectează un răspuns structurat la o întrebare a unui agent sau server MCP, cu acțiuni de acceptare, refuz și anulare.
Execuții în fundal — Afișează activitățile agenților gestionate de aplicație, aflate în așteptare, în curs sau încheiate, cu cereri de deschidere și anulare.
Indicator de buget — Afișează consumul furnizat în raport cu o limită, inclusiv stările indisponibil și depășit.
Revizuirea modificărilor — Examinează modificările fișierelor furnizate de aplicație și solicită decizia de păstrare sau eliminare pentru fiecare fragment.
Gestionarea conectorilor — Afișează starea conexiunii și solicită acțiuni de conectare, deconectare sau reîncercare pentru conectorii gestionați de aplicație.
Acordarea permisiunii — Prezintă o cerere de permisiune cu domeniu limitat și transmite aplicației alegerea utilizatorului de a permite sau refuza.
Reguli de permisiune — Afișează regulile de permisiune definite de aplicație și solicită modificarea deciziilor de permitere, confirmare sau refuz.
Rulare de agent — Înveliș principal pentru o rulare de agent, care arată starea, timpul scurs, pasul curent și costul, cu acțiuni de anulare și reîncercare.
Urmărire de agent — Vizualizare ierarhică a unei urmăriri de agent/LLM, cu filtre după tipul intervalului și salturi rapide la punctele de preluare, pe baza unui singur tablou de intervale partajat.
Coadă de aprobare — Coadă accesibilă de la tastatură a apelurilor de instrumente în așteptare, fiecare fiind revizuit și aprobat sau respins printr-un singur dialog comun.
Panou artefact — Structură în jurul unui artefact generat de agent, cu comutare previzualizare/cod, navigare între versiuni și acțiuni de copiere/descărcare.
Cadru de browser — Fereastră de vizualizare de tip „computerul agentului”, care afișează un flux de capturi de ecran, o adresă URL needitabilă și comenzi de preluare a controlului.
Card de commit — Rezumat compact al unui commit, cu statistici de modificări și schimbări pe fișier, care trimite către o vizualizare diff.
Panou de comparare — Comparație unul lângă altul a două răspunsuri (A/B), cu vot pentru câștigător, pentru evaluarea modelelor în stil arenă.
Bară de confirmare — Bloc inline, non-modal, de aprobare/respingere pentru o acțiune propusă de agent, plasat în transcriere în loc de o casetă de dialog.
Inspector de context — Vizualizare de inspecție a segmentelor de context dintr-un apel de model, cu estimări de tokenuri, citări, marcaje de mascare și comenzi de copiere/export.
Set de date de evaluare — Listă de exemple de evaluare, filtrabilă și etichetabilă, cu opțiuni de adăugare, eliminare, import și export.
Rezultat de evaluare — Suprafață de punctaj pe grilă de evaluare și revizuire umană, pentru compararea rulărilor unui exemplu de evaluare.
Rulare de evaluare — Vizualizare live a progresului pentru un lot de evaluare, cu progres global și câte un element pliabil per exemplu, incluzând urmăriri de fundamentare și de instrumente.
Rezumat de politici — Listă needitabilă de decizii privind limitele de siguranță, permisiunile, confidențialitatea și politica instrumentelor, cu explicații accesibile de tip permis, refuzat sau necesită revizuire.
Cascadă de intervale — Cronologie orizontală a intervalelor dintr-o urmărire de agent, redate ca bare nuanțate în funcție de stare, pe o axă temporală comună.
Urmă de stivă — Analizează urme de stivă din JS/TS, browser și Python, transformându-le în cadre activabile, cu restrângerea cadrelor interne.
Listă de sarcini — Urmăritor live și pliabil pentru planul unui agent, cu starea ciclului de viață a fiecărui pas și subpași imbricați.
Terminal — Consolă ANSI numai pentru citire, care randează în flux ieșirea unui agent sau a unui instrument, cu căutare și ancorare la final.
Rezultate teste — Rezumat reușit/eșuat al unei suite de teste, cu numărători pe fiecare stare, comutatoare de filtrare și detalii de eșec extinse automat.
Panou de raționament — Panou pliabil pentru transcrierea raționamentului unui agent IA, live sau revizuită.
Dialog de aprobare a instrumentului — Poartă de control cu intervenție umană, pentru a aproba, respinge sau edita un apel de instrument propus, înainte de execuția acestuia.
Bloc de apel instrument — Bloc restrâns, afișat în linie, pentru un apel de instrument al agentului, care se extinde pentru a arăta argumentele, eroarea și rezultatul.
Chip apel instrument — Marcaj compact, de tip pastilă, afișat în linie, care rezumă numele, starea și durata unui apel de instrument al agentului.
Formular parametri instrument — Generează un formular editabil dintr-o schemă JSON Schema plată a unui instrument, pentru ajustarea argumentelor apelului.
Dialog rezultat instrument — Fereastră modală care afișează starea, durata și detaliile complete ale rezultatului unui apel de instrument.
Vizualizare rezultat instrument — Randează rezultatul unui apel de instrument printr-un renderer înregistrat, revenind la JSON atunci când nu există unul.
Dialog de selectare a instrumentelor — Dialog cu instrumente grupate pe categorii și căutare încorporată, pentru a alege ce instrumente ale agentului sunt activate.
Cronologie de instrumente — Listă cronologică a apelurilor de instrumente dintr-o rulare de agent, cu numărul de reîncercări, o poartă de aprobare umană și mascarea câmpurilor sensibile.
Arbore de urmărire — Ierarhie pliabilă a intervalelor dintr-o urmărire de agent/LLM, cu o bară de durată și coloane opționale de tokenuri/cost.
Card rezultat — Cadru de card cu bordură, care oferă componentelor personalizate de randare a rezultatelor uneltelor un aspect unitar de card mic
Câmp rezultat — Rând compact etichetă/valoare pentru carduri de rezultate ale uneltelor și benzi dense de metadate
Aplicație MCP — Găzduiește o resursă executabilă MCP App într-un mediu izolat și expune cererile gazdei ca evenimente tipizate.
Studio de prompturi — Oferă un spațiu independent de furnizor pentru editarea, previzualizarea, versionarea, salvarea și rularea prompturilor structurate.
Vizualizator de scheme — Inspectează arbori JSON Schema selectabili cu restricții, câmpuri obligatorii, ramuri de compoziție și probleme de validare.
Panou de subagenți — Afișează o ierarhie controlată de rulări ale subagenților cu stare, sarcină, model, progres și acțiuni de ciclu de viață.

Regăsire și grafuri de cunoștințe

Card de comunitate — Card rezumativ pentru o comunitate dintr-un graf de cunoștințe, cu marcaje ale membrilor și o acțiune de aprofundare.
Explorator de vectorizări (embeddings) — Vizualizare accesibilă, de tip împrăștiere 2D, a coordonatelor de vectorizare (embedding) proiectate de componenta gazdă, cu colorare opțională pe clustere și selecție de puncte.
Card de entitate — Card de tip dosar pentru o entitate dintr-un graf de cunoștințe, cu insignă de tip, proprietăți, grad și o acțiune de focalizare în graf.
Marcaj de entitate — Mențiune @entitate inline pentru textul agentului, cu previzualizare tip popover la survolare sau focalizare.
Dosar de entitate — Suprafață de detaliu a unei entități, cu antet, statistică de încredere și file pentru relații, fragmente justificative și proveniență.
Graf — Reprezintă relațiile sub forma unei diagrame nod-legătură de tip force-directed, cu pan și zoom.
Legendă de graf — Legendă a tipurilor de noduri pentru un graf asociat, care funcționează și ca filtru de vizibilitate.
Coadă de ingestie — Listă controlată de documente care parcurg un flux de ingestie, arătând etapa, progresul, numărătorile și cererile de reîncercare sau anulare.
Bază de cunoștințe — Listă de surse pentru o bază de cunoștințe destinată recuperării, cu starea sincronizării, sănătatea indexării, permisiuni și cereri de gestionare pe fiecare rând.
Administrare a bazei de cunoștințe — Înveliș operațional cu file, care asociază sursele unei baze de cunoștințe cu coada de ingestie și transmite componentei gazdă acțiunile de gestionare.
Explorator de graf de cunoștințe — Înveliș de explorare a unui graf de cunoștințe, care combină randarea grafului, căutarea de entități, filtre de tip, extinderea vecinătății și găsirea traseului.
Hartă mentală — Arbore radial de subiecte, extensibil, pentru a parcurge spațial o ierarhie și a aprofunda un subiect.
Listă de vecini — Rândurile de relații ale unei entități, cu navigare și extindere în graf pentru fiecare rând.
Paletă de noduri — Bibliotecă de noduri căutabilă și organizată pe categorii pentru a trage sau plasa noduri pe o canava de flux.
Bandă de traseu — Lanț compact și derulabil nod-relație-nod care redă o cale de raționament GraphRAG.
Inspector de fragmente — Listă clasificată a fragmentelor RAG recuperate, cu bare de relevanță și o legătură directă către un vizualizator de documente.
Insignă de citare — Marcaj de citare inline [n], cu previzualizare la trecerea cursorului și colorare în funcție de nivelul de încredere/verificare.
Rezumat de fundamentare — Fișă de punctaj a fundamentării la nivel de afirmație, care arată numărul de dovezi de susținere, acoperirea citărilor, încrederea, avertismentele și citările justificative.
Panou de memorie — Suprafață de memorie de lucru a agentului, pentru context pe termen scurt și memorii pe termen lung, cu încredere afișată și acțiuni condiționate de confirmare.
Panou de proveniență — Randează fundamentarea unui răspuns sub forma unei defalcări pliabile în entități, relații, comunități și fragmente.
Răspuns RAG — Suprafață de răspuns fundamentat, care combină Markdown igienizat, insigne de citare, o evaluare a fundamentării și previzualizări extensibile ale surselor.
Progresul cercetării — Afișează pașii cercetării, numărul de surse și progresul general furnizate de aplicație.
Rezultate de recuperare — Listă clasificată de fragmente recuperate, cu deduplicare, gruparea pe surse, selecție și moduri de prezentare compacte sau extinse.
Căutare de recuperare — Bară de interogare pentru o suprafață de recuperare sau RAG, cu chip-uri de filtru și domeniu, un selector de mod vector/cuvinte-cheie/hibrid și feedback de stare.
Urmărire de recuperare — Cronologie a etapelor unui flux de recuperare, cu dovezi extensibile pentru fiecare etapă de rescriere, vectorizare (embedding), recuperare, reclasificare (rerank) și filtrare.
Card sursă — Intrare de citare care afișează titlul, pagina, fragmentul și textul complet extensibil al unei surse.
Listă surse — Panou pliabil „Surse” care grupează cardurile de citare ale unui mesaj de chat sub un singur antet.
Selector de surse — Arbore cu casete de selectare pentru a stabili ce surse fundamentează următorul răspuns, cu directoare în stare mixtă, selectare totală și căutare.
Dovezi pentru afirmații — Auditează afirmațiile generate în raport cu citările și afișează starea susținerii, încrederea și dovezile.
Tablou de evaluare RAG — Prezintă metrici de calitate RAG, tendințe, segmente de evaluare și istoricul rulărilor calculate de gazdă.
Comparare recuperare — Compară alăturat seturi ordonate de recuperare și reranking, cu suprapunere și detalierea scorurilor.

Formulare și câmpuri

Buton — Buton de acțiune bazat pe tokenuri, cu variante de ton, dimensiuni și o stare de încărcare.
Casetă de bifare — Control de formular boolean cu stări bifat, nebifat și nedeterminat.
Grup de casete de bifare — Grupează casete de bifare asociate într-un singur câmp de selecție multiplă, asociat formularului și validat.
Editor de cod — Suprafață de editare a codului pe mai multe linii, fără dependențe, cu o bară opțională de numere de linie.
Selector de culoare — Câmp nativ de selecție a culorii, asociat formularului, cu etichetă, indiciu și elemente de interfață pentru erori de validare.
Casetă combinată — Selecție simplă sau multiplă, filtrabilă, care asociază un câmp de text cu un popover de tip listă.
Câmp pentru dată — Câmp pentru dată cu un popover de calendar atașat și o valoare în format ISO-8601.
Selector de dată — Calendar inline sub formă de grilă lunară, pentru alegerea unei singure date sau a unui interval de date.
Selector de emoji — Selector de emoji căutabil, navigabil de la tastatură și asociat unui formular.
Buton cu pictogramă — Declanșează o acțiune printr-un buton compact și accesibil, format doar dintr-o pictogramă.
Câmp de text — Câmp de text pe o singură linie, cu etichetă opțională, indiciu și elemente de interfață pentru validare inline.
Selector de țară — Selectează coduri de țări și teritorii cu nume traduse, steaguri și căutare opțională.
Selector de monedă — Selectează coduri de monede cu nume traduse, simboluri și căutare opțională.
Selector de fus orar — Selectează identificatori de fusuri orare dintr-o listă ordonată, cu căutare opțională.
Selector de unitate — Selectează unități de măsură cu nume traduse, simboluri și căutare opțională.
Selector de locale — Meniu derulant cu listă închisă pentru schimbarea locale-ului activ, pe baza registrului de locale propriu al bibliotecii.
Câmp numeric — Câmp numeric cu restricții de valoare minimă, maximă și pas, plus validare nativă a constrângerilor.
Opțiune — Opțiune selectabilă care furnizează unui combobox date despre valoare, etichetă, grupare și stare.
Câmp pentru telefon — Câmp telefonic sensibil la țară, a cărui valoare de formular este în format canonic E.164
Buton radio — Control cu alegere unică, asociat formularului, pentru selectarea unei opțiuni dintr-un set
Grup de butoane radio — Grup etichetat de butoane radio cu alegere unică, navigabil de la tastatură.
Formular de grilă de evaluare — Grilă de evaluare configurabilă, cu punctaj, categorie și comentariu, și trimitere urmată de trecerea automată la elementul următor, pentru parcurgerea unei cozi de evaluare a rezultatelor generate de IA.
Listă derulantă — Meniu derulant cu listă închisă, pentru alegerea unei opțiuni dintr-un set fix de variante.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Glisor — Control numeric de interval pentru setări precum temperatura unui LLM sau nivelul volumului.
Selector de eșantioane de culoare — Selector cu alegere unică dintr-un set mic și fix de eșantioane de culoare, cu un contract radiogroup integrat.
Comutator — Control de formular de tip comutator boolean, cu semantică pornit/oprit pentru formulare native.
Zonă de text — Câmp de text simplu pe mai multe linii, cu creștere automată, validare și elemente de interfață pentru control de formular.
Câmp pentru oră — Câmp orar segmentat, adaptat la limbă, cu un selector pe coloane atașat; experiența nativă a browserului (input[type=time]) este lr-native-time-input.
Interval de timp — Instrument de selecție cu două mânere, pentru alegerea unui interval de început și de sfârșit pe un domeniu numeric.
Buton comutator — Buton autonom cu două stări care activează sau dezactivează o opțiune, cu semantică aria-pressed.
Grup de butoane comutatoare — Grupează butoane comutatoare în spatele unui singur punct de tabulare, cu selecție multiplă sau unică ce poate fi anulată.
Câmp orar nativ — Câmp nativ de selectare a orei, încadrat în eticheta, indiciul și validarea Lyra, de folosit în locul câmpului segmentat lr-time-input atunci când se preferă selectorul nativ al browserului.
Cod OTP — Câmp segmentat pentru introducerea unui cod de verificare de unică folosință, cu completare automată prin SMS inclusă.
Buton radio segmentat — Control cu alegere unică ce arată ca un buton, nu ca un cerc, de obicei grupat cu lr-radio-group pentru a forma un control segmentat.
Câmp pentru jetoane — Câmp asociat formularului care colectează o listă de jetoane amovibile, precum etichete sau destinatari.

Afișare de date

Generator de interogări de graf — Editor asociat formularului pentru o interogare tipizată de relație sau traseu în graf, cu ancore de entitate, filtre de tip, limite de salturi și interogări salvate.
Calendar — Calendar lunar responsiv, cu marcaje pentru evenimente și o vizualizare de agendă accesibilă de la tastatură.
Indicator de context — Indicator segmentat de ocupare, sub formă de bară sau inel, pentru un buget de tokenuri sau o fereastră de context.
Bibliotecă de documente — Inventar de documente căutabil și filtrabil, cu versiuni, etichete, proprietari, prospețime, sortare și selecție în masă.
Listă de variabile de mediu — Listă cheie/valoare mascată pentru variabile de mediu și secrete, cu dezvăluire și copiere pe fiecare rând.
Arbore de fișiere — Presetare de explorator de fișiere peste componenta arbore, cu insigne de stare Git și încărcare leneșă a directoarelor.
Canava de flux — Canava deplasabilă și mărită/micșorată pentru construirea și rularea fluxurilor de lucru vizuale de tip DAG.
Controale de flux — Grup de butoane pentru zoom, încadrare și blocare pentru o canava de flux asociată.
Mini-hartă de flux — Hartă de ansamblu în colț cu un dreptunghi de vizualizare care poate fi tras, pentru o canava de flux asociată.
Nod de flux — Card de nod de flux de lucru cu antet, nuanță de stare și puncte de conectare pentru o canava de flux.
Suprapunere de rulare a fluxului — Aplică decorații de stare a rulării pe o canava de flux și afișează un rezumat compact al pașilor.
Pâlnie — Afișează pierderea de conversie etapă cu etapă sub formă de bare normalizate la prima etapă.
Cadran — Afișează o singură valoare sub formă de indicator radial, inelar sau liniar.
Hartă termică — Randează o matrice de valori sau o grilă de tip calendar sub forma unei hărți termice pe canvas, adaptabilă la redimensionare.
Paginare — Navigare controlată între pagini, cu salt editabil la pagină și rezumat al intervalului de elemente
Generator de interogări — Generator componibil de interogări structurate pentru date tabelare sau de tip dashboard, care combină rânduri de condiții câmp/operator/valoare cu un combinator ȘI/SAU.
Bandă de secvență — Bandă compactă, per element, care vizualizează o secvență de stări categoriale sub formă de celule colorate, cu un marcaj opțional.
Minigrafic — Trasează un trend SVG compact, inline, ca linie, zonă umplută sau bare, pentru o serie de date.
Statistică — Prezintă un singur KPI, cu unitate de măsură, etichetă de tendință, rânduri de defalcare și un minigrafic opțional.
Tabel — Tabel de date prezentațional, cu anteturi sortabile, selecție, filtrare și paginare.
Cronologie — Succesiune conectată de rânduri cu evenimente trecute, pentru trasee de audit, istoricul agenților și jurnale de modificări.
Element de cronologie — Un rând de eveniment pentru o cronologie, cu marcaj codificat prin culoare, titlu, marcaj temporal și descriere.
Arbore — Ierarhie cu extindere/restrângere pentru navigarea în grafuri, documente sau arbori de fișiere
Nod de arbore — Randare recursivă a rândului de tip treeitem pentru un nod și copiii săi, în cadrul unui arbore.
Nor de cuvinte — Nor de etichete SVG fără dependențe, care scalează fiecare cuvânt în funcție de ponderea sa
Grilă de date — Grilă de date virtualizată pentru seturi mari de date, pe client sau pe server, cu sortare, filtrare, grupare, paginare și selecție.

Grafice

Grafic cu bare — Compară valori pe categorii folosind bare verticale sau orizontale.
Diagramă cutie cu mustăți — Sintetizează distribuții pe baza unor rezumate statistice precalculate de cinci numere.
Grafic cu bule — Reprezintă trei dimensiuni per punct folosind poziția x, y și raza bulei.
Grafic — Wrapper de bază peste Chart.js care alimentează vizualizări de date de tip linie, bare, circulară și altele.
Diagramă gogoașă — Arată proporții parte-întreg sub formă de segmente ale unui inel.
Histogramă — Grupează valori numerice în intervale de lățime egală pentru a evidenția distribuția acestora.
Grafic liniar — Urmărește tendințe pe o axă continuă folosind una sau mai multe serii conectate.
Grafic ușor — Grafic cu bare și linii fără dependențe, redat ca SVG simplu, fără a fi nevoie de Chart.js
Diagramă circulară — Diagramă circulară proporțională care arată ponderea unei serii dintr-un întreg
Diagramă cu zone polare — Diagramă cu zone polare care reprezintă fiecare categorie ca o felie scalată în funcție de valoarea sa
Diagramă radar — Diagramă radar care compară mai multe metrici ale unei serii pe o grilă radială
Grafic de împrăștiere — Grafic de împrăștiere al perechilor brute de puncte x/y pe axe liniare

Layout și navigare

Acordeon — Coordonează un grup de panouri pliabile, permițând opțional deschiderea simultană a mai multor panouri.
Element de acordeon — Panou pliabil conceput pentru a fi inclus într-un grup de tip acordeon.
Bară laterală de navigare — Bară de navigare responsivă care trece de la afișare completă la doar pictograme, până la un overlay pe mobil.
Grup al barei laterale de navigare — Secțiune cu titlu, opțional pliabilă, care grupează elementele de navigare din interiorul unei bare laterale de navigare.
Element al barei laterale de navigare — Element de navigare cu pictogramă și etichetă pentru o bară laterală de navigare, cu o stare restrânsă, doar cu pictogramă.
Fir de navigare — Traseu de navigare responsiv care arată poziția utilizatorului în ierarhia paginii
Element de fir de navigare — Un link sau o etichetă a paginii curente în cadrul unui fir de navigare
Grup de butoane — Grupează butoane de acțiune conexe într-un cluster responsiv și etichetat
Card — Suprafață de conținut cu bordură, având sloturi pentru antet, media, subsol și acțiuni.
Carusel — Carusel accesibil cu un singur slide vizibil, navigare din tastatură, indicatori, buclare și redare automată.
Element de carusel — Înveliș semantic opțional pentru un slide, care oferă stilizare consecventă unui element copil din carusel.
Paletă de comenzi — Meniu de comenzi al aplicației, căutabil, cu navigare din tastatură și scurtături.
Grup de controale — Grupează controale de formular diverse și butoane de acțiune într-un singur rând responsiv și centrat.
Grilă de dashboard — Grilă de widgeturi controlată, responsivă și accesibilă de la tastatură, care poziționează elementele de aspect și emite cereri de mutare, redimensionare și coliziune.
Detalii — Panou pliabil accesibil care se extinde pentru a afișa conținutul aflat sub un rezumat.
Panou andocat — Panou redimensionabil și pliabil, andocat pe o margine a aspectului existent al aplicației.
Panou de aprofundare — Înveliș de navigare controlată de la un punct de date dintr-un grafic sau tabel către dovezi, documente, entități sau rulări de agent conexe, cu un traseu de tip fir de navigare.
Element de meniu derulant — Alias compatibil Web Awesome pentru un rând de acțiune individual dintr-un meniu derulant.
Bară de filtre — Rând de filtre pentru dashboard, compus din câmpuri Lyra și chip-uri eliminabile, cu stări de resetare și de încărcare.
Meniu — Meniu semantic inline cu elemente de acțiune, navigare cu tastatura și submeniuri imbricate.
Element de meniu — Rând de acțiune individual pentru un meniu, cu pictogramă, casetă de bifare sau stil distructiv opțional.
Element reordonabil — Un singur rând dintr-o listă reordonabilă, care combină butoane de mutare în sus/jos cu conținut arbitrar plasat în slot.
Listă reordonabilă — Listă generică de rânduri reordonabile, mutate prin butoane pe rând sau prin comanda rapidă Ctrl/Cmd+Săgeată.
Etichetă de meniu — Adaugă un antet neinteractiv pentru a grupa elemente înrudite într-un meniu.
Bară de meniuri — Bară de meniuri orizontală pentru aplicații, cu meniuri derulante titrate și navigare completă cu tastatura.
Element al barei de meniuri — Titlu de nivel superior al unei bare de meniuri, care deschide meniul inclus sau acționează ca o simplă acțiune.
Meniu de navigare — Navigare pentru antetul site-ului, cu linkuri și panouri derulante, care se restrânge în spatele unui buton de meniu când spațiul nu ajunge.
Element al meniului de navigare — O intrare a meniului de navigare: un link către o pagină sau un buton de dezvăluire care deschide un panou derulant.
Pagină — Structură semantică de aplicație a cărei navigare trece de la o coloană fixă la un sertar modal pe mobil, în funcție de spațiul care îi este alocat efectiv, și nu de fereastră.
Panou responsiv — Andochează conținutul inline pe desktop sau îl prezintă ca o fișă suprapusă pe mobil
Derulator — Suprafață de tip overflow responsivă, cu controale opționale anterior/următor pentru rânduri de carduri și file.
Segmentat — Rând de butoane cu selecție unică, pentru alegerea dintr-o privire a uneia dintre mai multe opțiuni etichetate.
Divizare — Împarte un dashboard în panouri redimensionabile prin tragere, cu opțiune de restrângere responsivă.
Panou divizat — Împarte conținutul în două panouri redimensionabile prin tragere, cu un singur separator — o alternativă mai simplă decât componenta multi-panou lr-multi-split.
Etape — Ghidează utilizatorii printr-un expert cu mai mulți pași ordonați, păstrând starea fiecărui pas și permițând saltul direct prin clic.
File — Bandă de file care afișează câte un panou din light DOM la un moment dat, cu navigare completă din tastatură.
Filă — Descriptor de filă compatibil Web Awesome/Shoelace, asociat cu panoul său într-o bandă de file prin atributele panel și name.
Panou de filă — Descriptor de panou compatibil Web Awesome/Shoelace, asociat cu fila sa într-o bandă de file prin atributele name și panel.
Listă virtuală — Container de listă cu ferestruire, care afișează doar rândurile vizibile pe ecran, pentru colecții derulabile foarte mari
Widget — Înveliș de panou cu titlu, cu comutatoare opționale de restrângere și extindere pe tot ecranul

Overlay-uri și feedback

Toast — Regiune de stivuire care ancorează notificările toast într-un colț al ecranului.
Element toast — Toast individual, care poate fi închis, cu accent de severitate, pictogramă opțională și cronometru de închidere automată.
Chip — Pastilă mică pentru o etichetă, un filtru sau un domeniu, eliminabilă sau comutabilă opțional.
Grup de chip-uri — Încadrează un set de chip-uri cu un comutator opțional de tip +N pentru elementele care depășesc o limită.
Alertă — Mesaj de alertă închis implicit, cu închidere automată temporizată și trecere opțională în stiva de notificări toast comună.
Insignă — Etichetă compactă de stare, pentru semnalarea stării, a numărului de elemente sau a categoriilor, inline
Casetă de evidențiere — Suprafață de mesaj inline pentru conținut de tip stare, avertizare sau eroare, care poate fi închisă.
Meniu contextual — Transformă orice zonă într-o țintă pentru clic dreapta, apăsare lungă sau Shift+F10, care deschide un meniu de acțiuni.
Dialog — Fereastră modală cu focus captiv, pentru confirmări, formulare și alte sarcini care întrerup fluxul de lucru.
Sertar — Glisează un panou modal dinspre orice margine a ferestrei de vizualizare, pentru filtre sau comenzi contextuale.
Meniu derulant — Fereastră contextuală cu rol de meniu, care ancorează o listă de acțiuni la un declanșator deținut de consumator
Stare goală — Comunică o stare goală sau fără date, printr-o pictogramă, un mesaj și acțiuni opționale.
Kbd — Etichetă adaptată platformei, care redă o comandă rapidă de tastatură sub formă de taste
Fereastră contextuală — Suprafață flotantă declanșată la clic, care se închide la un clic în exterior, pentru conținut și comenzi contextuale
Fereastră pop-up — Primitivă de poziționare la nivel scăzut care menține un panou flotant aliniat la ancora sa, același motor aflat la baza ferestrei contextuale și a indiciului.
Bară de progres — Indicator orizontal de progres, determinat sau nedeterminat, cu o valoare opțională.
Inel de progres — Indicator circular de progres, determinat sau nedeterminat, cu etichetă centrală.
Evaluare — Evaluare cu stele, accesibilă de la tastatură, cu umplere parțială și precizie fracționată
Schelet — Substituent animat de încărcare, care ține locul conținutului cât timp acesta se încarcă.
Indicator de încărcare — Semnalează o sarcină în desfășurare pe fundal, printr-un indicator animat și nedeterminat de activitate.
Etichetă — Alias semantic al stilului insignă, pentru etichetarea cuvintelor-cheie sau a categoriilor
Indiciu — Indiciu declanșat la trecerea cursorului sau la focus, care descrie un declanșator deținut de consumator

Vizualizatoare de documente și fișiere

Vizualizator de arhive — Listează numele fișierelor și dimensiunile necomprimate dintr-o arhivă ZIP, fără a extrage conținutul.
Vizualizator de calendar — Analizează și randează evenimentele dintr-un fișier de calendar .ics ca rezumate, ore și locații.
Vizualizator de contacte — Preia un document vCard și randează câte un card accesibil pentru fiecare contact.
Vizualizator CSV — Preia un fișier CSV și randează rândurile într-o foaie virtualizată, cu derulare.
Vizualizator de seturi de date — Preia text delimitat și îl randează ca tabel de date tipizat și accesibil.
Comparator de documente — Comparație alăturată sau inline a două versiuni ale unui document, combinând o vizualizare diff textuală cu previzualizări randate ale documentului.
Previzualizare document — Previzualizează inline un document sau un atașament în funcție de tipul MIME, cu opțiunea de descărcare ca soluție de rezervă.
Vizualizator de documente — Afișează un document într-un dialog, folosind un registru conectabil de module de randare, în funcție de tipul MIME.
Vizualizator DOCX — Randează un fișier DOCX ca HTML semantic igienizat, folosind convertorul mammoth.
Vizualizator de cărți electronice — Randează un fișier EPUB cu navigare pe capitole, folosind dependența peer opțională epub.js.
Vizualizator de e-mailuri — Analizează și randează un mesaj .eml, cu anteturi, corp igienizat și atașamente.
Vizualizator GeoJSON — Preia, validează și randează pe o hartă elementele dintr-un fișier GeoJSON.
Strat de evidențiere — Suprapunere care desenează dreptunghiuri de evidențiere activabile peste conținutul poziționat al unui document.
Vizualizator HTML — Preia un URL și randează în siguranță conținutul HTML, după igienizare.
Includere — Preia un fragment HTML și îl integrează ca conținut de pagină igienizat, în light DOM.
Vizualizator de notebook — Instrument de randare pentru notebook-uri Jupyter, numai pentru citire, care combină celule markdown, cod și ieșiri îmbogățite.
Bandă de pagini — Bandă verticală virtualizată de miniaturi pentru a răsfoi un document paginat.
Vizualizator PDF — Preia și randează paginile PDF, cu zoom, paginare și un strat de text selectabil
Vizualizator PPTX — Vizualizator client-side de tip best-effort pentru prezentări PowerPoint PPTX.
Vizualizator de foi de calcul — Preia și randează registre de calcul .xlsx și .xls (versiune veche), cu file pentru foi de calcul și rânduri virtualizate.
Vizualizator SVG — Preia și randează în siguranță un document SVG inline, igienizat, pornind de la un URL.
Vizualizator XML — Vizualizare arborescentă, pliabilă și copiabilă, pentru inspectarea documentelor XML.

Media și fișiere

Chip de atașament — Chip compact pentru un fișier atașat unui mesaj, cu stare de încărcare, progres și reîncercare.
Avatar — Marcaj de identitate compact ce afișează o pictogramă, o imagine sau inițiale ca soluție de rezervă pentru o persoană sau o entitate
Imagine animată — Redă un GIF/APNG/WebP animat, cu un control de redare/pauză care respectă preferința pentru mișcare redusă.
Animație — Animă declarativ un element copil plasat în slot, folosind presetări denumite sau keyframes personalizate.
Declanșator de atașamente — Control compact de atașare care deschide un selector de fișiere sau un meniu de funcționalități în zona de compunere a mesajelor de chat.
Player audio/video — Player audio/video cu transcriere sincronizată, formă de undă și control al vitezei de redare.
Grup de avataruri — Suprapune avataruri într-un rând compact, restul fiind restrânse într-o insignă +N
Zonă de plasare — Înveliș drag-and-drop care transformă orice regiune într-o țintă pentru plasarea fișierelor, fără un selector de fișiere propriu.
Pictogramă de fișier — Insignă localizată pentru tipul de fișier, determinată pe baza tipului MIME sau a numelui fișierului.
Câmp pentru fișiere — Zonă de plasare cu funcționalitate drag-and-drop și clic pentru răsfoire, care emite fișierele selectate.
Steag — Steag de țară sau limbă, randat într-un cadru personalizabil prin temă, opțional circular.
Comparator de imagini — Glisează un separator accesibil de la tastatură pentru a compara alăturat suprafețele „înainte” și „după”.
Vizualizator de imagini — Vizualizator complet de imagini raster cu deplasare/zoom, evidențieri de regiuni etichetate și adnotare opțională.
Lightbox — Vizualizator modal de imagini pe tot ecranul, cu navigare anterior/următor și zoom
Hartă — Componentă wrapper pentru hărți MapLibre GL, cu legendă declarativă, hărți coropletice și marcatori
Card media — Previzualizare inline pentru o imagine, un videoclip sau un atașament de fișier într-un mesaj de chat.
Deplasare și zoom — Zonă cu derulare pentru a inspecta cu zoom un conținut plasat în slot sau o imagine, la un nivel de zoom limitat.
Redare — Comandă de redare/pauză care parcurge un index într-un interval, folosind un temporizator cu pas fix.
Cod QR — Codifică orice valoare într-un simbol de cod QR scanabil, randat pe canvas.
Videoclip — Player video inline cu comenzi personalizate, subtitrări selectabile și previzualizări în miniatură.
Playlist video — Redă o secvență de videoclipuri într-un playlist navigabil, trecând automat la următorul.
Cadru cu zoom — Previzualizare într-un iframe izolat (sandbox) cu comenzi de zoom discrete; fosta suprafață de inspectare a conținutului din slot sau a imaginilor este acum lr-pan-zoom.

Utilitare

Observator de intersecție — Emite intrări native de intersecție pe măsură ce elementele plasate în slot intră sau ies din viewport.
Observator de mutații — Monitorizează DOM-ul plasat în slot pentru modificări de elemente și atribute, redirecționând înregistrările native de mutații
Observator de redimensionare — Monitorizează elementele plasate în slot și emite intrări tipizate de redimensionare, fără elemente vizuale proprii
Buton de copiere — Buton doar cu pictogramă, care copiază o valoare text în clipboard, cu confirmare vizuală printr-o bifă.
Vizualizare diff — Randează un diff real, linie cu linie, între două șiruri de text, ca ieșire de tip unified-diff colorată.
Separator — Separator semantic, personalizabil prin temă, pentru împărțirea conținutului pe orizontală sau verticală.
Buton de export — Descarcă datele unui tabel ca CSV sau JSON, într-un singur format sau printr-un meniu de selecție a formatului.
Formatare octeți — Formatare a dimensiunilor în octeți, sensibilă la locale, cu pas al unității și precizie reglabile.
Formatare dată — Formatare a datei și orei, sensibilă la locale, prin Intl.DateTimeFormat.
Formatare număr — Formatare numerică, valutară și compactă, sensibilă la locale, prin Intl.NumberFormat.
Pictogramă — Randează glife SVG inline, nete, dintr-un set intern de trasee denumite, fără dependențe.
Vizualizator JSON — Vizualizare arborescentă, pliabilă și copiabilă, pentru inspectarea oricărui payload JSON
Dată cunoscută — Câmp de introducere pe trei părți (zi/lună/an) pentru o dată pe care utilizatorul o cunoaște deja
Regiune live — Regiune ARIA live, ascunsă vizual, care limitează frecvența anunțurilor pentru cititoarele de ecran
Popover de mențiuni — Autocompletare ancorată la cursor pentru mențiuni @ și comenzi slash într-un câmp de text.
Stare polling — Numărătoare inversă până la următoarea reîmprospătare programată, cu control integrat de pauză și reluare.
Conținut aleatoriu — Rotește elementele plasate în slot, aleatoriu sau secvențial, pentru texte de tip A/B și testimoniale
Timp relativ — Afișează un marcaj temporal relativ, sensibil la locale, care se reîmprospătează automat.
Tur ghidat — Parcurs ghidat, cu evidențiere (spotlight) și pași, pentru onboardingul de la prima utilizare a produsului.
Ascuns vizual — Ascunde conținutul de pe ecran, păstrându-l accesibil pentru cititoarele de ecran, și îl afișează din nou la focalizare.