@likec4/diagram 1.2.1 → 1.3.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 (56) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +21 -3
  3. package/dist/index.mjs +1335 -1240
  4. package/dist/state/DiagramContext.d.ts +2263 -175
  5. package/dist/state/diagramStore.d.ts +2272 -180
  6. package/dist/state/useDiagramStore.d.ts +2409 -321
  7. package/dist/style.css +123 -92
  8. package/dist/theme.css.d.ts +0 -1
  9. package/dist/ui/OptionsPanel.d.ts +3 -1
  10. package/dist/xyflow/XYFlow.d.ts +2 -1
  11. package/dist/xyflow/XYFlowInner.d.ts +1 -1
  12. package/dist/xyflow/const.d.ts +1 -1
  13. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  14. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -4
  15. package/dist/xyflow/edges/utils.d.ts +4 -2
  16. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +3 -1
  17. package/dist/xyflow/nodes/element/ElementNode.d.ts +1 -1
  18. package/dist/xyflow/nodes/element/index.d.ts +1 -1
  19. package/dist/xyflow/types.d.ts +2 -2
  20. package/dist/xyflow/utils.d.ts +3 -0
  21. package/package.json +15 -14
  22. package/src/LikeC4Diagram.css.ts +4 -4
  23. package/src/LikeC4Diagram.props.ts +23 -2
  24. package/src/LikeC4Diagram.tsx +79 -31
  25. package/src/globals.css.ts +0 -1
  26. package/src/mantine/theme.ts +1 -0
  27. package/src/state/DiagramContext.tsx +0 -1
  28. package/src/state/diagramStore.ts +177 -100
  29. package/src/theme.css.ts +0 -1
  30. package/src/ui/DiagramTitlePanel.tsx +3 -3
  31. package/src/ui/DynamicViewWalkthrough.css.ts +3 -2
  32. package/src/ui/DynamicViewWalkthrough.tsx +36 -17
  33. package/src/ui/OptionsPanel.tsx +12 -12
  34. package/src/ui/options/NodeOptions.tsx +16 -19
  35. package/src/xyflow/FitviewOnDiagramChange.tsx +15 -23
  36. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +3 -6
  37. package/src/xyflow/SyncWithDiagram.tsx +21 -2
  38. package/src/xyflow/XYFlow.tsx +20 -23
  39. package/src/xyflow/XYFlowEvents.tsx +26 -8
  40. package/src/xyflow/XYFlowInner.tsx +5 -4
  41. package/src/xyflow/const.ts +1 -1
  42. package/src/xyflow/diagram-to-xyflow.ts +5 -31
  43. package/src/xyflow/edges/RelationshipEdge.tsx +158 -112
  44. package/src/xyflow/edges/edges.css.ts +32 -21
  45. package/src/xyflow/edges/utils.ts +5 -2
  46. package/src/xyflow/hooks/useLayoutConstraints.ts +17 -3
  47. package/src/xyflow/nodes/compound/CompoundNode.css.ts +40 -32
  48. package/src/xyflow/nodes/compound/CompoundNode.tsx +36 -26
  49. package/src/xyflow/nodes/element/ElementNode.tsx +20 -6
  50. package/src/xyflow/nodes/element/element.css.ts +15 -15
  51. package/src/xyflow/nodes/element/index.ts +1 -1
  52. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +7 -3
  53. package/src/xyflow/types.ts +5 -2
  54. package/src/xyflow/utils.ts +48 -0
  55. package/dist/ui/index.d.ts +0 -2
  56. package/src/ui/index.ts +0 -3
@@ -11,6 +11,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
11
11
  pannable: boolean;
12
12
  nodesDraggable: boolean;
13
13
  nodesSelectable: boolean;
14
+ experimentalEdgeEditing: boolean;
15
+ viewSyncState: "synced" | "changed";
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,236 @@ 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
+ triggerSaveManualLayout: (xystore: {
56
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
57
+ source: string;
58
+ target: string;
59
+ sourceHandle?: string | null;
60
+ targetHandle?: string | null;
61
+ animated?: boolean;
62
+ hidden?: boolean;
63
+ deletable?: boolean;
64
+ selectable?: boolean;
65
+ selected?: boolean;
66
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
67
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
68
+ zIndex?: number;
69
+ ariaLabel?: string;
70
+ interactionWidth?: number;
71
+ label?: import('react').ReactNode;
72
+ labelStyle?: import('react').CSSProperties;
73
+ labelShowBg?: boolean;
74
+ labelBgStyle?: import('react').CSSProperties;
75
+ labelBgPadding?: [number, number];
76
+ labelBgBorderRadius?: number;
77
+ style?: import('react').CSSProperties;
78
+ className?: string;
79
+ updatable?: import('@xyflow/react').EdgeUpdatable;
80
+ focusable?: boolean;
81
+ data: import('..').RelationshipData;
82
+ readonly id: string;
83
+ readonly type: "relationship";
84
+ }>;
85
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
86
+ source: string;
87
+ target: string;
88
+ sourceHandle?: string | null;
89
+ targetHandle?: string | null;
90
+ animated?: boolean;
91
+ hidden?: boolean;
92
+ deletable?: boolean;
93
+ selectable?: boolean;
94
+ selected?: boolean;
95
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
96
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
97
+ zIndex?: number;
98
+ ariaLabel?: string;
99
+ interactionWidth?: number;
100
+ label?: import('react').ReactNode;
101
+ labelStyle?: import('react').CSSProperties;
102
+ labelShowBg?: boolean;
103
+ labelBgStyle?: import('react').CSSProperties;
104
+ labelBgPadding?: [number, number];
105
+ labelBgBorderRadius?: number;
106
+ style?: import('react').CSSProperties;
107
+ className?: string;
108
+ updatable?: import('@xyflow/react').EdgeUpdatable;
109
+ focusable?: boolean;
110
+ data: import('..').RelationshipData;
111
+ readonly id: string;
112
+ readonly type: "relationship";
113
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
114
+ source: string;
115
+ target: string;
116
+ sourceHandle?: string | null;
117
+ targetHandle?: string | null;
118
+ animated?: boolean;
119
+ hidden?: boolean;
120
+ deletable?: boolean;
121
+ selectable?: boolean;
122
+ selected?: boolean;
123
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
124
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
125
+ zIndex?: number;
126
+ ariaLabel?: string;
127
+ interactionWidth?: number;
128
+ label?: import('react').ReactNode;
129
+ labelStyle?: import('react').CSSProperties;
130
+ labelShowBg?: boolean;
131
+ labelBgStyle?: import('react').CSSProperties;
132
+ labelBgPadding?: [number, number];
133
+ labelBgBorderRadius?: number;
134
+ style?: import('react').CSSProperties;
135
+ className?: string;
136
+ updatable?: import('@xyflow/react').EdgeUpdatable;
137
+ focusable?: boolean;
138
+ data: import('..').RelationshipData;
139
+ readonly id: string;
140
+ readonly type: "relationship";
141
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
142
+ source: string;
143
+ target: string;
144
+ sourceHandle?: string | null;
145
+ targetHandle?: string | null;
146
+ animated?: boolean;
147
+ hidden?: boolean;
148
+ deletable?: boolean;
149
+ selectable?: boolean;
150
+ selected?: boolean;
151
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
152
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
153
+ zIndex?: number;
154
+ ariaLabel?: string;
155
+ interactionWidth?: number;
156
+ label?: import('react').ReactNode;
157
+ labelStyle?: import('react').CSSProperties;
158
+ labelShowBg?: boolean;
159
+ labelBgStyle?: import('react').CSSProperties;
160
+ labelBgPadding?: [number, number];
161
+ labelBgBorderRadius?: number;
162
+ style?: import('react').CSSProperties;
163
+ className?: string;
164
+ updatable?: import('@xyflow/react').EdgeUpdatable;
165
+ focusable?: boolean;
166
+ data: import('..').RelationshipData;
167
+ readonly id: string;
168
+ readonly type: "relationship";
169
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
170
+ source: string;
171
+ target: string;
172
+ sourceHandle?: string | null;
173
+ targetHandle?: string | null;
174
+ animated?: boolean;
175
+ hidden?: boolean;
176
+ deletable?: boolean;
177
+ selectable?: boolean;
178
+ selected?: boolean;
179
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
180
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
181
+ zIndex?: number;
182
+ ariaLabel?: string;
183
+ interactionWidth?: number;
184
+ label?: import('react').ReactNode;
185
+ labelStyle?: import('react').CSSProperties;
186
+ labelShowBg?: boolean;
187
+ labelBgStyle?: import('react').CSSProperties;
188
+ labelBgPadding?: [number, number];
189
+ labelBgBorderRadius?: number;
190
+ style?: import('react').CSSProperties;
191
+ className?: string;
192
+ updatable?: import('@xyflow/react').EdgeUpdatable;
193
+ focusable?: boolean;
194
+ data: import('..').RelationshipData;
195
+ readonly id: string;
196
+ readonly type: "relationship";
197
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
198
+ source: string;
199
+ target: string;
200
+ sourceHandle?: string | null;
201
+ targetHandle?: string | null;
202
+ animated?: boolean;
203
+ hidden?: boolean;
204
+ deletable?: boolean;
205
+ selectable?: boolean;
206
+ selected?: boolean;
207
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
208
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
209
+ zIndex?: number;
210
+ ariaLabel?: string;
211
+ interactionWidth?: number;
212
+ label?: import('react').ReactNode;
213
+ labelStyle?: import('react').CSSProperties;
214
+ labelShowBg?: boolean;
215
+ labelBgStyle?: import('react').CSSProperties;
216
+ labelBgPadding?: [number, number];
217
+ labelBgBorderRadius?: number;
218
+ style?: import('react').CSSProperties;
219
+ className?: string;
220
+ updatable?: import('@xyflow/react').EdgeUpdatable;
221
+ focusable?: boolean;
222
+ data: import('..').RelationshipData;
223
+ readonly id: string;
224
+ readonly type: "relationship";
225
+ }>>), replace?: boolean | undefined) => void;
226
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
227
+ source: string;
228
+ target: string;
229
+ sourceHandle?: string | null;
230
+ targetHandle?: string | null;
231
+ animated?: boolean;
232
+ hidden?: boolean;
233
+ deletable?: boolean;
234
+ selectable?: boolean;
235
+ selected?: boolean;
236
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
237
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
238
+ zIndex?: number;
239
+ ariaLabel?: string;
240
+ interactionWidth?: number;
241
+ label?: import('react').ReactNode;
242
+ labelStyle?: import('react').CSSProperties;
243
+ labelShowBg?: boolean;
244
+ labelBgStyle?: import('react').CSSProperties;
245
+ labelBgPadding?: [number, number];
246
+ labelBgBorderRadius?: number;
247
+ style?: import('react').CSSProperties;
248
+ className?: string;
249
+ updatable?: import('@xyflow/react').EdgeUpdatable;
250
+ focusable?: boolean;
251
+ data: import('..').RelationshipData;
252
+ readonly id: string;
253
+ readonly type: "relationship";
254
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
255
+ source: string;
256
+ target: string;
257
+ sourceHandle?: string | null;
258
+ targetHandle?: string | null;
259
+ animated?: boolean;
260
+ hidden?: boolean;
261
+ deletable?: boolean;
262
+ selectable?: boolean;
263
+ selected?: boolean;
264
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
265
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
266
+ zIndex?: number;
267
+ ariaLabel?: string;
268
+ interactionWidth?: number;
269
+ label?: import('react').ReactNode;
270
+ labelStyle?: import('react').CSSProperties;
271
+ labelShowBg?: boolean;
272
+ labelBgStyle?: import('react').CSSProperties;
273
+ labelBgPadding?: [number, number];
274
+ labelBgBorderRadius?: number;
275
+ style?: import('react').CSSProperties;
276
+ className?: string;
277
+ updatable?: import('@xyflow/react').EdgeUpdatable;
278
+ focusable?: boolean;
279
+ data: import('..').RelationshipData;
280
+ readonly id: string;
281
+ readonly type: "relationship";
282
+ }>) => void) => () => void;
283
+ }) => void;
52
284
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
53
285
  fitDiagram: (xyStore: {
54
286
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -293,6 +525,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
293
525
  pannable: boolean;
294
526
  nodesDraggable: boolean;
295
527
  nodesSelectable: boolean;
528
+ experimentalEdgeEditing: boolean;
529
+ viewSyncState: "synced" | "changed";
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,8 @@ 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
+ triggerSaveManualLayout: (xystore: {
336
570
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
337
571
  source: string;
338
572
  target: string;
@@ -561,56 +795,6 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
561
795
  readonly type: "relationship";
562
796
  }>) => void) => () => void;
563
797
  }) => 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
