@xyflow/vue 2.0.0-next.0 → 2.0.0-next.2

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 (9) hide show
  1. package/dist/base.css +161 -79
  2. package/dist/index.d.mts +8 -9
  3. package/dist/index.d.ts +8 -9
  4. package/dist/index.js +28 -55
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +29 -56
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/style.css +203 -133
  9. package/package.json +2 -2
package/dist/style.css CHANGED
@@ -1,105 +1,75 @@
1
- /* this gets exported as style.css and can be used for the default theming */
1
+ @layer xyflow {
2
+
2
3
  /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
4
+
3
5
  .vue-flow {
4
6
  direction: ltr;
7
+ color-scheme: light dark;
5
8
 
6
- --xy-edge-stroke-default: #b1b1b7;
9
+ --xy-edge-stroke-default: light-dark(#b1b1b7, #3e3e3e);
7
10
  --xy-edge-stroke-width-default: 1;
8
- --xy-edge-stroke-selected-default: #555;
11
+ --xy-edge-stroke-selected-default: light-dark(#555, #727272);
9
12
 
10
13
  --xy-connectionline-stroke-default: #b1b1b7;
11
14
  --xy-connectionline-stroke-width-default: 1;
12
15
 
13
- --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
16
+ --xy-attribution-background-color-default: light-dark(rgba(255, 255, 255, 0.5), rgba(150, 150, 150, 0.25));
14
17
 
15
- --xy-minimap-background-color-default: #fff;
16
- --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
18
+ --xy-minimap-background-color-default: light-dark(#fff, #141414);
19
+ --xy-minimap-mask-background-color-default: light-dark(rgba(240, 240, 240, 0.6), rgba(60, 60, 60, 0.6));
17
20
  --xy-minimap-mask-stroke-color-default: transparent;
18
21
  --xy-minimap-mask-stroke-width-default: 1;
19
- --xy-minimap-node-background-color-default: #e2e2e2;
22
+ --xy-minimap-node-background-color-default: light-dark(#e2e2e2, #2b2b2b);
20
23
  --xy-minimap-node-stroke-color-default: transparent;
21
24
  --xy-minimap-node-stroke-width-default: 2;
22
25
 
23
- --xy-background-color-default: transparent;
24
- --xy-background-pattern-dots-color-default: #91919a;
25
- --xy-background-pattern-lines-color-default: #eee;
26
- --xy-background-pattern-cross-color-default: #e2e2e2;
26
+ --xy-background-color-default: light-dark(transparent, #141414);
27
+ --xy-background-pattern-dots-color-default: light-dark(#91919a, #555);
28
+ --xy-background-pattern-lines-color-default: light-dark(#eee, #333);
29
+ --xy-background-pattern-cross-color-default: light-dark(#e2e2e2, #333);
27
30
  background-color: var(--xy-background-color, var(--xy-background-color-default));
28
- --xy-node-color-default: inherit;
29
- --xy-node-border-default: 1px solid #1a192b;
30
- --xy-node-background-color-default: #fff;
31
+ --xy-node-color-default: light-dark(CanvasText, #f8f8f8);
32
+ --xy-node-border-default: 1px solid light-dark(#1a192b, #3c3c3c);
33
+ --xy-node-background-color-default: light-dark(#fff, #1e1e1e);
31
34
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
32
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
33
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
35
+ --xy-node-boxshadow-hover-default: 0 1px 4px 1px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
36
+ --xy-node-boxshadow-selected-default: 0 0 0 0.5px light-dark(#1a192b, #999);
34
37
  --xy-node-border-radius-default: 3px;
35
38
 
36
- --xy-handle-background-color-default: #1a192b;
37
- --xy-handle-border-color-default: #fff;
39
+ --xy-handle-background-color-default: light-dark(#1a192b, #bebebe);
40
+ --xy-handle-border-color-default: light-dark(#fff, #1e1e1e);
38
41
 
39
- --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
40
- --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
42
+ --xy-selection-background-color-default: light-dark(rgba(0, 89, 220, 0.08), rgba(200, 200, 220, 0.08));
43
+ --xy-selection-border-default: 1px dotted light-dark(rgba(0, 89, 220, 0.8), rgba(200, 200, 220, 0.8));
41
44
 
42
- --xy-controls-button-background-color-default: #fefefe;
43
- --xy-controls-button-background-color-hover-default: #f4f4f4;
44
- --xy-controls-button-color-default: inherit;
45
- --xy-controls-button-color-hover-default: inherit;
46
- --xy-controls-button-border-color-default: #eee;
45
+ --xy-controls-button-background-color-default: light-dark(#fefefe, #2b2b2b);
46
+ --xy-controls-button-background-color-hover-default: light-dark(#f4f4f4, #3e3e3e);
47
+ --xy-controls-button-color-default: light-dark(CanvasText, #f8f8f8);
48
+ --xy-controls-button-color-hover-default: light-dark(CanvasText, #fff);
49
+ --xy-controls-button-border-color-default: light-dark(#eee, #5b5b5b);
47
50
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
48
51
 
49
- --xy-edge-label-background-color-default: #ffffff;
50
- --xy-edge-label-color-default: inherit;
52
+ --xy-edge-label-background-color-default: light-dark(#ffffff, #141414);
53
+ --xy-edge-label-color-default: light-dark(CanvasText, #f8f8f8);
51
54
  --xy-resize-background-color-default: #3367d9;
52
55
  }
53
- .vue-flow.dark {
54
- --xy-edge-stroke-default: #3e3e3e;
55
- --xy-edge-stroke-width-default: 1;
56
- --xy-edge-stroke-selected-default: #727272;
57
-
58
- --xy-connectionline-stroke-default: #b1b1b7;
59
- --xy-connectionline-stroke-width-default: 1;
60
-
61
- --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
62
-
63
- --xy-minimap-background-color-default: #141414;
64
- --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
65
- --xy-minimap-mask-stroke-color-default: transparent;
66
- --xy-minimap-mask-stroke-width-default: 1;
67
- --xy-minimap-node-background-color-default: #2b2b2b;
68
- --xy-minimap-node-stroke-color-default: transparent;
69
- --xy-minimap-node-stroke-width-default: 2;
70
-
71
- --xy-background-color-default: #141414;
72
- --xy-background-pattern-dots-color-default: #777;
73
- --xy-background-pattern-lines-color-default: #777;
74
- --xy-background-pattern-cross-color-default: #777;
75
- --xy-node-color-default: #f8f8f8;
76
- --xy-node-border-default: 1px solid #3c3c3c;
77
- --xy-node-background-color-default: #1e1e1e;
78
- --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
79
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
80
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
81
-
82
- --xy-handle-background-color-default: #bebebe;
83
- --xy-handle-border-color-default: #1e1e1e;
84
56
 
85
- --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
86
- --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
87
-
88
- --xy-controls-button-background-color-default: #2b2b2b;
89
- --xy-controls-button-background-color-hover-default: #3e3e3e;
90
- --xy-controls-button-color-default: #f8f8f8;
91
- --xy-controls-button-color-hover-default: #fff;
92
- --xy-controls-button-border-color-default: #5b5b5b;
93
- --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
57
+ [data-theme='dark'] .vue-flow,
58
+ .vue-flow.dark {
59
+ color-scheme: dark;
60
+ }
94
61
 
95
- --xy-edge-label-background-color-default: #141414;
96
- --xy-edge-label-color-default: #f8f8f8;
62
+ [data-theme='light'] .vue-flow,
63
+ .vue-flow.light {
64
+ color-scheme: light;
97
65
  }
66
+
98
67
  .vue-flow__background {
99
68
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
100
69
  pointer-events: none;
101
70
  z-index: -1;
102
71
  }
72
+
103
73
  .vue-flow__container {
104
74
  position: absolute;
105
75
  width: 100%;
@@ -107,111 +77,139 @@
107
77
  top: 0;
108
78
  left: 0;
109
79
  }
80
+
110
81
  .vue-flow__pane {
111
82
  z-index: 1;
112
83
  touch-action: none;
113
84
  }
114
- .vue-flow__pane.draggable {
85
+
86
+ .vue-flow__pane.draggable {
115
87
  cursor: grab;
116
88
  }
117
- .vue-flow__pane.dragging {
89
+
90
+ .vue-flow__pane.dragging {
118
91
  cursor: grabbing;
119
92
  }
120
- .vue-flow__pane.selection {
93
+
94
+ .vue-flow__pane.selection {
121
95
  cursor: pointer;
122
96
  }
97
+
123
98
  .vue-flow__viewport {
124
99
  transform-origin: 0 0;
125
100
  z-index: 2;
126
101
  pointer-events: none;
127
102
  }
103
+
128
104
  .vue-flow__renderer {
129
105
  z-index: 4;
130
106
  }
107
+
131
108
  .vue-flow__selection {
132
109
  z-index: 6;
133
110
  }
111
+
134
112
  .vue-flow__nodesselection-rect:focus,
135
113
  .vue-flow__nodesselection-rect:focus-visible {
136
114
  outline: none;
137
115
  }
116
+
138
117
  .vue-flow__edge-path {
139
118
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
140
119
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
141
120
  fill: none;
142
121
  }
122
+
143
123
  .vue-flow__connection-path {
144
124
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
145
125
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
146
126
  fill: none;
147
127
  }
128
+
148
129
  .vue-flow .vue-flow__edges {
149
130
  position: absolute;
150
131
  }
151
- .vue-flow .vue-flow__edges svg {
132
+
133
+ .vue-flow .vue-flow__edges svg {
152
134
  overflow: visible;
153
135
  position: absolute;
154
136
  pointer-events: none;
155
137
  }
138
+
156
139
  .vue-flow__edge {
157
140
  pointer-events: visibleStroke;
158
141
  }
159
- .vue-flow__edge.selectable {
142
+
143
+ .vue-flow__edge.selectable {
160
144
  cursor: pointer;
161
145
  }
162
- .vue-flow__edge.animated path {
146
+
147
+ .vue-flow__edge.animated path {
163
148
  stroke-dasharray: 5;
164
149
  animation: dashdraw 0.5s linear infinite;
165
150
  }
166
- .vue-flow__edge.animated path.vue-flow__edge-interaction {
151
+
152
+ .vue-flow__edge.animated path.vue-flow__edge-interaction {
167
153
  stroke-dasharray: none;
168
154
  animation: none;
169
155
  }
170
- .vue-flow__edge.inactive {
156
+
157
+ .vue-flow__edge.inactive {
171
158
  pointer-events: none;
172
159
  }
173
- .vue-flow__edge.selected,
160
+
161
+ .vue-flow__edge.selected,
174
162
  .vue-flow__edge:focus,
175
163
  .vue-flow__edge:focus-visible {
176
164
  outline: none;
177
165
  }
178
- .vue-flow__edge.selected .vue-flow__edge-path,
166
+
167
+ .vue-flow__edge.selected .vue-flow__edge-path,
179
168
  .vue-flow__edge.selectable:focus .vue-flow__edge-path,
180
169
  .vue-flow__edge.selectable:focus-visible .vue-flow__edge-path {
181
170
  stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
182
171
  }
183
- .vue-flow__edge-textwrapper {
172
+
173
+ .vue-flow__edge-textwrapper {
184
174
  pointer-events: all;
185
175
  }
186
- .vue-flow__edge .vue-flow__edge-text {
176
+
177
+ .vue-flow__edge .vue-flow__edge-text {
187
178
  pointer-events: none;
188
179
  -webkit-user-select: none;
189
180
  -moz-user-select: none;
190
181
  user-select: none;
191
182
  }
183
+
192
184
  /* Arrowhead marker styles - use CSS custom properties as default */
193
185
  .vue-flow__arrowhead polyline {
194
186
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
195
187
  }
188
+
196
189
  .vue-flow__arrowhead polyline.arrowclosed {
197
190
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
198
191
  }
192
+
199
193
  .vue-flow__connection {
200
194
  pointer-events: none;
201
195
  }
202
- .vue-flow__connection .animated {
196
+
197
+ .vue-flow__connection .animated {
203
198
  stroke-dasharray: 5;
204
199
  animation: dashdraw 0.5s linear infinite;
205
200
  }
201
+
206
202
  svg.vue-flow__connectionline {
207
203
  z-index: 1001;
208
204
  overflow: visible;
209
205
  position: absolute;
210
206
  }
207
+
211
208
  .vue-flow__nodes {
212
209
  pointer-events: none;
213
210
  transform-origin: 0 0;
214
211
  }
212
+
215
213
  .vue-flow__node {
216
214
  position: absolute;
217
215
  -webkit-user-select: none;
@@ -222,26 +220,32 @@ svg.vue-flow__connectionline {
222
220
  box-sizing: border-box;
223
221
  cursor: default;
224
222
  }
225
- .vue-flow__node.selectable {
223
+
224
+ .vue-flow__node.selectable {
226
225
  cursor: pointer;
227
226
  }
228
- .vue-flow__node.draggable {
227
+
228
+ .vue-flow__node.draggable {
229
229
  cursor: grab;
230
230
  pointer-events: all;
231
231
  }
232
- .vue-flow__node.draggable.dragging {
232
+
233
+ .vue-flow__node.draggable.dragging {
233
234
  cursor: grabbing;
234
235
  }
236
+
235
237
  .vue-flow__nodesselection {
236
238
  z-index: 3;
237
239
  transform-origin: left top;
238
240
  pointer-events: none;
239
241
  }
240
- .vue-flow__nodesselection-rect {
242
+
243
+ .vue-flow__nodesselection-rect {
241
244
  position: absolute;
242
245
  pointer-events: all;
243
246
  cursor: grab;
244
247
  }
248
+
245
249
  .vue-flow__handle {
246
250
  position: absolute;
247
251
  pointer-events: none;
@@ -253,81 +257,98 @@ svg.vue-flow__connectionline {
253
257
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
254
258
  border-radius: 100%;
255
259
  }
256
- .vue-flow__handle.connectingfrom {
260
+
261
+ .vue-flow__handle.connectingfrom {
257
262
  pointer-events: all;
258
263
  }
259
- .vue-flow__handle.connectionindicator {
264
+
265
+ .vue-flow__handle.connectionindicator {
260
266
  pointer-events: all;
261
267
  cursor: crosshair;
262
268
  }
263
- .vue-flow__handle-bottom {
269
+
270
+ .vue-flow__handle-bottom {
264
271
  top: auto;
265
272
  left: 50%;
266
273
  bottom: 0;
267
274
  transform: translate(-50%, 50%);
268
275
  }
269
- .vue-flow__handle-top {
276
+
277
+ .vue-flow__handle-top {
270
278
  top: 0;
271
279
  left: 50%;
272
280
  transform: translate(-50%, -50%);
273
281
  }
274
- .vue-flow__handle-left {
282
+
283
+ .vue-flow__handle-left {
275
284
  top: 50%;
276
285
  left: 0;
277
286
  transform: translate(-50%, -50%);
278
287
  }
279
- .vue-flow__handle-right {
288
+
289
+ .vue-flow__handle-right {
280
290
  top: 50%;
281
291
  right: 0;
282
292
  transform: translate(50%, -50%);
283
293
  }
294
+
284
295
  .vue-flow__edgeupdater {
285
296
  cursor: move;
286
297
  pointer-events: all;
287
298
  }
299
+
288
300
  .vue-flow__pane.selection .vue-flow__panel {
289
301
  pointer-events: none;
290
302
  }
303
+
291
304
  .vue-flow__panel {
292
305
  position: absolute;
293
306
  z-index: 5;
294
307
  margin: 15px;
295
308
  }
296
- .vue-flow__panel.top {
309
+
310
+ .vue-flow__panel.top {
297
311
  top: 0;
298
312
  }
299
- .vue-flow__panel.bottom {
313
+
314
+ .vue-flow__panel.bottom {
300
315
  bottom: 0;
301
316
  }
302
- .vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
317
+ .vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
303
318
  left: 50%;
304
319
  transform: translateX(-15px) translateX(-50%);
305
320
  }
306
- .vue-flow__panel.left {
321
+
322
+ .vue-flow__panel.left {
307
323
  left: 0;
308
324
  }
309
- .vue-flow__panel.right {
325
+
326
+ .vue-flow__panel.right {
310
327
  right: 0;
311
328
  }
312
- .vue-flow__panel.left.center, .vue-flow__panel.right.center {
329
+ .vue-flow__panel.left.center, .vue-flow__panel.right.center {
313
330
  top: 50%;
314
331
  transform: translateY(-15px) translateY(-50%);
315
332
  }
333
+
316
334
  .vue-flow__attribution {
317
335
  font-size: 10px;
318
336
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
319
337
  padding: 2px 3px;
320
338
  margin: 0;
321
339
  }
322
- .vue-flow__attribution a {
340
+
341
+ .vue-flow__attribution a {
323
342
  text-decoration: none;
324
343
  color: #999;
325
344
  }
345
+
326
346
  @keyframes dashdraw {
327
347
  from {
328
348
  stroke-dashoffset: 10;
329
349
  }
330
350
  }
351
+
331
352
  .vue-flow__edgelabel-renderer {
332
353
  position: absolute;
333
354
  width: 100%;
@@ -339,6 +360,7 @@ svg.vue-flow__connectionline {
339
360
  left: 0;
340
361
  top: 0;
341
362
  }
363
+
342
364
  .vue-flow__viewport-portal {
343
365
  position: absolute;
344
366
  width: 100%;
@@ -349,16 +371,19 @@ svg.vue-flow__connectionline {
349
371
  -moz-user-select: none;
350
372
  user-select: none;
351
373
  }
374
+
352
375
  .vue-flow__minimap {
353
376
  background: var(
354
377
  --xy-minimap-background-color-props,
355
378
  var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
356
379
  );
357
380
  }
358
- .vue-flow__minimap-svg {
381
+
382
+ .vue-flow__minimap-svg {
359
383
  display: block;
360
384
  }
361
- .vue-flow__minimap-mask {
385
+
386
+ .vue-flow__minimap-mask {
362
387
  fill: var(
363
388
  --xy-minimap-mask-background-color-props,
364
389
  var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
@@ -372,7 +397,8 @@ svg.vue-flow__connectionline {
372
397
  var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
373
398
  );
374
399
  }
375
- .vue-flow__minimap-node {
400
+
401
+ .vue-flow__minimap-node {
376
402
  fill: var(
377
403
  --xy-minimap-node-background-color-props,
378
404
  var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
@@ -386,33 +412,38 @@ svg.vue-flow__connectionline {
386
412
  var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
387
413
  );
388
414
  }
389
- .vue-flow__background-pattern.dots {
415
+ .vue-flow__background-pattern.dots {
390
416
  fill: var(
391
417
  --xy-background-pattern-color-props,
392
418
  var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
393
419
  );
394
420
  }
395
- .vue-flow__background-pattern.lines {
421
+
422
+ .vue-flow__background-pattern.lines {
396
423
  stroke: var(
397
424
  --xy-background-pattern-color-props,
398
425
  var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
399
426
  );
400
427
  }
401
- .vue-flow__background-pattern.cross {
428
+
429
+ .vue-flow__background-pattern.cross {
402
430
  stroke: var(
403
431
  --xy-background-pattern-color-props,
404
432
  var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
405
433
  );
406
434
  }
435
+
407
436
  .vue-flow__controls {
408
437
  display: flex;
409
438
  flex-direction: column;
410
439
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
411
440
  }
412
- .vue-flow__controls.horizontal {
441
+
442
+ .vue-flow__controls.horizontal {
413
443
  flex-direction: row;
414
444
  }
415
- .vue-flow__controls-button {
445
+
446
+ .vue-flow__controls-button {
416
447
  display: flex;
417
448
  justify-content: center;
418
449
  align-items: center;
@@ -435,22 +466,28 @@ svg.vue-flow__connectionline {
435
466
  -moz-user-select: none;
436
467
  user-select: none;
437
468
  }
438
- .vue-flow__controls-button svg {
469
+
470
+ .vue-flow__controls-button svg {
439
471
  width: 100%;
440
472
  max-width: 12px;
441
473
  max-height: 12px;
442
474
  fill: currentColor;
443
475
  }
444
- .vue-flow__edge.updating .vue-flow__edge-path {
476
+ }
477
+
478
+ @layer xyflow {
479
+ .vue-flow__edge.updating .vue-flow__edge-path {
445
480
  stroke: #777;
446
481
  }
447
- .vue-flow__edge-text {
482
+
483
+ .vue-flow__edge-text {
448
484
  font-size: 10px;
449
485
  }
450
- .vue-flow__node.selectable:focus,
486
+ .vue-flow__node.selectable:focus,
451
487
  .vue-flow__node.selectable:focus-visible {
452
488
  outline: none;
453
489
  }
490
+
454
491
  .vue-flow__node-input,
455
492
  .vue-flow__node-default,
456
493
  .vue-flow__node-output,
@@ -464,10 +501,11 @@ svg.vue-flow__connectionline {
464
501
  border: var(--xy-node-border, var(--xy-node-border-default));
465
502
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
466
503
  }
467
- .vue-flow__node-input.selectable:hover, .vue-flow__node-default.selectable:hover, .vue-flow__node-output.selectable:hover, .vue-flow__node-group.selectable:hover {
504
+ .vue-flow__node-input.selectable:hover, .vue-flow__node-default.selectable:hover, .vue-flow__node-output.selectable:hover, .vue-flow__node-group.selectable:hover {
468
505
  box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
469
506
  }
470
- .vue-flow__node-input.selectable.selected,
507
+
508
+ .vue-flow__node-input.selectable.selected,
471
509
  .vue-flow__node-input.selectable:focus,
472
510
  .vue-flow__node-input.selectable:focus-visible,
473
511
  .vue-flow__node-default.selectable.selected,
@@ -481,21 +519,25 @@ svg.vue-flow__connectionline {
481
519
  .vue-flow__node-group.selectable:focus-visible {
482
520
  box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
483
521
  }
522
+
484
523
  .vue-flow__node-group {
485
524
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
486
525
  }
526
+
487
527
  .vue-flow__nodesselection-rect,
488
528
  .vue-flow__selection {
489
529
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
490
530
  border: var(--xy-selection-border, var(--xy-selection-border-default));
491
531
  }
492
- .vue-flow__nodesselection-rect:focus,
532
+
533
+ .vue-flow__nodesselection-rect:focus,
493
534
  .vue-flow__nodesselection-rect:focus-visible,
494
535
  .vue-flow__selection:focus,
495
536
  .vue-flow__selection:focus-visible {
496
537
  outline: none;
497
538
  }
498
- .vue-flow__controls-button:hover {
539
+
540
+ .vue-flow__controls-button:hover {
499
541
  background: var(
500
542
  --xy-controls-button-background-color-hover-props,
501
543
  var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
@@ -505,16 +547,20 @@ svg.vue-flow__connectionline {
505
547
  var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
506
548
  );
507
549
  }
508
- .vue-flow__controls-button:disabled {
550
+
551
+ .vue-flow__controls-button:disabled {
509
552
  pointer-events: none;
510
553
  }
511
- .vue-flow__controls-button:disabled svg {
554
+
555
+ .vue-flow__controls-button:disabled svg {
512
556
  fill-opacity: 0.4;
513
557
  }
514
- .vue-flow__controls-button:last-child {
558
+
559
+ .vue-flow__controls-button:last-child {
515
560
  border-bottom: none;
516
561
  }
517
- .vue-flow__controls.horizontal .vue-flow__controls-button {
562
+
563
+ .vue-flow__controls.horizontal .vue-flow__controls-button {
518
564
  border-bottom: none;
519
565
  border-right: 1px solid
520
566
  var(
@@ -522,28 +568,38 @@ svg.vue-flow__connectionline {
522
568
  var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
523
569
  );
524
570
  }
525
- .vue-flow__controls.horizontal .vue-flow__controls-button:last-child {
571
+
572
+ .vue-flow__controls.horizontal .vue-flow__controls-button:last-child {
526
573
  border-right: none;
527
574
  }
575
+ }
576
+
577
+ @layer xyflow {
578
+
528
579
  .vue-flow__resize-control {
529
580
  position: absolute;
530
581
  }
582
+
531
583
  .vue-flow__resize-control.left,
532
584
  .vue-flow__resize-control.right {
533
585
  cursor: ew-resize;
534
586
  }
587
+
535
588
  .vue-flow__resize-control.top,
536
589
  .vue-flow__resize-control.bottom {
537
590
  cursor: ns-resize;
538
591
  }
592
+
539
593
  .vue-flow__resize-control.top.left,
540
594
  .vue-flow__resize-control.bottom.right {
541
595
  cursor: nwse-resize;
542
596
  }
597
+
543
598
  .vue-flow__resize-control.bottom.left,
544
599
  .vue-flow__resize-control.top.right {
545
600
  cursor: nesw-resize;
546
601
  }
602
+
547
603
  /* handle styles */
548
604
  .vue-flow__resize-control.handle {
549
605
  width: 5px;
@@ -553,6 +609,7 @@ svg.vue-flow__connectionline {
553
609
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
554
610
  translate: -50% -50%;
555
611
  }
612
+
556
613
  .vue-flow__resize-control.handle.left {
557
614
  left: 0;
558
615
  top: 50%;
@@ -581,12 +638,14 @@ svg.vue-flow__connectionline {
581
638
  .vue-flow__resize-control.handle.bottom.right {
582
639
  left: 100%;
583
640
  }
641
+
584
642
  /* line styles */
585
643
  .vue-flow__resize-control.line {
586
644
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
587
645
  border-width: 0;
588
646
  border-style: solid;
589
647
  }
648
+
590
649
  .vue-flow__resize-control.line.left,
591
650
  .vue-flow__resize-control.line.right {
592
651
  width: 1px;
@@ -594,14 +653,17 @@ svg.vue-flow__connectionline {
594
653
  top: 0;
595
654
  height: 100%;
596
655
  }
656
+
597
657
  .vue-flow__resize-control.line.left {
598
658
  left: 0;
599
659
  border-left-width: 1px;
600
660
  }
661
+
601
662
  .vue-flow__resize-control.line.right {
602
663
  left: 100%;
603
664
  border-right-width: 1px;
604
665
  }
666
+
605
667
  .vue-flow__resize-control.line.top,
606
668
  .vue-flow__resize-control.line.bottom {
607
669
  height: 1px;
@@ -609,26 +671,34 @@ svg.vue-flow__connectionline {
609
671
  left: 0;
610
672
  width: 100%;
611
673
  }
674
+
612
675
  .vue-flow__resize-control.line.top {
613
676
  top: 0;
614
677
  border-top-width: 1px;
615
678
  }
679
+
616
680
  .vue-flow__resize-control.line.bottom {
617
681
  border-bottom-width: 1px;
618
682
  top: 100%;
619
683
  }
620
- /* root container layout — @xyflow/system's CSS only declares vars + theme on `.vue-flow`; the framework
621
- owns the layout box (xyflow/react applies the equivalent inline). */
622
- .vue-flow {
623
- width: 100%;
624
- height: 100%;
625
- overflow: hidden;
626
- position: relative;
627
- z-index: 0;
628
684
  }
629
- .vue-flow__edge-textbg {
630
- fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
631
- }
632
- .vue-flow__edge-text {
633
- fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
685
+
686
+ @layer xyflow {
687
+ /* root container layout — @xyflow/system's CSS only declares vars + theme on `.vue-flow`; the framework
688
+ owns the layout box (xyflow/react applies the equivalent inline). */
689
+ .vue-flow {
690
+ width: 100%;
691
+ height: 100%;
692
+ overflow: hidden;
693
+ position: relative;
694
+ z-index: 0;
695
+ }
696
+
697
+ .vue-flow__edge-textbg {
698
+ fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
699
+ }
700
+
701
+ .vue-flow__edge-text {
702
+ fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
703
+ }
634
704
  }