@snackbit/opendil 0.1.0 → 0.2.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 (88) hide show
  1. package/README.md +74 -137
  2. package/bin/opendil.mjs +66 -11
  3. package/bin/publish-directory.d.mts +18 -0
  4. package/bin/publish-directory.mjs +173 -17
  5. package/dist/agent-spec.js +9 -0
  6. package/dist/chunk-RPZW4WVX.js +2 -0
  7. package/dist/chunk-ZSTXLIS6.js +2 -0
  8. package/dist/index.js +1 -10
  9. package/dist/runtime/frame.html +117 -44
  10. package/dist/runtime/frame.js +501 -505
  11. package/dist/spec/genui.agent.full.md +1927 -0
  12. package/dist/spec/genui.agent.md +479 -0
  13. package/dist/spec/genui.examples.md +836 -0
  14. package/dist/styled-renderer-PHI4MNPF.js +2441 -0
  15. package/dist/styles.css +115 -42
  16. package/dist/types/agent-spec.d.ts +12 -0
  17. package/dist/types/components/ui/controls/select.d.ts +14 -0
  18. package/dist/types/components/ui/controls/tabs.d.ts +7 -0
  19. package/dist/types/components/ui/controls/toggle-group.d.ts +3 -2
  20. package/dist/types/components/ui/display/chart.d.ts +6 -12
  21. package/dist/types/components/ui/media/carousel.d.ts +1 -1
  22. package/dist/types/components/ui/overlays/collapsible.d.ts +6 -0
  23. package/dist/types/components/ui/overlays/popover.d.ts +2 -1
  24. package/dist/types/components/ui/overlays/ui-scope.d.ts +16 -0
  25. package/dist/types/dil/custom-component.d.ts +1 -1
  26. package/dist/types/dil/dil-renderer.d.ts +58 -23
  27. package/dist/types/dil/isolation/frame-startup.d.ts +18 -0
  28. package/dist/types/dil/isolation/frame-theme.d.ts +14 -0
  29. package/dist/types/dil/isolation/frame-viewport.d.ts +30 -0
  30. package/dist/types/dil/isolation/isolated-renderer.d.ts +13 -7
  31. package/dist/types/dil/isolation/overlay-room.d.ts +29 -0
  32. package/dist/types/dil/isolation/viewport-scroll.d.ts +3 -2
  33. package/dist/types/dil/message-renderer.d.ts +6 -5
  34. package/dist/types/dil/parser/dil-parser.d.ts +44 -3
  35. package/dist/types/dil/parser/lexical.d.ts +13 -2
  36. package/dist/types/dil/parser/literal-tag.d.ts +16 -0
  37. package/dist/types/dil/parser/markdown-lexing.d.ts +41 -0
  38. package/dist/types/dil/parser/types.d.ts +22 -1
  39. package/dist/types/dil/parser/unfinished.d.ts +22 -0
  40. package/dist/types/dil/parser/vocabulary.d.ts +12 -0
  41. package/dist/types/dil/render-error.d.ts +47 -0
  42. package/dist/types/dil/renderer-environment.d.ts +19 -8
  43. package/dist/types/dil/runtime/document.d.ts +18 -6
  44. package/dist/types/dil/runtime/execution-queue.d.ts +2 -1
  45. package/dist/types/dil/runtime/expressions.d.ts +8 -5
  46. package/dist/types/dil/runtime/inline-worker.d.ts +33 -0
  47. package/dist/types/dil/runtime/view-cost.d.ts +2 -2
  48. package/dist/types/dil/styled-renderer.d.ts +39 -0
  49. package/dist/types/dil/view/conditional-view.d.ts +3 -3
  50. package/dist/types/dil/view/markdown-node.d.ts +3 -3
  51. package/dist/types/dil/view/node-children.d.ts +3 -3
  52. package/dist/types/dil/view/node-view.d.ts +2 -2
  53. package/dist/types/dil/view/progressive-reveal.d.ts +5 -4
  54. package/dist/types/dil/view/render-boundary.d.ts +13 -0
  55. package/dist/types/dil/view/render-limit.d.ts +1 -1
  56. package/dist/types/dil/view/repeated-nodes.d.ts +4 -4
  57. package/dist/types/dil/view/reveal/controller.d.ts +9 -2
  58. package/dist/types/dil/view/reveal/presentation.d.ts +1 -1
  59. package/dist/types/dil/view/scroll/controller.d.ts +16 -2
  60. package/dist/types/dil/view/scroll/host-viewport.d.ts +24 -0
  61. package/dist/types/dil/view/scroll/root-tracker.d.ts +17 -0
  62. package/dist/types/dil/view/scroll/scroll-root.d.ts +36 -0
  63. package/dist/types/dil/view/scroll-options.d.ts +15 -0
  64. package/dist/types/dil/view/stream-follow.d.ts +10 -3
  65. package/dist/types/dil/view/table-context.d.ts +1 -1
  66. package/dist/types/dil/view/virtual-flow.d.ts +3 -3
  67. package/dist/types/dil/widgets/action-feedback.d.ts +1 -1
  68. package/dist/types/dil/widgets/charts/chart-hover.d.ts +17 -0
  69. package/dist/types/dil/widgets/charts/chart-legend.d.ts +1 -1
  70. package/dist/types/dil/widgets/charts/chart-pie.d.ts +16 -0
  71. package/dist/types/dil/widgets/charts/chart-series.d.ts +10 -2
  72. package/dist/types/dil/widgets/charts/chart-snapping.d.ts +3 -5
  73. package/dist/types/dil/widgets/charts/snap-cursor.d.ts +3 -7
  74. package/dist/types/dil/widgets/charts/snap-tooltip.d.ts +6 -4
  75. package/dist/types/dil/widgets/code-block.d.ts +1 -1
  76. package/dist/types/dil/widgets/controls.d.ts +2 -2
  77. package/dist/types/dil/widgets/graphs/node-graph.d.ts +1 -1
  78. package/dist/types/dil/widgets/graphs/service-node.d.ts +1 -1
  79. package/dist/types/dil/widgets/primitives/primitive.d.ts +4 -4
  80. package/dist/types/index.d.ts +9 -8
  81. package/dist/types/ui.d.ts +11 -8
  82. package/dist/ui.js +1 -1
  83. package/package.json +13 -2
  84. package/styles/tailwind.css +53 -1
  85. package/styles/tokens.css +3 -0
  86. package/dist/chunk-ZWAN2JCV.js +0 -2
  87. package/dist/runtime/vm.js +0 -6
  88. package/dist/shadow-renderer-F25KL3C4.js +0 -2363
