@likec4/diagram 1.3.0 → 1.5.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 (95) hide show
  1. package/dist/LikeC4Diagram.css.d.ts +0 -1
  2. package/dist/LikeC4Diagram.d.ts +1 -1
  3. package/dist/LikeC4Diagram.props.d.ts +7 -2
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.mjs +1580 -1194
  6. package/dist/state/DiagramContext.d.ts +97 -4169
  7. package/dist/state/diagramStore.d.ts +98 -4172
  8. package/dist/state/hooks.d.ts +4 -0
  9. package/dist/state/index.d.ts +1 -3
  10. package/dist/state/useDiagramStore.d.ts +3 -4622
  11. package/dist/state/useNavigationHistory.d.ts +5 -0
  12. package/dist/style.css +217 -159
  13. package/dist/theme.css.d.ts +5 -0
  14. package/dist/ui/BackwardForwardPanel.css.d.ts +1 -0
  15. package/dist/ui/BackwardForwardPanel.d.ts +1 -0
  16. package/dist/ui/DiagramTitlePanel.css.d.ts +1 -1
  17. package/dist/ui/OptionsPanel.d.ts +1 -3
  18. package/dist/ui/options/EdgeOptions.d.ts +19 -0
  19. package/dist/ui/options/NodeOptions.d.ts +2 -2
  20. package/dist/xyflow/EdgeMarkers.d.ts +11 -0
  21. package/dist/xyflow/XYFlowEvents.d.ts +12 -9
  22. package/dist/xyflow/XYFlowInner.d.ts +1 -0
  23. package/dist/xyflow/const.d.ts +3 -3
  24. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  25. package/dist/xyflow/edges/RelationshipEdge.d.ts +4 -3
  26. package/dist/xyflow/edges/edges.css.d.ts +1 -0
  27. package/dist/xyflow/edges/utils.d.ts +1 -0
  28. package/dist/xyflow/hooks/index.d.ts +3 -2
  29. package/dist/xyflow/hooks/useXYFlow.d.ts +22 -21
  30. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +1 -0
  31. package/dist/xyflow/nodes/element/ElementIcon.d.ts +1 -4
  32. package/dist/xyflow/nodes/element/element.css.d.ts +3 -1
  33. package/dist/xyflow/types.d.ts +2 -32
  34. package/package.json +21 -21
  35. package/src/LikeC4Diagram.css.ts +10 -8
  36. package/src/LikeC4Diagram.props.ts +12 -5
  37. package/src/LikeC4Diagram.tsx +43 -26
  38. package/src/globals.css.ts +11 -4
  39. package/src/index.ts +1 -1
  40. package/src/mantine.css.ts +2 -2
  41. package/src/state/DiagramContext.tsx +47 -16
  42. package/src/state/diagramStore.ts +89 -80
  43. package/src/state/hooks.ts +5 -0
  44. package/src/state/index.ts +1 -3
  45. package/src/state/useDiagramStore.ts +6 -13
  46. package/src/state/useNavigationHistory.ts +39 -0
  47. package/src/theme.css.ts +5 -0
  48. package/src/ui/BackwardForwardPanel.css.ts +22 -0
  49. package/src/ui/BackwardForwardPanel.tsx +59 -0
  50. package/src/ui/DiagramTitlePanel.css.ts +17 -6
  51. package/src/ui/DiagramTitlePanel.tsx +108 -94
  52. package/src/ui/DynamicViewWalkthrough.tsx +6 -4
  53. package/src/ui/OptionsPanel.tsx +37 -18
  54. package/src/ui/options/EdgeOptions.tsx +157 -0
  55. package/src/ui/options/NodeOptions.tsx +37 -29
  56. package/src/xyflow/EdgeMarkers.tsx +148 -0
  57. package/src/xyflow/FitviewOnDiagramChange.tsx +8 -4
  58. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +59 -55
  59. package/src/xyflow/SyncWithDiagram.tsx +13 -20
  60. package/src/xyflow/XYFlow.tsx +2 -4
  61. package/src/xyflow/XYFlowEvents.tsx +48 -33
  62. package/src/xyflow/XYFlowInner.tsx +6 -3
  63. package/src/xyflow/const.ts +3 -3
  64. package/src/xyflow/diagram-to-xyflow.ts +18 -53
  65. package/src/xyflow/edges/RelationshipEdge.tsx +218 -126
  66. package/src/xyflow/edges/edges.css.ts +44 -26
  67. package/src/xyflow/edges/utils.ts +10 -0
  68. package/src/xyflow/hooks/index.ts +4 -2
  69. package/src/xyflow/hooks/useLayoutConstraints.ts +5 -5
  70. package/src/xyflow/hooks/useXYFlow.ts +28 -1
  71. package/src/xyflow/nodes/compound/CompoundNode.css.ts +41 -31
  72. package/src/xyflow/nodes/compound/CompoundNode.tsx +52 -53
  73. package/src/xyflow/nodes/element/ElementIcon.tsx +11 -22
  74. package/src/xyflow/nodes/element/ElementLink.tsx +11 -16
  75. package/src/xyflow/nodes/element/ElementNode.tsx +69 -114
  76. package/src/xyflow/nodes/element/element.css.ts +48 -15
  77. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +1 -1
  78. package/src/xyflow/types.ts +2 -4
  79. package/src/xyflow/utils.ts +3 -6
  80. package/dist/KeepAspectRatioContainer.d.ts +0 -9
  81. package/dist/icons/Clipboard.d.ts +0 -3
  82. package/dist/icons/Link.d.ts +0 -3
  83. package/dist/icons/ZoomIn.d.ts +0 -3
  84. package/dist/icons/index.d.ts +0 -3
  85. package/dist/mantine/theme.d.ts +0 -3
  86. package/dist/state/WhenInitialized.d.ts +0 -3
  87. package/dist/ui/Camera.d.ts +0 -3
  88. package/src/KeepAspectRatioContainer.tsx +0 -36
  89. package/src/icons/Clipboard.tsx +0 -24
  90. package/src/icons/Link.tsx +0 -23
  91. package/src/icons/ZoomIn.tsx +0 -25
  92. package/src/icons/index.ts +0 -3
  93. package/src/mantine/theme.ts +0 -20
  94. package/src/state/WhenInitialized.tsx +0 -24
  95. package/src/ui/Camera.tsx +0 -174
package/dist/state/DiagramContext.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { PropsWithChildren } from 'react';
2
- import { DiagramInitialState } from './diagramStore';
2
+ import { createDiagramStore, DiagramInitialState } from './diagramStore';
3
3
 
4
+ export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
4
5
  export declare const DiagramContext: import('react').Context<import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
6
+ readonly storeDevId: string;
5
7
  view: import('@likec4/core').DiagramView;
6
8
  readonly: boolean;
7
9
  showElementLinks: boolean;
@@ -12,9 +14,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
12
14
  nodesDraggable: boolean;
13
15
  nodesSelectable: boolean;
14
16
  experimentalEdgeEditing: boolean;
15
- viewSyncState: "synced" | "changed";
17
+ getContainer: () => HTMLDivElement | null;
16
18
  viewSyncDebounceTimeout: number | null;
17
19
  xyflow: import('..').XYFlowInstance;
20
+ xystore: import('../xyflow/hooks').XYStoreApi;
18
21
  initialized: boolean;
19
22
  xyflowSynced: boolean;
20
23
  activeDynamicViewStep: number | null;
@@ -25,13 +28,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
25
28
  hoveredEdgeId: string | null;
26
29
  dimmed: ReadonlySet<string>;
27
30
  previousViews: import('@likec4/core').DiagramView[];
28
- lastOnNavigate: {
31
+ lastOnNavigate: null | {
29
32
  fromView: import('@likec4/core').ViewID;
30
33
  toView: import('@likec4/core').ViewID;
31
34
  element: import('@likec4/core').DiagramNode;
32
35
  elementScreenPosition: import('@xyflow/system').XYPosition;
33
36
  positionCorrected: boolean;
34
- } | null;
37
+ };
35
38
  viewportChanged: boolean;
36
39
  onChange: import('..').OnChange | null | undefined;
37
40
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -52,470 +55,16 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
52
55
  resetLastClicked: () => void;
53
56
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
54
57
  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;
284
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
285
- fitDiagram: (xyStore: {
286
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
287
- source: string;
288
- target: string;
289
- sourceHandle?: string | null;
290
- targetHandle?: string | null;
291
- animated?: boolean;
292
- hidden?: boolean;
293
- deletable?: boolean;
294
- selectable?: boolean;
295
- selected?: boolean;
296
- markerStart?: import('@xyflow/system').EdgeMarkerType;
297
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
298
- zIndex?: number;
299
- ariaLabel?: string;
300
- interactionWidth?: number;
301
- label?: import('react').ReactNode;
302
- labelStyle?: import('react').CSSProperties;
303
- labelShowBg?: boolean;
304
- labelBgStyle?: import('react').CSSProperties;
305
- labelBgPadding?: [number, number];
306
- labelBgBorderRadius?: number;
307
- style?: import('react').CSSProperties;
308
- className?: string;
309
- updatable?: import('@xyflow/react').EdgeUpdatable;
310
- focusable?: boolean;
311
- data: import('..').RelationshipData;
312
- readonly id: string;
313
- readonly type: "relationship";
314
- }>;
315
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
316
- source: string;
317
- target: string;
318
- sourceHandle?: string | null;
319
- targetHandle?: string | null;
320
- animated?: boolean;
321
- hidden?: boolean;
322
- deletable?: boolean;
323
- selectable?: boolean;
324
- selected?: boolean;
325
- markerStart?: import('@xyflow/system').EdgeMarkerType;
326
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
327
- zIndex?: number;
328
- ariaLabel?: string;
329
- interactionWidth?: number;
330
- label?: import('react').ReactNode;
331
- labelStyle?: import('react').CSSProperties;
332
- labelShowBg?: boolean;
333
- labelBgStyle?: import('react').CSSProperties;
334
- labelBgPadding?: [number, number];
335
- labelBgBorderRadius?: number;
336
- style?: import('react').CSSProperties;
337
- className?: string;
338
- updatable?: import('@xyflow/react').EdgeUpdatable;
339
- focusable?: boolean;
340
- data: import('..').RelationshipData;
341
- readonly id: string;
342
- readonly type: "relationship";
343
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
344
- source: string;
345
- target: string;
346
- sourceHandle?: string | null;
347
- targetHandle?: string | null;
348
- animated?: boolean;
349
- hidden?: boolean;
350
- deletable?: boolean;
351
- selectable?: boolean;
352
- selected?: boolean;
353
- markerStart?: import('@xyflow/system').EdgeMarkerType;
354
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
355
- zIndex?: number;
356
- ariaLabel?: string;
357
- interactionWidth?: number;
358
- label?: import('react').ReactNode;
359
- labelStyle?: import('react').CSSProperties;
360
- labelShowBg?: boolean;
361
- labelBgStyle?: import('react').CSSProperties;
362
- labelBgPadding?: [number, number];
363
- labelBgBorderRadius?: number;
364
- style?: import('react').CSSProperties;
365
- className?: string;
366
- updatable?: import('@xyflow/react').EdgeUpdatable;
367
- focusable?: boolean;
368
- data: import('..').RelationshipData;
369
- readonly id: string;
370
- readonly type: "relationship";
371
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
372
- source: string;
373
- target: string;
374
- sourceHandle?: string | null;
375
- targetHandle?: string | null;
376
- animated?: boolean;
377
- hidden?: boolean;
378
- deletable?: boolean;
379
- selectable?: boolean;
380
- selected?: boolean;
381
- markerStart?: import('@xyflow/system').EdgeMarkerType;
382
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
383
- zIndex?: number;
384
- ariaLabel?: string;
385
- interactionWidth?: number;
386
- label?: import('react').ReactNode;
387
- labelStyle?: import('react').CSSProperties;
388
- labelShowBg?: boolean;
389
- labelBgStyle?: import('react').CSSProperties;
390
- labelBgPadding?: [number, number];
391
- labelBgBorderRadius?: number;
392
- style?: import('react').CSSProperties;
393
- className?: string;
394
- updatable?: import('@xyflow/react').EdgeUpdatable;
395
- focusable?: boolean;
396
- data: import('..').RelationshipData;
397
- readonly id: string;
398
- readonly type: "relationship";
399
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
400
- source: string;
401
- target: string;
402
- sourceHandle?: string | null;
403
- targetHandle?: string | null;
404
- animated?: boolean;
405
- hidden?: boolean;
406
- deletable?: boolean;
407
- selectable?: boolean;
408
- selected?: boolean;
409
- markerStart?: import('@xyflow/system').EdgeMarkerType;
410
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
411
- zIndex?: number;
412
- ariaLabel?: string;
413
- interactionWidth?: number;
414
- label?: import('react').ReactNode;
415
- labelStyle?: import('react').CSSProperties;
416
- labelShowBg?: boolean;
417
- labelBgStyle?: import('react').CSSProperties;
418
- labelBgPadding?: [number, number];
419
- labelBgBorderRadius?: number;
420
- style?: import('react').CSSProperties;
421
- className?: string;
422
- updatable?: import('@xyflow/react').EdgeUpdatable;
423
- focusable?: boolean;
424
- data: import('..').RelationshipData;
425
- readonly id: string;
426
- readonly type: "relationship";
427
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
428
- source: string;
429
- target: string;
430
- sourceHandle?: string | null;
431
- targetHandle?: string | null;
432
- animated?: boolean;
433
- hidden?: boolean;
434
- deletable?: boolean;
435
- selectable?: boolean;
436
- selected?: boolean;
437
- markerStart?: import('@xyflow/system').EdgeMarkerType;
438
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
439
- zIndex?: number;
440
- ariaLabel?: string;
441
- interactionWidth?: number;
442
- label?: import('react').ReactNode;
443
- labelStyle?: import('react').CSSProperties;
444
- labelShowBg?: boolean;
445
- labelBgStyle?: import('react').CSSProperties;
446
- labelBgPadding?: [number, number];
447
- labelBgBorderRadius?: number;
448
- style?: import('react').CSSProperties;
449
- className?: string;
450
- updatable?: import('@xyflow/react').EdgeUpdatable;
451
- focusable?: boolean;
452
- data: import('..').RelationshipData;
453
- readonly id: string;
454
- readonly type: "relationship";
455
- }>>), replace?: boolean | undefined) => void;
456
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
457
- source: string;
458
- target: string;
459
- sourceHandle?: string | null;
460
- targetHandle?: string | null;
461
- animated?: boolean;
462
- hidden?: boolean;
463
- deletable?: boolean;
464
- selectable?: boolean;
465
- selected?: boolean;
466
- markerStart?: import('@xyflow/system').EdgeMarkerType;
467
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
468
- zIndex?: number;
469
- ariaLabel?: string;
470
- interactionWidth?: number;
471
- label?: import('react').ReactNode;
472
- labelStyle?: import('react').CSSProperties;
473
- labelShowBg?: boolean;
474
- labelBgStyle?: import('react').CSSProperties;
475
- labelBgPadding?: [number, number];
476
- labelBgBorderRadius?: number;
477
- style?: import('react').CSSProperties;
478
- className?: string;
479
- updatable?: import('@xyflow/react').EdgeUpdatable;
480
- focusable?: boolean;
481
- data: import('..').RelationshipData;
482
- readonly id: string;
483
- readonly type: "relationship";
484
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
485
- source: string;
486
- target: string;
487
- sourceHandle?: string | null;
488
- targetHandle?: string | null;
489
- animated?: boolean;
490
- hidden?: boolean;
491
- deletable?: boolean;
492
- selectable?: boolean;
493
- selected?: boolean;
494
- markerStart?: import('@xyflow/system').EdgeMarkerType;
495
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
496
- zIndex?: number;
497
- ariaLabel?: string;
498
- interactionWidth?: number;
499
- label?: import('react').ReactNode;
500
- labelStyle?: import('react').CSSProperties;
501
- labelShowBg?: boolean;
502
- labelBgStyle?: import('react').CSSProperties;
503
- labelBgPadding?: [number, number];
504
- labelBgBorderRadius?: number;
505
- style?: import('react').CSSProperties;
506
- className?: string;
507
- updatable?: import('@xyflow/react').EdgeUpdatable;
508
- focusable?: boolean;
509
- data: import('..').RelationshipData;
510
- readonly id: string;
511
- readonly type: "relationship";
512
- }>) => void) => () => void;
513
- }) => void;
514
- nextDynamicStep: (increment?: number | undefined) => void;
58
+ cancelSaveManualLayout: () => void;
59
+ triggerSaveManualLayout: () => void;
60
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
61
+ fitDiagram: (duration?: number) => void;
62
+ nextDynamicStep: (increment?: number) => void;
515
63
  stopDynamicView: () => void;
