@agent-platform/ui 0.0.12 → 0.0.13

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 (113) hide show
  1. package/README.md +27 -10
  2. package/dist/index.d.ts +35 -2
  3. package/dist/index.js +2462 -3
  4. package/dist/styles/agent-ui.css +1226 -0
  5. package/dist/styles/globals.css +18 -1188
  6. package/dist/styles/theme.css +34 -0
  7. package/package.json +14 -8
  8. package/dist/components/agent/agent-container-model.d.ts +0 -19
  9. package/dist/components/agent/agent-container-model.js +0 -17
  10. package/dist/components/agent/agent-container-state.d.ts +0 -2
  11. package/dist/components/agent/agent-container-state.js +0 -52
  12. package/dist/components/agent/agent-container-view.d.ts +0 -20
  13. package/dist/components/agent/agent-container-view.js +0 -19
  14. package/dist/components/agent/agent-container-view.test.d.ts +0 -1
  15. package/dist/components/agent/agent-container-view.test.js +0 -16
  16. package/dist/components/agent/agent-container.d.ts +0 -3
  17. package/dist/components/agent/agent-container.js +0 -24
  18. package/dist/components/agent/agent-greeting.d.ts +0 -3
  19. package/dist/components/agent/agent-greeting.js +0 -7
  20. package/dist/components/agent/agent-header.d.ts +0 -3
  21. package/dist/components/agent/agent-header.js +0 -9
  22. package/dist/components/agent/agent-home-card.d.ts +0 -3
  23. package/dist/components/agent/agent-home-card.js +0 -7
  24. package/dist/components/agent/agent-home-cards.d.ts +0 -9
  25. package/dist/components/agent/agent-home-cards.js +0 -13
  26. package/dist/components/agent/agent-input.d.ts +0 -3
  27. package/dist/components/agent/agent-input.js +0 -51
  28. package/dist/components/agent/agent-popup-widget.d.ts +0 -15
  29. package/dist/components/agent/agent-popup-widget.js +0 -49
  30. package/dist/components/agent/agent-screen.d.ts +0 -5
  31. package/dist/components/agent/agent-screen.js +0 -9
  32. package/dist/components/agent/approval-ui-model.d.ts +0 -18
  33. package/dist/components/agent/approval-ui-model.js +0 -27
  34. package/dist/components/agent/approval-ui-model.test.d.ts +0 -1
  35. package/dist/components/agent/approval-ui-model.test.js +0 -39
  36. package/dist/components/agent/defaults.d.ts +0 -5
  37. package/dist/components/agent/defaults.js +0 -12
  38. package/dist/components/agent/index.d.ts +0 -3
  39. package/dist/components/agent/index.js +0 -1
  40. package/dist/components/agent/input-mode.d.ts +0 -5
  41. package/dist/components/agent/input-mode.js +0 -9
  42. package/dist/components/agent/message/index.d.ts +0 -8
  43. package/dist/components/agent/message/index.js +0 -4
  44. package/dist/components/agent/message/markdown.d.ts +0 -6
  45. package/dist/components/agent/message/markdown.js +0 -66
  46. package/dist/components/agent/message/message-item.d.ts +0 -7
  47. package/dist/components/agent/message/message-item.js +0 -24
  48. package/dist/components/agent/message/message-list.d.ts +0 -8
  49. package/dist/components/agent/message/message-list.js +0 -20
  50. package/dist/components/agent/message/message-loading.d.ts +0 -4
  51. package/dist/components/agent/message/message-loading.js +0 -10
  52. package/dist/components/agent/message/tool-call-card.d.ts +0 -9
  53. package/dist/components/agent/message/tool-call-card.js +0 -26
  54. package/dist/components/agent/message/utils.d.ts +0 -8
  55. package/dist/components/agent/message/utils.js +0 -21
  56. package/dist/components/agent/provider/agent-context.d.ts +0 -4
  57. package/dist/components/agent/provider/agent-context.js +0 -13
  58. package/dist/components/agent/provider/agent-provider.d.ts +0 -10
  59. package/dist/components/agent/provider/agent-provider.js +0 -40
  60. package/dist/components/agent/provider/index.d.ts +0 -4
  61. package/dist/components/agent/provider/index.js +0 -2
  62. package/dist/components/agent/provider/parse-sse-buffer.d.ts +0 -9
  63. package/dist/components/agent/provider/parse-sse-buffer.js +0 -23
  64. package/dist/components/agent/provider/runtime-config.d.ts +0 -5
  65. package/dist/components/agent/provider/runtime-config.js +0 -24
  66. package/dist/components/agent/provider/types.d.ts +0 -66
  67. package/dist/components/agent/provider/types.js +0 -1
  68. package/dist/components/agent/provider/use-agent-chat.d.ts +0 -6
  69. package/dist/components/agent/provider/use-agent-chat.js +0 -493
  70. package/dist/components/agent/tool-approval-panel.d.ts +0 -9
  71. package/dist/components/agent/tool-approval-panel.js +0 -11
  72. package/dist/components/agent/types.d.ts +0 -44
  73. package/dist/components/agent/types.js +0 -1
  74. package/dist/components/index.d.ts +0 -7
  75. package/dist/components/index.js +0 -9
  76. package/dist/components/ui/badge.d.ts +0 -9
  77. package/dist/components/ui/badge.js +0 -24
  78. package/dist/components/ui/button.d.ts +0 -10
  79. package/dist/components/ui/button.js +0 -35
  80. package/dist/components/ui/card.d.ts +0 -9
  81. package/dist/components/ui/card.js +0 -24
  82. package/dist/components/ui/input.d.ts +0 -3
  83. package/dist/components/ui/input.js +0 -6
  84. package/dist/components/ui/label.d.ts +0 -4
  85. package/dist/components/ui/label.js +0 -7
  86. package/dist/components/ui/separator.d.ts +0 -4
  87. package/dist/components/ui/separator.js +0 -8
  88. package/dist/components/ui/textarea.d.ts +0 -3
  89. package/dist/components/ui/textarea.js +0 -6
  90. package/dist/lib/index.d.ts +0 -1
  91. package/dist/lib/index.js +0 -1
  92. package/dist/lib/utils.d.ts +0 -2
  93. package/dist/lib/utils.js +0 -5
  94. package/dist/modules/agent/agent.repository.d.ts +0 -58
  95. package/dist/modules/agent/agent.repository.js +0 -235
  96. package/dist/modules/agent/agent.repository.test.d.ts +0 -1
  97. package/dist/modules/agent/agent.repository.test.js +0 -64
  98. package/dist/modules/agent/domain/chat-state.d.ts +0 -64
  99. package/dist/modules/agent/domain/chat-state.js +0 -148
  100. package/dist/modules/agent/domain/chat-state.test.d.ts +0 -1
  101. package/dist/modules/agent/domain/chat-state.test.js +0 -72
  102. package/dist/modules/agent/use-agent-chat.d.ts +0 -6
  103. package/dist/modules/agent/use-agent-chat.js +0 -106
  104. package/dist/modules/agent/usecases/process-stream.d.ts +0 -26
  105. package/dist/modules/agent/usecases/process-stream.js +0 -112
  106. package/dist/modules/agent/usecases/process-stream.test.d.ts +0 -1
  107. package/dist/modules/agent/usecases/process-stream.test.js +0 -91
  108. package/dist/modules/agent/usecases/send-message.d.ts +0 -21
  109. package/dist/modules/agent/usecases/send-message.js +0 -298
  110. package/dist/modules/agent/usecases/send-message.test.d.ts +0 -1
  111. package/dist/modules/agent/usecases/send-message.test.js +0 -257
  112. package/dist/styles/ensure-styles.d.ts +0 -21
  113. package/dist/styles/ensure-styles.js +0 -22
