@mast-ai/react-ui 0.3.0 → 0.5.0

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 (8) hide show
  1. package/dist/components/ConversationPanel.d.ts +10 -6
  2. package/dist/context.d.ts +5 -5
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +382 -361
  5. package/dist/styles.css +670 -629
  6. package/dist/themes/tailwind-shadcn.css +36 -29
  7. package/dist/types.d.ts +31 -9
  8. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,48 +1,98 @@
1
1
  /* @mast-ai/react-ui default stylesheet — import as '@mast-ai/react-ui/styles.css' */
2
2
 
3
- /* -------------------------------------------------------------------------- */
4
- /* Theme tokens */
5
- /* -------------------------------------------------------------------------- */
6
-
7
- [data-mast-root] {
8
- /* Color */
9
- --mast-bg: #ffffff;
10
- --mast-bg-subtle: #f9fafb;
11
- --mast-fg: #111827;
12
- --mast-fg-muted: #6b7280;
13
- --mast-border: #e5e7eb;
14
- --mast-accent: #2563eb;
15
- --mast-accent-fg: #ffffff;
16
- --mast-thinking-bg: #fefce8;
17
- --mast-thinking-fg: #854d0e;
18
- --mast-tool-bg: #f0fdf4;
19
- --mast-tool-fg: #166534;
20
- --mast-tool-pending: #f59e0b;
21
- --mast-tool-error-bg: #fef2f2;
22
- --mast-tool-error-fg: #991b1b;
23
- --mast-tool-cancelled-bg: #f3f4f6;
24
- --mast-tool-cancelled-fg: #4b5563;
25
- --mast-user-bubble: #dbeafe;
26
- --mast-user-fg: #1e3a8a;
27
- --mast-mention-chip-bg: #dbeafe;
28
- --mast-mention-chip-fg: #1e3a8a;
29
- --mast-mention-picker-bg: var(--mast-bg);
30
- --mast-mention-picker-active-bg: var(--mast-bg-subtle);
31
- --mast-mention-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
32
-
33
- /* Typography */
34
- --mast-font: system-ui, sans-serif;
35
- --mast-font-mono: ui-monospace, monospace;
36
- --mast-text-sm: 0.875rem;
37
- --mast-text-base: 1rem;
38
-
39
- /* Spacing */
40
- --mast-gap: 0.75rem;
41
- --mast-radius: 0.5rem;
42
- }
43
-
44
- @media (prefers-color-scheme: dark) {
45
- [data-mast-root]:not([data-mast-theme='light']) {
3
+ /*
4
+ * Every rule below is wrapped in @layer mast-ai. CSS cascade layers always
5
+ * lose to unlayered rules regardless of source order, so a host stylesheet
6
+ * authored against the existing class names overrides the library at equal
7
+ * specificity without `!important` or extra wrapping. Hosts that prefer to
8
+ * keep their overrides layered can author them inside their own layer
9
+ * declared after `mast-ai`, e.g.:
10
+ *
11
+ * @layer mast-ai, host;
12
+ * @layer host {
13
+ * .mast-user-message-bubble { border-radius: 0; }
14
+ * }
15
+ */
16
+ @layer mast-ai {
17
+ /* -------------------------------------------------------------------------- */
18
+ /* Theme tokens */
19
+ /* -------------------------------------------------------------------------- */
20
+
21
+ [data-mast-root] {
22
+ /* Color */
23
+ --mast-bg: #ffffff;
24
+ --mast-bg-subtle: #f9fafb;
25
+ --mast-fg: #111827;
26
+ --mast-fg-muted: #6b7280;
27
+ --mast-border: #e5e7eb;
28
+ --mast-accent: #2563eb;
29
+ --mast-accent-fg: #ffffff;
30
+ --mast-thinking-bg: #fefce8;
31
+ --mast-thinking-fg: #854d0e;
32
+ --mast-tool-bg: #f0fdf4;
33
+ --mast-tool-fg: #166534;
34
+ --mast-tool-pending: #f59e0b;
35
+ --mast-tool-error-bg: #fef2f2;
36
+ --mast-tool-error-fg: #991b1b;
37
+ --mast-tool-cancelled-bg: #f3f4f6;
38
+ --mast-tool-cancelled-fg: #4b5563;
39
+ --mast-user-bubble: #dbeafe;
40
+ --mast-user-fg: #1e3a8a;
41
+ --mast-mention-chip-bg: #dbeafe;
42
+ --mast-mention-chip-fg: #1e3a8a;
43
+ --mast-mention-picker-bg: var(--mast-bg);
44
+ --mast-mention-picker-active-bg: var(--mast-bg-subtle);
45
+ --mast-mention-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
46
+
47
+ /* Typography. Defaults inherit from the host so the panel adopts the
48
+ surrounding app's font and base size automatically. Hosts that want a
49
+ fixed look pin --mast-font / --mast-text-base on [data-mast-root]. */
50
+ --mast-font: inherit;
51
+ --mast-font-mono: ui-monospace, monospace;
52
+ --mast-text-sm: 0.875em;
53
+ --mast-text-base: 1em;
54
+
55
+ /* Spacing */
56
+ --mast-gap: 0.75rem;
57
+ --mast-radius: 0.5rem;
58
+
59
+ /* Element-shape tokens. Hosts adjust button, input, and message borders
60
+ through these without reaching into specific class names. Defaults
61
+ preserve current visuals. */
62
+ --mast-button-border: 1px solid transparent;
63
+ --mast-button-padding: 0.4rem 0.9rem;
64
+ --mast-input-border: 1px solid var(--mast-border);
65
+ --mast-message-border-width: 1px;
66
+ --mast-user-bubble-border: none;
67
+ }
68
+
69
+ @media (prefers-color-scheme: dark) {
70
+ [data-mast-root][data-mast-theme='auto'] {
71
+ --mast-bg: #111827;
72
+ --mast-bg-subtle: #1f2937;
73
+ --mast-fg: #f9fafb;
74
+ --mast-fg-muted: #9ca3af;
75
+ --mast-border: #374151;
76
+ --mast-accent: #3b82f6;
77
+ --mast-accent-fg: #ffffff;
78
+ --mast-thinking-bg: #1c1917;
79
+ --mast-thinking-fg: #fcd34d;
80
+ --mast-tool-bg: #052e16;
81
+ --mast-tool-fg: #86efac;
82
+ --mast-tool-pending: #fbbf24;
83
+ --mast-tool-error-bg: #450a0a;
84
+ --mast-tool-error-fg: #fecaca;
85
+ --mast-tool-cancelled-bg: #1f2937;
86
+ --mast-tool-cancelled-fg: #d1d5db;
87
+ --mast-user-bubble: #1e3a8a;
88
+ --mast-user-fg: #bfdbfe;
89
+ --mast-mention-chip-bg: #1e3a8a;
90
+ --mast-mention-chip-fg: #bfdbfe;
91
+ --mast-mention-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
92
+ }
93
+ }
94
+
95
+ [data-mast-root][data-mast-theme='dark'] {
46
96
  --mast-bg: #111827;
47
97
  --mast-bg-subtle: #1f2937;
48
98
  --mast-fg: #f9fafb;
@@ -65,589 +115,580 @@
65
115
  --mast-mention-chip-fg: #bfdbfe;
66
116
  --mast-mention-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
67
117
  }
68
- }
69
-
70
- [data-mast-root][data-mast-theme='dark'] {
71
- --mast-bg: #111827;
72
- --mast-bg-subtle: #1f2937;
73
- --mast-fg: #f9fafb;
74
- --mast-fg-muted: #9ca3af;
75
- --mast-border: #374151;
76
- --mast-accent: #3b82f6;
77
- --mast-accent-fg: #ffffff;
78
- --mast-thinking-bg: #1c1917;
79
- --mast-thinking-fg: #fcd34d;
80
- --mast-tool-bg: #052e16;
81
- --mast-tool-fg: #86efac;
82
- --mast-tool-pending: #fbbf24;
83
- --mast-tool-error-bg: #450a0a;
84
- --mast-tool-error-fg: #fecaca;
85
- --mast-tool-cancelled-bg: #1f2937;
86
- --mast-tool-cancelled-fg: #d1d5db;
87
- --mast-user-bubble: #1e3a8a;
88
- --mast-user-fg: #bfdbfe;
89
- --mast-mention-chip-bg: #1e3a8a;
90
- --mast-mention-chip-fg: #bfdbfe;
91
- --mast-mention-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
92
- }
93
-
94
- /* -------------------------------------------------------------------------- */
95
- /* Utilities */
96
- /* -------------------------------------------------------------------------- */
97
-
98
- .mast-visually-hidden {
99
- position: absolute;
100
- width: 1px;
101
- height: 1px;
102
- padding: 0;
103
- margin: -1px;
104
- overflow: hidden;
105
- clip: rect(0, 0, 0, 0);
106
- white-space: nowrap;
107
- border: 0;
108
- }
109
-
110
- @keyframes mast-spin {
111
- from {
112
- transform: rotate(0deg);
113
- }
114
- to {
115
- transform: rotate(360deg);
116
- }
117
- }
118
-
119
- .mast-spin {
120
- animation: mast-spin 1s linear infinite;
121
- }
122
-
123
- @keyframes mast-pulse {
124
- 0%,
125
- 100% {
126
- opacity: 1;
127
- }
128
- 50% {
129
- opacity: 0.4;
130
- }
131
- }
132
-
133
- /* -------------------------------------------------------------------------- */
134
- /* ConversationPanel */
135
- /* -------------------------------------------------------------------------- */
136
-
137
- [data-mast-root] {
138
- display: flex;
139
- flex-direction: column;
140
- gap: var(--mast-gap);
141
- height: 100%;
142
- min-height: 0;
143
- background: var(--mast-bg);
144
- color: var(--mast-fg);
145
- font-family: var(--mast-font);
146
- font-size: var(--mast-text-base);
147
- border: 1px solid var(--mast-border);
148
- border-radius: var(--mast-radius);
149
- padding: var(--mast-gap);
150
- box-sizing: border-box;
151
- }
152
-
153
- [data-mast-root] * {
154
- box-sizing: border-box;
155
- }
156
-
157
- /* -------------------------------------------------------------------------- */
158
- /* MessageList */
159
- /* -------------------------------------------------------------------------- */
160
-
161
- .mast-message-list {
162
- flex: 1 1 auto;
163
- min-height: 0;
164
- overflow-y: auto;
165
- padding: var(--mast-gap);
166
- background: var(--mast-bg-subtle);
167
- border-radius: var(--mast-radius);
168
- }
169
-
170
- /* -------------------------------------------------------------------------- */
171
- /* UserMessage */
172
- /* -------------------------------------------------------------------------- */
173
-
174
- [data-mast-user-message] {
175
- display: flex;
176
- justify-content: flex-end;
177
- margin-bottom: var(--mast-gap);
178
- }
179
-
180
- .mast-user-message-bubble {
181
- background: var(--mast-user-bubble);
182
- color: var(--mast-user-fg);
183
- padding: 0.5rem 0.75rem;
184
- border-radius: var(--mast-radius);
185
- max-width: 80%;
186
- white-space: pre-wrap;
187
- word-wrap: break-word;
188
- }
189
-
190
- /* -------------------------------------------------------------------------- */
191
- /* AssistantMessage */
192
- /* -------------------------------------------------------------------------- */
193
-
194
- [data-mast-assistant-message] {
195
- display: flex;
196
- flex-direction: column;
197
- gap: var(--mast-gap);
198
- margin-bottom: var(--mast-gap);
199
- color: var(--mast-fg);
200
- }
201
-
202
- .mast-assistant-message-text {
203
- margin: 0;
204
- white-space: pre-wrap;
205
- }
206
-
207
- .mast-assistant-message-markdown {
208
- line-height: 1.5;
209
- }
210
-
211
- .mast-assistant-message-markdown > :first-child {
212
- margin-top: 0;
213
- }
214
-
215
- .mast-assistant-message-markdown > :last-child {
216
- margin-bottom: 0;
217
- }
218
-
219
- .mast-assistant-message-markdown pre {
220
- background: var(--mast-bg-subtle);
221
- border: 1px solid var(--mast-border);
222
- border-radius: var(--mast-radius);
223
- padding: 0.5rem 0.75rem;
224
- overflow-x: auto;
225
- font-family: var(--mast-font-mono);
226
- font-size: var(--mast-text-sm);
227
- }
228
-
229
- .mast-assistant-message-markdown code {
230
- font-family: var(--mast-font-mono);
231
- font-size: 0.9em;
232
- }
233
-
234
- .mast-assistant-message-markdown :not(pre) > code {
235
- background: var(--mast-bg-subtle);
236
- border: 1px solid var(--mast-border);
237
- border-radius: 0.25rem;
238
- padding: 0.05rem 0.3rem;
239
- }
240
-
241
- /* -------------------------------------------------------------------------- */
242
- /* ThinkingBlock */
243
- /* -------------------------------------------------------------------------- */
244
-
245
- .mast-thinking-block {
246
- background: var(--mast-thinking-bg);
247
- color: var(--mast-thinking-fg);
248
- border: 1px solid var(--mast-border);
249
- border-radius: var(--mast-radius);
250
- padding: 0.5rem 0.75rem;
251
- font-size: var(--mast-text-sm);
252
- }
253
-
254
- .mast-thinking-block-summary {
255
- display: flex;
256
- align-items: center;
257
- gap: 0.5rem;
258
- cursor: pointer;
259
- list-style: none;
260
- user-select: none;
261
- }
262
-
263
- .mast-thinking-block-summary::-webkit-details-marker {
264
- display: none;
265
- }
266
-
267
- .mast-thinking-block-icon {
268
- display: inline-flex;
269
- align-items: center;
270
- }
271
-
272
- .mast-thinking-block-label {
273
- font-weight: 500;
274
- }
275
-
276
- .mast-thinking-block-pulse {
277
- display: inline-block;
278
- width: 0.5rem;
279
- height: 0.5rem;
280
- border-radius: 9999px;
281
- background: currentColor;
282
- animation: mast-pulse 1.2s ease-in-out infinite;
283
- }
284
-
285
- .mast-thinking-block-content {
286
- margin-top: 0.5rem;
287
- white-space: pre-wrap;
288
- font-family: var(--mast-font-mono);
289
- font-size: var(--mast-text-sm);
290
- }
291
-
292
- /* -------------------------------------------------------------------------- */
293
- /* ToolCallBlock */
294
- /* -------------------------------------------------------------------------- */
295
-
296
- .mast-tool-call-block {
297
- background: var(--mast-tool-bg);
298
- color: var(--mast-tool-fg);
299
- border: 1px solid var(--mast-border);
300
- border-radius: var(--mast-radius);
301
- padding: 0.5rem 0.75rem;
302
- font-size: var(--mast-text-sm);
303
- }
304
-
305
- .mast-tool-call-block[data-streaming='true'] .mast-tool-call-block-status {
306
- color: var(--mast-tool-pending);
307
- }
308
-
309
- .mast-tool-call-block[data-status='error'] {
310
- background: var(--mast-tool-error-bg, #fef2f2);
311
- color: var(--mast-tool-error-fg, #991b1b);
312
- }
313
-
314
- .mast-tool-call-block[data-status='error'] .mast-tool-call-block-status {
315
- color: var(--mast-tool-error-fg, #991b1b);
316
- }
317
-
318
- .mast-tool-call-block[data-status='cancelled'] {
319
- background: var(--mast-tool-cancelled-bg, #f3f4f6);
320
- color: var(--mast-tool-cancelled-fg, #4b5563);
321
- }
322
-
323
- .mast-tool-call-block[data-status='cancelled'] .mast-tool-call-block-status {
324
- color: var(--mast-tool-cancelled-fg, #4b5563);
325
- }
326
-
327
- .mast-tool-call-block-header {
328
- display: flex;
329
- align-items: center;
330
- gap: 0.5rem;
331
- cursor: pointer;
332
- list-style: none;
333
- user-select: none;
334
- }
335
-
336
- .mast-tool-call-block-header::-webkit-details-marker {
337
- display: none;
338
- }
339
-
340
- .mast-tool-call-block-chevron {
341
- display: inline-block;
342
- width: 0.75rem;
343
- color: var(--mast-fg-muted);
344
- transition: transform 0.15s ease;
345
- }
346
-
347
- .mast-tool-call-block[open] > .mast-tool-call-block-header > .mast-tool-call-block-chevron {
348
- transform: rotate(90deg);
349
- }
350
-
351
- .mast-tool-call-block-body {
352
- display: flex;
353
- flex-direction: column;
354
- gap: 0.5rem;
355
- margin-top: 0.5rem;
356
- }
357
-
358
- .mast-tool-call-block-status,
359
- .mast-tool-call-block-wrench {
360
- display: inline-flex;
361
- align-items: center;
362
- }
363
-
364
- .mast-tool-call-block-name {
365
- font-family: var(--mast-font-mono);
366
- font-weight: 500;
367
- }
368
-
369
- .mast-tool-call-block-sub-output {
370
- display: flex;
371
- flex-direction: column;
372
- gap: 0.5rem;
373
- }
374
-
375
- .mast-tool-call-block-sub-text {
376
- white-space: pre-wrap;
377
- color: var(--mast-fg);
378
- }
379
-
380
- .mast-tool-call-block-nested {
381
- display: flex;
382
- flex-direction: column;
383
- gap: 0.5rem;
384
- margin-left: 0.75rem;
385
- padding-left: 0.5rem;
386
- border-left: 2px solid var(--mast-border);
387
- }
388
-
389
- .mast-tool-call-block-args,
390
- .mast-tool-call-block-result {
391
- border: 1px solid var(--mast-border);
392
- border-radius: var(--mast-radius);
393
- background: var(--mast-bg);
394
- color: var(--mast-fg);
395
- padding: 0.25rem 0.5rem;
396
- }
397
-
398
- .mast-tool-call-block-args > summary,
399
- .mast-tool-call-block-result > summary {
400
- cursor: pointer;
401
- user-select: none;
402
- font-size: var(--mast-text-sm);
403
- color: var(--mast-fg-muted);
404
- }
405
-
406
- .mast-tool-call-block-pre {
407
- margin: 0.5rem 0 0 0;
408
- padding: 0.5rem;
409
- background: var(--mast-bg-subtle);
410
- border-radius: 0.25rem;
411
- overflow-x: auto;
412
- font-family: var(--mast-font-mono);
413
- font-size: var(--mast-text-sm);
414
- white-space: pre-wrap;
415
- word-break: break-word;
416
- }
417
-
418
- /* -------------------------------------------------------------------------- */
419
- /* ChatInput */
420
- /* -------------------------------------------------------------------------- */
421
-
422
- [data-mast-chat-input] {
423
- display: flex;
424
- align-items: flex-end;
425
- gap: 0.5rem;
426
- padding: 0.5rem;
427
- background: var(--mast-bg);
428
- border: 1px solid var(--mast-border);
429
- border-radius: var(--mast-radius);
430
- }
431
-
432
- .mast-chat-input-textarea {
433
- flex: 1 1 auto;
434
- resize: none;
435
- background: transparent;
436
- color: var(--mast-fg);
437
- font: inherit;
438
- border: none;
439
- outline: none;
440
- padding: 0.25rem 0.5rem;
441
- min-height: 1.5rem;
442
- line-height: 1.4;
443
- }
444
-
445
- .mast-chat-input-textarea::placeholder {
446
- color: var(--mast-fg-muted);
447
- }
448
-
449
- .mast-chat-input-textarea:disabled {
450
- opacity: 0.6;
451
- cursor: not-allowed;
452
- }
453
-
454
- .mast-chat-input-send,
455
- .mast-chat-input-cancel {
456
- display: inline-flex;
457
- align-items: center;
458
- justify-content: center;
459
- width: 2rem;
460
- height: 2rem;
461
- flex-shrink: 0;
462
- background: var(--mast-accent);
463
- color: var(--mast-accent-fg);
464
- border: none;
465
- border-radius: var(--mast-radius);
466
- cursor: pointer;
467
- padding: 0;
468
- }
469
-
470
- .mast-chat-input-send:disabled {
471
- opacity: 0.5;
472
- cursor: not-allowed;
473
- }
474
-
475
- .mast-chat-input-cancel {
476
- background: var(--mast-tool-pending);
477
- }
478
-
479
- /* -------------------------------------------------------------------------- */
480
- /* Inline approval */
481
- /* -------------------------------------------------------------------------- */
482
-
483
- .mast-inline-approval {
484
- display: flex;
485
- flex-direction: column;
486
- gap: 0.5rem;
487
- padding: 0.75rem;
488
- border: 1px solid var(--mast-tool-pending);
489
- border-radius: var(--mast-radius);
490
- background: var(--mast-thinking-bg);
491
- color: var(--mast-thinking-fg);
492
- }
493
-
494
- .mast-inline-approval-header {
495
- display: flex;
496
- align-items: center;
497
- gap: 0.5rem;
498
- font-size: var(--mast-text-sm);
499
- }
500
-
501
- .mast-inline-approval-icon {
502
- display: inline-flex;
503
- align-items: center;
504
- }
505
-
506
- .mast-inline-approval-name {
507
- font-family: var(--mast-font-mono);
508
- font-weight: 600;
509
- }
510
-
511
- .mast-inline-approval-label {
512
- color: var(--mast-fg-muted);
513
- }
514
-
515
- .mast-inline-approval-args {
516
- margin: 0;
517
- padding: 0.5rem;
518
- border-radius: 0.25rem;
519
- background: var(--mast-bg);
520
- color: var(--mast-fg);
521
- font-family: var(--mast-font-mono);
522
- font-size: 0.8125rem;
523
- overflow-x: auto;
524
- }
525
-
526
- .mast-inline-approval-actions {
527
- display: flex;
528
- gap: 0.5rem;
529
- }
530
-
531
- .mast-inline-approval-button {
532
- padding: 0.4rem 0.9rem;
533
- border-radius: 0.375rem;
534
- border: 1px solid transparent;
535
- font: inherit;
536
- cursor: pointer;
537
- }
538
-
539
- .mast-inline-approval-approve {
540
- background: var(--mast-accent);
541
- color: var(--mast-accent-fg);
542
- }
543
-
544
- .mast-inline-approval-reject {
545
- background: transparent;
546
- border-color: currentColor;
547
- color: inherit;
548
- }
549
-
550
- /* -------------------------------------------------------------------------- */
551
- /* Mention picker */
552
- /* -------------------------------------------------------------------------- */
553
-
554
- .mast-mention-input .mast-mention-input-field {
555
- flex: 1 1 auto;
556
- position: relative;
557
- min-width: 0;
558
- }
559
-
560
- .mast-mention-input-content {
561
- display: flex;
562
- flex-wrap: wrap;
563
- align-items: flex-start;
564
- gap: 0.25rem;
565
- width: 100%;
566
- min-width: 0;
567
- }
568
-
569
- .mast-mention-input .mast-mention-input-textarea {
570
- flex: 1 1 8rem;
571
- min-width: 8rem;
572
- }
573
-
574
- .mast-mention-segment-text {
575
- white-space: pre-wrap;
576
- align-self: center;
577
- font-size: var(--mast-text-base);
578
- }
579
-
580
- .mast-mention-chip {
581
- display: inline-flex;
582
- align-items: center;
583
- gap: 0.25rem;
584
- padding: 0.1rem 0.4rem;
585
- background: var(--mast-mention-chip-bg);
586
- color: var(--mast-mention-chip-fg);
587
- border-radius: 9999px;
588
- font-size: var(--mast-text-sm);
589
- font-weight: 500;
590
- }
591
-
592
- .mast-mention-chip-remove {
593
- display: inline-flex;
594
- align-items: center;
595
- justify-content: center;
596
- background: transparent;
597
- border: none;
598
- color: inherit;
599
- font: inherit;
600
- cursor: pointer;
601
- padding: 0;
602
- width: 1rem;
603
- height: 1rem;
604
- border-radius: 9999px;
605
- line-height: 1;
606
- }
607
-
608
- .mast-mention-chip-remove:hover,
609
- .mast-mention-chip-remove:focus-visible {
610
- background: rgba(0, 0, 0, 0.1);
611
- }
612
-
613
- .mast-mention-picker {
614
- position: absolute;
615
- bottom: 100%;
616
- left: 0;
617
- right: 0;
618
- margin: 0 0 0.25rem 0;
619
- padding: 0.25rem;
620
- list-style: none;
621
- background: var(--mast-mention-picker-bg);
622
- border: 1px solid var(--mast-border);
623
- border-radius: var(--mast-radius);
624
- box-shadow: var(--mast-mention-picker-shadow);
625
- max-height: 14rem;
626
- overflow-y: auto;
627
- z-index: 10;
628
- }
629
-
630
- .mast-mention-picker-item {
631
- padding: 0.35rem 0.5rem;
632
- border-radius: 0.25rem;
633
- cursor: pointer;
634
- font-size: var(--mast-text-sm);
635
- color: var(--mast-fg);
636
- }
637
-
638
- .mast-mention-picker-item:hover {
639
- background: var(--mast-mention-picker-active-bg);
640
- }
641
-
642
- .mast-mention-picker-active {
643
- background: var(--mast-mention-picker-active-bg);
644
- }
645
-
646
- .mast-mention-picker-item-label {
647
- font-weight: 500;
648
- }
649
-
650
- .mast-mention-picker-item-description {
651
- font-size: var(--mast-text-sm);
652
- color: var(--mast-fg-muted);
653
- }
118
+
119
+ /* -------------------------------------------------------------------------- */
120
+ /* Utilities */
121
+ /* -------------------------------------------------------------------------- */
122
+
123
+ .mast-visually-hidden {
124
+ position: absolute;
125
+ width: 1px;
126
+ height: 1px;
127
+ padding: 0;
128
+ margin: -1px;
129
+ overflow: hidden;
130
+ clip: rect(0, 0, 0, 0);
131
+ white-space: nowrap;
132
+ border: 0;
133
+ }
134
+
135
+ @keyframes mast-spin {
136
+ from {
137
+ transform: rotate(0deg);
138
+ }
139
+ to {
140
+ transform: rotate(360deg);
141
+ }
142
+ }
143
+
144
+ .mast-spin {
145
+ animation: mast-spin 1s linear infinite;
146
+ }
147
+
148
+ @keyframes mast-pulse {
149
+ 0%,
150
+ 100% {
151
+ opacity: 1;
152
+ }
153
+ 50% {
154
+ opacity: 0.4;
155
+ }
156
+ }
157
+
158
+ /* -------------------------------------------------------------------------- */
159
+ /* ConversationPanel */
160
+ /* -------------------------------------------------------------------------- */
161
+
162
+ /*
163
+ * `[data-mast-root]` is purely a theming scope: it defines the `--mast-*`
164
+ * tokens (above) and resets `box-sizing` for descendants so layout maths
165
+ * inside the panel stay predictable. Hosts that want the bundled panel
166
+ * chrome (border, padding, flex column, height: 100%) opt in by adding the
167
+ * `.mast-panel` class. `<ConversationPanel>` renders both the data
168
+ * attribute and the class so the default user-facing component looks
169
+ * identical to before; consumers composing primitives (see USAGE.md §8)
170
+ * can skip the class to drop the chrome and use their own card.
171
+ */
172
+ [data-mast-root] {
173
+ box-sizing: border-box;
174
+ }
175
+
176
+ [data-mast-root] * {
177
+ box-sizing: border-box;
178
+ }
179
+
180
+ .mast-panel {
181
+ display: flex;
182
+ flex-direction: column;
183
+ gap: var(--mast-gap);
184
+ height: 100%;
185
+ min-height: 0;
186
+ background: var(--mast-bg);
187
+ color: var(--mast-fg);
188
+ font-family: var(--mast-font);
189
+ font-size: var(--mast-text-base);
190
+ border: 1px solid var(--mast-border);
191
+ border-radius: var(--mast-radius);
192
+ padding: var(--mast-gap);
193
+ }
194
+
195
+ /* -------------------------------------------------------------------------- */
196
+ /* MessageList */
197
+ /* -------------------------------------------------------------------------- */
198
+
199
+ .mast-message-list {
200
+ flex: 1 1 auto;
201
+ min-height: 0;
202
+ overflow-y: auto;
203
+ padding: var(--mast-gap);
204
+ background: var(--mast-bg-subtle);
205
+ border-radius: var(--mast-radius);
206
+ }
207
+
208
+ /* -------------------------------------------------------------------------- */
209
+ /* UserMessage */
210
+ /* -------------------------------------------------------------------------- */
211
+
212
+ [data-mast-user-message] {
213
+ display: flex;
214
+ justify-content: flex-end;
215
+ margin-bottom: var(--mast-gap);
216
+ }
217
+
218
+ .mast-user-message-bubble {
219
+ background: var(--mast-user-bubble);
220
+ color: var(--mast-user-fg);
221
+ padding: 0.5rem 0.75rem;
222
+ border: var(--mast-user-bubble-border);
223
+ border-radius: var(--mast-radius);
224
+ max-width: 80%;
225
+ white-space: pre-wrap;
226
+ word-wrap: break-word;
227
+ }
228
+
229
+ /* -------------------------------------------------------------------------- */
230
+ /* AssistantMessage */
231
+ /* -------------------------------------------------------------------------- */
232
+
233
+ [data-mast-assistant-message] {
234
+ display: flex;
235
+ flex-direction: column;
236
+ gap: var(--mast-gap);
237
+ margin-bottom: var(--mast-gap);
238
+ color: var(--mast-fg);
239
+ }
240
+
241
+ .mast-assistant-message-text {
242
+ margin: 0;
243
+ white-space: pre-wrap;
244
+ }
245
+
246
+ .mast-assistant-message-markdown {
247
+ line-height: 1.5;
248
+ }
249
+
250
+ .mast-assistant-message-markdown > :first-child {
251
+ margin-top: 0;
252
+ }
253
+
254
+ .mast-assistant-message-markdown > :last-child {
255
+ margin-bottom: 0;
256
+ }
257
+
258
+ .mast-assistant-message-markdown pre {
259
+ background: var(--mast-bg-subtle);
260
+ border: 1px solid var(--mast-border);
261
+ border-radius: var(--mast-radius);
262
+ padding: 0.5rem 0.75rem;
263
+ overflow-x: auto;
264
+ font-family: var(--mast-font-mono);
265
+ font-size: var(--mast-text-sm);
266
+ }
267
+
268
+ .mast-assistant-message-markdown code {
269
+ font-family: var(--mast-font-mono);
270
+ font-size: 0.9em;
271
+ }
272
+
273
+ .mast-assistant-message-markdown :not(pre) > code {
274
+ background: var(--mast-bg-subtle);
275
+ border: 1px solid var(--mast-border);
276
+ border-radius: 0.25rem;
277
+ padding: 0.05rem 0.3rem;
278
+ }
279
+
280
+ /* -------------------------------------------------------------------------- */
281
+ /* ThinkingBlock */
282
+ /* -------------------------------------------------------------------------- */
283
+
284
+ .mast-thinking-block {
285
+ background: var(--mast-thinking-bg);
286
+ color: var(--mast-thinking-fg);
287
+ border: var(--mast-message-border-width) solid var(--mast-border);
288
+ border-radius: var(--mast-radius);
289
+ padding: 0.5rem 0.75rem;
290
+ font-size: var(--mast-text-sm);
291
+ }
292
+
293
+ .mast-thinking-block-summary {
294
+ display: flex;
295
+ align-items: center;
296
+ gap: 0.5rem;
297
+ cursor: pointer;
298
+ list-style: none;
299
+ user-select: none;
300
+ }
301
+
302
+ .mast-thinking-block-summary::-webkit-details-marker {
303
+ display: none;
304
+ }
305
+
306
+ .mast-thinking-block-icon {
307
+ display: inline-flex;
308
+ align-items: center;
309
+ }
310
+
311
+ .mast-thinking-block-label {
312
+ font-weight: 500;
313
+ }
314
+
315
+ .mast-thinking-block-pulse {
316
+ display: inline-block;
317
+ width: 0.5rem;
318
+ height: 0.5rem;
319
+ border-radius: 9999px;
320
+ background: currentColor;
321
+ animation: mast-pulse 1.2s ease-in-out infinite;
322
+ }
323
+
324
+ .mast-thinking-block-content {
325
+ margin-top: 0.5rem;
326
+ white-space: pre-wrap;
327
+ font-family: var(--mast-font-mono);
328
+ font-size: var(--mast-text-sm);
329
+ }
330
+
331
+ /* -------------------------------------------------------------------------- */
332
+ /* ToolCallBlock */
333
+ /* -------------------------------------------------------------------------- */
334
+
335
+ .mast-tool-call-block {
336
+ background: var(--mast-tool-bg);
337
+ color: var(--mast-tool-fg);
338
+ border: var(--mast-message-border-width) solid var(--mast-border);
339
+ border-radius: var(--mast-radius);
340
+ padding: 0.5rem 0.75rem;
341
+ font-size: var(--mast-text-sm);
342
+ }
343
+
344
+ .mast-tool-call-block[data-streaming='true'] .mast-tool-call-block-status {
345
+ color: var(--mast-tool-pending);
346
+ }
347
+
348
+ .mast-tool-call-block[data-status='error'] {
349
+ background: var(--mast-tool-error-bg, #fef2f2);
350
+ color: var(--mast-tool-error-fg, #991b1b);
351
+ }
352
+
353
+ .mast-tool-call-block[data-status='error'] .mast-tool-call-block-status {
354
+ color: var(--mast-tool-error-fg, #991b1b);
355
+ }
356
+
357
+ .mast-tool-call-block[data-status='cancelled'] {
358
+ background: var(--mast-tool-cancelled-bg, #f3f4f6);
359
+ color: var(--mast-tool-cancelled-fg, #4b5563);
360
+ }
361
+
362
+ .mast-tool-call-block[data-status='cancelled'] .mast-tool-call-block-status {
363
+ color: var(--mast-tool-cancelled-fg, #4b5563);
364
+ }
365
+
366
+ .mast-tool-call-block-header {
367
+ display: flex;
368
+ align-items: center;
369
+ gap: 0.5rem;
370
+ cursor: pointer;
371
+ list-style: none;
372
+ user-select: none;
373
+ }
374
+
375
+ .mast-tool-call-block-header::-webkit-details-marker {
376
+ display: none;
377
+ }
378
+
379
+ .mast-tool-call-block-chevron {
380
+ display: inline-block;
381
+ width: 0.75rem;
382
+ color: var(--mast-fg-muted);
383
+ transition: transform 0.15s ease;
384
+ }
385
+
386
+ .mast-tool-call-block[open] > .mast-tool-call-block-header > .mast-tool-call-block-chevron {
387
+ transform: rotate(90deg);
388
+ }
389
+
390
+ .mast-tool-call-block-body {
391
+ display: flex;
392
+ flex-direction: column;
393
+ gap: 0.5rem;
394
+ margin-top: 0.5rem;
395
+ }
396
+
397
+ .mast-tool-call-block-status,
398
+ .mast-tool-call-block-wrench {
399
+ display: inline-flex;
400
+ align-items: center;
401
+ }
402
+
403
+ .mast-tool-call-block-name {
404
+ font-family: var(--mast-font-mono);
405
+ font-weight: 500;
406
+ }
407
+
408
+ .mast-tool-call-block-sub-output {
409
+ display: flex;
410
+ flex-direction: column;
411
+ gap: 0.5rem;
412
+ }
413
+
414
+ .mast-tool-call-block-sub-text {
415
+ white-space: pre-wrap;
416
+ color: var(--mast-fg);
417
+ }
418
+
419
+ .mast-tool-call-block-nested {
420
+ display: flex;
421
+ flex-direction: column;
422
+ gap: 0.5rem;
423
+ margin-left: 0.75rem;
424
+ padding-left: 0.5rem;
425
+ border-left: 2px solid var(--mast-border);
426
+ }
427
+
428
+ .mast-tool-call-block-args,
429
+ .mast-tool-call-block-result {
430
+ border: 1px solid var(--mast-border);
431
+ border-radius: var(--mast-radius);
432
+ background: var(--mast-bg);
433
+ color: var(--mast-fg);
434
+ padding: 0.25rem 0.5rem;
435
+ }
436
+
437
+ .mast-tool-call-block-args > summary,
438
+ .mast-tool-call-block-result > summary {
439
+ cursor: pointer;
440
+ user-select: none;
441
+ font-size: var(--mast-text-sm);
442
+ color: var(--mast-fg-muted);
443
+ }
444
+
445
+ .mast-tool-call-block-pre {
446
+ margin: 0.5rem 0 0 0;
447
+ padding: 0.5rem;
448
+ background: var(--mast-bg-subtle);
449
+ border-radius: 0.25rem;
450
+ overflow-x: auto;
451
+ font-family: var(--mast-font-mono);
452
+ font-size: var(--mast-text-sm);
453
+ white-space: pre-wrap;
454
+ word-break: break-word;
455
+ }
456
+
457
+ /* -------------------------------------------------------------------------- */
458
+ /* ChatInput */
459
+ /* -------------------------------------------------------------------------- */
460
+
461
+ [data-mast-chat-input] {
462
+ display: flex;
463
+ align-items: flex-end;
464
+ gap: 0.5rem;
465
+ padding: 0.5rem;
466
+ background: var(--mast-bg);
467
+ border: var(--mast-input-border);
468
+ border-radius: var(--mast-radius);
469
+ }
470
+
471
+ .mast-chat-input-textarea {
472
+ flex: 1 1 auto;
473
+ resize: none;
474
+ background: transparent;
475
+ color: var(--mast-fg);
476
+ font: inherit;
477
+ border: none;
478
+ outline: none;
479
+ padding: 0.25rem 0.5rem;
480
+ min-height: 1.5rem;
481
+ line-height: 1.4;
482
+ }
483
+
484
+ .mast-chat-input-textarea::placeholder {
485
+ color: var(--mast-fg-muted);
486
+ }
487
+
488
+ .mast-chat-input-textarea:disabled {
489
+ opacity: 0.6;
490
+ cursor: not-allowed;
491
+ }
492
+
493
+ .mast-chat-input-send,
494
+ .mast-chat-input-cancel {
495
+ display: inline-flex;
496
+ align-items: center;
497
+ justify-content: center;
498
+ width: 2rem;
499
+ height: 2rem;
500
+ flex-shrink: 0;
501
+ background: var(--mast-accent);
502
+ color: var(--mast-accent-fg);
503
+ border: var(--mast-button-border);
504
+ border-radius: var(--mast-radius);
505
+ cursor: pointer;
506
+ padding: 0;
507
+ font-family: inherit;
508
+ }
509
+
510
+ .mast-chat-input-send:disabled {
511
+ opacity: 0.5;
512
+ cursor: not-allowed;
513
+ }
514
+
515
+ .mast-chat-input-cancel {
516
+ background: var(--mast-tool-pending);
517
+ }
518
+
519
+ /* -------------------------------------------------------------------------- */
520
+ /* Inline approval */
521
+ /* -------------------------------------------------------------------------- */
522
+
523
+ .mast-inline-approval {
524
+ display: flex;
525
+ flex-direction: column;
526
+ gap: 0.5rem;
527
+ padding: 0.75rem;
528
+ border: 1px solid var(--mast-tool-pending);
529
+ border-radius: var(--mast-radius);
530
+ background: var(--mast-thinking-bg);
531
+ color: var(--mast-thinking-fg);
532
+ }
533
+
534
+ .mast-inline-approval-header {
535
+ display: flex;
536
+ align-items: center;
537
+ gap: 0.5rem;
538
+ font-size: var(--mast-text-sm);
539
+ }
540
+
541
+ .mast-inline-approval-icon {
542
+ display: inline-flex;
543
+ align-items: center;
544
+ }
545
+
546
+ .mast-inline-approval-name {
547
+ font-family: var(--mast-font-mono);
548
+ font-weight: 600;
549
+ }
550
+
551
+ .mast-inline-approval-label {
552
+ color: var(--mast-fg-muted);
553
+ }
554
+
555
+ .mast-inline-approval-args {
556
+ margin: 0;
557
+ padding: 0.5rem;
558
+ border-radius: 0.25rem;
559
+ background: var(--mast-bg);
560
+ color: var(--mast-fg);
561
+ font-family: var(--mast-font-mono);
562
+ font-size: 0.8125rem;
563
+ overflow-x: auto;
564
+ }
565
+
566
+ .mast-inline-approval-actions {
567
+ display: flex;
568
+ gap: 0.5rem;
569
+ }
570
+
571
+ .mast-inline-approval-button {
572
+ padding: var(--mast-button-padding);
573
+ border-radius: 0.375rem;
574
+ border: var(--mast-button-border);
575
+ font: inherit;
576
+ cursor: pointer;
577
+ }
578
+
579
+ .mast-inline-approval-approve {
580
+ background: var(--mast-accent);
581
+ color: var(--mast-accent-fg);
582
+ }
583
+
584
+ .mast-inline-approval-reject {
585
+ background: transparent;
586
+ border-color: currentColor;
587
+ color: inherit;
588
+ }
589
+
590
+ /* -------------------------------------------------------------------------- */
591
+ /* Mention picker */
592
+ /* -------------------------------------------------------------------------- */
593
+
594
+ .mast-mention-input .mast-mention-input-field {
595
+ flex: 1 1 auto;
596
+ position: relative;
597
+ min-width: 0;
598
+ }
599
+
600
+ .mast-mention-input-content {
601
+ display: flex;
602
+ flex-wrap: wrap;
603
+ align-items: flex-start;
604
+ gap: 0.25rem;
605
+ width: 100%;
606
+ min-width: 0;
607
+ }
608
+
609
+ .mast-mention-input .mast-mention-input-textarea {
610
+ flex: 1 1 8rem;
611
+ min-width: 8rem;
612
+ }
613
+
614
+ .mast-mention-segment-text {
615
+ white-space: pre-wrap;
616
+ align-self: center;
617
+ font-size: var(--mast-text-base);
618
+ }
619
+
620
+ .mast-mention-chip {
621
+ display: inline-flex;
622
+ align-items: center;
623
+ gap: 0.25rem;
624
+ padding: 0.1rem 0.4rem;
625
+ background: var(--mast-mention-chip-bg);
626
+ color: var(--mast-mention-chip-fg);
627
+ border-radius: 9999px;
628
+ font-size: var(--mast-text-sm);
629
+ font-weight: 500;
630
+ }
631
+
632
+ .mast-mention-chip-remove {
633
+ display: inline-flex;
634
+ align-items: center;
635
+ justify-content: center;
636
+ background: transparent;
637
+ border: none;
638
+ color: inherit;
639
+ font: inherit;
640
+ cursor: pointer;
641
+ padding: 0;
642
+ width: 1rem;
643
+ height: 1rem;
644
+ border-radius: 9999px;
645
+ line-height: 1;
646
+ }
647
+
648
+ .mast-mention-chip-remove:hover,
649
+ .mast-mention-chip-remove:focus-visible {
650
+ background: rgba(0, 0, 0, 0.1);
651
+ }
652
+
653
+ .mast-mention-picker {
654
+ position: absolute;
655
+ bottom: 100%;
656
+ left: 0;
657
+ right: 0;
658
+ margin: 0 0 0.25rem 0;
659
+ padding: 0.25rem;
660
+ list-style: none;
661
+ background: var(--mast-mention-picker-bg);
662
+ border: 1px solid var(--mast-border);
663
+ border-radius: var(--mast-radius);
664
+ box-shadow: var(--mast-mention-picker-shadow);
665
+ max-height: 14rem;
666
+ overflow-y: auto;
667
+ z-index: 10;
668
+ }
669
+
670
+ .mast-mention-picker-item {
671
+ padding: 0.35rem 0.5rem;
672
+ border-radius: 0.25rem;
673
+ cursor: pointer;
674
+ font-size: var(--mast-text-sm);
675
+ color: var(--mast-fg);
676
+ }
677
+
678
+ .mast-mention-picker-item:hover {
679
+ background: var(--mast-mention-picker-active-bg);
680
+ }
681
+
682
+ .mast-mention-picker-active {
683
+ background: var(--mast-mention-picker-active-bg);
684
+ }
685
+
686
+ .mast-mention-picker-item-label {
687
+ font-weight: 500;
688
+ }
689
+
690
+ .mast-mention-picker-item-description {
691
+ font-size: var(--mast-text-sm);
692
+ color: var(--mast-fg-muted);
693
+ }
694
+ } /* @layer mast-ai */