@kekonic/diagrams 1.0.0-rc.4

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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +92 -0
  3. package/dist/index.d.mts +173 -0
  4. package/dist/index.mjs +1642 -0
  5. package/dist/index.mjs.map +1 -0
  6. package/package.json +67 -0
  7. package/theme.css +373 -0
package/theme.css ADDED
@@ -0,0 +1,373 @@
1
+ /* Generated by scripts/generate-theme-css.mjs — do not edit by hand. */
2
+
3
+ .k-diagram, .k-diagram[data-theme="dark"], .k-diagram.kdiagram-theme-dark, :root, :root[data-theme="dark"] {
4
+ --kd-bg: #070b12;
5
+ --kd-surface: #10161f;
6
+ --kd-surface-2: #171e29;
7
+ --kd-surface-3: #222a36;
8
+ --kd-text: #e8ebf1;
9
+ --kd-muted: #9099a5;
10
+ --kd-border: #343e4a;
11
+ --kd-edge: #7e8792;
12
+ --kd-edge-label-bg: #151c26;
13
+ --kd-edge-label-text: #e8ebf1;
14
+ --kd-edge-label-stroke: #3d4754;
15
+ --kd-accent: #a195f7;
16
+ --kd-danger: #f07f77;
17
+ --kd-danger-fill: #2a1214;
18
+ --kd-warning: #ebbd57;
19
+ --kd-success: #61c594;
20
+ --kd-choice: #a3a0d8;
21
+ --kd-user-fill: #16122a;
22
+ --kd-user-stroke: #a195f7;
23
+ --kd-service-fill: #141222;
24
+ --kd-service-stroke: #a195f7;
25
+ --kd-system-fill: #17102e;
26
+ --kd-system-stroke: #c1bbfc;
27
+ --kd-container-fill: #141222;
28
+ --kd-container-stroke: #a195f7;
29
+ --kd-component-fill: #161822;
30
+ --kd-component-stroke: #9a8fb8;
31
+ --kd-data-fill: #0a1a20;
32
+ --kd-data-stroke: #5bbdda;
33
+ --kd-table-fill: #10161f;
34
+ --kd-table-header-fill: #171e29;
35
+ --kd-table-title: #e8ebf1;
36
+ --kd-table-zebra: rgba(144, 153, 165, 0.06);
37
+ --kd-table-badge-pk-fill: #7c5cbf;
38
+ --kd-table-badge-fk-fill: #6b5f9a;
39
+ --kd-table-badge-uk-fill: #2f7a62;
40
+ --kd-table-badge-text: #e8ebf1;
41
+ --kd-choice-fill: #1a1b2c;
42
+ --kd-choice-stroke: #a3a0d8;
43
+ --kd-success-fill: #0a2015;
44
+ --kd-success-stroke: #61c594;
45
+ --kd-warning-fill: #271e0a;
46
+ --kd-warning-stroke: #ebbd57;
47
+ --kd-event-fill: #101e17;
48
+ --kd-async-stroke: #61c594;
49
+ --kd-external-fill: #111418;
50
+ --kd-external-stroke: #9099a5;
51
+ --kd-group-fill: rgba(161, 149, 247, 0.1);
52
+ --kd-group-stroke: rgba(161, 149, 247, 0.42);
53
+ --kd-node-fill: var(--kd-surface);
54
+ --kd-node-stroke: var(--kd-border);
55
+ --kd-node-shadow: rgba(2, 6, 12, 0.45);
56
+ --kd-node-glow: rgba(161, 149, 247, 0.14);
57
+ --kd-edge-yes: var(--kd-success);
58
+ --kd-edge-no: var(--kd-danger);
59
+ --kd-edge-yes-label-bg: #0f5138;
60
+ --kd-edge-yes-label-text: #ecfdf5;
61
+ --kd-edge-no-label-bg: #8f2a2a;
62
+ --kd-edge-no-label-text: #fef2f2;
63
+ --kd-port-fill: var(--kd-bg);
64
+ --kd-port-stroke: var(--kd-accent);
65
+ --kd-sequence-lifeline: var(--kd-edge);
66
+ --kd-sequence-activation-fill: var(--kd-surface-2);
67
+ --kd-sequence-activation-stroke: var(--kd-edge);
68
+ --kd-sequence-fragment-fill: rgba(161, 149, 247, 0.04);
69
+ --kd-sequence-fragment-stroke: rgba(161, 149, 247, 0.28);
70
+ --kd-sequence-note-fill: var(--kd-surface-2);
71
+ --kd-sequence-note-stroke: var(--kd-border);
72
+ }
73
+
74
+ .k-diagram[data-theme="light"], .k-diagram.kdiagram-theme-light, :root[data-theme="light"] {
75
+ --kd-bg: #f2f5f9;
76
+ --kd-surface: #ffffff;
77
+ --kd-surface-2: #eef2f7;
78
+ --kd-surface-3: #e0e5eb;
79
+ --kd-text: #141b24;
80
+ --kd-muted: #565e69;
81
+ --kd-border: #c4cbd4;
82
+ --kd-edge: #616a75;
83
+ --kd-edge-label-bg: #ffffff;
84
+ --kd-edge-label-text: #141b24;
85
+ --kd-edge-label-stroke: #c4cbd4;
86
+ --kd-accent: #5f38ca;
87
+ --kd-danger: #c53637;
88
+ --kd-danger-fill: #fef2f2;
89
+ --kd-warning: #b67700;
90
+ --kd-success: #007d50;
91
+ --kd-choice: #6360a0;
92
+ --kd-user-fill: #f3eefc;
93
+ --kd-user-stroke: #5f38ca;
94
+ --kd-service-fill: #f5f0fc;
95
+ --kd-service-stroke: #5f38ca;
96
+ --kd-system-fill: #ede5fa;
97
+ --kd-system-stroke: #432990;
98
+ --kd-container-fill: #f5f0fc;
99
+ --kd-container-stroke: #5f38ca;
100
+ --kd-component-fill: #f7f5fb;
101
+ --kd-component-stroke: #6b5f8a;
102
+ --kd-data-fill: #e8f7fb;
103
+ --kd-data-stroke: #0e7490;
104
+ --kd-table-fill: #ffffff;
105
+ --kd-table-header-fill: #eef2f7;
106
+ --kd-table-title: #141b24;
107
+ --kd-table-zebra: rgba(86, 94, 105, 0.07);
108
+ --kd-table-badge-pk-fill: #5f38ca;
109
+ --kd-table-badge-fk-fill: #6b5f9a;
110
+ --kd-table-badge-uk-fill: #2f7a62;
111
+ --kd-table-badge-text: #ffffff;
112
+ --kd-choice-fill: #f3f2fa;
113
+ --kd-choice-stroke: #6360a0;
114
+ --kd-success-fill: #ecfdf5;
115
+ --kd-success-stroke: #007d50;
116
+ --kd-warning-fill: #fffbeb;
117
+ --kd-warning-stroke: #b67700;
118
+ --kd-event-fill: #f0fdf4;
119
+ --kd-async-stroke: #007d50;
120
+ --kd-external-fill: #f8fafc;
121
+ --kd-external-stroke: #565e69;
122
+ --kd-group-fill: rgba(95, 56, 202, 0.07);
123
+ --kd-group-stroke: rgba(95, 56, 202, 0.32);
124
+ --kd-node-fill: var(--kd-surface);
125
+ --kd-node-stroke: var(--kd-border);
126
+ --kd-node-shadow: rgba(20, 27, 36, 0.12);
127
+ --kd-node-glow: rgba(95, 56, 202, 0.08);
128
+ --kd-edge-yes: var(--kd-success);
129
+ --kd-edge-no: var(--kd-danger);
130
+ --kd-edge-yes-label-bg: #007d50;
131
+ --kd-edge-yes-label-text: #ffffff;
132
+ --kd-edge-no-label-bg: #c53637;
133
+ --kd-edge-no-label-text: #ffffff;
134
+ --kd-port-fill: var(--kd-bg);
135
+ --kd-port-stroke: var(--kd-accent);
136
+ --kd-sequence-lifeline: var(--kd-edge);
137
+ --kd-sequence-activation-fill: var(--kd-surface-2);
138
+ --kd-sequence-activation-stroke: var(--kd-edge);
139
+ --kd-sequence-fragment-fill: rgba(95, 56, 202, 0.03);
140
+ --kd-sequence-fragment-stroke: rgba(95, 56, 202, 0.22);
141
+ --kd-sequence-note-fill: var(--kd-surface-2);
142
+ --kd-sequence-note-stroke: var(--kd-border);
143
+ }
144
+
145
+ .k-diagram {
146
+ font-family: "Inter", "Segoe UI", system-ui, sans-serif;
147
+ }
148
+ .flow-node-shell { fill: var(--node-fill, var(--kd-node-fill)); stroke: var(--node-stroke, var(--kd-node-stroke)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
149
+ .flow-node-shell-rim { pointer-events: none; }
150
+ .flow-node-title { fill: var(--kd-text); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
151
+ .flow-node-subtitle { fill: var(--kd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
152
+ .flow-node-technology { fill: var(--kd-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; font-style: italic; }
153
+ .flow-node-description { fill: var(--kd-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.92; }
154
+ .flow-node-note-text { fill: var(--kd-muted); font-size: 9px; font-style: italic; }
155
+ .flow-node-icon-glyph { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; }
156
+ .flow-port-marker { fill: var(--node-stroke, var(--kd-node-stroke)); stroke: none; }
157
+ .flow-node-user, .flow-node-actor, .flow-node-person { --node-fill: var(--kd-user-fill); --node-stroke: var(--kd-user-stroke); }
158
+ .flow-node-participant { --node-fill: var(--kd-surface); --node-stroke: var(--kd-border); }
159
+ .flow-node-system { --node-fill: var(--kd-system-fill); --node-stroke: var(--kd-system-stroke); }
160
+ .flow-node-system .flow-node-shell { stroke-width: 2; }
161
+ .flow-node-container { --node-fill: var(--kd-container-fill); --node-stroke: var(--kd-container-stroke); }
162
+ .flow-node-component { --node-fill: var(--kd-component-fill); --node-stroke: var(--kd-component-stroke); }
163
+ .flow-node-service, .flow-node-worker, .flow-node-application, .flow-node-module, .flow-node-process, .flow-node-task, .flow-node-subprocess, .flow-node-command, .flow-node-producer, .flow-node-consumer, .flow-node-job, .flow-node-aggregate, .flow-node-projection, .flow-node-interface, .flow-node-deployment, .flow-node-server, .flow-node-state { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-service-stroke); }
164
+ .flow-node-database, .flow-node-entity, .flow-node-cache, .flow-node-store, .flow-node-bucket { --node-fill: var(--kd-data-fill); --node-stroke: var(--kd-data-stroke); }
165
+ .flow-node-table, .flow-node-class { --node-fill: var(--kd-table-fill, var(--kd-service-fill)); --node-stroke: var(--kd-service-stroke); }
166
+ .flow-node-gateway, .flow-node-broker, .flow-node-loadbalancer, .flow-node-firewall, .flow-node-preparation, .flow-node-policy { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
167
+ .flow-node-queue, .flow-node-dlq, .flow-node-topic, .flow-node-stream { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
168
+ .flow-node-event, .flow-node-start, .flow-node-end, .flow-node-branch, .flow-node-tag { --node-fill: var(--kd-event-fill); --node-stroke: var(--kd-async-stroke); }
169
+ .flow-node-choice, .flow-node-decision { --node-fill: var(--kd-choice-fill); --node-stroke: var(--kd-choice-stroke); }
170
+ .flow-node-warning, .flow-node-failure, .flow-node-manual { --node-fill: var(--kd-warning-fill); --node-stroke: var(--kd-warning-stroke); }
171
+ .flow-node-success { --node-fill: var(--kd-success-fill); --node-stroke: var(--kd-success-stroke); }
172
+ .flow-node-external { --node-fill: var(--kd-external-fill); --node-stroke: var(--kd-external-stroke); --node-stroke-dash: 5 3.5; }
173
+ .flow-node-note, .flow-node-document, .flow-node-message, .flow-node-package { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-muted); }
174
+ .flow-node-cloud, .flow-node-zone, .flow-node-group, .flow-node-boundary { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-service-stroke); }
175
+ .flow-node-io { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
176
+ .flow-node-connector, .flow-node-initial, .flow-node-final, .flow-node-junction, .flow-node-commit { --node-fill: var(--kd-text); --node-stroke: var(--kd-text); }
177
+ /* Icon-only kind (node shell) — do not put glyph color rules here. */
178
+ .flow-node-icon {
179
+ --node-fill: color-mix(in srgb, var(--kd-node-fill) 88%, var(--kd-accent, var(--kd-text)) 12%);
180
+ --node-stroke: var(--kd-node-stroke);
181
+ }
182
+ /* Glyph wrapper — --icon-color for icon-only tint; else node stroke / theme. */
183
+ .flow-node-icon-mark {
184
+ color: var(--icon-color, var(--node-stroke, var(--kd-node-stroke)));
185
+ }
186
+ .flow-node-fork, .flow-node-join { --node-fill: var(--kd-text); --node-stroke: var(--kd-text); }
187
+ .flow-node-rectangle, .flow-node-rounded, .flow-shape-rectangle, .flow-shape-rounded { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-service-stroke); }
188
+ .flow-node-pill, .flow-shape-pill { --node-fill: var(--kd-event-fill); --node-stroke: var(--kd-async-stroke); }
189
+ .flow-node-diamond, .flow-shape-diamond { --node-fill: var(--kd-choice-fill); --node-stroke: var(--kd-choice-stroke); }
190
+ .flow-node-hexagon, .flow-shape-hexagon { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
191
+ .flow-node-cylinder, .flow-shape-cylinder { --node-fill: var(--kd-data-fill); --node-stroke: var(--kd-data-stroke); }
192
+ .flow-node-ellipse, .flow-shape-ellipse, .flow-node-circle, .flow-shape-circle { --node-fill: var(--kd-event-fill); --node-stroke: var(--kd-async-stroke); }
193
+ .flow-node-triangle, .flow-shape-triangle, .flow-node-parallelogram, .flow-shape-parallelogram, .flow-node-trapezoid, .flow-shape-trapezoid { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
194
+ .flow-node-folded-document, .flow-shape-folded-document { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-muted); }
195
+ .flow-shape-document { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-muted); }
196
+ .flow-shape-cloud, .flow-shape-boundary { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-service-stroke); }
197
+ .flow-shape-person { --node-fill: var(--kd-user-fill); --node-stroke: var(--kd-user-stroke); }
198
+ .flow-shape-queue, .flow-shape-stream { --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent); }
199
+ .flow-node-shell-partition { pointer-events: none; }
200
+ /* Built-in semantic styles (is danger, is success, ...) — also applied via StyleDefinition. */
201
+ .kd-style-danger, .kd-style-dangerous, .kd-style-error, .kd-style-fail, .kd-style-failure,
202
+ .kd-style-critical {
203
+ --node-fill: var(--kd-danger-fill); --node-stroke: var(--kd-danger);
204
+ }
205
+ .kd-style-warning, .kd-style-warn, .kd-style-caution {
206
+ --node-fill: var(--kd-warning-fill); --node-stroke: var(--kd-warning-stroke);
207
+ }
208
+ .kd-style-success, .kd-style-ok, .kd-style-pass {
209
+ --node-fill: var(--kd-success-fill); --node-stroke: var(--kd-success-stroke);
210
+ }
211
+ .kd-style-muted, .kd-style-deprecated, .kd-style-inactive {
212
+ --node-fill: var(--kd-surface); --node-stroke: var(--kd-muted); --node-stroke-dash: 5 3.5;
213
+ }
214
+ .kd-style-info, .kd-style-accent {
215
+ --node-fill: var(--kd-service-fill); --node-stroke: var(--kd-accent);
216
+ }
217
+ .flow-table-shell { stroke: none; }
218
+ .flow-table-border { fill: none; stroke: var(--node-stroke, var(--kd-node-stroke)); stroke-width: 1.5; }
219
+ .flow-table-title { fill: var(--kd-table-title, var(--kd-text)); font-weight: 700; letter-spacing: -0.01em; }
220
+ .flow-table-col-name { fill: var(--kd-text); font-weight: 600; letter-spacing: -0.01em; }
221
+ .flow-table-col-pk { font-weight: 700; }
222
+ .flow-table-col-type { fill: var(--kd-muted); font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; font-size: 10px; }
223
+ .flow-table-col-nn { fill: var(--kd-muted); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; font-size: 9px; opacity: 0.72; }
224
+ .flow-table-col-note { fill: var(--kd-muted); font-weight: 500; opacity: 0.78; letter-spacing: 0; font-size: 9.5px; }
225
+ .flow-table-badge-pk { fill: var(--kd-table-badge-pk-fill); }
226
+ .flow-table-badge-fk { fill: var(--kd-table-badge-fk-fill); }
227
+ .flow-table-badge-uk { fill: var(--kd-table-badge-uk-fill); }
228
+ .flow-table-badge-text { fill: var(--kd-table-badge-text); font-weight: 800; letter-spacing: 0.02em; }
229
+ .flow-table-zebra { pointer-events: none; }
230
+ .flow-group-box { fill: var(--kd-group-fill); stroke: var(--kd-group-stroke); }
231
+ .flow-group-header-bar { pointer-events: none; }
232
+ .flow-group-header-accent { pointer-events: none; }
233
+ .flow-group-header-rule { pointer-events: none; }
234
+ .flow-group-label { fill: var(--kd-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
235
+ .flow-group-label-icon { color: var(--icon-color, var(--kd-muted)); }
236
+ .flow-group-chromeless { pointer-events: none; }
237
+ .flow-edge-label-bg { fill: var(--kd-edge-label-bg); stroke: var(--kd-edge-label-stroke); stroke-width: 1; }
238
+ .flow-edge-label-leader { stroke: var(--kd-edge-label-stroke); stroke-width: 1; fill: none; opacity: 0.85; }
239
+ .flow-edge-label-text { fill: var(--kd-edge-label-text); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
240
+ .flow-edge-label-icon { color: var(--icon-color, var(--kd-edge-label-text)); }
241
+ .flow-debug-port { fill: var(--kd-accent); stroke: var(--kd-bg); stroke-width: 1.5; opacity: 0.95; }
242
+ .flow-debug-port-source { fill: var(--kd-edge-yes, var(--kd-accent)); }
243
+ .flow-debug-port-target { fill: var(--kd-edge-no, var(--kd-danger, var(--kd-accent))); }
244
+ .flow-edge-endpoint { stroke: var(--kd-bg); stroke-width: 1.25; opacity: 0.95; }
245
+ .flow-canvas-title-text { fill: var(--kd-text); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
246
+ .flow-canvas-subtitle-text { fill: var(--kd-muted); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }
247
+ .flow-canvas-legend-text { fill: var(--kd-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
248
+ .flow-group-label-bar { fill: var(--kd-text); font-weight: 700; }
249
+ .flow-edge-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
250
+ .flow-sequence-message-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
251
+ .flow-sequence-message-label { fill: var(--kd-text); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
252
+ .flow-sequence-fragment-box { fill: var(--kd-sequence-fragment-fill); stroke: var(--kd-sequence-fragment-stroke); }
253
+ .flow-sequence-fragment-operand {
254
+ fill: var(--kd-sequence-fragment-fill, transparent);
255
+ stroke: none;
256
+ pointer-events: none;
257
+ }
258
+ .flow-sequence-fragment-label { fill: var(--kd-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
259
+ .flow-sequence-divider-label { fill: var(--kd-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
260
+ .flow-sequence-note-text { fill: var(--kd-text); font-size: 11px; font-weight: 500; }
261
+ .flow-edge-label-yes .flow-edge-label-bg { fill: var(--kd-edge-yes-label-bg); stroke: var(--kd-edge-yes); }
262
+ .flow-edge-label-yes .flow-edge-label-text { fill: var(--kd-edge-yes-label-text); }
263
+ .flow-edge-label-no .flow-edge-label-bg { fill: var(--kd-edge-no-label-bg); stroke: var(--kd-edge-no); }
264
+ .flow-edge-label-no .flow-edge-label-text { fill: var(--kd-edge-no-label-text); }
265
+ .flow-edge-branch-yes { stroke: var(--kd-edge-yes); }
266
+ .flow-edge-branch-no { stroke: var(--kd-edge-no); }
267
+ .flow-edge-async { stroke-dasharray: 6 4; }
268
+ .flow-edge-eventual { stroke-dasharray: 2 6; opacity: 0.85; }
269
+ .flow-edge-association { stroke-dasharray: 1 0; opacity: 0.75; }
270
+ .flow-edge-dependency { stroke-dasharray: 2 4; opacity: 0.82; }
271
+ .flow-edge-failure { stroke: var(--kd-danger); }
272
+
273
+ /* Diagram animation emphasis (interactive player)
274
+ * Resolve --kd-* on .k-diagram (SVG root), not on .kdiagram-viewport —
275
+ * intermediate vars on the viewport can't see tokens defined on the SVG child.
276
+ * Active emphasis must NOT replace semantic strokes (yes/no, kind, danger, …).
277
+ */
278
+ .k-diagram {
279
+ --kd-anim-dim-opacity: 0.62;
280
+ /* Soft haze — keep presence via wide blur, not a tight bright ring. */
281
+ --kd-anim-glow: color-mix(in srgb, var(--kd-text, #e8ebf1) 18%, transparent);
282
+ --kd-anim-glow-soft: color-mix(in srgb, var(--kd-text, #e8ebf1) 9%, transparent);
283
+ /* Pulse peak — stronger than steady active so the beat reads clearly. */
284
+ --kd-anim-pulse-glow: color-mix(in srgb, var(--kd-text, #e8ebf1) 36%, transparent);
285
+ --kd-anim-pulse-glow-soft: color-mix(in srgb, var(--kd-text, #e8ebf1) 16%, transparent);
286
+ /* Fallback only when an edge has no resolvable stroke (flow overlays set inline). */
287
+ --kd-anim-flow-stroke: color-mix(in srgb, var(--kd-accent, #a195f7) 55%, white);
288
+ --kd-anim-flow-core: color-mix(in srgb, var(--kd-accent, #a195f7) 30%, white);
289
+ }
290
+ .k-diagram .flow-anim-dim {
291
+ opacity: var(--kd-anim-dim-opacity);
292
+ }
293
+ .k-diagram .flow-anim-active {
294
+ opacity: 1 !important;
295
+ }
296
+ .k-diagram .flow-anim-active.flow-node {
297
+ filter: drop-shadow(0 0 8px var(--kd-anim-glow))
298
+ drop-shadow(0 0 22px var(--kd-anim-glow-soft));
299
+ }
300
+ .k-diagram .flow-anim-active.flow-node :is(.flow-node-shell, rect.flow-node-shell) {
301
+ stroke-width: 2.5px;
302
+ }
303
+ .k-diagram .flow-anim-active.flow-edge .flow-edge-path,
304
+ .k-diagram .flow-anim-active.flow-edge .flow-edge-jump,
305
+ .k-diagram .flow-anim-active.flow-edge .flow-sequence-message-path {
306
+ stroke-width: 2.6px;
307
+ stroke-opacity: 1;
308
+ filter: drop-shadow(0 0 6px var(--kd-anim-glow))
309
+ drop-shadow(0 0 16px var(--kd-anim-glow-soft));
310
+ }
311
+ .k-diagram .flow-anim-active.flow-sequence-fragment .flow-sequence-fragment-box {
312
+ stroke-width: 2.2px;
313
+ filter: drop-shadow(0 0 8px var(--kd-anim-glow))
314
+ drop-shadow(0 0 18px var(--kd-anim-glow-soft));
315
+ }
316
+ .k-diagram .flow-anim-active.flow-sequence-fragment-operand {
317
+ filter: drop-shadow(0 0 6px var(--kd-anim-glow-soft));
318
+ }
319
+ .k-diagram .flow-anim-pulse {
320
+ animation: flow-anim-pulse 0.65s ease-in-out infinite;
321
+ }
322
+ @keyframes flow-anim-pulse {
323
+ 0%, 100% {
324
+ filter: drop-shadow(0 0 6px var(--kd-anim-glow))
325
+ drop-shadow(0 0 14px var(--kd-anim-glow-soft));
326
+ }
327
+ 50% {
328
+ filter: drop-shadow(0 0 14px var(--kd-anim-pulse-glow))
329
+ drop-shadow(0 0 36px var(--kd-anim-pulse-glow-soft));
330
+ }
331
+ }
332
+ .k-diagram .flow-anim-flow-track {
333
+ fill: none;
334
+ stroke: color-mix(in srgb, var(--kd-anim-flow-stroke) 40%, transparent);
335
+ stroke-width: 5;
336
+ stroke-linecap: round;
337
+ stroke-linejoin: round;
338
+ pointer-events: none;
339
+ }
340
+ .k-diagram .flow-anim-flow-overlay {
341
+ fill: none;
342
+ stroke: var(--kd-anim-flow-stroke);
343
+ stroke-width: 3.75;
344
+ stroke-linecap: round;
345
+ stroke-linejoin: round;
346
+ pointer-events: none;
347
+ filter: drop-shadow(0 0 8px var(--kd-anim-glow))
348
+ drop-shadow(0 0 18px var(--kd-anim-glow-soft));
349
+ }
350
+ .k-diagram .flow-anim-flow-core {
351
+ fill: none;
352
+ stroke: var(--kd-anim-flow-core);
353
+ stroke-width: 1.75;
354
+ stroke-linecap: round;
355
+ stroke-linejoin: round;
356
+ pointer-events: none;
357
+ }
358
+ .k-diagram .flow-anim-flow-head {
359
+ fill: var(--kd-anim-flow-core);
360
+ stroke: var(--kd-anim-flow-stroke);
361
+ stroke-width: 1.5;
362
+ pointer-events: none;
363
+ filter: drop-shadow(0 0 8px var(--kd-anim-glow))
364
+ drop-shadow(0 0 18px var(--kd-anim-glow-soft));
365
+ }
366
+ @media (prefers-reduced-motion: reduce) {
367
+ .k-diagram .flow-anim-pulse {
368
+ animation: none;
369
+ filter: drop-shadow(0 0 8px var(--kd-anim-glow))
370
+ drop-shadow(0 0 18px var(--kd-anim-glow-soft));
371
+ }
372
+ }
373
+