@agentero/design-system 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -0
- package/mcp/manifests/components.html +838 -0
- package/mcp/manifests/components.json +1 -0
- package/mcp/server.mjs +6547 -0
- package/package.json +5 -1
|
@@ -0,0 +1,838 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Components Manifest</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--bg: #0b0c10;
|
|
10
|
+
--panel: #121318;
|
|
11
|
+
--muted: #9aa0a6;
|
|
12
|
+
--fg: #e8eaed;
|
|
13
|
+
--ok: #22c55e;
|
|
14
|
+
--info: #1e88e5;
|
|
15
|
+
--err: #c62828;
|
|
16
|
+
--ok-bg: #0c1a13;
|
|
17
|
+
--info-bg: #0c1624;
|
|
18
|
+
--err-bg: #1a0e0e;
|
|
19
|
+
--chip: #1f2330;
|
|
20
|
+
--border: #2b2f3a;
|
|
21
|
+
--link: #8ab4f8;
|
|
22
|
+
--active-ring: 1px; /* 1px active ring for pills and toggles */
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
* {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html,
|
|
30
|
+
body {
|
|
31
|
+
margin: 0;
|
|
32
|
+
background: var(--bg);
|
|
33
|
+
color: var(--fg);
|
|
34
|
+
font: 14px/1.5 system-ui,
|
|
35
|
+
-apple-system,
|
|
36
|
+
Segoe UI,
|
|
37
|
+
Roboto,
|
|
38
|
+
Ubuntu,
|
|
39
|
+
Cantarell,
|
|
40
|
+
'Helvetica Neue',
|
|
41
|
+
Arial,
|
|
42
|
+
'Noto Sans';
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.wrap {
|
|
46
|
+
max-width: 1100px;
|
|
47
|
+
margin: 0 auto;
|
|
48
|
+
padding: 16px 20px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
header {
|
|
52
|
+
position: sticky;
|
|
53
|
+
top: 0;
|
|
54
|
+
backdrop-filter: blur(6px);
|
|
55
|
+
background: color-mix(in srgb, var(--bg) 84%, transparent);
|
|
56
|
+
border-bottom: 1px solid var(--border);
|
|
57
|
+
z-index: 10;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
h1 {
|
|
61
|
+
font-size: 20px;
|
|
62
|
+
margin: 0 0 6px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.summary {
|
|
66
|
+
display: flex;
|
|
67
|
+
gap: 12px;
|
|
68
|
+
flex-wrap: wrap;
|
|
69
|
+
align-items: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Top filter pills */
|
|
73
|
+
.filter-pill {
|
|
74
|
+
display: inline-flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 6px;
|
|
77
|
+
padding: 6px 12px;
|
|
78
|
+
border: 1px solid var(--border);
|
|
79
|
+
border-radius: 999px;
|
|
80
|
+
background: var(--panel);
|
|
81
|
+
text-decoration: none;
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
user-select: none;
|
|
84
|
+
color: var(--fg);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.filter-pill.ok {
|
|
88
|
+
color: #b9f6ca;
|
|
89
|
+
border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
|
|
90
|
+
background: color-mix(in srgb, var(--ok) 18%, #000);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.filter-pill.info {
|
|
94
|
+
color: #b3d9ff;
|
|
95
|
+
border-color: color-mix(in srgb, var(--info) 55%, var(--border));
|
|
96
|
+
background: var(--info-bg);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.filter-pill.err {
|
|
100
|
+
color: #ff9aa0;
|
|
101
|
+
border-color: color-mix(in srgb, var(--err) 55%, var(--border));
|
|
102
|
+
background: var(--err-bg);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.filter-pill.all {
|
|
106
|
+
color: #d7dbe0;
|
|
107
|
+
border-color: var(--border);
|
|
108
|
+
background: var(--panel);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.filter-pill[aria-disabled='true'] {
|
|
112
|
+
cursor: default;
|
|
113
|
+
text-decoration: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.filter-pill:focus,
|
|
117
|
+
.filter-pill:active {
|
|
118
|
+
outline: none;
|
|
119
|
+
box-shadow: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Selected top pill ring via :target */
|
|
123
|
+
#filter-all:target ~ header .filter-pill[data-k='all'],
|
|
124
|
+
#filter-errors:target ~ header .filter-pill[data-k='errors'],
|
|
125
|
+
#filter-infos:target ~ header .filter-pill[data-k='infos'],
|
|
126
|
+
#filter-story-errors:target ~ header .filter-pill[data-k='story-errors'],
|
|
127
|
+
#filter-doc-errors:target ~ header .filter-pill[data-k='docs'],
|
|
128
|
+
#filter-docs:target ~ header .filter-pill[data-k='docs'] {
|
|
129
|
+
box-shadow: 0 0 0 var(--active-ring) currentColor;
|
|
130
|
+
border-color: currentColor;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Hidden targets for filtering */
|
|
134
|
+
#filter-all,
|
|
135
|
+
#filter-errors,
|
|
136
|
+
#filter-infos,
|
|
137
|
+
#filter-story-errors,
|
|
138
|
+
#filter-doc-errors,
|
|
139
|
+
#filter-docs {
|
|
140
|
+
display: none;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
main {
|
|
144
|
+
padding: 36px 0 40px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.grid {
|
|
148
|
+
display: grid;
|
|
149
|
+
grid-template-columns: 1fr;
|
|
150
|
+
gap: 18px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* one card per row */
|
|
154
|
+
|
|
155
|
+
.card {
|
|
156
|
+
border: 1px solid var(--border);
|
|
157
|
+
background: var(--panel);
|
|
158
|
+
border-radius: 14px;
|
|
159
|
+
padding: 14px;
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
gap: 10px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.head {
|
|
166
|
+
display: flex;
|
|
167
|
+
flex-direction: column;
|
|
168
|
+
gap: 8px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.title {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
justify-content: space-between;
|
|
175
|
+
gap: 10px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.title h2 {
|
|
179
|
+
font-size: 16px;
|
|
180
|
+
margin: 0;
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
text-overflow: ellipsis;
|
|
183
|
+
white-space: nowrap;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.meta {
|
|
187
|
+
font-size: 12px;
|
|
188
|
+
color: var(--muted);
|
|
189
|
+
overflow: hidden;
|
|
190
|
+
text-overflow: ellipsis;
|
|
191
|
+
white-space: nowrap;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.kv {
|
|
195
|
+
display: flex;
|
|
196
|
+
flex-wrap: wrap;
|
|
197
|
+
gap: 6px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.chip {
|
|
201
|
+
font-size: 12px;
|
|
202
|
+
padding: 4px 8px;
|
|
203
|
+
border-radius: 999px;
|
|
204
|
+
background: var(--chip);
|
|
205
|
+
border: 1px solid var(--border);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.hint {
|
|
209
|
+
color: var(--muted);
|
|
210
|
+
font-size: 12px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.badges {
|
|
214
|
+
display: flex;
|
|
215
|
+
gap: 8px;
|
|
216
|
+
flex-wrap: wrap;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Per-card badges: labels become toggles when clickable */
|
|
220
|
+
.badge {
|
|
221
|
+
font-size: 12px;
|
|
222
|
+
padding: 3px 8px;
|
|
223
|
+
border-radius: 999px;
|
|
224
|
+
border: 1px solid var(--border);
|
|
225
|
+
background: var(--chip);
|
|
226
|
+
color: #d7dbe0;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.badge.ok {
|
|
230
|
+
color: #b9f6ca;
|
|
231
|
+
border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.badge.info {
|
|
235
|
+
color: #b3d9ff;
|
|
236
|
+
border-color: color-mix(in srgb, var(--info) 55%, var(--border));
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.badge.err {
|
|
240
|
+
color: #ff9aa0;
|
|
241
|
+
border-color: color-mix(in srgb, var(--err) 55%, var(--border));
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.as-toggle {
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* 1px ring on active toggle */
|
|
249
|
+
.tg-err:checked + label.as-toggle,
|
|
250
|
+
.tg-info:checked + label.as-toggle,
|
|
251
|
+
.tg-stories:checked + label.as-toggle,
|
|
252
|
+
.tg-docs:checked + label.as-toggle,
|
|
253
|
+
.tg-content:checked + label.as-toggle,
|
|
254
|
+
.tg-props:checked + label.as-toggle {
|
|
255
|
+
box-shadow: 0 0 0 var(--active-ring) currentColor;
|
|
256
|
+
border-color: currentColor;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Panels: hidden by default, shown when respective toggle checked */
|
|
260
|
+
.panels {
|
|
261
|
+
display: grid;
|
|
262
|
+
gap: 10px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.panel {
|
|
266
|
+
display: none;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.tg-err:checked ~ .panels .panel-err {
|
|
270
|
+
display: grid;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.tg-info:checked ~ .panels .panel-info {
|
|
274
|
+
display: grid;
|
|
275
|
+
gap: 8px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.tg-stories:checked ~ .panels .panel-stories {
|
|
279
|
+
display: grid;
|
|
280
|
+
gap: 8px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.tg-docs:checked ~ .panels .panel-docs {
|
|
284
|
+
display: grid;
|
|
285
|
+
gap: 8px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.tg-content:checked ~ .panels .panel-content {
|
|
289
|
+
display: grid;
|
|
290
|
+
gap: 8px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.tg-props:checked ~ .panels .panel-props {
|
|
294
|
+
display: grid;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* Colored notes for prop type error + info */
|
|
298
|
+
.note {
|
|
299
|
+
padding: 12px;
|
|
300
|
+
border: 1px solid var(--border);
|
|
301
|
+
border-radius: 10px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.note.err {
|
|
305
|
+
border-color: color-mix(in srgb, var(--err) 55%, var(--border));
|
|
306
|
+
background: var(--err-bg);
|
|
307
|
+
color: #ffd1d4;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.note.info {
|
|
311
|
+
border-color: color-mix(in srgb, var(--info) 55%, var(--border));
|
|
312
|
+
background: var(--info-bg);
|
|
313
|
+
color: #d6e8ff;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.note.ok {
|
|
317
|
+
border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
|
|
318
|
+
background: var(--ok-bg);
|
|
319
|
+
color: var(--fg);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.note-title {
|
|
323
|
+
font-weight: 600;
|
|
324
|
+
margin-bottom: 6px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.note-body {
|
|
328
|
+
white-space: normal;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/* Story error cards */
|
|
332
|
+
.ex {
|
|
333
|
+
padding: 10px;
|
|
334
|
+
border: 1px solid var(--border);
|
|
335
|
+
border-radius: 10px;
|
|
336
|
+
background: #0f131b;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.ex.err {
|
|
340
|
+
border-color: color-mix(in srgb, var(--err) 55%, var(--border));
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.row {
|
|
344
|
+
display: flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
gap: 8px;
|
|
347
|
+
flex-wrap: wrap;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.status-dot {
|
|
351
|
+
width: 8px;
|
|
352
|
+
height: 8px;
|
|
353
|
+
border-radius: 50%;
|
|
354
|
+
display: inline-block;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.dot-ok {
|
|
358
|
+
background: var(--ok);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.dot-err {
|
|
362
|
+
background: var(--err);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.ex-name {
|
|
366
|
+
font-weight: 600;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Error groups (visible in errors filter) */
|
|
370
|
+
.error-groups {
|
|
371
|
+
display: none;
|
|
372
|
+
margin-bottom: 16px;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.group {
|
|
376
|
+
border: 1px solid var(--border);
|
|
377
|
+
background: var(--panel);
|
|
378
|
+
border-radius: 14px;
|
|
379
|
+
overflow: hidden;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.group + .group {
|
|
383
|
+
margin-top: 12px;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.group-header {
|
|
387
|
+
display: flex;
|
|
388
|
+
align-items: center;
|
|
389
|
+
gap: 10px;
|
|
390
|
+
padding: 12px 14px;
|
|
391
|
+
cursor: pointer;
|
|
392
|
+
border-bottom: 1px solid var(--border);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.group-header:hover {
|
|
396
|
+
background: #141722;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.group-title {
|
|
400
|
+
font-weight: 600;
|
|
401
|
+
flex: 1;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.group-count {
|
|
405
|
+
font-size: 12px;
|
|
406
|
+
color: var(--muted);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.group-cards {
|
|
410
|
+
display: none;
|
|
411
|
+
padding: 12px;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.group .card {
|
|
415
|
+
margin: 12px 0;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.group .card:first-child {
|
|
419
|
+
margin-top: 0;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.group .card:last-child {
|
|
423
|
+
margin-bottom: 0;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* caret rotation */
|
|
427
|
+
.group-tg:checked + label .caret {
|
|
428
|
+
transform: rotate(90deg);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.caret {
|
|
432
|
+
transition: transform 0.15s ease;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* toggle body */
|
|
436
|
+
.group-tg:checked ~ .group-cards {
|
|
437
|
+
display: block;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
/* CSS-only filtering of cards via top pills */
|
|
441
|
+
#filter-errors:target ~ main .card:not(.has-error):not(.has-story-error) {
|
|
442
|
+
display: none;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
#filter-infos:target ~ main .card:not(.has-info) {
|
|
446
|
+
display: none;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
#filter-story-errors:target ~ main .card:not(.has-story-error) {
|
|
450
|
+
display: none;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
#filter-doc-errors:target ~ main .card:not(.has-doc-error) {
|
|
454
|
+
display: none;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
#filter-docs:target ~ main .card:has(> .tg-docs),
|
|
458
|
+
#filter-docs:target ~ main .card.is-doc {
|
|
459
|
+
display: block;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
#filter-docs:target ~ main .card:not(:has(> .tg-docs)):not(.is-doc) {
|
|
463
|
+
display: none;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
#filter-all:target ~ main .card {
|
|
467
|
+
display: block;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* In errors view, hide standalone component-error cards in the regular grid (they will appear in groups) */
|
|
471
|
+
#filter-errors:target ~ main .grid .card.has-error {
|
|
472
|
+
display: none;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
/* Show grouped section only in errors view */
|
|
476
|
+
#filter-errors:target ~ main .error-groups {
|
|
477
|
+
display: block;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
/* Section titles */
|
|
481
|
+
.section-title {
|
|
482
|
+
font-size: 16px;
|
|
483
|
+
font-weight: 600;
|
|
484
|
+
color: var(--muted);
|
|
485
|
+
margin: 24px 0 12px;
|
|
486
|
+
padding-bottom: 8px;
|
|
487
|
+
border-bottom: 1px solid var(--border);
|
|
488
|
+
}
|
|
489
|
+
.section-title:first-child {
|
|
490
|
+
margin-top: 0;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
/* When a toggle is checked, show the corresponding panel */
|
|
494
|
+
.card > .tg-err:checked ~ .panels .panel-err {
|
|
495
|
+
display: grid;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.card > .tg-info:checked ~ .panels .panel-info {
|
|
499
|
+
display: grid;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.card > .tg-stories:checked ~ .panels .panel-stories {
|
|
503
|
+
display: grid;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.card > .tg-docs:checked ~ .panels .panel-docs {
|
|
507
|
+
display: grid;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.card > .tg-content:checked ~ .panels .panel-content {
|
|
511
|
+
display: grid;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
/* Add vertical spacing around panels only when any panel is visible */
|
|
515
|
+
.card > .tg-err:checked ~ .panels,
|
|
516
|
+
.card > .tg-info:checked ~ .panels,
|
|
517
|
+
.card > .tg-stories:checked ~ .panels,
|
|
518
|
+
.card > .tg-docs:checked ~ .panels,
|
|
519
|
+
.card > .tg-content:checked ~ .panels,
|
|
520
|
+
.card > .tg-props:checked ~ .panels {
|
|
521
|
+
margin: 10px 0;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* Optional: a subtle 1px ring on the active badge, using :has() if available */
|
|
525
|
+
@supports selector(.card:has(.tg-err:checked)) {
|
|
526
|
+
.card:has(.tg-err:checked) label[for$='-err'],
|
|
527
|
+
.card:has(.tg-info:checked) label[for$='-info'],
|
|
528
|
+
.card:has(.tg-stories:checked) label[for$='-stories'],
|
|
529
|
+
.card:has(.tg-docs:checked) label[for$='-docs'],
|
|
530
|
+
.card:has(.tg-content:checked) label[for$='-content'],
|
|
531
|
+
.card:has(.tg-props:checked) label[for$='-props'] {
|
|
532
|
+
box-shadow: 0 0 0 1px currentColor;
|
|
533
|
+
border-color: currentColor;
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
/* Wrap long lines in code blocks at ~120 characters */
|
|
538
|
+
pre, code {
|
|
539
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
540
|
+
}
|
|
541
|
+
pre {
|
|
542
|
+
white-space: pre-wrap;
|
|
543
|
+
overflow-wrap: anywhere;
|
|
544
|
+
word-break: break-word;
|
|
545
|
+
overflow-x: auto; /* fallback for extremely long tokens */
|
|
546
|
+
margin: 8px 0 0;
|
|
547
|
+
}
|
|
548
|
+
pre > code {
|
|
549
|
+
display: block;
|
|
550
|
+
white-space: inherit;
|
|
551
|
+
overflow-wrap: inherit;
|
|
552
|
+
word-break: inherit;
|
|
553
|
+
inline-size: min(100%, 120ch);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
/* MDX content container for docs */
|
|
557
|
+
.mdx-content {
|
|
558
|
+
background: #0f131b;
|
|
559
|
+
border: 1px solid var(--border);
|
|
560
|
+
border-radius: 10px;
|
|
561
|
+
padding: 12px;
|
|
562
|
+
max-height: 400px;
|
|
563
|
+
overflow-y: auto;
|
|
564
|
+
margin-top: 8px;
|
|
565
|
+
}
|
|
566
|
+
</style>
|
|
567
|
+
</head>
|
|
568
|
+
<body>
|
|
569
|
+
<!-- Hidden targets for the top-level filters -->
|
|
570
|
+
<span id="filter-all"></span>
|
|
571
|
+
<span id="filter-errors"></span>
|
|
572
|
+
<span id="filter-infos"></span>
|
|
573
|
+
<span id="filter-story-errors"></span>
|
|
574
|
+
<span id="filter-doc-errors"></span>
|
|
575
|
+
<span id="filter-docs"></span>
|
|
576
|
+
<header>
|
|
577
|
+
<div class="wrap">
|
|
578
|
+
<h1>Manifest Debugger</h1>
|
|
579
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">1 components ok</span><span class="filter-pill ok" aria-disabled="true">13 stories ok</span></div>
|
|
580
|
+
</div>
|
|
581
|
+
</header>
|
|
582
|
+
<main>
|
|
583
|
+
<div class="wrap">
|
|
584
|
+
<div class="note ok" style="margin-bottom: 16px;">
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>1.4s</strong>.
|
|
586
|
+
</div>
|
|
587
|
+
<h2 class="section-title">Components</h2>
|
|
588
|
+
<div class="grid" role="list">
|
|
589
|
+
|
|
590
|
+
<article
|
|
591
|
+
class="card
|
|
592
|
+
no-error
|
|
593
|
+
no-info
|
|
594
|
+
no-story-error
|
|
595
|
+
no-doc-error"
|
|
596
|
+
role="listitem"
|
|
597
|
+
aria-label="Avatar">
|
|
598
|
+
<div class="head">
|
|
599
|
+
<div class="title">
|
|
600
|
+
<h2><span class="status-dot dot-ok"></span> Avatar</h2>
|
|
601
|
+
<div class="badges">
|
|
602
|
+
<label for="c-0-components-avatar-props" class="badge ok as-toggle">6 prop types</label>
|
|
603
|
+
|
|
604
|
+
<label for="c-0-components-avatar-stories" class="badge ok as-toggle">13 stories</label>
|
|
605
|
+
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<div class="meta" title="./src/avatar/avatar.stories.tsx">components-avatar · ./src/avatar/avatar.stories.tsx</div>
|
|
609
|
+
|
|
610
|
+
<div class="hint">Avatar displays a user's profile image, initials, or a fallback icon. Use for user identification in lists, headers, cards, and comment threads. Supports multiple shapes (`circle`, `square`, `pillow`, `pentagon`) and sizes from `xs` (24px) to `4xl` (128px).</div>
|
|
611
|
+
|
|
612
|
+
</div>
|
|
613
|
+
|
|
614
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
<input id="c-0-components-avatar-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
618
|
+
|
|
619
|
+
<input id="c-0-components-avatar-props" class="tg tg-props" type="checkbox" hidden />
|
|
620
|
+
|
|
621
|
+
<div class="panels">
|
|
622
|
+
|
|
623
|
+
|
|
624
|
+
|
|
625
|
+
<div class="panel panel-props">
|
|
626
|
+
<div class="note ok">
|
|
627
|
+
<div class="row">
|
|
628
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
629
|
+
<span class="badge ok">6 prop types</span>
|
|
630
|
+
</div>
|
|
631
|
+
<pre><code>Component: src/avatar/avatar.tsx::Avatar</code></pre>
|
|
632
|
+
<pre><code>Props:</code></pre>
|
|
633
|
+
<pre><code>/**
|
|
634
|
+
* Accessible alt text describing the avatar image. Required when `src` is provided.
|
|
635
|
+
*/
|
|
636
|
+
alt?: string
|
|
637
|
+
|
|
638
|
+
asChild?: boolean
|
|
639
|
+
|
|
640
|
+
/**
|
|
641
|
+
* Content rendered when `src` is missing or fails to load. Typically user initials (e.g., "JD") or an icon.
|
|
642
|
+
*/
|
|
643
|
+
fallback?: ReactNode
|
|
644
|
+
|
|
645
|
+
/**
|
|
646
|
+
* Controls the avatar dimensions. Defaults to `'md'` (40px).
|
|
647
|
+
* - `xs` (24px) — inline indicators, dense lists
|
|
648
|
+
* - `sm` (32px) — compact layouts, table rows
|
|
649
|
+
* - `md` (40px) — standard usage, cards, headers
|
|
650
|
+
* - `lg` (48px) — profile sections, detail views
|
|
651
|
+
* - `xl` (64px) — hero sections, prominent display
|
|
652
|
+
* - `2xl` (80px), `3xl` (96px), `4xl` (128px) — large feature areas, profile pages
|
|
653
|
+
*/
|
|
654
|
+
size?: "md" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
|
|
655
|
+
|
|
656
|
+
/**
|
|
657
|
+
* Image URL to display. When unavailable or loading fails, `fallback` content is shown instead.
|
|
658
|
+
*/
|
|
659
|
+
src?: string
|
|
660
|
+
|
|
661
|
+
/**
|
|
662
|
+
* Shape of the avatar container. Defaults to `'circle'`.
|
|
663
|
+
* - `circle` — standard round avatar for user photos
|
|
664
|
+
* - `square` — rounded rectangle, suitable for workspace or team icons
|
|
665
|
+
* - `pillow` — soft, organic squircle shape
|
|
666
|
+
* - `pentagon` — distinctive five-sided shape for unique visual identity
|
|
667
|
+
*/
|
|
668
|
+
variant?: "circle" | "square" | "pillow" | "pentagon"</code></pre>
|
|
669
|
+
</div>
|
|
670
|
+
</div>
|
|
671
|
+
|
|
672
|
+
<div class="panel panel-stories">
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
|
|
676
|
+
<div class="note ok">
|
|
677
|
+
<div class="row">
|
|
678
|
+
<span class="ex-name">Imports</span>
|
|
679
|
+
</div>
|
|
680
|
+
<pre><code>import { Avatar } from "@agentero/design-system";</code></pre>
|
|
681
|
+
</div>
|
|
682
|
+
|
|
683
|
+
|
|
684
|
+
<div class="note ok">
|
|
685
|
+
<div class="row">
|
|
686
|
+
<span class="ex-name">Default</span>
|
|
687
|
+
<span class="badge ok">story ok</span>
|
|
688
|
+
</div>
|
|
689
|
+
<div>Default avatar with fallback initials</div>
|
|
690
|
+
<div class="hint">The default avatar with fallback initials. Renders as a medium circle when no image source is provided.</div>
|
|
691
|
+
<pre><code>const Default = () => <Avatar fallback="JD" size="md" variant="circle" />;</code></pre>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="note ok">
|
|
694
|
+
<div class="row">
|
|
695
|
+
<span class="ex-name">With Image</span>
|
|
696
|
+
<span class="badge ok">story ok</span>
|
|
697
|
+
</div>
|
|
698
|
+
<div>Avatar with a profile image</div>
|
|
699
|
+
<div class="hint">Avatar displaying a user profile photo. The image fills the avatar shape and the fallback is hidden while the image loads successfully.</div>
|
|
700
|
+
<pre><code>const WithImage = () => <Avatar
|
|
701
|
+
fallback="JD"
|
|
702
|
+
size="md"
|
|
703
|
+
variant="circle"
|
|
704
|
+
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop"
|
|
705
|
+
alt="Alex Morgan" />;</code></pre>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="note ok">
|
|
708
|
+
<div class="row">
|
|
709
|
+
<span class="ex-name">With Fallback Initials</span>
|
|
710
|
+
<span class="badge ok">story ok</span>
|
|
711
|
+
</div>
|
|
712
|
+
<div>Fallback content shown when image is unavailable</div>
|
|
713
|
+
<div class="hint">When the image fails to load, the fallback content is displayed. Pass initials, an icon, or any ReactNode as the `fallback` prop.</div>
|
|
714
|
+
<pre><code>const WithFallbackInitials = () => <Avatar
|
|
715
|
+
fallback="AM"
|
|
716
|
+
size="md"
|
|
717
|
+
variant="circle"
|
|
718
|
+
src="https://broken-url.example/photo.jpg" />;</code></pre>
|
|
719
|
+
</div>
|
|
720
|
+
<div class="note ok">
|
|
721
|
+
<div class="row">
|
|
722
|
+
<span class="ex-name">Circle</span>
|
|
723
|
+
<span class="badge ok">story ok</span>
|
|
724
|
+
</div>
|
|
725
|
+
<div>Circle-shaped avatar (default)</div>
|
|
726
|
+
<div class="hint">The circle variant is the default shape, ideal for user profile photos.</div>
|
|
727
|
+
<pre><code>const Circle = () => <Avatar fallback="CR" size="md" variant="circle" />;</code></pre>
|
|
728
|
+
</div>
|
|
729
|
+
<div class="note ok">
|
|
730
|
+
<div class="row">
|
|
731
|
+
<span class="ex-name">Square</span>
|
|
732
|
+
<span class="badge ok">story ok</span>
|
|
733
|
+
</div>
|
|
734
|
+
<div>Square-shaped avatar for workspaces</div>
|
|
735
|
+
<div class="hint">The square variant uses a rounded rectangle, suitable for workspace, team, or organization icons.</div>
|
|
736
|
+
<pre><code>const Square = () => <Avatar fallback="WS" size="md" variant="square" />;</code></pre>
|
|
737
|
+
</div>
|
|
738
|
+
<div class="note ok">
|
|
739
|
+
<div class="row">
|
|
740
|
+
<span class="ex-name">Pillow</span>
|
|
741
|
+
<span class="badge ok">story ok</span>
|
|
742
|
+
</div>
|
|
743
|
+
<div>Pillow-shaped avatar with organic squircle</div>
|
|
744
|
+
<div class="hint">The pillow variant uses a soft, organic squircle shape for a friendly and distinctive appearance.</div>
|
|
745
|
+
<pre><code>const Pillow = () => <Avatar fallback="PL" size="md" variant="pillow" />;</code></pre>
|
|
746
|
+
</div>
|
|
747
|
+
<div class="note ok">
|
|
748
|
+
<div class="row">
|
|
749
|
+
<span class="ex-name">Pentagon</span>
|
|
750
|
+
<span class="badge ok">story ok</span>
|
|
751
|
+
</div>
|
|
752
|
+
<div>Pentagon-shaped avatar for unique identity</div>
|
|
753
|
+
<div class="hint">The pentagon variant uses a five-sided mask for a unique visual identity. Note: the border is hidden in this variant due to the mask shape.</div>
|
|
754
|
+
<pre><code>const Pentagon = () => <Avatar fallback="PT" size="md" variant="pentagon" />;</code></pre>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="note ok">
|
|
757
|
+
<div class="row">
|
|
758
|
+
<span class="ex-name">Size Xs</span>
|
|
759
|
+
<span class="badge ok">story ok</span>
|
|
760
|
+
</div>
|
|
761
|
+
<div>Extra-small 24px avatar</div>
|
|
762
|
+
<div class="hint">Extra-small avatar (24px) for dense lists and inline indicators.</div>
|
|
763
|
+
<pre><code>const SizeXs = () => <Avatar fallback="XS" size="xs" variant="circle" />;</code></pre>
|
|
764
|
+
</div>
|
|
765
|
+
<div class="note ok">
|
|
766
|
+
<div class="row">
|
|
767
|
+
<span class="ex-name">Size Sm</span>
|
|
768
|
+
<span class="badge ok">story ok</span>
|
|
769
|
+
</div>
|
|
770
|
+
<div>Small 32px avatar</div>
|
|
771
|
+
<div class="hint">Small avatar (32px) for compact layouts and table rows.</div>
|
|
772
|
+
<pre><code>const SizeSm = () => <Avatar fallback="SM" size="sm" variant="circle" />;</code></pre>
|
|
773
|
+
</div>
|
|
774
|
+
<div class="note ok">
|
|
775
|
+
<div class="row">
|
|
776
|
+
<span class="ex-name">Size Lg</span>
|
|
777
|
+
<span class="badge ok">story ok</span>
|
|
778
|
+
</div>
|
|
779
|
+
<div>Large 48px avatar</div>
|
|
780
|
+
<div class="hint">Large avatar (48px) for profile sections and detail views.</div>
|
|
781
|
+
<pre><code>const SizeLg = () => <Avatar fallback="LG" size="lg" variant="circle" />;</code></pre>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="note ok">
|
|
784
|
+
<div class="row">
|
|
785
|
+
<span class="ex-name">Size Xl</span>
|
|
786
|
+
<span class="badge ok">story ok</span>
|
|
787
|
+
</div>
|
|
788
|
+
<div>Extra-large 64px avatar</div>
|
|
789
|
+
<div class="hint">Extra-large avatar (64px) for hero sections and prominent display.</div>
|
|
790
|
+
<pre><code>const SizeXl = () => <Avatar fallback="XL" size="xl" variant="circle" />;</code></pre>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="note ok">
|
|
793
|
+
<div class="row">
|
|
794
|
+
<span class="ex-name">All Sizes</span>
|
|
795
|
+
<span class="badge ok">story ok</span>
|
|
796
|
+
</div>
|
|
797
|
+
<div>Visual comparison of all avatar sizes</div>
|
|
798
|
+
<div class="hint">All available sizes displayed together for visual comparison. Sizes range from `xs` (24px) to `4xl` (128px).</div>
|
|
799
|
+
<pre><code>const AllSizes = () => (
|
|
800
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
801
|
+
{(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const).map(size => (
|
|
802
|
+
<Avatar key={size} size={size} fallback={size.toUpperCase()} />
|
|
803
|
+
))}
|
|
804
|
+
</div>
|
|
805
|
+
);</code></pre>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="note ok">
|
|
808
|
+
<div class="row">
|
|
809
|
+
<span class="ex-name">All Variants</span>
|
|
810
|
+
<span class="badge ok">story ok</span>
|
|
811
|
+
</div>
|
|
812
|
+
<div>Visual comparison of all avatar shapes</div>
|
|
813
|
+
<div class="hint">All available shape variants displayed together for visual comparison. Each variant serves a different use case: user photos, workspaces, friendly branding, and unique identity.</div>
|
|
814
|
+
<pre><code>const AllVariants = () => (
|
|
815
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
816
|
+
{(['circle', 'square', 'pillow', 'pentagon'] as const).map(variant => (
|
|
817
|
+
<Avatar
|
|
818
|
+
key={variant}
|
|
819
|
+
size="lg"
|
|
820
|
+
variant={variant}
|
|
821
|
+
fallback={variant.slice(0, 2).toUpperCase()}
|
|
822
|
+
/>
|
|
823
|
+
))}
|
|
824
|
+
</div>
|
|
825
|
+
);</code></pre>
|
|
826
|
+
</div>
|
|
827
|
+
</div>
|
|
828
|
+
|
|
829
|
+
</div>
|
|
830
|
+
</article>
|
|
831
|
+
</div>
|
|
832
|
+
|
|
833
|
+
|
|
834
|
+
|
|
835
|
+
</div>
|
|
836
|
+
</main>
|
|
837
|
+
</body>
|
|
838
|
+
</html>
|