798
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
615
799
  fitDiagram: (xyStore: {
616
800
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -843,8 +1027,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
843
1027
  }) => void;
844
1028
  nextDynamicStep: (increment?: number | undefined) => void;
845
1029
  stopDynamicView: () => void;
846
- }) => void): () => void;
847
- <U>(selector: (state: {
1030
+ }, previousSelectedState: {
848
1031
  view: import('@likec4/core').DiagramView;
849
1032
  readonly: boolean;
850
1033
  showElementLinks: boolean;
@@ -854,6 +1037,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
854
1037
  pannable: boolean;
855
1038
  nodesDraggable: boolean;
856
1039
  nodesSelectable: boolean;
1040
+ experimentalEdgeEditing: boolean;
1041
+ viewSyncState: "synced" | "changed";
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,236 @@ 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
+ triggerSaveManualLayout: (xystore: {
1082
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1083
+ source: string;
1084
+ target: string;
1085
+ sourceHandle?: string | null;
1086
+ targetHandle?: string | null;
1087
+ animated?: boolean;
1088
+ hidden?: boolean;
1089
+ deletable?: boolean;
1090
+ selectable?: boolean;
1091
+ selected?: boolean;
1092
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1093
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1094
+ zIndex?: number;
1095
+ ariaLabel?: string;
1096
+ interactionWidth?: number;
1097
+ label?: import('react').ReactNode;
1098
+ labelStyle?: import('react').CSSProperties;
1099
+ labelShowBg?: boolean;
1100
+ labelBgStyle?: import('react').CSSProperties;
1101
+ labelBgPadding?: [number, number];
1102
+ labelBgBorderRadius?: number;
1103
+ style?: import('react').CSSProperties;
1104
+ className?: string;
1105
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1106
+ focusable?: boolean;
1107
+ data: import('..').RelationshipData;
1108
+ readonly id: string;
1109
+ readonly type: "relationship";
1110
+ }>;
1111
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1112
+ source: string;
1113
+ target: string;
1114
+ sourceHandle?: string | null;
1115
+ targetHandle?: string | null;
1116
+ animated?: boolean;
1117
+ hidden?: boolean;
1118
+ deletable?: boolean;
1119
+ selectable?: boolean;
1120
+ selected?: boolean;
1121
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1122
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1123
+ zIndex?: number;
1124
+ ariaLabel?: string;
1125
+ interactionWidth?: number;
1126
+ label?: import('react').ReactNode;
1127
+ labelStyle?: import('react').CSSProperties;
1128
+ labelShowBg?: boolean;
1129
+ labelBgStyle?: import('react').CSSProperties;
1130
+ labelBgPadding?: [number, number];
1131
+ labelBgBorderRadius?: number;
1132
+ style?: import('react').CSSProperties;
1133
+ className?: string;
1134
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1135
+ focusable?: boolean;
1136
+ data: import('..').RelationshipData;
1137
+ readonly id: string;
1138
+ readonly type: "relationship";
1139
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1140
+ source: string;
1141
+ target: string;
1142
+ sourceHandle?: string | null;
1143
+ targetHandle?: string | null;
1144
+ animated?: boolean;
1145
+ hidden?: boolean;
1146
+ deletable?: boolean;
1147
+ selectable?: boolean;
1148
+ selected?: boolean;
1149
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1150
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1151
+ zIndex?: number;
1152
+ ariaLabel?: string;
1153
+ interactionWidth?: number;
1154
+ label?: import('react').ReactNode;
1155
+ labelStyle?: import('react').CSSProperties;
1156
+ labelShowBg?: boolean;
1157
+ labelBgStyle?: import('react').CSSProperties;
1158
+ labelBgPadding?: [number, number];
1159
+ labelBgBorderRadius?: number;
1160
+ style?: import('react').CSSProperties;
1161
+ className?: string;
1162
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1163
+ focusable?: boolean;
1164
+ data: import('..').RelationshipData;
1165
+ readonly id: string;
1166
+ readonly type: "relationship";
1167
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1168
+ source: string;
1169
+ target: string;
1170
+ sourceHandle?: string | null;
1171
+ targetHandle?: string | null;
1172
+ animated?: boolean;
1173
+ hidden?: boolean;
1174
+ deletable?: boolean;
1175
+ selectable?: boolean;
1176
+ selected?: boolean;
1177
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1178
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1179
+ zIndex?: number;
1180
+ ariaLabel?: string;
1181
+ interactionWidth?: number;
1182
+ label?: import('react').ReactNode;
1183
+ labelStyle?: import('react').CSSProperties;
1184
+ labelShowBg?: boolean;
1185
+ labelBgStyle?: import('react').CSSProperties;
1186
+ labelBgPadding?: [number, number];
1187
+ labelBgBorderRadius?: number;
1188
+ style?: import('react').CSSProperties;
1189
+ className?: string;
1190
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1191
+ focusable?: boolean;
1192
+ data: import('..').RelationshipData;
1193
+ readonly id: string;
1194
+ readonly type: "relationship";
1195
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1196
+ source: string;
1197
+ target: string;
1198
+ sourceHandle?: string | null;
1199
+ targetHandle?: string | null;
1200
+ animated?: boolean;
1201
+ hidden?: boolean;
1202
+ deletable?: boolean;
1203
+ selectable?: boolean;
1204
+ selected?: boolean;
1205
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1206
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1207
+ zIndex?: number;
1208
+ ariaLabel?: string;
1209
+ interactionWidth?: number;
1210
+ label?: import('react').ReactNode;
1211
+ labelStyle?: import('react').CSSProperties;
1212
+ labelShowBg?: boolean;
1213
+ labelBgStyle?: import('react').CSSProperties;
1214
+ labelBgPadding?: [number, number];
1215
+ labelBgBorderRadius?: number;
1216
+ style?: import('react').CSSProperties;
1217
+ className?: string;
1218
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1219
+ focusable?: boolean;
1220
+ data: import('..').RelationshipData;
1221
+ readonly id: string;
1222
+ readonly type: "relationship";
1223
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1224
+ source: string;
1225
+ target: string;
1226
+ sourceHandle?: string | null;
1227
+ targetHandle?: string | null;
1228
+ animated?: boolean;
1229
+ hidden?: boolean;
1230
+ deletable?: boolean;
1231
+ selectable?: boolean;
1232
+ selected?: boolean;
1233
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1234
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1235
+ zIndex?: number;
1236
+ ariaLabel?: string;
1237
+ interactionWidth?: number;
1238
+ label?: import('react').ReactNode;
1239
+ labelStyle?: import('react').CSSProperties;
1240
+ labelShowBg?: boolean;
1241
+ labelBgStyle?: import('react').CSSProperties;
1242
+ labelBgPadding?: [number, number];
1243
+ labelBgBorderRadius?: number;
1244
+ style?: import('react').CSSProperties;
1245
+ className?: string;
1246
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1247
+ focusable?: boolean;
1248
+ data: import('..').RelationshipData;
1249
+ readonly id: string;
1250
+ readonly type: "relationship";
1251
+ }>>), replace?: boolean | undefined) => void;
1252
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1253
+ source: string;
1254
+ target: string;
1255
+ sourceHandle?: string | null;
1256
+ targetHandle?: string | null;
1257
+ animated?: boolean;
1258
+ hidden?: boolean;
1259
+ deletable?: boolean;
1260
+ selectable?: boolean;
1261
+ selected?: boolean;
1262
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1263
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1264
+ zIndex?: number;
1265
+ ariaLabel?: string;
1266
+ interactionWidth?: number;
1267
+ label?: import('react').ReactNode;
1268
+ labelStyle?: import('react').CSSProperties;
1269
+ labelShowBg?: boolean;
1270
+ labelBgStyle?: import('react').CSSProperties;
1271
+ labelBgPadding?: [number, number];
1272
+ labelBgBorderRadius?: number;
1273
+ style?: import('react').CSSProperties;
1274
+ className?: string;
1275
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1276
+ focusable?: boolean;
1277
+ data: import('..').RelationshipData;
1278
+ readonly id: string;
1279
+ readonly type: "relationship";
1280
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1281
+ source: string;
1282
+ target: string;
1283
+ sourceHandle?: string | null;
1284
+ targetHandle?: string | null;
1285
+ animated?: boolean;
1286
+ hidden?: boolean;
1287
+ deletable?: boolean;
1288
+ selectable?: boolean;
1289
+ selected?: boolean;
1290
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1291
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1292
+ zIndex?: number;
1293
+ ariaLabel?: string;
1294
+ interactionWidth?: number;
1295
+ label?: import('react').ReactNode;
1296
+ labelStyle?: import('react').CSSProperties;
1297
+ labelShowBg?: boolean;
1298
+ labelBgStyle?: import('react').CSSProperties;
1299
+ labelBgPadding?: [number, number];
1300
+ labelBgBorderRadius?: number;
1301
+ style?: import('react').CSSProperties;
1302
+ className?: string;
1303
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1304
+ focusable?: boolean;
1305
+ data: import('..').RelationshipData;
1306
+ readonly id: string;
1307
+ readonly type: "relationship";
1308
+ }>) => void) => () => void;
1309
+ }) => void;
895
1310
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
896
1311
  fitDiagram: (xyStore: {
897
1312
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1124,9 +1539,522 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1124
1539
  }) => void;
