@likec4/diagram 1.2.2 → 1.4.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 (69) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +27 -4
  3. package/dist/index.mjs +1543 -1346
  4. package/dist/state/DiagramContext.d.ts +2353 -264
  5. package/dist/state/diagramStore.d.ts +2360 -268
  6. package/dist/state/index.d.ts +0 -1
  7. package/dist/state/useDiagramStore.d.ts +3 -2534
  8. package/dist/state/useNavigationHistory.d.ts +5 -0
  9. package/dist/style.css +194 -131
  10. package/dist/theme.css.d.ts +5 -1
  11. package/dist/ui/BackwardForwardPanel.css.d.ts +1 -0
  12. package/dist/ui/BackwardForwardPanel.d.ts +1 -0
  13. package/dist/ui/DiagramTitlePanel.css.d.ts +1 -1
  14. package/dist/xyflow/XYFlow.d.ts +2 -1
  15. package/dist/xyflow/XYFlowEvents.d.ts +4 -4
  16. package/dist/xyflow/XYFlowInner.d.ts +2 -1
  17. package/dist/xyflow/const.d.ts +1 -1
  18. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  19. package/dist/xyflow/edges/RelationshipEdge.d.ts +4 -5
  20. package/dist/xyflow/edges/utils.d.ts +4 -2
  21. package/dist/xyflow/hooks/useXYFlow.d.ts +9 -9
  22. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +3 -1
  23. package/dist/xyflow/nodes/element/ElementNode.d.ts +1 -1
  24. package/dist/xyflow/nodes/element/element.css.d.ts +1 -0
  25. package/dist/xyflow/nodes/element/index.d.ts +1 -1
  26. package/dist/xyflow/types.d.ts +3 -3
  27. package/dist/xyflow/utils.d.ts +3 -0
  28. package/package.json +18 -17
  29. package/src/LikeC4Diagram.css.ts +15 -5
  30. package/src/LikeC4Diagram.props.ts +33 -5
  31. package/src/LikeC4Diagram.tsx +103 -32
  32. package/src/globals.css.ts +1 -2
  33. package/src/mantine/theme.ts +1 -0
  34. package/src/state/DiagramContext.tsx +3 -4
  35. package/src/state/diagramStore.ts +177 -103
  36. package/src/state/index.ts +0 -1
  37. package/src/state/useDiagramStore.ts +6 -13
  38. package/src/state/useNavigationHistory.ts +39 -0
  39. package/src/theme.css.ts +5 -1
  40. package/src/ui/BackwardForwardPanel.css.ts +22 -0
  41. package/src/ui/BackwardForwardPanel.tsx +59 -0
  42. package/src/ui/DiagramTitlePanel.css.ts +11 -5
  43. package/src/ui/DiagramTitlePanel.tsx +108 -96
  44. package/src/ui/DynamicViewWalkthrough.css.ts +3 -2
  45. package/src/ui/DynamicViewWalkthrough.tsx +36 -17
  46. package/src/ui/OptionsPanel.tsx +28 -19
  47. package/src/ui/options/NodeOptions.tsx +16 -19
  48. package/src/xyflow/FitviewOnDiagramChange.tsx +15 -23
  49. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +3 -6
  50. package/src/xyflow/SyncWithDiagram.tsx +21 -2
  51. package/src/xyflow/XYFlow.tsx +20 -23
  52. package/src/xyflow/XYFlowEvents.tsx +26 -8
  53. package/src/xyflow/XYFlowInner.tsx +10 -6
  54. package/src/xyflow/const.ts +1 -1
  55. package/src/xyflow/diagram-to-xyflow.ts +4 -41
  56. package/src/xyflow/edges/RelationshipEdge.tsx +160 -111
  57. package/src/xyflow/edges/edges.css.ts +41 -26
  58. package/src/xyflow/edges/utils.ts +5 -2
  59. package/src/xyflow/hooks/useLayoutConstraints.ts +19 -4
  60. package/src/xyflow/nodes/compound/CompoundNode.css.ts +45 -37
  61. package/src/xyflow/nodes/compound/CompoundNode.tsx +36 -26
  62. package/src/xyflow/nodes/element/ElementNode.tsx +27 -14
  63. package/src/xyflow/nodes/element/element.css.ts +31 -18
  64. package/src/xyflow/nodes/element/index.ts +1 -1
  65. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +7 -3
  66. package/src/xyflow/types.ts +5 -2
  67. package/src/xyflow/utils.ts +48 -0
  68. package/dist/ui/index.d.ts +0 -2
  69. package/src/ui/index.ts +0 -3
package/dist/state/DiagramContext.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { PropsWithChildren } from 'react';
2
- import { DiagramInitialState } from './diagramStore';
2
+ import { createDiagramStore, DiagramInitialState } from './diagramStore';
3
3
 
4
+ export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
4
5
  export declare const DiagramContext: import('react').Context<import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
5
6
  view: import('@likec4/core').DiagramView;
6
7
  readonly: boolean;
@@ -11,6 +12,8 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
11
12
  pannable: boolean;
12
13
  nodesDraggable: boolean;
13
14
  nodesSelectable: boolean;
15
+ experimentalEdgeEditing: boolean;
16
+ viewSyncDebounceTimeout: number | null;
14
17
  xyflow: import('..').XYFlowInstance;
15
18
  initialized: boolean;
16
19
  xyflowSynced: boolean;
@@ -26,7 +29,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
26
29
  fromView: import('@likec4/core').ViewID;
27
30
  toView: import('@likec4/core').ViewID;
28
31
  element: import('@likec4/core').DiagramNode;
29
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
32
+ elementScreenPosition: import('@xyflow/system').XYPosition;
30
33
  positionCorrected: boolean;
31
34
  } | null;
32
35
  viewportChanged: boolean;
@@ -48,7 +51,237 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
48
51
  setLastClickedEdge: (edgeId: string | null) => void;
49
52
  resetLastClicked: () => void;
50
53
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
51
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
54
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
55
+ cancelSaveManualLayout: () => void;
56
+ triggerSaveManualLayout: (xystore: {
57
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
58
+ source: string;
59
+ target: string;
60
+ sourceHandle?: string | null;
61
+ targetHandle?: string | null;
62
+ animated?: boolean;
63
+ hidden?: boolean;
64
+ deletable?: boolean;
65
+ selectable?: boolean;
66
+ selected?: boolean;
67
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
68
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
69
+ zIndex?: number;
70
+ ariaLabel?: string;
71
+ interactionWidth?: number;
72
+ label?: import('react').ReactNode;
73
+ labelStyle?: import('react').CSSProperties;
74
+ labelShowBg?: boolean;
75
+ labelBgStyle?: import('react').CSSProperties;
76
+ labelBgPadding?: [number, number];
77
+ labelBgBorderRadius?: number;
78
+ style?: import('react').CSSProperties;
79
+ className?: string;
80
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
81
+ focusable?: boolean;
82
+ data: import('..').RelationshipData;
83
+ readonly id: string;
84
+ readonly type: "relationship";
85
+ }>;
86
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
87
+ source: string;
88
+ target: string;
89
+ sourceHandle?: string | null;
90
+ targetHandle?: string | null;
91
+ animated?: boolean;
92
+ hidden?: boolean;
93
+ deletable?: boolean;
94
+ selectable?: boolean;
95
+ selected?: boolean;
96
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
97
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
98
+ zIndex?: number;
99
+ ariaLabel?: string;
100
+ interactionWidth?: number;
101
+ label?: import('react').ReactNode;
102
+ labelStyle?: import('react').CSSProperties;
103
+ labelShowBg?: boolean;
104
+ labelBgStyle?: import('react').CSSProperties;
105
+ labelBgPadding?: [number, number];
106
+ labelBgBorderRadius?: number;
107
+ style?: import('react').CSSProperties;
108
+ className?: string;
109
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
110
+ focusable?: boolean;
111
+ data: import('..').RelationshipData;
112
+ readonly id: string;
113
+ readonly type: "relationship";
114
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
115
+ source: string;
116
+ target: string;
117
+ sourceHandle?: string | null;
118
+ targetHandle?: string | null;
119
+ animated?: boolean;
120
+ hidden?: boolean;
121
+ deletable?: boolean;
122
+ selectable?: boolean;
123
+ selected?: boolean;
124
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
125
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
126
+ zIndex?: number;
127
+ ariaLabel?: string;
128
+ interactionWidth?: number;
129
+ label?: import('react').ReactNode;
130
+ labelStyle?: import('react').CSSProperties;
131
+ labelShowBg?: boolean;
132
+ labelBgStyle?: import('react').CSSProperties;
133
+ labelBgPadding?: [number, number];
134
+ labelBgBorderRadius?: number;
135
+ style?: import('react').CSSProperties;
136
+ className?: string;
137
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
138
+ focusable?: boolean;
139
+ data: import('..').RelationshipData;
140
+ readonly id: string;
141
+ readonly type: "relationship";
142
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
143
+ source: string;
144
+ target: string;
145
+ sourceHandle?: string | null;
146
+ targetHandle?: string | null;
147
+ animated?: boolean;
148
+ hidden?: boolean;
149
+ deletable?: boolean;
150
+ selectable?: boolean;
151
+ selected?: boolean;
152
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
153
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
154
+ zIndex?: number;
155
+ ariaLabel?: string;
156
+ interactionWidth?: number;
157
+ label?: import('react').ReactNode;
158
+ labelStyle?: import('react').CSSProperties;
159
+ labelShowBg?: boolean;
160
+ labelBgStyle?: import('react').CSSProperties;
161
+ labelBgPadding?: [number, number];
162
+ labelBgBorderRadius?: number;
163
+ style?: import('react').CSSProperties;
164
+ className?: string;
165
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
166
+ focusable?: boolean;
167
+ data: import('..').RelationshipData;
168
+ readonly id: string;
169
+ readonly type: "relationship";
170
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
171
+ source: string;
172
+ target: string;
173
+ sourceHandle?: string | null;
174
+ targetHandle?: string | null;
175
+ animated?: boolean;
176
+ hidden?: boolean;
177
+ deletable?: boolean;
178
+ selectable?: boolean;
179
+ selected?: boolean;
180
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
181
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
182
+ zIndex?: number;
183
+ ariaLabel?: string;
184
+ interactionWidth?: number;
185
+ label?: import('react').ReactNode;
186
+ labelStyle?: import('react').CSSProperties;
187
+ labelShowBg?: boolean;
188
+ labelBgStyle?: import('react').CSSProperties;
189
+ labelBgPadding?: [number, number];
190
+ labelBgBorderRadius?: number;
191
+ style?: import('react').CSSProperties;
192
+ className?: string;
193
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
194
+ focusable?: boolean;
195
+ data: import('..').RelationshipData;
196
+ readonly id: string;
197
+ readonly type: "relationship";
198
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
199
+ source: string;
200
+ target: string;
201
+ sourceHandle?: string | null;
202
+ targetHandle?: string | null;
203
+ animated?: boolean;
204
+ hidden?: boolean;
205
+ deletable?: boolean;
206
+ selectable?: boolean;
207
+ selected?: boolean;
208
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
209
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
210
+ zIndex?: number;
211
+ ariaLabel?: string;
212
+ interactionWidth?: number;
213
+ label?: import('react').ReactNode;
214
+ labelStyle?: import('react').CSSProperties;
215
+ labelShowBg?: boolean;
216
+ labelBgStyle?: import('react').CSSProperties;
217
+ labelBgPadding?: [number, number];
218
+ labelBgBorderRadius?: number;
219
+ style?: import('react').CSSProperties;
220
+ className?: string;
221
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
222
+ focusable?: boolean;
223
+ data: import('..').RelationshipData;
224
+ readonly id: string;
225
+ readonly type: "relationship";
226
+ }>>), replace?: boolean | undefined) => void;
227
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
228
+ source: string;
229
+ target: string;
230
+ sourceHandle?: string | null;
231
+ targetHandle?: string | null;
232
+ animated?: boolean;
233
+ hidden?: boolean;
234
+ deletable?: boolean;
235
+ selectable?: boolean;
236
+ selected?: boolean;
237
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
238
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
239
+ zIndex?: number;
240
+ ariaLabel?: string;
241
+ interactionWidth?: number;
242
+ label?: import('react').ReactNode;
243
+ labelStyle?: import('react').CSSProperties;
244
+ labelShowBg?: boolean;
245
+ labelBgStyle?: import('react').CSSProperties;
246
+ labelBgPadding?: [number, number];
247
+ labelBgBorderRadius?: number;
248
+ style?: import('react').CSSProperties;
249
+ className?: string;
250
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
251
+ focusable?: boolean;
252
+ data: import('..').RelationshipData;
253
+ readonly id: string;
254
+ readonly type: "relationship";
255
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
256
+ source: string;
257
+ target: string;
258
+ sourceHandle?: string | null;
259
+ targetHandle?: string | null;
260
+ animated?: boolean;
261
+ hidden?: boolean;
262
+ deletable?: boolean;
263
+ selectable?: boolean;
264
+ selected?: boolean;
265
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
266
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
267
+ zIndex?: number;
268
+ ariaLabel?: string;
269
+ interactionWidth?: number;
270
+ label?: import('react').ReactNode;
271
+ labelStyle?: import('react').CSSProperties;
272
+ labelShowBg?: boolean;
273
+ labelBgStyle?: import('react').CSSProperties;
274
+ labelBgPadding?: [number, number];
275
+ labelBgBorderRadius?: number;
276
+ style?: import('react').CSSProperties;
277
+ className?: string;
278
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
279
+ focusable?: boolean;
280
+ data: import('..').RelationshipData;
281
+ readonly id: string;
282
+ readonly type: "relationship";
283
+ }>) => void) => () => void;
284
+ }) => void;
52
285
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
53
286
  fitDiagram: (xyStore: {
54
287
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -74,7 +307,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
74
307
  labelBgBorderRadius?: number;
75
308
  style?: import('react').CSSProperties;
76
309
  className?: string;
77
- updatable?: import('@xyflow/react').EdgeUpdatable;
310
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
78
311
  focusable?: boolean;
79
312
  data: import('..').RelationshipData;
80
313
  readonly id: string;
@@ -103,7 +336,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
103
336
  labelBgBorderRadius?: number;
104
337
  style?: import('react').CSSProperties;
105
338
  className?: string;
106
- updatable?: import('@xyflow/react').EdgeUpdatable;
339
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
107
340
  focusable?: boolean;
108
341
  data: import('..').RelationshipData;
109
342
  readonly id: string;
@@ -131,7 +364,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
131
364
  labelBgBorderRadius?: number;
132
365
  style?: import('react').CSSProperties;
133
366
  className?: string;
134
- updatable?: import('@xyflow/react').EdgeUpdatable;
367
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
135
368
  focusable?: boolean;
136
369
  data: import('..').RelationshipData;
137
370
  readonly id: string;
@@ -159,7 +392,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
159
392
  labelBgBorderRadius?: number;
160
393
  style?: import('react').CSSProperties;
161
394
  className?: string;
162
- updatable?: import('@xyflow/react').EdgeUpdatable;
395
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
163
396
  focusable?: boolean;
164
397
  data: import('..').RelationshipData;
165
398
  readonly id: string;
@@ -187,7 +420,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
187
420
  labelBgBorderRadius?: number;
188
421
  style?: import('react').CSSProperties;
189
422
  className?: string;
190
- updatable?: import('@xyflow/react').EdgeUpdatable;
423
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
191
424
  focusable?: boolean;
192
425
  data: import('..').RelationshipData;
193
426
  readonly id: string;
@@ -215,7 +448,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
215
448
  labelBgBorderRadius?: number;
216
449
  style?: import('react').CSSProperties;
217
450
  className?: string;
218
- updatable?: import('@xyflow/react').EdgeUpdatable;
451
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
219
452
  focusable?: boolean;
220
453
  data: import('..').RelationshipData;
221
454
  readonly id: string;
@@ -244,7 +477,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
244
477
  labelBgBorderRadius?: number;
245
478
  style?: import('react').CSSProperties;
246
479
  className?: string;
247
- updatable?: import('@xyflow/react').EdgeUpdatable;
480
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
248
481
  focusable?: boolean;
249
482
  data: import('..').RelationshipData;
250
483
  readonly id: string;
@@ -272,7 +505,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
272
505
  labelBgBorderRadius?: number;
273
506
  style?: import('react').CSSProperties;
274
507
  className?: string;
275
- updatable?: import('@xyflow/react').EdgeUpdatable;
508
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
276
509
  focusable?: boolean;
277
510
  data: import('..').RelationshipData;
278
511
  readonly id: string;
@@ -293,6 +526,8 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
293
526
  pannable: boolean;
294
527
  nodesDraggable: boolean;
295
528
  nodesSelectable: boolean;
529
+ experimentalEdgeEditing: boolean;
530
+ viewSyncDebounceTimeout: number | null;
296
531
  xyflow: import('..').XYFlowInstance;
297
532
  initialized: boolean;
298
533
  xyflowSynced: boolean;
@@ -308,7 +543,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
308
543
  fromView: import('@likec4/core').ViewID;
309
544
  toView: import('@likec4/core').ViewID;
310
545
  element: import('@likec4/core').DiagramNode;
311
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
546
+ elementScreenPosition: import('@xyflow/system').XYPosition;
312
547
  positionCorrected: boolean;
313
548
  } | null;
314
549
  viewportChanged: boolean;
@@ -330,9 +565,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
330
565
  setLastClickedEdge: (edgeId: string | null) => void;
331
566
  resetLastClicked: () => void;
332
567
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
333
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
334
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
335
- fitDiagram: (xyStore: {
568
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
569
+ cancelSaveManualLayout: () => void;
570
+ triggerSaveManualLayout: (xystore: {
336
571
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
337
572
  source: string;
338
573
  target: string;
@@ -356,7 +591,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
356
591
  labelBgBorderRadius?: number;
357
592
  style?: import('react').CSSProperties;
358
593
  className?: string;
359
- updatable?: import('@xyflow/react').EdgeUpdatable;
594
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
360
595
  focusable?: boolean;
361
596
  data: import('..').RelationshipData;
362
597
  readonly id: string;
@@ -385,7 +620,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
385
620
  labelBgBorderRadius?: number;
386
621
  style?: import('react').CSSProperties;
387
622
  className?: string;
388
- updatable?: import('@xyflow/react').EdgeUpdatable;
623
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
389
624
  focusable?: boolean;
390
625
  data: import('..').RelationshipData;
391
626
  readonly id: string;
@@ -413,7 +648,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
413
648
  labelBgBorderRadius?: number;
414
649
  style?: import('react').CSSProperties;
415
650
  className?: string;
416
- updatable?: import('@xyflow/react').EdgeUpdatable;
651
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
417
652
  focusable?: boolean;
418
653
  data: import('..').RelationshipData;
419
654
  readonly id: string;
@@ -441,7 +676,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
441
676
  labelBgBorderRadius?: number;
442
677
  style?: import('react').CSSProperties;
443
678
  className?: string;
444
- updatable?: import('@xyflow/react').EdgeUpdatable;
679
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
445
680
  focusable?: boolean;
446
681
  data: import('..').RelationshipData;
447
682
  readonly id: string;
@@ -469,7 +704,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
469
704
  labelBgBorderRadius?: number;
470
705
  style?: import('react').CSSProperties;
471
706
  className?: string;
472
- updatable?: import('@xyflow/react').EdgeUpdatable;
707
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
473
708
  focusable?: boolean;
474
709
  data: import('..').RelationshipData;
475
710
  readonly id: string;
@@ -497,7 +732,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
497
732
  labelBgBorderRadius?: number;
498
733
  style?: import('react').CSSProperties;
499
734
  className?: string;
500
- updatable?: import('@xyflow/react').EdgeUpdatable;
735
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
501
736
  focusable?: boolean;
502
737
  data: import('..').RelationshipData;
503
738
  readonly id: string;
@@ -526,7 +761,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
526
761
  labelBgBorderRadius?: number;
527
762
  style?: import('react').CSSProperties;
528
763
  className?: string;
529
- updatable?: import('@xyflow/react').EdgeUpdatable;
764
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
530
765
  focusable?: boolean;
531
766
  data: import('..').RelationshipData;
532
767
  readonly id: string;
@@ -554,63 +789,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
554
789
  labelBgBorderRadius?: number;
555
790
  style?: import('react').CSSProperties;
556
791
  className?: string;
557
- updatable?: import('@xyflow/react').EdgeUpdatable;
792
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
558
793
  focusable?: boolean;
559
794
  data: import('..').RelationshipData;
560
795
  readonly id: string;
561
796
  readonly type: "relationship";
562
797
  }>) => void) => () => void;
563
798
  }) => void;
