@compose-market/theme 0.1.3 → 0.1.5

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.
Files changed (57) hide show
  1. package/dist/agents/index.d.ts +5 -16
  2. package/dist/agents/index.d.ts.map +1 -1
  3. package/dist/agents/index.js +12 -7
  4. package/dist/agents/index.js.map +1 -1
  5. package/dist/agents/styles.d.ts +1 -1
  6. package/dist/agents/styles.d.ts.map +1 -1
  7. package/dist/agents/styles.js +112 -729
  8. package/dist/agents/styles.js.map +1 -1
  9. package/dist/chain-logos/index.d.ts +345 -5
  10. package/dist/chain-logos/index.d.ts.map +1 -1
  11. package/dist/chain-logos/index.js +58 -4
  12. package/dist/chain-logos/index.js.map +1 -1
  13. package/dist/css/agents.css +112 -729
  14. package/dist/css/entity.css +581 -0
  15. package/dist/css/index.css +1 -0
  16. package/dist/css/index.d.ts +1 -1
  17. package/dist/css/index.d.ts.map +1 -1
  18. package/dist/css/index.js +1 -0
  19. package/dist/css/index.js.map +1 -1
  20. package/dist/css/mirror.css +78 -20
  21. package/dist/css/shell.css +1 -17
  22. package/dist/css/workflows.css +43 -0
  23. package/dist/entity/index.d.ts +58 -0
  24. package/dist/entity/index.d.ts.map +1 -0
  25. package/dist/entity/index.js +22 -0
  26. package/dist/entity/index.js.map +1 -0
  27. package/dist/entity/styles.d.ts +2 -0
  28. package/dist/entity/styles.d.ts.map +1 -0
  29. package/dist/entity/styles.js +583 -0
  30. package/dist/entity/styles.js.map +1 -0
  31. package/dist/index.d.ts +1 -0
  32. package/dist/index.d.ts.map +1 -1
  33. package/dist/index.js +1 -0
  34. package/dist/index.js.map +1 -1
  35. package/dist/mirror/index.d.ts +2 -1
  36. package/dist/mirror/index.d.ts.map +1 -1
  37. package/dist/mirror/index.js +3 -5
  38. package/dist/mirror/index.js.map +1 -1
  39. package/dist/mirror/styles.d.ts +1 -1
  40. package/dist/mirror/styles.d.ts.map +1 -1
  41. package/dist/mirror/styles.js +78 -20
  42. package/dist/mirror/styles.js.map +1 -1
  43. package/dist/shell/index.d.ts.map +1 -1
  44. package/dist/shell/index.js +47 -1
  45. package/dist/shell/index.js.map +1 -1
  46. package/dist/shell/styles.d.ts +1 -1
  47. package/dist/shell/styles.d.ts.map +1 -1
  48. package/dist/shell/styles.js +1 -17
  49. package/dist/shell/styles.js.map +1 -1
  50. package/dist/workflows/index.d.ts.map +1 -1
  51. package/dist/workflows/index.js +28 -2
  52. package/dist/workflows/index.js.map +1 -1
  53. package/dist/workflows/styles.d.ts +1 -1
  54. package/dist/workflows/styles.d.ts.map +1 -1
  55. package/dist/workflows/styles.js +43 -0
  56. package/dist/workflows/styles.js.map +1 -1
  57. package/package.json +10 -1
@@ -1,632 +1,143 @@
1
1
  /**
2
- * Compose.Market Agent Card
2
+ * Compose.Market Agent Card compatibility layer
3
3
  * @compose-market/theme/css/agents
4
4
  */
5
5
 