1125
1540
  nextDynamicStep: (increment?: number | undefined) => void;
1126
1541
  stopDynamicView: () => void;
1127
- }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
1128
- equalityFn?: (a: U, b: U) => boolean;
1129
- fireImmediately?: boolean;
1542
+ }) => void): () => void;
1543
+ <U>(selector: (state: {
1544
+ view: import('@likec4/core').DiagramView;
1545
+ readonly: boolean;
1546
+ showElementLinks: boolean;
1547
+ fitViewEnabled: boolean;
1548
+ fitViewPadding: number;
1549
+ zoomable: boolean;
1550
+ pannable: boolean;
1551
+ nodesDraggable: boolean;
1552
+ nodesSelectable: boolean;
1553
+ experimentalEdgeEditing: boolean;
1554
+ viewSyncState: "synced" | "changed";
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
+ triggerSaveManualLayout: (xystore: {
1595
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1596
+ source: string;
1597
+ target: string;
1598
+ sourceHandle?: string | null;
1599
+ targetHandle?: string | null;
1600
+ animated?: boolean;
1601
+ hidden?: boolean;
1602
+ deletable?: boolean;
1603
+ selectable?: boolean;
1604
+ selected?: boolean;
1605
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1606
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1607
+ zIndex?: number;
1608
+ ariaLabel?: string;
1609
+ interactionWidth?: number;
1610
+ label?: import('react').ReactNode;
1611
+ labelStyle?: import('react').CSSProperties;
1612
+ labelShowBg?: boolean;
1613
+ labelBgStyle?: import('react').CSSProperties;
1614
+ labelBgPadding?: [number, number];
1615
+ labelBgBorderRadius?: number;
1616
+ style?: import('react').CSSProperties;
1617
+ className?: string;
1618
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1619
+ focusable?: boolean;
1620
+ data: import('..').RelationshipData;
1621
+ readonly id: string;
1622
+ readonly type: "relationship";
1623
+ }>;
1624
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1625
+ source: string;
1626
+ target: string;
1627
+ sourceHandle?: string | null;
1628
+ targetHandle?: string | null;
1629
+ animated?: boolean;
1630
+ hidden?: boolean;
1631
+ deletable?: boolean;
1632
+ selectable?: boolean;
1633
+ selected?: boolean;
1634
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1635
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1636
+ zIndex?: number;
1637
+ ariaLabel?: string;
1638
+ interactionWidth?: number;
1639
+ label?: import('react').ReactNode;
1640
+ labelStyle?: import('react').CSSProperties;
1641
+ labelShowBg?: boolean;
1642
+ labelBgStyle?: import('react').CSSProperties;
1643
+ labelBgPadding?: [number, number];
1644
+ labelBgBorderRadius?: number;
1645
+ style?: import('react').CSSProperties;
1646
+ className?: string;
1647
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1648
+ focusable?: boolean;
1649
+ data: import('..').RelationshipData;
1650
+ readonly id: string;
1651
+ readonly type: "relationship";
1652
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1653
+ source: string;
1654
+ target: string;
1655
+ sourceHandle?: string | null;
1656
+ targetHandle?: string | null;
1657
+ animated?: boolean;
1658
+ hidden?: boolean;
1659
+ deletable?: boolean;
1660
+ selectable?: boolean;
1661
+ selected?: boolean;
1662
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1663
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1664
+ zIndex?: number;
1665
+ ariaLabel?: string;
1666
+ interactionWidth?: number;
1667
+ label?: import('react').ReactNode;
1668
+ labelStyle?: import('react').CSSProperties;
1669
+ labelShowBg?: boolean;
1670
+ labelBgStyle?: import('react').CSSProperties;
1671
+ labelBgPadding?: [number, number];
1672
+ labelBgBorderRadius?: number;
1673
+ style?: import('react').CSSProperties;
1674
+ className?: string;
1675
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1676
+ focusable?: boolean;
1677
+ data: import('..').RelationshipData;
1678
+ readonly id: string;
1679
+ readonly type: "relationship";
1680
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1681
+ source: string;
1682
+ target: string;
1683
+ sourceHandle?: string | null;
1684
+ targetHandle?: string | null;
1685
+ animated?: boolean;
1686
+ hidden?: boolean;
1687
+ deletable?: boolean;
1688
+ selectable?: boolean;
1689
+ selected?: boolean;
1690
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1691
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1692
+ zIndex?: number;
1693
+ ariaLabel?: string;
1694
+ interactionWidth?: number;
1695
+ label?: import('react').ReactNode;
1696
+ labelStyle?: import('react').CSSProperties;
1697
+ labelShowBg?: boolean;
1698
+ labelBgStyle?: import('react').CSSProperties;
1699
+ labelBgPadding?: [number, number];
1700
+ labelBgBorderRadius?: number;
1701
+ style?: import('react').CSSProperties;
1702
+ className?: string;
1703
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1704
+ focusable?: boolean;
1705
+ data: import('..').RelationshipData;
1706
+ readonly id: string;
1707
+ readonly type: "relationship";
1708
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1709
+ source: string;
1710
+ target: string;
1711
+ sourceHandle?: string | null;
1712
+ targetHandle?: string | null;
1713
+ animated?: boolean;
1714
+ hidden?: boolean;
1715
+ deletable?: boolean;
1716
+ selectable?: boolean;
1717
+ selected?: boolean;
1718
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1719
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1720
+ zIndex?: number;
1721
+ ariaLabel?: string;
1722
+ interactionWidth?: number;
1723
+ label?: import('react').ReactNode;
1724
+ labelStyle?: import('react').CSSProperties;
1725
+ labelShowBg?: boolean;
1726
+ labelBgStyle?: import('react').CSSProperties;
1727
+ labelBgPadding?: [number, number];
1728
+ labelBgBorderRadius?: number;
1729
+ style?: import('react').CSSProperties;
1730
+ className?: string;
1731
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1732
+ focusable?: boolean;
1733
+ data: import('..').RelationshipData;
1734
+ readonly id: string;
1735
+ readonly type: "relationship";
1736
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1737
+ source: string;
1738
+ target: string;
1739
+ sourceHandle?: string | null;
1740
+ targetHandle?: string | null;
1741
+ animated?: boolean;
1742
+ hidden?: boolean;
1743
+ deletable?: boolean;
1744
+ selectable?: boolean;
1745
+ selected?: boolean;
1746
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1747
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1748
+ zIndex?: number;
1749
+ ariaLabel?: string;
1750
+ interactionWidth?: number;
1751
+ label?: import('react').ReactNode;
1752
+ labelStyle?: import('react').CSSProperties;
1753
+ labelShowBg?: boolean;
1754
+ labelBgStyle?: import('react').CSSProperties;
1755
+ labelBgPadding?: [number, number];
1756
+ labelBgBorderRadius?: number;
1757
+ style?: import('react').CSSProperties;
1758
+ className?: string;
1759
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1760
+ focusable?: boolean;
1761
+ data: import('..').RelationshipData;
1762
+ readonly id: string;
1763
+ readonly type: "relationship";
1764
+ }>>), replace?: boolean | undefined) => void;
1765
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1766
+ source: string;
1767
+ target: string;
1768
+ sourceHandle?: string | null;
1769
+ targetHandle?: string | null;
1770
+ animated?: boolean;
1771
+ hidden?: boolean;
1772
+ deletable?: boolean;
1773
+ selectable?: boolean;
1774
+ selected?: boolean;
1775
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1776
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1777
+ zIndex?: number;
1778
+ ariaLabel?: string;
1779
+ interactionWidth?: number;
1780
+ label?: import('react').ReactNode;
1781
+ labelStyle?: import('react').CSSProperties;
1782
+ labelShowBg?: boolean;
1783
+ labelBgStyle?: import('react').CSSProperties;
1784
+ labelBgPadding?: [number, number];
1785
+ labelBgBorderRadius?: number;
1786
+ style?: import('react').CSSProperties;
1787
+ className?: string;
1788
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1789
+ focusable?: boolean;
1790
+ data: import('..').RelationshipData;
1791
+ readonly id: string;
1792
+ readonly type: "relationship";
1793
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1794
+ source: string;
1795
+ target: string;
1796
+ sourceHandle?: string | null;
1797
+ targetHandle?: string | null;
1798
+ animated?: boolean;
1799
+ hidden?: boolean;
1800
+ deletable?: boolean;
1801
+ selectable?: boolean;
1802
+ selected?: boolean;
1803
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1804
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1805
+ zIndex?: number;
1806
+ ariaLabel?: string;
1807
+ interactionWidth?: number;
1808
+ label?: import('react').ReactNode;
1809
+ labelStyle?: import('react').CSSProperties;
1810
+ labelShowBg?: boolean;
1811
+ labelBgStyle?: import('react').CSSProperties;
1812
+ labelBgPadding?: [number, number];
1813
+ labelBgBorderRadius?: number;
1814
+ style?: import('react').CSSProperties;
1815
+ className?: string;
1816
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1817
+ focusable?: boolean;
1818
+ data: import('..').RelationshipData;
1819
+ readonly id: string;
1820
+ readonly type: "relationship";
1821
+ }>) => void) => () => void;
1822
+ }) => void;
1823
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1824
+ fitDiagram: (xyStore: {
1825
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1826
+ source: string;
1827
+ target: string;
1828
+ sourceHandle?: string | null;
1829
+ targetHandle?: string | null;
1830
+ animated?: boolean;
1831
+ hidden?: boolean;
1832
+ deletable?: boolean;
1833
+ selectable?: boolean;
1834
+ selected?: boolean;
1835
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1836
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1837
+ zIndex?: number;
1838
+ ariaLabel?: string;
1839
+ interactionWidth?: number;
1840
+ label?: import('react').ReactNode;
1841
+ labelStyle?: import('react').CSSProperties;
1842
+ labelShowBg?: boolean;
1843
+ labelBgStyle?: import('react').CSSProperties;
1844
+ labelBgPadding?: [number, number];
1845
+ labelBgBorderRadius?: number;
1846
+ style?: import('react').CSSProperties;
1847
+ className?: string;
1848
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1849
+ focusable?: boolean;
1850
+ data: import('..').RelationshipData;
1851
+ readonly id: string;
1852
+ readonly type: "relationship";
1853
+ }>;
1854
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1855
+ source: string;
1856
+ target: string;
1857
+ sourceHandle?: string | null;
1858
+ targetHandle?: string | null;
1859
+ animated?: boolean;
1860
+ hidden?: boolean;
1861
+ deletable?: boolean;
1862
+ selectable?: boolean;
1863
+ selected?: boolean;
1864
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1865
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1866
+ zIndex?: number;
1867
+ ariaLabel?: string;
1868
+ interactionWidth?: number;
1869
+ label?: import('react').ReactNode;
1870
+ labelStyle?: import('react').CSSProperties;
1871
+ labelShowBg?: boolean;
1872
+ labelBgStyle?: import('react').CSSProperties;
1873
+ labelBgPadding?: [number, number];
1874
+ labelBgBorderRadius?: number;
1875
+ style?: import('react').CSSProperties;
1876
+ className?: string;
1877
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1878
+ focusable?: boolean;
1879
+ data: import('..').RelationshipData;
1880
+ readonly id: string;
1881
+ readonly type: "relationship";
1882
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1883
+ source: string;
1884
+ target: string;
1885
+ sourceHandle?: string | null;
1886
+ targetHandle?: string | null;
1887
+ animated?: boolean;
1888
+ hidden?: boolean;
1889
+ deletable?: boolean;
1890
+ selectable?: boolean;
1891
+ selected?: boolean;
1892
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1893
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1894
+ zIndex?: number;
1895
+ ariaLabel?: string;
1896
+ interactionWidth?: number;
1897
+ label?: import('react').ReactNode;
1898
+ labelStyle?: import('react').CSSProperties;
1899
+ labelShowBg?: boolean;
1900
+ labelBgStyle?: import('react').CSSProperties;
1901
+ labelBgPadding?: [number, number];
1902
+ labelBgBorderRadius?: number;
1903
+ style?: import('react').CSSProperties;
1904
+ className?: string;
1905
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1906
+ focusable?: boolean;
1907
+ data: import('..').RelationshipData;
1908
+ readonly id: string;
1909
+ readonly type: "relationship";
1910
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1911
+ source: string;
1912
+ target: string;
1913
+ sourceHandle?: string | null;
1914
+ targetHandle?: string | null;
1915
+ animated?: boolean;
1916
+ hidden?: boolean;
1917
+ deletable?: boolean;
1918
+ selectable?: boolean;
1919
+ selected?: boolean;
1920
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1921
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1922
+ zIndex?: number;
1923
+ ariaLabel?: string;
1924
+ interactionWidth?: number;
1925
+ label?: import('react').ReactNode;
1926
+ labelStyle?: import('react').CSSProperties;
1927
+ labelShowBg?: boolean;
1928
+ labelBgStyle?: import('react').CSSProperties;
1929
+ labelBgPadding?: [number, number];
1930
+ labelBgBorderRadius?: number;
1931
+ style?: import('react').CSSProperties;
1932
+ className?: string;
1933
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1934
+ focusable?: boolean;
1935
+ data: import('..').RelationshipData;
1936
+ readonly id: string;
1937
+ readonly type: "relationship";
1938
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1939
+ source: string;
1940
+ target: string;
1941
+ sourceHandle?: string | null;
1942
+ targetHandle?: string | null;
1943
+ animated?: boolean;
1944
+ hidden?: boolean;
1945
+ deletable?: boolean;
1946
+ selectable?: boolean;
1947
+ selected?: boolean;
1948
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1949
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1950
+ zIndex?: number;
1951
+ ariaLabel?: string;
1952
+ interactionWidth?: number;
1953
+ label?: import('react').ReactNode;
1954
+ labelStyle?: import('react').CSSProperties;
1955
+ labelShowBg?: boolean;
1956
+ labelBgStyle?: import('react').CSSProperties;
1957
+ labelBgPadding?: [number, number];
1958
+ labelBgBorderRadius?: number;
1959
+ style?: import('react').CSSProperties;
1960
+ className?: string;
1961
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1962
+ focusable?: boolean;
1963
+ data: import('..').RelationshipData;
1964
+ readonly id: string;
1965
+ readonly type: "relationship";
1966
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1967
+ source: string;
1968
+ target: string;
1969
+ sourceHandle?: string | null;
1970
+ targetHandle?: string | null;
1971
+ animated?: boolean;
1972
+ hidden?: boolean;
1973
+ deletable?: boolean;
1974
+ selectable?: boolean;
1975
+ selected?: boolean;
1976
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1977
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1978
+ zIndex?: number;
1979
+ ariaLabel?: string;
1980
+ interactionWidth?: number;
1981
+ label?: import('react').ReactNode;
1982
+ labelStyle?: import('react').CSSProperties;
1983
+ labelShowBg?: boolean;
1984
+ labelBgStyle?: import('react').CSSProperties;
1985
+ labelBgPadding?: [number, number];
1986
+ labelBgBorderRadius?: number;
1987
+ style?: import('react').CSSProperties;
1988
+ className?: string;
1989
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1990
+ focusable?: boolean;
1991
+ data: import('..').RelationshipData;
1992
+ readonly id: string;
1993
+ readonly type: "relationship";
1994
+ }>>), replace?: boolean | undefined) => void;
1995
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1996
+ source: string;
1997
+ target: string;
1998
+ sourceHandle?: string | null;
1999
+ targetHandle?: string | null;
2000
+ animated?: boolean;
2001
+ hidden?: boolean;
2002
+ deletable?: boolean;
2003
+ selectable?: boolean;
2004
+ selected?: boolean;
2005
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2006
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2007
+ zIndex?: number;
2008
+ ariaLabel?: string;
2009
+ interactionWidth?: number;
2010
+ label?: import('react').ReactNode;
2011
+ labelStyle?: import('react').CSSProperties;
2012
+ labelShowBg?: boolean;
2013
+ labelBgStyle?: import('react').CSSProperties;
2014
+ labelBgPadding?: [number, number];
2015
+ labelBgBorderRadius?: number;
2016
+ style?: import('react').CSSProperties;
2017
+ className?: string;
2018
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2019
+ focusable?: boolean;
2020
+ data: import('..').RelationshipData;
2021
+ readonly id: string;
2022
+ readonly type: "relationship";
2023
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2024
+ source: string;
2025
+ target: string;
2026
+ sourceHandle?: string | null;
2027
+ targetHandle?: string | null;
2028
+ animated?: boolean;
2029
+ hidden?: boolean;
2030
+ deletable?: boolean;
2031
+ selectable?: boolean;
2032
+ selected?: boolean;
2033
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2034
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2035
+ zIndex?: number;
2036
+ ariaLabel?: string;
2037
+ interactionWidth?: number;
2038
+ label?: import('react').ReactNode;
2039
+ labelStyle?: import('react').CSSProperties;
2040
+ labelShowBg?: boolean;
2041
+ labelBgStyle?: import('react').CSSProperties;
2042
+ labelBgPadding?: [number, number];
2043
+ labelBgBorderRadius?: number;
2044
+ style?: import('react').CSSProperties;
2045
+ className?: string;
2046
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2047
+ focusable?: boolean;
2048
+ data: import('..').RelationshipData;
2049
+ readonly id: string;
2050
+ readonly type: "relationship";
2051
+ }>) => void) => () => void;
2052
+ }) => void;
2053
+ nextDynamicStep: (increment?: number | undefined) => void;
2054
+ stopDynamicView: () => void;
2055
+ }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
2056
+ equalityFn?: (a: U, b: U) => boolean;
2057
+ fireImmediately?: boolean;
1130
2058
  } | undefined): () => void;