@@ -1,2363 +0,0 @@
1
- "use client";
2
- "use client";import{useCallback as c,useState as h}from"react";import{createPortal as S}from"react-dom";var d=new WeakMap;function s(n,o){let e=n.defaultView;if(!e)throw new Error("Shadow rendering requires a browser document.");let t=new e.CSSStyleSheet;return t.replaceSync(o),t}function i(n,o){let e=n.ownerDocument,t=d.get(e);t||(t=s(e,`:host{all:initial;display:block;min-width:0;color-scheme:light}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
3
- @layer properties;
4
- .dil-scope, .dil-scope {
5
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
6
- monospace;
7
- --color-white: #fff;
8
- --spacing: 0.25rem;
9
- --text-xs: 0.75rem;
10
- --text-xs--line-height: calc(1 / 0.75);
11
- --text-sm: 0.875rem;
12
- --text-sm--line-height: calc(1.25 / 0.875);
13
- --text-base: 1rem;
14
- --text-base--line-height: calc(1.5 / 1);
15
- --font-weight-medium: 500;
16
- --font-weight-semibold: 600;
17
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
18
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
19
- --aspect-video: 16 / 9;
20
- --default-transition-duration: 150ms;
21
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
22
- --color-border: var(--border);
23
- }
24
- :where(.dil-scope) .\\@container\\/card-header {
25
- container-type: inline-size;
26
- container-name: card-header;
27
- }
28
- :where(.dil-scope) .visible {
29
- visibility: visible;
30
- }
31
- :where(.dil-scope) .sr-only {
32
- position: absolute;
33
- width: 1px;
34
- height: 1px;
35
- padding: 0;
36
- margin: -1px;
37
- overflow: hidden;
38
- clip-path: inset(50%);
39
- white-space: nowrap;
40
- border-width: 0;
41
- }
42
- :where(.dil-scope) .absolute {
43
- position: absolute;
44
- }
45
- :where(.dil-scope) .relative {
46
- position: relative;
47
- }
48
- :where(.dil-scope) .static {
49
- position: static;
50
- }
51
- :where(.dil-scope) .-top-12 {
52
- top: calc(var(--spacing) * -12);
53
- }
54
- :where(.dil-scope) .top-1\\/2 {
55
- top: calc(1 / 2 * 100%);
56
- }
57
- :where(.dil-scope) .-right-12 {
58
- right: calc(var(--spacing) * -12);
59
- }
60
- :where(.dil-scope) .right-2 {
61
- right: calc(var(--spacing) * 2);
62
- }
63
- :where(.dil-scope) .-bottom-12 {
64
- bottom: calc(var(--spacing) * -12);
65
- }
66
- :where(.dil-scope) .-left-12 {
67
- left: calc(var(--spacing) * -12);
68
- }
69
- :where(.dil-scope) .left-1\\/2 {
70
- left: calc(1 / 2 * 100%);
71
- }
72
- :where(.dil-scope) .left-2 {
73
- left: calc(var(--spacing) * 2);
74
- }
75
- :where(.dil-scope) .isolate {
76
- isolation: isolate;
77
- }
78
- :where(.dil-scope) .z-50 {
79
- z-index: 50;
80
- }
81
- :where(.dil-scope) .col-start-2 {
82
- grid-column-start: 2;
83
- }
84
- :where(.dil-scope) .row-span-2 {
85
- grid-row: span 2 / span 2;
86
- }
87
- :where(.dil-scope) .row-start-1 {
88
- grid-row-start: 1;
89
- }
90
- :where(.dil-scope) .container {
91
- width: 100%;
92
- @media (width >= 40rem) {
93
- max-width: 40rem;
94
- }
95
- @media (width >= 48rem) {
96
- max-width: 48rem;
97
- }
98
- @media (width >= 64rem) {
99
- max-width: 64rem;
100
- }
101
- @media (width >= 80rem) {
102
- max-width: 80rem;
103
- }
104
- @media (width >= 96rem) {
105
- max-width: 96rem;
106
- }
107
- }
108
- :where(.dil-scope) .my-0\\.5 {
109
- margin-block: calc(var(--spacing) * 0.5);
110
- }
111
- :where(.dil-scope) .-mt-4 {
112
- margin-top: calc(var(--spacing) * -4);
113
- }
114
- :where(.dil-scope) .mt-2 {
115
- margin-top: calc(var(--spacing) * 2);
116
- }
117
- :where(.dil-scope) .mt-4 {
118
- margin-top: calc(var(--spacing) * 4);
119
- }
120
- :where(.dil-scope) .mb-4 {
121
- margin-bottom: calc(var(--spacing) * 4);
122
- }
123
- :where(.dil-scope) .-ml-4 {
124
- margin-left: calc(var(--spacing) * -4);
125
- }
126
- :where(.dil-scope) .\\!inline {
127
- display: inline !important;
128
- }
129
- :where(.dil-scope) .block {
130
- display: block;
131
- }
132
- :where(.dil-scope) .contents {
133
- display: contents;
134
- }
135
- :where(.dil-scope) .flex {
136
- display: flex;
137
- }
138
- :where(.dil-scope) .grid {
139
- display: grid;
140
- }
141
- :where(.dil-scope) .hidden {
142
- display: none;
143
- }
144
- :where(.dil-scope) .inline {
145
- display: inline;
146
- }
147
- :where(.dil-scope) .inline-block {
148
- display: inline-block;
149
- }
150
- :where(.dil-scope) .inline-flex {
151
- display: inline-flex;
152
- }
153
- :where(.dil-scope) .table {
154
- display: table;
155
- }
156
- :where(.dil-scope) .table-caption {
157
- display: table-caption;
158
- }
159
- :where(.dil-scope) .table-cell {
160
- display: table-cell;
161
- }
162
- :where(.dil-scope) .table-row {
163
- display: table-row;
164
- }
165
- :where(.dil-scope) .field-sizing-content {
166
- field-sizing: content;
167
- }
168
- :where(.dil-scope) .aspect-square {
169
- aspect-ratio: 1 / 1;
170
- }
171
- :where(.dil-scope) .aspect-video {
172
- aspect-ratio: var(--aspect-video);
173
- }
174
- :where(.dil-scope) .size-2 {
175
- width: calc(var(--spacing) * 2);
176
- height: calc(var(--spacing) * 2);
177
- }
178
- :where(.dil-scope) .size-3\\.5 {
179
- width: calc(var(--spacing) * 3.5);
180
- height: calc(var(--spacing) * 3.5);
181
- }
182
- :where(.dil-scope) .size-4 {
183
- width: calc(var(--spacing) * 4);
184
- height: calc(var(--spacing) * 4);
185
- }
186
- :where(.dil-scope) .size-6 {
187
- width: calc(var(--spacing) * 6);
188
- height: calc(var(--spacing) * 6);
189
- }
190
- :where(.dil-scope) .size-8 {
191
- width: calc(var(--spacing) * 8);
192
- height: calc(var(--spacing) * 8);
193
- }
194
- :where(.dil-scope) .size-9 {
195
- width: calc(var(--spacing) * 9);
196
- height: calc(var(--spacing) * 9);
197
- }
198
- :where(.dil-scope) .size-10 {
199
- width: calc(var(--spacing) * 10);
200
- height: calc(var(--spacing) * 10);
201
- }
202
- :where(.dil-scope) .h-2 {
203
- height: calc(var(--spacing) * 2);
204
- }
205
- :where(.dil-scope) .h-2\\.5 {
206
- height: calc(var(--spacing) * 2.5);
207
- }
208
- :where(.dil-scope) .h-6 {
209
- height: calc(var(--spacing) * 6);
210
- }
211
- :where(.dil-scope) .h-8 {
212
- height: calc(var(--spacing) * 8);
213
- }
214
- :where(.dil-scope) .h-9 {
215
- height: calc(var(--spacing) * 9);
216
- }
217
- :where(.dil-scope) .h-10 {
218
- height: calc(var(--spacing) * 10);
219
- }
220
- :where(.dil-scope) .h-\\[248px\\] {
221
- height: 248px;
222
- }
223
- :where(.dil-scope) .h-full {
224
- height: 100%;
225
- }
226
- :where(.dil-scope) .min-h-8 {
227
- min-height: calc(var(--spacing) * 8);
228
- }
229
- :where(.dil-scope) .min-h-16 {
230
- min-height: calc(var(--spacing) * 16);
231
- }
232
- :where(.dil-scope) .min-h-64 {
233
- min-height: calc(var(--spacing) * 64);
234
- }
235
- :where(.dil-scope) .w-0 {
236
- width: 0px;
237
- }
238
- :where(.dil-scope) .w-1 {
239
- width: var(--spacing);
240
- }
241
- :where(.dil-scope) .w-2 {
242
- width: calc(var(--spacing) * 2);
243
- }
244
- :where(.dil-scope) .w-2\\.5 {
245
- width: calc(var(--spacing) * 2.5);
246
- }
247
- :where(.dil-scope) .w-72 {
248
- width: calc(var(--spacing) * 72);
249
- }
250
- :where(.dil-scope) .w-auto {
251
- width: auto;
252
- }
253
- :where(.dil-scope) .w-fit {
254
- width: fit-content;
255
- }
256
- :where(.dil-scope) .w-full {
257
- width: 100%;
258
- }
259
- :where(.dil-scope) .max-w-\\[calc\\(100vw-2rem\\)\\] {
260
- max-width: calc(100vw - 2rem);
261
- }
262
- :where(.dil-scope) .max-w-full {
263
- max-width: 100%;
264
- }
265
- :where(.dil-scope) .min-w-0 {
266
- min-width: 0px;
267
- }
268
- :where(.dil-scope) .min-w-8 {
269
- min-width: calc(var(--spacing) * 8);
270
- }
271
- :where(.dil-scope) .min-w-9 {
272
- min-width: calc(var(--spacing) * 9);
273
- }
274
- :where(.dil-scope) .min-w-10 {
275
- min-width: calc(var(--spacing) * 10);
276
- }
277
- :where(.dil-scope) .min-w-\\[8rem\\] {
278
- min-width: 8rem;
279
- }
280
- :where(.dil-scope) .flex-1 {
281
- flex: 1;
282
- }
283
- :where(.dil-scope) .shrink-0 {
284
- flex-shrink: 0;
285
- }
286
- :where(.dil-scope) .grow {
287
- flex-grow: 1;
288
- }
289
- :where(.dil-scope) .grow-0 {
290
- flex-grow: 0;
291
- }
292
- :where(.dil-scope) .basis-4\\/5 {
293
- flex-basis: calc(4 / 5 * 100%);
294
- }
295
- :where(.dil-scope) .basis-full {
296
- flex-basis: 100%;
297
- }
298
- :where(.dil-scope) .caption-bottom {
299
- caption-side: bottom;
300
- }
301
- :where(.dil-scope) .origin-\\(--radix-popover-content-transform-origin\\) {
302
- transform-origin: var(--radix-popover-content-transform-origin);
303
- }
304
- :where(.dil-scope) .-translate-x-1\\/2 {
305
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
306
- translate: var(--tw-translate-x) var(--tw-translate-y);
307
- }
308
- :where(.dil-scope) .-translate-y-1\\/2 {
309
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
310
- translate: var(--tw-translate-x) var(--tw-translate-y);
311
- }
312
- :where(.dil-scope) .rotate-90 {
313
- rotate: 90deg;
314
- }
315
- :where(.dil-scope) .transform {
316
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
317
- }
318
- :where(.dil-scope) .animate-pulse {
319
- animation: var(--animate-pulse);
320
- }
321
- :where(.dil-scope) .cursor-pointer {
322
- cursor: pointer;
323
- }
324
- :where(.dil-scope) .touch-none {
325
- touch-action: none;
326
- }
327
- :where(.dil-scope) .resize {
328
- resize: both;
329
- }
330
- :where(.dil-scope) .auto-rows-min {
331
- grid-auto-rows: min-content;
332
- }
333
- :where(.dil-scope) .grid-rows-\\[auto_auto\\] {
334
- grid-template-rows: auto auto;
335
- }
336
- :where(.dil-scope) .flex-col {
337
- flex-direction: column;
338
- }
339
- :where(.dil-scope) .flex-wrap {
340
- flex-wrap: wrap;
341
- }
342
- :where(.dil-scope) .place-content-center {
343
- place-content: center;
344
- }
345
- :where(.dil-scope) .items-center {
346
- align-items: center;
347
- }
348
- :where(.dil-scope) .items-end {
349
- align-items: flex-end;
350
- }
351
- :where(.dil-scope) .items-start {
352
- align-items: flex-start;
353
- }
354
- :where(.dil-scope) .items-stretch {
355
- align-items: stretch;
356
- }
357
- :where(.dil-scope) .justify-between {
358
- justify-content: space-between;
359
- }
360
- :where(.dil-scope) .justify-center {
361
- justify-content: center;
362
- }
363
- :where(.dil-scope) .gap-1 {
364
- gap: var(--spacing);
365
- }
366
- :where(.dil-scope) .gap-1\\.5 {
367
- gap: calc(var(--spacing) * 1.5);
368
- }
369
- :where(.dil-scope) .gap-2 {
370
- gap: calc(var(--spacing) * 2);
371
- }
372
- :where(.dil-scope) .gap-3 {
373
- gap: calc(var(--spacing) * 3);
374
- }
375
- :where(.dil-scope) .gap-4 {
376
- gap: calc(var(--spacing) * 4);
377
- }
378
- :where(.dil-scope) .gap-6 {
379
- gap: calc(var(--spacing) * 6);
380
- }
381
- :where(.dil-scope) .gap-\\[--spacing\\(var\\(--gap\\)\\)\\] {
382
- gap: calc(var(--spacing) * var(--gap));
383
- }
384
- :where(.dil-scope) .self-start {
385
- align-self: flex-start;
386
- }
387
- :where(.dil-scope) .justify-self-end {
388
- justify-self: flex-end;
389
- }
390
- :where(.dil-scope) .overflow-hidden {
391
- overflow: hidden;
392
- }
393
- :where(.dil-scope) .overflow-x-auto {
394
- overflow-x: auto;
395
- }
396
- :where(.dil-scope) .rounded {
397
- border-radius: 0.25rem;
398
- }
399
- :where(.dil-scope) .rounded-\\[2px\\] {
400
- border-radius: 2px;
401
- }
402
- :where(.dil-scope) .rounded-\\[4px\\] {
403
- border-radius: 4px;
404
- }
405
- :where(.dil-scope) .rounded-full {
406
- border-radius: calc(infinity * 1px);
407
- }
408
- :where(.dil-scope) .rounded-lg {
409
- border-radius: var(--radius);
410
- }
411
- :where(.dil-scope) .rounded-md {
412
- border-radius: calc(var(--radius) - 2px);
413
- }
414
- :where(.dil-scope) .rounded-none {
415
- border-radius: 0;
416
- }
417
- :where(.dil-scope) .rounded-xl {
418
- border-radius: calc(var(--radius) + 4px);
419
- }
420
- :where(.dil-scope) .border {
421
- border-style: var(--tw-border-style);
422
- border-width: 1px;
423
- }
424
- :where(.dil-scope) .border-0 {
425
- border-style: var(--tw-border-style);
426
- border-width: 0px;
427
- }
428
- :where(.dil-scope) .border-\\[1\\.5px\\] {
429
- border-style: var(--tw-border-style);
430
- border-width: 1.5px;
431
- }
432
- :where(.dil-scope) .border-t {
433
- border-top-style: var(--tw-border-style);
434
- border-top-width: 1px;
435
- }
436
- :where(.dil-scope) .border-b {
437
- border-bottom-style: var(--tw-border-style);
438
- border-bottom-width: 1px;
439
- }
440
- :where(.dil-scope) .border-dashed {
441
- --tw-border-style: dashed;
442
- border-style: dashed;
443
- }
444
- :where(.dil-scope) .border-\\(--color-border\\) {
445
- border-color: var(--color-border);
446
- }
447
- :where(.dil-scope) .border-border {
448
- border-color: var(--border);
449
- }
450
- :where(.dil-scope) .border-border\\/50 {
451
- border-color: var(--border);
452
- @supports (color: color-mix(in lab, red, red)) {
453
- border-color: color-mix(in oklab, var(--border) 50%, transparent);
454
- }
455
- }
456
- :where(.dil-scope) .border-destructive\\/30 {
457
- border-color: var(--destructive);
458
- @supports (color: color-mix(in lab, red, red)) {
459
- border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
460
- }
461
- }
462
- :where(.dil-scope) .border-input {
463
- border-color: var(--input);
464
- }
465
- :where(.dil-scope) .border-primary {
466
- border-color: var(--primary);
467
- }
468
- :where(.dil-scope) .border-transparent {
469
- border-color: transparent;
470
- }
471
- :where(.dil-scope) .bg-\\(--color-bg\\) {
472
- background-color: var(--color-bg);
473
- }
474
- :where(.dil-scope) .bg-accent {
475
- background-color: var(--accent);
476
- }
477
- :where(.dil-scope) .bg-background {
478
- background-color: var(--background);
479
- }
480
- :where(.dil-scope) .bg-border {
481
- background-color: var(--border);
482
- }
483
- :where(.dil-scope) .bg-card {
484
- background-color: var(--card);
485
- }
486
- :where(.dil-scope) .bg-destructive {
487
- background-color: var(--destructive);
488
- }
489
- :where(.dil-scope) .bg-muted {
490
- background-color: var(--muted);
491
- }
492
- :where(.dil-scope) .bg-muted\\/50 {
493
- background-color: var(--muted);
494
- @supports (color: color-mix(in lab, red, red)) {
495
- background-color: color-mix(in oklab, var(--muted) 50%, transparent);
496
- }
497
- }
498
- :where(.dil-scope) .bg-popover {
499
- background-color: var(--popover);
500
- }
501
- :where(.dil-scope) .bg-primary {
502
- background-color: var(--primary);
503
- }
504
- :where(.dil-scope) .bg-secondary {
505
- background-color: var(--secondary);
506
- }
507
- :where(.dil-scope) .bg-transparent {
508
- background-color: transparent;
509
- }
510
- :where(.dil-scope) .bg-white {
511
- background-color: var(--color-white);
512
- }
513
- :where(.dil-scope) .fill-primary {
514
- fill: var(--primary);
515
- }
516
- :where(.dil-scope) .object-cover {
517
- object-fit: cover;
518
- }
519
- :where(.dil-scope) .p-0 {
520
- padding: 0px;
521
- }
522
- :where(.dil-scope) .p-1 {
523
- padding: var(--spacing);
524
- }
525
- :where(.dil-scope) .p-2 {
526
- padding: calc(var(--spacing) * 2);
527
- }
528
- :where(.dil-scope) .p-3 {
529
- padding: calc(var(--spacing) * 3);
530
- }
531
- :where(.dil-scope) .p-4 {
532
- padding: calc(var(--spacing) * 4);
533
- }
534
- :where(.dil-scope) .px-1\\.5 {
535
- padding-inline: calc(var(--spacing) * 1.5);
536
- }
537
- :where(.dil-scope) .px-2 {
538
- padding-inline: calc(var(--spacing) * 2);
539
- }
540
- :where(.dil-scope) .px-2\\.5 {
541
- padding-inline: calc(var(--spacing) * 2.5);
542
- }
543
- :where(.dil-scope) .px-3 {
544
- padding-inline: calc(var(--spacing) * 3);
545
- }
546
- :where(.dil-scope) .px-4 {
547
- padding-inline: calc(var(--spacing) * 4);
548
- }
549
- :where(.dil-scope) .px-6 {
550
- padding-inline: calc(var(--spacing) * 6);
551
- }
552
- :where(.dil-scope) .py-0\\.5 {
553
- padding-block: calc(var(--spacing) * 0.5);
554
- }
555
- :where(.dil-scope) .py-1 {
556
- padding-block: var(--spacing);
557
- }
558
- :where(.dil-scope) .py-1\\.5 {
559
- padding-block: calc(var(--spacing) * 1.5);
560
- }
561
- :where(.dil-scope) .py-2 {
562
- padding-block: calc(var(--spacing) * 2);
563
- }
564
- :where(.dil-scope) .py-3 {
565
- padding-block: calc(var(--spacing) * 3);
566
- }
567
- :where(.dil-scope) .py-6 {
568
- padding-block: calc(var(--spacing) * 6);
569
- }
570
- :where(.dil-scope) .pt-3 {
571
- padding-top: calc(var(--spacing) * 3);
572
- }
573
- :where(.dil-scope) .pt-4 {
574
- padding-top: calc(var(--spacing) * 4);
575
- }
576
- :where(.dil-scope) .pb-3 {
577
- padding-bottom: calc(var(--spacing) * 3);
578
- }
579
- :where(.dil-scope) .pl-4 {
580
- padding-left: calc(var(--spacing) * 4);
581
- }
582
- :where(.dil-scope) .text-left {
583
- text-align: left;
584
- }
585
- :where(.dil-scope) .align-middle {
586
- vertical-align: middle;
587
- }
588
- :where(.dil-scope) .font-mono {
589
- font-family: var(--font-mono);
590
- }
591
- :where(.dil-scope) .text-base {
592
- font-size: var(--text-base);
593
- line-height: var(--tw-leading, var(--text-base--line-height));
594
- }
595
- :where(.dil-scope) .text-sm {
596
- font-size: var(--text-sm);
597
- line-height: var(--tw-leading, var(--text-sm--line-height));
598
- }
599
- :where(.dil-scope) .text-xs {
600
- font-size: var(--text-xs);
601
- line-height: var(--tw-leading, var(--text-xs--line-height));
602
- }
603
- :where(.dil-scope) .leading-6 {
604
- --tw-leading: calc(var(--spacing) * 6);
605
- line-height: calc(var(--spacing) * 6);
606
- }
607
- :where(.dil-scope) .leading-none {
608
- --tw-leading: 1;
609
- line-height: 1;
610
- }
611
- :where(.dil-scope) .font-medium {
612
- --tw-font-weight: var(--font-weight-medium);
613
- font-weight: var(--font-weight-medium);
614
- }
615
- :where(.dil-scope) .font-semibold {
616
- --tw-font-weight: var(--font-weight-semibold);
617
- font-weight: var(--font-weight-semibold);
618
- }
619
- :where(.dil-scope) .whitespace-nowrap {
620
- white-space: nowrap;
621
- }
622
- :where(.dil-scope) .text-card-foreground {
623
- color: var(--card-foreground);
624
- }
625
- :where(.dil-scope) .text-current {
626
- color: currentcolor;
627
- }
628
- :where(.dil-scope) .text-destructive {
629
- color: var(--destructive);
630
- }
631
- :where(.dil-scope) .text-foreground {
632
- color: var(--foreground);
633
- }
634
- :where(.dil-scope) .text-muted-foreground {
635
- color: var(--muted-foreground);
636
- }
637
- :where(.dil-scope) .text-popover-foreground {
638
- color: var(--popover-foreground);
639
- }
640
- :where(.dil-scope) .text-primary {
641
- color: var(--primary);
642
- }
643
- :where(.dil-scope) .text-primary-foreground {
644
- color: var(--primary-foreground);
645
- }
646
- :where(.dil-scope) .text-secondary-foreground {
647
- color: var(--secondary-foreground);
648
- }
649
- :where(.dil-scope) .text-white {
650
- color: var(--color-white);
651
- }
652
- :where(.dil-scope) .tabular-nums {
653
- --tw-numeric-spacing: tabular-nums;
654
- font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
655
- }
656
- :where(.dil-scope) .line-through {
657
- text-decoration-line: line-through;
658
- }
659
- :where(.dil-scope) .underline-offset-4 {
660
- text-underline-offset: 4px;
661
- }
662
- :where(.dil-scope) .shadow {
663
- --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));
664
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
665
- }
666
- :where(.dil-scope) .shadow-md {
667
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
668
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
669
- }
670
- :where(.dil-scope) .shadow-none {
671
- --tw-shadow: 0 0 #0000;
672
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
673
- }
674
- :where(.dil-scope) .shadow-sm {
675
- --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));
676
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
677
- }
678
- :where(.dil-scope) .shadow-xl {
679
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
680
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
681
- }
682
- :where(.dil-scope) .shadow-xs {
683
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
684
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
685
- }
686
- :where(.dil-scope) .ring-ring\\/50 {
687
- --tw-ring-color: var(--ring);
688
- @supports (color: color-mix(in lab, red, red)) {
689
- --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
690
- }
691
- }
692
- :where(.dil-scope) .outline-hidden {
693
- --tw-outline-style: none;
694
- outline-style: none;
695
- @media (forced-colors: active) {
696
- outline: 2px solid transparent;
697
- outline-offset: 2px;
698
- }
699
- }
700
- :where(.dil-scope) .outline {
701
- outline-style: var(--tw-outline-style);
702
- outline-width: 1px;
703
- }
704
- :where(.dil-scope) .blur {
705
- --tw-blur: blur(8px);
706
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
707
- }
708
- :where(.dil-scope) .transition-\\[color\\,box-shadow\\] {
709
- transition-property: color,box-shadow;
710
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
711
- transition-duration: var(--tw-duration, var(--default-transition-duration));
712
- }
713
- :where(.dil-scope) .transition-all {
714
- transition-property: all;
715
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
716
- transition-duration: var(--tw-duration, var(--default-transition-duration));
717
- }
718
- :where(.dil-scope) .transition-colors {
719
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
720
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
721
- transition-duration: var(--tw-duration, var(--default-transition-duration));
722
- }
723
- :where(.dil-scope) .transition-shadow {
724
- transition-property: box-shadow;
725
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
726
- transition-duration: var(--tw-duration, var(--default-transition-duration));
727
- }
728
- :where(.dil-scope) .transition-none {
729
- transition-property: none;
730
- }
731
- :where(.dil-scope) .ease-out {
732
- --tw-ease: var(--ease-out);
733
- transition-timing-function: var(--ease-out);
734
- }
735
- :where(.dil-scope) .outline-none {
736
- --tw-outline-style: none;
737
- outline-style: none;
738
- }
739
- :where(.dil-scope) .select-none {
740
- -webkit-user-select: none;
741
- user-select: none;
742
- }
743
- :where(.dil-scope) .selection\\:bg-primary ::selection {
744
- background-color: var(--primary);
745
- }
746
- :where(.dil-scope) .selection\\:bg-primary::selection {
747
- background-color: var(--primary);
748
- }
749
- :where(.dil-scope) .selection\\:text-primary-foreground ::selection {
750
- color: var(--primary-foreground);
751
- }
752
- :where(.dil-scope) .selection\\:text-primary-foreground::selection {
753
- color: var(--primary-foreground);
754
- }
755
- :where(.dil-scope) .file\\:inline-flex::file-selector-button {
756
- display: inline-flex;
757
- }
758
- :where(.dil-scope) .file\\:h-7::file-selector-button {
759
- height: calc(var(--spacing) * 7);
760
- }
761
- :where(.dil-scope) .file\\:border-0::file-selector-button {
762
- border-style: var(--tw-border-style);
763
- border-width: 0px;
764
- }
765
- :where(.dil-scope) .file\\:bg-transparent::file-selector-button {
766
- background-color: transparent;
767
- }
768
- :where(.dil-scope) .file\\:text-sm::file-selector-button {
769
- font-size: var(--text-sm);
770
- line-height: var(--tw-leading, var(--text-sm--line-height));
771
- }
772
- :where(.dil-scope) .file\\:font-medium::file-selector-button {
773
- --tw-font-weight: var(--font-weight-medium);
774
- font-weight: var(--font-weight-medium);
775
- }
776
- :where(.dil-scope) .file\\:text-foreground::file-selector-button {
777
- color: var(--foreground);
778
- }
779
- :where(.dil-scope) .placeholder\\:text-muted-foreground::placeholder {
780
- color: var(--muted-foreground);
781
- }
782
- @media (hover: hover) {
783
- :where(.dil-scope) .hover\\:bg-accent:hover {
784
- background-color: var(--accent);
785
- }
786
- :where(.dil-scope) .hover\\:bg-destructive\\/90:hover {
787
- background-color: var(--destructive);
788
- }
789
- @supports (color: color-mix(in lab, red, red)) {
790
- :where(.dil-scope) .hover\\:bg-destructive\\/90:hover {
791
- background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
792
- }
793
- }
794
- :where(.dil-scope) .hover\\:bg-muted:hover {
795
- background-color: var(--muted);
796
- }
797
- :where(.dil-scope) .hover\\:bg-muted\\/50:hover {
798
- background-color: var(--muted);
799
- }
800
- @supports (color: color-mix(in lab, red, red)) {
801
- :where(.dil-scope) .hover\\:bg-muted\\/50:hover {
802
- background-color: color-mix(in oklab, var(--muted) 50%, transparent);
803
- }
804
- }
805
- :where(.dil-scope) .hover\\:bg-primary\\/90:hover {
806
- background-color: var(--primary);
807
- }
808
- @supports (color: color-mix(in lab, red, red)) {
809
- :where(.dil-scope) .hover\\:bg-primary\\/90:hover {
810
- background-color: color-mix(in oklab, var(--primary) 90%, transparent);
811
- }
812
- }
813
- :where(.dil-scope) .hover\\:bg-secondary:hover {
814
- background-color: var(--secondary);
815
- }
816
- :where(.dil-scope) .hover\\:bg-secondary\\/80:hover {
817
- background-color: var(--secondary);
818
- }
819
- @supports (color: color-mix(in lab, red, red)) {
820
- :where(.dil-scope) .hover\\:bg-secondary\\/80:hover {
821
- background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
822
- }
823
- }
824
- :where(.dil-scope) .hover\\:text-accent-foreground:hover {
825
- color: var(--accent-foreground);
826
- }
827
- :where(.dil-scope) .hover\\:text-muted-foreground:hover {
828
- color: var(--muted-foreground);
829
- }
830
- :where(.dil-scope) .hover\\:underline:hover {
831
- text-decoration-line: underline;
832
- }
833
- :where(.dil-scope) .hover\\:ring-4:hover {
834
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
835
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
836
- }
837
- }
838
- :where(.dil-scope) .focus\\:z-10:focus {
839
- z-index: 10;
840
- }
841
- :where(.dil-scope) .focus-visible\\:z-10:focus-visible {
842
- z-index: 10;
843
- }
844
- :where(.dil-scope) .focus-visible\\:border-ring:focus-visible {
845
- border-color: var(--ring);
846
- }
847
- :where(.dil-scope) .focus-visible\\:ring-2:focus-visible {
848
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
849
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
850
- }
851
- :where(.dil-scope) .focus-visible\\:ring-4:focus-visible {
852
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
853
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
854
- }
855
- :where(.dil-scope) .focus-visible\\:ring-\\[3px\\]:focus-visible {
856
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
857
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
858
- }
859
- :where(.dil-scope) .focus-visible\\:ring-destructive\\/20:focus-visible {
860
- --tw-ring-color: var(--destructive);
861
- @supports (color: color-mix(in lab, red, red)) {
862
- --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
863
- }
864
- }
865
- :where(.dil-scope) .focus-visible\\:ring-ring:focus-visible {
866
- --tw-ring-color: var(--ring);
867
- }
868
- :where(.dil-scope) .focus-visible\\:ring-ring\\/50:focus-visible {
869
- --tw-ring-color: var(--ring);
870
- @supports (color: color-mix(in lab, red, red)) {
871
- --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
872
- }
873
- }
874
- :where(.dil-scope) .focus-visible\\:outline-hidden:focus-visible {
875
- --tw-outline-style: none;
876
- outline-style: none;
877
- @media (forced-colors: active) {
878
- outline: 2px solid transparent;
879
- outline-offset: 2px;
880
- }
881
- }
882
- :where(.dil-scope) .disabled\\:pointer-events-none:disabled {
883
- pointer-events: none;
884
- }
885
- :where(.dil-scope) .disabled\\:cursor-not-allowed:disabled {
886
- cursor: not-allowed;
887
- }
888
- :where(.dil-scope) .disabled\\:opacity-50:disabled {
889
- opacity: 50%;
890
- }
891
- :where(.dil-scope) .has-aria-expanded\\:bg-muted\\/50:has([aria-expanded="true"]) {
892
- background-color: var(--muted);
893
- @supports (color: color-mix(in lab, red, red)) {
894
- background-color: color-mix(in oklab, var(--muted) 50%, transparent);
895
- }
896
- }
897
- :where(.dil-scope) .has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has([data-slot="card-action"]) {
898
- grid-template-columns: 1fr auto;
899
- }
900
- :where(.dil-scope) .has-\\[\\>svg\\]\\:px-1\\.5:has( > svg) {
901
- padding-inline: calc(var(--spacing) * 1.5);
902
- }
903
- :where(.dil-scope) .has-\\[\\>svg\\]\\:px-2\\.5:has( > svg) {
904
- padding-inline: calc(var(--spacing) * 2.5);
905
- }
906
- :where(.dil-scope) .has-\\[\\>svg\\]\\:px-3:has( > svg) {
907
- padding-inline: calc(var(--spacing) * 3);
908
- }
909
- :where(.dil-scope) .has-\\[\\>svg\\]\\:px-4:has( > svg) {
910
- padding-inline: calc(var(--spacing) * 4);
911
- }
912
- :where(.dil-scope) .aria-invalid\\:border-destructive[aria-invalid="true"] {
913
- border-color: var(--destructive);
914
- }
915
- :where(.dil-scope) .aria-invalid\\:ring-destructive\\/20[aria-invalid="true"] {
916
- --tw-ring-color: var(--destructive);
917
- @supports (color: color-mix(in lab, red, red)) {
918
- --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
919
- }
920
- }
921
- :where(.dil-scope) .data-\\[disabled\\]\\:opacity-50[data-disabled] {
922
- opacity: 50%;
923
- }
924
- :where(.dil-scope) .data-\\[orientation\\=horizontal\\]\\:h-1\\.5[data-orientation="horizontal"] {
925
- height: calc(var(--spacing) * 1.5);
926
- }
927
- :where(.dil-scope) .data-\\[orientation\\=horizontal\\]\\:h-full[data-orientation="horizontal"] {
928
- height: 100%;
929
- }
930
- :where(.dil-scope) .data-\\[orientation\\=horizontal\\]\\:h-px[data-orientation="horizontal"] {
931
- height: 1px;
932
- }
933
- :where(.dil-scope) .data-\\[orientation\\=horizontal\\]\\:w-full[data-orientation="horizontal"] {
934
- width: 100%;
935
- }
936
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:h-full[data-orientation="vertical"] {
937
- height: 100%;
938
- }
939
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:min-h-44[data-orientation="vertical"] {
940
- min-height: calc(var(--spacing) * 44);
941
- }
942
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:w-1\\.5[data-orientation="vertical"] {
943
- width: calc(var(--spacing) * 1.5);
944
- }
945
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:w-auto[data-orientation="vertical"] {
946
- width: auto;
947
- }
948
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:w-full[data-orientation="vertical"] {
949
- width: 100%;
950
- }
951
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:w-px[data-orientation="vertical"] {
952
- width: 1px;
953
- }
954
- :where(.dil-scope) .data-\\[orientation\\=vertical\\]\\:flex-col[data-orientation="vertical"] {
955
- flex-direction: column;
956
- }
957
- :where(.dil-scope) .data-\\[state\\=checked\\]\\:border-primary[data-state="checked"] {
958
- border-color: var(--primary);
959
- }
960
- :where(.dil-scope) .data-\\[state\\=checked\\]\\:bg-primary[data-state="checked"] {
961
- background-color: var(--primary);
962
- }
963
- :where(.dil-scope) .data-\\[state\\=checked\\]\\:text-primary-foreground[data-state="checked"] {
964
- color: var(--primary-foreground);
965
- }
966
- :where(.dil-scope) .data-\\[state\\=on\\]\\:bg-accent[data-state="on"] {
967
- background-color: var(--accent);
968
- }
969
- :where(.dil-scope) .data-\\[state\\=on\\]\\:bg-background[data-state="on"] {
970
- background-color: var(--background);
971
- }
972
- :where(.dil-scope) .data-\\[state\\=on\\]\\:text-accent-foreground[data-state="on"] {
973
- color: var(--accent-foreground);
974
- }
975
- :where(.dil-scope) .data-\\[state\\=on\\]\\:shadow-sm[data-state="on"] {
976
- --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));
977
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
978
- }
979
- :where(.dil-scope) .data-\\[state\\=selected\\]\\:bg-muted[data-state="selected"] {
980
- background-color: var(--muted);
981
- }
982
- :where(.dil-scope) .data-\\[spacing\\=default\\]\\:data-\\[variant\\=outline\\]\\:shadow-xs[data-spacing="default"][data-variant="outline"] {
983
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
984
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
985
- }
986
- @media (width >= 48rem) {
987
- :where(.dil-scope) .md\\:text-sm {
988
- font-size: var(--text-sm);
989
- line-height: var(--tw-leading, var(--text-sm--line-height));
990
- }
991
- }
992
- @media (prefers-color-scheme: dark) {
993
- :where(.dil-scope) .dark\\:border-input {
994
- border-color: var(--input);
995
- }
996
- :where(.dil-scope) .dark\\:bg-destructive\\/60 {
997
- background-color: var(--destructive);
998
- }
999
- @supports (color: color-mix(in lab, red, red)) {
1000
- :where(.dil-scope) .dark\\:bg-destructive\\/60 {
1001
- background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
1002
- }
1003
- }
1004
- :where(.dil-scope) .dark\\:bg-input\\/30 {
1005
- background-color: var(--input);
1006
- }
1007
- @supports (color: color-mix(in lab, red, red)) {
1008
- :where(.dil-scope) .dark\\:bg-input\\/30 {
1009
- background-color: color-mix(in oklab, var(--input) 30%, transparent);
1010
- }
1011
- }
1012
- @media (hover: hover) {
1013
- :where(.dil-scope) .dark\\:hover\\:bg-accent\\/50:hover {
1014
- background-color: var(--accent);
1015
- }
1016
- @supports (color: color-mix(in lab, red, red)) {
1017
- :where(.dil-scope) .dark\\:hover\\:bg-accent\\/50:hover {
1018
- background-color: color-mix(in oklab, var(--accent) 50%, transparent);
1019
- }
1020
- }
1021
- :where(.dil-scope) .dark\\:hover\\:bg-input\\/50:hover {
1022
- background-color: var(--input);
1023
- }
1024
- @supports (color: color-mix(in lab, red, red)) {
1025
- :where(.dil-scope) .dark\\:hover\\:bg-input\\/50:hover {
1026
- background-color: color-mix(in oklab, var(--input) 50%, transparent);
1027
- }
1028
- }
1029
- }
1030
- :where(.dil-scope) .dark\\:focus-visible\\:ring-destructive\\/40:focus-visible {
1031
- --tw-ring-color: var(--destructive);
1032
- @supports (color: color-mix(in lab, red, red)) {
1033
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1034
- }
1035
- }
1036
- :where(.dil-scope) .dark\\:aria-invalid\\:ring-destructive\\/40[aria-invalid="true"] {
1037
- --tw-ring-color: var(--destructive);
1038
- @supports (color: color-mix(in lab, red, red)) {
1039
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1040
- }
1041
- }
1042
- :where(.dil-scope) .dark\\:data-\\[state\\=checked\\]\\:bg-primary[data-state="checked"] {
1043
- background-color: var(--primary);
1044
- }
1045
- }
1046
- :where(.dil-scope) .\\[\\&_\\.recharts-cartesian-axis-tick_text\\]\\:fill-muted-foreground .recharts-cartesian-axis-tick text {
1047
- fill: var(--muted-foreground);
1048
- }
1049
- :where(.dil-scope) .\\[\\&_\\.recharts-cartesian-grid_line\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border\\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
1050
- stroke: var(--border);
1051
- @supports (color: color-mix(in lab, red, red)) {
1052
- stroke: color-mix(in oklab, var(--border) 50%, transparent);
1053
- }
1054
- }
1055
- :where(.dil-scope) .\\[\\&_\\.recharts-curve\\.recharts-tooltip-cursor\\]\\:stroke-border .recharts-curve.recharts-tooltip-cursor {
1056
- stroke: var(--border);
1057
- }
1058
- :where(.dil-scope) .\\[\\&_\\.recharts-dot\\[stroke\\=\\'\\#fff\\'\\]\\]\\:stroke-transparent .recharts-dot[stroke='#fff'] {
1059
- stroke: transparent;
1060
- }
1061
- :where(.dil-scope) .\\[\\&_\\.recharts-layer\\]\\:outline-hidden .recharts-layer {
1062
- --tw-outline-style: none;
1063
- outline-style: none;
1064
- @media (forced-colors: active) {
1065
- outline: 2px solid transparent;
1066
- outline-offset: 2px;
1067
- }
1068
- }
1069
- :where(.dil-scope) .\\[\\&_\\.recharts-polar-grid_\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
1070
- stroke: var(--border);
1071
- }
1072
- :where(.dil-scope) .\\[\\&_\\.recharts-radial-bar-background-sector\\]\\:fill-muted .recharts-radial-bar-background-sector {
1073
- fill: var(--muted);
1074
- }
1075
- :where(.dil-scope) .\\[\\&_\\.recharts-rectangle\\.recharts-tooltip-cursor\\]\\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
1076
- fill: var(--muted);
1077
- }
1078
- :where(.dil-scope) .\\[\\&_\\.recharts-reference-line_\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border .recharts-reference-line [stroke='#ccc'] {
1079
- stroke: var(--border);
1080
- }
1081
- :where(.dil-scope) .\\[\\&_\\.recharts-sector\\]\\:outline-hidden .recharts-sector {
1082
- --tw-outline-style: none;
1083
- outline-style: none;
1084
- @media (forced-colors: active) {
1085
- outline: 2px solid transparent;
1086
- outline-offset: 2px;
1087
- }
1088
- }
1089
- :where(.dil-scope) .\\[\\&_\\.recharts-sector\\[stroke\\=\\'\\#fff\\'\\]\\]\\:stroke-transparent .recharts-sector[stroke='#fff'] {
1090
- stroke: transparent;
1091
- }
1092
- :where(.dil-scope) .\\[\\&_\\.recharts-surface\\]\\:outline-hidden .recharts-surface {
1093
- --tw-outline-style: none;
1094
- outline-style: none;
1095
- @media (forced-colors: active) {
1096
- outline: 2px solid transparent;
1097
- outline-offset: 2px;
1098
- }
1099
- }
1100
- :where(.dil-scope) .\\[\\&_svg\\]\\:pointer-events-none svg {
1101
- pointer-events: none;
1102
- }
1103
- :where(.dil-scope) .\\[\\&_svg\\]\\:shrink-0 svg {
1104
- flex-shrink: 0;
1105
- }
1106
- :where(.dil-scope) .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 svg:not([class*='size-']) {
1107
- width: calc(var(--spacing) * 3);
1108
- height: calc(var(--spacing) * 3);
1109
- }
1110
- :where(.dil-scope) .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*='size-']) {
1111
- width: calc(var(--spacing) * 4);
1112
- height: calc(var(--spacing) * 4);
1113
- }
1114
- :where(.dil-scope) .\\[\\&_tr\\]\\:border-b tr {
1115
- border-bottom-style: var(--tw-border-style);
1116
- border-bottom-width: 1px;
1117
- }
1118
- :where(.dil-scope) .\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {
1119
- border-style: var(--tw-border-style);
1120
- border-width: 0px;
1121
- }
1122
- :where(.dil-scope) .\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {
1123
- padding-right: 0px;
1124
- }
1125
- :where(.dil-scope) .\\[\\.border-b\\]\\:pb-6:is(.border-b) {
1126
- padding-bottom: calc(var(--spacing) * 6);
1127
- }
1128
- :where(.dil-scope) .\\[\\.border-t\\]\\:pt-6:is(.border-t) {
1129
- padding-top: calc(var(--spacing) * 6);
1130
- }
1131
- :where(.dil-scope) .\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role=checkbox] {
1132
- --tw-translate-y: 2px;
1133
- translate: var(--tw-translate-x) var(--tw-translate-y);
1134
- }
1135
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:pointer-events-none > svg {
1136
- pointer-events: none;
1137
- }
1138
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:size-3 > svg {
1139
- width: calc(var(--spacing) * 3);
1140
- height: calc(var(--spacing) * 3);
1141
- }
1142
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:h-2\\.5 > svg {
1143
- height: calc(var(--spacing) * 2.5);
1144
- }
1145
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:h-3 > svg {
1146
- height: calc(var(--spacing) * 3);
1147
- }
1148
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:w-2\\.5 > svg {
1149
- width: calc(var(--spacing) * 2.5);
1150
- }
1151
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:w-3 > svg {
1152
- width: calc(var(--spacing) * 3);
1153
- }
1154
- :where(.dil-scope) .\\[\\&\\>svg\\]\\:text-muted-foreground > svg {
1155
- color: var(--muted-foreground);
1156
- }
1157
- :where(.dil-scope) .\\[\\&\\>tr\\]\\:last\\:border-b-0 > tr:last-child {
1158
- border-bottom-style: var(--tw-border-style);
1159
- border-bottom-width: 0px;
1160
- }
1161
- @media (hover: hover) {
1162
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-accent:hover {
1163
- background-color: var(--accent);
1164
- }
1165
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-destructive\\/90:hover {
1166
- background-color: var(--destructive);
1167
- }
1168
- @supports (color: color-mix(in lab, red, red)) {
1169
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-destructive\\/90:hover {
1170
- background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
1171
- }
1172
- }
1173
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-primary\\/90:hover {
1174
- background-color: var(--primary);
1175
- }
1176
- @supports (color: color-mix(in lab, red, red)) {
1177
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-primary\\/90:hover {
1178
- background-color: color-mix(in oklab, var(--primary) 90%, transparent);
1179
- }
1180
- }
1181
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-secondary\\/90:hover {
1182
- background-color: var(--secondary);
1183
- }
1184
- @supports (color: color-mix(in lab, red, red)) {
1185
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:bg-secondary\\/90:hover {
1186
- background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
1187
- }
1188
- }
1189
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:text-accent-foreground:hover {
1190
- color: var(--accent-foreground);
1191
- }
1192
- :where(.dil-scope) a.\\[a\\&\\]\\:hover\\:underline:hover {
1193
- text-decoration-line: underline;
1194
- }
1195
- }
1196
- :where(.dil-scope) .react-flow {
1197
- direction: ltr;
1198
- --xy-edge-stroke-default: #b1b1b7;
1199
- --xy-edge-stroke-width-default: 1;
1200
- --xy-edge-stroke-selected-default: #555;
1201
- --xy-connectionline-stroke-default: #b1b1b7;
1202
- --xy-connectionline-stroke-width-default: 1;
1203
- --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
1204
- --xy-minimap-background-color-default: #fff;
1205
- --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
1206
- --xy-minimap-mask-stroke-color-default: transparent;
1207
- --xy-minimap-mask-stroke-width-default: 1;
1208
- --xy-minimap-node-background-color-default: #e2e2e2;
1209
- --xy-minimap-node-stroke-color-default: transparent;
1210
- --xy-minimap-node-stroke-width-default: 2;
1211
- --xy-background-color-default: transparent;
1212
- --xy-background-pattern-dots-color-default: #91919a;
1213
- --xy-background-pattern-lines-color-default: #eee;
1214
- --xy-background-pattern-cross-color-default: #e2e2e2;
1215
- background-color: var(--xy-background-color, var(--xy-background-color-default));
1216
- --xy-node-color-default: inherit;
1217
- --xy-node-border-default: 1px solid #1a192b;
1218
- --xy-node-background-color-default: #fff;
1219
- --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
1220
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
1221
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
1222
- --xy-node-border-radius-default: 3px;
1223
- --xy-handle-background-color-default: #1a192b;
1224
- --xy-handle-border-color-default: #fff;
1225
- --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
1226
- --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
1227
- --xy-controls-button-background-color-default: #fefefe;
1228
- --xy-controls-button-background-color-hover-default: #f4f4f4;
1229
- --xy-controls-button-color-default: inherit;
1230
- --xy-controls-button-color-hover-default: inherit;
1231
- --xy-controls-button-border-color-default: #eee;
1232
- --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
1233
- --xy-edge-label-background-color-default: #ffffff;
1234
- --xy-edge-label-color-default: inherit;
1235
- --xy-resize-background-color-default: #3367d9;
1236
- }
1237
- :where(.dil-scope) .react-flow.dark {
1238
- --xy-edge-stroke-default: #3e3e3e;
1239
- --xy-edge-stroke-width-default: 1;
1240
- --xy-edge-stroke-selected-default: #727272;
1241
- --xy-connectionline-stroke-default: #b1b1b7;
1242
- --xy-connectionline-stroke-width-default: 1;
1243
- --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
1244
- --xy-minimap-background-color-default: #141414;
1245
- --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
1246
- --xy-minimap-mask-stroke-color-default: transparent;
1247
- --xy-minimap-mask-stroke-width-default: 1;
1248
- --xy-minimap-node-background-color-default: #2b2b2b;
1249
- --xy-minimap-node-stroke-color-default: transparent;
1250
- --xy-minimap-node-stroke-width-default: 2;
1251
- --xy-background-color-default: #141414;
1252
- --xy-background-pattern-dots-color-default: #555;
1253
- --xy-background-pattern-lines-color-default: #333;
1254
- --xy-background-pattern-cross-color-default: #333;
1255
- --xy-node-color-default: #f8f8f8;
1256
- --xy-node-border-default: 1px solid #3c3c3c;
1257
- --xy-node-background-color-default: #1e1e1e;
1258
- --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
1259
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
1260
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
1261
- --xy-handle-background-color-default: #bebebe;
1262
- --xy-handle-border-color-default: #1e1e1e;
1263
- --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
1264
- --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
1265
- --xy-controls-button-background-color-default: #2b2b2b;
1266
- --xy-controls-button-background-color-hover-default: #3e3e3e;
1267
- --xy-controls-button-color-default: #f8f8f8;
1268
- --xy-controls-button-color-hover-default: #fff;
1269
- --xy-controls-button-border-color-default: #5b5b5b;
1270
- --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
1271
- --xy-edge-label-background-color-default: #141414;
1272
- --xy-edge-label-color-default: #f8f8f8;
1273
- }
1274
- :where(.dil-scope) .react-flow__background {
1275
- background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
1276
- pointer-events: none;
1277
- z-index: -1;
1278
- }
1279
- :where(.dil-scope) .react-flow__container {
1280
- position: absolute;
1281
- width: 100%;
1282
- height: 100%;
1283
- top: 0;
1284
- left: 0;
1285
- }
1286
- :where(.dil-scope) .react-flow__pane {
1287
- z-index: 1;
1288
- touch-action: none;
1289
- }
1290
- :where(.dil-scope) .react-flow__pane.draggable {
1291
- cursor: grab;
1292
- }
1293
- :where(.dil-scope) .react-flow__pane.dragging {
1294
- cursor: grabbing;
1295
- }
1296
- :where(.dil-scope) .react-flow__pane.selection {
1297
- cursor: pointer;
1298
- }
1299
- :where(.dil-scope) .react-flow__viewport {
1300
- transform-origin: 0 0;
1301
- z-index: 2;
1302
- pointer-events: none;
1303
- }
1304
- :where(.dil-scope) .react-flow__renderer {
1305
- z-index: 4;
1306
- }
1307
- :where(.dil-scope) .react-flow__selection {
1308
- z-index: 6;
1309
- }
1310
- :where(.dil-scope) .react-flow__nodesselection-rect:focus, :where(.dil-scope) .react-flow__nodesselection-rect:focus-visible {
1311
- outline: none;
1312
- }
1313
- :where(.dil-scope) .react-flow__edge-path {
1314
- stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
1315
- stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
1316
- fill: none;
1317
- }
1318
- :where(.dil-scope) .react-flow__connection-path {
1319
- stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
1320
- stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
1321
- fill: none;
1322
- }
1323
- :where(.dil-scope) .react-flow .react-flow__edges {
1324
- position: absolute;
1325
- }
1326
- :where(.dil-scope) .react-flow .react-flow__edges svg {
1327
- overflow: visible;
1328
- position: absolute;
1329
- pointer-events: none;
1330
- }
1331
- :where(.dil-scope) .react-flow__edge {
1332
- pointer-events: visibleStroke;
1333
- }
1334
- :where(.dil-scope) .react-flow__edge.selectable {
1335
- cursor: pointer;
1336
- }
1337
- :where(.dil-scope) .react-flow__edge.animated path {
1338
- stroke-dasharray: 5;
1339
- animation: dashdraw 0.5s linear infinite;
1340
- }
1341
- :where(.dil-scope) .react-flow__edge.animated path.react-flow__edge-interaction {
1342
- stroke-dasharray: none;
1343
- animation: none;
1344
- }
1345
- :where(.dil-scope) .react-flow__edge.inactive {
1346
- pointer-events: none;
1347
- }
1348
- :where(.dil-scope) .react-flow__edge.selected, :where(.dil-scope) .react-flow__edge:focus, :where(.dil-scope) .react-flow__edge:focus-visible {
1349
- outline: none;
1350
- }
1351
- :where(.dil-scope) .react-flow__edge.selected .react-flow__edge-path, :where(.dil-scope) .react-flow__edge.selectable:focus .react-flow__edge-path, :where(.dil-scope) .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
1352
- stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
1353
- }
1354
- :where(.dil-scope) .react-flow__edge-textwrapper {
1355
- pointer-events: all;
1356
- }
1357
- :where(.dil-scope) .react-flow__edge .react-flow__edge-text {
1358
- pointer-events: none;
1359
- -webkit-user-select: none;
1360
- -moz-user-select: none;
1361
- user-select: none;
1362
- }
1363
- :where(.dil-scope) .react-flow__arrowhead polyline {
1364
- stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
1365
- }
1366
- :where(.dil-scope) .react-flow__arrowhead polyline.arrowclosed {
1367
- fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
1368
- }
1369
- :where(.dil-scope) .react-flow__connection {
1370
- pointer-events: none;
1371
- }
1372
- :where(.dil-scope) .react-flow__connection .animated {
1373
- stroke-dasharray: 5;
1374
- animation: dashdraw 0.5s linear infinite;
1375
- }
1376
- :where(.dil-scope) svg.react-flow__connectionline {
1377
- z-index: 1001;
1378
- overflow: visible;
1379
- position: absolute;
1380
- }
1381
- :where(.dil-scope) .react-flow__nodes {
1382
- pointer-events: none;
1383
- transform-origin: 0 0;
1384
- }
1385
- :where(.dil-scope) .react-flow__node {
1386
- position: absolute;
1387
- -webkit-user-select: none;
1388
- -moz-user-select: none;
1389
- user-select: none;
1390
- pointer-events: all;
1391
- transform-origin: 0 0;
1392
- box-sizing: border-box;
1393
- cursor: default;
1394
- }
1395
- :where(.dil-scope) .react-flow__node.selectable {
1396
- cursor: pointer;
1397
- }
1398
- :where(.dil-scope) .react-flow__node.draggable {
1399
- cursor: grab;
1400
- pointer-events: all;
1401
- }
1402
- :where(.dil-scope) .react-flow__node.draggable.dragging {
1403
- cursor: grabbing;
1404
- }
1405
- :where(.dil-scope) .react-flow__nodesselection {
1406
- z-index: 3;
1407
- transform-origin: left top;
1408
- pointer-events: none;
1409
- }
1410
- :where(.dil-scope) .react-flow__nodesselection-rect {
1411
- position: absolute;
1412
- pointer-events: all;
1413
- cursor: grab;
1414
- }
1415
- :where(.dil-scope) .react-flow__handle {
1416
- position: absolute;
1417
- pointer-events: none;
1418
- min-width: 5px;
1419
- min-height: 5px;
1420
- width: 6px;
1421
- height: 6px;
1422
- background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
1423
- border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
1424
- border-radius: 100%;
1425
- }
1426
- :where(.dil-scope) .react-flow__handle.connectingfrom {
1427
- pointer-events: all;
1428
- }
1429
- :where(.dil-scope) .react-flow__handle.connectionindicator {
1430
- pointer-events: all;
1431
- cursor: crosshair;
1432
- }
1433
- :where(.dil-scope) .react-flow__handle-bottom {
1434
- top: auto;
1435
- left: 50%;
1436
- bottom: 0;
1437
- transform: translate(-50%, 50%);
1438
- }
1439
- :where(.dil-scope) .react-flow__handle-top {
1440
- top: 0;
1441
- left: 50%;
1442
- transform: translate(-50%, -50%);
1443
- }
1444
- :where(.dil-scope) .react-flow__handle-left {
1445
- top: 50%;
1446
- left: 0;
1447
- transform: translate(-50%, -50%);
1448
- }
1449
- :where(.dil-scope) .react-flow__handle-right {
1450
- top: 50%;
1451
- right: 0;
1452
- transform: translate(50%, -50%);
1453
- }
1454
- :where(.dil-scope) .react-flow__edgeupdater {
1455
- cursor: move;
1456
- pointer-events: all;
1457
- }
1458
- :where(.dil-scope) .react-flow__pane.selection .react-flow__panel {
1459
- pointer-events: none;
1460
- }
1461
- :where(.dil-scope) .react-flow__panel {
1462
- position: absolute;
1463
- z-index: 5;
1464
- margin: 15px;
1465
- }
1466
- :where(.dil-scope) .react-flow__panel.top {
1467
- top: 0;
1468
- }
1469
- :where(.dil-scope) .react-flow__panel.bottom {
1470
- bottom: 0;
1471
- }
1472
- :where(.dil-scope) .react-flow__panel.top.center, :where(.dil-scope) .react-flow__panel.bottom.center {
1473
- left: 50%;
1474
- transform: translateX(-15px) translateX(-50%);
1475
- }
1476
- :where(.dil-scope) .react-flow__panel.left {
1477
- left: 0;
1478
- }
1479
- :where(.dil-scope) .react-flow__panel.right {
1480
- right: 0;
1481
- }
1482
- :where(.dil-scope) .react-flow__panel.left.center, :where(.dil-scope) .react-flow__panel.right.center {
1483
- top: 50%;
1484
- transform: translateY(-15px) translateY(-50%);
1485
- }
1486
- :where(.dil-scope) .react-flow__attribution {
1487
- font-size: 10px;
1488
- background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
1489
- padding: 2px 3px;
1490
- margin: 0;
1491
- }
1492
- :where(.dil-scope) .react-flow__attribution a {
1493
- text-decoration: none;
1494
- color: #999;
1495
- }
1496
- @keyframes dashdraw {
1497
- from {
1498
- stroke-dashoffset: 10;
1499
- }
1500
- }
1501
- :where(.dil-scope) .react-flow__edgelabel-renderer {
1502
- position: absolute;
1503
- width: 100%;
1504
- height: 100%;
1505
- pointer-events: none;
1506
- -webkit-user-select: none;
1507
- -moz-user-select: none;
1508
- user-select: none;
1509
- left: 0;
1510
- top: 0;
1511
- }
1512
- :where(.dil-scope) .react-flow__viewport-portal {
1513
- position: absolute;
1514
- width: 100%;
1515
- height: 100%;
1516
- left: 0;
1517
- top: 0;
1518
- -webkit-user-select: none;
1519
- -moz-user-select: none;
1520
- user-select: none;
1521
- }
1522
- :where(.dil-scope) .react-flow__minimap {
1523
- background: var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) );
1524
- }
1525
- :where(.dil-scope) .react-flow__minimap-svg {
1526
- display: block;
1527
- }
1528
- :where(.dil-scope) .react-flow__minimap-mask {
1529
- fill: var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );
1530
- stroke: var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );
1531
- stroke-width: var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) );
1532
- }
1533
- :where(.dil-scope) .react-flow__minimap-node {
1534
- fill: var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );
1535
- stroke: var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );
1536
- stroke-width: var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) );
1537
- }
1538
- :where(.dil-scope) .react-flow__background-pattern.dots {
1539
- fill: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) );
1540
- }
1541
- :where(.dil-scope) .react-flow__background-pattern.lines {
1542
- stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) );
1543
- }
1544
- :where(.dil-scope) .react-flow__background-pattern.cross {
1545
- stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) );
1546
- }
1547
- :where(.dil-scope) .react-flow__controls {
1548
- display: flex;
1549
- flex-direction: column;
1550
- box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
1551
- }
1552
- :where(.dil-scope) .react-flow__controls.horizontal {
1553
- flex-direction: row;
1554
- }
1555
- :where(.dil-scope) .react-flow__controls-button {
1556
- display: flex;
1557
- justify-content: center;
1558
- align-items: center;
1559
- height: 26px;
1560
- width: 26px;
1561
- padding: 4px;
1562
- border: none;
1563
- background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
1564
- border-bottom: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );
1565
- color: var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );
1566
- cursor: pointer;
1567
- -webkit-user-select: none;
1568
- -moz-user-select: none;
1569
- user-select: none;
1570
- }
1571
- :where(.dil-scope) .react-flow__controls-button svg {
1572
- width: 100%;
1573
- max-width: 12px;
1574
- max-height: 12px;
1575
- fill: currentColor;
1576
- }
1577
- :where(.dil-scope) .react-flow__edge.updating .react-flow__edge-path {
1578
- stroke: #777;
1579
- }
1580
- :where(.dil-scope) .react-flow__edge-text {
1581
- font-size: 10px;
1582
- }
1583
- :where(.dil-scope) .react-flow__node.selectable:focus, :where(.dil-scope) .react-flow__node.selectable:focus-visible {
1584
- outline: none;
1585
- }
1586
- :where(.dil-scope) .react-flow__node-input, :where(.dil-scope) .react-flow__node-default, :where(.dil-scope) .react-flow__node-output, :where(.dil-scope) .react-flow__node-group {
1587
- padding: 10px;
1588
- border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
1589
- width: 150px;
1590
- font-size: 12px;
1591
- color: var(--xy-node-color, var(--xy-node-color-default));
1592
- text-align: center;
1593
- border: var(--xy-node-border, var(--xy-node-border-default));
1594
- background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
1595
- }
1596
- :where(.dil-scope) .react-flow__node-input.selectable:hover, :where(.dil-scope) .react-flow__node-default.selectable:hover, :where(.dil-scope) .react-flow__node-output.selectable:hover, :where(.dil-scope) .react-flow__node-group.selectable:hover {
1597
- box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
1598
- }
1599
- :where(.dil-scope) .react-flow__node-input.selectable.selected, :where(.dil-scope) .react-flow__node-input.selectable:focus, :where(.dil-scope) .react-flow__node-input.selectable:focus-visible, :where(.dil-scope) .react-flow__node-default.selectable.selected, :where(.dil-scope) .react-flow__node-default.selectable:focus, :where(.dil-scope) .react-flow__node-default.selectable:focus-visible, :where(.dil-scope) .react-flow__node-output.selectable.selected, :where(.dil-scope) .react-flow__node-output.selectable:focus, :where(.dil-scope) .react-flow__node-output.selectable:focus-visible, :where(.dil-scope) .react-flow__node-group.selectable.selected, :where(.dil-scope) .react-flow__node-group.selectable:focus, :where(.dil-scope) .react-flow__node-group.selectable:focus-visible {
1600
- box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
1601
- }
1602
- :where(.dil-scope) .react-flow__node-group {
1603
- background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
1604
- }
1605
- :where(.dil-scope) .react-flow__nodesselection-rect, :where(.dil-scope) .react-flow__selection {
1606
- background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
1607
- border: var(--xy-selection-border, var(--xy-selection-border-default));
1608
- }
1609
- :where(.dil-scope) .react-flow__nodesselection-rect:focus, :where(.dil-scope) .react-flow__nodesselection-rect:focus-visible, :where(.dil-scope) .react-flow__selection:focus, :where(.dil-scope) .react-flow__selection:focus-visible {
1610
- outline: none;
1611
- }
1612
- :where(.dil-scope) .react-flow__controls-button:hover {
1613
- background: var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );
1614
- color: var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) );
1615
- }
1616
- :where(.dil-scope) .react-flow__controls-button:disabled {
1617
- pointer-events: none;
1618
- }
1619
- :where(.dil-scope) .react-flow__controls-button:disabled svg {
1620
- fill-opacity: 0.4;
1621
- }
1622
- :where(.dil-scope) .react-flow__controls-button:last-child {
1623
- border-bottom: none;
1624
- }
1625
- :where(.dil-scope) .react-flow__controls.horizontal .react-flow__controls-button {
1626
- border-bottom: none;
1627
- border-right: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );
1628
- }
1629
- :where(.dil-scope) .react-flow__controls.horizontal .react-flow__controls-button:last-child {
1630
- border-right: none;
1631
- }
1632
- :where(.dil-scope) .react-flow__resize-control {
1633
- position: absolute;
1634
- }
1635
- :where(.dil-scope) .react-flow__resize-control.left, :where(.dil-scope) .react-flow__resize-control.right {
1636
- cursor: ew-resize;
1637
- }
1638
- :where(.dil-scope) .react-flow__resize-control.top, :where(.dil-scope) .react-flow__resize-control.bottom {
1639
- cursor: ns-resize;
1640
- }
1641
- :where(.dil-scope) .react-flow__resize-control.top.left, :where(.dil-scope) .react-flow__resize-control.bottom.right {
1642
- cursor: nwse-resize;
1643
- }
1644
- :where(.dil-scope) .react-flow__resize-control.bottom.left, :where(.dil-scope) .react-flow__resize-control.top.right {
1645
- cursor: nesw-resize;
1646
- }
1647
- :where(.dil-scope) .react-flow__resize-control.handle {
1648
- width: 5px;
1649
- height: 5px;
1650
- border: 1px solid #fff;
1651
- border-radius: 1px;
1652
- background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
1653
- translate: -50% -50%;
1654
- }
1655
- :where(.dil-scope) .react-flow__resize-control.handle.left {
1656
- left: 0;
1657
- top: 50%;
1658
- }
1659
- :where(.dil-scope) .react-flow__resize-control.handle.right {
1660
- left: 100%;
1661
- top: 50%;
1662
- }
1663
- :where(.dil-scope) .react-flow__resize-control.handle.top {
1664
- left: 50%;
1665
- top: 0;
1666
- }
1667
- :where(.dil-scope) .react-flow__resize-control.handle.bottom {
1668
- left: 50%;
1669
- top: 100%;
1670
- }
1671
- :where(.dil-scope) .react-flow__resize-control.handle.top.left {
1672
- left: 0;
1673
- }
1674
- :where(.dil-scope) .react-flow__resize-control.handle.bottom.left {
1675
- left: 0;
1676
- }
1677
- :where(.dil-scope) .react-flow__resize-control.handle.top.right {
1678
- left: 100%;
1679
- }
1680
- :where(.dil-scope) .react-flow__resize-control.handle.bottom.right {
1681
- left: 100%;
1682
- }
1683
- :where(.dil-scope) .react-flow__resize-control.line {
1684
- border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
1685
- border-width: 0;
1686
- border-style: solid;
1687
- }
1688
- :where(.dil-scope) .react-flow__resize-control.line.left, :where(.dil-scope) .react-flow__resize-control.line.right {
1689
- width: 1px;
1690
- transform: translate(-50%, 0);
1691
- top: 0;
1692
- height: 100%;
1693
- }
1694
- :where(.dil-scope) .react-flow__resize-control.line.left {
1695
- left: 0;
1696
- border-left-width: 1px;
1697
- }
1698
- :where(.dil-scope) .react-flow__resize-control.line.right {
1699
- left: 100%;
1700
- border-right-width: 1px;
1701
- }
1702
- :where(.dil-scope) .react-flow__resize-control.line.top, :where(.dil-scope) .react-flow__resize-control.line.bottom {
1703
- height: 1px;
1704
- transform: translate(0, -50%);
1705
- left: 0;
1706
- width: 100%;
1707
- }
1708
- :where(.dil-scope) .react-flow__resize-control.line.top {
1709
- top: 0;
1710
- border-top-width: 1px;
1711
- }
1712
- :where(.dil-scope) .react-flow__resize-control.line.bottom {
1713
- border-bottom-width: 1px;
1714
- top: 100%;
1715
- }
1716
- :where(.dil-scope) .react-flow__edge-textbg {
1717
- fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
1718
- }
1719
- :where(.dil-scope) .react-flow__edge-text {
1720
- fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
1721
- }
1722
- .dil-scope {
1723
- --dil-text-color: #0d0d0d;
1724
- --dil-muted-text-color: #5d5d5d;
1725
- --foreground: #0d0d0d;
1726
- --muted-foreground: #5d5d5d;
1727
- --secondary: #f4f4f4;
1728
- --muted: #f7f7f7;
1729
- --border: #e5e5e5;
1730
- --font-dil: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
1731
- sans-serif;
1732
- --dil-control-radius: 12px;
1733
- --dil-item-radius: 8px;
1734
- --dil-success: #22825e;
1735
- --dil-warning: #ad751a;
1736
- --dil-tertiary: #8f8f8f;
1737
- --dil-node-selected: #343d75;
1738
- --dil-node-surface: #2a303b;
1739
- --dil-chart-height: 280px;
1740
- --dil-spacing: 4px;
1741
- }
1742
- :where(.dil-scope) [data-slot="toggle-group"] {
1743
- border-radius: var(--dil-control-radius);
1744
- gap: var(--dil-spacing);
1745
- }
1746
- :where(.dil-scope) [data-slot="toggle-group-item"] {
1747
- border-radius: var(--dil-item-radius);
1748
- }
1749
- .dil-scope {
1750
- --background: #ffffff;
1751
- --foreground: var(--dil-text-color);
1752
- --card: #ffffff;
1753
- --card-foreground: #171717;
1754
- --popover: #ffffff;
1755
- --popover-foreground: #171717;
1756
- --primary: #202020;
1757
- --primary-foreground: #ffffff;
1758
- --secondary: #f3f3f2;
1759
- --secondary-foreground: #242424;
1760
- --muted: #f6f6f5;
1761
- --muted-foreground: var(--dil-muted-text-color);
1762
- --accent: #eeeeec;
1763
- --accent-foreground: #171717;
1764
- --destructive: #cc4545;
1765
- --border: #e5e5e2;
1766
- --input: #dededb;
1767
- --ring: #8b8b87;
1768
- --radius: 0.75rem;
1769
- --chart-1: #6580d9;
1770
- --chart-2: #47a98a;
1771
- --chart-3: #d4a458;
1772
- --chart-4: #ac81cc;
1773
- --chart-5: #d78675;
1774
- }
1775
- @layer base {
1776
- .dil-scope *,
1777
- .dil-scope *::before,
1778
- .dil-scope *::after {
1779
- box-sizing: border-box;
1780
- border: 0 solid var(--border);
1781
- }
1782
- .dil-scope h1,
1783
- .dil-scope h2,
1784
- .dil-scope h3,
1785
- .dil-scope p {
1786
- margin: 0;
1787
- }
1788
- }
1789
- .dil-scope {
1790
- background: var(--background);
1791
- color: var(--foreground);
1792
- font-family: var(--font-dil);
1793
- font-size: 15px;
1794
- line-height: 1.65;
1795
- }
1796
- .dil-scope button:not(:disabled),
1797
- .dil-scope [role="button"]:not([aria-disabled="true"]) {
1798
- cursor: pointer;
1799
- }
1800
- .dil-scope button,
1801
- .dil-scope input,
1802
- .dil-scope textarea {
1803
- font: inherit;
1804
- }
1805
- .dil-scope[data-theme="dark"] {
1806
- --background: #171717;
1807
- --foreground: #fafafa;
1808
- --dil-text-color: #fafafa;
1809
- --dil-muted-text-color: #b5b5b5;
1810
- --card: #202020;
1811
- --card-foreground: #fafafa;
1812
- --popover: #202020;
1813
- --popover-foreground: #fafafa;
1814
- --primary: #eeeeee;
1815
- --primary-foreground: #171717;
1816
- --secondary: #303030;
1817
- --secondary-foreground: #eeeeee;
1818
- --muted: #292929;
1819
- --muted-foreground: #b5b5b5;
1820
- --accent: #363636;
1821
- --accent-foreground: #fafafa;
1822
- --border: #454545;
1823
- --input: #505050;
1824
- }
1825
- :where(.dil-scope) .dil-document {
1826
- overflow-wrap: anywhere;
1827
- }
1828
- :where(.dil-scope) .dil-markdown {
1829
- display: contents;
1830
- }
1831
- :where(.dil-scope) .dil-markdown p {
1832
- margin: 0;
1833
- }
1834
- :where(.dil-scope) .dil-markdown h1 {
1835
- font-size: 1.8rem;
1836
- font-weight: 650;
1837
- line-height: 1.25;
1838
- margin: 0 0 8px;
1839
- letter-spacing: -0.035em;
1840
- }
1841
- :where(.dil-scope) .dil-markdown h2 {
1842
- font-size: 1.25rem;
1843
- font-weight: 650;
1844
- line-height: 1.4;
1845
- margin: 24px 0 4px;
1846
- letter-spacing: -0.02em;
1847
- }
1848
- :where(.dil-scope) .dil-markdown strong {
1849
- font-weight: 600;
1850
- }
1851
- :where(.dil-scope) .dil-markdown table {
1852
- width: 100%;
1853
- border-collapse: collapse;
1854
- font-size: 14px;
1855
- }
1856
- :where(.dil-scope) .dil-markdown th,
1857
- :where(.dil-scope) .dil-markdown td {
1858
- padding: 10px 12px;
1859
- text-align: left;
1860
- border-bottom: 1px solid var(--border);
1861
- }
1862
- :where(.dil-scope) .dil-markdown pre {
1863
- overflow-x: auto;
1864
- padding: 16px;
1865
- background: var(--muted);
1866
- border-radius: 8px;
1867
- }
1868
- :where(.dil-scope) .dil-flow {
1869
- display: flex;
1870
- flex-direction: column;
1871
- gap: 12px;
1872
- min-width: 0;
1873
- }
1874
- :where(.dil-scope) .dil-layout {
1875
- display: flex;
1876
- flex-direction: column;
1877
- min-width: 0;
1878
- }
1879
- :where(.dil-scope) .dil-row {
1880
- flex-direction: row;
1881
- }
1882
- :where(.dil-scope) .dil-grid {
1883
- display: grid;
1884
- grid-template-columns: repeat(var(--dil-columns, 2), minmax(0, 1fr));
1885
- }
1886
- :where(.dil-scope) .dil-inline p {
1887
- display: inline;
1888
- }
1889
- :where(.dil-scope) .dil-input-wrap {
1890
- display: flex;
1891
- flex-direction: column;
1892
- gap: 6px;
1893
- min-width: 0;
1894
- }
1895
- :where(.dil-scope) .dil-virtual-item {
1896
- width: 100%;
1897
- position: absolute;
1898
- top: 0;
1899
- left: 0;
1900
- padding-bottom: var(--dil-item-gap, 12px);
1901
- }
1902
- :where(.dil-scope) .dil-virtual-item:focus-within {
1903
- z-index: 1;
1904
- }
1905
- :where(.dil-scope) .dil-skeleton {
1906
- min-height: 28px;
1907
- border-radius: 8px;
1908
- background: var(--muted);
1909
- animation: dil-pulse 1.5s ease-in-out infinite;
1910
- }
1911
- :where(.dil-scope) .dil-chart-legend {
1912
- display: flex;
1913
- justify-content: center;
1914
- flex-wrap: wrap;
1915
- min-height: 32px;
1916
- gap: 2px;
1917
- }
1918
- .dil-scope .dil-legend-item {
1919
- font-weight: 400;
1920
- display: inline-flex;
1921
- align-items: center;
1922
- gap: 4px;
1923
- padding: 3px 5px;
1924
- font-size: 12px;
1925
- background: transparent;
1926
- box-shadow: none;
1927
- transition: opacity 150ms ease;
1928
- }
1929
- :where(.dil-scope) .dil-legend-item:hover {
1930
- background: transparent;
1931
- }
1932
- :where(.dil-scope) .dil-legend-item:focus-visible {
1933
- outline: 2px solid var(--ring);
1934
- outline-offset: 2px;
1935
- }
1936
- :where(.dil-scope) .dil-legend-item[data-muted="true"] {
1937
- opacity: 0.625;
1938
- }
1939
- :where(.dil-scope) .dil-legend-item[data-hidden="true"] {
1940
- opacity: 0.45;
1941
- text-decoration: line-through;
1942
- }
1943
- :where(.dil-scope) .dil-legend-swatch {
1944
- width: 11px;
1945
- height: 11px;
1946
- border-radius: 1px;
1947
- flex-shrink: 0;
1948
- }
1949
- :where(.dil-scope) .dil-chart-series {
1950
- transition: opacity 150ms ease;
1951
- }
1952
- :where(.dil-scope) .dil-tooltip {
1953
- z-index: 60;
1954
- max-width: min(24rem, calc(100vw - 16px));
1955
- border-radius: 8px;
1956
- background: var(--foreground);
1957
- color: var(--background);
1958
- padding: 6px 10px;
1959
- font-size: 12px;
1960
- line-height: 1.4;
1961
- box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
1962
- }
1963
- :where(.dil-scope) .dil-snap-tooltip {
1964
- pointer-events: none;
1965
- }
1966
- :where(.dil-scope) .dil-code-block textarea {
1967
- font-family: var(--font-mono, monospace);
1968
- font-size: var(--text-xs, 0.75rem);
1969
- line-height: 1.6;
1970
- white-space: pre;
1971
- overflow-wrap: normal;
1972
- overflow-x: auto;
1973
- }
1974
- :where(.dil-scope) .dil-code-editor {
1975
- position: relative;
1976
- }
1977
- :where(.dil-scope) .dil-code-editor textarea,
1978
- :where(.dil-scope) .dil-code-editor .dil-code-highlight {
1979
- margin: 0;
1980
- padding: 12px;
1981
- font-family: var(--font-mono, monospace);
1982
- font-size: 12px;
1983
- line-height: 1.6;
1984
- letter-spacing: normal;
1985
- tab-size: 2;
1986
- white-space: pre;
1987
- overflow-wrap: normal;
1988
- word-break: normal;
1989
- }
1990
- :where(.dil-scope) .dil-code-editor .dil-code-highlight {
1991
- position: absolute;
1992
- inset: 0;
1993
- overflow: hidden;
1994
- pointer-events: none;
1995
- }
1996
- :where(.dil-scope) .dil-code-editor .dil-code-highlight code,
1997
- :where(.dil-scope) .dil-code-editor .dil-code-highlight span {
1998
- font: inherit;
1999
- letter-spacing: inherit;
2000
- tab-size: inherit;
2001
- }
2002
- :where(.dil-scope) .dil-code-editor textarea {
2003
- position: relative;
2004
- color: transparent;
2005
- caret-color: var(--foreground);
2006
- background: transparent;
2007
- }
2008
- :where(.dil-scope) .dil-code-editor textarea::selection {
2009
- color: transparent;
2010
- background: var(--primary);
2011
- @supports (color: color-mix(in lab, red, red)) {
2012
- background: color-mix(in srgb, var(--primary) 24%, transparent);
2013
- }
2014
- }
2015
- :where(.dil-scope) .dil-code-block .hljs-keyword,
2016
- :where(.dil-scope) .dil-code-block .hljs-literal,
2017
- :where(.dil-scope) .dil-code-block .hljs-type {
2018
- color: var(--dil-code-keyword, #7044a6);
2019
- }
2020
- :where(.dil-scope) .dil-code-block .hljs-string,
2021
- :where(.dil-scope) .dil-code-block .hljs-attr,
2022
- :where(.dil-scope) .dil-code-block .hljs-addition {
2023
- color: var(--dil-code-string, #24734f);
2024
- }
2025
- :where(.dil-scope) .dil-code-block .hljs-number,
2026
- :where(.dil-scope) .dil-code-block .hljs-symbol {
2027
- color: var(--dil-code-number, #a15021);
2028
- }
2029
- :where(.dil-scope) .dil-code-block .hljs-title,
2030
- :where(.dil-scope) .dil-code-block .hljs-built_in,
2031
- :where(.dil-scope) .dil-code-block .hljs-tag {
2032
- color: var(--dil-code-title, #285ca3);
2033
- }
2034
- :where(.dil-scope) .dil-code-block .hljs-comment,
2035
- :where(.dil-scope) .dil-code-block .hljs-meta {
2036
- color: var(--muted-foreground);
2037
- }
2038
- .dil-scope[data-theme="dark"] {
2039
- --dil-code-keyword: #c7a7f8;
2040
- --dil-code-string: #8bd4ae;
2041
- --dil-code-number: #f2b685;
2042
- --dil-code-title: #97bdf4;
2043
- }
2044
- @media (forced-colors: active) {
2045
- :where(.dil-scope) .dil-code-editor .dil-code-highlight {
2046
- visibility: hidden;
2047
- }
2048
- :where(.dil-scope) .dil-code-editor textarea {
2049
- color: CanvasText;
2050
- caret-color: CanvasText;
2051
- }
2052
- :where(.dil-scope) .dil-code-editor textarea::selection {
2053
- color: HighlightText;
2054
- background: Highlight;
2055
- }
2056
- }
2057
- :where(.dil-scope) .dil-code-block[data-word-wrap="true"] :is(pre, textarea) {
2058
- white-space: pre-wrap;
2059
- overflow-wrap: anywhere;
2060
- }
2061
- :where(.dil-scope) .dil-service-node {
2062
- width: 160px;
2063
- height: 72px;
2064
- display: flex;
2065
- flex-direction: column;
2066
- justify-content: center;
2067
- gap: 4px;
2068
- padding: 10px 14px;
2069
- border: 1px solid var(--border);
2070
- border-radius: 12px;
2071
- background: var(--card);
2072
- color: var(--foreground);
2073
- }
2074
- :where(.dil-scope) .dil-service-node strong {
2075
- font-size: 14px;
2076
- line-height: 1.2;
2077
- }
2078
- :where(.dil-scope) .dil-service-node > span {
2079
- font-size: 12px;
2080
- color: var(--muted-foreground);
2081
- line-height: 1.2;
2082
- }
2083
- :where(.dil-scope) .dil-service-node[data-selected="true"] {
2084
- border-color: var(--ring);
2085
- box-shadow: 0 0 0 2px var(--ring);
2086
- @supports (color: color-mix(in lab, red, red)) {
2087
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent);
2088
- }
2089
- }
2090
- @keyframes dil-pulse {
2091
- 50% {
2092
- opacity: 0.5;
2093
- }
2094
- }
2095
- @media (max-width: 520px) {
2096
- :where(.dil-scope) .dil-grid {
2097
- grid-template-columns: 1fr;
2098
- }
2099
- :where(.dil-scope) .dil-row[data-wrap="wrap"] {
2100
- flex-wrap: wrap;
2101
- }
2102
- }
2103
- @media (prefers-reduced-motion: reduce) {
2104
- :where(.dil-scope) *,
2105
- :where(.dil-scope) *::before,
2106
- :where(.dil-scope) *::after {
2107
- animation: none !important;
2108
- scroll-behavior: auto !important;
2109
- transition: none !important;
2110
- }
2111
- }
2112
- @property --tw-translate-x {
2113
- syntax: "*";
2114
- inherits: false;
2115
- initial-value: 0;
2116
- }
2117
- @property --tw-translate-y {
2118
- syntax: "*";
2119
- inherits: false;
2120
- initial-value: 0;
2121
- }
2122
- @property --tw-translate-z {
2123
- syntax: "*";
2124
- inherits: false;
2125
- initial-value: 0;
2126
- }
2127
- @property --tw-rotate-x {
2128
- syntax: "*";
2129
- inherits: false;
2130
- }
2131
- @property --tw-rotate-y {
2132
- syntax: "*";
2133
- inherits: false;
2134
- }
2135
- @property --tw-rotate-z {
2136
- syntax: "*";
2137
- inherits: false;
2138
- }
2139
- @property --tw-skew-x {
2140
- syntax: "*";
2141
- inherits: false;
2142
- }
2143
- @property --tw-skew-y {
2144
- syntax: "*";
2145
- inherits: false;
2146
- }
2147
- @property --tw-border-style {
2148
- syntax: "*";
2149
- inherits: false;
2150
- initial-value: solid;
2151
- }
2152
- @property --tw-leading {
2153
- syntax: "*";
2154
- inherits: false;
2155
- }
2156
- @property --tw-font-weight {
2157
- syntax: "*";
2158
- inherits: false;
2159
- }
2160
- @property --tw-ordinal {
2161
- syntax: "*";
2162
- inherits: false;
2163
- }
2164
- @property --tw-slashed-zero {
2165
- syntax: "*";
2166
- inherits: false;
2167
- }
2168
- @property --tw-numeric-figure {
2169
- syntax: "*";
2170
- inherits: false;
2171
- }
2172
- @property --tw-numeric-spacing {
2173
- syntax: "*";
2174
- inherits: false;
2175
- }
2176
- @property --tw-numeric-fraction {
2177
- syntax: "*";
2178
- inherits: false;
2179
- }
2180
- @property --tw-shadow {
2181
- syntax: "*";
2182
- inherits: false;
2183
- initial-value: 0 0 #0000;
2184
- }
2185
- @property --tw-shadow-color {
2186
- syntax: "*";
2187
- inherits: false;
2188
- }
2189
- @property --tw-shadow-alpha {
2190
- syntax: "<percentage>";
2191
- inherits: false;
2192
- initial-value: 100%;
2193
- }
2194
- @property --tw-inset-shadow {
2195
- syntax: "*";
2196
- inherits: false;
2197
- initial-value: 0 0 #0000;
2198
- }
2199
- @property --tw-inset-shadow-color {
2200
- syntax: "*";
2201
- inherits: false;
2202
- }
2203
- @property --tw-inset-shadow-alpha {
2204
- syntax: "<percentage>";
2205
- inherits: false;
2206
- initial-value: 100%;
2207
- }
2208
- @property --tw-ring-color {
2209
- syntax: "*";
2210
- inherits: false;
2211
- }
2212
- @property --tw-ring-shadow {
2213
- syntax: "*";
2214
- inherits: false;
2215
- initial-value: 0 0 #0000;
2216
- }
2217
- @property --tw-inset-ring-color {
2218
- syntax: "*";
2219
- inherits: false;
2220
- }
2221
- @property --tw-inset-ring-shadow {
2222
- syntax: "*";
2223
- inherits: false;
2224
- initial-value: 0 0 #0000;
2225
- }
2226
- @property --tw-ring-inset {
2227
- syntax: "*";
2228
- inherits: false;
2229
- }
2230
- @property --tw-ring-offset-width {
2231
- syntax: "<length>";
2232
- inherits: false;
2233
- initial-value: 0px;
2234
- }
2235
- @property --tw-ring-offset-color {
2236
- syntax: "*";
2237
- inherits: false;
2238
- initial-value: #fff;
2239
- }
2240
- @property --tw-ring-offset-shadow {
2241
- syntax: "*";
2242
- inherits: false;
2243
- initial-value: 0 0 #0000;
2244
- }
2245
- @property --tw-outline-style {
2246
- syntax: "*";
2247
- inherits: false;
2248
- initial-value: solid;
2249
- }
2250
- @property --tw-blur {
2251
- syntax: "*";
2252
- inherits: false;
2253
- }
2254
- @property --tw-brightness {
2255
- syntax: "*";
2256
- inherits: false;
2257
- }
2258
- @property --tw-contrast {
2259
- syntax: "*";
2260
- inherits: false;
2261
- }
2262
- @property --tw-grayscale {
2263
- syntax: "*";
2264
- inherits: false;
2265
- }
2266
- @property --tw-hue-rotate {
2267
- syntax: "*";
2268
- inherits: false;
2269
- }
2270
- @property --tw-invert {
2271
- syntax: "*";
2272
- inherits: false;
2273
- }
2274
- @property --tw-opacity {
2275
- syntax: "*";
2276
- inherits: false;
2277
- }
2278
- @property --tw-saturate {
2279
- syntax: "*";
2280
- inherits: false;
2281
- }
2282
- @property --tw-sepia {
2283
- syntax: "*";
2284
- inherits: false;
2285
- }
2286
- @property --tw-drop-shadow {
2287
- syntax: "*";
2288
- inherits: false;
2289
- }
2290
- @property --tw-drop-shadow-color {
2291
- syntax: "*";
2292
- inherits: false;
2293
- }
2294
- @property --tw-drop-shadow-alpha {
2295
- syntax: "<percentage>";
2296
- inherits: false;
2297
- initial-value: 100%;
2298
- }
2299
- @property --tw-drop-shadow-size {
2300
- syntax: "*";
2301
- inherits: false;
2302
- }
2303
- @property --tw-ease {
2304
- syntax: "*";
2305
- inherits: false;
2306
- }
2307
- @keyframes pulse {
2308
- 50% {
2309
- opacity: 0.5;
2310
- }
2311
- }
2312
- @layer properties {
2313
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
2314
- :where(.dil-scope) *, :where(.dil-scope) ::before, :where(.dil-scope) ::after, :where(.dil-scope) ::backdrop {
2315
- --tw-translate-x: 0;
2316
- --tw-translate-y: 0;
2317
- --tw-translate-z: 0;
2318
- --tw-rotate-x: initial;
2319
- --tw-rotate-y: initial;
2320
- --tw-rotate-z: initial;
2321
- --tw-skew-x: initial;
2322
- --tw-skew-y: initial;
2323
- --tw-border-style: solid;
2324
- --tw-leading: initial;
2325
- --tw-font-weight: initial;
2326
- --tw-ordinal: initial;
2327
- --tw-slashed-zero: initial;
2328
- --tw-numeric-figure: initial;
2329
- --tw-numeric-spacing: initial;
2330
- --tw-numeric-fraction: initial;
2331
- --tw-shadow: 0 0 #0000;
2332
- --tw-shadow-color: initial;
2333
- --tw-shadow-alpha: 100%;
2334
- --tw-inset-shadow: 0 0 #0000;
2335
- --tw-inset-shadow-color: initial;
2336
- --tw-inset-shadow-alpha: 100%;
2337
- --tw-ring-color: initial;
2338
- --tw-ring-shadow: 0 0 #0000;
2339
- --tw-inset-ring-color: initial;
2340
- --tw-inset-ring-shadow: 0 0 #0000;
2341
- --tw-ring-inset: initial;
2342
- --tw-ring-offset-width: 0px;
2343
- --tw-ring-offset-color: #fff;
2344
- --tw-ring-offset-shadow: 0 0 #0000;
2345
- --tw-outline-style: solid;
2346
- --tw-blur: initial;
2347
- --tw-brightness: initial;
2348
- --tw-contrast: initial;
2349
- --tw-grayscale: initial;
2350
- --tw-hue-rotate: initial;
2351
- --tw-invert: initial;
2352
- --tw-opacity: initial;
2353
- --tw-saturate: initial;
2354
- --tw-sepia: initial;
2355
- --tw-drop-shadow: initial;
2356
- --tw-drop-shadow-color: initial;
2357
- --tw-drop-shadow-alpha: 100%;
2358
- --tw-drop-shadow-size: initial;
2359
- --tw-ease: initial;
2360
- }
2361
- }
2362
- }
2363
- `),d.set(e,t)),n.adoptedStyleSheets=o?[t,s(e,o)]:[t]}import{jsx as w}from"react/jsx-runtime";function y({children:n,shadowStyles:o=""}){let[e,t]=h(null),l=c(r=>{if(!r)return;let a=r.shadowRoot??r.attachShadow({mode:"open"});i(a,o),t(a)},[o]);return w("div",{ref:l,"data-dil-mode":"shadow",children:e&&S(n,e)})}export{y as ShadowRenderer};