@@ -1,1066 +1,8 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-50: oklch(97.1% 0.013 17.38);
11
- --color-red-600: oklch(57.7% 0.245 27.325);
12
- --color-amber-50: oklch(98.7% 0.022 95.277);
13
- --color-amber-300: oklch(87.9% 0.169 91.605);
14
- --color-amber-700: oklch(55.5% 0.163 48.998);
15
- --color-amber-950: oklch(27.9% 0.077 45.635);
16
- --color-green-50: oklch(98.2% 0.018 155.826);
17
- --color-green-400: oklch(79.2% 0.209 151.711);
18
- --color-green-600: oklch(62.7% 0.194 149.214);
19
- --color-green-950: oklch(26.6% 0.065 152.934);
20
- --color-white: #fff;
21
- --spacing: 0.25rem;
22
- --container-xl: 36rem;
23
- --text-xs: 0.75rem;
24
- --text-xs--line-height: calc(1 / 0.75);
25
- --text-sm: 0.875rem;
26
- --text-sm--line-height: calc(1.25 / 0.875);
27
- --text-base: 1rem;
28
- --text-base--line-height: calc(1.5 / 1);
29
- --text-lg: 1.125rem;
30
- --text-lg--line-height: calc(1.75 / 1.125);
31
- --font-weight-medium: 500;
32
- --font-weight-semibold: 600;
33
- --font-weight-bold: 700;
34
- --tracking-tight: -0.025em;
35
- --leading-relaxed: 1.625;
36
- --animate-spin: spin 1s linear infinite;
37
- --default-transition-duration: 150ms;
38
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
39
- --default-font-family: var(--font-sans);
40
- --default-mono-font-family: var(--font-mono);
41
- --color-background: var(--background);
42
- --color-foreground: var(--foreground);
43
- --color-primary: var(--primary);
44
- --color-primary-foreground: var(--primary-foreground);
45
- --color-muted-foreground: var(--muted-foreground);
46
- --color-border: var(--border);
47
- --color-input: var(--input);
48
- --color-ring: var(--ring);
49
- }
50
- }
51
- @layer base {
52
- *, ::after, ::before, ::backdrop, ::file-selector-button {
53
- box-sizing: border-box;
54
- margin: 0;
55
- padding: 0;
56
- border: 0 solid;
57
- }
58
- html, :host {
59
- line-height: 1.5;
60
- -webkit-text-size-adjust: 100%;
61
- tab-size: 4;
62
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
63
- font-feature-settings: var(--default-font-feature-settings, normal);
64
- font-variation-settings: var(--default-font-variation-settings, normal);
65
- -webkit-tap-highlight-color: transparent;
66
- }
67
- hr {
68
- height: 0;
69
- color: inherit;
70
- border-top-width: 1px;
71
- }
72
- abbr:where([title]) {
73
- -webkit-text-decoration: underline dotted;
74
- text-decoration: underline dotted;
75
- }
76
- h1, h2, h3, h4, h5, h6 {
77
- font-size: inherit;
78
- font-weight: inherit;
79
- }
80
- a {
81
- color: inherit;
82
- -webkit-text-decoration: inherit;
83
- text-decoration: inherit;
84
- }
85
- b, strong {
86
- font-weight: bolder;
87
- }
88
- code, kbd, samp, pre {
89
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
90
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
91
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
92
- font-size: 1em;
93
- }
94
- small {
95
- font-size: 80%;
96
- }
97
- sub, sup {
98
- font-size: 75%;
99
- line-height: 0;
100
- position: relative;
101
- vertical-align: baseline;
102
- }
103
- sub {
104
- bottom: -0.25em;
105
- }
106
- sup {
107
- top: -0.5em;
108
- }
109
- table {
110
- text-indent: 0;
111
- border-color: inherit;
112
- border-collapse: collapse;
113
- }
114
- :-moz-focusring {
115
- outline: auto;
116
- }
117
- progress {
118
- vertical-align: baseline;
119
- }
120
- summary {
121
- display: list-item;
122
- }
123
- ol, ul, menu {
124
- list-style: none;
125
- }
126
- img, svg, video, canvas, audio, iframe, embed, object {
127
- display: block;
128
- vertical-align: middle;
129
- }
130
- img, video {
131
- max-width: 100%;
132
- height: auto;
133
- }
134
- button, input, select, optgroup, textarea, ::file-selector-button {
135
- font: inherit;
136
- font-feature-settings: inherit;
137
- font-variation-settings: inherit;
138
- letter-spacing: inherit;
139
- color: inherit;
140
- border-radius: 0;
141
- background-color: transparent;
142
- opacity: 1;
143
- }
144
- :where(select:is([multiple], [size])) optgroup {
145
- font-weight: bolder;
146
- }
147
- :where(select:is([multiple], [size])) optgroup option {
148
- padding-inline-start: 20px;
149
- }
150
- ::file-selector-button {
151
- margin-inline-end: 4px;
152
- }
153
- ::placeholder {
154
- opacity: 1;
155
- }
156
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
157
- ::placeholder {
158
- color: currentcolor;
159
- @supports (color: color-mix(in lab, red, red)) {
160
- color: color-mix(in oklab, currentcolor 50%, transparent);
161
- }
162
- }
163
- }
164
- textarea {
165
- resize: vertical;
166
- }
167
- ::-webkit-search-decoration {
168
- -webkit-appearance: none;
169
- }
170
- ::-webkit-date-and-time-value {
171
- min-height: 1lh;
172
- text-align: inherit;
173
- }
174
- ::-webkit-datetime-edit {
175
- display: inline-flex;
176
- }
177
- ::-webkit-datetime-edit-fields-wrapper {
178
- padding: 0;
179
- }
180
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
181
- padding-block: 0;
182
- }
183
- ::-webkit-calendar-picker-indicator {
184
- line-height: 1;
185
- }
186
- :-moz-ui-invalid {
187
- box-shadow: none;
188
- }
189
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
190
- appearance: button;
191
- }
192
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
193
- height: auto;
194
- }
195
- [hidden]:where(:not([hidden="until-found"])) {
196
- display: none !important;
197
- }
198
- }
199
- @layer utilities {
200
- .fixed {
201
- position: fixed;
202
- }
203
- .right-0 {
204
- right: calc(var(--spacing) * 0);
205
- }
206
- .bottom-0 {
207
- bottom: calc(var(--spacing) * 0);
208
- }
209
- .left-0 {
210
- left: calc(var(--spacing) * 0);
211
- }
212
- .mx-4 {
213
- margin-inline: calc(var(--spacing) * 4);
214
- }
215
- .mx-auto {
216
- margin-inline: auto;
217
- }
218
- .my-1 {
219
- margin-block: calc(var(--spacing) * 1);
220
- }
221
- .my-1\.5 {
222
- margin-block: calc(var(--spacing) * 1.5);
223
- }
224
- .my-3 {
225
- margin-block: calc(var(--spacing) * 3);
226
- }
227
- .mt-1 {
228
- margin-top: calc(var(--spacing) * 1);
229
- }
230
- .mt-2 {
231
- margin-top: calc(var(--spacing) * 2);
232
- }
233
- .mt-2\.5 {
234
- margin-top: calc(var(--spacing) * 2.5);
235
- }
236
- .mt-3 {
237
- margin-top: calc(var(--spacing) * 3);
238
- }
239
- .mb-0\.5 {
240
- margin-bottom: calc(var(--spacing) * 0.5);
241
- }
242
- .mb-1 {
243
- margin-bottom: calc(var(--spacing) * 1);
244
- }
245
- .mb-4 {
246
- margin-bottom: calc(var(--spacing) * 4);
247
- }
248
- .ml-2 {
249
- margin-left: calc(var(--spacing) * 2);
250
- }
251
- .ml-4 {
252
- margin-left: calc(var(--spacing) * 4);
253
- }
254
- .flex {
255
- display: flex;
256
- }
257
- .inline {
258
- display: inline;
259
- }
260
- .inline-flex {
261
- display: inline-flex;
262
- }
263
- .table {
264
- display: table;
265
- }
266
- .field-sizing-content {
267
- field-sizing: content;
268
- }
269
- .size-4 {
270
- width: calc(var(--spacing) * 4);
271
- height: calc(var(--spacing) * 4);
272
- }
273
- .size-5 {
274
- width: calc(var(--spacing) * 5);
275
- height: calc(var(--spacing) * 5);
276
- }
277
- .size-6 {
278
- width: calc(var(--spacing) * 6);
279
- height: calc(var(--spacing) * 6);
280
- }
281
- .size-8 {
282
- width: calc(var(--spacing) * 8);
283
- height: calc(var(--spacing) * 8);
284
- }
285
- .size-10 {
286
- width: calc(var(--spacing) * 10);
287
- height: calc(var(--spacing) * 10);
288
- }
289
- .h-0\.5 {
290
- height: calc(var(--spacing) * 0.5);
291
- }
292
- .h-3 {
293
- height: calc(var(--spacing) * 3);
294
- }
295
- .h-6 {
296
- height: calc(var(--spacing) * 6);
297
- }
298
- .h-9 {
299
- height: calc(var(--spacing) * 9);
300
- }
301
- .h-10 {
302
- height: calc(var(--spacing) * 10);
303
- }
304
- .h-11 {
305
- height: calc(var(--spacing) * 11);
306
- }
307
- .h-full {
308
- height: 100%;
309
- }
310
- .max-h-40 {
311
- max-height: calc(var(--spacing) * 40);
312
- }
313
- .min-h-8 {
314
- min-height: calc(var(--spacing) * 8);
315
- }
316
- .min-h-16 {
317
- min-height: calc(var(--spacing) * 16);
318
- }
319
- .w-0\.5 {
320
- width: calc(var(--spacing) * 0.5);
321
- }
322
- .w-3 {
323
- width: calc(var(--spacing) * 3);
324
- }
325
- .w-full {
326
- width: 100%;
327
- }
328
- .max-w-3\/4 {
329
- max-width: calc(3/4 * 100%);
330
- }
331
- .max-w-\[1120px\] {
332
- max-width: 1120px;
333
- }
334
- .max-w-xl {
335
- max-width: var(--container-xl);
336
- }
337
- .min-w-full {
338
- min-width: 100%;
339
- }
340
- .flex-1 {
341
- flex: 1;
342
- }
343
- .shrink-0 {
344
- flex-shrink: 0;
345
- }
346
- .border-collapse {
347
- border-collapse: collapse;
348
- }
349
- .animate-spin {
350
- animation: var(--animate-spin);
351
- }
352
- .cursor-pointer {
353
- cursor: pointer;
354
- }
355
- .resize-none {
356
- resize: none;
357
- }
358
- .list-inside {
359
- list-style-position: inside;
360
- }
361
- .list-decimal {
362
- list-style-type: decimal;
363
- }
364
- .list-disc {
365
- list-style-type: disc;
366
- }
367
- .flex-col {
368
- flex-direction: column;
369
- }
370
- .items-center {
371
- align-items: center;
372
- }
373
- .items-end {
374
- align-items: flex-end;
375
- }
376
- .items-start {
377
- align-items: flex-start;
378
- }
379
- .justify-between {
380
- justify-content: space-between;
381
- }
382
- .justify-center {
383
- justify-content: center;
384
- }
385
- .justify-end {
386
- justify-content: flex-end;
387
- }
388
- .justify-start {
389
- justify-content: flex-start;
390
- }
391
- .gap-0\.5 {
392
- gap: calc(var(--spacing) * 0.5);
393
- }
394
- .gap-1 {
395
- gap: calc(var(--spacing) * 1);
396
- }
397
- .gap-1\.5 {
398
- gap: calc(var(--spacing) * 1.5);
399
- }
400
- .gap-2 {
401
- gap: calc(var(--spacing) * 2);
402
- }
403
- .gap-2\.5 {
404
- gap: calc(var(--spacing) * 2.5);
405
- }
406
- .gap-3 {
407
- gap: calc(var(--spacing) * 3);
408
- }
409
- .gap-4 {
410
- gap: calc(var(--spacing) * 4);
411
- }
412
- .gap-6 {
413
- gap: calc(var(--spacing) * 6);
414
- }
415
- .space-y-1\.5 {
416
- :where(& > :not(:last-child)) {
417
- --tw-space-y-reverse: 0;
418
- margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
419
- margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
420
- }
421
- }
422
- .overflow-auto {
423
- overflow: auto;
424
- }
425
- .overflow-x-auto {
426
- overflow-x: auto;
427
- }
428
- .overflow-y-auto {
429
- overflow-y: auto;
430
- }
431
- .rounded {
432
- border-radius: 0.25rem;
433
- }
434
- .rounded-full {
435
- border-radius: calc(infinity * 1px);
436
- }
437
- .rounded-lg {
438
- border-radius: var(--radius);
439
- }
440
- .rounded-md {
441
- border-radius: calc(var(--radius) - 2px);
442
- }
443
- .border {
444
- border-style: var(--tw-border-style);
445
- border-width: 1px;
446
- }
447
- .border-t {
448
- border-top-style: var(--tw-border-style);
449
- border-top-width: 1px;
450
- }
451
- .border-l-2 {
452
- border-left-style: var(--tw-border-style);
453
- border-left-width: 2px;
454
- }
455
- .border-none {
456
- --tw-border-style: none;
457
- border-style: none;
458
- }
459
- .border-border {
460
- border-color: var(--border);
461
- }
462
- .border-input {
463
- border-color: var(--input);
464
- }
465
- .border-primary {
466
- border-color: var(--primary);
467
- }
468
- .border-t-transparent {
469
- border-top-color: transparent;
470
- }
471
- .bg-amber-50 {
472
- background-color: var(--color-amber-50);
473
- }
474
- .bg-background {
475
- background-color: var(--background);
476
- }
477
- .bg-background\/50 {
478
- background-color: var(--background);
479
- @supports (color: color-mix(in lab, red, red)) {
480
- background-color: color-mix(in oklab, var(--background) 50%, transparent);
481
- }
482
- }
483
- .bg-card {
484
- background-color: var(--card);
485
- }
486
- .bg-destructive {
487
- background-color: var(--destructive);
488
- }
489
- .bg-destructive\/10 {
490
- background-color: var(--destructive);
491
- @supports (color: color-mix(in lab, red, red)) {
492
- background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
493
- }
494
- }
495
- .bg-foreground {
496
- background-color: var(--foreground);
497
- }
498
- .bg-green-50 {
499
- background-color: var(--color-green-50);
500
- }
501
- .bg-muted {
502
- background-color: var(--muted);
503
- }
504
- .bg-muted-foreground\/50 {
505
- background-color: var(--muted-foreground);
506
- @supports (color: color-mix(in lab, red, red)) {
507
- background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
508
- }
509
- }
510
- .bg-muted\/50 {
511
- background-color: var(--muted);
512
- @supports (color: color-mix(in lab, red, red)) {
513
- background-color: color-mix(in oklab, var(--muted) 50%, transparent);
514
- }
515
- }
516
- .bg-primary {
517
- background-color: var(--primary);
518
- }
519
- .bg-primary-foreground {
520
- background-color: var(--primary-foreground);
521
- }
522
- .bg-primary\/10 {
523
- background-color: var(--primary);
524
- @supports (color: color-mix(in lab, red, red)) {
525
- background-color: color-mix(in oklab, var(--primary) 10%, transparent);
526
- }
527
- }
528
- .bg-red-50 {
529
- background-color: var(--color-red-50);
530
- }
531
- .bg-secondary {
532
- background-color: var(--secondary);
533
- }
534
- .bg-transparent {
535
- background-color: transparent;
536
- }
537
- .bg-white {
538
- background-color: var(--color-white);
539
- }
540
- .p-1 {
541
- padding: calc(var(--spacing) * 1);
542
- }
543
- .p-2 {
544
- padding: calc(var(--spacing) * 2);
545
- }
546
- .p-3 {
547
- padding: calc(var(--spacing) * 3);
548
- }
549
- .px-1 {
550
- padding-inline: calc(var(--spacing) * 1);
551
- }
552
- .px-2 {
553
- padding-inline: calc(var(--spacing) * 2);
554
- }
555
- .px-3 {
556
- padding-inline: calc(var(--spacing) * 3);
557
- }
558
- .px-4 {
559
- padding-inline: calc(var(--spacing) * 4);
560
- }
561
- .px-6 {
562
- padding-inline: calc(var(--spacing) * 6);
563
- }
564
- .px-12 {
565
- padding-inline: calc(var(--spacing) * 12);
566
- }
567
- .py-0\.5 {
568
- padding-block: calc(var(--spacing) * 0.5);
569
- }
570
- .py-1\.5 {
571
- padding-block: calc(var(--spacing) * 1.5);
572
- }
573
- .py-2 {
574
- padding-block: calc(var(--spacing) * 2);
575
- }
576
- .py-4 {
577
- padding-block: calc(var(--spacing) * 4);
578
- }
579
- .pt-1 {
580
- padding-top: calc(var(--spacing) * 1);
581
- }
582
- .pt-2 {
583
- padding-top: calc(var(--spacing) * 2);
584
- }
585
- .pb-3 {
586
- padding-bottom: calc(var(--spacing) * 3);
587
- }
588
- .pb-\[97px\] {
589
- padding-bottom: 97px;
590
- }
591
- .pl-2 {
592
- padding-left: calc(var(--spacing) * 2);
593
- }
594
- .pl-3 {
595
- padding-left: calc(var(--spacing) * 3);
596
- }
597
- .text-center {
598
- text-align: center;
599
- }
600
- .text-left {
601
- text-align: left;
602
- }
603
- .text-base {
604
- font-size: var(--text-base);
605
- line-height: var(--tw-leading, var(--text-base--line-height));
606
- }
607
- .text-lg {
608
- font-size: var(--text-lg);
609
- line-height: var(--tw-leading, var(--text-lg--line-height));
610
- }
611
- .text-sm {
612
- font-size: var(--text-sm);
613
- line-height: var(--tw-leading, var(--text-sm--line-height));
614
- }
615
- .text-xs {
616
- font-size: var(--text-xs);
617
- line-height: var(--tw-leading, var(--text-xs--line-height));
618
- }
619
- .text-\[11px\] {
620
- font-size: 11px;
621
- }
622
- .leading-none {
623
- --tw-leading: 1;
624
- line-height: 1;
625
- }
626
- .leading-relaxed {
627
- --tw-leading: var(--leading-relaxed);
628
- line-height: var(--leading-relaxed);
629
- }
630
- .font-bold {
631
- --tw-font-weight: var(--font-weight-bold);
632
- font-weight: var(--font-weight-bold);
633
- }
634
- .font-medium {
635
- --tw-font-weight: var(--font-weight-medium);
636
- font-weight: var(--font-weight-medium);
637
- }
638
- .font-semibold {
639
- --tw-font-weight: var(--font-weight-semibold);
640
- font-weight: var(--font-weight-semibold);
641
- }
642
- .tracking-tight {
643
- --tw-tracking: var(--tracking-tight);
644
- letter-spacing: var(--tracking-tight);
645
- }
646
- .text-balance {
647
- text-wrap: balance;
648
- }
649
- .whitespace-nowrap {
650
- white-space: nowrap;
651
- }
652
- .whitespace-pre-wrap {
653
- white-space: pre-wrap;
654
- }
655
- .text-amber-700 {
656
- color: var(--color-amber-700);
657
- }
658
- .text-background {
659
- color: var(--background);
660
- }
661
- .text-card-foreground {
662
- color: var(--card-foreground);
663
- }
664
- .text-destructive {
665
- color: var(--destructive);
666
- }
667
- .text-foreground {
668
- color: var(--foreground);
669
- }
670
- .text-green-600 {
671
- color: var(--color-green-600);
672
- }
673
- .text-muted-foreground {
674
- color: var(--muted-foreground);
675
- }
676
- .text-primary {
677
- color: var(--primary);
678
- }
679
- .text-primary-foreground {
680
- color: var(--primary-foreground);
681
- }
682
- .text-red-600 {
683
- color: var(--color-red-600);
684
- }
685
- .text-secondary-foreground {
686
- color: var(--secondary-foreground);
687
- }
688
- .text-white {
689
- color: var(--color-white);
690
- }
691
- .italic {
692
- font-style: italic;
693
- }
694
- .underline {
695
- text-decoration-line: underline;
696
- }
697
- .underline-offset-4 {
698
- text-underline-offset: 4px;
699
- }
700
- .opacity-75 {
701
- opacity: 75%;
702
- }
703
- .shadow-sm {
704
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
705
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
706
- }
707
- .outline {
708
- outline-style: var(--tw-outline-style);
709
- outline-width: 1px;
710
- }
711
- .transition-all {
712
- transition-property: all;
713
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
714
- transition-duration: var(--tw-duration, var(--default-transition-duration));
715
- }
716
- .transition-colors {
717
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
718
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
719
- transition-duration: var(--tw-duration, var(--default-transition-duration));
720
- }
721
- .outline-none {
722
- --tw-outline-style: none;
723
- outline-style: none;
724
- }
725
- .\[animation-delay\:0ms\] {
726
- animation-delay: 0ms;
727
- }
728
- .\[animation-delay\:150ms\] {
729
- animation-delay: 150ms;
730
- }
731
- .\[animation-delay\:300ms\] {
732
- animation-delay: 300ms;
733
- }
734
- .\[publish\:check-auth\] {
735
- publish: check-auth;
736
- }
737
- .placeholder\:text-muted-foreground {
738
- &::placeholder {
739
- color: var(--muted-foreground);
740
- }
741
- }
742
- .first\:mt-0 {
743
- &:first-child {
744
- margin-top: calc(var(--spacing) * 0);
745
- }
746
- }
747
- .last\:mb-0 {
748
- &:last-child {
749
- margin-bottom: calc(var(--spacing) * 0);
750
- }
751
- }
752
- .hover\:border-primary\/30 {
753
- &:hover {
754
- @media (hover: hover) {
755
- border-color: var(--primary);
756
- @supports (color: color-mix(in lab, red, red)) {
757
- border-color: color-mix(in oklab, var(--primary) 30%, transparent);
758
- }
759
- }
760
- }
761
- }
762
- .hover\:bg-accent {
763
- &:hover {
764
- @media (hover: hover) {
765
- background-color: var(--accent);
766
- }
767
- }
768
- }
769
- .hover\:bg-destructive\/90 {
770
- &:hover {
771
- @media (hover: hover) {
772
- background-color: var(--destructive);
773
- @supports (color: color-mix(in lab, red, red)) {
774
- background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
775
- }
776
- }
777
- }
778
- }
779
- .hover\:bg-foreground\/90 {
780
- &:hover {
781
- @media (hover: hover) {
782
- background-color: var(--foreground);
783
- @supports (color: color-mix(in lab, red, red)) {
784
- background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
785
- }
786
- }
787
- }
788
- }
789
- .hover\:bg-primary\/90 {
790
- &:hover {
791
- @media (hover: hover) {
792
- background-color: var(--primary);
793
- @supports (color: color-mix(in lab, red, red)) {
794
- background-color: color-mix(in oklab, var(--primary) 90%, transparent);
795
- }
796
- }
797
- }
798
- }
799
- .hover\:bg-secondary\/80 {
800
- &:hover {
801
- @media (hover: hover) {
802
- background-color: var(--secondary);
803
- @supports (color: color-mix(in lab, red, red)) {
804
- background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
805
- }
806
- }
807
- }
808
- }
809
- .hover\:text-accent-foreground {
810
- &:hover {
811
- @media (hover: hover) {
812
- color: var(--accent-foreground);
813
- }
814
- }
815
- }
816
- .hover\:text-foreground {
817
- &:hover {
818
- @media (hover: hover) {
819
- color: var(--foreground);
820
- }
821
- }
822
- }
823
- .hover\:text-primary\/80 {
824
- &:hover {
825
- @media (hover: hover) {
826
- color: var(--primary);
827
- @supports (color: color-mix(in lab, red, red)) {
828
- color: color-mix(in oklab, var(--primary) 80%, transparent);
829
- }
830
- }
831
- }
832
- }
833
- .hover\:underline {
834
- &:hover {
835
- @media (hover: hover) {
836
- text-decoration-line: underline;
837
- }
838
- }
839
- }
840
- .focus-visible\:border-0 {
841
- &:focus-visible {
842
- border-style: var(--tw-border-style);
843
- border-width: 0px;
844
- }
845
- }
846
- .focus-visible\:border-ring {
847
- &:focus-visible {
848
- border-color: var(--ring);
849
- }
850
- }
851
- .focus-visible\:ring-0 {
852
- &:focus-visible {
853
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
854
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
855
- }
856
- }
857
- .focus-visible\:ring-\[3px\] {
858
- &:focus-visible {
859
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
860
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
861
- }
862
- }
863
- .focus-visible\:ring-destructive\/20 {
864
- &:focus-visible {
865
- --tw-ring-color: var(--destructive);
866
- @supports (color: color-mix(in lab, red, red)) {
867
- --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
868
- }
869
- }
870
- }
871
- .focus-visible\:ring-ring {
872
- &:focus-visible {
873
- --tw-ring-color: var(--ring);
874
- }
875
- }
876
- .focus-visible\:ring-ring\/50 {
877
- &:focus-visible {
878
- --tw-ring-color: var(--ring);
879
- @supports (color: color-mix(in lab, red, red)) {
880
- --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
881
- }
882
- }
883
- }
884
- .focus-visible\:outline-none {
885
- &:focus-visible {
886
- --tw-outline-style: none;
887
- outline-style: none;
888
- }
889
- }
890
- .disabled\:pointer-events-none {
891
- &:disabled {
892
- pointer-events: none;
893
- }
894
- }
895
- .disabled\:cursor-not-allowed {
896
- &:disabled {
897
- cursor: not-allowed;
898
- }
899
- }
900
- .disabled\:opacity-50 {
901
- &:disabled {
902
- opacity: 50%;
903
- }
904
- }
905
- .has-\[\>svg\]\:px-1\.5 {
906
- &:has(>svg) {
907
- padding-inline: calc(var(--spacing) * 1.5);
908
- }
909
- }
910
- .has-\[\>svg\]\:px-2\.5 {
911
- &:has(>svg) {
912
- padding-inline: calc(var(--spacing) * 2.5);
913
- }
914
- }
915
- .has-\[\>svg\]\:px-3 {
916
- &:has(>svg) {
917
- padding-inline: calc(var(--spacing) * 3);
918
- }
919
- }
920
- .has-\[\>svg\]\:px-4 {
921
- &:has(>svg) {
922
- padding-inline: calc(var(--spacing) * 4);
923
- }
924
- }
925
- .aria-invalid\:border-destructive {
926
- &[aria-invalid="true"] {
927
- border-color: var(--destructive);
928
- }
929
- }
930
- .aria-invalid\:ring-destructive\/20 {
931
- &[aria-invalid="true"] {
932
- --tw-ring-color: var(--destructive);
933
- @supports (color: color-mix(in lab, red, red)) {
934
- --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
935
- }
936
- }
937
- }
938
- .md\:text-sm {
939
- @media (width >= 48rem) {
940
- font-size: var(--text-sm);
941
- line-height: var(--tw-leading, var(--text-sm--line-height));
942
- }
943
- }
944
- .dark\:border-input {
945
- &:is(.dark *) {
946
- border-color: var(--input);
947
- }
948
- }
949
- .dark\:bg-amber-950 {
950
- &:is(.dark *) {
951
- background-color: var(--color-amber-950);
952
- }
953
- }
954
- .dark\:bg-destructive\/60 {
955
- &:is(.dark *) {
956
- background-color: var(--destructive);
957
- @supports (color: color-mix(in lab, red, red)) {
958
- background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
959
- }
960
- }
961
- }
962
- .dark\:bg-green-950 {
963
- &:is(.dark *) {
964
- background-color: var(--color-green-950);
965
- }
966
- }
967
- .dark\:bg-input\/30 {
968
- &:is(.dark *) {
969
- background-color: var(--input);
970
- @supports (color: color-mix(in lab, red, red)) {
971
- background-color: color-mix(in oklab, var(--input) 30%, transparent);
972
- }
973
- }
974
- }
975
- .dark\:text-amber-300 {
976
- &:is(.dark *) {
977
- color: var(--color-amber-300);
978
- }
979
- }
980
- .dark\:text-green-400 {
981
- &:is(.dark *) {
982
- color: var(--color-green-400);
983
- }
984
- }
985
- .dark\:hover\:bg-accent\/50 {
986
- &:is(.dark *) {
987
- &:hover {
988
- @media (hover: hover) {
989
- background-color: var(--accent);
990
- @supports (color: color-mix(in lab, red, red)) {
991
- background-color: color-mix(in oklab, var(--accent) 50%, transparent);
992
- }
993
- }
994
- }
995
- }
996
- }
997
- .dark\:hover\:bg-input\/50 {
998
- &:is(.dark *) {
999
- &:hover {
1000
- @media (hover: hover) {
1001
- background-color: var(--input);
1002
- @supports (color: color-mix(in lab, red, red)) {
1003
- background-color: color-mix(in oklab, var(--input) 50%, transparent);
1004
- }
1005
- }
1006
- }
1007
- }
1008
- }
1009
- .dark\:focus-visible\:ring-destructive\/40 {
1010
- &:is(.dark *) {
1011
- &:focus-visible {
1012
- --tw-ring-color: var(--destructive);
1013
- @supports (color: color-mix(in lab, red, red)) {
1014
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1015
- }
1016
- }
1017
- }
1018
- }
1019
- .dark\:aria-invalid\:ring-destructive\/40 {
1020
- &:is(.dark *) {
1021
- &[aria-invalid="true"] {
1022
- --tw-ring-color: var(--destructive);
1023
- @supports (color: color-mix(in lab, red, red)) {
1024
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1025
- }
1026
- }
1027
- }
1028
- }
1029
- .\[\&_svg\]\:pointer-events-none {
1030
- & svg {
1031
- pointer-events: none;
1032
- }
1033
- }
1034
- .\[\&_svg\]\:size-5 {
1035
- & svg {
1036
- width: calc(var(--spacing) * 5);
1037
- height: calc(var(--spacing) * 5);
1038
- }
1039
- }
1040
- .\[\&_svg\]\:shrink-0 {
1041
- & svg {
1042
- flex-shrink: 0;
1043
- }
1044
- }
1045
- .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 {
1046
- & svg:not([class*='size-']) {
1047
- width: calc(var(--spacing) * 3);
1048
- height: calc(var(--spacing) * 3);
1049
- }
1050
- }
1051
- .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
1052
- & svg:not([class*='size-']) {
1053
- width: calc(var(--spacing) * 4);
1054
- height: calc(var(--spacing) * 4);
1055
- }
1056
- }
1057
- .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 {
1058
- & svg:not([class*='size-']) {
1059
- width: calc(var(--spacing) * 5);
1060
- height: calc(var(--spacing) * 5);
1061
- }
1062
- }
1063
- }
1
+ /*
2
+ * @agent-platform/ui 共有テーマ定義
3
+ * 消費側で @import "@agent-platform/ui/styles/globals.css" として使用
4
+ * 注意: @import "tailwindcss" は消費側で行う
5
+ */
1064
6
  :root {
1065
7
  --background: oklch(1 0 0);
1066
8
  --foreground: oklch(0.145 0 0);
@@ -1096,6 +38,7 @@
1096
38
  --sidebar-border: oklch(0.922 0 0);
1097
39
  --sidebar-ring: oklch(0.708 0 0);
1098
40
  }
