@elevasis/ui 1.7.5 → 1.8.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 (43) hide show
  1. package/dist/api/index.js +2 -3
  2. package/dist/auth/index.js +3 -4
  3. package/dist/charts/index.js +6 -8
  4. package/dist/{chunk-SFF5MJEI.js → chunk-2YBPRE6H.js} +1 -2
  5. package/dist/{chunk-U34YGJQB.js → chunk-3I2LOKQU.js} +1 -1
  6. package/dist/{chunk-PVVQTENF.js → chunk-3PURTICE.js} +1 -1
  7. package/dist/{chunk-2JBWPFHF.js → chunk-6TMW6VQ2.js} +1 -1
  8. package/dist/{chunk-6HZAMY6T.js → chunk-ARZM3OTI.js} +6 -2
  9. package/dist/{chunk-OK3XFSJJ.js → chunk-BWZMI4KP.js} +963 -10
  10. package/dist/{chunk-4KPI7YCY.js → chunk-EHXOR5LA.js} +2 -3
  11. package/dist/{chunk-Y7UY3HI4.js → chunk-ESOQEOOX.js} +2 -2
  12. package/dist/{chunk-L2CM2CUA.js → chunk-GZVH423C.js} +26 -3
  13. package/dist/{chunk-Y6DNK5ZD.js → chunk-JRJW2H57.js} +35 -9
  14. package/dist/{chunk-LBPALY25.js → chunk-JUPCUF77.js} +2 -2
  15. package/dist/chunk-QWYJHM3S.js +1068 -0
  16. package/dist/{chunk-NEK6JKPW.js → chunk-WUQWCUCB.js} +1 -1
  17. package/dist/chunk-Z4TPHMRD.js +231 -0
  18. package/dist/components/index.css +65 -0
  19. package/dist/components/index.d.ts +261 -2
  20. package/dist/components/index.js +1136 -80
  21. package/dist/hooks/index.css +452 -0
  22. package/dist/hooks/index.d.ts +1831 -13
  23. package/dist/hooks/index.js +15 -6
  24. package/dist/hooks/published.css +452 -0
  25. package/dist/hooks/published.d.ts +866 -6
  26. package/dist/hooks/published.js +15 -370
  27. package/dist/index.css +3 -0
  28. package/dist/index.d.ts +1665 -2
  29. package/dist/index.js +14 -17
  30. package/dist/initialization/index.js +3 -4
  31. package/dist/organization/index.js +3 -4
  32. package/dist/profile/index.js +1 -2
  33. package/dist/provider/index.css +3 -0
  34. package/dist/provider/index.js +7 -10
  35. package/dist/provider/published.js +6 -9
  36. package/dist/utils/index.d.ts +92 -1
  37. package/dist/utils/index.js +1 -2
  38. package/package.json +7 -3
  39. package/dist/chunk-4VGWQ5AN.js +0 -91
  40. package/dist/chunk-KA7LO7U5.js +0 -28
  41. package/dist/chunk-LFYO3MDC.js +0 -58
  42. package/dist/chunk-TIRMFDM4.js +0 -33
  43. package/dist/chunk-TYV5NJV2.js +0 -1