564
- nextDynamicStep: (increment?: number | undefined) => void;
565
- stopDynamicView: () => void;
566
- }, previousSelectedState: {
567
- view: import('@likec4/core').DiagramView;
568
- readonly: boolean;
569
- showElementLinks: boolean;
570
- fitViewEnabled: boolean;
571
- fitViewPadding: number;
572
- zoomable: boolean;
573
- pannable: boolean;
574
- nodesDraggable: boolean;
575
- nodesSelectable: boolean;
576
- xyflow: import('..').XYFlowInstance;
577
- initialized: boolean;
578
- xyflowSynced: boolean;
579
- activeDynamicViewStep: number | null;
580
- lastClickedNodeId: string | null;
581
- lastClickedEdgeId: string | null;
582
- focusedNodeId: string | null;
583
- hoveredNodeId: string | null;
584
- hoveredEdgeId: string | null;
585
- dimmed: ReadonlySet<string>;
586
- previousViews: import('@likec4/core').DiagramView[];
587
- lastOnNavigate: {
588
- fromView: import('@likec4/core').ViewID;
589
- toView: import('@likec4/core').ViewID;
590
- element: import('@likec4/core').DiagramNode;
591
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
592
- positionCorrected: boolean;
593
- } | null;
594
- viewportChanged: boolean;
595
- onChange: import('..').OnChange | null | undefined;
596
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
597
- onNodeClick: import('..').OnNodeClick | null | undefined;
598
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
599
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
600
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
601
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
602
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
603
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
604
- isDynamicView: () => boolean;
605
- updateView: (view: import('@likec4/core').DiagramView) => void;
606
- focusOnNode: (nodeId: string) => void;
607
- setHoveredNode: (nodeId: string | null) => void;
608
- setHoveredEdge: (edgeId: string | null) => void;
609
- setLastClickedNode: (nodeId: string | null) => void;
610
- setLastClickedEdge: (edgeId: string | null) => void;
611
- resetLastClicked: () => void;
612
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
613
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
614
799
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
615
800
  fitDiagram: (xyStore: {
616
801
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -636,7 +821,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
636
821
  labelBgBorderRadius?: number;
637
822
  style?: import('react').CSSProperties;
638
823
  className?: string;
639
- updatable?: import('@xyflow/react').EdgeUpdatable;
824
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
640
825
  focusable?: boolean;
641
826
  data: import('..').RelationshipData;
642
827
  readonly id: string;
@@ -665,7 +850,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
665
850
  labelBgBorderRadius?: number;
666
851
  style?: import('react').CSSProperties;
667
852
  className?: string;
668
- updatable?: import('@xyflow/react').EdgeUpdatable;
853
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
669
854
  focusable?: boolean;
670
855
  data: import('..').RelationshipData;
671
856
  readonly id: string;
@@ -693,7 +878,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
693
878
  labelBgBorderRadius?: number;
694
879
  style?: import('react').CSSProperties;
695
880
  className?: string;
696
- updatable?: import('@xyflow/react').EdgeUpdatable;
881
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
697
882
  focusable?: boolean;
698
883
  data: import('..').RelationshipData;
699
884
  readonly id: string;
@@ -721,7 +906,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
721
906
  labelBgBorderRadius?: number;
722
907
  style?: import('react').CSSProperties;
723
908
  className?: string;
724
- updatable?: import('@xyflow/react').EdgeUpdatable;
909
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
725
910
  focusable?: boolean;
726
911
  data: import('..').RelationshipData;
727
912
  readonly id: string;
@@ -749,7 +934,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
749
934
  labelBgBorderRadius?: number;
750
935
  style?: import('react').CSSProperties;
751
936
  className?: string;
752
- updatable?: import('@xyflow/react').EdgeUpdatable;
937
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
753
938
  focusable?: boolean;
754
939
  data: import('..').RelationshipData;
755
940
  readonly id: string;
@@ -777,7 +962,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
777
962
  labelBgBorderRadius?: number;
778
963
  style?: import('react').CSSProperties;
779
964
  className?: string;
780
- updatable?: import('@xyflow/react').EdgeUpdatable;
965
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
781
966
  focusable?: boolean;
782
967
  data: import('..').RelationshipData;
783
968
  readonly id: string;
@@ -806,7 +991,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
806
991
  labelBgBorderRadius?: number;
807
992
  style?: import('react').CSSProperties;
808
993
  className?: string;
809
- updatable?: import('@xyflow/react').EdgeUpdatable;
994
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
810
995
  focusable?: boolean;
811
996
  data: import('..').RelationshipData;
812
997
  readonly id: string;
@@ -834,7 +1019,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
834
1019
  labelBgBorderRadius?: number;
835
1020
  style?: import('react').CSSProperties;
836
1021
  className?: string;
837
- updatable?: import('@xyflow/react').EdgeUpdatable;
1022
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
838
1023
  focusable?: boolean;
839
1024
  data: import('..').RelationshipData;
840
1025
  readonly id: string;
@@ -843,8 +1028,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
843
1028
  }) => void;
844
1029
  nextDynamicStep: (increment?: number | undefined) => void;
845
1030
  stopDynamicView: () => void;
846
- }) => void): () => void;
847
- <U>(selector: (state: {
1031
+ }, previousSelectedState: {
848
1032
  view: import('@likec4/core').DiagramView;
849
1033
  readonly: boolean;
850
1034
  showElementLinks: boolean;
@@ -854,6 +1038,8 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
854
1038
  pannable: boolean;
855
1039
  nodesDraggable: boolean;
856
1040
  nodesSelectable: boolean;
1041
+ experimentalEdgeEditing: boolean;
1042
+ viewSyncDebounceTimeout: number | null;
857
1043
  xyflow: import('..').XYFlowInstance;
858
1044
  initialized: boolean;
859
1045
  xyflowSynced: boolean;
@@ -869,7 +1055,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
869
1055
  fromView: import('@likec4/core').ViewID;
870
1056
  toView: import('@likec4/core').ViewID;
871
1057
  element: import('@likec4/core').DiagramNode;
872
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
1058
+ elementScreenPosition: import('@xyflow/system').XYPosition;
873
1059
  positionCorrected: boolean;
874
1060
  } | null;
875
1061
  viewportChanged: boolean;
@@ -891,7 +1077,237 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
891
1077
  setLastClickedEdge: (edgeId: string | null) => void;
892
1078
  resetLastClicked: () => void;
893
1079
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
894
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1080
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1081
+ cancelSaveManualLayout: () => void;
1082
+ triggerSaveManualLayout: (xystore: {
1083
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1084
+ source: string;
1085
+ target: string;
1086
+ sourceHandle?: string | null;
1087
+ targetHandle?: string | null;
1088
+ animated?: boolean;
1089
+ hidden?: boolean;
1090
+ deletable?: boolean;
1091
+ selectable?: boolean;
1092
+ selected?: boolean;
1093
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1094
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1095
+ zIndex?: number;
1096
+ ariaLabel?: string;
1097
+ interactionWidth?: number;
1098
+ label?: import('react').ReactNode;
1099
+ labelStyle?: import('react').CSSProperties;
1100
+ labelShowBg?: boolean;
1101
+ labelBgStyle?: import('react').CSSProperties;
1102
+ labelBgPadding?: [number, number];
1103
+ labelBgBorderRadius?: number;
1104
+ style?: import('react').CSSProperties;
1105
+ className?: string;
1106
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1107
+ focusable?: boolean;
1108
+ data: import('..').RelationshipData;
1109
+ readonly id: string;
1110
+ readonly type: "relationship";
1111
+ }>;
1112
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1113
+ source: string;
1114
+ target: string;
1115
+ sourceHandle?: string | null;
1116
+ targetHandle?: string | null;
1117
+ animated?: boolean;
1118
+ hidden?: boolean;
1119
+ deletable?: boolean;
1120
+ selectable?: boolean;
1121
+ selected?: boolean;
1122
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1123
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1124
+ zIndex?: number;
1125
+ ariaLabel?: string;
1126
+ interactionWidth?: number;
1127
+ label?: import('react').ReactNode;
1128
+ labelStyle?: import('react').CSSProperties;
1129
+ labelShowBg?: boolean;
1130
+ labelBgStyle?: import('react').CSSProperties;
1131
+ labelBgPadding?: [number, number];
1132
+ labelBgBorderRadius?: number;
1133
+ style?: import('react').CSSProperties;
1134
+ className?: string;
1135
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1136
+ focusable?: boolean;
1137
+ data: import('..').RelationshipData;
1138
+ readonly id: string;
1139
+ readonly type: "relationship";
1140
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1141
+ source: string;
1142
+ target: string;
1143
+ sourceHandle?: string | null;
1144
+ targetHandle?: string | null;
1145
+ animated?: boolean;
1146
+ hidden?: boolean;
1147
+ deletable?: boolean;
1148
+ selectable?: boolean;
1149
+ selected?: boolean;
1150
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1151
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1152
+ zIndex?: number;
1153
+ ariaLabel?: string;
1154
+ interactionWidth?: number;
1155
+ label?: import('react').ReactNode;
1156
+ labelStyle?: import('react').CSSProperties;
1157
+ labelShowBg?: boolean;
1158
+ labelBgStyle?: import('react').CSSProperties;
1159
+ labelBgPadding?: [number, number];
1160
+ labelBgBorderRadius?: number;
1161
+ style?: import('react').CSSProperties;
1162
+ className?: string;
1163
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1164
+ focusable?: boolean;
1165
+ data: import('..').RelationshipData;
1166
+ readonly id: string;
1167
+ readonly type: "relationship";
1168
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1169
+ source: string;
1170
+ target: string;
1171
+ sourceHandle?: string | null;
1172
+ targetHandle?: string | null;
1173
+ animated?: boolean;
1174
+ hidden?: boolean;
1175
+ deletable?: boolean;
1176
+ selectable?: boolean;
1177
+ selected?: boolean;
1178
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1179
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1180
+ zIndex?: number;
1181
+ ariaLabel?: string;
1182
+ interactionWidth?: number;
1183
+ label?: import('react').ReactNode;
1184
+ labelStyle?: import('react').CSSProperties;
1185
+ labelShowBg?: boolean;
1186
+ labelBgStyle?: import('react').CSSProperties;
1187
+ labelBgPadding?: [number, number];
1188
+ labelBgBorderRadius?: number;
1189
+ style?: import('react').CSSProperties;
1190
+ className?: string;
1191
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1192
+ focusable?: boolean;
1193
+ data: import('..').RelationshipData;
1194
+ readonly id: string;
1195
+ readonly type: "relationship";
1196
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1197
+ source: string;
1198
+ target: string;
1199
+ sourceHandle?: string | null;
1200
+ targetHandle?: string | null;
1201
+ animated?: boolean;
1202
+ hidden?: boolean;
1203
+ deletable?: boolean;
1204
+ selectable?: boolean;
1205
+ selected?: boolean;
1206
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1207
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1208
+ zIndex?: number;
1209
+ ariaLabel?: string;
1210
+ interactionWidth?: number;
1211
+ label?: import('react').ReactNode;
1212
+ labelStyle?: import('react').CSSProperties;
1213
+ labelShowBg?: boolean;
1214
+ labelBgStyle?: import('react').CSSProperties;
1215
+ labelBgPadding?: [number, number];
1216
+ labelBgBorderRadius?: number;
1217
+ style?: import('react').CSSProperties;
1218
+ className?: string;
1219
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1220
+ focusable?: boolean;
1221
+ data: import('..').RelationshipData;
1222
+ readonly id: string;
1223
+ readonly type: "relationship";
1224
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1225
+ source: string;
1226
+ target: string;
1227
+ sourceHandle?: string | null;
1228
+ targetHandle?: string | null;
1229
+ animated?: boolean;
1230
+ hidden?: boolean;
1231
+ deletable?: boolean;
1232
+ selectable?: boolean;
1233
+ selected?: boolean;
1234
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1235
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1236
+ zIndex?: number;
1237
+ ariaLabel?: string;
1238
+ interactionWidth?: number;
1239
+ label?: import('react').ReactNode;
1240
+ labelStyle?: import('react').CSSProperties;
1241
+ labelShowBg?: boolean;
1242
+ labelBgStyle?: import('react').CSSProperties;
1243
+ labelBgPadding?: [number, number];
1244
+ labelBgBorderRadius?: number;
1245
+ style?: import('react').CSSProperties;
1246
+ className?: string;
1247
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1248
+ focusable?: boolean;
1249
+ data: import('..').RelationshipData;
1250
+ readonly id: string;
1251
+ readonly type: "relationship";
1252
+ }>>), replace?: boolean | undefined) => void;
1253
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1254
+ source: string;
1255
+ target: string;
1256
+ sourceHandle?: string | null;
1257
+ targetHandle?: string | null;
1258
+ animated?: boolean;
1259
+ hidden?: boolean;
1260
+ deletable?: boolean;
1261
+ selectable?: boolean;
1262
+ selected?: boolean;
1263
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1264
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1265
+ zIndex?: number;
1266
+ ariaLabel?: string;
1267
+ interactionWidth?: number;
1268
+ label?: import('react').ReactNode;
1269
+ labelStyle?: import('react').CSSProperties;
1270
+ labelShowBg?: boolean;
1271
+ labelBgStyle?: import('react').CSSProperties;
1272
+ labelBgPadding?: [number, number];
1273
+ labelBgBorderRadius?: number;
1274
+ style?: import('react').CSSProperties;
1275
+ className?: string;
1276
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1277
+ focusable?: boolean;
1278
+ data: import('..').RelationshipData;
1279
+ readonly id: string;
1280
+ readonly type: "relationship";
1281
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1282
+ source: string;
1283
+ target: string;
1284
+ sourceHandle?: string | null;
1285
+ targetHandle?: string | null;
1286
+ animated?: boolean;
1287
+ hidden?: boolean;
1288
+ deletable?: boolean;
1289
+ selectable?: boolean;
1290
+ selected?: boolean;
1291
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1292
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1293
+ zIndex?: number;
1294
+ ariaLabel?: string;
1295
+ interactionWidth?: number;
1296
+ label?: import('react').ReactNode;
1297
+ labelStyle?: import('react').CSSProperties;
1298
+ labelShowBg?: boolean;
1299
+ labelBgStyle?: import('react').CSSProperties;
1300
+ labelBgPadding?: [number, number];
1301
+ labelBgBorderRadius?: number;
1302
+ style?: import('react').CSSProperties;
1303
+ className?: string;
1304
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1305
+ focusable?: boolean;
1306
+ data: import('..').RelationshipData;
1307
+ readonly id: string;
1308
+ readonly type: "relationship";
1309
+ }>) => void) => () => void;
1310
+ }) => void;
895
1311
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
896
1312
  fitDiagram: (xyStore: {
897
1313
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -917,7 +1333,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
917
1333
  labelBgBorderRadius?: number;
918
1334
  style?: import('react').CSSProperties;
919
1335
  className?: string;
920
- updatable?: import('@xyflow/react').EdgeUpdatable;
1336
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
921
1337
  focusable?: boolean;
922
1338
  data: import('..').RelationshipData;
923
1339
  readonly id: string;
@@ -946,7 +1362,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
946
1362
  labelBgBorderRadius?: number;
947
1363
  style?: import('react').CSSProperties;
948
1364
  className?: string;
949
- updatable?: import('@xyflow/react').EdgeUpdatable;
1365
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
950
1366
  focusable?: boolean;
951
1367
  data: import('..').RelationshipData;
952
1368
  readonly id: string;
@@ -974,7 +1390,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
974
1390
  labelBgBorderRadius?: number;
975
1391
  style?: import('react').CSSProperties;
976
1392
  className?: string;
977
- updatable?: import('@xyflow/react').EdgeUpdatable;
1393
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
978
1394
  focusable?: boolean;
979
1395
  data: import('..').RelationshipData;
980
1396
  readonly id: string;
@@ -1002,7 +1418,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1002
1418
  labelBgBorderRadius?: number;
1003
1419
  style?: import('react').CSSProperties;
1004
1420
  className?: string;
1005
- updatable?: import('@xyflow/react').EdgeUpdatable;
1421
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1006
1422
  focusable?: boolean;
1007
1423
  data: import('..').RelationshipData;
1008
1424
  readonly id: string;
@@ -1030,7 +1446,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1030
1446
  labelBgBorderRadius?: number;
1031
1447
  style?: import('react').CSSProperties;
1032
1448
  className?: string;
1033
- updatable?: import('@xyflow/react').EdgeUpdatable;
1449
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1034
1450
  focusable?: boolean;
1035
1451
  data: import('..').RelationshipData;
1036
1452
  readonly id: string;
@@ -1058,7 +1474,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1058
1474
  labelBgBorderRadius?: number;
1059
1475
  style?: import('react').CSSProperties;
1060
1476
  className?: string;
1061
- updatable?: import('@xyflow/react').EdgeUpdatable;
1477
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1062
1478
  focusable?: boolean;
1063
1479
  data: import('..').RelationshipData;
1064
1480
  readonly id: string;
@@ -1087,7 +1503,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1087
1503
  labelBgBorderRadius?: number;
1088
1504
  style?: import('react').CSSProperties;
1089
1505
  className?: string;
1090
- updatable?: import('@xyflow/react').EdgeUpdatable;
1506
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1091
1507
  focusable?: boolean;
1092
1508
  data: import('..').RelationshipData;
1093
1509
  readonly id: string;
@@ -1115,7 +1531,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1115
1531
  labelBgBorderRadius?: number;
1116
1532
  style?: import('react').CSSProperties;
1117
1533
  className?: string;
1118
- updatable?: import('@xyflow/react').EdgeUpdatable;
1534
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1119
1535
  focusable?: boolean;
1120
1536
  data: import('..').RelationshipData;
1121
1537
  readonly id: string;
@@ -1124,25 +1540,1564 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1124
1540
  }) => void;