516
64
  }>, "subscribe"> & {
517
65
  subscribe: {
518
66
  (listener: (selectedState: {
67
+ readonly storeDevId: string;
519
68
  view: import('@likec4/core').DiagramView;
520
69
  readonly: boolean;
521
70
  showElementLinks: boolean;
@@ -526,9 +75,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
526
75
  nodesDraggable: boolean;
527
76
  nodesSelectable: boolean;
528
77
  experimentalEdgeEditing: boolean;
529
- viewSyncState: "synced" | "changed";
78
+ getContainer: () => HTMLDivElement | null;
530
79
  viewSyncDebounceTimeout: number | null;
531
80
  xyflow: import('..').XYFlowInstance;
81
+ xystore: import('../xyflow/hooks').XYStoreApi;
532
82
  initialized: boolean;
533
83
  xyflowSynced: boolean;
534
84
  activeDynamicViewStep: number | null;
@@ -539,13 +89,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
539
89
  hoveredEdgeId: string | null;
540
90
  dimmed: ReadonlySet<string>;
541
91
  previousViews: import('@likec4/core').DiagramView[];
542
- lastOnNavigate: {
92
+ lastOnNavigate: null | {
543
93
  fromView: import('@likec4/core').ViewID;
544
94
  toView: import('@likec4/core').ViewID;
545
95
  element: import('@likec4/core').DiagramNode;
546
96
  elementScreenPosition: import('@xyflow/system').XYPosition;
547
97
  positionCorrected: boolean;
548
- } | null;
98
+ };
549
99
  viewportChanged: boolean;
550
100
  onChange: import('..').OnChange | null | undefined;
551
101
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -566,468 +116,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
566
116
  resetLastClicked: () => void;
567
117
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
568
118
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
569
- triggerSaveManualLayout: (xystore: {
570
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
571
- source: string;
572
- target: string;
573
- sourceHandle?: string | null;
574
- targetHandle?: string | null;
575
- animated?: boolean;
576
- hidden?: boolean;
577
- deletable?: boolean;
578
- selectable?: boolean;
579
- selected?: boolean;
580
- markerStart?: import('@xyflow/system').EdgeMarkerType;
581
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
582
- zIndex?: number;
583
- ariaLabel?: string;
584
- interactionWidth?: number;
585
- label?: import('react').ReactNode;
586
- labelStyle?: import('react').CSSProperties;
587
- labelShowBg?: boolean;
588
- labelBgStyle?: import('react').CSSProperties;
589
- labelBgPadding?: [number, number];
590
- labelBgBorderRadius?: number;
591
- style?: import('react').CSSProperties;
592
- className?: string;
593
- updatable?: import('@xyflow/react').EdgeUpdatable;
594
- focusable?: boolean;
595
- data: import('..').RelationshipData;
596
- readonly id: string;
597
- readonly type: "relationship";
598
- }>;
599
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
600
- source: string;
601
- target: string;
602
- sourceHandle?: string | null;
603
- targetHandle?: string | null;
604
- animated?: boolean;
605
- hidden?: boolean;
606
- deletable?: boolean;
607
- selectable?: boolean;
608
- selected?: boolean;
609
- markerStart?: import('@xyflow/system').EdgeMarkerType;
610
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
611
- zIndex?: number;
612
- ariaLabel?: string;
613
- interactionWidth?: number;
614
- label?: import('react').ReactNode;
615
- labelStyle?: import('react').CSSProperties;
616
- labelShowBg?: boolean;
617
- labelBgStyle?: import('react').CSSProperties;
618
- labelBgPadding?: [number, number];
619
- labelBgBorderRadius?: number;
620
- style?: import('react').CSSProperties;
621
- className?: string;
622
- updatable?: import('@xyflow/react').EdgeUpdatable;
623
- focusable?: boolean;
624
- data: import('..').RelationshipData;
625
- readonly id: string;
626
- readonly type: "relationship";
627
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
628
- source: string;
629
- target: string;
630
- sourceHandle?: string | null;
631
- targetHandle?: string | null;
632
- animated?: boolean;
633
- hidden?: boolean;
634
- deletable?: boolean;
635
- selectable?: boolean;
636
- selected?: boolean;
637
- markerStart?: import('@xyflow/system').EdgeMarkerType;
638
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
639
- zIndex?: number;
640
- ariaLabel?: string;
641
- interactionWidth?: number;
642
- label?: import('react').ReactNode;
643
- labelStyle?: import('react').CSSProperties;
644
- labelShowBg?: boolean;
645
- labelBgStyle?: import('react').CSSProperties;
646
- labelBgPadding?: [number, number];
647
- labelBgBorderRadius?: number;
648
- style?: import('react').CSSProperties;
649
- className?: string;
650
- updatable?: import('@xyflow/react').EdgeUpdatable;
651
- focusable?: boolean;
652
- data: import('..').RelationshipData;
653
- readonly id: string;
654
- readonly type: "relationship";
655
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
656
- source: string;
657
- target: string;
658
- sourceHandle?: string | null;
659
- targetHandle?: string | null;
660
- animated?: boolean;
661
- hidden?: boolean;
662
- deletable?: boolean;
663
- selectable?: boolean;
664
- selected?: boolean;
665
- markerStart?: import('@xyflow/system').EdgeMarkerType;
666
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
667
- zIndex?: number;
668
- ariaLabel?: string;
669
- interactionWidth?: number;
670
- label?: import('react').ReactNode;
671
- labelStyle?: import('react').CSSProperties;
672
- labelShowBg?: boolean;
673
- labelBgStyle?: import('react').CSSProperties;
674
- labelBgPadding?: [number, number];
675
- labelBgBorderRadius?: number;
676
- style?: import('react').CSSProperties;
677
- className?: string;
678
- updatable?: import('@xyflow/react').EdgeUpdatable;
679
- focusable?: boolean;
680
- data: import('..').RelationshipData;
681
- readonly id: string;
682
- readonly type: "relationship";
683
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
684
- source: string;
685
- target: string;
686
- sourceHandle?: string | null;
687
- targetHandle?: string | null;
688
- animated?: boolean;
689
- hidden?: boolean;
690
- deletable?: boolean;
691
- selectable?: boolean;
692
- selected?: boolean;
693
- markerStart?: import('@xyflow/system').EdgeMarkerType;
694
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
695
- zIndex?: number;
696
- ariaLabel?: string;
697
- interactionWidth?: number;
698
- label?: import('react').ReactNode;
699
- labelStyle?: import('react').CSSProperties;
700
- labelShowBg?: boolean;
701
- labelBgStyle?: import('react').CSSProperties;
702
- labelBgPadding?: [number, number];
703
- labelBgBorderRadius?: number;
704
- style?: import('react').CSSProperties;
705
- className?: string;
706
- updatable?: import('@xyflow/react').EdgeUpdatable;
707
- focusable?: boolean;
708
- data: import('..').RelationshipData;
709
- readonly id: string;
710
- readonly type: "relationship";
711
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
712
- source: string;
713
- target: string;
714
- sourceHandle?: string | null;
715
- targetHandle?: string | null;
716
- animated?: boolean;
717
- hidden?: boolean;
718
- deletable?: boolean;
719
- selectable?: boolean;
720
- selected?: boolean;
721
- markerStart?: import('@xyflow/system').EdgeMarkerType;
722
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
723
- zIndex?: number;
724
- ariaLabel?: string;
725
- interactionWidth?: number;
726
- label?: import('react').ReactNode;
727
- labelStyle?: import('react').CSSProperties;
728
- labelShowBg?: boolean;
729
- labelBgStyle?: import('react').CSSProperties;
730
- labelBgPadding?: [number, number];
731
- labelBgBorderRadius?: number;
732
- style?: import('react').CSSProperties;
733
- className?: string;
734
- updatable?: import('@xyflow/react').EdgeUpdatable;
735
- focusable?: boolean;
736
- data: import('..').RelationshipData;
737
- readonly id: string;
738
- readonly type: "relationship";
739
- }>>), replace?: boolean | undefined) => void;
740
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
741
- source: string;
742
- target: string;
743
- sourceHandle?: string | null;
744
- targetHandle?: string | null;
745
- animated?: boolean;
746
- hidden?: boolean;
747
- deletable?: boolean;
748
- selectable?: boolean;
749
- selected?: boolean;
750
- markerStart?: import('@xyflow/system').EdgeMarkerType;
751
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
752
- zIndex?: number;
753
- ariaLabel?: string;
754
- interactionWidth?: number;
755
- label?: import('react').ReactNode;
756
- labelStyle?: import('react').CSSProperties;
757
- labelShowBg?: boolean;
758
- labelBgStyle?: import('react').CSSProperties;
759
- labelBgPadding?: [number, number];
760
- labelBgBorderRadius?: number;
761
- style?: import('react').CSSProperties;
762
- className?: string;
763
- updatable?: import('@xyflow/react').EdgeUpdatable;
764
- focusable?: boolean;
765
- data: import('..').RelationshipData;
766
- readonly id: string;
767
- readonly type: "relationship";
768
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
769
- source: string;
770
- target: string;
771
- sourceHandle?: string | null;
772
- targetHandle?: string | null;
773
- animated?: boolean;
774
- hidden?: boolean;
775
- deletable?: boolean;
776
- selectable?: boolean;
777
- selected?: boolean;
778
- markerStart?: import('@xyflow/system').EdgeMarkerType;
779
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
780
- zIndex?: number;
781
- ariaLabel?: string;
782
- interactionWidth?: number;
783
- label?: import('react').ReactNode;
784
- labelStyle?: import('react').CSSProperties;
785
- labelShowBg?: boolean;
786
- labelBgStyle?: import('react').CSSProperties;
787
- labelBgPadding?: [number, number];
788
- labelBgBorderRadius?: number;
789
- style?: import('react').CSSProperties;
790
- className?: string;
791
- updatable?: import('@xyflow/react').EdgeUpdatable;
792
- focusable?: boolean;
793
- data: import('..').RelationshipData;
794
- readonly id: string;
795
- readonly type: "relationship";
796
- }>) => void) => () => void;
797
- }) => void;
798
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
799
- fitDiagram: (xyStore: {
800
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
801
- source: string;
802
- target: string;
803
- sourceHandle?: string | null;
804
- targetHandle?: string | null;
805
- animated?: boolean;
806
- hidden?: boolean;
807
- deletable?: boolean;
808
- selectable?: boolean;
809
- selected?: boolean;
810
- markerStart?: import('@xyflow/system').EdgeMarkerType;
811
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
812
- zIndex?: number;
813
- ariaLabel?: string;
814
- interactionWidth?: number;
815
- label?: import('react').ReactNode;
816
- labelStyle?: import('react').CSSProperties;
817
- labelShowBg?: boolean;
818
- labelBgStyle?: import('react').CSSProperties;
819
- labelBgPadding?: [number, number];
820
- labelBgBorderRadius?: number;
821
- style?: import('react').CSSProperties;
822
- className?: string;
823
- updatable?: import('@xyflow/react').EdgeUpdatable;
824
- focusable?: boolean;
825
- data: import('..').RelationshipData;
826
- readonly id: string;
827
- readonly type: "relationship";
828
- }>;
829
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
830
- source: string;
831
- target: string;
832
- sourceHandle?: string | null;
833
- targetHandle?: string | null;
834
- animated?: boolean;
835
- hidden?: boolean;
836
- deletable?: boolean;
837
- selectable?: boolean;
838
- selected?: boolean;
839
- markerStart?: import('@xyflow/system').EdgeMarkerType;
840
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
841
- zIndex?: number;
842
- ariaLabel?: string;
843
- interactionWidth?: number;
844
- label?: import('react').ReactNode;
845
- labelStyle?: import('react').CSSProperties;
846
- labelShowBg?: boolean;
847
- labelBgStyle?: import('react').CSSProperties;
848
- labelBgPadding?: [number, number];
849
- labelBgBorderRadius?: number;
850
- style?: import('react').CSSProperties;
851
- className?: string;
852
- updatable?: import('@xyflow/react').EdgeUpdatable;
853
- focusable?: boolean;
854
- data: import('..').RelationshipData;
855
- readonly id: string;
856
- readonly type: "relationship";
857
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
858
- source: string;
859
- target: string;
860
- sourceHandle?: string | null;
861
- targetHandle?: string | null;
862
- animated?: boolean;
863
- hidden?: boolean;
864
- deletable?: boolean;
865
- selectable?: boolean;
866
- selected?: boolean;
867
- markerStart?: import('@xyflow/system').EdgeMarkerType;
868
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
869
- zIndex?: number;
870
- ariaLabel?: string;
871
- interactionWidth?: number;
872
- label?: import('react').ReactNode;
873
- labelStyle?: import('react').CSSProperties;
874
- labelShowBg?: boolean;
875
- labelBgStyle?: import('react').CSSProperties;
876
- labelBgPadding?: [number, number];
877
- labelBgBorderRadius?: number;
878
- style?: import('react').CSSProperties;
879
- className?: string;
880
- updatable?: import('@xyflow/react').EdgeUpdatable;
881
- focusable?: boolean;
882
- data: import('..').RelationshipData;
883
- readonly id: string;
884
- readonly type: "relationship";
885
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
886
- source: string;
887
- target: string;
888
- sourceHandle?: string | null;
889
- targetHandle?: string | null;
890
- animated?: boolean;
891
- hidden?: boolean;
892
- deletable?: boolean;
893
- selectable?: boolean;
894
- selected?: boolean;
895
- markerStart?: import('@xyflow/system').EdgeMarkerType;
896
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
897
- zIndex?: number;
898
- ariaLabel?: string;
899
- interactionWidth?: number;
900
- label?: import('react').ReactNode;
901
- labelStyle?: import('react').CSSProperties;
902
- labelShowBg?: boolean;
903
- labelBgStyle?: import('react').CSSProperties;
904
- labelBgPadding?: [number, number];
905
- labelBgBorderRadius?: number;
906
- style?: import('react').CSSProperties;
907
- className?: string;
908
- updatable?: import('@xyflow/react').EdgeUpdatable;
909
- focusable?: boolean;
910
- data: import('..').RelationshipData;
911
- readonly id: string;
912
- readonly type: "relationship";
913
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
914
- source: string;
915
- target: string;
916
- sourceHandle?: string | null;
917
- targetHandle?: string | null;
918
- animated?: boolean;
919
- hidden?: boolean;
920
- deletable?: boolean;
921
- selectable?: boolean;
922
- selected?: boolean;
923
- markerStart?: import('@xyflow/system').EdgeMarkerType;
924
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
925
- zIndex?: number;
926
- ariaLabel?: string;
927
- interactionWidth?: number;
928
- label?: import('react').ReactNode;
929
- labelStyle?: import('react').CSSProperties;
930
- labelShowBg?: boolean;
931
- labelBgStyle?: import('react').CSSProperties;
932
- labelBgPadding?: [number, number];
933
- labelBgBorderRadius?: number;
934
- style?: import('react').CSSProperties;
935
- className?: string;
936
- updatable?: import('@xyflow/react').EdgeUpdatable;
937
- focusable?: boolean;
938
- data: import('..').RelationshipData;
939
- readonly id: string;
940
- readonly type: "relationship";
941
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
942
- source: string;
943
- target: string;
944
- sourceHandle?: string | null;
945
- targetHandle?: string | null;
946
- animated?: boolean;
947
- hidden?: boolean;
948
- deletable?: boolean;
949
- selectable?: boolean;
950
- selected?: boolean;
951
- markerStart?: import('@xyflow/system').EdgeMarkerType;
952
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
953
- zIndex?: number;
954
- ariaLabel?: string;
955
- interactionWidth?: number;
956
- label?: import('react').ReactNode;
957
- labelStyle?: import('react').CSSProperties;
958
- labelShowBg?: boolean;
959
- labelBgStyle?: import('react').CSSProperties;
960
- labelBgPadding?: [number, number];
961
- labelBgBorderRadius?: number;
962
- style?: import('react').CSSProperties;
963
- className?: string;
964
- updatable?: import('@xyflow/react').EdgeUpdatable;
965
- focusable?: boolean;
966
- data: import('..').RelationshipData;
967
- readonly id: string;
968
- readonly type: "relationship";
969
- }>>), replace?: boolean | undefined) => void;
970
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
971
- source: string;
972
- target: string;
973
- sourceHandle?: string | null;
974
- targetHandle?: string | null;
975
- animated?: boolean;
976
- hidden?: boolean;
977
- deletable?: boolean;
978
- selectable?: boolean;
979
- selected?: boolean;
980
- markerStart?: import('@xyflow/system').EdgeMarkerType;
981
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
982
- zIndex?: number;
983
- ariaLabel?: string;
984
- interactionWidth?: number;
985
- label?: import('react').ReactNode;
986
- labelStyle?: import('react').CSSProperties;
987
- labelShowBg?: boolean;
988
- labelBgStyle?: import('react').CSSProperties;
989
- labelBgPadding?: [number, number];
990
- labelBgBorderRadius?: number;
991
- style?: import('react').CSSProperties;
992
- className?: string;
993
- updatable?: import('@xyflow/react').EdgeUpdatable;
994
- focusable?: boolean;
995
- data: import('..').RelationshipData;
996
- readonly id: string;
997
- readonly type: "relationship";
998
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
999
- source: string;
1000
- target: string;
1001
- sourceHandle?: string | null;
1002
- targetHandle?: string | null;
1003
- animated?: boolean;
1004
- hidden?: boolean;
1005
- deletable?: boolean;
1006
- selectable?: boolean;
1007
- selected?: boolean;
1008
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1009
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1010
- zIndex?: number;
1011
- ariaLabel?: string;
1012
- interactionWidth?: number;
1013
- label?: import('react').ReactNode;
1014
- labelStyle?: import('react').CSSProperties;
1015
- labelShowBg?: boolean;
1016
- labelBgStyle?: import('react').CSSProperties;
1017
- labelBgPadding?: [number, number];
1018
- labelBgBorderRadius?: number;
1019
- style?: import('react').CSSProperties;
1020
- className?: string;
1021
- updatable?: import('@xyflow/react').EdgeUpdatable;
1022
- focusable?: boolean;
1023
- data: import('..').RelationshipData;
1024
- readonly id: string;
1025
- readonly type: "relationship";
1026
- }>) => void) => () => void;
1027
- }) => void;
1028
- nextDynamicStep: (increment?: number | undefined) => void;
119
+ cancelSaveManualLayout: () => void;
120
+ triggerSaveManualLayout: () => void;
121
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
122
+ fitDiagram: (duration?: number) => void;
123
+ nextDynamicStep: (increment?: number) => void;
1029
124
  stopDynamicView: () => void;