41
+
1099
42
  .dark {
1100
43
  --background: oklch(0.145 0 0);
1101
44
  --foreground: oklch(0.985 0 0);
@@ -1130,144 +73,31 @@
1130
73
  --sidebar-border: oklch(1 0 0 / 10%);
1131
74
  --sidebar-ring: oklch(0.556 0 0);
1132
75
  }
76
+
77
+ /* Custom animations for agent loading states */
1133
78
  @layer utilities {
1134
79
  @keyframes dot-fade {
1135
- 0%, 80%, 100% {
80
+ 0%,
81
+ 80%,
82
+ 100% {
1136
83
  opacity: 0.35;
1137
84
  }
1138
85
  40% {
1139
86
  opacity: 1;
1140
87
  }
1141
88
  }
89
+
1142
90
  .animate-dot-fade {
1143
91
  animation: dot-fade 1.2s ease-in-out infinite;
1144
92
  }
1145
93
  }
94
+
95
+ /* Respect reduced motion preferences */
1146
96
  @media (prefers-reduced-motion: reduce) {
1147
- .animate-dot-fade, .animate-ping, .animate-pulse, .animate-bounce {
97
+ .animate-dot-fade,
98
+ .animate-ping,
99
+ .animate-pulse,
100
+ .animate-bounce {
1148
101
  animation: none;
1149
102
  }
1150
103
  }
1151
- @property --tw-space-y-reverse {
1152
- syntax: "*";
1153
- inherits: false;
1154
- initial-value: 0;
1155
- }
1156
- @property --tw-border-style {
1157
- syntax: "*";
1158
- inherits: false;
1159
- initial-value: solid;
1160
- }
1161
- @property --tw-leading {
1162
- syntax: "*";
1163
- inherits: false;
1164
- }
1165
- @property --tw-font-weight {
1166
- syntax: "*";
1167
- inherits: false;
1168
- }
1169
- @property --tw-tracking {
1170
- syntax: "*";
1171
- inherits: false;
1172
- }
1173
- @property --tw-shadow {
1174
- syntax: "*";
1175
- inherits: false;
1176
- initial-value: 0 0 #0000;
1177
- }
1178
- @property --tw-shadow-color {
1179
- syntax: "*";
1180
- inherits: false;
1181
- }
1182
- @property --tw-shadow-alpha {
1183
- syntax: "<percentage>";
1184
- inherits: false;
1185
- initial-value: 100%;
1186
- }
1187
- @property --tw-inset-shadow {
1188
- syntax: "*";
1189
- inherits: false;
1190
- initial-value: 0 0 #0000;
1191
- }
1192
- @property --tw-inset-shadow-color {
1193
- syntax: "*";
1194
- inherits: false;
1195
- }
1196
- @property --tw-inset-shadow-alpha {
1197
- syntax: "<percentage>";
1198
- inherits: false;
1199
- initial-value: 100%;
1200
- }
1201
- @property --tw-ring-color {
1202
- syntax: "*";
1203
- inherits: false;
1204
- }
1205
- @property --tw-ring-shadow {
1206
- syntax: "*";
1207
- inherits: false;
1208
- initial-value: 0 0 #0000;
1209
- }
1210
- @property --tw-inset-ring-color {
1211
- syntax: "*";
1212
- inherits: false;
1213
- }
1214
- @property --tw-inset-ring-shadow {
1215
- syntax: "*";
1216
- inherits: false;
1217
- initial-value: 0 0 #0000;
1218
- }
1219
- @property --tw-ring-inset {
1220
- syntax: "*";
1221
- inherits: false;
1222
- }
1223
- @property --tw-ring-offset-width {
1224
- syntax: "<length>";
1225
- inherits: false;
1226
- initial-value: 0px;
1227
- }
1228
- @property --tw-ring-offset-color {
1229
- syntax: "*";
1230
- inherits: false;
1231
- initial-value: #fff;
1232
- }
1233
- @property --tw-ring-offset-shadow {
1234
- syntax: "*";
1235
- inherits: false;
1236
- initial-value: 0 0 #0000;
1237
- }
1238
- @property --tw-outline-style {
1239
- syntax: "*";
1240
- inherits: false;
1241
- initial-value: solid;
1242
- }
1243
- @keyframes spin {
1244
- to {
1245
- transform: rotate(360deg);
1246
- }
1247
- }
1248
- @layer properties {
1249
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1250
- *, ::before, ::after, ::backdrop {
1251
- --tw-space-y-reverse: 0;
1252
- --tw-border-style: solid;
1253
- --tw-leading: initial;
1254
- --tw-font-weight: initial;
1255
- --tw-tracking: initial;
1256
- --tw-shadow: 0 0 #0000;
1257
- --tw-shadow-color: initial;
1258
- --tw-shadow-alpha: 100%;
1259
- --tw-inset-shadow: 0 0 #0000;
1260
- --tw-inset-shadow-color: initial;
1261
- --tw-inset-shadow-alpha: 100%;
1262
- --tw-ring-color: initial;
1263
- --tw-ring-shadow: 0 0 #0000;
1264
- --tw-inset-ring-color: initial;
1265
- --tw-inset-ring-shadow: 0 0 #0000;
1266
- --tw-ring-inset: initial;
1267
- --tw-ring-offset-width: 0px;
1268
- --tw-ring-offset-color: #fff;
1269
- --tw-ring-offset-shadow: 0 0 #0000;
1270
- --tw-outline-style: solid;
1271
- }
1272
- }
1273
- }