1125
1541
  nextDynamicStep: (increment?: number | undefined) => void;
1126
1542
  stopDynamicView: () => void;
1127
- }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
1128
- equalityFn?: (a: U, b: U) => boolean;
1129
- fireImmediately?: boolean;
1130
- } | undefined): () => void;
1131
- };
1132
- }, "setState"> & {
1133
- setState<A extends string | {
1134
- type: string;
1135
- }>(partial: {
1136
- view: import('@likec4/core').DiagramView;
1137
- readonly: boolean;
1138
- showElementLinks: boolean;
1139
- fitViewEnabled: boolean;
1140
- fitViewPadding: number;
1141
- zoomable: boolean;
1142
- pannable: boolean;
1143
- nodesDraggable: boolean;
1144
- nodesSelectable: boolean;
1145
- xyflow: import('..').XYFlowInstance;
1543
+ }) => void): () => void;
1544
+ <U>(selector: (state: {
1545
+ view: import('@likec4/core').DiagramView;
1546
+ readonly: boolean;
1547
+ showElementLinks: boolean;
1548
+ fitViewEnabled: boolean;
1549
+ fitViewPadding: number;
1550
+ zoomable: boolean;
1551
+ pannable: boolean;
1552
+ nodesDraggable: boolean;
1553
+ nodesSelectable: boolean;
1554
+ experimentalEdgeEditing: boolean;
1555
+ viewSyncDebounceTimeout: number | null;
1556
+ xyflow: import('..').XYFlowInstance;
1557
+ initialized: boolean;
1558
+ xyflowSynced: boolean;
1559
+ activeDynamicViewStep: number | null;
1560
+ lastClickedNodeId: string | null;
1561
+ lastClickedEdgeId: string | null;
1562
+ focusedNodeId: string | null;
1563
+ hoveredNodeId: string | null;
1564
+ hoveredEdgeId: string | null;
1565
+ dimmed: ReadonlySet<string>;
1566
+ previousViews: import('@likec4/core').DiagramView[];
1567
+ lastOnNavigate: {
1568
+ fromView: import('@likec4/core').ViewID;
1569
+ toView: import('@likec4/core').ViewID;
1570
+ element: import('@likec4/core').DiagramNode;
1571
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1572
+ positionCorrected: boolean;
1573
+ } | null;
1574
+ viewportChanged: boolean;
1575
+ onChange: import('..').OnChange | null | undefined;
1576
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
1577
+ onNodeClick: import('..').OnNodeClick | null | undefined;
1578
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
1579
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
1580
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
1581
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
1582
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
1583
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
1584
+ isDynamicView: () => boolean;
1585
+ updateView: (view: import('@likec4/core').DiagramView) => void;
1586
+ focusOnNode: (nodeId: string) => void;
1587
+ setHoveredNode: (nodeId: string | null) => void;
1588
+ setHoveredEdge: (edgeId: string | null) => void;
1589
+ setLastClickedNode: (nodeId: string | null) => void;
1590
+ setLastClickedEdge: (edgeId: string | null) => void;
1591
+ resetLastClicked: () => void;
1592
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1593
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1594
+ cancelSaveManualLayout: () => void;
1595
+ triggerSaveManualLayout: (xystore: {
1596
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1597
+ source: string;
1598
+ target: string;
1599
+ sourceHandle?: string | null;
1600
+ targetHandle?: string | null;
1601
+ animated?: boolean;
1602
+ hidden?: boolean;
1603
+ deletable?: boolean;
1604
+ selectable?: boolean;
1605
+ selected?: boolean;
1606
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1607
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1608
+ zIndex?: number;
1609
+ ariaLabel?: string;
1610
+ interactionWidth?: number;
1611
+ label?: import('react').ReactNode;
1612
+ labelStyle?: import('react').CSSProperties;
1613
+ labelShowBg?: boolean;
1614
+ labelBgStyle?: import('react').CSSProperties;
1615
+ labelBgPadding?: [number, number];
1616
+ labelBgBorderRadius?: number;
1617
+ style?: import('react').CSSProperties;
1618
+ className?: string;
1619
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1620
+ focusable?: boolean;
1621
+ data: import('..').RelationshipData;
1622
+ readonly id: string;
1623
+ readonly type: "relationship";
1624
+ }>;
1625
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1626
+ source: string;
1627
+ target: string;
1628
+ sourceHandle?: string | null;
1629
+ targetHandle?: string | null;
1630
+ animated?: boolean;
1631
+ hidden?: boolean;
1632
+ deletable?: boolean;
1633
+ selectable?: boolean;
1634
+ selected?: boolean;
1635
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1636
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1637
+ zIndex?: number;
1638
+ ariaLabel?: string;
1639
+ interactionWidth?: number;
1640
+ label?: import('react').ReactNode;
1641
+ labelStyle?: import('react').CSSProperties;
1642
+ labelShowBg?: boolean;
1643
+ labelBgStyle?: import('react').CSSProperties;
1644
+ labelBgPadding?: [number, number];
1645
+ labelBgBorderRadius?: number;
1646
+ style?: import('react').CSSProperties;
1647
+ className?: string;
1648
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1649
+ focusable?: boolean;
1650
+ data: import('..').RelationshipData;
1651
+ readonly id: string;
1652
+ readonly type: "relationship";
1653
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1654
+ source: string;
1655
+ target: string;
1656
+ sourceHandle?: string | null;
1657
+ targetHandle?: string | null;
1658
+ animated?: boolean;
1659
+ hidden?: boolean;
1660
+ deletable?: boolean;
1661
+ selectable?: boolean;
1662
+ selected?: boolean;
1663
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1664
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1665
+ zIndex?: number;
1666
+ ariaLabel?: string;
1667
+ interactionWidth?: number;
1668
+ label?: import('react').ReactNode;
1669
+ labelStyle?: import('react').CSSProperties;
1670
+ labelShowBg?: boolean;
1671
+ labelBgStyle?: import('react').CSSProperties;
1672
+ labelBgPadding?: [number, number];
1673
+ labelBgBorderRadius?: number;
1674
+ style?: import('react').CSSProperties;
1675
+ className?: string;
1676
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1677
+ focusable?: boolean;
1678
+ data: import('..').RelationshipData;
1679
+ readonly id: string;
1680
+ readonly type: "relationship";
1681
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1682
+ source: string;
1683
+ target: string;
1684
+ sourceHandle?: string | null;
1685
+ targetHandle?: string | null;
1686
+ animated?: boolean;
1687
+ hidden?: boolean;
1688
+ deletable?: boolean;
1689
+ selectable?: boolean;
1690
+ selected?: boolean;
1691
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1692
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1693
+ zIndex?: number;
1694
+ ariaLabel?: string;
1695
+ interactionWidth?: number;
1696
+ label?: import('react').ReactNode;
1697
+ labelStyle?: import('react').CSSProperties;
1698
+ labelShowBg?: boolean;
1699
+ labelBgStyle?: import('react').CSSProperties;
1700
+ labelBgPadding?: [number, number];
1701
+ labelBgBorderRadius?: number;
1702
+ style?: import('react').CSSProperties;
1703
+ className?: string;
1704
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1705
+ focusable?: boolean;
1706
+ data: import('..').RelationshipData;
1707
+ readonly id: string;
1708
+ readonly type: "relationship";
1709
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1710
+ source: string;
1711
+ target: string;
1712
+ sourceHandle?: string | null;
1713
+ targetHandle?: string | null;
1714
+ animated?: boolean;
1715
+ hidden?: boolean;
1716
+ deletable?: boolean;
1717
+ selectable?: boolean;
1718
+ selected?: boolean;
1719
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1720
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1721
+ zIndex?: number;
1722
+ ariaLabel?: string;
1723
+ interactionWidth?: number;
1724
+ label?: import('react').ReactNode;
1725
+ labelStyle?: import('react').CSSProperties;
1726
+ labelShowBg?: boolean;
1727
+ labelBgStyle?: import('react').CSSProperties;
1728
+ labelBgPadding?: [number, number];
1729
+ labelBgBorderRadius?: number;
1730
+ style?: import('react').CSSProperties;
1731
+ className?: string;
1732
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1733
+ focusable?: boolean;
1734
+ data: import('..').RelationshipData;
1735
+ readonly id: string;
1736
+ readonly type: "relationship";
1737
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1738
+ source: string;
1739
+ target: string;
1740
+ sourceHandle?: string | null;
1741
+ targetHandle?: string | null;
1742
+ animated?: boolean;
1743
+ hidden?: boolean;
1744
+ deletable?: boolean;
1745
+ selectable?: boolean;
1746
+ selected?: boolean;
1747
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1748
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1749
+ zIndex?: number;
1750
+ ariaLabel?: string;
1751
+ interactionWidth?: number;
1752
+ label?: import('react').ReactNode;
1753
+ labelStyle?: import('react').CSSProperties;
1754
+ labelShowBg?: boolean;
1755
+ labelBgStyle?: import('react').CSSProperties;
1756
+ labelBgPadding?: [number, number];
1757
+ labelBgBorderRadius?: number;
1758
+ style?: import('react').CSSProperties;
1759
+ className?: string;
1760
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1761
+ focusable?: boolean;
1762
+ data: import('..').RelationshipData;
1763
+ readonly id: string;
1764
+ readonly type: "relationship";
1765
+ }>>), replace?: boolean | undefined) => void;
1766
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1767
+ source: string;
1768
+ target: string;
1769
+ sourceHandle?: string | null;
1770
+ targetHandle?: string | null;
1771
+ animated?: boolean;
1772
+ hidden?: boolean;
1773
+ deletable?: boolean;
1774
+ selectable?: boolean;
1775
+ selected?: boolean;
1776
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1777
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1778
+ zIndex?: number;
1779
+ ariaLabel?: string;
1780
+ interactionWidth?: number;
1781
+ label?: import('react').ReactNode;
1782
+ labelStyle?: import('react').CSSProperties;
1783
+ labelShowBg?: boolean;
1784
+ labelBgStyle?: import('react').CSSProperties;
1785
+ labelBgPadding?: [number, number];
1786
+ labelBgBorderRadius?: number;
1787
+ style?: import('react').CSSProperties;
1788
+ className?: string;
1789
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1790
+ focusable?: boolean;
1791
+ data: import('..').RelationshipData;
1792
+ readonly id: string;
1793
+ readonly type: "relationship";
1794
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1795
+ source: string;
1796
+ target: string;
1797
+ sourceHandle?: string | null;
1798
+ targetHandle?: string | null;
1799
+ animated?: boolean;
1800
+ hidden?: boolean;
1801
+ deletable?: boolean;
1802
+ selectable?: boolean;
1803
+ selected?: boolean;
1804
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1805
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1806
+ zIndex?: number;
1807
+ ariaLabel?: string;
1808
+ interactionWidth?: number;
1809
+ label?: import('react').ReactNode;
1810
+ labelStyle?: import('react').CSSProperties;
1811
+ labelShowBg?: boolean;
1812
+ labelBgStyle?: import('react').CSSProperties;
1813
+ labelBgPadding?: [number, number];
1814
+ labelBgBorderRadius?: number;
1815
+ style?: import('react').CSSProperties;
1816
+ className?: string;
1817
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1818
+ focusable?: boolean;
1819
+ data: import('..').RelationshipData;
1820
+ readonly id: string;
1821
+ readonly type: "relationship";
1822
+ }>) => void) => () => void;
1823
+ }) => void;
1824
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1825
+ fitDiagram: (xyStore: {
1826
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1827
+ source: string;
1828
+ target: string;
1829
+ sourceHandle?: string | null;
1830
+ targetHandle?: string | null;
1831
+ animated?: boolean;
1832
+ hidden?: boolean;
1833
+ deletable?: boolean;
1834
+ selectable?: boolean;
1835
+ selected?: boolean;
1836
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1837
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1838
+ zIndex?: number;
1839
+ ariaLabel?: string;
1840
+ interactionWidth?: number;
1841
+ label?: import('react').ReactNode;
1842
+ labelStyle?: import('react').CSSProperties;
1843
+ labelShowBg?: boolean;
1844
+ labelBgStyle?: import('react').CSSProperties;
1845
+ labelBgPadding?: [number, number];
1846
+ labelBgBorderRadius?: number;
1847
+ style?: import('react').CSSProperties;
1848
+ className?: string;
1849
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1850
+ focusable?: boolean;
1851
+ data: import('..').RelationshipData;
1852
+ readonly id: string;
1853
+ readonly type: "relationship";
1854
+ }>;
1855
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1856
+ source: string;
1857
+ target: string;
1858
+ sourceHandle?: string | null;
1859
+ targetHandle?: string | null;
1860
+ animated?: boolean;
1861
+ hidden?: boolean;
1862
+ deletable?: boolean;
1863
+ selectable?: boolean;
1864
+ selected?: boolean;
1865
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1866
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1867
+ zIndex?: number;
1868
+ ariaLabel?: string;
1869
+ interactionWidth?: number;
1870
+ label?: import('react').ReactNode;
1871
+ labelStyle?: import('react').CSSProperties;
1872
+ labelShowBg?: boolean;
1873
+ labelBgStyle?: import('react').CSSProperties;
1874
+ labelBgPadding?: [number, number];
1875
+ labelBgBorderRadius?: number;
1876
+ style?: import('react').CSSProperties;
1877
+ className?: string;
1878
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1879
+ focusable?: boolean;
1880
+ data: import('..').RelationshipData;
1881
+ readonly id: string;
1882
+ readonly type: "relationship";
1883
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1884
+ source: string;
1885
+ target: string;
1886
+ sourceHandle?: string | null;
1887
+ targetHandle?: string | null;
1888
+ animated?: boolean;
1889
+ hidden?: boolean;
1890
+ deletable?: boolean;
1891
+ selectable?: boolean;
1892
+ selected?: boolean;
1893
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1894
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1895
+ zIndex?: number;
1896
+ ariaLabel?: string;
1897
+ interactionWidth?: number;
1898
+ label?: import('react').ReactNode;
1899
+ labelStyle?: import('react').CSSProperties;
1900
+ labelShowBg?: boolean;
1901
+ labelBgStyle?: import('react').CSSProperties;
1902
+ labelBgPadding?: [number, number];
1903
+ labelBgBorderRadius?: number;
1904
+ style?: import('react').CSSProperties;
1905
+ className?: string;
1906
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1907
+ focusable?: boolean;
1908
+ data: import('..').RelationshipData;
1909
+ readonly id: string;
1910
+ readonly type: "relationship";
1911
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1912
+ source: string;
1913
+ target: string;
1914
+ sourceHandle?: string | null;
1915
+ targetHandle?: string | null;
1916
+ animated?: boolean;
1917
+ hidden?: boolean;
1918
+ deletable?: boolean;
1919
+ selectable?: boolean;
1920
+ selected?: boolean;
1921
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1922
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1923
+ zIndex?: number;
1924
+ ariaLabel?: string;
1925
+ interactionWidth?: number;
1926
+ label?: import('react').ReactNode;
1927
+ labelStyle?: import('react').CSSProperties;
1928
+ labelShowBg?: boolean;
1929
+ labelBgStyle?: import('react').CSSProperties;
1930
+ labelBgPadding?: [number, number];
1931
+ labelBgBorderRadius?: number;
1932
+ style?: import('react').CSSProperties;
1933
+ className?: string;
1934
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1935
+ focusable?: boolean;
1936
+ data: import('..').RelationshipData;
1937
+ readonly id: string;
1938
+ readonly type: "relationship";
1939
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1940
+ source: string;
1941
+ target: string;
1942
+ sourceHandle?: string | null;
1943
+ targetHandle?: string | null;
1944
+ animated?: boolean;
1945
+ hidden?: boolean;
1946
+ deletable?: boolean;
1947
+ selectable?: boolean;
1948
+ selected?: boolean;
1949
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1950
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1951
+ zIndex?: number;
1952
+ ariaLabel?: string;
1953
+ interactionWidth?: number;
1954
+ label?: import('react').ReactNode;
1955
+ labelStyle?: import('react').CSSProperties;
1956
+ labelShowBg?: boolean;
1957
+ labelBgStyle?: import('react').CSSProperties;
1958
+ labelBgPadding?: [number, number];
1959
+ labelBgBorderRadius?: number;
1960
+ style?: import('react').CSSProperties;
1961
+ className?: string;
1962
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1963
+ focusable?: boolean;
1964
+ data: import('..').RelationshipData;
1965
+ readonly id: string;
1966
+ readonly type: "relationship";
1967
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1968
+ source: string;
1969
+ target: string;
1970
+ sourceHandle?: string | null;
1971
+ targetHandle?: string | null;
1972
+ animated?: boolean;
1973
+ hidden?: boolean;
1974
+ deletable?: boolean;
1975
+ selectable?: boolean;
1976
+ selected?: boolean;
1977
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1978
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1979
+ zIndex?: number;
1980
+ ariaLabel?: string;
1981
+ interactionWidth?: number;
1982
+ label?: import('react').ReactNode;
1983
+ labelStyle?: import('react').CSSProperties;
1984
+ labelShowBg?: boolean;
1985
+ labelBgStyle?: import('react').CSSProperties;
1986
+ labelBgPadding?: [number, number];
1987
+ labelBgBorderRadius?: number;
1988
+ style?: import('react').CSSProperties;
1989
+ className?: string;
1990
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1991
+ focusable?: boolean;
1992
+ data: import('..').RelationshipData;
1993
+ readonly id: string;
1994
+ readonly type: "relationship";
1995
+ }>>), replace?: boolean | undefined) => void;
1996
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1997
+ source: string;
1998
+ target: string;
1999
+ sourceHandle?: string | null;
2000
+ targetHandle?: string | null;
2001
+ animated?: boolean;
2002
+ hidden?: boolean;
2003
+ deletable?: boolean;
2004
+ selectable?: boolean;
2005
+ selected?: boolean;
2006
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2007
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2008
+ zIndex?: number;
2009
+ ariaLabel?: string;
2010
+ interactionWidth?: number;
2011
+ label?: import('react').ReactNode;
2012
+ labelStyle?: import('react').CSSProperties;
2013
+ labelShowBg?: boolean;
2014
+ labelBgStyle?: import('react').CSSProperties;
2015
+ labelBgPadding?: [number, number];
2016
+ labelBgBorderRadius?: number;
2017
+ style?: import('react').CSSProperties;
2018
+ className?: string;
2019
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2020
+ focusable?: boolean;
2021
+ data: import('..').RelationshipData;
2022
+ readonly id: string;
2023
+ readonly type: "relationship";
2024
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2025
+ source: string;
2026
+ target: string;
2027
+ sourceHandle?: string | null;
2028
+ targetHandle?: string | null;
2029
+ animated?: boolean;
2030
+ hidden?: boolean;
2031
+ deletable?: boolean;
2032
+ selectable?: boolean;
2033
+ selected?: boolean;
2034
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2035
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2036
+ zIndex?: number;
2037
+ ariaLabel?: string;
2038
+ interactionWidth?: number;
2039
+ label?: import('react').ReactNode;
2040
+ labelStyle?: import('react').CSSProperties;
2041
+ labelShowBg?: boolean;
2042
+ labelBgStyle?: import('react').CSSProperties;
2043
+ labelBgPadding?: [number, number];
2044
+ labelBgBorderRadius?: number;
2045
+ style?: import('react').CSSProperties;
2046
+ className?: string;
2047
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2048
+ focusable?: boolean;
2049
+ data: import('..').RelationshipData;
2050
+ readonly id: string;
2051
+ readonly type: "relationship";
2052
+ }>) => void) => () => void;
2053
+ }) => void;
2054
+ nextDynamicStep: (increment?: number | undefined) => void;
2055
+ stopDynamicView: () => void;
2056
+ }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
2057
+ equalityFn?: (a: U, b: U) => boolean;
2058
+ fireImmediately?: boolean;
2059
+ } | undefined): () => void;
2060
+ };
2061
+ }, "setState"> & {
2062
+ setState<A extends string | {
2063
+ type: string;
2064
+ }>(partial: {
2065
+ view: import('@likec4/core').DiagramView;
2066
+ readonly: boolean;
2067
+ showElementLinks: boolean;
2068
+ fitViewEnabled: boolean;
2069
+ fitViewPadding: number;
2070
+ zoomable: boolean;
2071
+ pannable: boolean;
2072
+ nodesDraggable: boolean;
2073
+ nodesSelectable: boolean;
2074
+ experimentalEdgeEditing: boolean;
2075
+ viewSyncDebounceTimeout: number | null;
2076
+ xyflow: import('..').XYFlowInstance;
2077
+ initialized: boolean;
2078
+ xyflowSynced: boolean;
2079
+ activeDynamicViewStep: number | null;
2080
+ lastClickedNodeId: string | null;
2081
+ lastClickedEdgeId: string | null;
2082
+ focusedNodeId: string | null;
2083
+ hoveredNodeId: string | null;
2084
+ hoveredEdgeId: string | null;
2085
+ dimmed: ReadonlySet<string>;
2086
+ previousViews: import('@likec4/core').DiagramView[];
2087
+ lastOnNavigate: {
2088
+ fromView: import('@likec4/core').ViewID;
2089
+ toView: import('@likec4/core').ViewID;
2090
+ element: import('@likec4/core').DiagramNode;
2091
+ elementScreenPosition: import('@xyflow/system').XYPosition;
2092
+ positionCorrected: boolean;
2093
+ } | null;
2094
+ viewportChanged: boolean;
2095
+ onChange: import('..').OnChange | null | undefined;
2096
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
2097
+ onNodeClick: import('..').OnNodeClick | null | undefined;
2098
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2099
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2100
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
2101
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2102
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
2103
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2104
+ isDynamicView: () => boolean;
2105
+ updateView: (view: import('@likec4/core').DiagramView) => void;
2106
+ focusOnNode: (nodeId: string) => void;
2107
+ setHoveredNode: (nodeId: string | null) => void;
2108
+ setHoveredEdge: (edgeId: string | null) => void;
2109
+ setLastClickedNode: (nodeId: string | null) => void;
2110
+ setLastClickedEdge: (edgeId: string | null) => void;
2111
+ resetLastClicked: () => void;
2112
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2113
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2114
+ cancelSaveManualLayout: () => void;
2115
+ triggerSaveManualLayout: (xystore: {
2116
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2117
+ source: string;
2118
+ target: string;
2119
+ sourceHandle?: string | null;
2120
+ targetHandle?: string | null;
2121
+ animated?: boolean;
2122
+ hidden?: boolean;
2123
+ deletable?: boolean;
2124
+ selectable?: boolean;
2125
+ selected?: boolean;
2126
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2127
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2128
+ zIndex?: number;
2129
+ ariaLabel?: string;
2130
+ interactionWidth?: number;
2131
+ label?: import('react').ReactNode;
2132
+ labelStyle?: import('react').CSSProperties;
2133
+ labelShowBg?: boolean;
2134
+ labelBgStyle?: import('react').CSSProperties;
2135
+ labelBgPadding?: [number, number];
2136
+ labelBgBorderRadius?: number;
2137
+ style?: import('react').CSSProperties;
2138
+ className?: string;
2139
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2140
+ focusable?: boolean;
2141
+ data: import('..').RelationshipData;
2142
+ readonly id: string;
2143
+ readonly type: "relationship";
2144
+ }>;
2145
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2146
+ source: string;
2147
+ target: string;
2148
+ sourceHandle?: string | null;
2149
+ targetHandle?: string | null;
2150
+ animated?: boolean;
2151
+ hidden?: boolean;
2152
+ deletable?: boolean;
2153
+ selectable?: boolean;
2154
+ selected?: boolean;
2155
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2156
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2157
+ zIndex?: number;
2158
+ ariaLabel?: string;
2159
+ interactionWidth?: number;
2160
+ label?: import('react').ReactNode;
2161
+ labelStyle?: import('react').CSSProperties;
2162
+ labelShowBg?: boolean;
2163
+ labelBgStyle?: import('react').CSSProperties;
2164
+ labelBgPadding?: [number, number];
2165
+ labelBgBorderRadius?: number;
2166
+ style?: import('react').CSSProperties;
2167
+ className?: string;
2168
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2169
+ focusable?: boolean;
2170
+ data: import('..').RelationshipData;
2171
+ readonly id: string;
2172
+ readonly type: "relationship";
2173
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2174
+ source: string;
2175
+ target: string;
2176
+ sourceHandle?: string | null;
2177
+ targetHandle?: string | null;
2178
+ animated?: boolean;
2179
+ hidden?: boolean;
2180
+ deletable?: boolean;
2181
+ selectable?: boolean;
2182
+ selected?: boolean;
2183
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2184
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2185
+ zIndex?: number;
2186
+ ariaLabel?: string;
2187
+ interactionWidth?: number;
2188
+ label?: import('react').ReactNode;
2189
+ labelStyle?: import('react').CSSProperties;
2190
+ labelShowBg?: boolean;
2191
+ labelBgStyle?: import('react').CSSProperties;
2192
+ labelBgPadding?: [number, number];
2193
+ labelBgBorderRadius?: number;
2194
+ style?: import('react').CSSProperties;
2195
+ className?: string;
2196
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2197
+ focusable?: boolean;
2198
+ data: import('..').RelationshipData;
2199
+ readonly id: string;
2200
+ readonly type: "relationship";
2201
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2202
+ source: string;
2203
+ target: string;
2204
+ sourceHandle?: string | null;
2205
+ targetHandle?: string | null;
2206
+ animated?: boolean;
2207
+ hidden?: boolean;
2208
+ deletable?: boolean;
2209
+ selectable?: boolean;
2210
+ selected?: boolean;
2211
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2212
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2213
+ zIndex?: number;
2214
+ ariaLabel?: string;
2215
+ interactionWidth?: number;
2216
+ label?: import('react').ReactNode;
2217
+ labelStyle?: import('react').CSSProperties;
2218
+ labelShowBg?: boolean;
2219
+ labelBgStyle?: import('react').CSSProperties;
2220
+ labelBgPadding?: [number, number];
2221
+ labelBgBorderRadius?: number;
2222
+ style?: import('react').CSSProperties;
2223
+ className?: string;
2224
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2225
+ focusable?: boolean;
2226
+ data: import('..').RelationshipData;
2227
+ readonly id: string;
2228
+ readonly type: "relationship";
2229
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2230
+ source: string;
2231
+ target: string;
2232
+ sourceHandle?: string | null;
2233
+ targetHandle?: string | null;
2234
+ animated?: boolean;
2235
+ hidden?: boolean;
2236
+ deletable?: boolean;
2237
+ selectable?: boolean;
2238
+ selected?: boolean;
2239
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2240
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2241
+ zIndex?: number;
2242
+ ariaLabel?: string;
2243
+ interactionWidth?: number;
2244
+ label?: import('react').ReactNode;
2245
+ labelStyle?: import('react').CSSProperties;
2246
+ labelShowBg?: boolean;
2247
+ labelBgStyle?: import('react').CSSProperties;
2248
+ labelBgPadding?: [number, number];
2249
+ labelBgBorderRadius?: number;
2250
+ style?: import('react').CSSProperties;
2251
+ className?: string;
2252
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2253
+ focusable?: boolean;
2254
+ data: import('..').RelationshipData;
2255
+ readonly id: string;
2256
+ readonly type: "relationship";
2257
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2258
+ source: string;
2259
+ target: string;
2260
+ sourceHandle?: string | null;
2261
+ targetHandle?: string | null;
2262
+ animated?: boolean;
2263
+ hidden?: boolean;
2264
+ deletable?: boolean;
2265
+ selectable?: boolean;
2266
+ selected?: boolean;
2267
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2268
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2269
+ zIndex?: number;
2270
+ ariaLabel?: string;
2271
+ interactionWidth?: number;
2272
+ label?: import('react').ReactNode;
2273
+ labelStyle?: import('react').CSSProperties;
2274
+ labelShowBg?: boolean;
2275
+ labelBgStyle?: import('react').CSSProperties;
2276
+ labelBgPadding?: [number, number];
2277
+ labelBgBorderRadius?: number;
2278
+ style?: import('react').CSSProperties;
2279
+ className?: string;
2280
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2281
+ focusable?: boolean;
2282
+ data: import('..').RelationshipData;
2283
+ readonly id: string;
2284
+ readonly type: "relationship";
2285
+ }>>), replace?: boolean | undefined) => void;
2286
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2287
+ source: string;
2288
+ target: string;
2289
+ sourceHandle?: string | null;
2290
+ targetHandle?: string | null;
2291
+ animated?: boolean;
2292
+ hidden?: boolean;
2293
+ deletable?: boolean;
2294
+ selectable?: boolean;
2295
+ selected?: boolean;
2296
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2297
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2298
+ zIndex?: number;
2299
+ ariaLabel?: string;
2300
+ interactionWidth?: number;
2301
+ label?: import('react').ReactNode;
2302
+ labelStyle?: import('react').CSSProperties;
2303
+ labelShowBg?: boolean;
2304
+ labelBgStyle?: import('react').CSSProperties;
2305
+ labelBgPadding?: [number, number];
2306
+ labelBgBorderRadius?: number;
2307
+ style?: import('react').CSSProperties;
2308
+ className?: string;
2309
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2310
+ focusable?: boolean;
2311
+ data: import('..').RelationshipData;
2312
+ readonly id: string;
2313
+ readonly type: "relationship";
2314
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2315
+ source: string;
2316
+ target: string;
2317
+ sourceHandle?: string | null;
2318
+ targetHandle?: string | null;
2319
+ animated?: boolean;
2320
+ hidden?: boolean;
2321
+ deletable?: boolean;
2322
+ selectable?: boolean;
2323
+ selected?: boolean;
2324
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2325
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2326
+ zIndex?: number;
2327
+ ariaLabel?: string;
2328
+ interactionWidth?: number;
2329
+ label?: import('react').ReactNode;
2330
+ labelStyle?: import('react').CSSProperties;
2331
+ labelShowBg?: boolean;
2332
+ labelBgStyle?: import('react').CSSProperties;
2333
+ labelBgPadding?: [number, number];
2334
+ labelBgBorderRadius?: number;
2335
+ style?: import('react').CSSProperties;
2336
+ className?: string;
2337
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2338
+ focusable?: boolean;
2339
+ data: import('..').RelationshipData;
2340
+ readonly id: string;
2341
+ readonly type: "relationship";
2342
+ }>) => void) => () => void;
2343
+ }) => void;
2344
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2345
+ fitDiagram: (xyStore: {
2346
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2347
+ source: string;
2348
+ target: string;
2349
+ sourceHandle?: string | null;
2350
+ targetHandle?: string | null;
2351
+ animated?: boolean;
2352
+ hidden?: boolean;
2353
+ deletable?: boolean;
2354
+ selectable?: boolean;
2355
+ selected?: boolean;
2356
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2357
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2358
+ zIndex?: number;
2359
+ ariaLabel?: string;
2360
+ interactionWidth?: number;
2361
+ label?: import('react').ReactNode;
2362
+ labelStyle?: import('react').CSSProperties;
2363
+ labelShowBg?: boolean;
2364
+ labelBgStyle?: import('react').CSSProperties;
2365
+ labelBgPadding?: [number, number];
2366
+ labelBgBorderRadius?: number;
2367
+ style?: import('react').CSSProperties;
2368
+ className?: string;
2369
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2370
+ focusable?: boolean;
2371
+ data: import('..').RelationshipData;
2372
+ readonly id: string;
2373
+ readonly type: "relationship";
2374
+ }>;
2375
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2376
+ source: string;
2377
+ target: string;
2378
+ sourceHandle?: string | null;
2379
+ targetHandle?: string | null;
2380
+ animated?: boolean;
2381
+ hidden?: boolean;
2382
+ deletable?: boolean;
2383
+ selectable?: boolean;
2384
+ selected?: boolean;
2385
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2386
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2387
+ zIndex?: number;
2388
+ ariaLabel?: string;
2389
+ interactionWidth?: number;
2390
+ label?: import('react').ReactNode;
2391
+ labelStyle?: import('react').CSSProperties;
2392
+ labelShowBg?: boolean;
2393
+ labelBgStyle?: import('react').CSSProperties;
2394
+ labelBgPadding?: [number, number];
2395
+ labelBgBorderRadius?: number;
2396
+ style?: import('react').CSSProperties;
2397
+ className?: string;
2398
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2399
+ focusable?: boolean;
2400
+ data: import('..').RelationshipData;
2401
+ readonly id: string;
2402
+ readonly type: "relationship";
2403
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2404
+ source: string;
2405
+ target: string;
2406
+ sourceHandle?: string | null;
2407
+ targetHandle?: string | null;
2408
+ animated?: boolean;
2409
+ hidden?: boolean;
2410
+ deletable?: boolean;
2411
+ selectable?: boolean;
2412
+ selected?: boolean;
2413
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2414
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2415
+ zIndex?: number;
2416
+ ariaLabel?: string;
2417
+ interactionWidth?: number;
2418
+ label?: import('react').ReactNode;
2419
+ labelStyle?: import('react').CSSProperties;
2420
+ labelShowBg?: boolean;
2421
+ labelBgStyle?: import('react').CSSProperties;
2422
+ labelBgPadding?: [number, number];
2423
+ labelBgBorderRadius?: number;
2424
+ style?: import('react').CSSProperties;
2425
+ className?: string;
2426
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2427
+ focusable?: boolean;
2428
+ data: import('..').RelationshipData;
2429
+ readonly id: string;
2430
+ readonly type: "relationship";
2431
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2432
+ source: string;
2433
+ target: string;
2434
+ sourceHandle?: string | null;
2435
+ targetHandle?: string | null;
2436
+ animated?: boolean;
2437
+ hidden?: boolean;
2438
+ deletable?: boolean;
2439
+ selectable?: boolean;
2440
+ selected?: boolean;
2441
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2442
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2443
+ zIndex?: number;
2444
+ ariaLabel?: string;
2445
+ interactionWidth?: number;
2446
+ label?: import('react').ReactNode;
2447
+ labelStyle?: import('react').CSSProperties;
2448
+ labelShowBg?: boolean;
2449
+ labelBgStyle?: import('react').CSSProperties;
2450
+ labelBgPadding?: [number, number];
2451
+ labelBgBorderRadius?: number;
2452
+ style?: import('react').CSSProperties;
2453
+ className?: string;
2454
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2455
+ focusable?: boolean;
2456
+ data: import('..').RelationshipData;
2457
+ readonly id: string;
2458
+ readonly type: "relationship";
2459
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2460
+ source: string;
2461
+ target: string;
2462
+ sourceHandle?: string | null;
2463
+ targetHandle?: string | null;
2464
+ animated?: boolean;
2465
+ hidden?: boolean;
2466
+ deletable?: boolean;
2467
+ selectable?: boolean;
2468
+ selected?: boolean;
2469
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2470
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2471
+ zIndex?: number;
2472
+ ariaLabel?: string;
2473
+ interactionWidth?: number;
2474
+ label?: import('react').ReactNode;
2475
+ labelStyle?: import('react').CSSProperties;
2476
+ labelShowBg?: boolean;
2477
+ labelBgStyle?: import('react').CSSProperties;
2478
+ labelBgPadding?: [number, number];
2479
+ labelBgBorderRadius?: number;
2480
+ style?: import('react').CSSProperties;
2481
+ className?: string;
2482
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2483
+ focusable?: boolean;
2484
+ data: import('..').RelationshipData;
2485
+ readonly id: string;
2486
+ readonly type: "relationship";
2487
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2488
+ source: string;
2489
+ target: string;
2490
+ sourceHandle?: string | null;
2491
+ targetHandle?: string | null;
2492
+ animated?: boolean;
2493
+ hidden?: boolean;
2494
+ deletable?: boolean;
2495
+ selectable?: boolean;
2496
+ selected?: boolean;
2497
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2498
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2499
+ zIndex?: number;
2500
+ ariaLabel?: string;
2501
+ interactionWidth?: number;
2502
+ label?: import('react').ReactNode;
2503
+ labelStyle?: import('react').CSSProperties;
2504
+ labelShowBg?: boolean;
2505
+ labelBgStyle?: import('react').CSSProperties;
2506
+ labelBgPadding?: [number, number];
2507
+ labelBgBorderRadius?: number;
2508
+ style?: import('react').CSSProperties;
2509
+ className?: string;
2510
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2511
+ focusable?: boolean;
2512
+ data: import('..').RelationshipData;
2513
+ readonly id: string;
2514
+ readonly type: "relationship";
2515
+ }>>), replace?: boolean | undefined) => void;
2516
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2517
+ source: string;
2518
+ target: string;
2519
+ sourceHandle?: string | null;
2520
+ targetHandle?: string | null;
2521
+ animated?: boolean;
2522
+ hidden?: boolean;
2523
+ deletable?: boolean;
2524
+ selectable?: boolean;
2525
+ selected?: boolean;
2526
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2527
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2528
+ zIndex?: number;
2529
+ ariaLabel?: string;
2530
+ interactionWidth?: number;
2531
+ label?: import('react').ReactNode;
2532
+ labelStyle?: import('react').CSSProperties;
2533
+ labelShowBg?: boolean;
2534
+ labelBgStyle?: import('react').CSSProperties;
2535
+ labelBgPadding?: [number, number];
2536
+ labelBgBorderRadius?: number;
2537
+ style?: import('react').CSSProperties;
2538
+ className?: string;
2539
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2540
+ focusable?: boolean;
2541
+ data: import('..').RelationshipData;
2542
+ readonly id: string;
2543
+ readonly type: "relationship";
2544
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2545
+ source: string;
2546
+ target: string;
2547
+ sourceHandle?: string | null;
2548
+ targetHandle?: string | null;
2549
+ animated?: boolean;
2550
+ hidden?: boolean;
2551
+ deletable?: boolean;
2552
+ selectable?: boolean;
2553
+ selected?: boolean;
2554
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2555
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2556
+ zIndex?: number;
2557
+ ariaLabel?: string;
2558
+ interactionWidth?: number;
2559
+ label?: import('react').ReactNode;
2560
+ labelStyle?: import('react').CSSProperties;
2561
+ labelShowBg?: boolean;
2562
+ labelBgStyle?: import('react').CSSProperties;
2563
+ labelBgPadding?: [number, number];
2564
+ labelBgBorderRadius?: number;
2565
+ style?: import('react').CSSProperties;
2566
+ className?: string;
2567
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2568
+ focusable?: boolean;
2569
+ data: import('..').RelationshipData;
2570
+ readonly id: string;
2571
+ readonly type: "relationship";
2572
+ }>) => void) => () => void;
2573
+ }) => void;
2574
+ nextDynamicStep: (increment?: number | undefined) => void;
2575
+ stopDynamicView: () => void;
2576
+ } | Partial<{
2577
+ view: import('@likec4/core').DiagramView;
2578
+ readonly: boolean;
2579
+ showElementLinks: boolean;
2580
+ fitViewEnabled: boolean;
2581
+ fitViewPadding: number;
2582
+ zoomable: boolean;
2583
+ pannable: boolean;
2584
+ nodesDraggable: boolean;
2585
+ nodesSelectable: boolean;
2586
+ experimentalEdgeEditing: boolean;
2587
+ viewSyncDebounceTimeout: number | null;
2588
+ xyflow: import('..').XYFlowInstance;
2589
+ initialized: boolean;
2590
+ xyflowSynced: boolean;
2591
+ activeDynamicViewStep: number | null;
2592
+ lastClickedNodeId: string | null;
2593
+ lastClickedEdgeId: string | null;
2594
+ focusedNodeId: string | null;
2595
+ hoveredNodeId: string | null;
2596
+ hoveredEdgeId: string | null;
2597
+ dimmed: ReadonlySet<string>;
2598
+ previousViews: import('@likec4/core').DiagramView[];
2599
+ lastOnNavigate: {
2600
+ fromView: import('@likec4/core').ViewID;
2601
+ toView: import('@likec4/core').ViewID;
2602
+ element: import('@likec4/core').DiagramNode;
2603
+ elementScreenPosition: import('@xyflow/system').XYPosition;
2604
+ positionCorrected: boolean;
2605
+ } | null;
2606
+ viewportChanged: boolean;
2607
+ onChange: import('..').OnChange | null | undefined;
2608
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
2609
+ onNodeClick: import('..').OnNodeClick | null | undefined;
2610
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2611
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2612
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
2613
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2614
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
2615
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2616
+ isDynamicView: () => boolean;
2617
+ updateView: (view: import('@likec4/core').DiagramView) => void;
2618
+ focusOnNode: (nodeId: string) => void;
2619
+ setHoveredNode: (nodeId: string | null) => void;
2620
+ setHoveredEdge: (edgeId: string | null) => void;
2621
+ setLastClickedNode: (nodeId: string | null) => void;
2622
+ setLastClickedEdge: (edgeId: string | null) => void;
2623
+ resetLastClicked: () => void;
2624
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2625
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2626
+ cancelSaveManualLayout: () => void;
2627
+ triggerSaveManualLayout: (xystore: {
2628
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2629
+ source: string;
2630
+ target: string;
2631
+ sourceHandle?: string | null;
2632
+ targetHandle?: string | null;
2633
+ animated?: boolean;
2634
+ hidden?: boolean;
2635
+ deletable?: boolean;
2636
+ selectable?: boolean;
2637
+ selected?: boolean;
2638
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2639
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2640
+ zIndex?: number;
2641
+ ariaLabel?: string;
2642
+ interactionWidth?: number;
2643
+ label?: import('react').ReactNode;
2644
+ labelStyle?: import('react').CSSProperties;
2645
+ labelShowBg?: boolean;
2646
+ labelBgStyle?: import('react').CSSProperties;
2647
+ labelBgPadding?: [number, number];
2648
+ labelBgBorderRadius?: number;
2649
+ style?: import('react').CSSProperties;
2650
+ className?: string;
2651
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2652
+ focusable?: boolean;
2653
+ data: import('..').RelationshipData;
2654
+ readonly id: string;
2655
+ readonly type: "relationship";
2656
+ }>;
2657
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2658
+ source: string;
2659
+ target: string;
2660
+ sourceHandle?: string | null;
2661
+ targetHandle?: string | null;
2662
+ animated?: boolean;
2663
+ hidden?: boolean;
2664
+ deletable?: boolean;
2665
+ selectable?: boolean;
2666
+ selected?: boolean;
2667
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2668
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2669
+ zIndex?: number;
2670
+ ariaLabel?: string;
2671
+ interactionWidth?: number;
2672
+ label?: import('react').ReactNode;
2673
+ labelStyle?: import('react').CSSProperties;
2674
+ labelShowBg?: boolean;
2675
+ labelBgStyle?: import('react').CSSProperties;
2676
+ labelBgPadding?: [number, number];
2677
+ labelBgBorderRadius?: number;
2678
+ style?: import('react').CSSProperties;
2679
+ className?: string;
2680
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2681
+ focusable?: boolean;
2682
+ data: import('..').RelationshipData;
2683
+ readonly id: string;
2684
+ readonly type: "relationship";
2685
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2686
+ source: string;
2687
+ target: string;
2688
+ sourceHandle?: string | null;
2689
+ targetHandle?: string | null;
2690
+ animated?: boolean;
2691
+ hidden?: boolean;
2692
+ deletable?: boolean;
2693
+ selectable?: boolean;
2694
+ selected?: boolean;
2695
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2696
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2697
+ zIndex?: number;
2698
+ ariaLabel?: string;
2699
+ interactionWidth?: number;
2700
+ label?: import('react').ReactNode;
2701
+ labelStyle?: import('react').CSSProperties;
2702
+ labelShowBg?: boolean;
2703
+ labelBgStyle?: import('react').CSSProperties;
2704
+ labelBgPadding?: [number, number];
2705
+ labelBgBorderRadius?: number;
2706
+ style?: import('react').CSSProperties;
2707
+ className?: string;
2708
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2709
+ focusable?: boolean;
2710
+ data: import('..').RelationshipData;
2711
+ readonly id: string;
2712
+ readonly type: "relationship";
2713
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2714
+ source: string;
2715
+ target: string;
2716
+ sourceHandle?: string | null;
2717
+ targetHandle?: string | null;
2718
+ animated?: boolean;
2719
+ hidden?: boolean;
2720
+ deletable?: boolean;
2721
+ selectable?: boolean;
2722
+ selected?: boolean;
2723
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2724
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2725
+ zIndex?: number;
2726
+ ariaLabel?: string;
2727
+ interactionWidth?: number;
2728
+ label?: import('react').ReactNode;
2729
+ labelStyle?: import('react').CSSProperties;
2730
+ labelShowBg?: boolean;
2731
+ labelBgStyle?: import('react').CSSProperties;
2732
+ labelBgPadding?: [number, number];
2733
+ labelBgBorderRadius?: number;
2734
+ style?: import('react').CSSProperties;
2735
+ className?: string;
2736
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2737
+ focusable?: boolean;
2738
+ data: import('..').RelationshipData;
2739
+ readonly id: string;
2740
+ readonly type: "relationship";
2741
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2742
+ source: string;
2743
+ target: string;
2744
+ sourceHandle?: string | null;
2745
+ targetHandle?: string | null;
2746
+ animated?: boolean;
2747
+ hidden?: boolean;
2748
+ deletable?: boolean;
2749
+ selectable?: boolean;
2750
+ selected?: boolean;
2751
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2752
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2753
+ zIndex?: number;
2754
+ ariaLabel?: string;
2755
+ interactionWidth?: number;
2756
+ label?: import('react').ReactNode;
2757
+ labelStyle?: import('react').CSSProperties;
2758
+ labelShowBg?: boolean;
2759
+ labelBgStyle?: import('react').CSSProperties;
2760
+ labelBgPadding?: [number, number];
2761
+ labelBgBorderRadius?: number;
2762
+ style?: import('react').CSSProperties;
2763
+ className?: string;
2764
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2765
+ focusable?: boolean;
2766
+ data: import('..').RelationshipData;
2767
+ readonly id: string;
2768
+ readonly type: "relationship";
2769
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2770
+ source: string;
2771
+ target: string;
2772
+ sourceHandle?: string | null;
2773
+ targetHandle?: string | null;
2774
+ animated?: boolean;
2775
+ hidden?: boolean;
2776
+ deletable?: boolean;
2777
+ selectable?: boolean;
2778
+ selected?: boolean;
2779
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2780
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2781
+ zIndex?: number;
2782
+ ariaLabel?: string;
2783
+ interactionWidth?: number;
2784
+ label?: import('react').ReactNode;
2785
+ labelStyle?: import('react').CSSProperties;
2786
+ labelShowBg?: boolean;
2787
+ labelBgStyle?: import('react').CSSProperties;
2788
+ labelBgPadding?: [number, number];
2789
+ labelBgBorderRadius?: number;
2790
+ style?: import('react').CSSProperties;
2791
+ className?: string;
2792
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2793
+ focusable?: boolean;
2794
+ data: import('..').RelationshipData;
2795
+ readonly id: string;
2796
+ readonly type: "relationship";
2797
+ }>>), replace?: boolean | undefined) => void;
2798
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2799
+ source: string;
2800
+ target: string;
2801
+ sourceHandle?: string | null;
2802
+ targetHandle?: string | null;
2803
+ animated?: boolean;
2804
+ hidden?: boolean;
2805
+ deletable?: boolean;
2806
+ selectable?: boolean;
2807
+ selected?: boolean;
2808
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2809
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2810
+ zIndex?: number;
2811
+ ariaLabel?: string;
2812
+ interactionWidth?: number;
2813
+ label?: import('react').ReactNode;
2814
+ labelStyle?: import('react').CSSProperties;
2815
+ labelShowBg?: boolean;
2816
+ labelBgStyle?: import('react').CSSProperties;
2817
+ labelBgPadding?: [number, number];
2818
+ labelBgBorderRadius?: number;
2819
+ style?: import('react').CSSProperties;
2820
+ className?: string;
2821
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2822
+ focusable?: boolean;
2823
+ data: import('..').RelationshipData;
2824
+ readonly id: string;
2825
+ readonly type: "relationship";
2826
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2827
+ source: string;
2828
+ target: string;
2829
+ sourceHandle?: string | null;
2830
+ targetHandle?: string | null;
2831
+ animated?: boolean;
2832
+ hidden?: boolean;
2833
+ deletable?: boolean;
2834
+ selectable?: boolean;
2835
+ selected?: boolean;
2836
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2837
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2838
+ zIndex?: number;
2839
+ ariaLabel?: string;
2840
+ interactionWidth?: number;
2841
+ label?: import('react').ReactNode;
2842
+ labelStyle?: import('react').CSSProperties;
2843
+ labelShowBg?: boolean;
2844
+ labelBgStyle?: import('react').CSSProperties;
2845
+ labelBgPadding?: [number, number];
2846
+ labelBgBorderRadius?: number;
2847
+ style?: import('react').CSSProperties;
2848
+ className?: string;
2849
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2850
+ focusable?: boolean;
2851
+ data: import('..').RelationshipData;
2852
+ readonly id: string;
2853
+ readonly type: "relationship";
2854
+ }>) => void) => () => void;
2855
+ }) => void;
2856
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2857
+ fitDiagram: (xyStore: {
2858
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2859
+ source: string;
2860
+ target: string;
2861
+ sourceHandle?: string | null;
2862
+ targetHandle?: string | null;
2863
+ animated?: boolean;
2864
+ hidden?: boolean;
2865
+ deletable?: boolean;
2866
+ selectable?: boolean;
2867
+ selected?: boolean;
2868
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2869
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2870
+ zIndex?: number;
2871
+ ariaLabel?: string;
2872
+ interactionWidth?: number;
2873
+ label?: import('react').ReactNode;
2874
+ labelStyle?: import('react').CSSProperties;
2875
+ labelShowBg?: boolean;
2876
+ labelBgStyle?: import('react').CSSProperties;
2877
+ labelBgPadding?: [number, number];
2878
+ labelBgBorderRadius?: number;
2879
+ style?: import('react').CSSProperties;
2880
+ className?: string;
2881
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2882
+ focusable?: boolean;
2883
+ data: import('..').RelationshipData;
2884
+ readonly id: string;
2885
+ readonly type: "relationship";
2886
+ }>;
2887
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2888
+ source: string;
2889
+ target: string;
2890
+ sourceHandle?: string | null;
2891
+ targetHandle?: string | null;
2892
+ animated?: boolean;
2893
+ hidden?: boolean;
2894
+ deletable?: boolean;
2895
+ selectable?: boolean;
2896
+ selected?: boolean;
2897
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2898
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2899
+ zIndex?: number;
2900
+ ariaLabel?: string;
2901
+ interactionWidth?: number;
2902
+ label?: import('react').ReactNode;
2903
+ labelStyle?: import('react').CSSProperties;
2904
+ labelShowBg?: boolean;
2905
+ labelBgStyle?: import('react').CSSProperties;
2906
+ labelBgPadding?: [number, number];
2907
+ labelBgBorderRadius?: number;
2908
+ style?: import('react').CSSProperties;
2909
+ className?: string;
2910
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2911
+ focusable?: boolean;
2912
+ data: import('..').RelationshipData;
2913
+ readonly id: string;
2914
+ readonly type: "relationship";
2915
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2916
+ source: string;
2917
+ target: string;
2918
+ sourceHandle?: string | null;
2919
+ targetHandle?: string | null;
2920
+ animated?: boolean;
2921
+ hidden?: boolean;
2922
+ deletable?: boolean;
2923
+ selectable?: boolean;
2924
+ selected?: boolean;
2925
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2926
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2927
+ zIndex?: number;
2928
+ ariaLabel?: string;
2929
+ interactionWidth?: number;
2930
+ label?: import('react').ReactNode;
2931
+ labelStyle?: import('react').CSSProperties;
2932
+ labelShowBg?: boolean;
2933
+ labelBgStyle?: import('react').CSSProperties;
2934
+ labelBgPadding?: [number, number];
2935
+ labelBgBorderRadius?: number;
2936
+ style?: import('react').CSSProperties;
2937
+ className?: string;
2938
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2939
+ focusable?: boolean;
2940
+ data: import('..').RelationshipData;
2941
+ readonly id: string;
2942
+ readonly type: "relationship";
2943
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2944
+ source: string;
2945
+ target: string;
2946
+ sourceHandle?: string | null;
2947
+ targetHandle?: string | null;
2948
+ animated?: boolean;
2949
+ hidden?: boolean;
2950
+ deletable?: boolean;
2951
+ selectable?: boolean;
2952
+ selected?: boolean;
2953
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2954
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2955
+ zIndex?: number;
2956
+ ariaLabel?: string;
2957
+ interactionWidth?: number;
2958
+ label?: import('react').ReactNode;
2959
+ labelStyle?: import('react').CSSProperties;
2960
+ labelShowBg?: boolean;
2961
+ labelBgStyle?: import('react').CSSProperties;
2962
+ labelBgPadding?: [number, number];
2963
+ labelBgBorderRadius?: number;
2964
+ style?: import('react').CSSProperties;
2965
+ className?: string;
2966
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2967
+ focusable?: boolean;
2968
+ data: import('..').RelationshipData;
2969
+ readonly id: string;
2970
+ readonly type: "relationship";
2971
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2972
+ source: string;
2973
+ target: string;
2974
+ sourceHandle?: string | null;
2975
+ targetHandle?: string | null;
2976
+ animated?: boolean;
2977
+ hidden?: boolean;
2978
+ deletable?: boolean;
2979
+ selectable?: boolean;
2980
+ selected?: boolean;
2981
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2982
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2983
+ zIndex?: number;
2984
+ ariaLabel?: string;
2985
+ interactionWidth?: number;
2986
+ label?: import('react').ReactNode;
2987
+ labelStyle?: import('react').CSSProperties;
2988
+ labelShowBg?: boolean;
2989
+ labelBgStyle?: import('react').CSSProperties;
2990
+ labelBgPadding?: [number, number];
2991
+ labelBgBorderRadius?: number;
2992
+ style?: import('react').CSSProperties;
2993
+ className?: string;
2994
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2995
+ focusable?: boolean;
2996
+ data: import('..').RelationshipData;
2997
+ readonly id: string;
2998
+ readonly type: "relationship";
2999
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3000
+ source: string;
3001
+ target: string;
3002
+ sourceHandle?: string | null;
3003
+ targetHandle?: string | null;
3004
+ animated?: boolean;
3005
+ hidden?: boolean;
3006
+ deletable?: boolean;
3007
+ selectable?: boolean;
3008
+ selected?: boolean;
3009
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3010
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3011
+ zIndex?: number;
3012
+ ariaLabel?: string;
3013
+ interactionWidth?: number;
3014
+ label?: import('react').ReactNode;
3015
+ labelStyle?: import('react').CSSProperties;
3016
+ labelShowBg?: boolean;
3017
+ labelBgStyle?: import('react').CSSProperties;
3018
+ labelBgPadding?: [number, number];
3019
+ labelBgBorderRadius?: number;
3020
+ style?: import('react').CSSProperties;
3021
+ className?: string;
3022
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3023
+ focusable?: boolean;
3024
+ data: import('..').RelationshipData;
3025
+ readonly id: string;
3026
+ readonly type: "relationship";
3027
+ }>>), replace?: boolean | undefined) => void;
3028
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3029
+ source: string;
3030
+ target: string;
3031
+ sourceHandle?: string | null;
3032
+ targetHandle?: string | null;
3033
+ animated?: boolean;
3034
+ hidden?: boolean;
3035
+ deletable?: boolean;
3036
+ selectable?: boolean;
3037
+ selected?: boolean;
3038
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3039
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3040
+ zIndex?: number;
3041
+ ariaLabel?: string;
3042
+ interactionWidth?: number;
3043
+ label?: import('react').ReactNode;
3044
+ labelStyle?: import('react').CSSProperties;
3045
+ labelShowBg?: boolean;
3046
+ labelBgStyle?: import('react').CSSProperties;
3047
+ labelBgPadding?: [number, number];
3048
+ labelBgBorderRadius?: number;
3049
+ style?: import('react').CSSProperties;
3050
+ className?: string;
3051
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3052
+ focusable?: boolean;
3053
+ data: import('..').RelationshipData;
3054
+ readonly id: string;
3055
+ readonly type: "relationship";
3056
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3057
+ source: string;
3058
+ target: string;
3059
+ sourceHandle?: string | null;
3060
+ targetHandle?: string | null;
3061
+ animated?: boolean;
3062
+ hidden?: boolean;
3063
+ deletable?: boolean;
3064
+ selectable?: boolean;
3065
+ selected?: boolean;
3066
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3067
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3068
+ zIndex?: number;
3069
+ ariaLabel?: string;
3070
+ interactionWidth?: number;
3071
+ label?: import('react').ReactNode;
3072
+ labelStyle?: import('react').CSSProperties;
3073
+ labelShowBg?: boolean;
3074
+ labelBgStyle?: import('react').CSSProperties;
3075
+ labelBgPadding?: [number, number];
3076
+ labelBgBorderRadius?: number;
3077
+ style?: import('react').CSSProperties;
3078
+ className?: string;
3079
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3080
+ focusable?: boolean;
3081
+ data: import('..').RelationshipData;
3082
+ readonly id: string;
3083
+ readonly type: "relationship";
3084
+ }>) => void) => () => void;
3085
+ }) => void;
3086
+ nextDynamicStep: (increment?: number | undefined) => void;
3087
+ stopDynamicView: () => void;
3088
+ }> | ((state: {
3089
+ view: import('@likec4/core').DiagramView;
3090
+ readonly: boolean;
3091
+ showElementLinks: boolean;
3092
+ fitViewEnabled: boolean;
3093
+ fitViewPadding: number;
3094
+ zoomable: boolean;
3095
+ pannable: boolean;
3096
+ nodesDraggable: boolean;
3097
+ nodesSelectable: boolean;
3098
+ experimentalEdgeEditing: boolean;
3099
+ viewSyncDebounceTimeout: number | null;
3100
+ xyflow: import('..').XYFlowInstance;
1146
3101
  initialized: boolean;
1147
3102
  xyflowSynced: boolean;
1148
3103
  activeDynamicViewStep: number | null;
@@ -1157,7 +3112,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1157
3112
  fromView: import('@likec4/core').ViewID;
1158
3113
  toView: import('@likec4/core').ViewID;
1159
3114
  element: import('@likec4/core').DiagramNode;
1160
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
3115
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1161
3116
  positionCorrected: boolean;
1162
3117
  } | null;
1163
3118
  viewportChanged: boolean;
@@ -1179,7 +3134,237 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1179
3134
  setLastClickedEdge: (edgeId: string | null) => void;
1180
3135
  resetLastClicked: () => void;
1181
3136
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1182
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
3137
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3138
+ cancelSaveManualLayout: () => void;
3139
+ triggerSaveManualLayout: (xystore: {
3140
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3141
+ source: string;
3142
+ target: string;
3143
+ sourceHandle?: string | null;
3144
+ targetHandle?: string | null;
3145
+ animated?: boolean;
3146
+ hidden?: boolean;
3147
+ deletable?: boolean;
3148
+ selectable?: boolean;
3149
+ selected?: boolean;
3150
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3151
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3152
+ zIndex?: number;
3153
+ ariaLabel?: string;
3154
+ interactionWidth?: number;
3155
+ label?: import('react').ReactNode;
3156
+ labelStyle?: import('react').CSSProperties;
3157
+ labelShowBg?: boolean;
3158
+ labelBgStyle?: import('react').CSSProperties;
3159
+ labelBgPadding?: [number, number];
3160
+ labelBgBorderRadius?: number;
3161
+ style?: import('react').CSSProperties;
3162
+ className?: string;
3163
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3164
+ focusable?: boolean;
3165
+ data: import('..').RelationshipData;
3166
+ readonly id: string;
3167
+ readonly type: "relationship";
3168
+ }>;
3169
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3170
+ source: string;
3171
+ target: string;
3172
+ sourceHandle?: string | null;
3173
+ targetHandle?: string | null;
3174
+ animated?: boolean;
3175
+ hidden?: boolean;
3176
+ deletable?: boolean;
3177
+ selectable?: boolean;
3178
+ selected?: boolean;
3179
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3180
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3181
+ zIndex?: number;
3182
+ ariaLabel?: string;
3183
+ interactionWidth?: number;
3184
+ label?: import('react').ReactNode;
3185
+ labelStyle?: import('react').CSSProperties;
3186
+ labelShowBg?: boolean;
3187
+ labelBgStyle?: import('react').CSSProperties;
3188
+ labelBgPadding?: [number, number];
3189
+ labelBgBorderRadius?: number;
3190
+ style?: import('react').CSSProperties;
3191
+ className?: string;
3192
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3193
+ focusable?: boolean;
3194
+ data: import('..').RelationshipData;
3195
+ readonly id: string;
3196
+ readonly type: "relationship";
3197
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3198
+ source: string;
3199
+ target: string;
3200
+ sourceHandle?: string | null;
3201
+ targetHandle?: string | null;
3202
+ animated?: boolean;
3203
+ hidden?: boolean;
3204
+ deletable?: boolean;
3205
+ selectable?: boolean;
3206
+ selected?: boolean;
3207
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3208
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3209
+ zIndex?: number;
3210
+ ariaLabel?: string;
3211
+ interactionWidth?: number;
3212
+ label?: import('react').ReactNode;
3213
+ labelStyle?: import('react').CSSProperties;
3214
+ labelShowBg?: boolean;
3215
+ labelBgStyle?: import('react').CSSProperties;
3216
+ labelBgPadding?: [number, number];
3217
+ labelBgBorderRadius?: number;
3218
+ style?: import('react').CSSProperties;
3219
+ className?: string;
3220
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3221
+ focusable?: boolean;
3222
+ data: import('..').RelationshipData;
3223
+ readonly id: string;
3224
+ readonly type: "relationship";
3225
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3226
+ source: string;
3227
+ target: string;
3228
+ sourceHandle?: string | null;
3229
+ targetHandle?: string | null;
3230
+ animated?: boolean;
3231
+ hidden?: boolean;
3232
+ deletable?: boolean;
3233
+ selectable?: boolean;
3234
+ selected?: boolean;
3235
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3236
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3237
+ zIndex?: number;
3238
+ ariaLabel?: string;
3239
+ interactionWidth?: number;
3240
+ label?: import('react').ReactNode;
3241
+ labelStyle?: import('react').CSSProperties;
3242
+ labelShowBg?: boolean;
3243
+ labelBgStyle?: import('react').CSSProperties;
3244
+ labelBgPadding?: [number, number];
3245
+ labelBgBorderRadius?: number;
3246
+ style?: import('react').CSSProperties;
3247
+ className?: string;
3248
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3249
+ focusable?: boolean;
3250
+ data: import('..').RelationshipData;
3251
+ readonly id: string;
3252
+ readonly type: "relationship";
3253
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3254
+ source: string;
3255
+ target: string;
3256
+ sourceHandle?: string | null;
3257
+ targetHandle?: string | null;
3258
+ animated?: boolean;
3259
+ hidden?: boolean;
3260
+ deletable?: boolean;
3261
+ selectable?: boolean;
3262
+ selected?: boolean;
3263
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3264
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3265
+ zIndex?: number;
3266
+ ariaLabel?: string;
3267
+ interactionWidth?: number;
3268
+ label?: import('react').ReactNode;
3269
+ labelStyle?: import('react').CSSProperties;
3270
+ labelShowBg?: boolean;
3271
+ labelBgStyle?: import('react').CSSProperties;
3272
+ labelBgPadding?: [number, number];
3273
+ labelBgBorderRadius?: number;
3274
+ style?: import('react').CSSProperties;
3275
+ className?: string;
3276
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3277
+ focusable?: boolean;
3278
+ data: import('..').RelationshipData;
3279
+ readonly id: string;
3280
+ readonly type: "relationship";
3281
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3282
+ source: string;
3283
+ target: string;
3284
+ sourceHandle?: string | null;
3285
+ targetHandle?: string | null;
3286
+ animated?: boolean;
3287
+ hidden?: boolean;
3288
+ deletable?: boolean;
3289
+ selectable?: boolean;
3290
+ selected?: boolean;
3291
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3292
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3293
+ zIndex?: number;
3294
+ ariaLabel?: string;
3295
+ interactionWidth?: number;
3296
+ label?: import('react').ReactNode;
3297
+ labelStyle?: import('react').CSSProperties;
3298
+ labelShowBg?: boolean;
3299
+ labelBgStyle?: import('react').CSSProperties;
3300
+ labelBgPadding?: [number, number];
3301
+ labelBgBorderRadius?: number;
3302
+ style?: import('react').CSSProperties;
3303
+ className?: string;
3304
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3305
+ focusable?: boolean;
3306
+ data: import('..').RelationshipData;
3307
+ readonly id: string;
3308
+ readonly type: "relationship";
3309
+ }>>), replace?: boolean | undefined) => void;
3310
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3311
+ source: string;
3312
+ target: string;
3313
+ sourceHandle?: string | null;
3314
+ targetHandle?: string | null;
3315
+ animated?: boolean;
3316
+ hidden?: boolean;
3317
+ deletable?: boolean;
3318
+ selectable?: boolean;
3319
+ selected?: boolean;
3320
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3321
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3322
+ zIndex?: number;
3323
+ ariaLabel?: string;
3324
+ interactionWidth?: number;
3325
+ label?: import('react').ReactNode;
3326
+ labelStyle?: import('react').CSSProperties;
3327
+ labelShowBg?: boolean;
3328
+ labelBgStyle?: import('react').CSSProperties;
3329
+ labelBgPadding?: [number, number];
3330
+ labelBgBorderRadius?: number;
3331
+ style?: import('react').CSSProperties;
3332
+ className?: string;
3333
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3334
+ focusable?: boolean;
3335
+ data: import('..').RelationshipData;
3336
+ readonly id: string;
3337
+ readonly type: "relationship";
3338
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3339
+ source: string;
3340
+ target: string;
3341
+ sourceHandle?: string | null;
3342
+ targetHandle?: string | null;
3343
+ animated?: boolean;
3344
+ hidden?: boolean;
3345
+ deletable?: boolean;
3346
+ selectable?: boolean;
3347
+ selected?: boolean;
3348
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3349
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3350
+ zIndex?: number;
3351
+ ariaLabel?: string;
3352
+ interactionWidth?: number;
3353
+ label?: import('react').ReactNode;
3354
+ labelStyle?: import('react').CSSProperties;
3355
+ labelShowBg?: boolean;
3356
+ labelBgStyle?: import('react').CSSProperties;
3357
+ labelBgPadding?: [number, number];
3358
+ labelBgBorderRadius?: number;
3359
+ style?: import('react').CSSProperties;
3360
+ className?: string;
3361
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
3362
+ focusable?: boolean;
3363
+ data: import('..').RelationshipData;
3364
+ readonly id: string;
3365
+ readonly type: "relationship";
3366
+ }>) => void) => () => void;
3367
+ }) => void;
1183
3368
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1184
3369
  fitDiagram: (xyStore: {
1185
3370
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1205,7 +3390,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1205
3390
  labelBgBorderRadius?: number;
1206
3391
  style?: import('react').CSSProperties;
1207
3392
  className?: string;
1208
- updatable?: import('@xyflow/react').EdgeUpdatable;
3393
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1209
3394
  focusable?: boolean;
1210
3395
  data: import('..').RelationshipData;
1211
3396
  readonly id: string;
@@ -1234,7 +3419,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1234
3419
  labelBgBorderRadius?: number;
1235
3420
  style?: import('react').CSSProperties;
1236
3421
  className?: string;
1237
- updatable?: import('@xyflow/react').EdgeUpdatable;
3422
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1238
3423
  focusable?: boolean;
1239
3424
  data: import('..').RelationshipData;
1240
3425
  readonly id: string;
@@ -1262,7 +3447,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1262
3447
  labelBgBorderRadius?: number;
1263
3448
  style?: import('react').CSSProperties;
1264
3449
  className?: string;
1265
- updatable?: import('@xyflow/react').EdgeUpdatable;
3450
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1266
3451
  focusable?: boolean;
1267
3452
  data: import('..').RelationshipData;
1268
3453
  readonly id: string;
@@ -1290,7 +3475,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1290
3475
  labelBgBorderRadius?: number;
1291
3476
  style?: import('react').CSSProperties;
1292
3477
  className?: string;
1293
- updatable?: import('@xyflow/react').EdgeUpdatable;
3478
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1294
3479
  focusable?: boolean;
1295
3480
  data: import('..').RelationshipData;
1296
3481
  readonly id: string;
@@ -1318,7 +3503,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1318
3503
  labelBgBorderRadius?: number;
1319
3504
  style?: import('react').CSSProperties;
1320
3505
  className?: string;
1321
- updatable?: import('@xyflow/react').EdgeUpdatable;
3506
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1322
3507
  focusable?: boolean;
1323
3508
  data: import('..').RelationshipData;
1324
3509
  readonly id: string;
@@ -1346,7 +3531,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1346
3531
  labelBgBorderRadius?: number;
1347
3532
  style?: import('react').CSSProperties;
1348
3533
  className?: string;
1349
- updatable?: import('@xyflow/react').EdgeUpdatable;
3534
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1350
3535
  focusable?: boolean;
1351
3536
  data: import('..').RelationshipData;
1352
3537
  readonly id: string;
@@ -1375,7 +3560,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1375
3560
  labelBgBorderRadius?: number;
1376
3561
  style?: import('react').CSSProperties;
1377
3562
  className?: string;
1378
- updatable?: import('@xyflow/react').EdgeUpdatable;
3563
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1379
3564
  focusable?: boolean;
1380
3565
  data: import('..').RelationshipData;
1381
3566
  readonly id: string;
@@ -1403,7 +3588,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1403
3588
  labelBgBorderRadius?: number;
1404
3589
  style?: import('react').CSSProperties;
1405
3590
  className?: string;
1406
- updatable?: import('@xyflow/react').EdgeUpdatable;
3591
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1407
3592
  focusable?: boolean;
1408
3593
  data: import('..').RelationshipData;
1409
3594
  readonly id: string;
@@ -1412,7 +3597,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1412
3597
  }) => void;