1030
125
  }, previousSelectedState: {
126
+ readonly storeDevId: string;
1031
127
  view: import('@likec4/core').DiagramView;
1032
128
  readonly: boolean;
1033
129
  showElementLinks: boolean;
@@ -1038,9 +134,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1038
134
  nodesDraggable: boolean;
1039
135
  nodesSelectable: boolean;
1040
136
  experimentalEdgeEditing: boolean;
1041
- viewSyncState: "synced" | "changed";
137
+ getContainer: () => HTMLDivElement | null;
1042
138
  viewSyncDebounceTimeout: number | null;
1043
139
  xyflow: import('..').XYFlowInstance;
140
+ xystore: import('../xyflow/hooks').XYStoreApi;
1044
141
  initialized: boolean;
1045
142
  xyflowSynced: boolean;
1046
143
  activeDynamicViewStep: number | null;
@@ -1051,13 +148,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1051
148
  hoveredEdgeId: string | null;
1052
149
  dimmed: ReadonlySet<string>;
1053
150
  previousViews: import('@likec4/core').DiagramView[];
1054
- lastOnNavigate: {
151
+ lastOnNavigate: null | {
1055
152
  fromView: import('@likec4/core').ViewID;
1056
153
  toView: import('@likec4/core').ViewID;
1057
154
  element: import('@likec4/core').DiagramNode;
1058
155
  elementScreenPosition: import('@xyflow/system').XYPosition;
1059
156
  positionCorrected: boolean;
1060
- } | null;
157
+ };
1061
158
  viewportChanged: boolean;
1062
159
  onChange: import('..').OnChange | null | undefined;
1063
160
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -1078,469 +175,15 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1078
175
  resetLastClicked: () => void;
1079
176
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1080
177
  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;
1310
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1311
- fitDiagram: (xyStore: {
1312
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1313
- source: string;
1314
- target: string;
1315
- sourceHandle?: string | null;
1316
- targetHandle?: string | null;
1317
- animated?: boolean;
1318
- hidden?: boolean;
1319
- deletable?: boolean;
1320
- selectable?: boolean;
1321
- selected?: boolean;
1322
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1323
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1324
- zIndex?: number;
1325
- ariaLabel?: string;
1326
- interactionWidth?: number;
1327
- label?: import('react').ReactNode;
1328
- labelStyle?: import('react').CSSProperties;
1329
- labelShowBg?: boolean;
1330
- labelBgStyle?: import('react').CSSProperties;
1331
- labelBgPadding?: [number, number];
1332
- labelBgBorderRadius?: number;
1333
- style?: import('react').CSSProperties;
1334
- className?: string;
1335
- updatable?: import('@xyflow/react').EdgeUpdatable;
1336
- focusable?: boolean;
1337
- data: import('..').RelationshipData;
1338
- readonly id: string;
1339
- readonly type: "relationship";
1340
- }>;
1341
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1342
- source: string;
1343
- target: string;
1344
- sourceHandle?: string | null;
1345
- targetHandle?: string | null;
1346
- animated?: boolean;
1347
- hidden?: boolean;
1348
- deletable?: boolean;
1349
- selectable?: boolean;
1350
- selected?: boolean;
1351
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1352
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1353
- zIndex?: number;
1354
- ariaLabel?: string;
1355
- interactionWidth?: number;
1356
- label?: import('react').ReactNode;
1357
- labelStyle?: import('react').CSSProperties;
1358
- labelShowBg?: boolean;
1359
- labelBgStyle?: import('react').CSSProperties;
1360
- labelBgPadding?: [number, number];
1361
- labelBgBorderRadius?: number;
1362
- style?: import('react').CSSProperties;
1363
- className?: string;
1364
- updatable?: import('@xyflow/react').EdgeUpdatable;
1365
- focusable?: boolean;
1366
- data: import('..').RelationshipData;
1367
- readonly id: string;
1368
- readonly type: "relationship";
1369
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1370
- source: string;
1371
- target: string;
1372
- sourceHandle?: string | null;
1373
- targetHandle?: string | null;
1374
- animated?: boolean;
1375
- hidden?: boolean;
1376
- deletable?: boolean;
1377
- selectable?: boolean;
1378
- selected?: boolean;
1379
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1380
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1381
- zIndex?: number;
1382
- ariaLabel?: string;
1383
- interactionWidth?: number;
1384
- label?: import('react').ReactNode;
1385
- labelStyle?: import('react').CSSProperties;
1386
- labelShowBg?: boolean;
1387
- labelBgStyle?: import('react').CSSProperties;
1388
- labelBgPadding?: [number, number];
1389
- labelBgBorderRadius?: number;
1390
- style?: import('react').CSSProperties;
1391
- className?: string;
1392
- updatable?: import('@xyflow/react').EdgeUpdatable;
1393
- focusable?: boolean;
1394
- data: import('..').RelationshipData;
1395
- readonly id: string;
1396
- readonly type: "relationship";
1397
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1398
- source: string;
1399
- target: string;
1400
- sourceHandle?: string | null;
1401
- targetHandle?: string | null;
1402
- animated?: boolean;
1403
- hidden?: boolean;
1404
- deletable?: boolean;
1405
- selectable?: boolean;
1406
- selected?: boolean;
1407
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1408
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1409
- zIndex?: number;
1410
- ariaLabel?: string;
1411
- interactionWidth?: number;
1412
- label?: import('react').ReactNode;
1413
- labelStyle?: import('react').CSSProperties;
1414
- labelShowBg?: boolean;
1415
- labelBgStyle?: import('react').CSSProperties;
1416
- labelBgPadding?: [number, number];
1417
- labelBgBorderRadius?: number;
1418
- style?: import('react').CSSProperties;
1419
- className?: string;
1420
- updatable?: import('@xyflow/react').EdgeUpdatable;
1421
- focusable?: boolean;
1422
- data: import('..').RelationshipData;
1423
- readonly id: string;
1424
- readonly type: "relationship";
1425
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1426
- source: string;
1427
- target: string;
1428
- sourceHandle?: string | null;
1429
- targetHandle?: string | null;
1430
- animated?: boolean;
1431
- hidden?: boolean;
1432
- deletable?: boolean;
1433
- selectable?: boolean;
1434
- selected?: boolean;
1435
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1436
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1437
- zIndex?: number;
1438
- ariaLabel?: string;
1439
- interactionWidth?: number;
1440
- label?: import('react').ReactNode;
1441
- labelStyle?: import('react').CSSProperties;
1442
- labelShowBg?: boolean;
1443
- labelBgStyle?: import('react').CSSProperties;
1444
- labelBgPadding?: [number, number];
1445
- labelBgBorderRadius?: number;
1446
- style?: import('react').CSSProperties;
1447
- className?: string;
1448
- updatable?: import('@xyflow/react').EdgeUpdatable;
1449
- focusable?: boolean;
1450
- data: import('..').RelationshipData;
1451
- readonly id: string;
1452
- readonly type: "relationship";
1453
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1454
- source: string;
1455
- target: string;
1456
- sourceHandle?: string | null;
1457
- targetHandle?: string | null;
1458
- animated?: boolean;
1459
- hidden?: boolean;
1460
- deletable?: boolean;
1461
- selectable?: boolean;
1462
- selected?: boolean;
1463
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1464
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1465
- zIndex?: number;
1466
- ariaLabel?: string;
1467
- interactionWidth?: number;
1468
- label?: import('react').ReactNode;
1469
- labelStyle?: import('react').CSSProperties;
1470
- labelShowBg?: boolean;
1471
- labelBgStyle?: import('react').CSSProperties;
1472
- labelBgPadding?: [number, number];
1473
- labelBgBorderRadius?: number;
1474
- style?: import('react').CSSProperties;
1475
- className?: string;
1476
- updatable?: import('@xyflow/react').EdgeUpdatable;
1477
- focusable?: boolean;
1478
- data: import('..').RelationshipData;
1479
- readonly id: string;
1480
- readonly type: "relationship";
1481
- }>>), replace?: boolean | undefined) => void;
1482
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1483
- source: string;
1484
- target: string;
1485
- sourceHandle?: string | null;
1486
- targetHandle?: string | null;
1487
- animated?: boolean;
1488
- hidden?: boolean;
1489
- deletable?: boolean;
1490
- selectable?: boolean;
1491
- selected?: boolean;
1492
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1493
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1494
- zIndex?: number;
1495
- ariaLabel?: string;
1496
- interactionWidth?: number;
1497
- label?: import('react').ReactNode;
1498
- labelStyle?: import('react').CSSProperties;
1499
- labelShowBg?: boolean;
1500
- labelBgStyle?: import('react').CSSProperties;
1501
- labelBgPadding?: [number, number];
1502
- labelBgBorderRadius?: number;
1503
- style?: import('react').CSSProperties;
1504
- className?: string;
1505
- updatable?: import('@xyflow/react').EdgeUpdatable;
1506
- focusable?: boolean;
1507
- data: import('..').RelationshipData;
1508
- readonly id: string;
1509
- readonly type: "relationship";
1510
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1511
- source: string;
1512
- target: string;
1513
- sourceHandle?: string | null;
1514
- targetHandle?: string | null;
1515
- animated?: boolean;
1516
- hidden?: boolean;
1517
- deletable?: boolean;
1518
- selectable?: boolean;
1519
- selected?: boolean;
1520
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1521
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1522
- zIndex?: number;
1523
- ariaLabel?: string;
1524
- interactionWidth?: number;
1525
- label?: import('react').ReactNode;
1526
- labelStyle?: import('react').CSSProperties;
1527
- labelShowBg?: boolean;
1528
- labelBgStyle?: import('react').CSSProperties;
1529
- labelBgPadding?: [number, number];
1530
- labelBgBorderRadius?: number;
1531
- style?: import('react').CSSProperties;
1532
- className?: string;
1533
- updatable?: import('@xyflow/react').EdgeUpdatable;
1534
- focusable?: boolean;
1535
- data: import('..').RelationshipData;
1536
- readonly id: string;
1537
- readonly type: "relationship";
1538
- }>) => void) => () => void;
1539
- }) => void;
1540
- nextDynamicStep: (increment?: number | undefined) => void;
178
+ cancelSaveManualLayout: () => void;
179
+ triggerSaveManualLayout: () => void;
180
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
181
+ fitDiagram: (duration?: number) => void;
182
+ nextDynamicStep: (increment?: number) => void;
1541
183
  stopDynamicView: () => void;