6
6
  .cm-agent-card {
7
- container-type: inline-size;
8
- display: grid;
9
- grid-template-columns: minmax(0, 1fr);
10
- width: 100%;
11
- max-width: 100%;
12
- min-width: 0;
13
- gap: 0.85rem;
14
- border-radius: 14px;
15
- border: 1px solid hsl(var(--primary) / 0.18);
16
- background:
17
- linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),
18
- radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),
19
- hsl(224 36% 13% / 0.24);
20
- box-shadow:
21
- 0 0 34px hsl(var(--primary) / 0.055),
22
- inset 0 1px 0 hsl(0 0% 100% / 0.06);
23
- overflow: hidden;
24
- backdrop-filter: blur(16px) saturate(1.12);
25
- }
26
-
27
- .cm-agent-card--interactive {
28
- cursor: pointer;
29
- transition:
30
- transform 180ms ease,
31
- border-color 180ms ease,
32
- box-shadow 180ms ease;
33
- }
34
-
35
- .cm-agent-card--interactive:hover {
36
- transform: translateY(-2px);
37
- border-color: hsl(var(--primary) / 0.45);
38
- box-shadow:
39
- 0 18px 36px hsl(240 30% 2% / 0.32),
40
- 0 0 24px hsl(var(--primary) / 0.14),
41
- inset 0 1px 0 hsl(0 0% 100% / 0.05);
42
- }
43
-
44
- .cm-agent-card--interactive:focus-visible {
45
- outline: 2px solid hsl(var(--primary) / 0.72);
46
- outline-offset: 3px;
47
- }
48
-
49
- .cm-agent-card--running {
50
- border-color: hsl(142 71% 45% / 0.48);
51
- box-shadow:
52
- 0 10px 30px hsl(142 71% 45% / 0.08),
53
- 0 0 24px hsl(142 71% 45% / 0.12),
54
- inset 0 1px 0 hsl(0 0% 100% / 0.05);
55
- }
56
-
57
- .cm-agent-card__main {
58
- display: grid;
59
- gap: 0.9rem;
60
- padding: 1rem;
61
- min-width: 0;
62
- max-width: 100%;
63
- }
64
-
65
- .cm-agent-card__header {
66
- display: flex;
67
- align-items: flex-start;
68
- gap: 1rem;
69
- min-width: 0;
70
- max-width: 100%;
71
- }
72
-
73
- .cm-agent-card__avatar {
74
- width: 3.5rem;
75
- height: 3.5rem;
76
- border-radius: max(var(--radius, 0.25rem), 0.35rem);
77
- border: 1px solid hsl(var(--primary) / 0.28);
78
- background:
79
- linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));
80
- display: grid;
81
- place-items: center;
82
- flex-shrink: 0;
83
- overflow: hidden;
84
- box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);
85
- }
86
-
87
- .cm-agent-card__avatar-image {
88
- width: 100%;
89
7
  height: 100%;
90
- object-fit: cover;
91
- }
92
-
93
- .cm-agent-card__avatar-fallback {
94
- font-family: var(--font-mono), monospace;
95
- color: hsl(var(--primary));
96
- font-size: 0.88rem;
97
- font-weight: 700;
98
- letter-spacing: 0.14em;
99
- text-transform: uppercase;
100
- }
101
-
102
- .cm-agent-card__copy {
103
- display: grid;
104
- gap: 0.5rem;
105
- min-width: 0;
106
- max-width: 100%;
107
- flex: 1;
108
- }
109
-
110
- .cm-agent-card__title-row {
111
- display: flex;
112
- align-items: flex-start;
113
- gap: 0.6rem;
114
- min-width: 0;
115
- max-width: 100%;
116
- }
117
-
118
- .cm-agent-card__title {
119
- font-family: var(--font-display), sans-serif;
120
- font-size: 1.05rem;
121
- line-height: 1.1;
122
- color: hsl(var(--foreground));
123
- min-width: 0;
124
- max-width: 100%;
125
- overflow-wrap: anywhere;
126
- }
127
-
128
- .cm-agent-card__header-action {
129
- margin-left: auto;
130
- flex-shrink: 0;
131
- }
132
-
133
- .cm-agent-card__description {
134
- color: hsl(var(--muted-foreground));
135
- font-size: 0.84rem;
136
- line-height: 1.48;
137
- max-width: 100%;
138
- min-width: 0;
139
- overflow-wrap: anywhere;
140
- }
141
-
142
- .cm-agent-card__badges,
143
- .cm-agent-card__tags {
144
- display: flex;
145
- flex-wrap: wrap;
146
- gap: 0.45rem;
147
- }
148
-
149
- .cm-agent-card__badge,
150
- .cm-agent-card__tag {
151
- display: inline-flex;
152
- align-items: center;
153
- gap: 0.35rem;
154
- min-height: 1.7rem;
155
- padding: 0 0.7rem;
156
- border-radius: 999px;
157
- border: 1px solid hsl(var(--border) / 0.72);
158
- background: hsl(var(--muted) / 0.28);
159
- color: hsl(var(--muted-foreground));
160
- font-family: var(--font-mono), monospace;
161
- font-size: 0.64rem;
162
- letter-spacing: 0.08em;
163
- line-height: 1;
164
- text-transform: uppercase;
165
- }
166
-
167
- .cm-agent-card__badge-icon {
168
- display: inline-flex;
169
- align-items: center;
170
- }
171
-
172
- .cm-agent-card__badge[data-tone="cyan"],
173
- .cm-agent-card__tag {
174
- border-color: hsl(var(--primary) / 0.28);
175
- background: hsl(var(--primary) / 0.12);
176
- color: hsl(var(--primary));
177
- }
178
-
179
- .cm-agent-card__badge[data-tone="green"] {
180
- border-color: hsl(142 71% 45% / 0.28);
181
- background: hsl(142 71% 45% / 0.12);
182
- color: hsl(142 71% 45%);
183
- }
184
-
185
- .cm-agent-card__badge[data-tone="fuchsia"] {
186
- border-color: hsl(292 85% 55% / 0.28);
187
- background: hsl(292 85% 55% / 0.12);
188
- color: hsl(292 85% 55%);
189
- }
190
-
191
- .cm-agent-card__badge[data-tone="warning"] {
192
- border-color: hsl(42 100% 48% / 0.28);
193
- background: hsl(42 100% 48% / 0.12);
194
- color: hsl(42 100% 48%);
195
- }
196
-
197
- .cm-agent-card__badge[data-tone="danger"] {
198
- border-color: hsl(var(--destructive) / 0.28);
199
- background: hsl(var(--destructive) / 0.12);
200
- color: hsl(var(--destructive));
201
- }
202
-
203
- .cm-agent-card__metrics {
204
- display: grid;
205
- grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));
206
- gap: 0.6rem;
207
- }
208
-
209
- .cm-agent-card__metric {
210
- display: grid;
211
- grid-template-columns: auto minmax(0, 1fr);
212
- gap: 0.6rem;
213
- align-items: center;
214
- padding: 0.72rem 0.8rem;
215
- border-radius: var(--radius, 0.25rem);
216
- border: 1px solid hsl(var(--border) / 0.65);
217
- background: hsl(var(--background) / 0.5);
218
- }
219
-
220
- .cm-agent-card__metric-icon {
221
- display: inline-flex;
222
- align-items: center;
223
- justify-content: center;
224
- color: hsl(var(--primary));
225
- }
226
-
227
- .cm-agent-card__metric-copy {
228
- display: grid;
229
- gap: 0.14rem;
230
- min-width: 0;
231
- }
232
-
233
- .cm-agent-card__metric-label,
234
- .cm-agent-card__focus-label,
235
- .cm-agent-card__tags-title,
236
- .cm-agent-card__meta-label {
237
- color: hsl(var(--muted-foreground));
238
- font-family: var(--font-mono), monospace;
239
- font-size: 0.62rem;
240
- letter-spacing: 0.12em;
241
- text-transform: uppercase;
242
- }
243
-
244
- .cm-agent-card__metric-value,
245
- .cm-agent-card__focus-value,
246
- .cm-agent-card__meta-value {
247
- color: hsl(var(--foreground));
248
- font-family: var(--font-mono), monospace;
249
- font-size: 0.8rem;
250
- line-height: 1.2;
251
- overflow-wrap: anywhere;
252
- }
253
-
254
- .cm-agent-card__metric[data-tone="green"] .cm-agent-card__metric-icon,
255
- .cm-agent-card__metric[data-tone="green"] .cm-agent-card__metric-value {
256
- color: hsl(142 71% 45%);
257
- }
258
-
259
- .cm-agent-card__metric[data-tone="cyan"] .cm-agent-card__metric-icon,
260
- .cm-agent-card__metric[data-tone="cyan"] .cm-agent-card__metric-value {
261
- color: hsl(var(--primary));
262
- }
263
-
264
- .cm-agent-card__metric[data-tone="fuchsia"] .cm-agent-card__metric-icon,
265
- .cm-agent-card__metric[data-tone="fuchsia"] .cm-agent-card__metric-value {
266
- color: hsl(292 85% 55%);
267
- }
268
-
269
- .cm-agent-card__metric[data-tone="warning"] .cm-agent-card__metric-icon,
270
- .cm-agent-card__metric[data-tone="warning"] .cm-agent-card__metric-value {
271
- color: hsl(42 100% 48%);
272
- }
273
-
274
- .cm-agent-card__metric[data-tone="danger"] .cm-agent-card__metric-icon,
275
- .cm-agent-card__metric[data-tone="danger"] .cm-agent-card__metric-value {
276
- color: hsl(var(--destructive));
277
- }
278
-
279
- .cm-agent-card__focus {
280
- display: grid;
281
- grid-template-columns: auto minmax(0, 1fr);
282
- gap: 0.7rem;
283
- align-items: center;
284
- padding: 0.85rem 0.95rem;
285
- border-radius: var(--radius, 0.25rem);
286
- border: 1px solid hsl(var(--border) / 0.72);
287
- background:
288
- linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);
289
- }
290
-
291
- .cm-agent-card__focus-icon {
292
- display: inline-flex;
293
- align-items: center;
294
- justify-content: center;
295
- color: hsl(var(--primary));
296
- }
297
-
298
- .cm-agent-card__focus-copy,
299
- .cm-agent-card__tags-block {
300
- display: grid;
301
- gap: 0.35rem;
302
- }
303
-
304
- .cm-agent-card__meta {
305
- display: grid;
306
- gap: 0.55rem;
307
- }
308
-
309
- .cm-agent-card__meta-row {
310
- display: flex;
311
- align-items: flex-start;
312
- justify-content: space-between;
313
- gap: 1rem;
314
- }
315
-
316
- .cm-agent-card__footer {
317
- padding-top: 0.9rem;
318
- border-top: 1px solid hsl(var(--border) / 0.55);
319
- }
320
-
321
- .cm-agent-card__footer-stack {
322
- display: grid;
323
- gap: 0.8rem;
324
- }
325
-
326
- .cm-agent-card__endpoint,
327
- .cm-agent-card__creator {
328
- display: grid;
329
- gap: 0.45rem;
330
- }
331
-
332
- .cm-agent-card__endpoint-label,
333
- .cm-agent-card__creator-label {
334
- color: hsl(var(--muted-foreground));
335
- font-size: 0.68rem;
336
- letter-spacing: 0.08em;
337
- text-transform: uppercase;
338
- }
339
-
340
- .cm-agent-card__endpoint-row {
341
- display: grid;
342
- grid-template-columns: minmax(0, 1fr) auto;
343
- gap: 0.6rem;
344
- align-items: center;
345
- padding: 0.65rem 0.75rem;
346
- border-radius: var(--radius, 0.25rem);
347
- border: 1px solid hsl(var(--border) / 0.65);
348
- background: hsl(var(--background) / 0.42);
349
- }
350
-
351
- .cm-agent-card__endpoint-code,
352
- .cm-agent-card__creator-value {
353
- color: hsl(var(--primary));
354
- font-family: var(--font-mono), monospace;
355
- font-size: 0.78rem;
356
- overflow-wrap: anywhere;
357
- }
358
-
359
- .cm-agent-card__creator-value {
360
- color: hsl(292 85% 55%);
361
- }
362
-
363
- .cm-agent-card__footer-link {
364
- color: hsl(var(--primary));
365
- font-size: 0.82rem;
366
- font-weight: 600;
367
- text-decoration: none;
368
- }
369
-
370
- .cm-agent-card__footer-link:hover {
371
- text-decoration: underline;
372
- }
373
-
374
- .cm-agent-card--match-chat {
375
- height: auto;
376
8
  min-height: 0;
377
- max-height: 100%;
9
+ overflow: visible;
378
10
  }