1131
2059
  };
1132
2060
  }, "setState"> & {
@@ -1142,6 +2070,1033 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1142
2070
  pannable: boolean;
1143
2071
  nodesDraggable: boolean;
1144
2072
  nodesSelectable: boolean;
2073
+ experimentalEdgeEditing: boolean;
2074
+ viewSyncState: "synced" | "changed";
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
+ triggerSaveManualLayout: (xystore: {
2115
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2116
+ source: string;
2117
+ target: string;
2118
+ sourceHandle?: string | null;
2119
+ targetHandle?: string | null;
2120
+ animated?: boolean;
2121
+ hidden?: boolean;
2122
+ deletable?: boolean;
2123
+ selectable?: boolean;
2124
+ selected?: boolean;
2125
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2126
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2127
+ zIndex?: number;
2128
+ ariaLabel?: string;
2129
+ interactionWidth?: number;
2130
+ label?: import('react').ReactNode;
2131
+ labelStyle?: import('react').CSSProperties;
2132
+ labelShowBg?: boolean;
2133
+ labelBgStyle?: import('react').CSSProperties;
2134
+ labelBgPadding?: [number, number];
2135
+ labelBgBorderRadius?: number;
2136
+ style?: import('react').CSSProperties;
2137
+ className?: string;
2138
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2139
+ focusable?: boolean;
2140
+ data: import('..').RelationshipData;
2141
+ readonly id: string;
2142
+ readonly type: "relationship";
2143
+ }>;
2144
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2145
+ source: string;
2146
+ target: string;
2147
+ sourceHandle?: string | null;
2148
+ targetHandle?: string | null;
2149
+ animated?: boolean;
2150
+ hidden?: boolean;
2151
+ deletable?: boolean;
2152
+ selectable?: boolean;
2153
+ selected?: boolean;
2154
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2155
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2156
+ zIndex?: number;
2157
+ ariaLabel?: string;
2158
+ interactionWidth?: number;
2159
+ label?: import('react').ReactNode;
2160
+ labelStyle?: import('react').CSSProperties;
2161
+ labelShowBg?: boolean;
2162
+ labelBgStyle?: import('react').CSSProperties;
2163
+ labelBgPadding?: [number, number];
2164
+ labelBgBorderRadius?: number;
2165
+ style?: import('react').CSSProperties;
2166
+ className?: string;
2167
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2168
+ focusable?: boolean;
2169
+ data: import('..').RelationshipData;
2170
+ readonly id: string;
2171
+ readonly type: "relationship";
2172
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2173
+ source: string;
2174
+ target: string;
2175
+ sourceHandle?: string | null;
2176
+ targetHandle?: string | null;
2177
+ animated?: boolean;
2178
+ hidden?: boolean;
2179
+ deletable?: boolean;
2180
+ selectable?: boolean;
2181
+ selected?: boolean;
2182
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2183
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2184
+ zIndex?: number;
2185
+ ariaLabel?: string;
2186
+ interactionWidth?: number;
2187
+ label?: import('react').ReactNode;
2188
+ labelStyle?: import('react').CSSProperties;
2189
+ labelShowBg?: boolean;
2190
+ labelBgStyle?: import('react').CSSProperties;
2191
+ labelBgPadding?: [number, number];
2192
+ labelBgBorderRadius?: number;
2193
+ style?: import('react').CSSProperties;
2194
+ className?: string;
2195
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2196
+ focusable?: boolean;
2197
+ data: import('..').RelationshipData;
2198
+ readonly id: string;
2199
+ readonly type: "relationship";
2200
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2201
+ source: string;
2202
+ target: string;
2203
+ sourceHandle?: string | null;
2204
+ targetHandle?: string | null;
2205
+ animated?: boolean;
2206
+ hidden?: boolean;
2207
+ deletable?: boolean;
2208
+ selectable?: boolean;
2209
+ selected?: boolean;
2210
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2211
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2212
+ zIndex?: number;
2213
+ ariaLabel?: string;
2214
+ interactionWidth?: number;
2215
+ label?: import('react').ReactNode;
2216
+ labelStyle?: import('react').CSSProperties;
2217
+ labelShowBg?: boolean;
2218
+ labelBgStyle?: import('react').CSSProperties;
2219
+ labelBgPadding?: [number, number];
2220
+ labelBgBorderRadius?: number;
2221
+ style?: import('react').CSSProperties;
2222
+ className?: string;
2223
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2224
+ focusable?: boolean;
2225
+ data: import('..').RelationshipData;
2226
+ readonly id: string;
2227
+ readonly type: "relationship";
2228
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2229
+ source: string;
2230
+ target: string;
2231
+ sourceHandle?: string | null;
2232
+ targetHandle?: string | null;
2233
+ animated?: boolean;
2234
+ hidden?: boolean;
2235
+ deletable?: boolean;
2236
+ selectable?: boolean;
2237
+ selected?: boolean;
2238
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2239
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2240
+ zIndex?: number;
2241
+ ariaLabel?: string;
2242
+ interactionWidth?: number;
2243
+ label?: import('react').ReactNode;
2244
+ labelStyle?: import('react').CSSProperties;
2245
+ labelShowBg?: boolean;
2246
+ labelBgStyle?: import('react').CSSProperties;
2247
+ labelBgPadding?: [number, number];
2248
+ labelBgBorderRadius?: number;
2249
+ style?: import('react').CSSProperties;
2250
+ className?: string;
2251
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2252
+ focusable?: boolean;
2253
+ data: import('..').RelationshipData;
2254
+ readonly id: string;
2255
+ readonly type: "relationship";
2256
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2257
+ source: string;
2258
+ target: string;
2259
+ sourceHandle?: string | null;
2260
+ targetHandle?: string | null;
2261
+ animated?: boolean;
2262
+ hidden?: boolean;
2263
+ deletable?: boolean;
2264
+ selectable?: boolean;
2265
+ selected?: boolean;
2266
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2267
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2268
+ zIndex?: number;
2269
+ ariaLabel?: string;
2270
+ interactionWidth?: number;
2271
+ label?: import('react').ReactNode;
2272
+ labelStyle?: import('react').CSSProperties;
2273
+ labelShowBg?: boolean;
2274
+ labelBgStyle?: import('react').CSSProperties;
2275
+ labelBgPadding?: [number, number];
2276
+ labelBgBorderRadius?: number;
2277
+ style?: import('react').CSSProperties;
2278
+ className?: string;
2279
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2280
+ focusable?: boolean;
2281
+ data: import('..').RelationshipData;
2282
+ readonly id: string;
2283
+ readonly type: "relationship";
2284
+ }>>), replace?: boolean | undefined) => void;
2285
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2286
+ source: string;
2287
+ target: string;
2288
+ sourceHandle?: string | null;
2289
+ targetHandle?: string | null;
2290
+ animated?: boolean;
2291
+ hidden?: boolean;
2292
+ deletable?: boolean;
2293
+ selectable?: boolean;
2294
+ selected?: boolean;
2295
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2296
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2297
+ zIndex?: number;
2298
+ ariaLabel?: string;
2299
+ interactionWidth?: number;
2300
+ label?: import('react').ReactNode;
2301
+ labelStyle?: import('react').CSSProperties;
2302
+ labelShowBg?: boolean;
2303
+ labelBgStyle?: import('react').CSSProperties;
2304
+ labelBgPadding?: [number, number];
2305
+ labelBgBorderRadius?: number;
2306
+ style?: import('react').CSSProperties;
2307
+ className?: string;
2308
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2309
+ focusable?: boolean;
2310
+ data: import('..').RelationshipData;
2311
+ readonly id: string;
2312
+ readonly type: "relationship";
2313
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2314
+ source: string;
2315
+ target: string;
2316
+ sourceHandle?: string | null;
2317
+ targetHandle?: string | null;
2318
+ animated?: boolean;
2319
+ hidden?: boolean;
2320
+ deletable?: boolean;
2321
+ selectable?: boolean;
2322
+ selected?: boolean;
2323
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2324
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2325
+ zIndex?: number;
2326
+ ariaLabel?: string;
2327
+ interactionWidth?: number;
2328
+ label?: import('react').ReactNode;
2329
+ labelStyle?: import('react').CSSProperties;
2330
+ labelShowBg?: boolean;
2331
+ labelBgStyle?: import('react').CSSProperties;
2332
+ labelBgPadding?: [number, number];
2333
+ labelBgBorderRadius?: number;
2334
+ style?: import('react').CSSProperties;
2335
+ className?: string;
2336
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2337
+ focusable?: boolean;
2338
+ data: import('..').RelationshipData;
2339
+ readonly id: string;
2340
+ readonly type: "relationship";
2341
+ }>) => void) => () => void;
2342
+ }) => void;
2343
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2344
+ fitDiagram: (xyStore: {
2345
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2346
+ source: string;
2347
+ target: string;
2348
+ sourceHandle?: string | null;
2349
+ targetHandle?: string | null;
2350
+ animated?: boolean;
2351
+ hidden?: boolean;
2352
+ deletable?: boolean;
2353
+ selectable?: boolean;
2354
+ selected?: boolean;
2355
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2356
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2357
+ zIndex?: number;
2358
+ ariaLabel?: string;
2359
+ interactionWidth?: number;
2360
+ label?: import('react').ReactNode;
2361
+ labelStyle?: import('react').CSSProperties;
2362
+ labelShowBg?: boolean;
2363
+ labelBgStyle?: import('react').CSSProperties;
2364
+ labelBgPadding?: [number, number];
2365
+ labelBgBorderRadius?: number;
2366
+ style?: import('react').CSSProperties;
2367
+ className?: string;
2368
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2369
+ focusable?: boolean;
2370
+ data: import('..').RelationshipData;
2371
+ readonly id: string;
2372
+ readonly type: "relationship";
2373
+ }>;
2374
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2375
+ source: string;
2376
+ target: string;
2377
+ sourceHandle?: string | null;
2378
+ targetHandle?: string | null;
2379
+ animated?: boolean;
2380
+ hidden?: boolean;
2381
+ deletable?: boolean;
2382
+ selectable?: boolean;
2383
+ selected?: boolean;
2384
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2385
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2386
+ zIndex?: number;
2387
+ ariaLabel?: string;
2388
+ interactionWidth?: number;
2389
+ label?: import('react').ReactNode;
2390
+ labelStyle?: import('react').CSSProperties;
2391
+ labelShowBg?: boolean;
2392
+ labelBgStyle?: import('react').CSSProperties;
2393
+ labelBgPadding?: [number, number];
2394
+ labelBgBorderRadius?: number;
2395
+ style?: import('react').CSSProperties;
2396
+ className?: string;
2397
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2398
+ focusable?: boolean;
2399
+ data: import('..').RelationshipData;
2400
+ readonly id: string;
2401
+ readonly type: "relationship";
2402
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2403
+ source: string;
2404
+ target: string;
2405
+ sourceHandle?: string | null;
2406
+ targetHandle?: string | null;
2407
+ animated?: boolean;
2408
+ hidden?: boolean;
2409
+ deletable?: boolean;
2410
+ selectable?: boolean;
2411
+ selected?: boolean;
2412
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2413
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2414
+ zIndex?: number;
2415
+ ariaLabel?: string;
2416
+ interactionWidth?: number;
2417
+ label?: import('react').ReactNode;
2418
+ labelStyle?: import('react').CSSProperties;
2419
+ labelShowBg?: boolean;
2420
+ labelBgStyle?: import('react').CSSProperties;
2421
+ labelBgPadding?: [number, number];
2422
+ labelBgBorderRadius?: number;
2423
+ style?: import('react').CSSProperties;
2424
+ className?: string;
2425
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2426
+ focusable?: boolean;
2427
+ data: import('..').RelationshipData;
2428
+ readonly id: string;
2429
+ readonly type: "relationship";
2430
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2431
+ source: string;
2432
+ target: string;
2433
+ sourceHandle?: string | null;
2434
+ targetHandle?: string | null;
2435
+ animated?: boolean;
2436
+ hidden?: boolean;
2437
+ deletable?: boolean;
2438
+ selectable?: boolean;
2439
+ selected?: boolean;
2440
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2441
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2442
+ zIndex?: number;
2443
+ ariaLabel?: string;
2444
+ interactionWidth?: number;
2445
+ label?: import('react').ReactNode;
2446
+ labelStyle?: import('react').CSSProperties;
2447
+ labelShowBg?: boolean;
2448
+ labelBgStyle?: import('react').CSSProperties;
2449
+ labelBgPadding?: [number, number];
2450
+ labelBgBorderRadius?: number;
2451
+ style?: import('react').CSSProperties;
2452
+ className?: string;
2453
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2454
+ focusable?: boolean;
2455
+ data: import('..').RelationshipData;
2456
+ readonly id: string;
2457
+ readonly type: "relationship";
2458
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2459
+ source: string;
2460
+ target: string;
2461
+ sourceHandle?: string | null;
2462
+ targetHandle?: string | null;
2463
+ animated?: boolean;
2464
+ hidden?: boolean;
2465
+ deletable?: boolean;
2466
+ selectable?: boolean;
2467
+ selected?: boolean;
2468
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2469
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2470
+ zIndex?: number;
2471
+ ariaLabel?: string;
2472
+ interactionWidth?: number;
2473
+ label?: import('react').ReactNode;
2474
+ labelStyle?: import('react').CSSProperties;
2475
+ labelShowBg?: boolean;
2476
+ labelBgStyle?: import('react').CSSProperties;
2477
+ labelBgPadding?: [number, number];
2478
+ labelBgBorderRadius?: number;
2479
+ style?: import('react').CSSProperties;
2480
+ className?: string;
2481
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2482
+ focusable?: boolean;
2483
+ data: import('..').RelationshipData;
2484
+ readonly id: string;
2485
+ readonly type: "relationship";
2486
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2487
+ source: string;
2488
+ target: string;
2489
+ sourceHandle?: string | null;
2490
+ targetHandle?: string | null;
2491
+ animated?: boolean;
2492
+ hidden?: boolean;
2493
+ deletable?: boolean;
2494
+ selectable?: boolean;
2495
+ selected?: boolean;
2496
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2497
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2498
+ zIndex?: number;
2499
+ ariaLabel?: string;
2500
+ interactionWidth?: number;
2501
+ label?: import('react').ReactNode;
2502
+ labelStyle?: import('react').CSSProperties;
2503
+ labelShowBg?: boolean;
2504
+ labelBgStyle?: import('react').CSSProperties;
2505
+ labelBgPadding?: [number, number];
2506
+ labelBgBorderRadius?: number;
2507
+ style?: import('react').CSSProperties;
2508
+ className?: string;
2509
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2510
+ focusable?: boolean;
2511
+ data: import('..').RelationshipData;
2512
+ readonly id: string;
2513
+ readonly type: "relationship";
2514
+ }>>), replace?: boolean | undefined) => void;
2515
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2516
+ source: string;
2517
+ target: string;
2518
+ sourceHandle?: string | null;
2519
+ targetHandle?: string | null;
2520
+ animated?: boolean;
2521
+ hidden?: boolean;
2522
+ deletable?: boolean;
2523
+ selectable?: boolean;
2524
+ selected?: boolean;
2525
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2526
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2527
+ zIndex?: number;
2528
+ ariaLabel?: string;
2529
+ interactionWidth?: number;
2530
+ label?: import('react').ReactNode;
2531
+ labelStyle?: import('react').CSSProperties;
2532
+ labelShowBg?: boolean;
2533
+ labelBgStyle?: import('react').CSSProperties;
2534
+ labelBgPadding?: [number, number];
2535
+ labelBgBorderRadius?: number;
2536
+ style?: import('react').CSSProperties;
2537
+ className?: string;
2538
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2539
+ focusable?: boolean;
2540
+ data: import('..').RelationshipData;
2541
+ readonly id: string;
2542
+ readonly type: "relationship";
2543
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2544
+ source: string;
2545
+ target: string;
2546
+ sourceHandle?: string | null;
2547
+ targetHandle?: string | null;
2548
+ animated?: boolean;
2549
+ hidden?: boolean;
2550
+ deletable?: boolean;
2551
+ selectable?: boolean;
2552
+ selected?: boolean;
2553
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2554
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2555
+ zIndex?: number;
2556
+ ariaLabel?: string;
2557
+ interactionWidth?: number;
2558
+ label?: import('react').ReactNode;
2559
+ labelStyle?: import('react').CSSProperties;
2560
+ labelShowBg?: boolean;
2561
+ labelBgStyle?: import('react').CSSProperties;
2562
+ labelBgPadding?: [number, number];
2563
+ labelBgBorderRadius?: number;
2564
+ style?: import('react').CSSProperties;
2565
+ className?: string;
2566
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2567
+ focusable?: boolean;
2568
+ data: import('..').RelationshipData;
2569
+ readonly id: string;
2570
+ readonly type: "relationship";
2571
+ }>) => void) => () => void;
2572
+ }) => void;
2573
+ nextDynamicStep: (increment?: number | undefined) => void;
2574
+ stopDynamicView: () => void;
2575
+ } | Partial<{
2576
+ view: import('@likec4/core').DiagramView;
2577
+ readonly: boolean;
2578
+ showElementLinks: boolean;
2579
+ fitViewEnabled: boolean;
2580
+ fitViewPadding: number;
2581
+ zoomable: boolean;
2582
+ pannable: boolean;
2583
+ nodesDraggable: boolean;
2584
+ nodesSelectable: boolean;
2585
+ experimentalEdgeEditing: boolean;
2586
+ viewSyncState: "synced" | "changed";
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
+ triggerSaveManualLayout: (xystore: {
2627
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2628
+ source: string;
2629
+ target: string;
2630
+ sourceHandle?: string | null;
2631
+ targetHandle?: string | null;
2632
+ animated?: boolean;
2633
+ hidden?: boolean;
2634
+ deletable?: boolean;
2635
+ selectable?: boolean;
2636
+ selected?: boolean;
2637
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2638
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2639
+ zIndex?: number;
2640
+ ariaLabel?: string;
2641
+ interactionWidth?: number;
2642
+ label?: import('react').ReactNode;
2643
+ labelStyle?: import('react').CSSProperties;
2644
+ labelShowBg?: boolean;
2645
+ labelBgStyle?: import('react').CSSProperties;
2646
+ labelBgPadding?: [number, number];
2647
+ labelBgBorderRadius?: number;
2648
+ style?: import('react').CSSProperties;
2649
+ className?: string;
2650
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2651
+ focusable?: boolean;
2652
+ data: import('..').RelationshipData;
2653
+ readonly id: string;
2654
+ readonly type: "relationship";
2655
+ }>;
2656
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2657
+ source: string;
2658
+ target: string;
2659
+ sourceHandle?: string | null;
2660
+ targetHandle?: string | null;
2661
+ animated?: boolean;
2662
+ hidden?: boolean;
2663
+ deletable?: boolean;
2664
+ selectable?: boolean;
2665
+ selected?: boolean;
2666
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2667
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2668
+ zIndex?: number;
2669
+ ariaLabel?: string;
2670
+ interactionWidth?: number;
2671
+ label?: import('react').ReactNode;
2672
+ labelStyle?: import('react').CSSProperties;
2673
+ labelShowBg?: boolean;
2674
+ labelBgStyle?: import('react').CSSProperties;
2675
+ labelBgPadding?: [number, number];
2676
+ labelBgBorderRadius?: number;
2677
+ style?: import('react').CSSProperties;
2678
+ className?: string;
2679
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2680
+ focusable?: boolean;
2681
+ data: import('..').RelationshipData;
2682
+ readonly id: string;
2683
+ readonly type: "relationship";
2684
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2685
+ source: string;
2686
+ target: string;
2687
+ sourceHandle?: string | null;
2688
+ targetHandle?: string | null;
2689
+ animated?: boolean;
2690
+ hidden?: boolean;
2691
+ deletable?: boolean;
2692
+ selectable?: boolean;
2693
+ selected?: boolean;
2694
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2695
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2696
+ zIndex?: number;
2697
+ ariaLabel?: string;
2698
+ interactionWidth?: number;
2699
+ label?: import('react').ReactNode;
2700
+ labelStyle?: import('react').CSSProperties;
2701
+ labelShowBg?: boolean;
2702
+ labelBgStyle?: import('react').CSSProperties;
2703
+ labelBgPadding?: [number, number];
2704
+ labelBgBorderRadius?: number;
2705
+ style?: import('react').CSSProperties;
2706
+ className?: string;
2707
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2708
+ focusable?: boolean;
2709
+ data: import('..').RelationshipData;
2710
+ readonly id: string;
2711
+ readonly type: "relationship";
2712
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2713
+ source: string;
2714
+ target: string;
2715
+ sourceHandle?: string | null;
2716
+ targetHandle?: string | null;
2717
+ animated?: boolean;
2718
+ hidden?: boolean;
2719
+ deletable?: boolean;
2720
+ selectable?: boolean;
2721
+ selected?: boolean;
2722
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2723
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2724
+ zIndex?: number;
2725
+ ariaLabel?: string;
2726
+ interactionWidth?: number;
2727
+ label?: import('react').ReactNode;
2728
+ labelStyle?: import('react').CSSProperties;
2729
+ labelShowBg?: boolean;
2730
+ labelBgStyle?: import('react').CSSProperties;
2731
+ labelBgPadding?: [number, number];
2732
+ labelBgBorderRadius?: number;
2733
+ style?: import('react').CSSProperties;
2734
+ className?: string;
2735
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2736
+ focusable?: boolean;
2737
+ data: import('..').RelationshipData;
2738
+ readonly id: string;
2739
+ readonly type: "relationship";
2740
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2741
+ source: string;
2742
+ target: string;
2743
+ sourceHandle?: string | null;
2744
+ targetHandle?: string | null;
2745
+ animated?: boolean;
2746
+ hidden?: boolean;
2747
+ deletable?: boolean;
2748
+ selectable?: boolean;
2749
+ selected?: boolean;
2750
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2751
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2752
+ zIndex?: number;
2753
+ ariaLabel?: string;
2754
+ interactionWidth?: number;
2755
+ label?: import('react').ReactNode;
2756
+ labelStyle?: import('react').CSSProperties;
2757
+ labelShowBg?: boolean;
2758
+ labelBgStyle?: import('react').CSSProperties;
2759
+ labelBgPadding?: [number, number];
2760
+ labelBgBorderRadius?: number;
2761
+ style?: import('react').CSSProperties;
2762
+ className?: string;
2763
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2764
+ focusable?: boolean;
2765
+ data: import('..').RelationshipData;
2766
+ readonly id: string;
2767
+ readonly type: "relationship";
2768
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2769
+ source: string;
2770
+ target: string;
2771
+ sourceHandle?: string | null;
2772
+ targetHandle?: string | null;
2773
+ animated?: boolean;
2774
+ hidden?: boolean;
2775
+ deletable?: boolean;
2776
+ selectable?: boolean;
2777
+ selected?: boolean;
2778
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2779
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2780
+ zIndex?: number;
2781
+ ariaLabel?: string;
2782
+ interactionWidth?: number;
2783
+ label?: import('react').ReactNode;
2784
+ labelStyle?: import('react').CSSProperties;
2785
+ labelShowBg?: boolean;
2786
+ labelBgStyle?: import('react').CSSProperties;
2787
+ labelBgPadding?: [number, number];
2788
+ labelBgBorderRadius?: number;
2789
+ style?: import('react').CSSProperties;
2790
+ className?: string;
2791
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2792
+ focusable?: boolean;
2793
+ data: import('..').RelationshipData;
2794
+ readonly id: string;
2795
+ readonly type: "relationship";
2796
+ }>>), replace?: boolean | undefined) => void;
2797
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2798
+ source: string;
2799
+ target: string;
2800
+ sourceHandle?: string | null;
2801
+ targetHandle?: string | null;
2802
+ animated?: boolean;
2803
+ hidden?: boolean;
2804
+ deletable?: boolean;
2805
+ selectable?: boolean;
2806
+ selected?: boolean;
2807
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2808
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2809
+ zIndex?: number;
2810
+ ariaLabel?: string;
2811
+ interactionWidth?: number;
2812
+ label?: import('react').ReactNode;
2813
+ labelStyle?: import('react').CSSProperties;
2814
+ labelShowBg?: boolean;
2815
+ labelBgStyle?: import('react').CSSProperties;
2816
+ labelBgPadding?: [number, number];
2817
+ labelBgBorderRadius?: number;
2818
+ style?: import('react').CSSProperties;
2819
+ className?: string;
2820
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2821
+ focusable?: boolean;
2822
+ data: import('..').RelationshipData;
2823
+ readonly id: string;
2824
+ readonly type: "relationship";
2825
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2826
+ source: string;
2827
+ target: string;
2828
+ sourceHandle?: string | null;
2829
+ targetHandle?: string | null;
2830
+ animated?: boolean;
2831
+ hidden?: boolean;
2832
+ deletable?: boolean;
2833
+ selectable?: boolean;
2834
+ selected?: boolean;
2835
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2836
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2837
+ zIndex?: number;
2838
+ ariaLabel?: string;
2839
+ interactionWidth?: number;
2840
+ label?: import('react').ReactNode;
2841
+ labelStyle?: import('react').CSSProperties;
2842
+ labelShowBg?: boolean;
2843
+ labelBgStyle?: import('react').CSSProperties;
2844
+ labelBgPadding?: [number, number];
2845
+ labelBgBorderRadius?: number;
2846
+ style?: import('react').CSSProperties;
2847
+ className?: string;
2848
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2849
+ focusable?: boolean;
2850
+ data: import('..').RelationshipData;
2851
+ readonly id: string;
2852
+ readonly type: "relationship";
2853
+ }>) => void) => () => void;
2854
+ }) => void;
2855
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2856
+ fitDiagram: (xyStore: {
2857
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2858
+ source: string;
2859
+ target: string;
2860
+ sourceHandle?: string | null;
2861
+ targetHandle?: string | null;
2862
+ animated?: boolean;
2863
+ hidden?: boolean;
2864
+ deletable?: boolean;
2865
+ selectable?: boolean;
2866
+ selected?: boolean;
2867
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2868
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2869
+ zIndex?: number;
2870
+ ariaLabel?: string;
2871
+ interactionWidth?: number;
2872
+ label?: import('react').ReactNode;
2873
+ labelStyle?: import('react').CSSProperties;
2874
+ labelShowBg?: boolean;
2875
+ labelBgStyle?: import('react').CSSProperties;
2876
+ labelBgPadding?: [number, number];
2877
+ labelBgBorderRadius?: number;
2878
+ style?: import('react').CSSProperties;
2879
+ className?: string;
2880
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2881
+ focusable?: boolean;
2882
+ data: import('..').RelationshipData;
2883
+ readonly id: string;
2884
+ readonly type: "relationship";
2885
+ }>;
2886
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2887
+ source: string;
2888
+ target: string;
2889
+ sourceHandle?: string | null;
2890
+ targetHandle?: string | null;
2891
+ animated?: boolean;
2892
+ hidden?: boolean;
2893
+ deletable?: boolean;
2894
+ selectable?: boolean;
2895
+ selected?: boolean;
2896
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2897
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2898
+ zIndex?: number;
2899
+ ariaLabel?: string;
2900
+ interactionWidth?: number;
2901
+ label?: import('react').ReactNode;
2902
+ labelStyle?: import('react').CSSProperties;
2903
+ labelShowBg?: boolean;
2904
+ labelBgStyle?: import('react').CSSProperties;
2905
+ labelBgPadding?: [number, number];
2906
+ labelBgBorderRadius?: number;
2907
+ style?: import('react').CSSProperties;
2908
+ className?: string;
2909
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2910
+ focusable?: boolean;
2911
+ data: import('..').RelationshipData;
2912
+ readonly id: string;
2913
+ readonly type: "relationship";
2914
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2915
+ source: string;
2916
+ target: string;
2917
+ sourceHandle?: string | null;
2918
+ targetHandle?: string | null;
2919
+ animated?: boolean;
2920
+ hidden?: boolean;
2921
+ deletable?: boolean;
2922
+ selectable?: boolean;
2923
+ selected?: boolean;
2924
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2925
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2926
+ zIndex?: number;
2927
+ ariaLabel?: string;
2928
+ interactionWidth?: number;
2929
+ label?: import('react').ReactNode;
2930
+ labelStyle?: import('react').CSSProperties;
2931
+ labelShowBg?: boolean;
2932
+ labelBgStyle?: import('react').CSSProperties;
2933
+ labelBgPadding?: [number, number];
2934
+ labelBgBorderRadius?: number;
2935
+ style?: import('react').CSSProperties;
2936
+ className?: string;
2937
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2938
+ focusable?: boolean;
2939
+ data: import('..').RelationshipData;
2940
+ readonly id: string;
2941
+ readonly type: "relationship";
2942
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2943
+ source: string;
2944
+ target: string;
2945
+ sourceHandle?: string | null;
2946
+ targetHandle?: string | null;
2947
+ animated?: boolean;
2948
+ hidden?: boolean;
2949
+ deletable?: boolean;
2950
+ selectable?: boolean;
2951
+ selected?: boolean;
2952
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2953
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2954
+ zIndex?: number;
2955
+ ariaLabel?: string;
2956
+ interactionWidth?: number;
2957
+ label?: import('react').ReactNode;
2958
+ labelStyle?: import('react').CSSProperties;
2959
+ labelShowBg?: boolean;
2960
+ labelBgStyle?: import('react').CSSProperties;
2961
+ labelBgPadding?: [number, number];
2962
+ labelBgBorderRadius?: number;
2963
+ style?: import('react').CSSProperties;
2964
+ className?: string;
2965
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2966
+ focusable?: boolean;
2967
+ data: import('..').RelationshipData;
2968
+ readonly id: string;
2969
+ readonly type: "relationship";
2970
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2971
+ source: string;
2972
+ target: string;
2973
+ sourceHandle?: string | null;
2974
+ targetHandle?: string | null;
2975
+ animated?: boolean;
2976
+ hidden?: boolean;
2977
+ deletable?: boolean;
2978
+ selectable?: boolean;
2979
+ selected?: boolean;
2980
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2981
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2982
+ zIndex?: number;
2983
+ ariaLabel?: string;
2984
+ interactionWidth?: number;
2985
+ label?: import('react').ReactNode;
2986
+ labelStyle?: import('react').CSSProperties;
2987
+ labelShowBg?: boolean;
2988
+ labelBgStyle?: import('react').CSSProperties;
2989
+ labelBgPadding?: [number, number];
2990
+ labelBgBorderRadius?: number;
2991
+ style?: import('react').CSSProperties;
2992
+ className?: string;
2993
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2994
+ focusable?: boolean;
2995
+ data: import('..').RelationshipData;
2996
+ readonly id: string;
2997
+ readonly type: "relationship";
2998
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2999
+ source: string;
3000
+ target: string;
3001
+ sourceHandle?: string | null;
3002
+ targetHandle?: string | null;
3003
+ animated?: boolean;
3004
+ hidden?: boolean;
3005
+ deletable?: boolean;
3006
+ selectable?: boolean;
3007
+ selected?: boolean;
3008
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3009
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3010
+ zIndex?: number;
3011
+ ariaLabel?: string;
3012
+ interactionWidth?: number;
3013
+ label?: import('react').ReactNode;
3014
+ labelStyle?: import('react').CSSProperties;
3015
+ labelShowBg?: boolean;
3016
+ labelBgStyle?: import('react').CSSProperties;
3017
+ labelBgPadding?: [number, number];
3018
+ labelBgBorderRadius?: number;
3019
+ style?: import('react').CSSProperties;
3020
+ className?: string;
3021
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3022
+ focusable?: boolean;
3023
+ data: import('..').RelationshipData;
3024
+ readonly id: string;
3025
+ readonly type: "relationship";
3026
+ }>>), replace?: boolean | undefined) => void;
3027
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3028
+ source: string;
3029
+ target: string;
3030
+ sourceHandle?: string | null;
3031
+ targetHandle?: string | null;
3032
+ animated?: boolean;
3033
+ hidden?: boolean;
3034
+ deletable?: boolean;
3035
+ selectable?: boolean;
3036
+ selected?: boolean;
3037
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3038
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3039
+ zIndex?: number;
3040
+ ariaLabel?: string;
3041
+ interactionWidth?: number;
3042
+ label?: import('react').ReactNode;
3043
+ labelStyle?: import('react').CSSProperties;
3044
+ labelShowBg?: boolean;
3045
+ labelBgStyle?: import('react').CSSProperties;
3046
+ labelBgPadding?: [number, number];
3047
+ labelBgBorderRadius?: number;
3048
+ style?: import('react').CSSProperties;
3049
+ className?: string;
3050
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3051
+ focusable?: boolean;
3052
+ data: import('..').RelationshipData;
3053
+ readonly id: string;
3054
+ readonly type: "relationship";
3055
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3056
+ source: string;
3057
+ target: string;
3058
+ sourceHandle?: string | null;
3059
+ targetHandle?: string | null;
3060
+ animated?: boolean;
3061
+ hidden?: boolean;
3062
+ deletable?: boolean;
3063
+ selectable?: boolean;
3064
+ selected?: boolean;
3065
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3066
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3067
+ zIndex?: number;
3068
+ ariaLabel?: string;
3069
+ interactionWidth?: number;
3070
+ label?: import('react').ReactNode;
3071
+ labelStyle?: import('react').CSSProperties;
3072
+ labelShowBg?: boolean;
3073
+ labelBgStyle?: import('react').CSSProperties;
3074
+ labelBgPadding?: [number, number];
3075
+ labelBgBorderRadius?: number;
3076
+ style?: import('react').CSSProperties;
3077
+ className?: string;
3078
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3079
+ focusable?: boolean;
3080
+ data: import('..').RelationshipData;
3081
+ readonly id: string;
3082
+ readonly type: "relationship";
3083
+ }>) => void) => () => void;
3084
+ }) => void;
3085
+ nextDynamicStep: (increment?: number | undefined) => void;
3086
+ stopDynamicView: () => void;
3087
+ }> | ((state: {
3088
+ view: import('@likec4/core').DiagramView;
3089
+ readonly: boolean;
3090
+ showElementLinks: boolean;
3091
+ fitViewEnabled: boolean;
3092
+ fitViewPadding: number;
3093
+ zoomable: boolean;
3094
+ pannable: boolean;
3095
+ nodesDraggable: boolean;
3096
+ nodesSelectable: boolean;
3097
+ experimentalEdgeEditing: boolean;
3098
+ viewSyncState: "synced" | "changed";
3099
+ viewSyncDebounceTimeout: number | null;
1145
3100
  xyflow: import('..').XYFlowInstance;
1146
3101
  initialized: boolean;
1147
3102
  xyflowSynced: boolean;
@@ -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,236 @@ 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
+ triggerSaveManualLayout: (xystore: {
3139
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3140
+ source: string;
3141
+ target: string;
3142
+ sourceHandle?: string | null;
3143
+ targetHandle?: string | null;
3144
+ animated?: boolean;
3145
+ hidden?: boolean;
3146
+ deletable?: boolean;
3147
+ selectable?: boolean;
3148
+ selected?: boolean;
3149
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3150
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3151
+ zIndex?: number;
3152
+ ariaLabel?: string;
3153
+ interactionWidth?: number;
3154
+ label?: import('react').ReactNode;
3155
+ labelStyle?: import('react').CSSProperties;
3156
+ labelShowBg?: boolean;
3157
+ labelBgStyle?: import('react').CSSProperties;
3158
+ labelBgPadding?: [number, number];
3159
+ labelBgBorderRadius?: number;
3160
+ style?: import('react').CSSProperties;
3161
+ className?: string;
3162
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3163
+ focusable?: boolean;
3164
+ data: import('..').RelationshipData;
3165
+ readonly id: string;
3166
+ readonly type: "relationship";
3167
+ }>;
3168
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3169
+ source: string;
3170
+ target: string;
3171
+ sourceHandle?: string | null;
3172
+ targetHandle?: string | null;
3173
+ animated?: boolean;
3174
+ hidden?: boolean;
3175
+ deletable?: boolean;
3176
+ selectable?: boolean;
3177
+ selected?: boolean;
3178
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3179
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3180
+ zIndex?: number;
3181
+ ariaLabel?: string;
3182
+ interactionWidth?: number;
3183
+ label?: import('react').ReactNode;
3184
+ labelStyle?: import('react').CSSProperties;
3185
+ labelShowBg?: boolean;
3186
+ labelBgStyle?: import('react').CSSProperties;
3187
+ labelBgPadding?: [number, number];
3188
+ labelBgBorderRadius?: number;
3189
+ style?: import('react').CSSProperties;
3190
+ className?: string;
3191
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3192
+ focusable?: boolean;
3193
+ data: import('..').RelationshipData;
3194
+ readonly id: string;
3195
+ readonly type: "relationship";
3196
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3197
+ source: string;
3198
+ target: string;
3199
+ sourceHandle?: string | null;
3200
+ targetHandle?: string | null;
3201
+ animated?: boolean;
3202
+ hidden?: boolean;
3203
+ deletable?: boolean;
3204
+ selectable?: boolean;
3205
+ selected?: boolean;
3206
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3207
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3208
+ zIndex?: number;
3209
+ ariaLabel?: string;
3210
+ interactionWidth?: number;
3211
+ label?: import('react').ReactNode;
3212
+ labelStyle?: import('react').CSSProperties;
3213
+ labelShowBg?: boolean;
3214
+ labelBgStyle?: import('react').CSSProperties;
3215
+ labelBgPadding?: [number, number];
3216
+ labelBgBorderRadius?: number;
3217
+ style?: import('react').CSSProperties;
3218
+ className?: string;
3219
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3220
+ focusable?: boolean;
3221
+ data: import('..').RelationshipData;
3222
+ readonly id: string;
3223
+ readonly type: "relationship";
3224
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3225
+ source: string;
3226
+ target: string;
3227
+ sourceHandle?: string | null;
3228
+ targetHandle?: string | null;
3229
+ animated?: boolean;
3230
+ hidden?: boolean;
3231
+ deletable?: boolean;
3232
+ selectable?: boolean;
3233
+ selected?: boolean;
3234
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3235
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3236
+ zIndex?: number;
3237
+ ariaLabel?: string;
3238
+ interactionWidth?: number;
3239
+ label?: import('react').ReactNode;
3240
+ labelStyle?: import('react').CSSProperties;
3241
+ labelShowBg?: boolean;
3242
+ labelBgStyle?: import('react').CSSProperties;
3243
+ labelBgPadding?: [number, number];
3244
+ labelBgBorderRadius?: number;
3245
+ style?: import('react').CSSProperties;
3246
+ className?: string;
3247
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3248
+ focusable?: boolean;
3249
+ data: import('..').RelationshipData;
3250
+ readonly id: string;
3251
+ readonly type: "relationship";
3252
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3253
+ source: string;
3254
+ target: string;
3255
+ sourceHandle?: string | null;
3256
+ targetHandle?: string | null;
3257
+ animated?: boolean;
3258
+ hidden?: boolean;
3259
+ deletable?: boolean;
3260
+ selectable?: boolean;
3261
+ selected?: boolean;
3262
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3263
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3264
+ zIndex?: number;
3265
+ ariaLabel?: string;
3266
+ interactionWidth?: number;
3267
+ label?: import('react').ReactNode;
3268
+ labelStyle?: import('react').CSSProperties;
3269
+ labelShowBg?: boolean;
3270
+ labelBgStyle?: import('react').CSSProperties;
3271
+ labelBgPadding?: [number, number];
3272
+ labelBgBorderRadius?: number;
3273
+ style?: import('react').CSSProperties;
3274
+ className?: string;
3275
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3276
+ focusable?: boolean;
3277
+ data: import('..').RelationshipData;
3278
+ readonly id: string;
3279
+ readonly type: "relationship";
3280
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3281
+ source: string;
3282
+ target: string;
3283
+ sourceHandle?: string | null;
3284
+ targetHandle?: string | null;
3285
+ animated?: boolean;
3286
+ hidden?: boolean;
3287
+ deletable?: boolean;
3288
+ selectable?: boolean;
3289
+ selected?: boolean;
3290
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3291
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3292
+ zIndex?: number;
3293
+ ariaLabel?: string;
3294
+ interactionWidth?: number;
3295
+ label?: import('react').ReactNode;
3296
+ labelStyle?: import('react').CSSProperties;
3297
+ labelShowBg?: boolean;
3298
+ labelBgStyle?: import('react').CSSProperties;
3299
+ labelBgPadding?: [number, number];
3300
+ labelBgBorderRadius?: number;
3301
+ style?: import('react').CSSProperties;
3302
+ className?: string;
3303
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3304
+ focusable?: boolean;
3305
+ data: import('..').RelationshipData;
3306
+ readonly id: string;
3307
+ readonly type: "relationship";
3308
+ }>>), replace?: boolean | undefined) => void;
3309
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3310
+ source: string;
3311
+ target: string;
3312
+ sourceHandle?: string | null;
3313
+ targetHandle?: string | null;
3314
+ animated?: boolean;
3315
+ hidden?: boolean;
3316
+ deletable?: boolean;
3317
+ selectable?: boolean;
3318
+ selected?: boolean;
3319
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3320
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3321
+ zIndex?: number;
3322
+ ariaLabel?: string;
3323
+ interactionWidth?: number;
3324
+ label?: import('react').ReactNode;
3325
+ labelStyle?: import('react').CSSProperties;
3326
+ labelShowBg?: boolean;
3327
+ labelBgStyle?: import('react').CSSProperties;
3328
+ labelBgPadding?: [number, number];
3329
+ labelBgBorderRadius?: number;
3330
+ style?: import('react').CSSProperties;
3331
+ className?: string;
3332
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3333
+ focusable?: boolean;
3334
+ data: import('..').RelationshipData;
3335
+ readonly id: string;
3336
+ readonly type: "relationship";
3337
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3338
+ source: string;
3339
+ target: string;
3340
+ sourceHandle?: string | null;
3341
+ targetHandle?: string | null;
3342
+ animated?: boolean;
3343
+ hidden?: boolean;
3344
+ deletable?: boolean;
3345
+ selectable?: boolean;
3346
+ selected?: boolean;
3347
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3348
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3349
+ zIndex?: number;
3350
+ ariaLabel?: string;
3351
+ interactionWidth?: number;
3352
+ label?: import('react').ReactNode;
3353
+ labelStyle?: import('react').CSSProperties;
3354
+ labelShowBg?: boolean;
3355
+ labelBgStyle?: import('react').CSSProperties;
3356
+ labelBgPadding?: [number, number];
3357
+ labelBgBorderRadius?: number;
3358
+ style?: import('react').CSSProperties;
3359
+ className?: string;
3360
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3361
+ focusable?: boolean;
3362
+ data: import('..').RelationshipData;
3363
+ readonly id: string;
3364
+ readonly type: "relationship";
3365
+ }>) => void) => () => void;
3366
+ }) => void;
1183
3367
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1184
3368
  fitDiagram: (xyStore: {
1185
3369
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1412,7 +3596,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1412
3596
  }) => void;