1542
184
  }) => void): () => void;
1543
185
  <U>(selector: (state: {
186
+ readonly storeDevId: string;
1544
187
  view: import('@likec4/core').DiagramView;
1545
188
  readonly: boolean;
1546
189
  showElementLinks: boolean;
@@ -1551,9 +194,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1551
194
  nodesDraggable: boolean;
1552
195
  nodesSelectable: boolean;
1553
196
  experimentalEdgeEditing: boolean;
1554
- viewSyncState: "synced" | "changed";
197
+ getContainer: () => HTMLDivElement | null;
1555
198
  viewSyncDebounceTimeout: number | null;
1556
199
  xyflow: import('..').XYFlowInstance;
200
+ xystore: import('../xyflow/hooks').XYStoreApi;
1557
201
  initialized: boolean;
1558
202
  xyflowSynced: boolean;
1559
203
  activeDynamicViewStep: number | null;
@@ -1564,13 +208,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1564
208
  hoveredEdgeId: string | null;
1565
209
  dimmed: ReadonlySet<string>;
1566
210
  previousViews: import('@likec4/core').DiagramView[];
1567
- lastOnNavigate: {
211
+ lastOnNavigate: null | {
1568
212
  fromView: import('@likec4/core').ViewID;
1569
213
  toView: import('@likec4/core').ViewID;
1570
214
  element: import('@likec4/core').DiagramNode;
1571
215
  elementScreenPosition: import('@xyflow/system').XYPosition;
1572
216
  positionCorrected: boolean;
1573
- } | null;
217
+ };
1574
218
  viewportChanged: boolean;
1575
219
  onChange: import('..').OnChange | null | undefined;
1576
220
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -1591,466 +235,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1591
235
  resetLastClicked: () => void;
1592
236
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1593
237
  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;
238
+ cancelSaveManualLayout: () => void;
239
+ triggerSaveManualLayout: () => void;
240
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
241
+ fitDiagram: (duration?: number) => void;
242
+ nextDynamicStep: (increment?: number) => void;
2054
243
  stopDynamicView: () => void;
2055
244
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
2056
245
  equalityFn?: (a: U, b: U) => boolean;
@@ -2061,6 +250,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2061
250
  setState<A extends string | {
2062
251
  type: string;
2063
252
  }>(partial: {
253
+ readonly storeDevId: string;
2064
254
  view: import('@likec4/core').DiagramView;
2065
255
  readonly: boolean;
2066
256
  showElementLinks: boolean;
@@ -2071,9 +261,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2071
261
  nodesDraggable: boolean;
2072
262
  nodesSelectable: boolean;
2073
263
  experimentalEdgeEditing: boolean;
2074
- viewSyncState: "synced" | "changed";
264
+ getContainer: () => HTMLDivElement | null;
2075
265
  viewSyncDebounceTimeout: number | null;
2076
266
  xyflow: import('..').XYFlowInstance;
267
+ xystore: import('../xyflow/hooks').XYStoreApi;
2077
268
  initialized: boolean;
2078
269
  xyflowSynced: boolean;
2079
270
  activeDynamicViewStep: number | null;
@@ -2084,13 +275,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2084
275
  hoveredEdgeId: string | null;
2085
276
  dimmed: ReadonlySet<string>;
2086
277
  previousViews: import('@likec4/core').DiagramView[];
2087
- lastOnNavigate: {
278
+ lastOnNavigate: null | {
2088
279
  fromView: import('@likec4/core').ViewID;
2089
280
  toView: import('@likec4/core').ViewID;
2090
281
  element: import('@likec4/core').DiagramNode;
2091
282
  elementScreenPosition: import('@xyflow/system').XYPosition;
2092
283
  positionCorrected: boolean;
2093
- } | null;
284
+ };
2094
285
  viewportChanged: boolean;
2095
286
  onChange: import('..').OnChange | null | undefined;
2096
287
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -2111,468 +302,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2111
302
  resetLastClicked: () => void;
2112
303
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2113
304
  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;
305
+ cancelSaveManualLayout: () => void;
306
+ triggerSaveManualLayout: () => void;
307
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
308
+ fitDiagram: (duration?: number) => void;
309
+ nextDynamicStep: (increment?: number) => void;
2574
310
  stopDynamicView: () => void;
2575
311
  } | Partial<{
312
+ readonly storeDevId: string;
2576
313
  view: import('@likec4/core').DiagramView;
2577
314
  readonly: boolean;
2578
315
  showElementLinks: boolean;
@@ -2583,9 +320,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2583
320
  nodesDraggable: boolean;
2584
321
  nodesSelectable: boolean;
2585
322
  experimentalEdgeEditing: boolean;
2586
- viewSyncState: "synced" | "changed";
323
+ getContainer: () => HTMLDivElement | null;
2587
324
  viewSyncDebounceTimeout: number | null;
2588
325
  xyflow: import('..').XYFlowInstance;
326
+ xystore: import('../xyflow/hooks').XYStoreApi;
2589
327
  initialized: boolean;
2590
328
  xyflowSynced: boolean;
2591
329
  activeDynamicViewStep: number | null;
@@ -2596,13 +334,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2596
334
  hoveredEdgeId: string | null;
2597
335
  dimmed: ReadonlySet<string>;
2598
336
  previousViews: import('@likec4/core').DiagramView[];
2599
- lastOnNavigate: {
337
+ lastOnNavigate: null | {
2600
338
  fromView: import('@likec4/core').ViewID;
2601
339
  toView: import('@likec4/core').ViewID;
2602
340
  element: import('@likec4/core').DiagramNode;
2603
341
  elementScreenPosition: import('@xyflow/system').XYPosition;
2604
342
  positionCorrected: boolean;
2605
- } | null;
343
+ };
2606
344
  viewportChanged: boolean;
2607
345
  onChange: import('..').OnChange | null | undefined;
2608
346
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -2623,468 +361,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2623
361
  resetLastClicked: () => void;
2624
362
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2625
363
  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;
364
+ cancelSaveManualLayout: () => void;
365
+ triggerSaveManualLayout: () => void;
366
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
367
+ fitDiagram: (duration?: number) => void;
368
+ nextDynamicStep: (increment?: number) => void;
3086
369
  stopDynamicView: () => void;
3087
370
  }> | ((state: {
371
+ readonly storeDevId: string;
3088
372
  view: import('@likec4/core').DiagramView;
3089
373
  readonly: boolean;
3090
374
  showElementLinks: boolean;
@@ -3095,9 +379,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3095
379
  nodesDraggable: boolean;
3096
380
  nodesSelectable: boolean;
3097
381
  experimentalEdgeEditing: boolean;
3098
- viewSyncState: "synced" | "changed";
382
+ getContainer: () => HTMLDivElement | null;
3099
383
  viewSyncDebounceTimeout: number | null;
3100
384
  xyflow: import('..').XYFlowInstance;
385
+ xystore: import('../xyflow/hooks').XYStoreApi;
3101
386
  initialized: boolean;
3102
387
  xyflowSynced: boolean;
3103
388
  activeDynamicViewStep: number | null;
@@ -3108,13 +393,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3108
393
  hoveredEdgeId: string | null;
3109
394
  dimmed: ReadonlySet<string>;
3110
395
  previousViews: import('@likec4/core').DiagramView[];
3111
- lastOnNavigate: {
396
+ lastOnNavigate: null | {
3112
397
  fromView: import('@likec4/core').ViewID;
3113
398
  toView: import('@likec4/core').ViewID;
3114
399
  element: import('@likec4/core').DiagramNode;
3115
400
  elementScreenPosition: import('@xyflow/system').XYPosition;
3116
401
  positionCorrected: boolean;
3117
- } | null;
402
+ };
3118
403
  viewportChanged: boolean;
3119
404
  onChange: import('..').OnChange | null | undefined;
3120
405
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -3135,468 +420,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3135
420
  resetLastClicked: () => void;
3136
421
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3137
422
  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;
3367
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3368
- fitDiagram: (xyStore: {
3369
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3370
- source: string;
3371
- target: string;
3372
- sourceHandle?: string | null;
3373
- targetHandle?: string | null;
3374
- animated?: boolean;
3375
- hidden?: boolean;
3376
- deletable?: boolean;
3377
- selectable?: boolean;
3378
- selected?: boolean;
3379
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3380
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3381
- zIndex?: number;
3382
- ariaLabel?: string;
3383
- interactionWidth?: number;
3384
- label?: import('react').ReactNode;
3385
- labelStyle?: import('react').CSSProperties;
3386
- labelShowBg?: boolean;
3387
- labelBgStyle?: import('react').CSSProperties;
3388
- labelBgPadding?: [number, number];
3389
- labelBgBorderRadius?: number;
3390
- style?: import('react').CSSProperties;
3391
- className?: string;
3392
- updatable?: import('@xyflow/react').EdgeUpdatable;
3393
- focusable?: boolean;
3394
- data: import('..').RelationshipData;
3395
- readonly id: string;
3396
- readonly type: "relationship";
3397
- }>;
3398
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3399
- source: string;
3400
- target: string;
3401
- sourceHandle?: string | null;
3402
- targetHandle?: string | null;
3403
- animated?: boolean;
3404
- hidden?: boolean;
3405
- deletable?: boolean;
3406
- selectable?: boolean;
3407
- selected?: boolean;
3408
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3409
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3410
- zIndex?: number;
3411
- ariaLabel?: string;
3412
- interactionWidth?: number;
3413
- label?: import('react').ReactNode;
3414
- labelStyle?: import('react').CSSProperties;
3415
- labelShowBg?: boolean;
3416
- labelBgStyle?: import('react').CSSProperties;
3417
- labelBgPadding?: [number, number];
3418
- labelBgBorderRadius?: number;
3419
- style?: import('react').CSSProperties;
3420
- className?: string;
3421
- updatable?: import('@xyflow/react').EdgeUpdatable;
3422
- focusable?: boolean;
3423
- data: import('..').RelationshipData;
3424
- readonly id: string;
3425
- readonly type: "relationship";
3426
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3427
- source: string;
3428
- target: string;
3429
- sourceHandle?: string | null;
3430
- targetHandle?: string | null;
3431
- animated?: boolean;
3432
- hidden?: boolean;
3433
- deletable?: boolean;
3434
- selectable?: boolean;
3435
- selected?: boolean;
3436
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3437
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3438
- zIndex?: number;
3439
- ariaLabel?: string;
3440
- interactionWidth?: number;
3441
- label?: import('react').ReactNode;
3442
- labelStyle?: import('react').CSSProperties;
3443
- labelShowBg?: boolean;
3444
- labelBgStyle?: import('react').CSSProperties;
3445
- labelBgPadding?: [number, number];
3446
- labelBgBorderRadius?: number;
3447
- style?: import('react').CSSProperties;
3448
- className?: string;
3449
- updatable?: import('@xyflow/react').EdgeUpdatable;
3450
- focusable?: boolean;
3451
- data: import('..').RelationshipData;
3452
- readonly id: string;
3453
- readonly type: "relationship";
3454
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3455
- source: string;
3456
- target: string;
3457
- sourceHandle?: string | null;
3458
- targetHandle?: string | null;
3459
- animated?: boolean;
3460
- hidden?: boolean;
3461
- deletable?: boolean;
3462
- selectable?: boolean;
3463
- selected?: boolean;
3464
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3465
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3466
- zIndex?: number;
3467
- ariaLabel?: string;
3468
- interactionWidth?: number;
3469
- label?: import('react').ReactNode;
3470
- labelStyle?: import('react').CSSProperties;
3471
- labelShowBg?: boolean;
3472
- labelBgStyle?: import('react').CSSProperties;
3473
- labelBgPadding?: [number, number];
3474
- labelBgBorderRadius?: number;
3475
- style?: import('react').CSSProperties;
3476
- className?: string;
3477
- updatable?: import('@xyflow/react').EdgeUpdatable;
3478
- focusable?: boolean;
3479
- data: import('..').RelationshipData;
3480
- readonly id: string;
3481
- readonly type: "relationship";
3482
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3483
- source: string;
3484
- target: string;
3485
- sourceHandle?: string | null;
3486
- targetHandle?: string | null;
3487
- animated?: boolean;
3488
- hidden?: boolean;
3489
- deletable?: boolean;
3490
- selectable?: boolean;
3491
- selected?: boolean;
3492
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3493
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3494
- zIndex?: number;
3495
- ariaLabel?: string;
3496
- interactionWidth?: number;
3497
- label?: import('react').ReactNode;
3498
- labelStyle?: import('react').CSSProperties;
3499
- labelShowBg?: boolean;
3500
- labelBgStyle?: import('react').CSSProperties;
3501
- labelBgPadding?: [number, number];
3502
- labelBgBorderRadius?: number;
3503
- style?: import('react').CSSProperties;
3504
- className?: string;
3505
- updatable?: import('@xyflow/react').EdgeUpdatable;
3506
- focusable?: boolean;
3507
- data: import('..').RelationshipData;
3508
- readonly id: string;
3509
- readonly type: "relationship";
3510
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3511
- source: string;
3512
- target: string;
3513
- sourceHandle?: string | null;
3514
- targetHandle?: string | null;
3515
- animated?: boolean;
3516
- hidden?: boolean;
3517
- deletable?: boolean;
3518
- selectable?: boolean;
3519
- selected?: boolean;
3520
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3521
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3522
- zIndex?: number;
3523
- ariaLabel?: string;
3524
- interactionWidth?: number;
3525
- label?: import('react').ReactNode;
3526
- labelStyle?: import('react').CSSProperties;
3527
- labelShowBg?: boolean;
3528
- labelBgStyle?: import('react').CSSProperties;
3529
- labelBgPadding?: [number, number];
3530
- labelBgBorderRadius?: number;
3531
- style?: import('react').CSSProperties;
3532
- className?: string;
3533
- updatable?: import('@xyflow/react').EdgeUpdatable;
3534
- focusable?: boolean;
3535
- data: import('..').RelationshipData;
3536
- readonly id: string;
3537
- readonly type: "relationship";
3538
- }>>), replace?: boolean | undefined) => void;
3539
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3540
- source: string;
3541
- target: string;
3542
- sourceHandle?: string | null;
3543
- targetHandle?: string | null;
3544
- animated?: boolean;
3545
- hidden?: boolean;
3546
- deletable?: boolean;
3547
- selectable?: boolean;
3548
- selected?: boolean;
3549
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3550
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3551
- zIndex?: number;
3552
- ariaLabel?: string;
3553
- interactionWidth?: number;
3554
- label?: import('react').ReactNode;
3555
- labelStyle?: import('react').CSSProperties;
3556
- labelShowBg?: boolean;
3557
- labelBgStyle?: import('react').CSSProperties;
3558
- labelBgPadding?: [number, number];
3559
- labelBgBorderRadius?: number;
3560
- style?: import('react').CSSProperties;
3561
- className?: string;
3562
- updatable?: import('@xyflow/react').EdgeUpdatable;
3563
- focusable?: boolean;
3564
- data: import('..').RelationshipData;
3565
- readonly id: string;
3566
- readonly type: "relationship";
3567
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3568
- source: string;
3569
- target: string;
3570
- sourceHandle?: string | null;
3571
- targetHandle?: string | null;
3572
- animated?: boolean;
3573
- hidden?: boolean;
3574
- deletable?: boolean;
3575
- selectable?: boolean;
3576
- selected?: boolean;
3577
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3578
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3579
- zIndex?: number;
3580
- ariaLabel?: string;
3581
- interactionWidth?: number;
3582
- label?: import('react').ReactNode;
3583
- labelStyle?: import('react').CSSProperties;
3584
- labelShowBg?: boolean;
3585
- labelBgStyle?: import('react').CSSProperties;
3586
- labelBgPadding?: [number, number];
3587
- labelBgBorderRadius?: number;
3588
- style?: import('react').CSSProperties;
3589
- className?: string;
3590
- updatable?: import('@xyflow/react').EdgeUpdatable;
3591
- focusable?: boolean;
3592
- data: import('..').RelationshipData;
3593
- readonly id: string;
3594
- readonly type: "relationship";
3595
- }>) => void) => () => void;
3596
- }) => void;
3597
- nextDynamicStep: (increment?: number | undefined) => void;
423
+ cancelSaveManualLayout: () => void;
424
+ triggerSaveManualLayout: () => void;
425
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
426
+ fitDiagram: (duration?: number) => void;
427
+ nextDynamicStep: (increment?: number) => void;
3598
428
  stopDynamicView: () => void;