@@ -1,9 +1,18 @@
1
- import '../chunk-TYV5NJV2.js';
2
- export { OperationsService, createUseFeatureAccess, executionsKeys, scheduleKeys, sortData, useActivities, useActivityTrend, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCancelExecution, useCancelSchedule, useCommandQueue, useCommandQueueTotals, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateSchedule, useDashboardMetrics, useDeleteExecution, useDeleteSchedule, useDeleteTask, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecution, useExecutionHealth, useExecutionLogs, useExecutions, useGetExecutionHistory, useGetSchedule, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTopFailingResources, useUnresolveError, useUpdateAnchor, useUpdateSchedule, useWarningNotification } from '../chunk-OK3XFSJJ.js';
3
- export { observabilityKeys, useErrorTrends } from '../chunk-6HZAMY6T.js';
1
+ export { ApiKeyService, CredentialService, DeploymentService, OrganizationMembershipService, WebhookEndpointService, filterByDomainFilters, useActivateDeployment, useActivityFilters, useCommandViewDomainFilters, useCreateApiKey, useCreateCredential, useCreateWebhookEndpoint, useCredentials, useDeactivateDeployment, useDeactivateMembership, useDeleteApiKey, useDeleteCredential, useDeleteDeployment, useDeleteWebhookEndpoint, useExecutionLogsFilters, useListApiKeys, useListDeployments, useListWebhookEndpoints, useOrganizationMembers, useReactivateMembership, useResourceSearch, useResourcesDomainFilters, useStatusFilter, useTimeRangeDates, useUpdateApiKey, useUpdateCredential, useUpdateMemberConfig, useUpdateWebhookEndpoint, useUserMemberships, useVisibleResources } from '../chunk-QWYJHM3S.js';
2
+ export { OperationsService, createUseFeatureAccess, executionsKeys, isSessionCapable, operationsKeys, scheduleKeys, sessionsKeys, sortData, useActivities, useActivityTrend, useArchiveSession, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCancelExecution, useCancelSchedule, useCheckpointTasks, useCommandQueue, useCommandQueueTotals, useCommandViewData, useCommandViewLayout, useCommandViewStats, useCommandViewStore, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateSchedule, useCreateSession, useDashboardMetrics, useDeleteExecution, useDeleteSchedule, useDeleteSession, useDeleteTask, useDeploymentDocs, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecution, useExecutionHealth, useExecutionLogSSE, useExecutionLogs, useExecutionPanelState, useExecutions, useGetExecutionHistory, useGetSchedule, useGraphStats, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useRecentExecutionsByResource, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResourceErrors, useResourceExecutions, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useScheduledTasks, useSession, useSessionExecution, useSessionExecutions, useSessionMessages, useSessionWebSocket, useSessions, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTestNotification, useTopFailingResources, useUnresolveError, useUnresolvedErrors, useUpdateAnchor, useUpdateSchedule, useWarningNotification } from '../chunk-BWZMI4KP.js';
3
+ export { observabilityKeys, useErrorTrends } from '../chunk-ARZM3OTI.js';
4
4
  import '../chunk-JGJSZ3UE.js';
5
- import '../chunk-TIRMFDM4.js';
6
- import '../chunk-4VGWQ5AN.js';
5
+ import '../chunk-F6RBK7NJ.js';
6
+ import '../chunk-3I2LOKQU.js';
7
+ import '../chunk-RNP5R5I3.js';
8
+ import '../chunk-ESOQEOOX.js';
9
+ import '../chunk-KB5NKPTN.js';
10
+ import '../chunk-JRJW2H57.js';
11
+ import '../chunk-2YBPRE6H.js';
12
+ import '../chunk-JUPCUF77.js';
13
+ export { REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY } from '../chunk-Z4TPHMRD.js';
7
14
  import '../chunk-FWZJH3TL.js';
8
- import '../chunk-KA7LO7U5.js';
15
+ import '../chunk-WUQWCUCB.js';
16
+ import '../chunk-GZVH423C.js';
17
+ import '../chunk-DD3CCMCZ.js';
9
18
  import '../chunk-7PLEQFHO.js';