1413
3598
  nextDynamicStep: (increment?: number | undefined) => void;
1414
3599
  stopDynamicView: () => void;
1415
- } | Partial<{
3600
+ }) => {
1416
3601
  view: import('@likec4/core').DiagramView;
1417
3602
  readonly: boolean;
1418
3603
  showElementLinks: boolean;
@@ -1422,6 +3607,8 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1422
3607
  pannable: boolean;
1423
3608
  nodesDraggable: boolean;
1424
3609
  nodesSelectable: boolean;
3610
+ experimentalEdgeEditing: boolean;
3611
+ viewSyncDebounceTimeout: number | null;
1425
3612
  xyflow: import('..').XYFlowInstance;
1426
3613
  initialized: boolean;
1427
3614
  xyflowSynced: boolean;
@@ -1437,7 +3624,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1437
3624
  fromView: import('@likec4/core').ViewID;
1438
3625
  toView: import('@likec4/core').ViewID;
1439
3626
  element: import('@likec4/core').DiagramNode;
1440
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
3627
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1441
3628
  positionCorrected: boolean;
1442
3629
  } | null;
1443
3630
  viewportChanged: boolean;
@@ -1459,9 +3646,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1459
3646
  setLastClickedEdge: (edgeId: string | null) => void;
1460
3647
  resetLastClicked: () => void;