379
11
 
380
- .cm-agent-card--match-chat > .cm-agent-card__main {
381
- height: auto;
12
+ .cm-agent-card--match-chat,
13
+ .cm-agent-card--asset {
14
+ height: 100%;
382
15
  min-height: 0;
383
- align-content: start;
384
- overflow: visible;
16
+ max-height: none;
385
17
  }
386
18
 
387
19
  .cm-agent-card--market {
388
- height: var(--cm-market-card-height, clamp(20rem, 34dvh, 22.75rem));
20
+ height: 100%;
389
21
  min-height: 0;
22
+ overflow: visible;
390
23
  }
391
24
 
392
- .cm-agent-card--market > .cm-agent-card__main {
393
- display: grid;
394
- grid-template-rows: auto auto auto auto;
25
+ .cm-agent-card--market > .cm-card__body {
395
26
  height: 100%;
396
27
  min-height: 0;
397
- gap: clamp(0.54rem, 1.2cqi, 0.78rem);
398
- padding: clamp(0.68rem, 1.55cqi, 0.92rem);
399
- align-content: start;
400
- overflow: hidden;
401
- }
402
-
403
- .cm-agent-card--market .cm-agent-card__header {
404
- gap: clamp(0.68rem, 1.55cqi, 0.9rem);
405
- align-items: flex-start;
406
- }
407
-
408
- .cm-agent-card--market .cm-agent-card__avatar {
409
- width: clamp(2.65rem, 8.5cqi, 3.25rem);
410
- height: clamp(2.65rem, 8.5cqi, 3.25rem);
411
- }
412
-
413
- .cm-agent-card--market .cm-agent-card__copy {
414
- gap: 0.38rem;
415
- }
416
-
417
- .cm-agent-card--market .cm-agent-card__title {
418
- font-size: clamp(0.94rem, 2.55cqi, 1.08rem);
419
- line-height: 1.12;
420
- }
421
-
422
- .cm-agent-card--market .cm-agent-card__identity {
423
- gap: 0.26rem;
424
- }
425
-
426
- .cm-agent-card--market .cm-agent-card__identity-head {
427
- flex-wrap: nowrap;
428
- }
429
-
430
- .cm-agent-card--market .cm-agent-card__identity-name,
431
- .cm-agent-card--market .cm-agent-card__identity-address,
432
- .cm-agent-card--market .cm-agent-card__model-name,
433
- .cm-agent-card--market .cm-agent-card__metric-value {
434
- overflow: hidden;
435
- text-overflow: ellipsis;
436
- white-space: nowrap;
437
- overflow-wrap: normal;
438
- word-break: normal;
28
+ overflow: visible;
439
29
  }
440
30
 
441
- .cm-agent-card--market .cm-agent-card__model {
31
+ .cm-agent-card__identity {
32
+ display: grid;
33
+ gap: 0.3rem;
34
+ min-width: 0;
442
35
  max-width: 100%;
443
- font-size: clamp(0.58rem, 1.85cqi, 0.66rem);
444
36
  }
445
37
 
446
- .cm-agent-card--market .cm-agent-card__identity-meta {
38
+ .cm-agent-card__identity-head {
447
39
  display: flex;
448
40
  align-items: center;
449
- gap: 0.34rem;
41
+ gap: 0.42rem;
450
42
  min-width: 0;
451
43
  max-width: 100%;
452
44
  flex-wrap: nowrap;
453
45
  }
454
46
 
455
- .cm-agent-card--market .cm-agent-card__description {
456
- font-size: clamp(0.72rem, 1.9cqi, 0.82rem);
457
- line-height: 1.42;
47
+ .cm-agent-card__identity-name {
458
48
  min-width: 0;
459
49
  max-width: 100%;
460
- }
461
-
462
- .cm-agent-card--market .cm-agent-card__badges,
463
- .cm-agent-card--market .cm-agent-card__tags {
464
- gap: 0.34rem;
465
- overflow: visible;
466
- }
467
-
468
- .cm-agent-card--market .cm-agent-card__badge,
469
- .cm-agent-card--market .cm-agent-card__tag {
470
- min-height: clamp(1.38rem, 4.6cqi, 1.62rem);
471
- padding: 0.28rem 0.52rem;
472
- font-size: clamp(0.54rem, 1.65cqi, 0.62rem);
473
- letter-spacing: 0.07em;
50
+ font-size: inherit;
51
+ line-height: inherit;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
474
54
  white-space: nowrap;
475
55
  }
476
56
 
477
- .cm-agent-card--market .cm-agent-card__metrics {
478
- grid-template-columns: repeat(3, minmax(0, 1fr));
479
- gap: clamp(0.36rem, 1cqi, 0.52rem);
480
- }
481
-
482
- .cm-agent-card--market .cm-agent-card__metric {
483
- min-width: 0;
484
- min-height: clamp(2.52rem, 7cqi, 3rem);
485
- gap: 0.38rem;
486
- padding: clamp(0.42rem, 1.2cqi, 0.58rem);
487
- border-color: hsl(var(--primary) / 0.15);
488
- background:
489
- radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.08), transparent 42%),
490
- hsl(221 50% 9% / 0.34);
491
- }
492
-
493
- .cm-agent-card--market .cm-agent-card__metric-icon svg {
494
- width: 0.78rem;
495
- height: 0.78rem;
496
- }
497
-
498
- .cm-agent-card--market .cm-agent-card__metric-label {
499
- font-size: clamp(0.48rem, 1.45cqi, 0.56rem);
500
- letter-spacing: 0.08em;
501
- }
502
-
503
- .cm-agent-card--market .cm-agent-card__metric-value {
504
- font-size: clamp(0.62rem, 1.75cqi, 0.72rem);
505
- }
506
-
507
- .cm-agent-card--market .cm-agent-card__tags-block {
508
- align-self: stretch;
509
- align-content: start;
510
- gap: 0.34rem;
511
- min-height: clamp(2.55rem, 7cqi, 2.9rem);
512
- overflow: visible;
513
- }
514
-
515
- .cm-agent-card--market .cm-agent-card__tags-title {
516
- display: block;
517
- }
518
-
519
- .cm-agent-card__metric,
520
- .cm-agent-card__metric-copy,
521
- .cm-agent-card__focus,
522
- .cm-agent-card__focus-copy,
523
- .cm-agent-card__tags-block,
524
- .cm-agent-card__footer,
525
- .cm-agent-card__footer-stack,
526
- .cm-agent-card__endpoint,
527
- .cm-agent-card__creator {
528
- min-width: 0;
529
- max-width: 100%;
530
- }
531
-
532
- .cm-agent-card__metric-value,
533
- .cm-agent-card__focus-value,
534
- .cm-agent-card__meta-value,
535
- .cm-agent-card__endpoint-code,
536
- .cm-agent-card__creator-value {
537
- max-width: 100%;
538
- min-width: 0;
539
- white-space: normal;
57
+ .cm-agent-card__identity-address {
58
+ color: hsl(var(--muted-foreground));
59
+ font-family: var(--font-mono), monospace;
60
+ font-size: 0.84rem;
61
+ font-weight: 500;
62
+ line-height: 1.2;
540
63
  overflow-wrap: anywhere;
541
- word-break: break-word;
542
64
  }
543
65
 
544
- .cm-agent-card__identity {
66
+ .cm-agent-card__identity-meta {
545
67
  display: grid;
546
- gap: 0.32rem;
68
+ grid-template-columns: repeat(2, minmax(0, 1fr));
69
+ align-items: center;
70
+ gap: 0.38rem;
71
+ width: 100%;
547
72
  min-width: 0;
548
73
  max-width: 100%;
549
74
  }
550
75
 
551
- .cm-agent-card__identity-head {
552
- display: flex;
553
- align-items: baseline;
554
- gap: 0.45rem;
76
+ .cm-agent-card__identity-meta > .cm-hint {
555
77
  min-width: 0;
78
+ width: 100%;
556
79
  max-width: 100%;
557
- flex-wrap: wrap;
558
80
  }
559
81
 
560
- .cm-agent-card__identity-meta {
561
- display: flex;
562
- align-items: center;
563
- gap: 0.38rem;
564
- min-width: 0;
565
- max-width: 100%;
566
- flex-wrap: wrap;
82
+ .cm-agent-card__identity-meta > .cm-hint > .cm-hint__trigger {
83
+ width: 100%;
567
84
  }
568
85
 
569
86
  .cm-agent-card__verified,
570
87
  .cm-agent-card__network {
571
- display: inline-grid;
572
- width: 1.28rem;
573
- height: 1.28rem;
574
- place-items: center;
88
+ display: inline-flex;
89
+ align-items: center;
90
+ justify-content: center;
575
91
  flex: 0 0 auto;
576
- border-radius: 999px;
577
- border: 1px solid hsl(var(--primary) / 0.22);
578
- background: hsl(var(--primary) / 0.08);
579
- color: hsl(var(--primary));
92
+ width: 1.15rem;
93
+ height: 1.15rem;
580
94
  }
581
95
 
582
96
  .cm-agent-card__verified {
583
- border-color: hsl(142 71% 45% / 0.28);
584
- background: hsl(142 71% 45% / 0.11);
585
- color: hsl(142 71% 55%);
586
- }
587
-
588
- .cm-agent-card__verified svg,
589
- .cm-agent-card__network svg {
590
- width: 0.82rem;
591
- height: 0.82rem;
97
+ border-radius: 999px;
98
+ background: hsl(142 76% 54%);
99
+ color: hsl(221 50% 9%);
592
100
  }
593
101
 
594
- .cm-agent-card__network-image {
595
- width: 0.9rem;
596
- height: 0.9rem;
597
- object-fit: contain;
598
- display: block;
102
+ .cm-agent-card__verified svg {
103
+ width: 0.78rem;
104
+ height: 0.78rem;
105
+ stroke-width: 3.1;
599
106
  }
600
107
 
601
- .cm-agent-card__identity-name {
602
- min-width: 0;
603
- max-width: 100%;
604
- overflow-wrap: anywhere;
108
+ .cm-agent-card__network {
109
+ border: 0;
110
+ border-radius: 999px;
111
+ background: transparent;
605
112
  }
606
113
 
607
- .cm-agent-card__identity-address {
608
- color: hsl(var(--muted-foreground));
609
- font-family: var(--font-mono), monospace;
610
- font-size: 0.68rem;
611
- font-weight: 500;
612
- line-height: 1.1;
114
+ .cm-agent-card__network-image {
115
+ display: block;
116
+ width: 1.05rem;
117
+ height: 1.05rem;
118
+ object-fit: contain;
613
119
  }
614
120
 
615
121
  .cm-agent-card__model {
616
- display: inline-flex;
122
+ display: grid;
123
+ grid-template-columns: auto minmax(0, 1fr);
617
124
  align-items: center;
618
- gap: 0.28rem;
619
- width: fit-content;
125
+ gap: 0.32rem;
126
+ min-width: 0;
127
+ width: 100%;
620
128
  max-width: 100%;
621
- padding: 0.16rem 0.44rem;
129
+ min-height: 1.78rem;
130
+ max-height: 1.78rem;
131
+ padding: 0.22rem 0.52rem;
622
132
  border: 1px solid hsl(var(--primary) / 0.3);
623
133
  border-radius: 999px;
624
- background: hsl(var(--primary) / 0.06);
134
+ background: hsl(var(--primary) / 0.08);
625
135
  color: hsl(var(--foreground));
626
136
  font-family: var(--font-mono), monospace;
627
- font-size: 0.66rem;
628
- font-weight: 600;
137
+ font-size: 0.76rem;
138
+ font-weight: 650;
629
139
  line-height: 1.25;
140
+ overflow: hidden;
630
141
  }
631
142
 
632
143
  .cm-agent-card__model[data-tone="warning"] {
@@ -635,15 +146,10 @@
635
146
  color: hsl(42 100% 58%);
636
147
  }
637
148
 
638
- .cm-agent-card__model[data-tone="warning"] svg {
639
- color: hsl(42 100% 58%);
640
- }
641
-
642
149
  .cm-agent-card__model svg {
643
- width: 0.68rem;
644
- height: 0.68rem;
645
- flex-shrink: 0;
646
- color: hsl(var(--primary));
150
+ width: 0.74rem;
151
+ height: 0.74rem;
152
+ flex: 0 0 auto;
647
153
  }
648
154
 
649
155
  .cm-agent-card__model-name {
@@ -654,187 +160,64 @@
654
160
  white-space: nowrap;
655
161
  }
656
162
 
657
- .cm-agent-card__badge,
658
- .cm-agent-card__tag {
659
- max-width: 100%;
660
- min-width: 0;
661
- height: auto;
662
- padding-top: 0.35rem;
663
- padding-bottom: 0.35rem;
664
- line-height: 1.2;
665
- white-space: normal;
666
- overflow-wrap: anywhere;
667
- }
668
-
669
- .cm-agent-card__endpoint-row {
163
+ .cm-agent-card__footer-stack,
164
+ .cm-agent-card__endpoint,
165
+ .cm-agent-card__creator,
166
+ .cm-agent-card__action-stack {
167
+ display: grid;
168
+ gap: 0.68rem;
670
169
  min-width: 0;
671
170
  max-width: 100%;
672
- cursor: pointer;
673
- text-align: left;
674
- }
675
-
676
- .cm-agent-card__endpoint-row:focus-visible {
677
- outline: 2px solid hsl(var(--primary) / 0.75);
678
- outline-offset: 2px;
679
- }
680
-
681
- .cm-agent-card__actions {
682
- display: flex;
683
- align-items: flex-start;
684
- gap: 0.55rem;
685
- padding: 1rem 1rem 1rem 0;
686
171
  }
687
172
 
688
173
  .cm-agent-card__action-stack {
689
174
  display: flex;
690
175
  align-items: flex-start;
691
- gap: 0.55rem;
692
176
  flex-wrap: wrap;
177
+ gap: 0.55rem;
693
178
  }
694
179
 
695
- .cm-agent-card--skeleton {
696
- pointer-events: none;
180
+ .cm-agent-card__endpoint-label,
181
+ .cm-agent-card__creator-label {
182
+ color: hsl(var(--muted-foreground));
183
+ font-family: var(--font-mono), monospace;
184
+ font-size: 0.7rem;
185
+ letter-spacing: 0.08em;
186
+ line-height: 1.25;
187
+ text-transform: uppercase;
697
188
  }
698
189
 
699
- .cm-agent-card__skeleton {
190
+ .cm-agent-card__endpoint-row {
191
+ display: grid;
192
+ grid-template-columns: minmax(0, 1fr) auto;
193
+ gap: 0.6rem;
194
+ align-items: center;
195
+ min-width: 0;
196
+ max-width: 100%;
197
+ padding: 0.65rem 0.75rem;
198
+ border: 1px solid hsl(var(--border) / 0.65);
700
199
  border-radius: var(--radius, 0.25rem);
701
- background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));
702
- background-size: 220% 100%;
703
- animation: cm-agent-card-shimmer 1.6s linear infinite;
704
- }
705
-
706
- .cm-agent-card__skeleton--avatar {
707
- width: 3.5rem;
708
- height: 3.5rem;
709
- border-radius: max(var(--radius, 0.25rem), 0.35rem);
710
- }
711
-
712
- .cm-agent-card__skeleton--title {
713
- height: 1.1rem;
714
- width: 10rem;
715
- }
716
-
717
- .cm-agent-card__skeleton--line {
718
- height: 0.82rem;
719
- width: 100%;
720
- }
721
-
722
- .cm-agent-card__skeleton--line.short {
723
- width: 76%;
724
- }
725
-
726
- .cm-agent-card__skeleton--metric {
727
- min-height: 4.4rem;
728
- }
729
-
730
- .cm-agent-card__skeleton--focus {
731
- min-height: 4.3rem;
732
- }
733
-
734
- .cm-agent-card__skeleton--tags {
735
- min-height: 5.6rem;
736
- }
737
-
738
- .cm-agent-card__skeleton--footer {
739
- min-height: 4.2rem;
740
- }
741
-
742
- @keyframes cm-agent-card-shimmer {
743
- 0% {
744
- background-position: 200% 0;
745
- }
746
-
747
- 100% {
748
- background-position: -200% 0;
749
- }
750
- }
751
-
752
- @media (max-width: 720px) {
753
- .cm-agent-card__main {
754
- gap: 0.65rem;
755
- padding: 0.85rem;
756
- }
757
-
758
- .cm-agent-card__avatar {
759
- width: 2.5rem;
760
- height: 2.5rem;
761
- }
762
-
763
- .cm-agent-card__title {
764
- font-size: 0.92rem;
765
- }
766
-
767
- .cm-agent-card__description {
768
- font-size: 0.78rem;
769
- line-height: 1.4;
770
- }
771
-
772
- .cm-agent-card__metrics {
773
- grid-template-columns: repeat(2, 1fr);
774
- }
775
-
776
- .cm-agent-card__metric {
777
- padding: 0.55rem 0.7rem;
778
- }
779
-
780
- .cm-agent-card__focus {
781
- padding: 0.7rem 0.8rem;
782
- }
783
-
784
- .cm-agent-card__badges,
785
- .cm-agent-card__tags {
786
- gap: 0.3rem;
787
- }
788
-
789
- .cm-agent-card__badge,
790
- .cm-agent-card__tag {
791
- min-height: 1.45rem;
792
- padding: 0 0.5rem;
793
- font-size: 0.65rem;
794
- }
795
-
796
- .cm-agent-card__endpoint-code,
797
- .cm-agent-card__creator-value {
798
- font-size: 0.68rem;
799
- }
800
-
801
- .cm-agent-card__actions {
802
- padding: 0 0.85rem 0.85rem;
803
- justify-content: flex-end;
804
- flex-wrap: wrap;
805
- }
200
+ background: hsl(var(--background) / 0.42);
201
+ cursor: pointer;
806
202
  }
807
203
 
808
- @container (max-width: 26rem) {
809
- .cm-agent-card__metrics {
204
+ @container (max-width: 22rem) {
205
+ .cm-agent-card__identity-meta {
810
206
  grid-template-columns: minmax(0, 1fr);
811
207
  }
812
-
813
- .cm-agent-card--market .cm-agent-card__metrics {
814
- grid-template-columns: repeat(3, minmax(0, 1fr));
815
- }
816
-
817
- .cm-agent-card__header {
818
- gap: 0.7rem;
819
- }
820
-
821
- .cm-agent-card__avatar {
822
- width: 2.75rem;
823
- height: 2.75rem;
824
- }
825
208
  }
826
209
 
827
- @container (max-width: 21rem) {
828
- .cm-agent-card--market .cm-agent-card__main {
829
- gap: 0.44rem;
830
- padding: 0.62rem;
831
- }
832
-
833
- .cm-agent-card--market .cm-agent-card__description {
834
- font-size: 0.72rem;
835
- }
210
+ .cm-agent-card__endpoint-code,
211
+ .cm-agent-card__creator-value,
212
+ .cm-agent-card__meta-value {
213
+ min-width: 0;
214
+ max-width: 100%;
215
+ color: hsl(var(--primary));
216
+ font-family: var(--font-mono), monospace;
217
+ font-size: 0.8rem;
218
+ overflow-wrap: anywhere;
219
+ }
836
220
 
837
- .cm-agent-card__endpoint-row {
838
- grid-template-columns: minmax(0, 1fr);
839
- }
221
+ .cm-agent-card__creator-value {
222
+ color: hsl(var(--accent));
840
223
  }