3599
429
  }) => {
430
+ readonly storeDevId: string;
3600
431
  view: import('@likec4/core').DiagramView;
3601
432
  readonly: boolean;
3602
433
  showElementLinks: boolean;
@@ -3607,9 +438,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3607
438
  nodesDraggable: boolean;
3608
439
  nodesSelectable: boolean;
3609
440
  experimentalEdgeEditing: boolean;
3610
- viewSyncState: "synced" | "changed";
441
+ getContainer: () => HTMLDivElement | null;
3611
442
  viewSyncDebounceTimeout: number | null;
3612
443
  xyflow: import('..').XYFlowInstance;
444
+ xystore: import('../xyflow/hooks').XYStoreApi;
3613
445
  initialized: boolean;
3614
446
  xyflowSynced: boolean;
3615
447
  activeDynamicViewStep: number | null;
@@ -3620,13 +452,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3620
452
  hoveredEdgeId: string | null;
3621
453
  dimmed: ReadonlySet<string>;
3622
454
  previousViews: import('@likec4/core').DiagramView[];
3623
- lastOnNavigate: {
455
+ lastOnNavigate: null | {
3624
456
  fromView: import('@likec4/core').ViewID;
3625
457
  toView: import('@likec4/core').ViewID;
3626
458
  element: import('@likec4/core').DiagramNode;
3627
459
  elementScreenPosition: import('@xyflow/system').XYPosition;
3628
460
  positionCorrected: boolean;
3629
- } | null;
461
+ };
3630
462
  viewportChanged: boolean;
3631
463
  onChange: import('..').OnChange | null | undefined;
3632
464
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -3647,468 +479,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3647
479
  resetLastClicked: () => void;
3648
480
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3649
481
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3650
- triggerSaveManualLayout: (xystore: {
3651
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3652
- source: string;
3653
- target: string;
3654
- sourceHandle?: string | null;
3655
- targetHandle?: string | null;
3656
- animated?: boolean;
3657
- hidden?: boolean;
3658
- deletable?: boolean;
3659
- selectable?: boolean;
3660
- selected?: boolean;
3661
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3662
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3663
- zIndex?: number;
3664
- ariaLabel?: string;
3665
- interactionWidth?: number;
3666
- label?: import('react').ReactNode;
3667
- labelStyle?: import('react').CSSProperties;
3668
- labelShowBg?: boolean;
3669
- labelBgStyle?: import('react').CSSProperties;
3670
- labelBgPadding?: [number, number];
3671
- labelBgBorderRadius?: number;
3672
- style?: import('react').CSSProperties;
3673
- className?: string;
3674
- updatable?: import('@xyflow/react').EdgeUpdatable;
3675
- focusable?: boolean;
3676
- data: import('..').RelationshipData;
3677
- readonly id: string;
3678
- readonly type: "relationship";
3679
- }>;
3680
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3681
- source: string;
3682
- target: string;
3683
- sourceHandle?: string | null;
3684
- targetHandle?: string | null;
3685
- animated?: boolean;
3686
- hidden?: boolean;
3687
- deletable?: boolean;
3688
- selectable?: boolean;
3689
- selected?: boolean;
3690
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3691
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3692
- zIndex?: number;
3693
- ariaLabel?: string;
3694
- interactionWidth?: number;
3695
- label?: import('react').ReactNode;
3696
- labelStyle?: import('react').CSSProperties;
3697
- labelShowBg?: boolean;
3698
- labelBgStyle?: import('react').CSSProperties;
3699
- labelBgPadding?: [number, number];
3700
- labelBgBorderRadius?: number;
3701
- style?: import('react').CSSProperties;
3702
- className?: string;
3703
- updatable?: import('@xyflow/react').EdgeUpdatable;
3704
- focusable?: boolean;
3705
- data: import('..').RelationshipData;
3706
- readonly id: string;
3707
- readonly type: "relationship";
3708
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3709
- source: string;
3710
- target: string;
3711
- sourceHandle?: string | null;
3712
- targetHandle?: string | null;
3713
- animated?: boolean;
3714
- hidden?: boolean;
3715
- deletable?: boolean;
3716
- selectable?: boolean;
3717
- selected?: boolean;
3718
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3719
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3720
- zIndex?: number;
3721
- ariaLabel?: string;
3722
- interactionWidth?: number;
3723
- label?: import('react').ReactNode;
3724
- labelStyle?: import('react').CSSProperties;
3725
- labelShowBg?: boolean;
3726
- labelBgStyle?: import('react').CSSProperties;
3727
- labelBgPadding?: [number, number];
3728
- labelBgBorderRadius?: number;
3729
- style?: import('react').CSSProperties;
3730
- className?: string;
3731
- updatable?: import('@xyflow/react').EdgeUpdatable;
3732
- focusable?: boolean;
3733
- data: import('..').RelationshipData;
3734
- readonly id: string;
3735
- readonly type: "relationship";
3736
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3737
- source: string;
3738
- target: string;
3739
- sourceHandle?: string | null;
3740
- targetHandle?: string | null;
3741
- animated?: boolean;
3742
- hidden?: boolean;
3743
- deletable?: boolean;
3744
- selectable?: boolean;
3745
- selected?: boolean;
3746
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3747
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3748
- zIndex?: number;
3749
- ariaLabel?: string;
3750
- interactionWidth?: number;
3751
- label?: import('react').ReactNode;
3752
- labelStyle?: import('react').CSSProperties;
3753
- labelShowBg?: boolean;
3754
- labelBgStyle?: import('react').CSSProperties;
3755
- labelBgPadding?: [number, number];
3756
- labelBgBorderRadius?: number;
3757
- style?: import('react').CSSProperties;
3758
- className?: string;
3759
- updatable?: import('@xyflow/react').EdgeUpdatable;
3760
- focusable?: boolean;
3761
- data: import('..').RelationshipData;
3762
- readonly id: string;
3763
- readonly type: "relationship";
3764
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3765
- source: string;
3766
- target: string;
3767
- sourceHandle?: string | null;
3768
- targetHandle?: string | null;
3769
- animated?: boolean;
3770
- hidden?: boolean;
3771
- deletable?: boolean;
3772
- selectable?: boolean;
3773
- selected?: boolean;
3774
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3775
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3776
- zIndex?: number;
3777
- ariaLabel?: string;
3778
- interactionWidth?: number;
3779
- label?: import('react').ReactNode;
3780
- labelStyle?: import('react').CSSProperties;
3781
- labelShowBg?: boolean;
3782
- labelBgStyle?: import('react').CSSProperties;
3783
- labelBgPadding?: [number, number];
3784
- labelBgBorderRadius?: number;
3785
- style?: import('react').CSSProperties;
3786
- className?: string;
3787
- updatable?: import('@xyflow/react').EdgeUpdatable;
3788
- focusable?: boolean;
3789
- data: import('..').RelationshipData;
3790
- readonly id: string;
3791
- readonly type: "relationship";
3792
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3793
- source: string;
3794
- target: string;
3795
- sourceHandle?: string | null;
3796
- targetHandle?: string | null;
3797
- animated?: boolean;
3798
- hidden?: boolean;
3799
- deletable?: boolean;
3800
- selectable?: boolean;
3801
- selected?: boolean;
3802
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3803
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3804
- zIndex?: number;
3805
- ariaLabel?: string;
3806
- interactionWidth?: number;
3807
- label?: import('react').ReactNode;
3808
- labelStyle?: import('react').CSSProperties;
3809
- labelShowBg?: boolean;
3810
- labelBgStyle?: import('react').CSSProperties;
3811
- labelBgPadding?: [number, number];
3812
- labelBgBorderRadius?: number;
3813
- style?: import('react').CSSProperties;
3814
- className?: string;
3815
- updatable?: import('@xyflow/react').EdgeUpdatable;
3816
- focusable?: boolean;
3817
- data: import('..').RelationshipData;
3818
- readonly id: string;
3819
- readonly type: "relationship";
3820
- }>>), replace?: boolean | undefined) => void;
3821
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3822
- source: string;
3823
- target: string;
3824
- sourceHandle?: string | null;
3825
- targetHandle?: string | null;
3826
- animated?: boolean;
3827
- hidden?: boolean;
3828
- deletable?: boolean;
3829
- selectable?: boolean;
3830
- selected?: boolean;
3831
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3832
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3833
- zIndex?: number;
3834
- ariaLabel?: string;
3835
- interactionWidth?: number;
3836
- label?: import('react').ReactNode;
3837
- labelStyle?: import('react').CSSProperties;
3838
- labelShowBg?: boolean;
3839
- labelBgStyle?: import('react').CSSProperties;
3840
- labelBgPadding?: [number, number];
3841
- labelBgBorderRadius?: number;
3842
- style?: import('react').CSSProperties;
3843
- className?: string;
3844
- updatable?: import('@xyflow/react').EdgeUpdatable;
3845
- focusable?: boolean;
3846
- data: import('..').RelationshipData;
3847
- readonly id: string;
3848
- readonly type: "relationship";
3849
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3850
- source: string;
3851
- target: string;
3852
- sourceHandle?: string | null;
3853
- targetHandle?: string | null;
3854
- animated?: boolean;
3855
- hidden?: boolean;
3856
- deletable?: boolean;
3857
- selectable?: boolean;
3858
- selected?: boolean;
3859
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3860
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3861
- zIndex?: number;
3862
- ariaLabel?: string;
3863
- interactionWidth?: number;
3864
- label?: import('react').ReactNode;
3865
- labelStyle?: import('react').CSSProperties;
3866
- labelShowBg?: boolean;
3867
- labelBgStyle?: import('react').CSSProperties;
3868
- labelBgPadding?: [number, number];
3869
- labelBgBorderRadius?: number;
3870
- style?: import('react').CSSProperties;
3871
- className?: string;
3872
- updatable?: import('@xyflow/react').EdgeUpdatable;
3873
- focusable?: boolean;
3874
- data: import('..').RelationshipData;
3875
- readonly id: string;
3876
- readonly type: "relationship";
3877
- }>) => void) => () => void;
3878
- }) => void;
3879
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3880
- fitDiagram: (xyStore: {
3881
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3882
- source: string;
3883
- target: string;
3884
- sourceHandle?: string | null;
3885
- targetHandle?: string | null;
3886
- animated?: boolean;
3887
- hidden?: boolean;
3888
- deletable?: boolean;
3889
- selectable?: boolean;
3890
- selected?: boolean;
3891
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3892
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3893
- zIndex?: number;
3894
- ariaLabel?: string;
3895
- interactionWidth?: number;
3896
- label?: import('react').ReactNode;
3897
- labelStyle?: import('react').CSSProperties;
3898
- labelShowBg?: boolean;
3899
- labelBgStyle?: import('react').CSSProperties;
3900
- labelBgPadding?: [number, number];
3901
- labelBgBorderRadius?: number;
3902
- style?: import('react').CSSProperties;
3903
- className?: string;
3904
- updatable?: import('@xyflow/react').EdgeUpdatable;
3905
- focusable?: boolean;
3906
- data: import('..').RelationshipData;
3907
- readonly id: string;
3908
- readonly type: "relationship";
3909
- }>;
3910
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3911
- source: string;
3912
- target: string;
3913
- sourceHandle?: string | null;
3914
- targetHandle?: string | null;
3915
- animated?: boolean;
3916
- hidden?: boolean;
3917
- deletable?: boolean;
3918
- selectable?: boolean;
3919
- selected?: boolean;
3920
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3921
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3922
- zIndex?: number;
3923
- ariaLabel?: string;
3924
- interactionWidth?: number;
3925
- label?: import('react').ReactNode;
3926
- labelStyle?: import('react').CSSProperties;
3927
- labelShowBg?: boolean;
3928
- labelBgStyle?: import('react').CSSProperties;
3929
- labelBgPadding?: [number, number];
3930
- labelBgBorderRadius?: number;
3931
- style?: import('react').CSSProperties;
3932
- className?: string;
3933
- updatable?: import('@xyflow/react').EdgeUpdatable;
3934
- focusable?: boolean;
3935
- data: import('..').RelationshipData;
3936
- readonly id: string;
3937
- readonly type: "relationship";
3938
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3939
- source: string;
3940
- target: string;
3941
- sourceHandle?: string | null;
3942
- targetHandle?: string | null;
3943
- animated?: boolean;
3944
- hidden?: boolean;
3945
- deletable?: boolean;
3946
- selectable?: boolean;
3947
- selected?: boolean;
3948
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3949
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3950
- zIndex?: number;
3951
- ariaLabel?: string;
3952
- interactionWidth?: number;
3953
- label?: import('react').ReactNode;
3954
- labelStyle?: import('react').CSSProperties;
3955
- labelShowBg?: boolean;
3956
- labelBgStyle?: import('react').CSSProperties;
3957
- labelBgPadding?: [number, number];
3958
- labelBgBorderRadius?: number;
3959
- style?: import('react').CSSProperties;
3960
- className?: string;
3961
- updatable?: import('@xyflow/react').EdgeUpdatable;
3962
- focusable?: boolean;
3963
- data: import('..').RelationshipData;
3964
- readonly id: string;
3965
- readonly type: "relationship";
3966
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3967
- source: string;
3968
- target: string;
3969
- sourceHandle?: string | null;
3970
- targetHandle?: string | null;
3971
- animated?: boolean;
3972
- hidden?: boolean;
3973
- deletable?: boolean;
3974
- selectable?: boolean;
3975
- selected?: boolean;
3976
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3977
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3978
- zIndex?: number;
3979
- ariaLabel?: string;
3980
- interactionWidth?: number;
3981
- label?: import('react').ReactNode;
3982
- labelStyle?: import('react').CSSProperties;
3983
- labelShowBg?: boolean;
3984
- labelBgStyle?: import('react').CSSProperties;
3985
- labelBgPadding?: [number, number];
3986
- labelBgBorderRadius?: number;
3987
- style?: import('react').CSSProperties;
3988
- className?: string;
3989
- updatable?: import('@xyflow/react').EdgeUpdatable;
3990
- focusable?: boolean;
3991
- data: import('..').RelationshipData;
3992
- readonly id: string;
3993
- readonly type: "relationship";
3994
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3995
- source: string;
3996
- target: string;
3997
- sourceHandle?: string | null;
3998
- targetHandle?: string | null;
3999
- animated?: boolean;
4000
- hidden?: boolean;
4001
- deletable?: boolean;
4002
- selectable?: boolean;
4003
- selected?: boolean;
4004
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4005
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4006
- zIndex?: number;
4007
- ariaLabel?: string;
4008
- interactionWidth?: number;
4009
- label?: import('react').ReactNode;
4010
- labelStyle?: import('react').CSSProperties;
4011
- labelShowBg?: boolean;
4012
- labelBgStyle?: import('react').CSSProperties;
4013
- labelBgPadding?: [number, number];
4014
- labelBgBorderRadius?: number;
4015
- style?: import('react').CSSProperties;
4016
- className?: string;
4017
- updatable?: import('@xyflow/react').EdgeUpdatable;
4018
- focusable?: boolean;
4019
- data: import('..').RelationshipData;
4020
- readonly id: string;
4021
- readonly type: "relationship";
4022
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4023
- source: string;
4024
- target: string;
4025
- sourceHandle?: string | null;
4026
- targetHandle?: string | null;
4027
- animated?: boolean;
4028
- hidden?: boolean;
4029
- deletable?: boolean;
4030
- selectable?: boolean;
4031
- selected?: boolean;
4032
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4033
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4034
- zIndex?: number;
4035
- ariaLabel?: string;
4036
- interactionWidth?: number;
4037
- label?: import('react').ReactNode;
4038
- labelStyle?: import('react').CSSProperties;
4039
- labelShowBg?: boolean;
4040
- labelBgStyle?: import('react').CSSProperties;
4041
- labelBgPadding?: [number, number];
4042
- labelBgBorderRadius?: number;
4043
- style?: import('react').CSSProperties;
4044
- className?: string;
4045
- updatable?: import('@xyflow/react').EdgeUpdatable;
4046
- focusable?: boolean;
4047
- data: import('..').RelationshipData;
4048
- readonly id: string;
4049
- readonly type: "relationship";
4050
- }>>), replace?: boolean | undefined) => void;
4051
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4052
- source: string;
4053
- target: string;
4054
- sourceHandle?: string | null;
4055
- targetHandle?: string | null;
4056
- animated?: boolean;
4057
- hidden?: boolean;
4058
- deletable?: boolean;
4059
- selectable?: boolean;
4060
- selected?: boolean;
4061
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4062
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4063
- zIndex?: number;
4064
- ariaLabel?: string;
4065
- interactionWidth?: number;
4066
- label?: import('react').ReactNode;
4067
- labelStyle?: import('react').CSSProperties;
4068
- labelShowBg?: boolean;
4069
- labelBgStyle?: import('react').CSSProperties;
4070
- labelBgPadding?: [number, number];
4071
- labelBgBorderRadius?: number;
4072
- style?: import('react').CSSProperties;
4073
- className?: string;
4074
- updatable?: import('@xyflow/react').EdgeUpdatable;
4075
- focusable?: boolean;
4076
- data: import('..').RelationshipData;
4077
- readonly id: string;
4078
- readonly type: "relationship";
4079
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4080
- source: string;
4081
- target: string;
4082
- sourceHandle?: string | null;
4083
- targetHandle?: string | null;
4084
- animated?: boolean;
4085
- hidden?: boolean;
4086
- deletable?: boolean;
4087
- selectable?: boolean;
4088
- selected?: boolean;
4089
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4090
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4091
- zIndex?: number;
4092
- ariaLabel?: string;
4093
- interactionWidth?: number;
4094
- label?: import('react').ReactNode;
4095
- labelStyle?: import('react').CSSProperties;
4096
- labelShowBg?: boolean;
4097
- labelBgStyle?: import('react').CSSProperties;
4098
- labelBgPadding?: [number, number];
4099
- labelBgBorderRadius?: number;
4100
- style?: import('react').CSSProperties;
4101
- className?: string;
4102
- updatable?: import('@xyflow/react').EdgeUpdatable;
4103
- focusable?: boolean;
4104
- data: import('..').RelationshipData;
4105
- readonly id: string;
4106
- readonly type: "relationship";
4107
- }>) => void) => () => void;
4108
- }) => void;
4109
- nextDynamicStep: (increment?: number | undefined) => void;
482
+ cancelSaveManualLayout: () => void;
483
+ triggerSaveManualLayout: () => void;
484
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
485
+ fitDiagram: (duration?: number) => void;
486
+ nextDynamicStep: (increment?: number) => void;
4110
487
  stopDynamicView: () => void;