1461
3648
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1462
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1463
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1464
- fitDiagram: (xyStore: {
3649
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3650
+ cancelSaveManualLayout: () => void;
3651
+ triggerSaveManualLayout: (xystore: {
1465
3652
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1466
3653
  source: string;
1467
3654
  target: string;
@@ -1485,7 +3672,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1485
3672
  labelBgBorderRadius?: number;
1486
3673
  style?: import('react').CSSProperties;
1487
3674
  className?: string;
1488
- updatable?: import('@xyflow/react').EdgeUpdatable;
3675
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1489
3676
  focusable?: boolean;
1490
3677
  data: import('..').RelationshipData;
1491
3678
  readonly id: string;
@@ -1514,7 +3701,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1514
3701
  labelBgBorderRadius?: number;
1515
3702
  style?: import('react').CSSProperties;
1516
3703
  className?: string;
1517
- updatable?: import('@xyflow/react').EdgeUpdatable;
3704
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1518
3705
  focusable?: boolean;
1519
3706
  data: import('..').RelationshipData;
1520
3707
  readonly id: string;
@@ -1542,7 +3729,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1542
3729
  labelBgBorderRadius?: number;
1543
3730
  style?: import('react').CSSProperties;
1544
3731
  className?: string;
1545
- updatable?: import('@xyflow/react').EdgeUpdatable;
3732
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1546
3733
  focusable?: boolean;
1547
3734
  data: import('..').RelationshipData;
1548
3735
  readonly id: string;
@@ -1570,7 +3757,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1570
3757
  labelBgBorderRadius?: number;
1571
3758
  style?: import('react').CSSProperties;
1572
3759
  className?: string;
1573
- updatable?: import('@xyflow/react').EdgeUpdatable;
3760
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1574
3761
  focusable?: boolean;
1575
3762
  data: import('..').RelationshipData;
1576
3763
  readonly id: string;
@@ -1598,7 +3785,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1598
3785
  labelBgBorderRadius?: number;
1599
3786
  style?: import('react').CSSProperties;
1600
3787
  className?: string;
1601
- updatable?: import('@xyflow/react').EdgeUpdatable;
3788
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1602
3789
  focusable?: boolean;
1603
3790
  data: import('..').RelationshipData;
1604
3791
  readonly id: string;
@@ -1626,7 +3813,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1626
3813
  labelBgBorderRadius?: number;
1627
3814
  style?: import('react').CSSProperties;
1628
3815
  className?: string;
1629
- updatable?: import('@xyflow/react').EdgeUpdatable;
3816
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1630
3817
  focusable?: boolean;
1631
3818
  data: import('..').RelationshipData;
1632
3819
  readonly id: string;
@@ -1655,7 +3842,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1655
3842
  labelBgBorderRadius?: number;
1656
3843
  style?: import('react').CSSProperties;
1657
3844
  className?: string;
1658
- updatable?: import('@xyflow/react').EdgeUpdatable;
3845
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1659
3846
  focusable?: boolean;
1660
3847
  data: import('..').RelationshipData;
1661
3848
  readonly id: string;
@@ -1683,63 +3870,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1683
3870
  labelBgBorderRadius?: number;
1684
3871
  style?: import('react').CSSProperties;
1685
3872
  className?: string;
1686
- updatable?: import('@xyflow/react').EdgeUpdatable;
3873
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1687
3874
  focusable?: boolean;
1688
3875
  data: import('..').RelationshipData;
1689
3876
  readonly id: string;
1690
3877
  readonly type: "relationship";
1691
3878
  }>) => void) => () => void;
1692
3879
  }) => void;
1693
- nextDynamicStep: (increment?: number | undefined) => void;
1694
- stopDynamicView: () => void;
1695
- }> | ((state: {
1696
- view: import('@likec4/core').DiagramView;
1697
- readonly: boolean;
1698
- showElementLinks: boolean;
1699
- fitViewEnabled: boolean;
1700
- fitViewPadding: number;
1701
- zoomable: boolean;
1702
- pannable: boolean;
1703
- nodesDraggable: boolean;
1704
- nodesSelectable: boolean;
1705
- xyflow: import('..').XYFlowInstance;
1706
- initialized: boolean;
1707
- xyflowSynced: boolean;
1708
- activeDynamicViewStep: number | null;
1709
- lastClickedNodeId: string | null;
1710
- lastClickedEdgeId: string | null;
1711
- focusedNodeId: string | null;
1712
- hoveredNodeId: string | null;
1713
- hoveredEdgeId: string | null;
1714
- dimmed: ReadonlySet<string>;
1715
- previousViews: import('@likec4/core').DiagramView[];
1716
- lastOnNavigate: {
1717
- fromView: import('@likec4/core').ViewID;
1718
- toView: import('@likec4/core').ViewID;
1719
- element: import('@likec4/core').DiagramNode;
1720
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
1721
- positionCorrected: boolean;
1722
- } | null;
1723
- viewportChanged: boolean;
1724
- onChange: import('..').OnChange | null | undefined;
1725
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
1726
- onNodeClick: import('..').OnNodeClick | null | undefined;
1727
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
1728
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
1729
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
1730
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
1731
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
1732
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
1733
- isDynamicView: () => boolean;
1734
- updateView: (view: import('@likec4/core').DiagramView) => void;
1735
- focusOnNode: (nodeId: string) => void;
1736
- setHoveredNode: (nodeId: string | null) => void;
1737
- setHoveredEdge: (edgeId: string | null) => void;
1738
- setLastClickedNode: (nodeId: string | null) => void;
1739
- setLastClickedEdge: (edgeId: string | null) => void;
1740
- resetLastClicked: () => void;
1741
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1742
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1743
3880
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1744
3881
  fitDiagram: (xyStore: {
1745
3882
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1765,7 +3902,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1765
3902
  labelBgBorderRadius?: number;
1766
3903
  style?: import('react').CSSProperties;
1767
3904
  className?: string;
1768
- updatable?: import('@xyflow/react').EdgeUpdatable;
3905
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1769
3906
  focusable?: boolean;
1770
3907
  data: import('..').RelationshipData;
1771
3908
  readonly id: string;
@@ -1794,7 +3931,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1794
3931
  labelBgBorderRadius?: number;
1795
3932
  style?: import('react').CSSProperties;
1796
3933
  className?: string;
1797
- updatable?: import('@xyflow/react').EdgeUpdatable;
3934
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1798
3935
  focusable?: boolean;
1799
3936
  data: import('..').RelationshipData;
1800
3937
  readonly id: string;
@@ -1822,7 +3959,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1822
3959
  labelBgBorderRadius?: number;
1823
3960
  style?: import('react').CSSProperties;
1824
3961
  className?: string;
1825
- updatable?: import('@xyflow/react').EdgeUpdatable;
3962
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1826
3963
  focusable?: boolean;
1827
3964
  data: import('..').RelationshipData;
1828
3965
  readonly id: string;
@@ -1850,7 +3987,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1850
3987
  labelBgBorderRadius?: number;
1851
3988
  style?: import('react').CSSProperties;
1852
3989
  className?: string;
1853
- updatable?: import('@xyflow/react').EdgeUpdatable;
3990
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1854
3991
  focusable?: boolean;
1855
3992
  data: import('..').RelationshipData;
1856
3993
  readonly id: string;
@@ -1878,7 +4015,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1878
4015
  labelBgBorderRadius?: number;
1879
4016
  style?: import('react').CSSProperties;
1880
4017
  className?: string;
1881
- updatable?: import('@xyflow/react').EdgeUpdatable;
4018
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1882
4019
  focusable?: boolean;
1883
4020
  data: import('..').RelationshipData;
1884
4021
  readonly id: string;
@@ -1906,7 +4043,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1906
4043
  labelBgBorderRadius?: number;
1907
4044
  style?: import('react').CSSProperties;
1908
4045
  className?: string;
1909
- updatable?: import('@xyflow/react').EdgeUpdatable;
4046
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1910
4047
  focusable?: boolean;
1911
4048
  data: import('..').RelationshipData;
1912
4049
  readonly id: string;
@@ -1935,7 +4072,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1935
4072
  labelBgBorderRadius?: number;
1936
4073
  style?: import('react').CSSProperties;
1937
4074
  className?: string;
1938
- updatable?: import('@xyflow/react').EdgeUpdatable;
4075
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1939
4076
  focusable?: boolean;
1940
4077
  data: import('..').RelationshipData;
1941
4078
  readonly id: string;
@@ -1963,7 +4100,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1963
4100
  labelBgBorderRadius?: number;
1964
4101
  style?: import('react').CSSProperties;
1965
4102
  className?: string;
1966
- updatable?: import('@xyflow/react').EdgeUpdatable;
4103
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
1967
4104
  focusable?: boolean;
1968
4105
  data: import('..').RelationshipData;
1969
4106
  readonly id: string;
@@ -1972,7 +4109,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1972
4109
  }) => void;
1973
4110
  nextDynamicStep: (increment?: number | undefined) => void;
1974
4111
  stopDynamicView: () => void;
1975
- }) => {
4112
+ } | Partial<{
1976
4113
  view: import('@likec4/core').DiagramView;
1977
4114
  readonly: boolean;
1978
4115
  showElementLinks: boolean;
@@ -1982,6 +4119,8 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1982
4119
  pannable: boolean;
1983
4120
  nodesDraggable: boolean;
1984
4121
  nodesSelectable: boolean;
4122
+ experimentalEdgeEditing: boolean;
4123
+ viewSyncDebounceTimeout: number | null;
1985
4124
  xyflow: import('..').XYFlowInstance;
1986
4125
  initialized: boolean;
1987
4126
  xyflowSynced: boolean;
@@ -1997,7 +4136,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1997
4136
  fromView: import('@likec4/core').ViewID;
1998
4137
  toView: import('@likec4/core').ViewID;
1999
4138
  element: import('@likec4/core').DiagramNode;
2000
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
4139
+ elementScreenPosition: import('@xyflow/system').XYPosition;
2001
4140
  positionCorrected: boolean;
2002
4141
  } | null;
2003
4142
  viewportChanged: boolean;
@@ -2019,9 +4158,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2019
4158
  setLastClickedEdge: (edgeId: string | null) => void;
2020
4159
  resetLastClicked: () => void;
2021
4160
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2022
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
2023
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2024
- fitDiagram: (xyStore: {
4161
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
4162
+ cancelSaveManualLayout: () => void;
4163
+ triggerSaveManualLayout: (xystore: {
2025
4164
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2026
4165
  source: string;
2027
4166
  target: string;
@@ -2045,7 +4184,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2045
4184
  labelBgBorderRadius?: number;
2046
4185
  style?: import('react').CSSProperties;
2047
4186
  className?: string;
2048
- updatable?: import('@xyflow/react').EdgeUpdatable;
4187
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2049
4188
  focusable?: boolean;
2050
4189
  data: import('..').RelationshipData;
2051
4190
  readonly id: string;
@@ -2074,7 +4213,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2074
4213
  labelBgBorderRadius?: number;
2075
4214
  style?: import('react').CSSProperties;
2076
4215
  className?: string;
2077
- updatable?: import('@xyflow/react').EdgeUpdatable;
4216
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2078
4217
  focusable?: boolean;
2079
4218
  data: import('..').RelationshipData;
2080
4219
  readonly id: string;
@@ -2102,7 +4241,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2102
4241
  labelBgBorderRadius?: number;
2103
4242
  style?: import('react').CSSProperties;
2104
4243
  className?: string;
2105
- updatable?: import('@xyflow/react').EdgeUpdatable;
4244
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2106
4245
  focusable?: boolean;
2107
4246
  data: import('..').RelationshipData;
2108
4247
  readonly id: string;
@@ -2130,7 +4269,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2130
4269
  labelBgBorderRadius?: number;
2131
4270
  style?: import('react').CSSProperties;
2132
4271
  className?: string;
2133
- updatable?: import('@xyflow/react').EdgeUpdatable;
4272
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2134
4273
  focusable?: boolean;
2135
4274
  data: import('..').RelationshipData;
2136
4275
  readonly id: string;
@@ -2158,7 +4297,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2158
4297
  labelBgBorderRadius?: number;
2159
4298
  style?: import('react').CSSProperties;
2160
4299
  className?: string;
2161
- updatable?: import('@xyflow/react').EdgeUpdatable;
4300
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2162
4301
  focusable?: boolean;
2163
4302
  data: import('..').RelationshipData;
2164
4303
  readonly id: string;
@@ -2186,7 +4325,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2186
4325
  labelBgBorderRadius?: number;
2187
4326
  style?: import('react').CSSProperties;
2188
4327
  className?: string;
2189
- updatable?: import('@xyflow/react').EdgeUpdatable;
4328
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2190
4329
  focusable?: boolean;
2191
4330
  data: import('..').RelationshipData;
2192
4331
  readonly id: string;
@@ -2215,7 +4354,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2215
4354
  labelBgBorderRadius?: number;
2216
4355
  style?: import('react').CSSProperties;
2217
4356
  className?: string;
2218
- updatable?: import('@xyflow/react').EdgeUpdatable;
4357
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2219
4358
  focusable?: boolean;
2220
4359
  data: import('..').RelationshipData;
2221
4360
  readonly id: string;
@@ -2243,63 +4382,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2243
4382
  labelBgBorderRadius?: number;
2244
4383
  style?: import('react').CSSProperties;
2245
4384
  className?: string;
2246
- updatable?: import('@xyflow/react').EdgeUpdatable;
4385
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2247
4386
  focusable?: boolean;
2248
4387
  data: import('..').RelationshipData;
2249
4388
  readonly id: string;
2250
4389
  readonly type: "relationship";
2251
4390
  }>) => void) => () => void;
2252
4391
  }) => void;