@@ -0,0 +1,452 @@
1
+ /* src/theme/custom.css */
2
+ .mantine-Accordion-control:hover {
3
+ background-color: var(--color-surface-hover);
4
+ }
5
+ .mantine-Menu-item:hover:not([data-disabled]) {
6
+ background-color: var(--color-surface-hover);
7
+ }
8
+ .mantine-Select-option:hover {
9
+ background-color: var(--color-surface-hover) !important;
10
+ }
11
+ [data-mantine-color-scheme=dark] .mantine-Tabs-root {
12
+ --tab-border-color: var(--color-border);
13
+ }
14
+ .mantine-Tabs-tab:hover {
15
+ background-color: var(--color-surface-hover);
16
+ }
17
+ .mantine-Pagination-control:not([data-active]) {
18
+ background: var(--color-surface);
19
+ }
20
+ ::-webkit-scrollbar {
21
+ width: 5px;
22
+ height: 5px;
23
+ }
24
+ ::-webkit-scrollbar-track {
25
+ background: transparent;
26
+ }
27
+ ::-webkit-scrollbar-thumb {
28
+ background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
29
+ border-radius: 4px;
30
+ }
31
+ ::-webkit-scrollbar-thumb:hover {
32
+ background: var(--color-text-subtle);
33
+ }
34
+ .mantine-Skeleton-root[data-visible]::after {
35
+ background-color: color-mix(in srgb, var(--color-text-subtle) 30%, var(--color-surface)) !important;
36
+ }
37
+ .mantine-Checkbox-input {
38
+ background-color: var(--color-surface);
39
+ border-color: var(--color-border);
40
+ }
41
+ .mantine-Checkbox-input:checked {
42
+ background-color: var(--color-primary);
43
+ border-color: var(--color-primary);
44
+ }
45
+ .mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
46
+ background-color: var(--color-surface-hover);
47
+ border-color: var(--color-border);
48
+ }
49
+ .mantine-Timeline-root {
50
+ --tl-color: var(--color-primary);
51
+ }
52
+ .mantine-Timeline-item {
53
+ --item-border-color: var(--color-border);
54
+ }
55
+ .mantine-Timeline-itemBullet {
56
+ border-color: var(--color-border);
57
+ }
58
+ .mantine-Timeline-itemBullet:where([data-with-child]) {
59
+ background-color: var(--color-primary);
60
+ border-color: var(--color-primary);
61
+ }
62
+ .recharts-surface:focus {
63
+ outline: none;
64
+ }
65
+
66
+ /* src/graph/Graph.module.css */
67
+ @keyframes edgeFlow {
68
+ 0% {
69
+ stroke-dashoffset: 24;
70
+ }
71
+ 100% {
72
+ stroke-dashoffset: 0;
73
+ }
74
+ }
75
+ @keyframes edgeFlowReverse {
76
+ 0% {
77
+ stroke-dashoffset: 0;
78
+ }
79
+ 100% {
80
+ stroke-dashoffset: 24;
81
+ }
82
+ }
83
+ @keyframes pulse {
84
+ 0%, 100% {
85
+ opacity: 0.6;
86
+ }
87
+ 50% {
88
+ opacity: 1;
89
+ }
90
+ }
91
+ @keyframes livePulse {
92
+ 0%, 100% {
93
+ opacity: 1;
94
+ }
95
+ 50% {
96
+ opacity: 0.6;
97
+ }
98
+ }
99
+ .livePulse {
100
+ animation: livePulse 2s ease-in-out infinite;
101
+ }
102
+ @keyframes glowPulse {
103
+ 0%, 100% {
104
+ box-shadow: 0 0 5px var(--glow-color, color-mix(in srgb, var(--color-primary) 30%, transparent)), 0 0 15px var(--glow-color, color-mix(in srgb, var(--color-primary) 10%, transparent));
105
+ }
106
+ 50% {
107
+ box-shadow: 0 0 10px var(--glow-color, color-mix(in srgb, var(--color-primary) 50%, transparent)), 0 0 20px var(--glow-color, color-mix(in srgb, var(--color-primary) 20%, transparent));
108
+ }
109
+ }
110
+ @keyframes nodeEnter {
111
+ 0% {
112
+ opacity: 0;
113
+ transform: scale(0.8) translateY(10px);
114
+ }
115
+ 100% {
116
+ opacity: 1;
117
+ transform: scale(1) translateY(0);
118
+ }
119
+ }
120
+ @keyframes handlePulse {
121
+ 0%, 100% {
122
+ transform: scale(1);
123
+ box-shadow: 0 0 0 0 var(--handle-color, color-mix(in srgb, var(--color-primary) 40%, transparent));
124
+ }
125
+ 50% {
126
+ transform: scale(1.2);
127
+ box-shadow: 0 0 0 4px var(--handle-color, color-mix(in srgb, var(--color-primary) 0%, transparent));
128
+ }
129
+ }
130
+ @keyframes gridMove {
131
+ 0% {
132
+ background-position: 0 0;
133
+ }
134
+ 100% {
135
+ background-position: 40px 40px;
136
+ }
137
+ }
138
+ @keyframes labelFadeIn {
139
+ 0% {
140
+ opacity: 0;
141
+ transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(0.8);
142
+ }
143
+ 100% {
144
+ opacity: 1;
145
+ transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(1);
146
+ }
147
+ }
148
+ @keyframes scanLine {
149
+ 0% {
150
+ transform: translateY(-100%);
151
+ opacity: 0;
152
+ }
153
+ 50% {
154
+ opacity: 0.5;
155
+ }
156
+ 100% {
157
+ transform: translateY(100%);
158
+ opacity: 0;
159
+ }
160
+ }
161
+ .graphContainer :global(.react-flow__node.selected),
162
+ .graphContainer :global(.react-flow__node:focus),
163
+ .graphContainer :global(.react-flow__node:focus-visible) {
164
+ outline: none !important;
165
+ }
166
+ .graphContainer :global(.react-flow__node.selected > *) {
167
+ box-shadow: none;
168
+ }
169
+ .graphContainer {
170
+ position: relative;
171
+ background-image:
172
+ linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
173
+ linear-gradient(
174
+ 90deg,
175
+ color-mix(in srgb, var(--color-primary) 5%, transparent) 1px,
176
+ transparent 1px),
177
+ radial-gradient(
178
+ ellipse at 50% 50%,
179
+ color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
180
+ transparent 70%);
181
+ background-color: var(--color-background);
182
+ background-size:
183
+ 40px 40px,
184
+ 40px 40px,
185
+ 100% 100%;
186
+ animation: gridMove 20s linear infinite;
187
+ }
188
+ [data-mantine-color-scheme=dark] .graphContainer {
189
+ background-image:
190
+ linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
191
+ linear-gradient(
192
+ 90deg,
193
+ color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
194
+ transparent 1px),
195
+ radial-gradient(
196
+ ellipse at 50% 50%,
197
+ color-mix(in srgb, var(--color-primary) 9%, transparent) 0%,
198
+ transparent 70%);
199
+ background-color: var(--color-background);
200
+ background-size:
201
+ 40px 40px,
202
+ 40px 40px,
203
+ 100% 100%;
204
+ }
205
+ .node {
206
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
207
+ position: relative;
208
+ }
209
+ .node :global(.react-flow__node.selected),
210
+ .node :global(.react-flow__node:focus),
211
+ .node :global(.react-flow__node:focus-visible) {
212
+ outline: none !important;
213
+ box-shadow: none !important;
214
+ }
215
+ .node:nth-child(1) {
216
+ animation-delay: 0.05s;
217
+ }
218
+ .node:nth-child(2) {
219
+ animation-delay: 0.1s;
220
+ }
221
+ .node:nth-child(3) {
222
+ animation-delay: 0.15s;
223
+ }
224
+ .node:nth-child(4) {
225
+ animation-delay: 0.2s;
226
+ }
227
+ .node:nth-child(5) {
228
+ animation-delay: 0.25s;
229
+ }
230
+ .node:nth-child(6) {
231
+ animation-delay: 0.3s;
232
+ }
233
+ .node:nth-child(7) {
234
+ animation-delay: 0.35s;
235
+ }
236
+ .node:nth-child(8) {
237
+ animation-delay: 0.4s;
238
+ }
239
+ .node:nth-child(9) {
240
+ animation-delay: 0.45s;
241
+ }
242
+ .node:nth-child(10) {
243
+ animation-delay: 0.5s;
244
+ }
245
+ .node:nth-child(11) {
246
+ animation-delay: 0.55s;
247
+ }
248
+ .node:nth-child(12) {
249
+ animation-delay: 0.6s;
250
+ }
251
+ .nodeCard {
252
+ position: relative;
253
+ border-radius: var(--mantine-radius-md);
254
+ overflow: hidden;
255
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
256
+ }
257
+ .nodeCard::before {
258
+ content: "";
259
+ position: absolute;
260
+ inset: 0;
261
+ background:
262
+ linear-gradient(
263
+ 135deg,
264
+ var(--node-color-light, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
265
+ transparent 50%,
266
+ var(--node-color-light, color-mix(in srgb, var(--color-primary) 5%, transparent)) 100%);
267
+ pointer-events: none;
268
+ opacity: 0;
269
+ transition: opacity 0.3s ease;
270
+ }
271
+ .nodeCard::after {
272
+ content: "";
273
+ position: absolute;
274
+ left: 0;
275
+ right: 0;
276
+ height: 30%;
277
+ background:
278
+ linear-gradient(
279
+ 180deg,
280
+ transparent 0%,
281
+ var(--node-color-glow, color-mix(in srgb, var(--color-primary) 10%, transparent)) 50%,
282
+ transparent 100%);
283
+ pointer-events: none;
284
+ opacity: 0;
285
+ }
286
+ .nodeCard:hover::before,
287
+ .nodeCardSelected::before {
288
+ opacity: 1;
289
+ }
290
+ .nodeCard:hover::after,
291
+ .nodeCardSelected::after {
292
+ animation: scanLine 3s ease-in-out infinite;
293
+ }
294
+ .nodeCard:hover {
295
+ transform: translateY(-2px) scale(1.02);
296
+ }
297
+ .nodeCardSelected {
298
+ transform: translateY(-2px) scale(1.02);
299
+ animation: glowPulse 2s ease-in-out infinite;
300
+ }
301
+ .nodeAgent {
302
+ --glow-color: rgba(139, 92, 246, 0.4);
303
+ --node-color-light: rgba(139, 92, 246, 0.1);
304
+ --node-color-glow: rgba(139, 92, 246, 0.15);
305
+ --handle-color: rgba(139, 92, 246, 0.5);
306
+ --gradient-start: rgba(139, 92, 246, 0.15);
307
+ --gradient-end: rgba(139, 92, 246, 0.05);
308
+ }
309
+ .nodeWorkflow {
310
+ --glow-color: rgba(59, 130, 246, 0.4);
311
+ --node-color-light: rgba(59, 130, 246, 0.1);
312
+ --node-color-glow: rgba(59, 130, 246, 0.15);
313
+ --handle-color: rgba(59, 130, 246, 0.5);
314
+ --gradient-start: rgba(59, 130, 246, 0.15);
315
+ --gradient-end: rgba(59, 130, 246, 0.05);
316
+ }
317
+ .nodeTrigger {
318
+ --glow-color: rgba(249, 115, 22, 0.4);
319
+ --node-color-light: rgba(249, 115, 22, 0.1);
320
+ --node-color-glow: rgba(249, 115, 22, 0.15);
321
+ --handle-color: rgba(249, 115, 22, 0.5);
322
+ --gradient-start: rgba(249, 115, 22, 0.15);
323
+ --gradient-end: rgba(249, 115, 22, 0.05);
324
+ }
325
+ .nodeIntegration {
326
+ --glow-color: rgba(20, 184, 166, 0.4);
327
+ --node-color-light: rgba(20, 184, 166, 0.1);
328
+ --node-color-glow: rgba(20, 184, 166, 0.15);
329
+ --handle-color: rgba(20, 184, 166, 0.5);
330
+ --gradient-start: rgba(20, 184, 166, 0.15);
331
+ --gradient-end: rgba(20, 184, 166, 0.05);
332
+ }
333
+ .nodeExternal {
334
+ --glow-color: rgba(107, 114, 128, 0.4);
335
+ --node-color-light: rgba(107, 114, 128, 0.1);
336
+ --node-color-glow: rgba(107, 114, 128, 0.15);
337
+ --handle-color: rgba(107, 114, 128, 0.5);
338
+ --gradient-start: rgba(107, 114, 128, 0.15);
339
+ --gradient-end: rgba(107, 114, 128, 0.05);
340
+ }
341
+ .nodeHuman {
342
+ --glow-color: rgba(245, 158, 11, 0.4);
343
+ --node-color-light: rgba(245, 158, 11, 0.1);
344
+ --node-color-glow: rgba(245, 158, 11, 0.15);
345
+ --handle-color: rgba(245, 158, 11, 0.5);
346
+ --gradient-start: rgba(245, 158, 11, 0.15);
347
+ --gradient-end: rgba(245, 158, 11, 0.05);
348
+ }
349
+ .nodePrimary {
350
+ --glow-color: rgba(37, 99, 235, 0.4);
351
+ --node-color-light: rgba(37, 99, 235, 0.1);
352
+ --node-color-glow: rgba(37, 99, 235, 0.15);
353
+ --handle-color: rgba(37, 99, 235, 0.5);
354
+ --gradient-start: rgba(37, 99, 235, 0.15);
355
+ --gradient-end: rgba(37, 99, 235, 0.05);
356
+ }
357
+ .handle {
358
+ transition: all 0.2s ease;
359
+ }
360
+ .handle:hover {
361
+ animation: handlePulse 1s ease-in-out infinite;
362
+ }
363
+ .nodeIcon {
364
+ transition: all 0.3s ease;
365
+ }
366
+ .badge {
367
+ transition: all 0.2s ease;
368
+ backdrop-filter: blur(4px);
369
+ }
370
+ .nodeCard:hover .badge {
371
+ transform: scale(1.05);
372
+ }
373
+ .badgeProd {
374
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
375
+ }
376
+ .edge {
377
+ transition: all 0.3s ease;
378
+ }
379
+ .edgeAnimated {
380
+ stroke-dasharray: 8 4;
381
+ animation: edgeFlow 1s linear infinite;
382
+ }
383
+ .edgeGlow {
384
+ filter: drop-shadow(0 0 3px var(--edge-color, color-mix(in srgb, var(--color-primary) 50%, transparent)));
385
+ }
386
+ .edgeHighlighted {
387
+ stroke-width: 3px;
388
+ }
389
+ .edgeLabel {
390
+ backdrop-filter: blur(8px);
391
+ border: 1px solid rgba(255, 255, 255, 0.1);
392
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px var(--label-glow, color-mix(in srgb, var(--color-primary) 20%, transparent));
393
+ transition: box-shadow 0.2s ease;
394
+ }
395
+ .edgeLabel:hover {
396
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 30px var(--label-glow, color-mix(in srgb, var(--color-primary) 30%, transparent));
397
+ }
398
+ .legend {
399
+ backdrop-filter: var(--glass-blur);
400
+ background: var(--glass-background);
401
+ border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
402
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 40px color-mix(in srgb, var(--color-primary) 10%, transparent);
403
+ }
404
+ [data-mantine-color-scheme=dark] .legend {
405
+ border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
406
+ }
407
+ .legendDot {
408
+ transition: all 0.2s ease;
409
+ box-shadow: 0 0 8px currentColor;
410
+ }
411
+ .legendDot:hover {
412
+ transform: scale(1.3);
413
+ box-shadow: 0 0 12px currentColor;
414
+ }
415
+ .nodeHighlighted .nodeCard {
416
+ transform: translateY(-2px) scale(1.02);
417
+ }
418
+ .nodeHighlighted .nodeCard::before {
419
+ opacity: 1;
420
+ }
421
+ .nodeHighlighted .nodeCard::after {
422
+ animation: scanLine 3s ease-in-out infinite;
423
+ }
424
+ .nodeDimmed {
425
+ opacity: 0.3;
426
+ filter: grayscale(0.5);
427
+ transition: all 0.3s ease;
428
+ }
429
+ .edgeHighlighted {
430
+ stroke-width: 4px !important;
431
+ }
432
+ .edgeDimmed {
433
+ opacity: 0.15;
434
+ transition: all 0.3s ease;
435
+ }
436
+ .edgeLabelDimmed {
437
+ opacity: 0.15;
438
+ transition: opacity 0.3s ease;
439
+ }
440
+ @media (prefers-reduced-motion: reduce) {
441
+ .node,
442
+ .nodeCard::after,
443
+ .edgeAnimated,
444
+ .nodeIcon,
445
+ .handle:hover,
446
+ .graphContainer {
447
+ animation: none;
448
+ }
449
+ .nodeCard:hover {
450
+ transform: none;
451
+ }
452
+ }