4111
488
  } | Partial<{
489
+ readonly storeDevId: string;
4112
490
  view: import('@likec4/core').DiagramView;
4113
491
  readonly: boolean;
4114
492
  showElementLinks: boolean;
@@ -4119,9 +497,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
4119
497
  nodesDraggable: boolean;
4120
498
  nodesSelectable: boolean;
4121
499
  experimentalEdgeEditing: boolean;
4122
- viewSyncState: "synced" | "changed";
500
+ getContainer: () => HTMLDivElement | null;
4123
501
  viewSyncDebounceTimeout: number | null;
4124
502
  xyflow: import('..').XYFlowInstance;
503
+ xystore: import('../xyflow/hooks').XYStoreApi;
4125
504
  initialized: boolean;
4126
505
  xyflowSynced: boolean;
4127
506
  activeDynamicViewStep: number | null;
@@ -4132,13 +511,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
4132
511
  hoveredEdgeId: string | null;
4133
512
  dimmed: ReadonlySet<string>;
4134
513
  previousViews: import('@likec4/core').DiagramView[];
4135
- lastOnNavigate: {
514
+ lastOnNavigate: null | {
4136
515
  fromView: import('@likec4/core').ViewID;
4137
516
  toView: import('@likec4/core').ViewID;
4138
517
  element: import('@likec4/core').DiagramNode;
4139
518
  elementScreenPosition: import('@xyflow/system').XYPosition;
4140
519
  positionCorrected: boolean;
4141
- } | null;
520
+ };
4142
521
  viewportChanged: boolean;
4143
522
  onChange: import('..').OnChange | null | undefined;
4144
523
  onNavigateTo: import('..').OnNavigateTo | null | undefined;
@@ -4159,467 +538,16 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
4159
538
  resetLastClicked: () => void;
4160
539
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
4161
540
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
4162
- triggerSaveManualLayout: (xystore: {
4163
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4164
- source: string;
4165
- target: string;
4166
- sourceHandle?: string | null;
4167
- targetHandle?: string | null;
4168
- animated?: boolean;
4169
- hidden?: boolean;
4170
- deletable?: boolean;
4171
- selectable?: boolean;
4172
- selected?: boolean;
4173
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4174
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4175
- zIndex?: number;
4176
- ariaLabel?: string;
4177
- interactionWidth?: number;
4178
- label?: import('react').ReactNode;
4179
- labelStyle?: import('react').CSSProperties;
4180
- labelShowBg?: boolean;
4181
- labelBgStyle?: import('react').CSSProperties;
4182
- labelBgPadding?: [number, number];
4183
- labelBgBorderRadius?: number;
4184
- style?: import('react').CSSProperties;
4185
- className?: string;
4186
- updatable?: import('@xyflow/react').EdgeUpdatable;
4187
- focusable?: boolean;
4188
- data: import('..').RelationshipData;
4189
- readonly id: string;
4190
- readonly type: "relationship";
4191
- }>;
4192
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4193
- source: string;
4194
- target: string;
4195
- sourceHandle?: string | null;
4196
- targetHandle?: string | null;
4197
- animated?: boolean;
4198
- hidden?: boolean;
4199
- deletable?: boolean;
4200
- selectable?: boolean;
4201
- selected?: boolean;
4202
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4203
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4204
- zIndex?: number;
4205
- ariaLabel?: string;
4206
- interactionWidth?: number;
4207
- label?: import('react').ReactNode;
4208
- labelStyle?: import('react').CSSProperties;
4209
- labelShowBg?: boolean;
4210
- labelBgStyle?: import('react').CSSProperties;
4211
- labelBgPadding?: [number, number];
4212
- labelBgBorderRadius?: number;
4213
- style?: import('react').CSSProperties;
4214
- className?: string;
4215
- updatable?: import('@xyflow/react').EdgeUpdatable;
4216
- focusable?: boolean;
4217
- data: import('..').RelationshipData;
4218
- readonly id: string;
4219
- readonly type: "relationship";
4220
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4221
- source: string;
4222
- target: string;
4223
- sourceHandle?: string | null;
4224
- targetHandle?: string | null;
4225
- animated?: boolean;
4226
- hidden?: boolean;
4227
- deletable?: boolean;
4228
- selectable?: boolean;
4229
- selected?: boolean;
4230
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4231
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4232
- zIndex?: number;
4233
- ariaLabel?: string;
4234
- interactionWidth?: number;
4235
- label?: import('react').ReactNode;
4236
- labelStyle?: import('react').CSSProperties;
4237
- labelShowBg?: boolean;
4238
- labelBgStyle?: import('react').CSSProperties;
4239
- labelBgPadding?: [number, number];
4240
- labelBgBorderRadius?: number;
4241
- style?: import('react').CSSProperties;
4242
- className?: string;
4243
- updatable?: import('@xyflow/react').EdgeUpdatable;
4244
- focusable?: boolean;
4245
- data: import('..').RelationshipData;
4246
- readonly id: string;
4247
- readonly type: "relationship";
4248
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4249
- source: string;
4250
- target: string;
4251
- sourceHandle?: string | null;
4252
- targetHandle?: string | null;
4253
- animated?: boolean;
4254
- hidden?: boolean;
4255
- deletable?: boolean;
4256
- selectable?: boolean;
4257
- selected?: boolean;
4258
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4259
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4260
- zIndex?: number;
4261
- ariaLabel?: string;
4262
- interactionWidth?: number;
4263
- label?: import('react').ReactNode;
4264
- labelStyle?: import('react').CSSProperties;
4265
- labelShowBg?: boolean;
4266
- labelBgStyle?: import('react').CSSProperties;
4267
- labelBgPadding?: [number, number];
4268
- labelBgBorderRadius?: number;
4269
- style?: import('react').CSSProperties;
4270
- className?: string;
4271
- updatable?: import('@xyflow/react').EdgeUpdatable;
4272
- focusable?: boolean;
4273
- data: import('..').RelationshipData;
4274
- readonly id: string;
4275
- readonly type: "relationship";
4276
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4277
- source: string;
4278
- target: string;
4279
- sourceHandle?: string | null;
4280
- targetHandle?: string | null;
4281
- animated?: boolean;
4282
- hidden?: boolean;
4283
- deletable?: boolean;
4284
- selectable?: boolean;
4285
- selected?: boolean;
4286
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4287
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4288
- zIndex?: number;
4289
- ariaLabel?: string;
4290
- interactionWidth?: number;
4291
- label?: import('react').ReactNode;
4292
- labelStyle?: import('react').CSSProperties;
4293
- labelShowBg?: boolean;
4294
- labelBgStyle?: import('react').CSSProperties;
4295
- labelBgPadding?: [number, number];
4296
- labelBgBorderRadius?: number;
4297
- style?: import('react').CSSProperties;
4298
- className?: string;
4299
- updatable?: import('@xyflow/react').EdgeUpdatable;
4300
- focusable?: boolean;
4301
- data: import('..').RelationshipData;
4302
- readonly id: string;
4303
- readonly type: "relationship";
4304
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4305
- source: string;
4306
- target: string;
4307
- sourceHandle?: string | null;
4308
- targetHandle?: string | null;
4309
- animated?: boolean;
4310
- hidden?: boolean;
4311
- deletable?: boolean;
4312
- selectable?: boolean;
4313
- selected?: boolean;
4314
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4315
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4316
- zIndex?: number;
4317
- ariaLabel?: string;
4318
- interactionWidth?: number;
4319
- label?: import('react').ReactNode;
4320
- labelStyle?: import('react').CSSProperties;
4321
- labelShowBg?: boolean;
4322
- labelBgStyle?: import('react').CSSProperties;
4323
- labelBgPadding?: [number, number];
4324
- labelBgBorderRadius?: number;
4325
- style?: import('react').CSSProperties;
4326
- className?: string;
4327
- updatable?: import('@xyflow/react').EdgeUpdatable;
4328
- focusable?: boolean;
4329
- data: import('..').RelationshipData;
4330
- readonly id: string;
4331
- readonly type: "relationship";
4332
- }>>), replace?: boolean | undefined) => void;
4333
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4334
- source: string;
4335
- target: string;
4336
- sourceHandle?: string | null;
4337
- targetHandle?: string | null;
4338
- animated?: boolean;
4339
- hidden?: boolean;
4340
- deletable?: boolean;
4341
- selectable?: boolean;
4342
- selected?: boolean;
4343
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4344
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4345
- zIndex?: number;
4346
- ariaLabel?: string;
4347
- interactionWidth?: number;
4348
- label?: import('react').ReactNode;
4349
- labelStyle?: import('react').CSSProperties;
4350
- labelShowBg?: boolean;
4351
- labelBgStyle?: import('react').CSSProperties;
4352
- labelBgPadding?: [number, number];
4353
- labelBgBorderRadius?: number;
4354
- style?: import('react').CSSProperties;
4355
- className?: string;
4356
- updatable?: import('@xyflow/react').EdgeUpdatable;
4357
- focusable?: boolean;
4358
- data: import('..').RelationshipData;
4359
- readonly id: string;
4360
- readonly type: "relationship";
4361
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4362
- source: string;
4363
- target: string;
4364
- sourceHandle?: string | null;
4365
- targetHandle?: string | null;
4366
- animated?: boolean;
4367
- hidden?: boolean;
4368
- deletable?: boolean;
4369
- selectable?: boolean;
4370
- selected?: boolean;
4371
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4372
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4373
- zIndex?: number;
4374
- ariaLabel?: string;
4375
- interactionWidth?: number;
4376
- label?: import('react').ReactNode;
4377
- labelStyle?: import('react').CSSProperties;
4378
- labelShowBg?: boolean;
4379
- labelBgStyle?: import('react').CSSProperties;
4380
- labelBgPadding?: [number, number];
4381
- labelBgBorderRadius?: number;
4382
- style?: import('react').CSSProperties;
4383
- className?: string;
4384
- updatable?: import('@xyflow/react').EdgeUpdatable;
4385
- focusable?: boolean;
4386
- data: import('..').RelationshipData;
4387
- readonly id: string;
4388
- readonly type: "relationship";
4389
- }>) => void) => () => void;
4390
- }) => void;
4391
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
4392
- fitDiagram: (xyStore: {
4393
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4394
- source: string;
4395
- target: string;
4396
- sourceHandle?: string | null;
4397
- targetHandle?: string | null;
4398
- animated?: boolean;
4399
- hidden?: boolean;
4400
- deletable?: boolean;
4401
- selectable?: boolean;
4402
- selected?: boolean;
4403
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4404
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4405
- zIndex?: number;
4406
- ariaLabel?: string;
4407
- interactionWidth?: number;
4408
- label?: import('react').ReactNode;
4409
- labelStyle?: import('react').CSSProperties;
4410
- labelShowBg?: boolean;
4411
- labelBgStyle?: import('react').CSSProperties;
4412
- labelBgPadding?: [number, number];
4413
- labelBgBorderRadius?: number;
4414
- style?: import('react').CSSProperties;
4415
- className?: string;
4416
- updatable?: import('@xyflow/react').EdgeUpdatable;
4417
- focusable?: boolean;
4418
- data: import('..').RelationshipData;
4419
- readonly id: string;
4420
- readonly type: "relationship";
4421
- }>;
4422
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4423
- source: string;
4424
- target: string;
4425
- sourceHandle?: string | null;
4426
- targetHandle?: string | null;
4427
- animated?: boolean;
4428
- hidden?: boolean;
4429
- deletable?: boolean;
4430
- selectable?: boolean;
4431
- selected?: boolean;
4432
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4433
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4434
- zIndex?: number;
4435
- ariaLabel?: string;
4436
- interactionWidth?: number;
4437
- label?: import('react').ReactNode;
4438
- labelStyle?: import('react').CSSProperties;
4439
- labelShowBg?: boolean;
4440
- labelBgStyle?: import('react').CSSProperties;
4441
- labelBgPadding?: [number, number];
4442
- labelBgBorderRadius?: number;
4443
- style?: import('react').CSSProperties;
4444
- className?: string;
4445
- updatable?: import('@xyflow/react').EdgeUpdatable;
4446
- focusable?: boolean;
4447
- data: import('..').RelationshipData;
4448
- readonly id: string;
4449
- readonly type: "relationship";
4450
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4451
- source: string;
4452
- target: string;
4453
- sourceHandle?: string | null;
4454
- targetHandle?: string | null;
4455
- animated?: boolean;
4456
- hidden?: boolean;
4457
- deletable?: boolean;
4458
- selectable?: boolean;
4459
- selected?: boolean;
4460
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4461
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4462
- zIndex?: number;
4463
- ariaLabel?: string;
4464
- interactionWidth?: number;
4465
- label?: import('react').ReactNode;
4466
- labelStyle?: import('react').CSSProperties;
4467
- labelShowBg?: boolean;
4468
- labelBgStyle?: import('react').CSSProperties;
4469
- labelBgPadding?: [number, number];
4470
- labelBgBorderRadius?: number;
4471
- style?: import('react').CSSProperties;
4472
- className?: string;
4473
- updatable?: import('@xyflow/react').EdgeUpdatable;
4474
- focusable?: boolean;
4475
- data: import('..').RelationshipData;
4476
- readonly id: string;
4477
- readonly type: "relationship";
4478
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4479
- source: string;
4480
- target: string;
4481
- sourceHandle?: string | null;
4482
- targetHandle?: string | null;
4483
- animated?: boolean;
4484
- hidden?: boolean;
4485
- deletable?: boolean;
4486
- selectable?: boolean;
4487
- selected?: boolean;
4488
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4489
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4490
- zIndex?: number;
4491
- ariaLabel?: string;
4492
- interactionWidth?: number;
4493
- label?: import('react').ReactNode;
4494
- labelStyle?: import('react').CSSProperties;
4495
- labelShowBg?: boolean;
4496
- labelBgStyle?: import('react').CSSProperties;
4497
- labelBgPadding?: [number, number];
4498
- labelBgBorderRadius?: number;
4499
- style?: import('react').CSSProperties;
4500
- className?: string;
4501
- updatable?: import('@xyflow/react').EdgeUpdatable;
4502
- focusable?: boolean;
4503
- data: import('..').RelationshipData;
4504
- readonly id: string;
4505
- readonly type: "relationship";
4506
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4507
- source: string;
4508
- target: string;
4509
- sourceHandle?: string | null;
4510
- targetHandle?: string | null;
4511
- animated?: boolean;
4512
- hidden?: boolean;
4513
- deletable?: boolean;
4514
- selectable?: boolean;
4515
- selected?: boolean;
4516
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4517
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4518
- zIndex?: number;
4519
- ariaLabel?: string;
4520
- interactionWidth?: number;
4521
- label?: import('react').ReactNode;
4522
- labelStyle?: import('react').CSSProperties;
4523
- labelShowBg?: boolean;
4524
- labelBgStyle?: import('react').CSSProperties;
4525
- labelBgPadding?: [number, number];
4526
- labelBgBorderRadius?: number;
4527
- style?: import('react').CSSProperties;
4528
- className?: string;
4529
- updatable?: import('@xyflow/react').EdgeUpdatable;
4530
- focusable?: boolean;
4531
- data: import('..').RelationshipData;
4532
- readonly id: string;
4533
- readonly type: "relationship";
4534
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4535
- source: string;
4536
- target: string;
4537
- sourceHandle?: string | null;
4538
- targetHandle?: string | null;
4539
- animated?: boolean;
4540
- hidden?: boolean;
4541
- deletable?: boolean;
4542
- selectable?: boolean;
4543
- selected?: boolean;
4544
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4545
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4546
- zIndex?: number;
4547
- ariaLabel?: string;
4548
- interactionWidth?: number;
4549
- label?: import('react').ReactNode;
4550
- labelStyle?: import('react').CSSProperties;
4551
- labelShowBg?: boolean;
4552
- labelBgStyle?: import('react').CSSProperties;
4553
- labelBgPadding?: [number, number];
4554
- labelBgBorderRadius?: number;
4555
- style?: import('react').CSSProperties;
4556
- className?: string;
4557
- updatable?: import('@xyflow/react').EdgeUpdatable;
4558
- focusable?: boolean;
4559
- data: import('..').RelationshipData;
4560
- readonly id: string;
4561
- readonly type: "relationship";
4562
- }>>), replace?: boolean | undefined) => void;
4563
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4564
- source: string;
4565
- target: string;
4566
- sourceHandle?: string | null;
4567
- targetHandle?: string | null;
4568
- animated?: boolean;
4569
- hidden?: boolean;
4570
- deletable?: boolean;
4571
- selectable?: boolean;
4572
- selected?: boolean;
4573
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4574
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4575
- zIndex?: number;
4576
- ariaLabel?: string;
4577
- interactionWidth?: number;
4578
- label?: import('react').ReactNode;
4579
- labelStyle?: import('react').CSSProperties;
4580
- labelShowBg?: boolean;
4581
- labelBgStyle?: import('react').CSSProperties;
4582
- labelBgPadding?: [number, number];
4583
- labelBgBorderRadius?: number;
4584
- style?: import('react').CSSProperties;
4585
- className?: string;
4586
- updatable?: import('@xyflow/react').EdgeUpdatable;
4587
- focusable?: boolean;
4588
- data: import('..').RelationshipData;
4589
- readonly id: string;
4590
- readonly type: "relationship";
4591
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4592
- source: string;
4593
- target: string;
4594
- sourceHandle?: string | null;
4595
- targetHandle?: string | null;
4596
- animated?: boolean;
4597
- hidden?: boolean;
4598
- deletable?: boolean;
4599
- selectable?: boolean;
4600
- selected?: boolean;
4601
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4602
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4603
- zIndex?: number;
4604
- ariaLabel?: string;
4605
- interactionWidth?: number;
4606
- label?: import('react').ReactNode;
4607
- labelStyle?: import('react').CSSProperties;
4608
- labelShowBg?: boolean;
4609
- labelBgStyle?: import('react').CSSProperties;
4610
- labelBgPadding?: [number, number];
4611
- labelBgBorderRadius?: number;
4612
- style?: import('react').CSSProperties;
4613
- className?: string;
4614
- updatable?: import('@xyflow/react').EdgeUpdatable;
4615
- focusable?: boolean;
4616
- data: import('..').RelationshipData;
4617
- readonly id: string;
4618
- readonly type: "relationship";
4619
- }>) => void) => () => void;
4620
- }) => void;
4621
- nextDynamicStep: (increment?: number | undefined) => void;
541
+ cancelSaveManualLayout: () => void;
542
+ triggerSaveManualLayout: () => void;
543
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
544
+ fitDiagram: (duration?: number) => void;
545
+ nextDynamicStep: (increment?: number) => void;
4622
546
  stopDynamicView: () => void;
4623
547
  }>), replace?: boolean | undefined, action?: A | undefined): void;
4624
548
  }> | null>;
4625
- export declare function DiagramContextProvider({ children, view, ...props }: PropsWithChildren<DiagramInitialState>): import("react/jsx-runtime").JSX.Element;
549
+ export type DiagramContextProviderProps = PropsWithChildren<DiagramInitialState & {
550
+ className: string;
551
+ keepAspectRatio: boolean;
552
+ }>;
553
+ export declare function DiagramContextProvider({ children, view, className, keepAspectRatio, ...props }: DiagramContextProviderProps): import("react/jsx-runtime").JSX.Element;