2253
- nextDynamicStep: (increment?: number | undefined) => void;
2254
- stopDynamicView: () => void;
2255
- } | Partial<{
2256
- view: import('@likec4/core').DiagramView;
2257
- readonly: boolean;
2258
- showElementLinks: boolean;
2259
- fitViewEnabled: boolean;
2260
- fitViewPadding: number;
2261
- zoomable: boolean;
2262
- pannable: boolean;
2263
- nodesDraggable: boolean;
2264
- nodesSelectable: boolean;
2265
- xyflow: import('..').XYFlowInstance;
2266
- initialized: boolean;
2267
- xyflowSynced: boolean;
2268
- activeDynamicViewStep: number | null;
2269
- lastClickedNodeId: string | null;
2270
- lastClickedEdgeId: string | null;
2271
- focusedNodeId: string | null;
2272
- hoveredNodeId: string | null;
2273
- hoveredEdgeId: string | null;
2274
- dimmed: ReadonlySet<string>;
2275
- previousViews: import('@likec4/core').DiagramView[];
2276
- lastOnNavigate: {
2277
- fromView: import('@likec4/core').ViewID;
2278
- toView: import('@likec4/core').ViewID;
2279
- element: import('@likec4/core').DiagramNode;
2280
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
2281
- positionCorrected: boolean;
2282
- } | null;
2283
- viewportChanged: boolean;
2284
- onChange: import('..').OnChange | null | undefined;
2285
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
2286
- onNodeClick: import('..').OnNodeClick | null | undefined;
2287
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2288
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2289
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
2290
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2291
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
2292
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2293
- isDynamicView: () => boolean;
2294
- updateView: (view: import('@likec4/core').DiagramView) => void;
2295
- focusOnNode: (nodeId: string) => void;
2296
- setHoveredNode: (nodeId: string | null) => void;
2297
- setHoveredEdge: (edgeId: string | null) => void;
2298
- setLastClickedNode: (nodeId: string | null) => void;
2299
- setLastClickedEdge: (edgeId: string | null) => void;
2300
- resetLastClicked: () => void;
2301
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2302
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
2303
4392
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2304
4393
  fitDiagram: (xyStore: {
2305
4394
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -2325,7 +4414,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2325
4414
  labelBgBorderRadius?: number;
2326
4415
  style?: import('react').CSSProperties;
2327
4416
  className?: string;
2328
- updatable?: import('@xyflow/react').EdgeUpdatable;
4417
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2329
4418
  focusable?: boolean;
2330
4419
  data: import('..').RelationshipData;
2331
4420
  readonly id: string;
@@ -2354,7 +4443,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2354
4443
  labelBgBorderRadius?: number;
2355
4444
  style?: import('react').CSSProperties;
2356
4445
  className?: string;
2357
- updatable?: import('@xyflow/react').EdgeUpdatable;
4446
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2358
4447
  focusable?: boolean;
2359
4448
  data: import('..').RelationshipData;
2360
4449
  readonly id: string;
@@ -2382,7 +4471,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2382
4471
  labelBgBorderRadius?: number;
2383
4472
  style?: import('react').CSSProperties;
2384
4473
  className?: string;
2385
- updatable?: import('@xyflow/react').EdgeUpdatable;
4474
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2386
4475
  focusable?: boolean;
2387
4476
  data: import('..').RelationshipData;
2388
4477
  readonly id: string;
@@ -2410,7 +4499,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2410
4499
  labelBgBorderRadius?: number;
2411
4500
  style?: import('react').CSSProperties;
2412
4501
  className?: string;
2413
- updatable?: import('@xyflow/react').EdgeUpdatable;
4502
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2414
4503
  focusable?: boolean;
2415
4504
  data: import('..').RelationshipData;
2416
4505
  readonly id: string;
@@ -2438,7 +4527,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2438
4527
  labelBgBorderRadius?: number;
2439
4528
  style?: import('react').CSSProperties;
2440
4529
  className?: string;
2441
- updatable?: import('@xyflow/react').EdgeUpdatable;
4530
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2442
4531
  focusable?: boolean;
2443
4532
  data: import('..').RelationshipData;
2444
4533
  readonly id: string;
@@ -2466,7 +4555,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2466
4555
  labelBgBorderRadius?: number;
2467
4556
  style?: import('react').CSSProperties;
2468
4557
  className?: string;
2469
- updatable?: import('@xyflow/react').EdgeUpdatable;
4558
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2470
4559
  focusable?: boolean;
2471
4560
  data: import('..').RelationshipData;
2472
4561
  readonly id: string;
@@ -2495,7 +4584,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2495
4584
  labelBgBorderRadius?: number;
2496
4585
  style?: import('react').CSSProperties;
2497
4586
  className?: string;
2498
- updatable?: import('@xyflow/react').EdgeUpdatable;
4587
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2499
4588
  focusable?: boolean;
2500
4589
  data: import('..').RelationshipData;
2501
4590
  readonly id: string;
@@ -2523,7 +4612,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2523
4612
  labelBgBorderRadius?: number;
2524
4613
  style?: import('react').CSSProperties;
2525
4614
  className?: string;
2526
- updatable?: import('@xyflow/react').EdgeUpdatable;
4615
+ reconnectable?: boolean | import('@xyflow/system').HandleType;
2527
4616
  focusable?: boolean;
2528
4617
  data: import('..').RelationshipData;
2529
4618
  readonly id: string;