1413
3597
  nextDynamicStep: (increment?: number | undefined) => void;
1414
3598
  stopDynamicView: () => void;
1415
- } | Partial<{
3599
+ }) => {
1416
3600
  view: import('@likec4/core').DiagramView;
1417
3601
  readonly: boolean;
1418
3602
  showElementLinks: boolean;
@@ -1422,6 +3606,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1422
3606
  pannable: boolean;
1423
3607
  nodesDraggable: boolean;
1424
3608
  nodesSelectable: boolean;
3609
+ experimentalEdgeEditing: boolean;
3610
+ viewSyncState: "synced" | "changed";
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,8 @@ 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
+ triggerSaveManualLayout: (xystore: {
1465
3651
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1466
3652
  source: string;
1467
3653
  target: string;
@@ -1690,56 +3876,6 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1690
3876
  readonly type: "relationship";
1691
3877
  }>) => void) => () => void;
1692
3878
  }) => 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
3879
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1744
3880
  fitDiagram: (xyStore: {
1745
3881
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1972,7 +4108,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1972
4108
  }) => void;
1973
4109
  nextDynamicStep: (increment?: number | undefined) => void;
1974
4110
  stopDynamicView: () => void;
1975
- }) => {
4111
+ } | Partial<{
1976
4112
  view: import('@likec4/core').DiagramView;
1977
4113
  readonly: boolean;
1978
4114
  showElementLinks: boolean;
@@ -1982,6 +4118,9 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1982
4118
  pannable: boolean;
1983
4119
  nodesDraggable: boolean;
1984
4120
  nodesSelectable: boolean;
4121
+ experimentalEdgeEditing: boolean;
4122
+ viewSyncState: "synced" | "changed";
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,8 @@ 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
+ triggerSaveManualLayout: (xystore: {
2025
4163
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2026
4164
  source: string;
2027
4165
  target: string;
@@ -2250,56 +4388,6 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2250
4388
  readonly type: "relationship";
2251
4389
  }>) => void) => () => void;
2252
4390
  }) => 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
4391
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2304
4392
  fitDiagram: (xyStore: {
2305
4393
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {