@likec4/diagram 1.4.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 (83) hide show
  1. package/dist/LikeC4Diagram.css.d.ts +0 -1
  2. package/dist/LikeC4Diagram.props.d.ts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.mjs +1398 -1114
  5. package/dist/state/DiagramContext.d.ts +86 -4159
  6. package/dist/state/diagramStore.d.ts +88 -4162
  7. package/dist/state/hooks.d.ts +4 -0
  8. package/dist/state/index.d.ts +1 -2
  9. package/dist/style.css +182 -156
  10. package/dist/ui/options/EdgeOptions.d.ts +19 -0
  11. package/dist/ui/options/NodeOptions.d.ts +2 -2
  12. package/dist/xyflow/EdgeMarkers.d.ts +11 -0
  13. package/dist/xyflow/XYFlowEvents.d.ts +8 -5
  14. package/dist/xyflow/const.d.ts +3 -3
  15. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  16. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -2
  17. package/dist/xyflow/edges/edges.css.d.ts +1 -0
  18. package/dist/xyflow/edges/utils.d.ts +1 -0
  19. package/dist/xyflow/hooks/index.d.ts +3 -2
  20. package/dist/xyflow/hooks/useXYFlow.d.ts +13 -12
  21. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +1 -0
  22. package/dist/xyflow/nodes/element/ElementIcon.d.ts +1 -4
  23. package/dist/xyflow/nodes/element/element.css.d.ts +2 -1
  24. package/dist/xyflow/types.d.ts +2 -32
  25. package/package.json +19 -19
  26. package/src/LikeC4Diagram.css.ts +0 -8
  27. package/src/LikeC4Diagram.props.ts +2 -2
  28. package/src/LikeC4Diagram.tsx +14 -20
  29. package/src/globals.css.ts +10 -3
  30. package/src/index.ts +1 -1
  31. package/src/mantine.css.ts +2 -2
  32. package/src/state/DiagramContext.tsx +44 -13
  33. package/src/state/diagramStore.ts +64 -52
  34. package/src/state/hooks.ts +5 -0
  35. package/src/state/index.ts +1 -2
  36. package/src/ui/BackwardForwardPanel.css.ts +9 -9
  37. package/src/ui/BackwardForwardPanel.tsx +1 -1
  38. package/src/ui/DiagramTitlePanel.css.ts +7 -2
  39. package/src/ui/DiagramTitlePanel.tsx +5 -3
  40. package/src/ui/DynamicViewWalkthrough.tsx +6 -4
  41. package/src/ui/OptionsPanel.tsx +37 -27
  42. package/src/ui/options/EdgeOptions.tsx +157 -0
  43. package/src/ui/options/NodeOptions.tsx +37 -29
  44. package/src/xyflow/EdgeMarkers.tsx +148 -0
  45. package/src/xyflow/FitviewOnDiagramChange.tsx +8 -4
  46. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +59 -55
  47. package/src/xyflow/SyncWithDiagram.tsx +13 -20
  48. package/src/xyflow/XYFlow.tsx +2 -4
  49. package/src/xyflow/XYFlowEvents.tsx +48 -33
  50. package/src/xyflow/XYFlowInner.tsx +1 -1
  51. package/src/xyflow/const.ts +3 -3
  52. package/src/xyflow/diagram-to-xyflow.ts +17 -41
  53. package/src/xyflow/edges/RelationshipEdge.tsx +207 -118
  54. package/src/xyflow/edges/edges.css.ts +36 -22
  55. package/src/xyflow/edges/utils.ts +10 -0
  56. package/src/xyflow/hooks/index.ts +4 -2
  57. package/src/xyflow/hooks/useLayoutConstraints.ts +3 -4
  58. package/src/xyflow/hooks/useXYFlow.ts +28 -1
  59. package/src/xyflow/nodes/compound/CompoundNode.css.ts +34 -24
  60. package/src/xyflow/nodes/compound/CompoundNode.tsx +52 -53
  61. package/src/xyflow/nodes/element/ElementIcon.tsx +11 -22
  62. package/src/xyflow/nodes/element/ElementLink.tsx +11 -16
  63. package/src/xyflow/nodes/element/ElementNode.tsx +64 -108
  64. package/src/xyflow/nodes/element/element.css.ts +30 -10
  65. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +1 -1
  66. package/src/xyflow/types.ts +2 -4
  67. package/src/xyflow/utils.ts +3 -6
  68. package/dist/KeepAspectRatioContainer.d.ts +0 -9
  69. package/dist/icons/Clipboard.d.ts +0 -3
  70. package/dist/icons/Link.d.ts +0 -3
  71. package/dist/icons/ZoomIn.d.ts +0 -3
  72. package/dist/icons/index.d.ts +0 -3
  73. package/dist/mantine/theme.d.ts +0 -3
  74. package/dist/state/WhenInitialized.d.ts +0 -3
  75. package/dist/ui/Camera.d.ts +0 -3
  76. package/src/KeepAspectRatioContainer.tsx +0 -36
  77. package/src/icons/Clipboard.tsx +0 -24
  78. package/src/icons/Link.tsx +0 -23
  79. package/src/icons/ZoomIn.tsx +0 -25
  80. package/src/icons/index.ts +0 -3
  81. package/src/mantine/theme.ts +0 -20
  82. package/src/state/WhenInitialized.tsx +0 -24
  83. package/src/ui/Camera.tsx +0 -174
package/dist/state/DiagramContext.d.ts CHANGED
@@ -3,6 +3,7 @@ import { createDiagramStore, DiagramInitialState } from './diagramStore';
3
3
 
4
4
  export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
5
5
  export declare const DiagramContext: import('react').Context<import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
6
+ readonly storeDevId: string;
6
7
  view: import('@likec4/core').DiagramView;
7
8
  readonly: boolean;
8
9
  showElementLinks: boolean;
@@ -13,8 +14,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
13
14
  nodesDraggable: boolean;
14
15
  nodesSelectable: boolean;
15
16
  experimentalEdgeEditing: boolean;
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;
@@ -53,470 +56,15 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
53
56
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
54
57
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
55
58
  cancelSaveManualLayout: () => void;
56
- triggerSaveManualLayout: (xystore: {
57
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
58
- source: string;
59
- target: string;
60
- sourceHandle?: string | null;
61
- targetHandle?: string | null;
62
- animated?: boolean;
63
- hidden?: boolean;
64
- deletable?: boolean;
65
- selectable?: boolean;
66
- selected?: boolean;
67
- markerStart?: import('@xyflow/system').EdgeMarkerType;
68
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
69
- zIndex?: number;
70
- ariaLabel?: string;
71
- interactionWidth?: number;
72
- label?: import('react').ReactNode;
73
- labelStyle?: import('react').CSSProperties;
74
- labelShowBg?: boolean;
75
- labelBgStyle?: import('react').CSSProperties;
76
- labelBgPadding?: [number, number];
77
- labelBgBorderRadius?: number;
78
- style?: import('react').CSSProperties;
79
- className?: string;
80
- reconnectable?: boolean | import('@xyflow/system').HandleType;
81
- focusable?: boolean;
82
- data: import('..').RelationshipData;
83
- readonly id: string;
84
- readonly type: "relationship";
85
- }>;
86
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
87
- source: string;
88
- target: string;
89
- sourceHandle?: string | null;
90
- targetHandle?: string | null;
91
- animated?: boolean;
92
- hidden?: boolean;
93
- deletable?: boolean;
94
- selectable?: boolean;
95
- selected?: boolean;
96
- markerStart?: import('@xyflow/system').EdgeMarkerType;
97
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
98
- zIndex?: number;
99
- ariaLabel?: string;
100
- interactionWidth?: number;
101
- label?: import('react').ReactNode;
102
- labelStyle?: import('react').CSSProperties;
103
- labelShowBg?: boolean;
104
- labelBgStyle?: import('react').CSSProperties;
105
- labelBgPadding?: [number, number];
106
- labelBgBorderRadius?: number;
107
- style?: import('react').CSSProperties;
108
- className?: string;
109
- reconnectable?: boolean | import('@xyflow/system').HandleType;
110
- focusable?: boolean;
111
- data: import('..').RelationshipData;
112
- readonly id: string;
113
- readonly type: "relationship";
114
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
115
- source: string;
116
- target: string;
117
- sourceHandle?: string | null;
118
- targetHandle?: string | null;
119
- animated?: boolean;
120
- hidden?: boolean;
121
- deletable?: boolean;
122
- selectable?: boolean;
123
- selected?: boolean;
124
- markerStart?: import('@xyflow/system').EdgeMarkerType;
125
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
126
- zIndex?: number;
127
- ariaLabel?: string;
128
- interactionWidth?: number;
129
- label?: import('react').ReactNode;
130
- labelStyle?: import('react').CSSProperties;
131
- labelShowBg?: boolean;
132
- labelBgStyle?: import('react').CSSProperties;
133
- labelBgPadding?: [number, number];
134
- labelBgBorderRadius?: number;
135
- style?: import('react').CSSProperties;
136
- className?: string;
137
- reconnectable?: boolean | import('@xyflow/system').HandleType;
138
- focusable?: boolean;
139
- data: import('..').RelationshipData;
140
- readonly id: string;
141
- readonly type: "relationship";
142
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
143
- source: string;
144
- target: string;
145
- sourceHandle?: string | null;
146
- targetHandle?: string | null;
147
- animated?: boolean;
148
- hidden?: boolean;
149
- deletable?: boolean;
150
- selectable?: boolean;
151
- selected?: boolean;
152
- markerStart?: import('@xyflow/system').EdgeMarkerType;
153
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
154
- zIndex?: number;
155
- ariaLabel?: string;
156
- interactionWidth?: number;
157
- label?: import('react').ReactNode;
158
- labelStyle?: import('react').CSSProperties;
159
- labelShowBg?: boolean;
160
- labelBgStyle?: import('react').CSSProperties;
161
- labelBgPadding?: [number, number];
162
- labelBgBorderRadius?: number;
163
- style?: import('react').CSSProperties;
164
- className?: string;
165
- reconnectable?: boolean | import('@xyflow/system').HandleType;
166
- focusable?: boolean;
167
- data: import('..').RelationshipData;
168
- readonly id: string;
169
- readonly type: "relationship";
170
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
171
- source: string;
172
- target: string;
173
- sourceHandle?: string | null;
174
- targetHandle?: string | null;
175
- animated?: boolean;
176
- hidden?: boolean;
177
- deletable?: boolean;
178
- selectable?: boolean;
179
- selected?: boolean;
180
- markerStart?: import('@xyflow/system').EdgeMarkerType;
181
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
182
- zIndex?: number;
183
- ariaLabel?: string;
184
- interactionWidth?: number;
185
- label?: import('react').ReactNode;
186
- labelStyle?: import('react').CSSProperties;
187
- labelShowBg?: boolean;
188
- labelBgStyle?: import('react').CSSProperties;
189
- labelBgPadding?: [number, number];
190
- labelBgBorderRadius?: number;
191
- style?: import('react').CSSProperties;
192
- className?: string;
193
- reconnectable?: boolean | import('@xyflow/system').HandleType;
194
- focusable?: boolean;
195
- data: import('..').RelationshipData;
196
- readonly id: string;
197
- readonly type: "relationship";
198
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
199
- source: string;
200
- target: string;
201
- sourceHandle?: string | null;
202
- targetHandle?: string | null;
203
- animated?: boolean;
204
- hidden?: boolean;
205
- deletable?: boolean;
206
- selectable?: boolean;
207
- selected?: boolean;
208
- markerStart?: import('@xyflow/system').EdgeMarkerType;
209
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
210
- zIndex?: number;
211
- ariaLabel?: string;
212
- interactionWidth?: number;
213
- label?: import('react').ReactNode;
214
- labelStyle?: import('react').CSSProperties;
215
- labelShowBg?: boolean;
216
- labelBgStyle?: import('react').CSSProperties;
217
- labelBgPadding?: [number, number];
218
- labelBgBorderRadius?: number;
219
- style?: import('react').CSSProperties;
220
- className?: string;
221
- reconnectable?: boolean | import('@xyflow/system').HandleType;
222
- focusable?: boolean;
223
- data: import('..').RelationshipData;
224
- readonly id: string;
225
- readonly type: "relationship";
226
- }>>), replace?: boolean | undefined) => void;
227
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
228
- source: string;
229
- target: string;
230
- sourceHandle?: string | null;
231
- targetHandle?: string | null;
232
- animated?: boolean;
233
- hidden?: boolean;
234
- deletable?: boolean;
235
- selectable?: boolean;
236
- selected?: boolean;
237
- markerStart?: import('@xyflow/system').EdgeMarkerType;
238
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
239
- zIndex?: number;
240
- ariaLabel?: string;
241
- interactionWidth?: number;
242
- label?: import('react').ReactNode;
243
- labelStyle?: import('react').CSSProperties;
244
- labelShowBg?: boolean;
245
- labelBgStyle?: import('react').CSSProperties;
246
- labelBgPadding?: [number, number];
247
- labelBgBorderRadius?: number;
248
- style?: import('react').CSSProperties;
249
- className?: string;
250
- reconnectable?: boolean | import('@xyflow/system').HandleType;
251
- focusable?: boolean;
252
- data: import('..').RelationshipData;
253
- readonly id: string;
254
- readonly type: "relationship";
255
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
256
- source: string;
257
- target: string;
258
- sourceHandle?: string | null;
259
- targetHandle?: string | null;
260
- animated?: boolean;
261
- hidden?: boolean;
262
- deletable?: boolean;
263
- selectable?: boolean;
264
- selected?: boolean;
265
- markerStart?: import('@xyflow/system').EdgeMarkerType;
266
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
267
- zIndex?: number;
268
- ariaLabel?: string;
269
- interactionWidth?: number;
270
- label?: import('react').ReactNode;
271
- labelStyle?: import('react').CSSProperties;
272
- labelShowBg?: boolean;
273
- labelBgStyle?: import('react').CSSProperties;
274
- labelBgPadding?: [number, number];
275
- labelBgBorderRadius?: number;
276
- style?: import('react').CSSProperties;
277
- className?: string;
278
- reconnectable?: boolean | import('@xyflow/system').HandleType;
279
- focusable?: boolean;
280
- data: import('..').RelationshipData;
281
- readonly id: string;
282
- readonly type: "relationship";
283
- }>) => void) => () => void;
284
- }) => void;
285
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
286
- fitDiagram: (xyStore: {
287
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
288
- source: string;
289
- target: string;
290
- sourceHandle?: string | null;
291
- targetHandle?: string | null;
292
- animated?: boolean;
293
- hidden?: boolean;
294
- deletable?: boolean;
295
- selectable?: boolean;
296
- selected?: boolean;
297
- markerStart?: import('@xyflow/system').EdgeMarkerType;
298
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
299
- zIndex?: number;
300
- ariaLabel?: string;
301
- interactionWidth?: number;
302
- label?: import('react').ReactNode;
303
- labelStyle?: import('react').CSSProperties;
304
- labelShowBg?: boolean;
305
- labelBgStyle?: import('react').CSSProperties;
306
- labelBgPadding?: [number, number];
307
- labelBgBorderRadius?: number;
308
- style?: import('react').CSSProperties;
309
- className?: string;
310
- reconnectable?: boolean | import('@xyflow/system').HandleType;
311
- focusable?: boolean;
312
- data: import('..').RelationshipData;
313
- readonly id: string;
314
- readonly type: "relationship";
315
- }>;
316
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
317
- source: string;
318
- target: string;
319
- sourceHandle?: string | null;
320
- targetHandle?: string | null;
321
- animated?: boolean;
322
- hidden?: boolean;
323
- deletable?: boolean;
324
- selectable?: boolean;
325
- selected?: boolean;
326
- markerStart?: import('@xyflow/system').EdgeMarkerType;
327
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
328
- zIndex?: number;
329
- ariaLabel?: string;
330
- interactionWidth?: number;
331
- label?: import('react').ReactNode;
332
- labelStyle?: import('react').CSSProperties;
333
- labelShowBg?: boolean;
334
- labelBgStyle?: import('react').CSSProperties;
335
- labelBgPadding?: [number, number];
336
- labelBgBorderRadius?: number;
337
- style?: import('react').CSSProperties;
338
- className?: string;
339
- reconnectable?: boolean | import('@xyflow/system').HandleType;
340
- focusable?: boolean;
341
- data: import('..').RelationshipData;
342
- readonly id: string;
343
- readonly type: "relationship";
344
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
345
- source: string;
346
- target: string;
347
- sourceHandle?: string | null;
348
- targetHandle?: string | null;
349
- animated?: boolean;
350
- hidden?: boolean;
351
- deletable?: boolean;
352
- selectable?: boolean;
353
- selected?: boolean;
354
- markerStart?: import('@xyflow/system').EdgeMarkerType;
355
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
356
- zIndex?: number;
357
- ariaLabel?: string;
358
- interactionWidth?: number;
359
- label?: import('react').ReactNode;
360
- labelStyle?: import('react').CSSProperties;
361
- labelShowBg?: boolean;
362
- labelBgStyle?: import('react').CSSProperties;
363
- labelBgPadding?: [number, number];
364
- labelBgBorderRadius?: number;
365
- style?: import('react').CSSProperties;
366
- className?: string;
367
- reconnectable?: boolean | import('@xyflow/system').HandleType;
368
- focusable?: boolean;
369
- data: import('..').RelationshipData;
370
- readonly id: string;
371
- readonly type: "relationship";
372
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
373
- source: string;
374
- target: string;
375
- sourceHandle?: string | null;
376
- targetHandle?: string | null;
377
- animated?: boolean;
378
- hidden?: boolean;
379
- deletable?: boolean;
380
- selectable?: boolean;
381
- selected?: boolean;
382
- markerStart?: import('@xyflow/system').EdgeMarkerType;
383
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
384
- zIndex?: number;
385
- ariaLabel?: string;
386
- interactionWidth?: number;
387
- label?: import('react').ReactNode;
388
- labelStyle?: import('react').CSSProperties;
389
- labelShowBg?: boolean;
390
- labelBgStyle?: import('react').CSSProperties;
391
- labelBgPadding?: [number, number];
392
- labelBgBorderRadius?: number;
393
- style?: import('react').CSSProperties;
394
- className?: string;
395
- reconnectable?: boolean | import('@xyflow/system').HandleType;
396
- focusable?: boolean;
397
- data: import('..').RelationshipData;
398
- readonly id: string;
399
- readonly type: "relationship";
400
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
401
- source: string;
402
- target: string;
403
- sourceHandle?: string | null;
404
- targetHandle?: string | null;
405
- animated?: boolean;
406
- hidden?: boolean;
407
- deletable?: boolean;
408
- selectable?: boolean;
409
- selected?: boolean;
410
- markerStart?: import('@xyflow/system').EdgeMarkerType;
411
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
412
- zIndex?: number;
413
- ariaLabel?: string;
414
- interactionWidth?: number;
415
- label?: import('react').ReactNode;
416
- labelStyle?: import('react').CSSProperties;
417
- labelShowBg?: boolean;
418
- labelBgStyle?: import('react').CSSProperties;
419
- labelBgPadding?: [number, number];
420
- labelBgBorderRadius?: number;
421
- style?: import('react').CSSProperties;
422
- className?: string;
423
- reconnectable?: boolean | import('@xyflow/system').HandleType;
424
- focusable?: boolean;
425
- data: import('..').RelationshipData;
426
- readonly id: string;
427
- readonly type: "relationship";
428
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
429
- source: string;
430
- target: string;
431
- sourceHandle?: string | null;
432
- targetHandle?: string | null;
433
- animated?: boolean;
434
- hidden?: boolean;
435
- deletable?: boolean;
436
- selectable?: boolean;
437
- selected?: boolean;
438
- markerStart?: import('@xyflow/system').EdgeMarkerType;
439
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
440
- zIndex?: number;
441
- ariaLabel?: string;
442
- interactionWidth?: number;
443
- label?: import('react').ReactNode;
444
- labelStyle?: import('react').CSSProperties;
445
- labelShowBg?: boolean;
446
- labelBgStyle?: import('react').CSSProperties;
447
- labelBgPadding?: [number, number];
448
- labelBgBorderRadius?: number;
449
- style?: import('react').CSSProperties;
450
- className?: string;
451
- reconnectable?: boolean | import('@xyflow/system').HandleType;
452
- focusable?: boolean;
453
- data: import('..').RelationshipData;
454
- readonly id: string;
455
- readonly type: "relationship";
456
- }>>), replace?: boolean | undefined) => void;
457
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
458
- source: string;
459
- target: string;
460
- sourceHandle?: string | null;
461
- targetHandle?: string | null;
462
- animated?: boolean;
463
- hidden?: boolean;
464
- deletable?: boolean;
465
- selectable?: boolean;
466
- selected?: boolean;
467
- markerStart?: import('@xyflow/system').EdgeMarkerType;
468
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
469
- zIndex?: number;
470
- ariaLabel?: string;
471
- interactionWidth?: number;
472
- label?: import('react').ReactNode;
473
- labelStyle?: import('react').CSSProperties;
474
- labelShowBg?: boolean;
475
- labelBgStyle?: import('react').CSSProperties;
476
- labelBgPadding?: [number, number];
477
- labelBgBorderRadius?: number;
478
- style?: import('react').CSSProperties;
479
- className?: string;
480
- reconnectable?: boolean | import('@xyflow/system').HandleType;
481
- focusable?: boolean;
482
- data: import('..').RelationshipData;
483
- readonly id: string;
484
- readonly type: "relationship";
485
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
486
- source: string;
487
- target: string;
488
- sourceHandle?: string | null;
489
- targetHandle?: string | null;
490
- animated?: boolean;
491
- hidden?: boolean;
492
- deletable?: boolean;
493
- selectable?: boolean;
494
- selected?: boolean;
495
- markerStart?: import('@xyflow/system').EdgeMarkerType;
496
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
497
- zIndex?: number;
498
- ariaLabel?: string;
499
- interactionWidth?: number;
500
- label?: import('react').ReactNode;
501
- labelStyle?: import('react').CSSProperties;
502
- labelShowBg?: boolean;
503
- labelBgStyle?: import('react').CSSProperties;
504
- labelBgPadding?: [number, number];
505
- labelBgBorderRadius?: number;
506
- style?: import('react').CSSProperties;
507
- className?: string;
508
- reconnectable?: boolean | import('@xyflow/system').HandleType;
509
- focusable?: boolean;
510
- data: import('..').RelationshipData;
511
- readonly id: string;
512
- readonly type: "relationship";
513
- }>) => void) => () => void;
514
- }) => void;
515
- nextDynamicStep: (increment?: number | undefined) => void;
59
+ triggerSaveManualLayout: () => void;
60
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
61
+ fitDiagram: (duration?: number) => void;
62
+ nextDynamicStep: (increment?: number) => void;
516
63
  stopDynamicView: () => void;
517
64
  }>, "subscribe"> & {
518
65
  subscribe: {
519
66
  (listener: (selectedState: {
67
+ readonly storeDevId: string;
520
68
  view: import('@likec4/core').DiagramView;
521
69
  readonly: boolean;
522
70
  showElementLinks: boolean;
@@ -527,8 +75,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
527
75
  nodesDraggable: boolean;
528
76
  nodesSelectable: boolean;
529
77
  experimentalEdgeEditing: boolean;
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;
@@ -567,468 +117,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
567
117
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
568
118
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
569
119
  cancelSaveManualLayout: () => void;
570
- triggerSaveManualLayout: (xystore: {
571
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
572
- source: string;
573
- target: string;
574
- sourceHandle?: string | null;
575
- targetHandle?: string | null;
576
- animated?: boolean;
577
- hidden?: boolean;
578
- deletable?: boolean;
579
- selectable?: boolean;
580
- selected?: boolean;
581
- markerStart?: import('@xyflow/system').EdgeMarkerType;
582
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
583
- zIndex?: number;
584
- ariaLabel?: string;
585
- interactionWidth?: number;
586
- label?: import('react').ReactNode;
587
- labelStyle?: import('react').CSSProperties;
588
- labelShowBg?: boolean;
589
- labelBgStyle?: import('react').CSSProperties;
590
- labelBgPadding?: [number, number];
591
- labelBgBorderRadius?: number;
592
- style?: import('react').CSSProperties;
593
- className?: string;
594
- reconnectable?: boolean | import('@xyflow/system').HandleType;
595
- focusable?: boolean;
596
- data: import('..').RelationshipData;
597
- readonly id: string;
598
- readonly type: "relationship";
599
- }>;
600
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
601
- source: string;
602
- target: string;
603
- sourceHandle?: string | null;
604
- targetHandle?: string | null;
605
- animated?: boolean;
606
- hidden?: boolean;
607
- deletable?: boolean;
608
- selectable?: boolean;
609
- selected?: boolean;
610
- markerStart?: import('@xyflow/system').EdgeMarkerType;
611
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
612
- zIndex?: number;
613
- ariaLabel?: string;
614
- interactionWidth?: number;
615
- label?: import('react').ReactNode;
616
- labelStyle?: import('react').CSSProperties;
617
- labelShowBg?: boolean;
618
- labelBgStyle?: import('react').CSSProperties;
619
- labelBgPadding?: [number, number];
620
- labelBgBorderRadius?: number;
621
- style?: import('react').CSSProperties;
622
- className?: string;
623
- reconnectable?: boolean | import('@xyflow/system').HandleType;
624
- focusable?: boolean;
625
- data: import('..').RelationshipData;
626
- readonly id: string;
627
- readonly type: "relationship";
628
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
629
- source: string;
630
- target: string;
631
- sourceHandle?: string | null;
632
- targetHandle?: string | null;
633
- animated?: boolean;
634
- hidden?: boolean;
635
- deletable?: boolean;
636
- selectable?: boolean;
637
- selected?: boolean;
638
- markerStart?: import('@xyflow/system').EdgeMarkerType;
639
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
640
- zIndex?: number;
641
- ariaLabel?: string;
642
- interactionWidth?: number;
643
- label?: import('react').ReactNode;
644
- labelStyle?: import('react').CSSProperties;
645
- labelShowBg?: boolean;
646
- labelBgStyle?: import('react').CSSProperties;
647
- labelBgPadding?: [number, number];
648
- labelBgBorderRadius?: number;
649
- style?: import('react').CSSProperties;
650
- className?: string;
651
- reconnectable?: boolean | import('@xyflow/system').HandleType;
652
- focusable?: boolean;
653
- data: import('..').RelationshipData;
654
- readonly id: string;
655
- readonly type: "relationship";
656
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
657
- source: string;
658
- target: string;
659
- sourceHandle?: string | null;
660
- targetHandle?: string | null;
661
- animated?: boolean;
662
- hidden?: boolean;
663
- deletable?: boolean;
664
- selectable?: boolean;
665
- selected?: boolean;
666
- markerStart?: import('@xyflow/system').EdgeMarkerType;
667
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
668
- zIndex?: number;
669
- ariaLabel?: string;
670
- interactionWidth?: number;
671
- label?: import('react').ReactNode;
672
- labelStyle?: import('react').CSSProperties;
673
- labelShowBg?: boolean;
674
- labelBgStyle?: import('react').CSSProperties;
675
- labelBgPadding?: [number, number];
676
- labelBgBorderRadius?: number;
677
- style?: import('react').CSSProperties;
678
- className?: string;
679
- reconnectable?: boolean | import('@xyflow/system').HandleType;
680
- focusable?: boolean;
681
- data: import('..').RelationshipData;
682
- readonly id: string;
683
- readonly type: "relationship";
684
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
685
- source: string;
686
- target: string;
687
- sourceHandle?: string | null;
688
- targetHandle?: string | null;
689
- animated?: boolean;
690
- hidden?: boolean;
691
- deletable?: boolean;
692
- selectable?: boolean;
693
- selected?: boolean;
694
- markerStart?: import('@xyflow/system').EdgeMarkerType;
695
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
696
- zIndex?: number;
697
- ariaLabel?: string;
698
- interactionWidth?: number;
699
- label?: import('react').ReactNode;
700
- labelStyle?: import('react').CSSProperties;
701
- labelShowBg?: boolean;
702
- labelBgStyle?: import('react').CSSProperties;
703
- labelBgPadding?: [number, number];
704
- labelBgBorderRadius?: number;
705
- style?: import('react').CSSProperties;
706
- className?: string;
707
- reconnectable?: boolean | import('@xyflow/system').HandleType;
708
- focusable?: boolean;
709
- data: import('..').RelationshipData;
710
- readonly id: string;
711
- readonly type: "relationship";
712
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
713
- source: string;
714
- target: string;
715
- sourceHandle?: string | null;
716
- targetHandle?: string | null;
717
- animated?: boolean;
718
- hidden?: boolean;
719
- deletable?: boolean;
720
- selectable?: boolean;
721
- selected?: boolean;
722
- markerStart?: import('@xyflow/system').EdgeMarkerType;
723
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
724
- zIndex?: number;
725
- ariaLabel?: string;
726
- interactionWidth?: number;
727
- label?: import('react').ReactNode;
728
- labelStyle?: import('react').CSSProperties;
729
- labelShowBg?: boolean;
730
- labelBgStyle?: import('react').CSSProperties;
731
- labelBgPadding?: [number, number];
732
- labelBgBorderRadius?: number;
733
- style?: import('react').CSSProperties;
734
- className?: string;
735
- reconnectable?: boolean | import('@xyflow/system').HandleType;
736
- focusable?: boolean;
737
- data: import('..').RelationshipData;
738
- readonly id: string;
739
- readonly type: "relationship";
740
- }>>), replace?: boolean | undefined) => void;
741
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
742
- source: string;
743
- target: string;
744
- sourceHandle?: string | null;
745
- targetHandle?: string | null;
746
- animated?: boolean;
747
- hidden?: boolean;
748
- deletable?: boolean;
749
- selectable?: boolean;
750
- selected?: boolean;
751
- markerStart?: import('@xyflow/system').EdgeMarkerType;
752
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
753
- zIndex?: number;
754
- ariaLabel?: string;
755
- interactionWidth?: number;
756
- label?: import('react').ReactNode;
757
- labelStyle?: import('react').CSSProperties;
758
- labelShowBg?: boolean;
759
- labelBgStyle?: import('react').CSSProperties;
760
- labelBgPadding?: [number, number];
761
- labelBgBorderRadius?: number;
762
- style?: import('react').CSSProperties;
763
- className?: string;
764
- reconnectable?: boolean | import('@xyflow/system').HandleType;
765
- focusable?: boolean;
766
- data: import('..').RelationshipData;
767
- readonly id: string;
768
- readonly type: "relationship";
769
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
770
- source: string;
771
- target: string;
772
- sourceHandle?: string | null;
773
- targetHandle?: string | null;
774
- animated?: boolean;
775
- hidden?: boolean;
776
- deletable?: boolean;
777
- selectable?: boolean;
778
- selected?: boolean;
779
- markerStart?: import('@xyflow/system').EdgeMarkerType;
780
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
781
- zIndex?: number;
782
- ariaLabel?: string;
783
- interactionWidth?: number;
784
- label?: import('react').ReactNode;
785
- labelStyle?: import('react').CSSProperties;
786
- labelShowBg?: boolean;
787
- labelBgStyle?: import('react').CSSProperties;
788
- labelBgPadding?: [number, number];
789
- labelBgBorderRadius?: number;
790
- style?: import('react').CSSProperties;
791
- className?: string;
792
- reconnectable?: boolean | import('@xyflow/system').HandleType;
793
- focusable?: boolean;
794
- data: import('..').RelationshipData;
795
- readonly id: string;
796
- readonly type: "relationship";
797
- }>) => void) => () => void;
798
- }) => void;
799
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
800
- fitDiagram: (xyStore: {
801
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
802
- source: string;
803
- target: string;
804
- sourceHandle?: string | null;
805
- targetHandle?: string | null;
806
- animated?: boolean;
807
- hidden?: boolean;
808
- deletable?: boolean;
809
- selectable?: boolean;
810
- selected?: boolean;
811
- markerStart?: import('@xyflow/system').EdgeMarkerType;
812
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
813
- zIndex?: number;
814
- ariaLabel?: string;
815
- interactionWidth?: number;
816
- label?: import('react').ReactNode;
817
- labelStyle?: import('react').CSSProperties;
818
- labelShowBg?: boolean;
819
- labelBgStyle?: import('react').CSSProperties;
820
- labelBgPadding?: [number, number];
821
- labelBgBorderRadius?: number;
822
- style?: import('react').CSSProperties;
823
- className?: string;
824
- reconnectable?: boolean | import('@xyflow/system').HandleType;
825
- focusable?: boolean;
826
- data: import('..').RelationshipData;
827
- readonly id: string;
828
- readonly type: "relationship";
829
- }>;
830
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
831
- source: string;
832
- target: string;
833
- sourceHandle?: string | null;
834
- targetHandle?: string | null;
835
- animated?: boolean;
836
- hidden?: boolean;
837
- deletable?: boolean;
838
- selectable?: boolean;
839
- selected?: boolean;
840
- markerStart?: import('@xyflow/system').EdgeMarkerType;
841
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
842
- zIndex?: number;
843
- ariaLabel?: string;
844
- interactionWidth?: number;
845
- label?: import('react').ReactNode;
846
- labelStyle?: import('react').CSSProperties;
847
- labelShowBg?: boolean;
848
- labelBgStyle?: import('react').CSSProperties;
849
- labelBgPadding?: [number, number];
850
- labelBgBorderRadius?: number;
851
- style?: import('react').CSSProperties;
852
- className?: string;
853
- reconnectable?: boolean | import('@xyflow/system').HandleType;
854
- focusable?: boolean;
855
- data: import('..').RelationshipData;
856
- readonly id: string;
857
- readonly type: "relationship";
858
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
859
- source: string;
860
- target: string;
861
- sourceHandle?: string | null;
862
- targetHandle?: string | null;
863
- animated?: boolean;
864
- hidden?: boolean;
865
- deletable?: boolean;
866
- selectable?: boolean;
867
- selected?: boolean;
868
- markerStart?: import('@xyflow/system').EdgeMarkerType;
869
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
870
- zIndex?: number;
871
- ariaLabel?: string;
872
- interactionWidth?: number;
873
- label?: import('react').ReactNode;
874
- labelStyle?: import('react').CSSProperties;
875
- labelShowBg?: boolean;
876
- labelBgStyle?: import('react').CSSProperties;
877
- labelBgPadding?: [number, number];
878
- labelBgBorderRadius?: number;
879
- style?: import('react').CSSProperties;
880
- className?: string;
881
- reconnectable?: boolean | import('@xyflow/system').HandleType;
882
- focusable?: boolean;
883
- data: import('..').RelationshipData;
884
- readonly id: string;
885
- readonly type: "relationship";
886
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
887
- source: string;
888
- target: string;
889
- sourceHandle?: string | null;
890
- targetHandle?: string | null;
891
- animated?: boolean;
892
- hidden?: boolean;
893
- deletable?: boolean;
894
- selectable?: boolean;
895
- selected?: boolean;
896
- markerStart?: import('@xyflow/system').EdgeMarkerType;
897
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
898
- zIndex?: number;
899
- ariaLabel?: string;
900
- interactionWidth?: number;
901
- label?: import('react').ReactNode;
902
- labelStyle?: import('react').CSSProperties;
903
- labelShowBg?: boolean;
904
- labelBgStyle?: import('react').CSSProperties;
905
- labelBgPadding?: [number, number];
906
- labelBgBorderRadius?: number;
907
- style?: import('react').CSSProperties;
908
- className?: string;
909
- reconnectable?: boolean | import('@xyflow/system').HandleType;
910
- focusable?: boolean;
911
- data: import('..').RelationshipData;
912
- readonly id: string;
913
- readonly type: "relationship";
914
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
915
- source: string;
916
- target: string;
917
- sourceHandle?: string | null;
918
- targetHandle?: string | null;
919
- animated?: boolean;
920
- hidden?: boolean;
921
- deletable?: boolean;
922
- selectable?: boolean;
923
- selected?: boolean;
924
- markerStart?: import('@xyflow/system').EdgeMarkerType;
925
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
926
- zIndex?: number;
927
- ariaLabel?: string;
928
- interactionWidth?: number;
929
- label?: import('react').ReactNode;
930
- labelStyle?: import('react').CSSProperties;
931
- labelShowBg?: boolean;
932
- labelBgStyle?: import('react').CSSProperties;
933
- labelBgPadding?: [number, number];
934
- labelBgBorderRadius?: number;
935
- style?: import('react').CSSProperties;
936
- className?: string;
937
- reconnectable?: boolean | import('@xyflow/system').HandleType;
938
- focusable?: boolean;
939
- data: import('..').RelationshipData;
940
- readonly id: string;
941
- readonly type: "relationship";
942
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
943
- source: string;
944
- target: string;
945
- sourceHandle?: string | null;
946
- targetHandle?: string | null;
947
- animated?: boolean;
948
- hidden?: boolean;
949
- deletable?: boolean;
950
- selectable?: boolean;
951
- selected?: boolean;
952
- markerStart?: import('@xyflow/system').EdgeMarkerType;
953
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
954
- zIndex?: number;
955
- ariaLabel?: string;
956
- interactionWidth?: number;
957
- label?: import('react').ReactNode;
958
- labelStyle?: import('react').CSSProperties;
959
- labelShowBg?: boolean;
960
- labelBgStyle?: import('react').CSSProperties;
961
- labelBgPadding?: [number, number];
962
- labelBgBorderRadius?: number;
963
- style?: import('react').CSSProperties;
964
- className?: string;
965
- reconnectable?: boolean | import('@xyflow/system').HandleType;
966
- focusable?: boolean;
967
- data: import('..').RelationshipData;
968
- readonly id: string;
969
- readonly type: "relationship";
970
- }>>), replace?: boolean | undefined) => void;
971
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
972
- source: string;
973
- target: string;
974
- sourceHandle?: string | null;
975
- targetHandle?: string | null;
976
- animated?: boolean;
977
- hidden?: boolean;
978
- deletable?: boolean;
979
- selectable?: boolean;
980
- selected?: boolean;
981
- markerStart?: import('@xyflow/system').EdgeMarkerType;
982
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
983
- zIndex?: number;
984
- ariaLabel?: string;
985
- interactionWidth?: number;
986
- label?: import('react').ReactNode;
987
- labelStyle?: import('react').CSSProperties;
988
- labelShowBg?: boolean;
989
- labelBgStyle?: import('react').CSSProperties;
990
- labelBgPadding?: [number, number];
991
- labelBgBorderRadius?: number;
992
- style?: import('react').CSSProperties;
993
- className?: string;
994
- reconnectable?: boolean | import('@xyflow/system').HandleType;
995
- focusable?: boolean;
996
- data: import('..').RelationshipData;
997
- readonly id: string;
998
- readonly type: "relationship";
999
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1000
- source: string;
1001
- target: string;
1002
- sourceHandle?: string | null;
1003
- targetHandle?: string | null;
1004
- animated?: boolean;
1005
- hidden?: boolean;
1006
- deletable?: boolean;
1007
- selectable?: boolean;
1008
- selected?: boolean;
1009
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1010
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1011
- zIndex?: number;
1012
- ariaLabel?: string;
1013
- interactionWidth?: number;
1014
- label?: import('react').ReactNode;
1015
- labelStyle?: import('react').CSSProperties;
1016
- labelShowBg?: boolean;
1017
- labelBgStyle?: import('react').CSSProperties;
1018
- labelBgPadding?: [number, number];
1019
- labelBgBorderRadius?: number;
1020
- style?: import('react').CSSProperties;
1021
- className?: string;
1022
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1023
- focusable?: boolean;
1024
- data: import('..').RelationshipData;
1025
- readonly id: string;
1026
- readonly type: "relationship";
1027
- }>) => void) => () => void;
1028
- }) => void;
1029
- nextDynamicStep: (increment?: number | undefined) => void;
120
+ triggerSaveManualLayout: () => void;
121
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
122
+ fitDiagram: (duration?: number) => void;
123
+ nextDynamicStep: (increment?: number) => void;
1030
124
  stopDynamicView: () => void;
1031
125
  }, previousSelectedState: {
126
+ readonly storeDevId: string;
1032
127
  view: import('@likec4/core').DiagramView;
1033
128
  readonly: boolean;
1034
129
  showElementLinks: boolean;
@@ -1039,8 +134,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1039
134
  nodesDraggable: boolean;
1040
135
  nodesSelectable: boolean;
1041
136
  experimentalEdgeEditing: boolean;
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;
@@ -1079,469 +176,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1079
176
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1080
177
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1081
178
  cancelSaveManualLayout: () => void;
1082
- triggerSaveManualLayout: (xystore: {
1083
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1084
- source: string;
1085
- target: string;
1086
- sourceHandle?: string | null;
1087
- targetHandle?: string | null;
1088
- animated?: boolean;
1089
- hidden?: boolean;
1090
- deletable?: boolean;
1091
- selectable?: boolean;
1092
- selected?: boolean;
1093
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1094
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1095
- zIndex?: number;
1096
- ariaLabel?: string;
1097
- interactionWidth?: number;
1098
- label?: import('react').ReactNode;
1099
- labelStyle?: import('react').CSSProperties;
1100
- labelShowBg?: boolean;
1101
- labelBgStyle?: import('react').CSSProperties;
1102
- labelBgPadding?: [number, number];
1103
- labelBgBorderRadius?: number;
1104
- style?: import('react').CSSProperties;
1105
- className?: string;
1106
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1107
- focusable?: boolean;
1108
- data: import('..').RelationshipData;
1109
- readonly id: string;
1110
- readonly type: "relationship";
1111
- }>;
1112
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1113
- source: string;
1114
- target: string;
1115
- sourceHandle?: string | null;
1116
- targetHandle?: string | null;
1117
- animated?: boolean;
1118
- hidden?: boolean;
1119
- deletable?: boolean;
1120
- selectable?: boolean;
1121
- selected?: boolean;
1122
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1123
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1124
- zIndex?: number;
1125
- ariaLabel?: string;
1126
- interactionWidth?: number;
1127
- label?: import('react').ReactNode;
1128
- labelStyle?: import('react').CSSProperties;
1129
- labelShowBg?: boolean;
1130
- labelBgStyle?: import('react').CSSProperties;
1131
- labelBgPadding?: [number, number];
1132
- labelBgBorderRadius?: number;
1133
- style?: import('react').CSSProperties;
1134
- className?: string;
1135
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1136
- focusable?: boolean;
1137
- data: import('..').RelationshipData;
1138
- readonly id: string;
1139
- readonly type: "relationship";
1140
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1141
- source: string;
1142
- target: string;
1143
- sourceHandle?: string | null;
1144
- targetHandle?: string | null;
1145
- animated?: boolean;
1146
- hidden?: boolean;
1147
- deletable?: boolean;
1148
- selectable?: boolean;
1149
- selected?: boolean;
1150
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1151
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1152
- zIndex?: number;
1153
- ariaLabel?: string;
1154
- interactionWidth?: number;
1155
- label?: import('react').ReactNode;
1156
- labelStyle?: import('react').CSSProperties;
1157
- labelShowBg?: boolean;
1158
- labelBgStyle?: import('react').CSSProperties;
1159
- labelBgPadding?: [number, number];
1160
- labelBgBorderRadius?: number;
1161
- style?: import('react').CSSProperties;
1162
- className?: string;
1163
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1164
- focusable?: boolean;
1165
- data: import('..').RelationshipData;
1166
- readonly id: string;
1167
- readonly type: "relationship";
1168
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1169
- source: string;
1170
- target: string;
1171
- sourceHandle?: string | null;
1172
- targetHandle?: string | null;
1173
- animated?: boolean;
1174
- hidden?: boolean;
1175
- deletable?: boolean;
1176
- selectable?: boolean;
1177
- selected?: boolean;
1178
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1179
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1180
- zIndex?: number;
1181
- ariaLabel?: string;
1182
- interactionWidth?: number;
1183
- label?: import('react').ReactNode;
1184
- labelStyle?: import('react').CSSProperties;
1185
- labelShowBg?: boolean;
1186
- labelBgStyle?: import('react').CSSProperties;
1187
- labelBgPadding?: [number, number];
1188
- labelBgBorderRadius?: number;
1189
- style?: import('react').CSSProperties;
1190
- className?: string;
1191
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1192
- focusable?: boolean;
1193
- data: import('..').RelationshipData;
1194
- readonly id: string;
1195
- readonly type: "relationship";
1196
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1197
- source: string;
1198
- target: string;
1199
- sourceHandle?: string | null;
1200
- targetHandle?: string | null;
1201
- animated?: boolean;
1202
- hidden?: boolean;
1203
- deletable?: boolean;
1204
- selectable?: boolean;
1205
- selected?: boolean;
1206
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1207
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1208
- zIndex?: number;
1209
- ariaLabel?: string;
1210
- interactionWidth?: number;
1211
- label?: import('react').ReactNode;
1212
- labelStyle?: import('react').CSSProperties;
1213
- labelShowBg?: boolean;
1214
- labelBgStyle?: import('react').CSSProperties;
1215
- labelBgPadding?: [number, number];
1216
- labelBgBorderRadius?: number;
1217
- style?: import('react').CSSProperties;
1218
- className?: string;
1219
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1220
- focusable?: boolean;
1221
- data: import('..').RelationshipData;
1222
- readonly id: string;
1223
- readonly type: "relationship";
1224
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1225
- source: string;
1226
- target: string;
1227
- sourceHandle?: string | null;
1228
- targetHandle?: string | null;
1229
- animated?: boolean;
1230
- hidden?: boolean;
1231
- deletable?: boolean;
1232
- selectable?: boolean;
1233
- selected?: boolean;
1234
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1235
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1236
- zIndex?: number;
1237
- ariaLabel?: string;
1238
- interactionWidth?: number;
1239
- label?: import('react').ReactNode;
1240
- labelStyle?: import('react').CSSProperties;
1241
- labelShowBg?: boolean;
1242
- labelBgStyle?: import('react').CSSProperties;
1243
- labelBgPadding?: [number, number];
1244
- labelBgBorderRadius?: number;
1245
- style?: import('react').CSSProperties;
1246
- className?: string;
1247
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1248
- focusable?: boolean;
1249
- data: import('..').RelationshipData;
1250
- readonly id: string;
1251
- readonly type: "relationship";
1252
- }>>), replace?: boolean | undefined) => void;
1253
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1254
- source: string;
1255
- target: string;
1256
- sourceHandle?: string | null;
1257
- targetHandle?: string | null;
1258
- animated?: boolean;
1259
- hidden?: boolean;
1260
- deletable?: boolean;
1261
- selectable?: boolean;
1262
- selected?: boolean;
1263
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1264
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1265
- zIndex?: number;
1266
- ariaLabel?: string;
1267
- interactionWidth?: number;
1268
- label?: import('react').ReactNode;
1269
- labelStyle?: import('react').CSSProperties;
1270
- labelShowBg?: boolean;
1271
- labelBgStyle?: import('react').CSSProperties;
1272
- labelBgPadding?: [number, number];
1273
- labelBgBorderRadius?: number;
1274
- style?: import('react').CSSProperties;
1275
- className?: string;
1276
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1277
- focusable?: boolean;
1278
- data: import('..').RelationshipData;
1279
- readonly id: string;
1280
- readonly type: "relationship";
1281
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1282
- source: string;
1283
- target: string;
1284
- sourceHandle?: string | null;
1285
- targetHandle?: string | null;
1286
- animated?: boolean;
1287
- hidden?: boolean;
1288
- deletable?: boolean;
1289
- selectable?: boolean;
1290
- selected?: boolean;
1291
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1292
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1293
- zIndex?: number;
1294
- ariaLabel?: string;
1295
- interactionWidth?: number;
1296
- label?: import('react').ReactNode;
1297
- labelStyle?: import('react').CSSProperties;
1298
- labelShowBg?: boolean;
1299
- labelBgStyle?: import('react').CSSProperties;
1300
- labelBgPadding?: [number, number];
1301
- labelBgBorderRadius?: number;
1302
- style?: import('react').CSSProperties;
1303
- className?: string;
1304
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1305
- focusable?: boolean;
1306
- data: import('..').RelationshipData;
1307
- readonly id: string;
1308
- readonly type: "relationship";
1309
- }>) => void) => () => void;
1310
- }) => void;
1311
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1312
- fitDiagram: (xyStore: {
1313
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1314
- source: string;
1315
- target: string;
1316
- sourceHandle?: string | null;
1317
- targetHandle?: string | null;
1318
- animated?: boolean;
1319
- hidden?: boolean;
1320
- deletable?: boolean;
1321
- selectable?: boolean;
1322
- selected?: boolean;
1323
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1324
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1325
- zIndex?: number;
1326
- ariaLabel?: string;
1327
- interactionWidth?: number;
1328
- label?: import('react').ReactNode;
1329
- labelStyle?: import('react').CSSProperties;
1330
- labelShowBg?: boolean;
1331
- labelBgStyle?: import('react').CSSProperties;
1332
- labelBgPadding?: [number, number];
1333
- labelBgBorderRadius?: number;
1334
- style?: import('react').CSSProperties;
1335
- className?: string;
1336
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1337
- focusable?: boolean;
1338
- data: import('..').RelationshipData;
1339
- readonly id: string;
1340
- readonly type: "relationship";
1341
- }>;
1342
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1343
- source: string;
1344
- target: string;
1345
- sourceHandle?: string | null;
1346
- targetHandle?: string | null;
1347
- animated?: boolean;
1348
- hidden?: boolean;
1349
- deletable?: boolean;
1350
- selectable?: boolean;
1351
- selected?: boolean;
1352
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1353
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1354
- zIndex?: number;
1355
- ariaLabel?: string;
1356
- interactionWidth?: number;
1357
- label?: import('react').ReactNode;
1358
- labelStyle?: import('react').CSSProperties;
1359
- labelShowBg?: boolean;
1360
- labelBgStyle?: import('react').CSSProperties;
1361
- labelBgPadding?: [number, number];
1362
- labelBgBorderRadius?: number;
1363
- style?: import('react').CSSProperties;
1364
- className?: string;
1365
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1366
- focusable?: boolean;
1367
- data: import('..').RelationshipData;
1368
- readonly id: string;
1369
- readonly type: "relationship";
1370
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1371
- source: string;
1372
- target: string;
1373
- sourceHandle?: string | null;
1374
- targetHandle?: string | null;
1375
- animated?: boolean;
1376
- hidden?: boolean;
1377
- deletable?: boolean;
1378
- selectable?: boolean;
1379
- selected?: boolean;
1380
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1381
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1382
- zIndex?: number;
1383
- ariaLabel?: string;
1384
- interactionWidth?: number;
1385
- label?: import('react').ReactNode;
1386
- labelStyle?: import('react').CSSProperties;
1387
- labelShowBg?: boolean;
1388
- labelBgStyle?: import('react').CSSProperties;
1389
- labelBgPadding?: [number, number];
1390
- labelBgBorderRadius?: number;
1391
- style?: import('react').CSSProperties;
1392
- className?: string;
1393
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1394
- focusable?: boolean;
1395
- data: import('..').RelationshipData;
1396
- readonly id: string;
1397
- readonly type: "relationship";
1398
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1399
- source: string;
1400
- target: string;
1401
- sourceHandle?: string | null;
1402
- targetHandle?: string | null;
1403
- animated?: boolean;
1404
- hidden?: boolean;
1405
- deletable?: boolean;
1406
- selectable?: boolean;
1407
- selected?: boolean;
1408
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1409
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1410
- zIndex?: number;
1411
- ariaLabel?: string;
1412
- interactionWidth?: number;
1413
- label?: import('react').ReactNode;
1414
- labelStyle?: import('react').CSSProperties;
1415
- labelShowBg?: boolean;
1416
- labelBgStyle?: import('react').CSSProperties;
1417
- labelBgPadding?: [number, number];
1418
- labelBgBorderRadius?: number;
1419
- style?: import('react').CSSProperties;
1420
- className?: string;
1421
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1422
- focusable?: boolean;
1423
- data: import('..').RelationshipData;
1424
- readonly id: string;
1425
- readonly type: "relationship";
1426
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1427
- source: string;
1428
- target: string;
1429
- sourceHandle?: string | null;
1430
- targetHandle?: string | null;
1431
- animated?: boolean;
1432
- hidden?: boolean;
1433
- deletable?: boolean;
1434
- selectable?: boolean;
1435
- selected?: boolean;
1436
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1437
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1438
- zIndex?: number;
1439
- ariaLabel?: string;
1440
- interactionWidth?: number;
1441
- label?: import('react').ReactNode;
1442
- labelStyle?: import('react').CSSProperties;
1443
- labelShowBg?: boolean;
1444
- labelBgStyle?: import('react').CSSProperties;
1445
- labelBgPadding?: [number, number];
1446
- labelBgBorderRadius?: number;
1447
- style?: import('react').CSSProperties;
1448
- className?: string;
1449
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1450
- focusable?: boolean;
1451
- data: import('..').RelationshipData;
1452
- readonly id: string;
1453
- readonly type: "relationship";
1454
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1455
- source: string;
1456
- target: string;
1457
- sourceHandle?: string | null;
1458
- targetHandle?: string | null;
1459
- animated?: boolean;
1460
- hidden?: boolean;
1461
- deletable?: boolean;
1462
- selectable?: boolean;
1463
- selected?: boolean;
1464
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1465
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1466
- zIndex?: number;
1467
- ariaLabel?: string;
1468
- interactionWidth?: number;
1469
- label?: import('react').ReactNode;
1470
- labelStyle?: import('react').CSSProperties;
1471
- labelShowBg?: boolean;
1472
- labelBgStyle?: import('react').CSSProperties;
1473
- labelBgPadding?: [number, number];
1474
- labelBgBorderRadius?: number;
1475
- style?: import('react').CSSProperties;
1476
- className?: string;
1477
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1478
- focusable?: boolean;
1479
- data: import('..').RelationshipData;
1480
- readonly id: string;
1481
- readonly type: "relationship";
1482
- }>>), replace?: boolean | undefined) => void;
1483
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1484
- source: string;
1485
- target: string;
1486
- sourceHandle?: string | null;
1487
- targetHandle?: string | null;
1488
- animated?: boolean;
1489
- hidden?: boolean;
1490
- deletable?: boolean;
1491
- selectable?: boolean;
1492
- selected?: boolean;
1493
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1494
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1495
- zIndex?: number;
1496
- ariaLabel?: string;
1497
- interactionWidth?: number;
1498
- label?: import('react').ReactNode;
1499
- labelStyle?: import('react').CSSProperties;
1500
- labelShowBg?: boolean;
1501
- labelBgStyle?: import('react').CSSProperties;
1502
- labelBgPadding?: [number, number];
1503
- labelBgBorderRadius?: number;
1504
- style?: import('react').CSSProperties;
1505
- className?: string;
1506
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1507
- focusable?: boolean;
1508
- data: import('..').RelationshipData;
1509
- readonly id: string;
1510
- readonly type: "relationship";
1511
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1512
- source: string;
1513
- target: string;
1514
- sourceHandle?: string | null;
1515
- targetHandle?: string | null;
1516
- animated?: boolean;
1517
- hidden?: boolean;
1518
- deletable?: boolean;
1519
- selectable?: boolean;
1520
- selected?: boolean;
1521
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1522
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1523
- zIndex?: number;
1524
- ariaLabel?: string;
1525
- interactionWidth?: number;
1526
- label?: import('react').ReactNode;
1527
- labelStyle?: import('react').CSSProperties;
1528
- labelShowBg?: boolean;
1529
- labelBgStyle?: import('react').CSSProperties;
1530
- labelBgPadding?: [number, number];
1531
- labelBgBorderRadius?: number;
1532
- style?: import('react').CSSProperties;
1533
- className?: string;
1534
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1535
- focusable?: boolean;
1536
- data: import('..').RelationshipData;
1537
- readonly id: string;
1538
- readonly type: "relationship";
1539
- }>) => void) => () => void;
1540
- }) => void;
1541
- nextDynamicStep: (increment?: number | undefined) => void;
179
+ triggerSaveManualLayout: () => void;
180
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
181
+ fitDiagram: (duration?: number) => void;
182
+ nextDynamicStep: (increment?: number) => void;
1542
183
  stopDynamicView: () => void;
1543
184
  }) => void): () => void;
1544
185
  <U>(selector: (state: {
186
+ readonly storeDevId: string;
1545
187
  view: import('@likec4/core').DiagramView;
1546
188
  readonly: boolean;
1547
189
  showElementLinks: boolean;
@@ -1552,8 +194,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1552
194
  nodesDraggable: boolean;
1553
195
  nodesSelectable: boolean;
1554
196
  experimentalEdgeEditing: boolean;
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;
@@ -1592,466 +236,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1592
236
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1593
237
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1594
238
  cancelSaveManualLayout: () => void;
1595
- triggerSaveManualLayout: (xystore: {
1596
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1597
- source: string;
1598
- target: string;
1599
- sourceHandle?: string | null;
1600
- targetHandle?: string | null;
1601
- animated?: boolean;
1602
- hidden?: boolean;
1603
- deletable?: boolean;
1604
- selectable?: boolean;
1605
- selected?: boolean;
1606
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1607
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1608
- zIndex?: number;
1609
- ariaLabel?: string;
1610
- interactionWidth?: number;
1611
- label?: import('react').ReactNode;
1612
- labelStyle?: import('react').CSSProperties;
1613
- labelShowBg?: boolean;
1614
- labelBgStyle?: import('react').CSSProperties;
1615
- labelBgPadding?: [number, number];
1616
- labelBgBorderRadius?: number;
1617
- style?: import('react').CSSProperties;
1618
- className?: string;
1619
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1620
- focusable?: boolean;
1621
- data: import('..').RelationshipData;
1622
- readonly id: string;
1623
- readonly type: "relationship";
1624
- }>;
1625
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1626
- source: string;
1627
- target: string;
1628
- sourceHandle?: string | null;
1629
- targetHandle?: string | null;
1630
- animated?: boolean;
1631
- hidden?: boolean;
1632
- deletable?: boolean;
1633
- selectable?: boolean;
1634
- selected?: boolean;
1635
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1636
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1637
- zIndex?: number;
1638
- ariaLabel?: string;
1639
- interactionWidth?: number;
1640
- label?: import('react').ReactNode;
1641
- labelStyle?: import('react').CSSProperties;
1642
- labelShowBg?: boolean;
1643
- labelBgStyle?: import('react').CSSProperties;
1644
- labelBgPadding?: [number, number];
1645
- labelBgBorderRadius?: number;
1646
- style?: import('react').CSSProperties;
1647
- className?: string;
1648
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1649
- focusable?: boolean;
1650
- data: import('..').RelationshipData;
1651
- readonly id: string;
1652
- readonly type: "relationship";
1653
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1654
- source: string;
1655
- target: string;
1656
- sourceHandle?: string | null;
1657
- targetHandle?: string | null;
1658
- animated?: boolean;
1659
- hidden?: boolean;
1660
- deletable?: boolean;
1661
- selectable?: boolean;
1662
- selected?: boolean;
1663
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1664
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1665
- zIndex?: number;
1666
- ariaLabel?: string;
1667
- interactionWidth?: number;
1668
- label?: import('react').ReactNode;
1669
- labelStyle?: import('react').CSSProperties;
1670
- labelShowBg?: boolean;
1671
- labelBgStyle?: import('react').CSSProperties;
1672
- labelBgPadding?: [number, number];
1673
- labelBgBorderRadius?: number;
1674
- style?: import('react').CSSProperties;
1675
- className?: string;
1676
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1677
- focusable?: boolean;
1678
- data: import('..').RelationshipData;
1679
- readonly id: string;
1680
- readonly type: "relationship";
1681
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1682
- source: string;
1683
- target: string;
1684
- sourceHandle?: string | null;
1685
- targetHandle?: string | null;
1686
- animated?: boolean;
1687
- hidden?: boolean;
1688
- deletable?: boolean;
1689
- selectable?: boolean;
1690
- selected?: boolean;
1691
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1692
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1693
- zIndex?: number;
1694
- ariaLabel?: string;
1695
- interactionWidth?: number;
1696
- label?: import('react').ReactNode;
1697
- labelStyle?: import('react').CSSProperties;
1698
- labelShowBg?: boolean;
1699
- labelBgStyle?: import('react').CSSProperties;
1700
- labelBgPadding?: [number, number];
1701
- labelBgBorderRadius?: number;
1702
- style?: import('react').CSSProperties;
1703
- className?: string;
1704
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1705
- focusable?: boolean;
1706
- data: import('..').RelationshipData;
1707
- readonly id: string;
1708
- readonly type: "relationship";
1709
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1710
- source: string;
1711
- target: string;
1712
- sourceHandle?: string | null;
1713
- targetHandle?: string | null;
1714
- animated?: boolean;
1715
- hidden?: boolean;
1716
- deletable?: boolean;
1717
- selectable?: boolean;
1718
- selected?: boolean;
1719
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1720
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1721
- zIndex?: number;
1722
- ariaLabel?: string;
1723
- interactionWidth?: number;
1724
- label?: import('react').ReactNode;
1725
- labelStyle?: import('react').CSSProperties;
1726
- labelShowBg?: boolean;
1727
- labelBgStyle?: import('react').CSSProperties;
1728
- labelBgPadding?: [number, number];
1729
- labelBgBorderRadius?: number;
1730
- style?: import('react').CSSProperties;
1731
- className?: string;
1732
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1733
- focusable?: boolean;
1734
- data: import('..').RelationshipData;
1735
- readonly id: string;
1736
- readonly type: "relationship";
1737
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1738
- source: string;
1739
- target: string;
1740
- sourceHandle?: string | null;
1741
- targetHandle?: string | null;
1742
- animated?: boolean;
1743
- hidden?: boolean;
1744
- deletable?: boolean;
1745
- selectable?: boolean;
1746
- selected?: boolean;
1747
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1748
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1749
- zIndex?: number;
1750
- ariaLabel?: string;
1751
- interactionWidth?: number;
1752
- label?: import('react').ReactNode;
1753
- labelStyle?: import('react').CSSProperties;
1754
- labelShowBg?: boolean;
1755
- labelBgStyle?: import('react').CSSProperties;
1756
- labelBgPadding?: [number, number];
1757
- labelBgBorderRadius?: number;
1758
- style?: import('react').CSSProperties;
1759
- className?: string;
1760
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1761
- focusable?: boolean;
1762
- data: import('..').RelationshipData;
1763
- readonly id: string;
1764
- readonly type: "relationship";
1765
- }>>), replace?: boolean | undefined) => void;
1766
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1767
- source: string;
1768
- target: string;
1769
- sourceHandle?: string | null;
1770
- targetHandle?: string | null;
1771
- animated?: boolean;
1772
- hidden?: boolean;
1773
- deletable?: boolean;
1774
- selectable?: boolean;
1775
- selected?: boolean;
1776
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1777
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1778
- zIndex?: number;
1779
- ariaLabel?: string;
1780
- interactionWidth?: number;
1781
- label?: import('react').ReactNode;
1782
- labelStyle?: import('react').CSSProperties;
1783
- labelShowBg?: boolean;
1784
- labelBgStyle?: import('react').CSSProperties;
1785
- labelBgPadding?: [number, number];
1786
- labelBgBorderRadius?: number;
1787
- style?: import('react').CSSProperties;
1788
- className?: string;
1789
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1790
- focusable?: boolean;
1791
- data: import('..').RelationshipData;
1792
- readonly id: string;
1793
- readonly type: "relationship";
1794
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1795
- source: string;
1796
- target: string;
1797
- sourceHandle?: string | null;
1798
- targetHandle?: string | null;
1799
- animated?: boolean;
1800
- hidden?: boolean;
1801
- deletable?: boolean;
1802
- selectable?: boolean;
1803
- selected?: boolean;
1804
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1805
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1806
- zIndex?: number;
1807
- ariaLabel?: string;
1808
- interactionWidth?: number;
1809
- label?: import('react').ReactNode;
1810
- labelStyle?: import('react').CSSProperties;
1811
- labelShowBg?: boolean;
1812
- labelBgStyle?: import('react').CSSProperties;
1813
- labelBgPadding?: [number, number];
1814
- labelBgBorderRadius?: number;
1815
- style?: import('react').CSSProperties;
1816
- className?: string;
1817
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1818
- focusable?: boolean;
1819
- data: import('..').RelationshipData;
1820
- readonly id: string;
1821
- readonly type: "relationship";
1822
- }>) => void) => () => void;
1823
- }) => void;
1824
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1825
- fitDiagram: (xyStore: {
1826
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1827
- source: string;
1828
- target: string;
1829
- sourceHandle?: string | null;
1830
- targetHandle?: string | null;
1831
- animated?: boolean;
1832
- hidden?: boolean;
1833
- deletable?: boolean;
1834
- selectable?: boolean;
1835
- selected?: boolean;
1836
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1837
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1838
- zIndex?: number;
1839
- ariaLabel?: string;
1840
- interactionWidth?: number;
1841
- label?: import('react').ReactNode;
1842
- labelStyle?: import('react').CSSProperties;
1843
- labelShowBg?: boolean;
1844
- labelBgStyle?: import('react').CSSProperties;
1845
- labelBgPadding?: [number, number];
1846
- labelBgBorderRadius?: number;
1847
- style?: import('react').CSSProperties;
1848
- className?: string;
1849
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1850
- focusable?: boolean;
1851
- data: import('..').RelationshipData;
1852
- readonly id: string;
1853
- readonly type: "relationship";
1854
- }>;
1855
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1856
- source: string;
1857
- target: string;
1858
- sourceHandle?: string | null;
1859
- targetHandle?: string | null;
1860
- animated?: boolean;
1861
- hidden?: boolean;
1862
- deletable?: boolean;
1863
- selectable?: boolean;
1864
- selected?: boolean;
1865
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1866
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1867
- zIndex?: number;
1868
- ariaLabel?: string;
1869
- interactionWidth?: number;
1870
- label?: import('react').ReactNode;
1871
- labelStyle?: import('react').CSSProperties;
1872
- labelShowBg?: boolean;
1873
- labelBgStyle?: import('react').CSSProperties;
1874
- labelBgPadding?: [number, number];
1875
- labelBgBorderRadius?: number;
1876
- style?: import('react').CSSProperties;
1877
- className?: string;
1878
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1879
- focusable?: boolean;
1880
- data: import('..').RelationshipData;
1881
- readonly id: string;
1882
- readonly type: "relationship";
1883
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1884
- source: string;
1885
- target: string;
1886
- sourceHandle?: string | null;
1887
- targetHandle?: string | null;
1888
- animated?: boolean;
1889
- hidden?: boolean;
1890
- deletable?: boolean;
1891
- selectable?: boolean;
1892
- selected?: boolean;
1893
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1894
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1895
- zIndex?: number;
1896
- ariaLabel?: string;
1897
- interactionWidth?: number;
1898
- label?: import('react').ReactNode;
1899
- labelStyle?: import('react').CSSProperties;
1900
- labelShowBg?: boolean;
1901
- labelBgStyle?: import('react').CSSProperties;
1902
- labelBgPadding?: [number, number];
1903
- labelBgBorderRadius?: number;
1904
- style?: import('react').CSSProperties;
1905
- className?: string;
1906
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1907
- focusable?: boolean;
1908
- data: import('..').RelationshipData;
1909
- readonly id: string;
1910
- readonly type: "relationship";
1911
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1912
- source: string;
1913
- target: string;
1914
- sourceHandle?: string | null;
1915
- targetHandle?: string | null;
1916
- animated?: boolean;
1917
- hidden?: boolean;
1918
- deletable?: boolean;
1919
- selectable?: boolean;
1920
- selected?: boolean;
1921
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1922
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1923
- zIndex?: number;
1924
- ariaLabel?: string;
1925
- interactionWidth?: number;
1926
- label?: import('react').ReactNode;
1927
- labelStyle?: import('react').CSSProperties;
1928
- labelShowBg?: boolean;
1929
- labelBgStyle?: import('react').CSSProperties;
1930
- labelBgPadding?: [number, number];
1931
- labelBgBorderRadius?: number;
1932
- style?: import('react').CSSProperties;
1933
- className?: string;
1934
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1935
- focusable?: boolean;
1936
- data: import('..').RelationshipData;
1937
- readonly id: string;
1938
- readonly type: "relationship";
1939
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1940
- source: string;
1941
- target: string;
1942
- sourceHandle?: string | null;
1943
- targetHandle?: string | null;
1944
- animated?: boolean;
1945
- hidden?: boolean;
1946
- deletable?: boolean;
1947
- selectable?: boolean;
1948
- selected?: boolean;
1949
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1950
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1951
- zIndex?: number;
1952
- ariaLabel?: string;
1953
- interactionWidth?: number;
1954
- label?: import('react').ReactNode;
1955
- labelStyle?: import('react').CSSProperties;
1956
- labelShowBg?: boolean;
1957
- labelBgStyle?: import('react').CSSProperties;
1958
- labelBgPadding?: [number, number];
1959
- labelBgBorderRadius?: number;
1960
- style?: import('react').CSSProperties;
1961
- className?: string;
1962
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1963
- focusable?: boolean;
1964
- data: import('..').RelationshipData;
1965
- readonly id: string;
1966
- readonly type: "relationship";
1967
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1968
- source: string;
1969
- target: string;
1970
- sourceHandle?: string | null;
1971
- targetHandle?: string | null;
1972
- animated?: boolean;
1973
- hidden?: boolean;
1974
- deletable?: boolean;
1975
- selectable?: boolean;
1976
- selected?: boolean;
1977
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1978
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1979
- zIndex?: number;
1980
- ariaLabel?: string;
1981
- interactionWidth?: number;
1982
- label?: import('react').ReactNode;
1983
- labelStyle?: import('react').CSSProperties;
1984
- labelShowBg?: boolean;
1985
- labelBgStyle?: import('react').CSSProperties;
1986
- labelBgPadding?: [number, number];
1987
- labelBgBorderRadius?: number;
1988
- style?: import('react').CSSProperties;
1989
- className?: string;
1990
- reconnectable?: boolean | import('@xyflow/system').HandleType;
1991
- focusable?: boolean;
1992
- data: import('..').RelationshipData;
1993
- readonly id: string;
1994
- readonly type: "relationship";
1995
- }>>), replace?: boolean | undefined) => void;
1996
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1997
- source: string;
1998
- target: string;
1999
- sourceHandle?: string | null;
2000
- targetHandle?: string | null;
2001
- animated?: boolean;
2002
- hidden?: boolean;
2003
- deletable?: boolean;
2004
- selectable?: boolean;
2005
- selected?: boolean;
2006
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2007
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2008
- zIndex?: number;
2009
- ariaLabel?: string;
2010
- interactionWidth?: number;
2011
- label?: import('react').ReactNode;
2012
- labelStyle?: import('react').CSSProperties;
2013
- labelShowBg?: boolean;
2014
- labelBgStyle?: import('react').CSSProperties;
2015
- labelBgPadding?: [number, number];
2016
- labelBgBorderRadius?: number;
2017
- style?: import('react').CSSProperties;
2018
- className?: string;
2019
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2020
- focusable?: boolean;
2021
- data: import('..').RelationshipData;
2022
- readonly id: string;
2023
- readonly type: "relationship";
2024
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2025
- source: string;
2026
- target: string;
2027
- sourceHandle?: string | null;
2028
- targetHandle?: string | null;
2029
- animated?: boolean;
2030
- hidden?: boolean;
2031
- deletable?: boolean;
2032
- selectable?: boolean;
2033
- selected?: boolean;
2034
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2035
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2036
- zIndex?: number;
2037
- ariaLabel?: string;
2038
- interactionWidth?: number;
2039
- label?: import('react').ReactNode;
2040
- labelStyle?: import('react').CSSProperties;
2041
- labelShowBg?: boolean;
2042
- labelBgStyle?: import('react').CSSProperties;
2043
- labelBgPadding?: [number, number];
2044
- labelBgBorderRadius?: number;
2045
- style?: import('react').CSSProperties;
2046
- className?: string;
2047
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2048
- focusable?: boolean;
2049
- data: import('..').RelationshipData;
2050
- readonly id: string;
2051
- readonly type: "relationship";
2052
- }>) => void) => () => void;
2053
- }) => void;
2054
- nextDynamicStep: (increment?: number | undefined) => void;
239
+ triggerSaveManualLayout: () => void;
240
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
241
+ fitDiagram: (duration?: number) => void;
242
+ nextDynamicStep: (increment?: number) => void;
2055
243
  stopDynamicView: () => void;
2056
244
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
2057
245
  equalityFn?: (a: U, b: U) => boolean;
@@ -2062,6 +250,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2062
250
  setState<A extends string | {
2063
251
  type: string;
2064
252
  }>(partial: {
253
+ readonly storeDevId: string;
2065
254
  view: import('@likec4/core').DiagramView;
2066
255
  readonly: boolean;
2067
256
  showElementLinks: boolean;
@@ -2072,8 +261,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2072
261
  nodesDraggable: boolean;
2073
262
  nodesSelectable: boolean;
2074
263
  experimentalEdgeEditing: boolean;
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;
@@ -2112,468 +303,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2112
303
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2113
304
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2114
305
  cancelSaveManualLayout: () => void;
2115
- triggerSaveManualLayout: (xystore: {
2116
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2117
- source: string;
2118
- target: string;
2119
- sourceHandle?: string | null;
2120
- targetHandle?: string | null;
2121
- animated?: boolean;
2122
- hidden?: boolean;
2123
- deletable?: boolean;
2124
- selectable?: boolean;
2125
- selected?: boolean;
2126
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2127
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2128
- zIndex?: number;
2129
- ariaLabel?: string;
2130
- interactionWidth?: number;
2131
- label?: import('react').ReactNode;
2132
- labelStyle?: import('react').CSSProperties;
2133
- labelShowBg?: boolean;
2134
- labelBgStyle?: import('react').CSSProperties;
2135
- labelBgPadding?: [number, number];
2136
- labelBgBorderRadius?: number;
2137
- style?: import('react').CSSProperties;
2138
- className?: string;
2139
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2140
- focusable?: boolean;
2141
- data: import('..').RelationshipData;
2142
- readonly id: string;
2143
- readonly type: "relationship";
2144
- }>;
2145
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2146
- source: string;
2147
- target: string;
2148
- sourceHandle?: string | null;
2149
- targetHandle?: string | null;
2150
- animated?: boolean;
2151
- hidden?: boolean;
2152
- deletable?: boolean;
2153
- selectable?: boolean;
2154
- selected?: boolean;
2155
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2156
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2157
- zIndex?: number;
2158
- ariaLabel?: string;
2159
- interactionWidth?: number;
2160
- label?: import('react').ReactNode;
2161
- labelStyle?: import('react').CSSProperties;
2162
- labelShowBg?: boolean;
2163
- labelBgStyle?: import('react').CSSProperties;
2164
- labelBgPadding?: [number, number];
2165
- labelBgBorderRadius?: number;
2166
- style?: import('react').CSSProperties;
2167
- className?: string;
2168
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2169
- focusable?: boolean;
2170
- data: import('..').RelationshipData;
2171
- readonly id: string;
2172
- readonly type: "relationship";
2173
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2174
- source: string;
2175
- target: string;
2176
- sourceHandle?: string | null;
2177
- targetHandle?: string | null;
2178
- animated?: boolean;
2179
- hidden?: boolean;
2180
- deletable?: boolean;
2181
- selectable?: boolean;
2182
- selected?: boolean;
2183
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2184
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2185
- zIndex?: number;
2186
- ariaLabel?: string;
2187
- interactionWidth?: number;
2188
- label?: import('react').ReactNode;
2189
- labelStyle?: import('react').CSSProperties;
2190
- labelShowBg?: boolean;
2191
- labelBgStyle?: import('react').CSSProperties;
2192
- labelBgPadding?: [number, number];
2193
- labelBgBorderRadius?: number;
2194
- style?: import('react').CSSProperties;
2195
- className?: string;
2196
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2197
- focusable?: boolean;
2198
- data: import('..').RelationshipData;
2199
- readonly id: string;
2200
- readonly type: "relationship";
2201
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2202
- source: string;
2203
- target: string;
2204
- sourceHandle?: string | null;
2205
- targetHandle?: string | null;
2206
- animated?: boolean;
2207
- hidden?: boolean;
2208
- deletable?: boolean;
2209
- selectable?: boolean;
2210
- selected?: boolean;
2211
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2212
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2213
- zIndex?: number;
2214
- ariaLabel?: string;
2215
- interactionWidth?: number;
2216
- label?: import('react').ReactNode;
2217
- labelStyle?: import('react').CSSProperties;
2218
- labelShowBg?: boolean;
2219
- labelBgStyle?: import('react').CSSProperties;
2220
- labelBgPadding?: [number, number];
2221
- labelBgBorderRadius?: number;
2222
- style?: import('react').CSSProperties;
2223
- className?: string;
2224
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2225
- focusable?: boolean;
2226
- data: import('..').RelationshipData;
2227
- readonly id: string;
2228
- readonly type: "relationship";
2229
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2230
- source: string;
2231
- target: string;
2232
- sourceHandle?: string | null;
2233
- targetHandle?: string | null;
2234
- animated?: boolean;
2235
- hidden?: boolean;
2236
- deletable?: boolean;
2237
- selectable?: boolean;
2238
- selected?: boolean;
2239
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2240
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2241
- zIndex?: number;
2242
- ariaLabel?: string;
2243
- interactionWidth?: number;
2244
- label?: import('react').ReactNode;
2245
- labelStyle?: import('react').CSSProperties;
2246
- labelShowBg?: boolean;
2247
- labelBgStyle?: import('react').CSSProperties;
2248
- labelBgPadding?: [number, number];
2249
- labelBgBorderRadius?: number;
2250
- style?: import('react').CSSProperties;
2251
- className?: string;
2252
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2253
- focusable?: boolean;
2254
- data: import('..').RelationshipData;
2255
- readonly id: string;
2256
- readonly type: "relationship";
2257
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2258
- source: string;
2259
- target: string;
2260
- sourceHandle?: string | null;
2261
- targetHandle?: string | null;
2262
- animated?: boolean;
2263
- hidden?: boolean;
2264
- deletable?: boolean;
2265
- selectable?: boolean;
2266
- selected?: boolean;
2267
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2268
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2269
- zIndex?: number;
2270
- ariaLabel?: string;
2271
- interactionWidth?: number;
2272
- label?: import('react').ReactNode;
2273
- labelStyle?: import('react').CSSProperties;
2274
- labelShowBg?: boolean;
2275
- labelBgStyle?: import('react').CSSProperties;
2276
- labelBgPadding?: [number, number];
2277
- labelBgBorderRadius?: number;
2278
- style?: import('react').CSSProperties;
2279
- className?: string;
2280
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2281
- focusable?: boolean;
2282
- data: import('..').RelationshipData;
2283
- readonly id: string;
2284
- readonly type: "relationship";
2285
- }>>), replace?: boolean | undefined) => void;
2286
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2287
- source: string;
2288
- target: string;
2289
- sourceHandle?: string | null;
2290
- targetHandle?: string | null;
2291
- animated?: boolean;
2292
- hidden?: boolean;
2293
- deletable?: boolean;
2294
- selectable?: boolean;
2295
- selected?: boolean;
2296
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2297
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2298
- zIndex?: number;
2299
- ariaLabel?: string;
2300
- interactionWidth?: number;
2301
- label?: import('react').ReactNode;
2302
- labelStyle?: import('react').CSSProperties;
2303
- labelShowBg?: boolean;
2304
- labelBgStyle?: import('react').CSSProperties;
2305
- labelBgPadding?: [number, number];
2306
- labelBgBorderRadius?: number;
2307
- style?: import('react').CSSProperties;
2308
- className?: string;
2309
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2310
- focusable?: boolean;
2311
- data: import('..').RelationshipData;
2312
- readonly id: string;
2313
- readonly type: "relationship";
2314
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2315
- source: string;
2316
- target: string;
2317
- sourceHandle?: string | null;
2318
- targetHandle?: string | null;
2319
- animated?: boolean;
2320
- hidden?: boolean;
2321
- deletable?: boolean;
2322
- selectable?: boolean;
2323
- selected?: boolean;
2324
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2325
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2326
- zIndex?: number;
2327
- ariaLabel?: string;
2328
- interactionWidth?: number;
2329
- label?: import('react').ReactNode;
2330
- labelStyle?: import('react').CSSProperties;
2331
- labelShowBg?: boolean;
2332
- labelBgStyle?: import('react').CSSProperties;
2333
- labelBgPadding?: [number, number];
2334
- labelBgBorderRadius?: number;
2335
- style?: import('react').CSSProperties;
2336
- className?: string;
2337
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2338
- focusable?: boolean;
2339
- data: import('..').RelationshipData;
2340
- readonly id: string;
2341
- readonly type: "relationship";
2342
- }>) => void) => () => void;
2343
- }) => void;
2344
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2345
- fitDiagram: (xyStore: {
2346
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2347
- source: string;
2348
- target: string;
2349
- sourceHandle?: string | null;
2350
- targetHandle?: string | null;
2351
- animated?: boolean;
2352
- hidden?: boolean;
2353
- deletable?: boolean;
2354
- selectable?: boolean;
2355
- selected?: boolean;
2356
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2357
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2358
- zIndex?: number;
2359
- ariaLabel?: string;
2360
- interactionWidth?: number;
2361
- label?: import('react').ReactNode;
2362
- labelStyle?: import('react').CSSProperties;
2363
- labelShowBg?: boolean;
2364
- labelBgStyle?: import('react').CSSProperties;
2365
- labelBgPadding?: [number, number];
2366
- labelBgBorderRadius?: number;
2367
- style?: import('react').CSSProperties;
2368
- className?: string;
2369
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2370
- focusable?: boolean;
2371
- data: import('..').RelationshipData;
2372
- readonly id: string;
2373
- readonly type: "relationship";
2374
- }>;
2375
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2376
- source: string;
2377
- target: string;
2378
- sourceHandle?: string | null;
2379
- targetHandle?: string | null;
2380
- animated?: boolean;
2381
- hidden?: boolean;
2382
- deletable?: boolean;
2383
- selectable?: boolean;
2384
- selected?: boolean;
2385
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2386
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2387
- zIndex?: number;
2388
- ariaLabel?: string;
2389
- interactionWidth?: number;
2390
- label?: import('react').ReactNode;
2391
- labelStyle?: import('react').CSSProperties;
2392
- labelShowBg?: boolean;
2393
- labelBgStyle?: import('react').CSSProperties;
2394
- labelBgPadding?: [number, number];
2395
- labelBgBorderRadius?: number;
2396
- style?: import('react').CSSProperties;
2397
- className?: string;
2398
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2399
- focusable?: boolean;
2400
- data: import('..').RelationshipData;
2401
- readonly id: string;
2402
- readonly type: "relationship";
2403
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2404
- source: string;
2405
- target: string;
2406
- sourceHandle?: string | null;
2407
- targetHandle?: string | null;
2408
- animated?: boolean;
2409
- hidden?: boolean;
2410
- deletable?: boolean;
2411
- selectable?: boolean;
2412
- selected?: boolean;
2413
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2414
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2415
- zIndex?: number;
2416
- ariaLabel?: string;
2417
- interactionWidth?: number;
2418
- label?: import('react').ReactNode;
2419
- labelStyle?: import('react').CSSProperties;
2420
- labelShowBg?: boolean;
2421
- labelBgStyle?: import('react').CSSProperties;
2422
- labelBgPadding?: [number, number];
2423
- labelBgBorderRadius?: number;
2424
- style?: import('react').CSSProperties;
2425
- className?: string;
2426
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2427
- focusable?: boolean;
2428
- data: import('..').RelationshipData;
2429
- readonly id: string;
2430
- readonly type: "relationship";
2431
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2432
- source: string;
2433
- target: string;
2434
- sourceHandle?: string | null;
2435
- targetHandle?: string | null;
2436
- animated?: boolean;
2437
- hidden?: boolean;
2438
- deletable?: boolean;
2439
- selectable?: boolean;
2440
- selected?: boolean;
2441
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2442
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2443
- zIndex?: number;
2444
- ariaLabel?: string;
2445
- interactionWidth?: number;
2446
- label?: import('react').ReactNode;
2447
- labelStyle?: import('react').CSSProperties;
2448
- labelShowBg?: boolean;
2449
- labelBgStyle?: import('react').CSSProperties;
2450
- labelBgPadding?: [number, number];
2451
- labelBgBorderRadius?: number;
2452
- style?: import('react').CSSProperties;
2453
- className?: string;
2454
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2455
- focusable?: boolean;
2456
- data: import('..').RelationshipData;
2457
- readonly id: string;
2458
- readonly type: "relationship";
2459
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2460
- source: string;
2461
- target: string;
2462
- sourceHandle?: string | null;
2463
- targetHandle?: string | null;
2464
- animated?: boolean;
2465
- hidden?: boolean;
2466
- deletable?: boolean;
2467
- selectable?: boolean;
2468
- selected?: boolean;
2469
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2470
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2471
- zIndex?: number;
2472
- ariaLabel?: string;
2473
- interactionWidth?: number;
2474
- label?: import('react').ReactNode;
2475
- labelStyle?: import('react').CSSProperties;
2476
- labelShowBg?: boolean;
2477
- labelBgStyle?: import('react').CSSProperties;
2478
- labelBgPadding?: [number, number];
2479
- labelBgBorderRadius?: number;
2480
- style?: import('react').CSSProperties;
2481
- className?: string;
2482
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2483
- focusable?: boolean;
2484
- data: import('..').RelationshipData;
2485
- readonly id: string;
2486
- readonly type: "relationship";
2487
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2488
- source: string;
2489
- target: string;
2490
- sourceHandle?: string | null;
2491
- targetHandle?: string | null;
2492
- animated?: boolean;
2493
- hidden?: boolean;
2494
- deletable?: boolean;
2495
- selectable?: boolean;
2496
- selected?: boolean;
2497
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2498
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2499
- zIndex?: number;
2500
- ariaLabel?: string;
2501
- interactionWidth?: number;
2502
- label?: import('react').ReactNode;
2503
- labelStyle?: import('react').CSSProperties;
2504
- labelShowBg?: boolean;
2505
- labelBgStyle?: import('react').CSSProperties;
2506
- labelBgPadding?: [number, number];
2507
- labelBgBorderRadius?: number;
2508
- style?: import('react').CSSProperties;
2509
- className?: string;
2510
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2511
- focusable?: boolean;
2512
- data: import('..').RelationshipData;
2513
- readonly id: string;
2514
- readonly type: "relationship";
2515
- }>>), replace?: boolean | undefined) => void;
2516
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2517
- source: string;
2518
- target: string;
2519
- sourceHandle?: string | null;
2520
- targetHandle?: string | null;
2521
- animated?: boolean;
2522
- hidden?: boolean;
2523
- deletable?: boolean;
2524
- selectable?: boolean;
2525
- selected?: boolean;
2526
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2527
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2528
- zIndex?: number;
2529
- ariaLabel?: string;
2530
- interactionWidth?: number;
2531
- label?: import('react').ReactNode;
2532
- labelStyle?: import('react').CSSProperties;
2533
- labelShowBg?: boolean;
2534
- labelBgStyle?: import('react').CSSProperties;
2535
- labelBgPadding?: [number, number];
2536
- labelBgBorderRadius?: number;
2537
- style?: import('react').CSSProperties;
2538
- className?: string;
2539
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2540
- focusable?: boolean;
2541
- data: import('..').RelationshipData;
2542
- readonly id: string;
2543
- readonly type: "relationship";
2544
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2545
- source: string;
2546
- target: string;
2547
- sourceHandle?: string | null;
2548
- targetHandle?: string | null;
2549
- animated?: boolean;
2550
- hidden?: boolean;
2551
- deletable?: boolean;
2552
- selectable?: boolean;
2553
- selected?: boolean;
2554
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2555
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2556
- zIndex?: number;
2557
- ariaLabel?: string;
2558
- interactionWidth?: number;
2559
- label?: import('react').ReactNode;
2560
- labelStyle?: import('react').CSSProperties;
2561
- labelShowBg?: boolean;
2562
- labelBgStyle?: import('react').CSSProperties;
2563
- labelBgPadding?: [number, number];
2564
- labelBgBorderRadius?: number;
2565
- style?: import('react').CSSProperties;
2566
- className?: string;
2567
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2568
- focusable?: boolean;
2569
- data: import('..').RelationshipData;
2570
- readonly id: string;
2571
- readonly type: "relationship";
2572
- }>) => void) => () => void;
2573
- }) => void;
2574
- nextDynamicStep: (increment?: number | undefined) => void;
306
+ triggerSaveManualLayout: () => void;
307
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
308
+ fitDiagram: (duration?: number) => void;
309
+ nextDynamicStep: (increment?: number) => void;
2575
310
  stopDynamicView: () => void;
2576
311
  } | Partial<{
312
+ readonly storeDevId: string;
2577
313
  view: import('@likec4/core').DiagramView;
2578
314
  readonly: boolean;
2579
315
  showElementLinks: boolean;
@@ -2584,8 +320,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2584
320
  nodesDraggable: boolean;
2585
321
  nodesSelectable: boolean;
2586
322
  experimentalEdgeEditing: boolean;
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;
@@ -2624,468 +362,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
2624
362
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2625
363
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2626
364
  cancelSaveManualLayout: () => void;
2627
- triggerSaveManualLayout: (xystore: {
2628
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2629
- source: string;
2630
- target: string;
2631
- sourceHandle?: string | null;
2632
- targetHandle?: string | null;
2633
- animated?: boolean;
2634
- hidden?: boolean;
2635
- deletable?: boolean;
2636
- selectable?: boolean;
2637
- selected?: boolean;
2638
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2639
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2640
- zIndex?: number;
2641
- ariaLabel?: string;
2642
- interactionWidth?: number;
2643
- label?: import('react').ReactNode;
2644
- labelStyle?: import('react').CSSProperties;
2645
- labelShowBg?: boolean;
2646
- labelBgStyle?: import('react').CSSProperties;
2647
- labelBgPadding?: [number, number];
2648
- labelBgBorderRadius?: number;
2649
- style?: import('react').CSSProperties;
2650
- className?: string;
2651
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2652
- focusable?: boolean;
2653
- data: import('..').RelationshipData;
2654
- readonly id: string;
2655
- readonly type: "relationship";
2656
- }>;
2657
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2658
- source: string;
2659
- target: string;
2660
- sourceHandle?: string | null;
2661
- targetHandle?: string | null;
2662
- animated?: boolean;
2663
- hidden?: boolean;
2664
- deletable?: boolean;
2665
- selectable?: boolean;
2666
- selected?: boolean;
2667
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2668
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2669
- zIndex?: number;
2670
- ariaLabel?: string;
2671
- interactionWidth?: number;
2672
- label?: import('react').ReactNode;
2673
- labelStyle?: import('react').CSSProperties;
2674
- labelShowBg?: boolean;
2675
- labelBgStyle?: import('react').CSSProperties;
2676
- labelBgPadding?: [number, number];
2677
- labelBgBorderRadius?: number;
2678
- style?: import('react').CSSProperties;
2679
- className?: string;
2680
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2681
- focusable?: boolean;
2682
- data: import('..').RelationshipData;
2683
- readonly id: string;
2684
- readonly type: "relationship";
2685
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2686
- source: string;
2687
- target: string;
2688
- sourceHandle?: string | null;
2689
- targetHandle?: string | null;
2690
- animated?: boolean;
2691
- hidden?: boolean;
2692
- deletable?: boolean;
2693
- selectable?: boolean;
2694
- selected?: boolean;
2695
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2696
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2697
- zIndex?: number;
2698
- ariaLabel?: string;
2699
- interactionWidth?: number;
2700
- label?: import('react').ReactNode;
2701
- labelStyle?: import('react').CSSProperties;
2702
- labelShowBg?: boolean;
2703
- labelBgStyle?: import('react').CSSProperties;
2704
- labelBgPadding?: [number, number];
2705
- labelBgBorderRadius?: number;
2706
- style?: import('react').CSSProperties;
2707
- className?: string;
2708
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2709
- focusable?: boolean;
2710
- data: import('..').RelationshipData;
2711
- readonly id: string;
2712
- readonly type: "relationship";
2713
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2714
- source: string;
2715
- target: string;
2716
- sourceHandle?: string | null;
2717
- targetHandle?: string | null;
2718
- animated?: boolean;
2719
- hidden?: boolean;
2720
- deletable?: boolean;
2721
- selectable?: boolean;
2722
- selected?: boolean;
2723
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2724
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2725
- zIndex?: number;
2726
- ariaLabel?: string;
2727
- interactionWidth?: number;
2728
- label?: import('react').ReactNode;
2729
- labelStyle?: import('react').CSSProperties;
2730
- labelShowBg?: boolean;
2731
- labelBgStyle?: import('react').CSSProperties;
2732
- labelBgPadding?: [number, number];
2733
- labelBgBorderRadius?: number;
2734
- style?: import('react').CSSProperties;
2735
- className?: string;
2736
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2737
- focusable?: boolean;
2738
- data: import('..').RelationshipData;
2739
- readonly id: string;
2740
- readonly type: "relationship";
2741
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2742
- source: string;
2743
- target: string;
2744
- sourceHandle?: string | null;
2745
- targetHandle?: string | null;
2746
- animated?: boolean;
2747
- hidden?: boolean;
2748
- deletable?: boolean;
2749
- selectable?: boolean;
2750
- selected?: boolean;
2751
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2752
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2753
- zIndex?: number;
2754
- ariaLabel?: string;
2755
- interactionWidth?: number;
2756
- label?: import('react').ReactNode;
2757
- labelStyle?: import('react').CSSProperties;
2758
- labelShowBg?: boolean;
2759
- labelBgStyle?: import('react').CSSProperties;
2760
- labelBgPadding?: [number, number];
2761
- labelBgBorderRadius?: number;
2762
- style?: import('react').CSSProperties;
2763
- className?: string;
2764
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2765
- focusable?: boolean;
2766
- data: import('..').RelationshipData;
2767
- readonly id: string;
2768
- readonly type: "relationship";
2769
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2770
- source: string;
2771
- target: string;
2772
- sourceHandle?: string | null;
2773
- targetHandle?: string | null;
2774
- animated?: boolean;
2775
- hidden?: boolean;
2776
- deletable?: boolean;
2777
- selectable?: boolean;
2778
- selected?: boolean;
2779
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2780
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2781
- zIndex?: number;
2782
- ariaLabel?: string;
2783
- interactionWidth?: number;
2784
- label?: import('react').ReactNode;
2785
- labelStyle?: import('react').CSSProperties;
2786
- labelShowBg?: boolean;
2787
- labelBgStyle?: import('react').CSSProperties;
2788
- labelBgPadding?: [number, number];
2789
- labelBgBorderRadius?: number;
2790
- style?: import('react').CSSProperties;
2791
- className?: string;
2792
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2793
- focusable?: boolean;
2794
- data: import('..').RelationshipData;
2795
- readonly id: string;
2796
- readonly type: "relationship";
2797
- }>>), replace?: boolean | undefined) => void;
2798
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2799
- source: string;
2800
- target: string;
2801
- sourceHandle?: string | null;
2802
- targetHandle?: string | null;
2803
- animated?: boolean;
2804
- hidden?: boolean;
2805
- deletable?: boolean;
2806
- selectable?: boolean;
2807
- selected?: boolean;
2808
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2809
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2810
- zIndex?: number;
2811
- ariaLabel?: string;
2812
- interactionWidth?: number;
2813
- label?: import('react').ReactNode;
2814
- labelStyle?: import('react').CSSProperties;
2815
- labelShowBg?: boolean;
2816
- labelBgStyle?: import('react').CSSProperties;
2817
- labelBgPadding?: [number, number];
2818
- labelBgBorderRadius?: number;
2819
- style?: import('react').CSSProperties;
2820
- className?: string;
2821
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2822
- focusable?: boolean;
2823
- data: import('..').RelationshipData;
2824
- readonly id: string;
2825
- readonly type: "relationship";
2826
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2827
- source: string;
2828
- target: string;
2829
- sourceHandle?: string | null;
2830
- targetHandle?: string | null;
2831
- animated?: boolean;
2832
- hidden?: boolean;
2833
- deletable?: boolean;
2834
- selectable?: boolean;
2835
- selected?: boolean;
2836
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2837
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2838
- zIndex?: number;
2839
- ariaLabel?: string;
2840
- interactionWidth?: number;
2841
- label?: import('react').ReactNode;
2842
- labelStyle?: import('react').CSSProperties;
2843
- labelShowBg?: boolean;
2844
- labelBgStyle?: import('react').CSSProperties;
2845
- labelBgPadding?: [number, number];
2846
- labelBgBorderRadius?: number;
2847
- style?: import('react').CSSProperties;
2848
- className?: string;
2849
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2850
- focusable?: boolean;
2851
- data: import('..').RelationshipData;
2852
- readonly id: string;
2853
- readonly type: "relationship";
2854
- }>) => void) => () => void;
2855
- }) => void;
2856
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2857
- fitDiagram: (xyStore: {
2858
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2859
- source: string;
2860
- target: string;
2861
- sourceHandle?: string | null;
2862
- targetHandle?: string | null;
2863
- animated?: boolean;
2864
- hidden?: boolean;
2865
- deletable?: boolean;
2866
- selectable?: boolean;
2867
- selected?: boolean;
2868
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2869
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2870
- zIndex?: number;
2871
- ariaLabel?: string;
2872
- interactionWidth?: number;
2873
- label?: import('react').ReactNode;
2874
- labelStyle?: import('react').CSSProperties;
2875
- labelShowBg?: boolean;
2876
- labelBgStyle?: import('react').CSSProperties;
2877
- labelBgPadding?: [number, number];
2878
- labelBgBorderRadius?: number;
2879
- style?: import('react').CSSProperties;
2880
- className?: string;
2881
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2882
- focusable?: boolean;
2883
- data: import('..').RelationshipData;
2884
- readonly id: string;
2885
- readonly type: "relationship";
2886
- }>;
2887
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2888
- source: string;
2889
- target: string;
2890
- sourceHandle?: string | null;
2891
- targetHandle?: string | null;
2892
- animated?: boolean;
2893
- hidden?: boolean;
2894
- deletable?: boolean;
2895
- selectable?: boolean;
2896
- selected?: boolean;
2897
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2898
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2899
- zIndex?: number;
2900
- ariaLabel?: string;
2901
- interactionWidth?: number;
2902
- label?: import('react').ReactNode;
2903
- labelStyle?: import('react').CSSProperties;
2904
- labelShowBg?: boolean;
2905
- labelBgStyle?: import('react').CSSProperties;
2906
- labelBgPadding?: [number, number];
2907
- labelBgBorderRadius?: number;
2908
- style?: import('react').CSSProperties;
2909
- className?: string;
2910
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2911
- focusable?: boolean;
2912
- data: import('..').RelationshipData;
2913
- readonly id: string;
2914
- readonly type: "relationship";
2915
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2916
- source: string;
2917
- target: string;
2918
- sourceHandle?: string | null;
2919
- targetHandle?: string | null;
2920
- animated?: boolean;
2921
- hidden?: boolean;
2922
- deletable?: boolean;
2923
- selectable?: boolean;
2924
- selected?: boolean;
2925
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2926
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2927
- zIndex?: number;
2928
- ariaLabel?: string;
2929
- interactionWidth?: number;
2930
- label?: import('react').ReactNode;
2931
- labelStyle?: import('react').CSSProperties;
2932
- labelShowBg?: boolean;
2933
- labelBgStyle?: import('react').CSSProperties;
2934
- labelBgPadding?: [number, number];
2935
- labelBgBorderRadius?: number;
2936
- style?: import('react').CSSProperties;
2937
- className?: string;
2938
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2939
- focusable?: boolean;
2940
- data: import('..').RelationshipData;
2941
- readonly id: string;
2942
- readonly type: "relationship";
2943
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2944
- source: string;
2945
- target: string;
2946
- sourceHandle?: string | null;
2947
- targetHandle?: string | null;
2948
- animated?: boolean;
2949
- hidden?: boolean;
2950
- deletable?: boolean;
2951
- selectable?: boolean;
2952
- selected?: boolean;
2953
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2954
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2955
- zIndex?: number;
2956
- ariaLabel?: string;
2957
- interactionWidth?: number;
2958
- label?: import('react').ReactNode;
2959
- labelStyle?: import('react').CSSProperties;
2960
- labelShowBg?: boolean;
2961
- labelBgStyle?: import('react').CSSProperties;
2962
- labelBgPadding?: [number, number];
2963
- labelBgBorderRadius?: number;
2964
- style?: import('react').CSSProperties;
2965
- className?: string;
2966
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2967
- focusable?: boolean;
2968
- data: import('..').RelationshipData;
2969
- readonly id: string;
2970
- readonly type: "relationship";
2971
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2972
- source: string;
2973
- target: string;
2974
- sourceHandle?: string | null;
2975
- targetHandle?: string | null;
2976
- animated?: boolean;
2977
- hidden?: boolean;
2978
- deletable?: boolean;
2979
- selectable?: boolean;
2980
- selected?: boolean;
2981
- markerStart?: import('@xyflow/system').EdgeMarkerType;
2982
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
2983
- zIndex?: number;
2984
- ariaLabel?: string;
2985
- interactionWidth?: number;
2986
- label?: import('react').ReactNode;
2987
- labelStyle?: import('react').CSSProperties;
2988
- labelShowBg?: boolean;
2989
- labelBgStyle?: import('react').CSSProperties;
2990
- labelBgPadding?: [number, number];
2991
- labelBgBorderRadius?: number;
2992
- style?: import('react').CSSProperties;
2993
- className?: string;
2994
- reconnectable?: boolean | import('@xyflow/system').HandleType;
2995
- focusable?: boolean;
2996
- data: import('..').RelationshipData;
2997
- readonly id: string;
2998
- readonly type: "relationship";
2999
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3000
- source: string;
3001
- target: string;
3002
- sourceHandle?: string | null;
3003
- targetHandle?: string | null;
3004
- animated?: boolean;
3005
- hidden?: boolean;
3006
- deletable?: boolean;
3007
- selectable?: boolean;
3008
- selected?: boolean;
3009
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3010
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3011
- zIndex?: number;
3012
- ariaLabel?: string;
3013
- interactionWidth?: number;
3014
- label?: import('react').ReactNode;
3015
- labelStyle?: import('react').CSSProperties;
3016
- labelShowBg?: boolean;
3017
- labelBgStyle?: import('react').CSSProperties;
3018
- labelBgPadding?: [number, number];
3019
- labelBgBorderRadius?: number;
3020
- style?: import('react').CSSProperties;
3021
- className?: string;
3022
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3023
- focusable?: boolean;
3024
- data: import('..').RelationshipData;
3025
- readonly id: string;
3026
- readonly type: "relationship";
3027
- }>>), replace?: boolean | undefined) => void;
3028
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3029
- source: string;
3030
- target: string;
3031
- sourceHandle?: string | null;
3032
- targetHandle?: string | null;
3033
- animated?: boolean;
3034
- hidden?: boolean;
3035
- deletable?: boolean;
3036
- selectable?: boolean;
3037
- selected?: boolean;
3038
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3039
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3040
- zIndex?: number;
3041
- ariaLabel?: string;
3042
- interactionWidth?: number;
3043
- label?: import('react').ReactNode;
3044
- labelStyle?: import('react').CSSProperties;
3045
- labelShowBg?: boolean;
3046
- labelBgStyle?: import('react').CSSProperties;
3047
- labelBgPadding?: [number, number];
3048
- labelBgBorderRadius?: number;
3049
- style?: import('react').CSSProperties;
3050
- className?: string;
3051
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3052
- focusable?: boolean;
3053
- data: import('..').RelationshipData;
3054
- readonly id: string;
3055
- readonly type: "relationship";
3056
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3057
- source: string;
3058
- target: string;
3059
- sourceHandle?: string | null;
3060
- targetHandle?: string | null;
3061
- animated?: boolean;
3062
- hidden?: boolean;
3063
- deletable?: boolean;
3064
- selectable?: boolean;
3065
- selected?: boolean;
3066
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3067
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3068
- zIndex?: number;
3069
- ariaLabel?: string;
3070
- interactionWidth?: number;
3071
- label?: import('react').ReactNode;
3072
- labelStyle?: import('react').CSSProperties;
3073
- labelShowBg?: boolean;
3074
- labelBgStyle?: import('react').CSSProperties;
3075
- labelBgPadding?: [number, number];
3076
- labelBgBorderRadius?: number;
3077
- style?: import('react').CSSProperties;
3078
- className?: string;
3079
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3080
- focusable?: boolean;
3081
- data: import('..').RelationshipData;
3082
- readonly id: string;
3083
- readonly type: "relationship";
3084
- }>) => void) => () => void;
3085
- }) => void;
3086
- nextDynamicStep: (increment?: number | undefined) => void;
365
+ triggerSaveManualLayout: () => void;
366
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
367
+ fitDiagram: (duration?: number) => void;
368
+ nextDynamicStep: (increment?: number) => void;
3087
369
  stopDynamicView: () => void;
3088
370
  }> | ((state: {
371
+ readonly storeDevId: string;
3089
372
  view: import('@likec4/core').DiagramView;
3090
373
  readonly: boolean;
3091
374
  showElementLinks: boolean;
@@ -3096,8 +379,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3096
379
  nodesDraggable: boolean;
3097
380
  nodesSelectable: boolean;
3098
381
  experimentalEdgeEditing: boolean;
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;
@@ -3136,468 +421,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3136
421
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3137
422
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3138
423
  cancelSaveManualLayout: () => void;
3139
- triggerSaveManualLayout: (xystore: {
3140
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3141
- source: string;
3142
- target: string;
3143
- sourceHandle?: string | null;
3144
- targetHandle?: string | null;
3145
- animated?: boolean;
3146
- hidden?: boolean;
3147
- deletable?: boolean;
3148
- selectable?: boolean;
3149
- selected?: boolean;
3150
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3151
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3152
- zIndex?: number;
3153
- ariaLabel?: string;
3154
- interactionWidth?: number;
3155
- label?: import('react').ReactNode;
3156
- labelStyle?: import('react').CSSProperties;
3157
- labelShowBg?: boolean;
3158
- labelBgStyle?: import('react').CSSProperties;
3159
- labelBgPadding?: [number, number];
3160
- labelBgBorderRadius?: number;
3161
- style?: import('react').CSSProperties;
3162
- className?: string;
3163
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3164
- focusable?: boolean;
3165
- data: import('..').RelationshipData;
3166
- readonly id: string;
3167
- readonly type: "relationship";
3168
- }>;
3169
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3170
- source: string;
3171
- target: string;
3172
- sourceHandle?: string | null;
3173
- targetHandle?: string | null;
3174
- animated?: boolean;
3175
- hidden?: boolean;
3176
- deletable?: boolean;
3177
- selectable?: boolean;
3178
- selected?: boolean;
3179
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3180
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3181
- zIndex?: number;
3182
- ariaLabel?: string;
3183
- interactionWidth?: number;
3184
- label?: import('react').ReactNode;
3185
- labelStyle?: import('react').CSSProperties;
3186
- labelShowBg?: boolean;
3187
- labelBgStyle?: import('react').CSSProperties;
3188
- labelBgPadding?: [number, number];
3189
- labelBgBorderRadius?: number;
3190
- style?: import('react').CSSProperties;
3191
- className?: string;
3192
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3193
- focusable?: boolean;
3194
- data: import('..').RelationshipData;
3195
- readonly id: string;
3196
- readonly type: "relationship";
3197
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3198
- source: string;
3199
- target: string;
3200
- sourceHandle?: string | null;
3201
- targetHandle?: string | null;
3202
- animated?: boolean;
3203
- hidden?: boolean;
3204
- deletable?: boolean;
3205
- selectable?: boolean;
3206
- selected?: boolean;
3207
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3208
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3209
- zIndex?: number;
3210
- ariaLabel?: string;
3211
- interactionWidth?: number;
3212
- label?: import('react').ReactNode;
3213
- labelStyle?: import('react').CSSProperties;
3214
- labelShowBg?: boolean;
3215
- labelBgStyle?: import('react').CSSProperties;
3216
- labelBgPadding?: [number, number];
3217
- labelBgBorderRadius?: number;
3218
- style?: import('react').CSSProperties;
3219
- className?: string;
3220
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3221
- focusable?: boolean;
3222
- data: import('..').RelationshipData;
3223
- readonly id: string;
3224
- readonly type: "relationship";
3225
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3226
- source: string;
3227
- target: string;
3228
- sourceHandle?: string | null;
3229
- targetHandle?: string | null;
3230
- animated?: boolean;
3231
- hidden?: boolean;
3232
- deletable?: boolean;
3233
- selectable?: boolean;
3234
- selected?: boolean;
3235
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3236
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3237
- zIndex?: number;
3238
- ariaLabel?: string;
3239
- interactionWidth?: number;
3240
- label?: import('react').ReactNode;
3241
- labelStyle?: import('react').CSSProperties;
3242
- labelShowBg?: boolean;
3243
- labelBgStyle?: import('react').CSSProperties;
3244
- labelBgPadding?: [number, number];
3245
- labelBgBorderRadius?: number;
3246
- style?: import('react').CSSProperties;
3247
- className?: string;
3248
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3249
- focusable?: boolean;
3250
- data: import('..').RelationshipData;
3251
- readonly id: string;
3252
- readonly type: "relationship";
3253
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3254
- source: string;
3255
- target: string;
3256
- sourceHandle?: string | null;
3257
- targetHandle?: string | null;
3258
- animated?: boolean;
3259
- hidden?: boolean;
3260
- deletable?: boolean;
3261
- selectable?: boolean;
3262
- selected?: boolean;
3263
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3264
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3265
- zIndex?: number;
3266
- ariaLabel?: string;
3267
- interactionWidth?: number;
3268
- label?: import('react').ReactNode;
3269
- labelStyle?: import('react').CSSProperties;
3270
- labelShowBg?: boolean;
3271
- labelBgStyle?: import('react').CSSProperties;
3272
- labelBgPadding?: [number, number];
3273
- labelBgBorderRadius?: number;
3274
- style?: import('react').CSSProperties;
3275
- className?: string;
3276
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3277
- focusable?: boolean;
3278
- data: import('..').RelationshipData;
3279
- readonly id: string;
3280
- readonly type: "relationship";
3281
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3282
- source: string;
3283
- target: string;
3284
- sourceHandle?: string | null;
3285
- targetHandle?: string | null;
3286
- animated?: boolean;
3287
- hidden?: boolean;
3288
- deletable?: boolean;
3289
- selectable?: boolean;
3290
- selected?: boolean;
3291
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3292
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3293
- zIndex?: number;
3294
- ariaLabel?: string;
3295
- interactionWidth?: number;
3296
- label?: import('react').ReactNode;
3297
- labelStyle?: import('react').CSSProperties;
3298
- labelShowBg?: boolean;
3299
- labelBgStyle?: import('react').CSSProperties;
3300
- labelBgPadding?: [number, number];
3301
- labelBgBorderRadius?: number;
3302
- style?: import('react').CSSProperties;
3303
- className?: string;
3304
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3305
- focusable?: boolean;
3306
- data: import('..').RelationshipData;
3307
- readonly id: string;
3308
- readonly type: "relationship";
3309
- }>>), replace?: boolean | undefined) => void;
3310
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3311
- source: string;
3312
- target: string;
3313
- sourceHandle?: string | null;
3314
- targetHandle?: string | null;
3315
- animated?: boolean;
3316
- hidden?: boolean;
3317
- deletable?: boolean;
3318
- selectable?: boolean;
3319
- selected?: boolean;
3320
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3321
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3322
- zIndex?: number;
3323
- ariaLabel?: string;
3324
- interactionWidth?: number;
3325
- label?: import('react').ReactNode;
3326
- labelStyle?: import('react').CSSProperties;
3327
- labelShowBg?: boolean;
3328
- labelBgStyle?: import('react').CSSProperties;
3329
- labelBgPadding?: [number, number];
3330
- labelBgBorderRadius?: number;
3331
- style?: import('react').CSSProperties;
3332
- className?: string;
3333
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3334
- focusable?: boolean;
3335
- data: import('..').RelationshipData;
3336
- readonly id: string;
3337
- readonly type: "relationship";
3338
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3339
- source: string;
3340
- target: string;
3341
- sourceHandle?: string | null;
3342
- targetHandle?: string | null;
3343
- animated?: boolean;
3344
- hidden?: boolean;
3345
- deletable?: boolean;
3346
- selectable?: boolean;
3347
- selected?: boolean;
3348
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3349
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3350
- zIndex?: number;
3351
- ariaLabel?: string;
3352
- interactionWidth?: number;
3353
- label?: import('react').ReactNode;
3354
- labelStyle?: import('react').CSSProperties;
3355
- labelShowBg?: boolean;
3356
- labelBgStyle?: import('react').CSSProperties;
3357
- labelBgPadding?: [number, number];
3358
- labelBgBorderRadius?: number;
3359
- style?: import('react').CSSProperties;
3360
- className?: string;
3361
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3362
- focusable?: boolean;
3363
- data: import('..').RelationshipData;
3364
- readonly id: string;
3365
- readonly type: "relationship";
3366
- }>) => void) => () => void;
3367
- }) => void;
3368
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3369
- fitDiagram: (xyStore: {
3370
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3371
- source: string;
3372
- target: string;
3373
- sourceHandle?: string | null;
3374
- targetHandle?: string | null;
3375
- animated?: boolean;
3376
- hidden?: boolean;
3377
- deletable?: boolean;
3378
- selectable?: boolean;
3379
- selected?: boolean;
3380
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3381
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3382
- zIndex?: number;
3383
- ariaLabel?: string;
3384
- interactionWidth?: number;
3385
- label?: import('react').ReactNode;
3386
- labelStyle?: import('react').CSSProperties;
3387
- labelShowBg?: boolean;
3388
- labelBgStyle?: import('react').CSSProperties;
3389
- labelBgPadding?: [number, number];
3390
- labelBgBorderRadius?: number;
3391
- style?: import('react').CSSProperties;
3392
- className?: string;
3393
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3394
- focusable?: boolean;
3395
- data: import('..').RelationshipData;
3396
- readonly id: string;
3397
- readonly type: "relationship";
3398
- }>;
3399
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3400
- source: string;
3401
- target: string;
3402
- sourceHandle?: string | null;
3403
- targetHandle?: string | null;
3404
- animated?: boolean;
3405
- hidden?: boolean;
3406
- deletable?: boolean;
3407
- selectable?: boolean;
3408
- selected?: boolean;
3409
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3410
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3411
- zIndex?: number;
3412
- ariaLabel?: string;
3413
- interactionWidth?: number;
3414
- label?: import('react').ReactNode;
3415
- labelStyle?: import('react').CSSProperties;
3416
- labelShowBg?: boolean;
3417
- labelBgStyle?: import('react').CSSProperties;
3418
- labelBgPadding?: [number, number];
3419
- labelBgBorderRadius?: number;
3420
- style?: import('react').CSSProperties;
3421
- className?: string;
3422
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3423
- focusable?: boolean;
3424
- data: import('..').RelationshipData;
3425
- readonly id: string;
3426
- readonly type: "relationship";
3427
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3428
- source: string;
3429
- target: string;
3430
- sourceHandle?: string | null;
3431
- targetHandle?: string | null;
3432
- animated?: boolean;
3433
- hidden?: boolean;
3434
- deletable?: boolean;
3435
- selectable?: boolean;
3436
- selected?: boolean;
3437
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3438
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3439
- zIndex?: number;
3440
- ariaLabel?: string;
3441
- interactionWidth?: number;
3442
- label?: import('react').ReactNode;
3443
- labelStyle?: import('react').CSSProperties;
3444
- labelShowBg?: boolean;
3445
- labelBgStyle?: import('react').CSSProperties;
3446
- labelBgPadding?: [number, number];
3447
- labelBgBorderRadius?: number;
3448
- style?: import('react').CSSProperties;
3449
- className?: string;
3450
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3451
- focusable?: boolean;
3452
- data: import('..').RelationshipData;
3453
- readonly id: string;
3454
- readonly type: "relationship";
3455
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3456
- source: string;
3457
- target: string;
3458
- sourceHandle?: string | null;
3459
- targetHandle?: string | null;
3460
- animated?: boolean;
3461
- hidden?: boolean;
3462
- deletable?: boolean;
3463
- selectable?: boolean;
3464
- selected?: boolean;
3465
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3466
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3467
- zIndex?: number;
3468
- ariaLabel?: string;
3469
- interactionWidth?: number;
3470
- label?: import('react').ReactNode;
3471
- labelStyle?: import('react').CSSProperties;
3472
- labelShowBg?: boolean;
3473
- labelBgStyle?: import('react').CSSProperties;
3474
- labelBgPadding?: [number, number];
3475
- labelBgBorderRadius?: number;
3476
- style?: import('react').CSSProperties;
3477
- className?: string;
3478
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3479
- focusable?: boolean;
3480
- data: import('..').RelationshipData;
3481
- readonly id: string;
3482
- readonly type: "relationship";
3483
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3484
- source: string;
3485
- target: string;
3486
- sourceHandle?: string | null;
3487
- targetHandle?: string | null;
3488
- animated?: boolean;
3489
- hidden?: boolean;
3490
- deletable?: boolean;
3491
- selectable?: boolean;
3492
- selected?: boolean;
3493
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3494
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3495
- zIndex?: number;
3496
- ariaLabel?: string;
3497
- interactionWidth?: number;
3498
- label?: import('react').ReactNode;
3499
- labelStyle?: import('react').CSSProperties;
3500
- labelShowBg?: boolean;
3501
- labelBgStyle?: import('react').CSSProperties;
3502
- labelBgPadding?: [number, number];
3503
- labelBgBorderRadius?: number;
3504
- style?: import('react').CSSProperties;
3505
- className?: string;
3506
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3507
- focusable?: boolean;
3508
- data: import('..').RelationshipData;
3509
- readonly id: string;
3510
- readonly type: "relationship";
3511
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3512
- source: string;
3513
- target: string;
3514
- sourceHandle?: string | null;
3515
- targetHandle?: string | null;
3516
- animated?: boolean;
3517
- hidden?: boolean;
3518
- deletable?: boolean;
3519
- selectable?: boolean;
3520
- selected?: boolean;
3521
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3522
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3523
- zIndex?: number;
3524
- ariaLabel?: string;
3525
- interactionWidth?: number;
3526
- label?: import('react').ReactNode;
3527
- labelStyle?: import('react').CSSProperties;
3528
- labelShowBg?: boolean;
3529
- labelBgStyle?: import('react').CSSProperties;
3530
- labelBgPadding?: [number, number];
3531
- labelBgBorderRadius?: number;
3532
- style?: import('react').CSSProperties;
3533
- className?: string;
3534
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3535
- focusable?: boolean;
3536
- data: import('..').RelationshipData;
3537
- readonly id: string;
3538
- readonly type: "relationship";
3539
- }>>), replace?: boolean | undefined) => void;
3540
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3541
- source: string;
3542
- target: string;
3543
- sourceHandle?: string | null;
3544
- targetHandle?: string | null;
3545
- animated?: boolean;
3546
- hidden?: boolean;
3547
- deletable?: boolean;
3548
- selectable?: boolean;
3549
- selected?: boolean;
3550
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3551
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3552
- zIndex?: number;
3553
- ariaLabel?: string;
3554
- interactionWidth?: number;
3555
- label?: import('react').ReactNode;
3556
- labelStyle?: import('react').CSSProperties;
3557
- labelShowBg?: boolean;
3558
- labelBgStyle?: import('react').CSSProperties;
3559
- labelBgPadding?: [number, number];
3560
- labelBgBorderRadius?: number;
3561
- style?: import('react').CSSProperties;
3562
- className?: string;
3563
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3564
- focusable?: boolean;
3565
- data: import('..').RelationshipData;
3566
- readonly id: string;
3567
- readonly type: "relationship";
3568
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3569
- source: string;
3570
- target: string;
3571
- sourceHandle?: string | null;
3572
- targetHandle?: string | null;
3573
- animated?: boolean;
3574
- hidden?: boolean;
3575
- deletable?: boolean;
3576
- selectable?: boolean;
3577
- selected?: boolean;
3578
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3579
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3580
- zIndex?: number;
3581
- ariaLabel?: string;
3582
- interactionWidth?: number;
3583
- label?: import('react').ReactNode;
3584
- labelStyle?: import('react').CSSProperties;
3585
- labelShowBg?: boolean;
3586
- labelBgStyle?: import('react').CSSProperties;
3587
- labelBgPadding?: [number, number];
3588
- labelBgBorderRadius?: number;
3589
- style?: import('react').CSSProperties;
3590
- className?: string;
3591
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3592
- focusable?: boolean;
3593
- data: import('..').RelationshipData;
3594
- readonly id: string;
3595
- readonly type: "relationship";
3596
- }>) => void) => () => void;
3597
- }) => void;
3598
- nextDynamicStep: (increment?: number | undefined) => void;
424
+ triggerSaveManualLayout: () => void;
425
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
426
+ fitDiagram: (duration?: number) => void;
427
+ nextDynamicStep: (increment?: number) => void;
3599
428
  stopDynamicView: () => void;
3600
429
  }) => {
430
+ readonly storeDevId: string;
3601
431
  view: import('@likec4/core').DiagramView;
3602
432
  readonly: boolean;
3603
433
  showElementLinks: boolean;
@@ -3608,8 +438,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3608
438
  nodesDraggable: boolean;
3609
439
  nodesSelectable: boolean;
3610
440
  experimentalEdgeEditing: boolean;
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;
@@ -3648,468 +480,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
3648
480
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3649
481
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3650
482
  cancelSaveManualLayout: () => void;
3651
- triggerSaveManualLayout: (xystore: {
3652
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3653
- source: string;
3654
- target: string;
3655
- sourceHandle?: string | null;
3656
- targetHandle?: string | null;
3657
- animated?: boolean;
3658
- hidden?: boolean;
3659
- deletable?: boolean;
3660
- selectable?: boolean;
3661
- selected?: boolean;
3662
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3663
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3664
- zIndex?: number;
3665
- ariaLabel?: string;
3666
- interactionWidth?: number;
3667
- label?: import('react').ReactNode;
3668
- labelStyle?: import('react').CSSProperties;
3669
- labelShowBg?: boolean;
3670
- labelBgStyle?: import('react').CSSProperties;
3671
- labelBgPadding?: [number, number];
3672
- labelBgBorderRadius?: number;
3673
- style?: import('react').CSSProperties;
3674
- className?: string;
3675
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3676
- focusable?: boolean;
3677
- data: import('..').RelationshipData;
3678
- readonly id: string;
3679
- readonly type: "relationship";
3680
- }>;
3681
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3682
- source: string;
3683
- target: string;
3684
- sourceHandle?: string | null;
3685
- targetHandle?: string | null;
3686
- animated?: boolean;
3687
- hidden?: boolean;
3688
- deletable?: boolean;
3689
- selectable?: boolean;
3690
- selected?: boolean;
3691
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3692
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3693
- zIndex?: number;
3694
- ariaLabel?: string;
3695
- interactionWidth?: number;
3696
- label?: import('react').ReactNode;
3697
- labelStyle?: import('react').CSSProperties;
3698
- labelShowBg?: boolean;
3699
- labelBgStyle?: import('react').CSSProperties;
3700
- labelBgPadding?: [number, number];
3701
- labelBgBorderRadius?: number;
3702
- style?: import('react').CSSProperties;
3703
- className?: string;
3704
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3705
- focusable?: boolean;
3706
- data: import('..').RelationshipData;
3707
- readonly id: string;
3708
- readonly type: "relationship";
3709
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3710
- source: string;
3711
- target: string;
3712
- sourceHandle?: string | null;
3713
- targetHandle?: string | null;
3714
- animated?: boolean;
3715
- hidden?: boolean;
3716
- deletable?: boolean;
3717
- selectable?: boolean;
3718
- selected?: boolean;
3719
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3720
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3721
- zIndex?: number;
3722
- ariaLabel?: string;
3723
- interactionWidth?: number;
3724
- label?: import('react').ReactNode;
3725
- labelStyle?: import('react').CSSProperties;
3726
- labelShowBg?: boolean;
3727
- labelBgStyle?: import('react').CSSProperties;
3728
- labelBgPadding?: [number, number];
3729
- labelBgBorderRadius?: number;
3730
- style?: import('react').CSSProperties;
3731
- className?: string;
3732
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3733
- focusable?: boolean;
3734
- data: import('..').RelationshipData;
3735
- readonly id: string;
3736
- readonly type: "relationship";
3737
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3738
- source: string;
3739
- target: string;
3740
- sourceHandle?: string | null;
3741
- targetHandle?: string | null;
3742
- animated?: boolean;
3743
- hidden?: boolean;
3744
- deletable?: boolean;
3745
- selectable?: boolean;
3746
- selected?: boolean;
3747
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3748
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3749
- zIndex?: number;
3750
- ariaLabel?: string;
3751
- interactionWidth?: number;
3752
- label?: import('react').ReactNode;
3753
- labelStyle?: import('react').CSSProperties;
3754
- labelShowBg?: boolean;
3755
- labelBgStyle?: import('react').CSSProperties;
3756
- labelBgPadding?: [number, number];
3757
- labelBgBorderRadius?: number;
3758
- style?: import('react').CSSProperties;
3759
- className?: string;
3760
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3761
- focusable?: boolean;
3762
- data: import('..').RelationshipData;
3763
- readonly id: string;
3764
- readonly type: "relationship";
3765
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3766
- source: string;
3767
- target: string;
3768
- sourceHandle?: string | null;
3769
- targetHandle?: string | null;
3770
- animated?: boolean;
3771
- hidden?: boolean;
3772
- deletable?: boolean;
3773
- selectable?: boolean;
3774
- selected?: boolean;
3775
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3776
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3777
- zIndex?: number;
3778
- ariaLabel?: string;
3779
- interactionWidth?: number;
3780
- label?: import('react').ReactNode;
3781
- labelStyle?: import('react').CSSProperties;
3782
- labelShowBg?: boolean;
3783
- labelBgStyle?: import('react').CSSProperties;
3784
- labelBgPadding?: [number, number];
3785
- labelBgBorderRadius?: number;
3786
- style?: import('react').CSSProperties;
3787
- className?: string;
3788
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3789
- focusable?: boolean;
3790
- data: import('..').RelationshipData;
3791
- readonly id: string;
3792
- readonly type: "relationship";
3793
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3794
- source: string;
3795
- target: string;
3796
- sourceHandle?: string | null;
3797
- targetHandle?: string | null;
3798
- animated?: boolean;
3799
- hidden?: boolean;
3800
- deletable?: boolean;
3801
- selectable?: boolean;
3802
- selected?: boolean;
3803
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3804
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3805
- zIndex?: number;
3806
- ariaLabel?: string;
3807
- interactionWidth?: number;
3808
- label?: import('react').ReactNode;
3809
- labelStyle?: import('react').CSSProperties;
3810
- labelShowBg?: boolean;
3811
- labelBgStyle?: import('react').CSSProperties;
3812
- labelBgPadding?: [number, number];
3813
- labelBgBorderRadius?: number;
3814
- style?: import('react').CSSProperties;
3815
- className?: string;
3816
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3817
- focusable?: boolean;
3818
- data: import('..').RelationshipData;
3819
- readonly id: string;
3820
- readonly type: "relationship";
3821
- }>>), replace?: boolean | undefined) => void;
3822
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3823
- source: string;
3824
- target: string;
3825
- sourceHandle?: string | null;
3826
- targetHandle?: string | null;
3827
- animated?: boolean;
3828
- hidden?: boolean;
3829
- deletable?: boolean;
3830
- selectable?: boolean;
3831
- selected?: boolean;
3832
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3833
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3834
- zIndex?: number;
3835
- ariaLabel?: string;
3836
- interactionWidth?: number;
3837
- label?: import('react').ReactNode;
3838
- labelStyle?: import('react').CSSProperties;
3839
- labelShowBg?: boolean;
3840
- labelBgStyle?: import('react').CSSProperties;
3841
- labelBgPadding?: [number, number];
3842
- labelBgBorderRadius?: number;
3843
- style?: import('react').CSSProperties;
3844
- className?: string;
3845
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3846
- focusable?: boolean;
3847
- data: import('..').RelationshipData;
3848
- readonly id: string;
3849
- readonly type: "relationship";
3850
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3851
- source: string;
3852
- target: string;
3853
- sourceHandle?: string | null;
3854
- targetHandle?: string | null;
3855
- animated?: boolean;
3856
- hidden?: boolean;
3857
- deletable?: boolean;
3858
- selectable?: boolean;
3859
- selected?: boolean;
3860
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3861
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3862
- zIndex?: number;
3863
- ariaLabel?: string;
3864
- interactionWidth?: number;
3865
- label?: import('react').ReactNode;
3866
- labelStyle?: import('react').CSSProperties;
3867
- labelShowBg?: boolean;
3868
- labelBgStyle?: import('react').CSSProperties;
3869
- labelBgPadding?: [number, number];
3870
- labelBgBorderRadius?: number;
3871
- style?: import('react').CSSProperties;
3872
- className?: string;
3873
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3874
- focusable?: boolean;
3875
- data: import('..').RelationshipData;
3876
- readonly id: string;
3877
- readonly type: "relationship";
3878
- }>) => void) => () => void;
3879
- }) => void;
3880
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3881
- fitDiagram: (xyStore: {
3882
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3883
- source: string;
3884
- target: string;
3885
- sourceHandle?: string | null;
3886
- targetHandle?: string | null;
3887
- animated?: boolean;
3888
- hidden?: boolean;
3889
- deletable?: boolean;
3890
- selectable?: boolean;
3891
- selected?: boolean;
3892
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3893
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3894
- zIndex?: number;
3895
- ariaLabel?: string;
3896
- interactionWidth?: number;
3897
- label?: import('react').ReactNode;
3898
- labelStyle?: import('react').CSSProperties;
3899
- labelShowBg?: boolean;
3900
- labelBgStyle?: import('react').CSSProperties;
3901
- labelBgPadding?: [number, number];
3902
- labelBgBorderRadius?: number;
3903
- style?: import('react').CSSProperties;
3904
- className?: string;
3905
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3906
- focusable?: boolean;
3907
- data: import('..').RelationshipData;
3908
- readonly id: string;
3909
- readonly type: "relationship";
3910
- }>;
3911
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3912
- source: string;
3913
- target: string;
3914
- sourceHandle?: string | null;
3915
- targetHandle?: string | null;
3916
- animated?: boolean;
3917
- hidden?: boolean;
3918
- deletable?: boolean;
3919
- selectable?: boolean;
3920
- selected?: boolean;
3921
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3922
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3923
- zIndex?: number;
3924
- ariaLabel?: string;
3925
- interactionWidth?: number;
3926
- label?: import('react').ReactNode;
3927
- labelStyle?: import('react').CSSProperties;
3928
- labelShowBg?: boolean;
3929
- labelBgStyle?: import('react').CSSProperties;
3930
- labelBgPadding?: [number, number];
3931
- labelBgBorderRadius?: number;
3932
- style?: import('react').CSSProperties;
3933
- className?: string;
3934
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3935
- focusable?: boolean;
3936
- data: import('..').RelationshipData;
3937
- readonly id: string;
3938
- readonly type: "relationship";
3939
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3940
- source: string;
3941
- target: string;
3942
- sourceHandle?: string | null;
3943
- targetHandle?: string | null;
3944
- animated?: boolean;
3945
- hidden?: boolean;
3946
- deletable?: boolean;
3947
- selectable?: boolean;
3948
- selected?: boolean;
3949
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3950
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3951
- zIndex?: number;
3952
- ariaLabel?: string;
3953
- interactionWidth?: number;
3954
- label?: import('react').ReactNode;
3955
- labelStyle?: import('react').CSSProperties;
3956
- labelShowBg?: boolean;
3957
- labelBgStyle?: import('react').CSSProperties;
3958
- labelBgPadding?: [number, number];
3959
- labelBgBorderRadius?: number;
3960
- style?: import('react').CSSProperties;
3961
- className?: string;
3962
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3963
- focusable?: boolean;
3964
- data: import('..').RelationshipData;
3965
- readonly id: string;
3966
- readonly type: "relationship";
3967
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3968
- source: string;
3969
- target: string;
3970
- sourceHandle?: string | null;
3971
- targetHandle?: string | null;
3972
- animated?: boolean;
3973
- hidden?: boolean;
3974
- deletable?: boolean;
3975
- selectable?: boolean;
3976
- selected?: boolean;
3977
- markerStart?: import('@xyflow/system').EdgeMarkerType;
3978
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
3979
- zIndex?: number;
3980
- ariaLabel?: string;
3981
- interactionWidth?: number;
3982
- label?: import('react').ReactNode;
3983
- labelStyle?: import('react').CSSProperties;
3984
- labelShowBg?: boolean;
3985
- labelBgStyle?: import('react').CSSProperties;
3986
- labelBgPadding?: [number, number];
3987
- labelBgBorderRadius?: number;
3988
- style?: import('react').CSSProperties;
3989
- className?: string;
3990
- reconnectable?: boolean | import('@xyflow/system').HandleType;
3991
- focusable?: boolean;
3992
- data: import('..').RelationshipData;
3993
- readonly id: string;
3994
- readonly type: "relationship";
3995
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3996
- source: string;
3997
- target: string;
3998
- sourceHandle?: string | null;
3999
- targetHandle?: string | null;
4000
- animated?: boolean;
4001
- hidden?: boolean;
4002
- deletable?: boolean;
4003
- selectable?: boolean;
4004
- selected?: boolean;
4005
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4006
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4007
- zIndex?: number;
4008
- ariaLabel?: string;
4009
- interactionWidth?: number;
4010
- label?: import('react').ReactNode;
4011
- labelStyle?: import('react').CSSProperties;
4012
- labelShowBg?: boolean;
4013
- labelBgStyle?: import('react').CSSProperties;
4014
- labelBgPadding?: [number, number];
4015
- labelBgBorderRadius?: number;
4016
- style?: import('react').CSSProperties;
4017
- className?: string;
4018
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4019
- focusable?: boolean;
4020
- data: import('..').RelationshipData;
4021
- readonly id: string;
4022
- readonly type: "relationship";
4023
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4024
- source: string;
4025
- target: string;
4026
- sourceHandle?: string | null;
4027
- targetHandle?: string | null;
4028
- animated?: boolean;
4029
- hidden?: boolean;
4030
- deletable?: boolean;
4031
- selectable?: boolean;
4032
- selected?: boolean;
4033
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4034
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4035
- zIndex?: number;
4036
- ariaLabel?: string;
4037
- interactionWidth?: number;
4038
- label?: import('react').ReactNode;
4039
- labelStyle?: import('react').CSSProperties;
4040
- labelShowBg?: boolean;
4041
- labelBgStyle?: import('react').CSSProperties;
4042
- labelBgPadding?: [number, number];
4043
- labelBgBorderRadius?: number;
4044
- style?: import('react').CSSProperties;
4045
- className?: string;
4046
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4047
- focusable?: boolean;
4048
- data: import('..').RelationshipData;
4049
- readonly id: string;
4050
- readonly type: "relationship";
4051
- }>>), replace?: boolean | undefined) => void;
4052
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4053
- source: string;
4054
- target: string;
4055
- sourceHandle?: string | null;
4056
- targetHandle?: string | null;
4057
- animated?: boolean;
4058
- hidden?: boolean;
4059
- deletable?: boolean;
4060
- selectable?: boolean;
4061
- selected?: boolean;
4062
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4063
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4064
- zIndex?: number;
4065
- ariaLabel?: string;
4066
- interactionWidth?: number;
4067
- label?: import('react').ReactNode;
4068
- labelStyle?: import('react').CSSProperties;
4069
- labelShowBg?: boolean;
4070
- labelBgStyle?: import('react').CSSProperties;
4071
- labelBgPadding?: [number, number];
4072
- labelBgBorderRadius?: number;
4073
- style?: import('react').CSSProperties;
4074
- className?: string;
4075
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4076
- focusable?: boolean;
4077
- data: import('..').RelationshipData;
4078
- readonly id: string;
4079
- readonly type: "relationship";
4080
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4081
- source: string;
4082
- target: string;
4083
- sourceHandle?: string | null;
4084
- targetHandle?: string | null;
4085
- animated?: boolean;
4086
- hidden?: boolean;
4087
- deletable?: boolean;
4088
- selectable?: boolean;
4089
- selected?: boolean;
4090
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4091
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4092
- zIndex?: number;
4093
- ariaLabel?: string;
4094
- interactionWidth?: number;
4095
- label?: import('react').ReactNode;
4096
- labelStyle?: import('react').CSSProperties;
4097
- labelShowBg?: boolean;
4098
- labelBgStyle?: import('react').CSSProperties;
4099
- labelBgPadding?: [number, number];
4100
- labelBgBorderRadius?: number;
4101
- style?: import('react').CSSProperties;
4102
- className?: string;
4103
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4104
- focusable?: boolean;
4105
- data: import('..').RelationshipData;
4106
- readonly id: string;
4107
- readonly type: "relationship";
4108
- }>) => void) => () => void;
4109
- }) => void;
4110
- nextDynamicStep: (increment?: number | undefined) => void;
483
+ triggerSaveManualLayout: () => void;
484
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
485
+ fitDiagram: (duration?: number) => void;
486
+ nextDynamicStep: (increment?: number) => void;
4111
487
  stopDynamicView: () => void;
4112
488
  } | Partial<{
489
+ readonly storeDevId: string;
4113
490
  view: import('@likec4/core').DiagramView;
4114
491
  readonly: boolean;
4115
492
  showElementLinks: boolean;
@@ -4120,8 +497,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
4120
497
  nodesDraggable: boolean;
4121
498
  nodesSelectable: boolean;
4122
499
  experimentalEdgeEditing: boolean;
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;
@@ -4160,467 +539,15 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
4160
539
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
4161
540
  triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
4162
541
  cancelSaveManualLayout: () => void;
4163
- triggerSaveManualLayout: (xystore: {
4164
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4165
- source: string;
4166
- target: string;
4167
- sourceHandle?: string | null;
4168
- targetHandle?: string | null;
4169
- animated?: boolean;
4170
- hidden?: boolean;
4171
- deletable?: boolean;
4172
- selectable?: boolean;
4173
- selected?: boolean;
4174
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4175
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4176
- zIndex?: number;
4177
- ariaLabel?: string;
4178
- interactionWidth?: number;
4179
- label?: import('react').ReactNode;
4180
- labelStyle?: import('react').CSSProperties;
4181
- labelShowBg?: boolean;
4182
- labelBgStyle?: import('react').CSSProperties;
4183
- labelBgPadding?: [number, number];
4184
- labelBgBorderRadius?: number;
4185
- style?: import('react').CSSProperties;
4186
- className?: string;
4187
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4188
- focusable?: boolean;
4189
- data: import('..').RelationshipData;
4190
- readonly id: string;
4191
- readonly type: "relationship";
4192
- }>;
4193
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4194
- source: string;
4195
- target: string;
4196
- sourceHandle?: string | null;
4197
- targetHandle?: string | null;
4198
- animated?: boolean;
4199
- hidden?: boolean;
4200
- deletable?: boolean;
4201
- selectable?: boolean;
4202
- selected?: boolean;
4203
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4204
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4205
- zIndex?: number;
4206
- ariaLabel?: string;
4207
- interactionWidth?: number;
4208
- label?: import('react').ReactNode;
4209
- labelStyle?: import('react').CSSProperties;
4210
- labelShowBg?: boolean;
4211
- labelBgStyle?: import('react').CSSProperties;
4212
- labelBgPadding?: [number, number];
4213
- labelBgBorderRadius?: number;
4214
- style?: import('react').CSSProperties;
4215
- className?: string;
4216
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4217
- focusable?: boolean;
4218
- data: import('..').RelationshipData;
4219
- readonly id: string;
4220
- readonly type: "relationship";
4221
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4222
- source: string;
4223
- target: string;
4224
- sourceHandle?: string | null;
4225
- targetHandle?: string | null;
4226
- animated?: boolean;
4227
- hidden?: boolean;
4228
- deletable?: boolean;
4229
- selectable?: boolean;
4230
- selected?: boolean;
4231
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4232
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4233
- zIndex?: number;
4234
- ariaLabel?: string;
4235
- interactionWidth?: number;
4236
- label?: import('react').ReactNode;
4237
- labelStyle?: import('react').CSSProperties;
4238
- labelShowBg?: boolean;
4239
- labelBgStyle?: import('react').CSSProperties;
4240
- labelBgPadding?: [number, number];
4241
- labelBgBorderRadius?: number;
4242
- style?: import('react').CSSProperties;
4243
- className?: string;
4244
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4245
- focusable?: boolean;
4246
- data: import('..').RelationshipData;
4247
- readonly id: string;
4248
- readonly type: "relationship";
4249
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4250
- source: string;
4251
- target: string;
4252
- sourceHandle?: string | null;
4253
- targetHandle?: string | null;
4254
- animated?: boolean;
4255
- hidden?: boolean;
4256
- deletable?: boolean;
4257
- selectable?: boolean;
4258
- selected?: boolean;
4259
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4260
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4261
- zIndex?: number;
4262
- ariaLabel?: string;
4263
- interactionWidth?: number;
4264
- label?: import('react').ReactNode;
4265
- labelStyle?: import('react').CSSProperties;
4266
- labelShowBg?: boolean;
4267
- labelBgStyle?: import('react').CSSProperties;
4268
- labelBgPadding?: [number, number];
4269
- labelBgBorderRadius?: number;
4270
- style?: import('react').CSSProperties;
4271
- className?: string;
4272
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4273
- focusable?: boolean;
4274
- data: import('..').RelationshipData;
4275
- readonly id: string;
4276
- readonly type: "relationship";
4277
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4278
- source: string;
4279
- target: string;
4280
- sourceHandle?: string | null;
4281
- targetHandle?: string | null;
4282
- animated?: boolean;
4283
- hidden?: boolean;
4284
- deletable?: boolean;
4285
- selectable?: boolean;
4286
- selected?: boolean;
4287
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4288
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4289
- zIndex?: number;
4290
- ariaLabel?: string;
4291
- interactionWidth?: number;
4292
- label?: import('react').ReactNode;
4293
- labelStyle?: import('react').CSSProperties;
4294
- labelShowBg?: boolean;
4295
- labelBgStyle?: import('react').CSSProperties;
4296
- labelBgPadding?: [number, number];
4297
- labelBgBorderRadius?: number;
4298
- style?: import('react').CSSProperties;
4299
- className?: string;
4300
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4301
- focusable?: boolean;
4302
- data: import('..').RelationshipData;
4303
- readonly id: string;
4304
- readonly type: "relationship";
4305
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4306
- source: string;
4307
- target: string;
4308
- sourceHandle?: string | null;
4309
- targetHandle?: string | null;
4310
- animated?: boolean;
4311
- hidden?: boolean;
4312
- deletable?: boolean;
4313
- selectable?: boolean;
4314
- selected?: boolean;
4315
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4316
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4317
- zIndex?: number;
4318
- ariaLabel?: string;
4319
- interactionWidth?: number;
4320
- label?: import('react').ReactNode;
4321
- labelStyle?: import('react').CSSProperties;
4322
- labelShowBg?: boolean;
4323
- labelBgStyle?: import('react').CSSProperties;
4324
- labelBgPadding?: [number, number];
4325
- labelBgBorderRadius?: number;
4326
- style?: import('react').CSSProperties;
4327
- className?: string;
4328
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4329
- focusable?: boolean;
4330
- data: import('..').RelationshipData;
4331
- readonly id: string;
4332
- readonly type: "relationship";
4333
- }>>), replace?: boolean | undefined) => void;
4334
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4335
- source: string;
4336
- target: string;
4337
- sourceHandle?: string | null;
4338
- targetHandle?: string | null;
4339
- animated?: boolean;
4340
- hidden?: boolean;
4341
- deletable?: boolean;
4342
- selectable?: boolean;
4343
- selected?: boolean;
4344
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4345
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4346
- zIndex?: number;
4347
- ariaLabel?: string;
4348
- interactionWidth?: number;
4349
- label?: import('react').ReactNode;
4350
- labelStyle?: import('react').CSSProperties;
4351
- labelShowBg?: boolean;
4352
- labelBgStyle?: import('react').CSSProperties;
4353
- labelBgPadding?: [number, number];
4354
- labelBgBorderRadius?: number;
4355
- style?: import('react').CSSProperties;
4356
- className?: string;
4357
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4358
- focusable?: boolean;
4359
- data: import('..').RelationshipData;
4360
- readonly id: string;
4361
- readonly type: "relationship";
4362
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4363
- source: string;
4364
- target: string;
4365
- sourceHandle?: string | null;
4366
- targetHandle?: string | null;
4367
- animated?: boolean;
4368
- hidden?: boolean;
4369
- deletable?: boolean;
4370
- selectable?: boolean;
4371
- selected?: boolean;
4372
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4373
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4374
- zIndex?: number;
4375
- ariaLabel?: string;
4376
- interactionWidth?: number;
4377
- label?: import('react').ReactNode;
4378
- labelStyle?: import('react').CSSProperties;
4379
- labelShowBg?: boolean;
4380
- labelBgStyle?: import('react').CSSProperties;
4381
- labelBgPadding?: [number, number];
4382
- labelBgBorderRadius?: number;
4383
- style?: import('react').CSSProperties;
4384
- className?: string;
4385
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4386
- focusable?: boolean;
4387
- data: import('..').RelationshipData;
4388
- readonly id: string;
4389
- readonly type: "relationship";
4390
- }>) => void) => () => void;
4391
- }) => void;
4392
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
4393
- fitDiagram: (xyStore: {
4394
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4395
- source: string;
4396
- target: string;
4397
- sourceHandle?: string | null;
4398
- targetHandle?: string | null;
4399
- animated?: boolean;
4400
- hidden?: boolean;
4401
- deletable?: boolean;
4402
- selectable?: boolean;
4403
- selected?: boolean;
4404
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4405
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4406
- zIndex?: number;
4407
- ariaLabel?: string;
4408
- interactionWidth?: number;
4409
- label?: import('react').ReactNode;
4410
- labelStyle?: import('react').CSSProperties;
4411
- labelShowBg?: boolean;
4412
- labelBgStyle?: import('react').CSSProperties;
4413
- labelBgPadding?: [number, number];
4414
- labelBgBorderRadius?: number;
4415
- style?: import('react').CSSProperties;
4416
- className?: string;
4417
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4418
- focusable?: boolean;
4419
- data: import('..').RelationshipData;
4420
- readonly id: string;
4421
- readonly type: "relationship";
4422
- }>;
4423
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4424
- source: string;
4425
- target: string;
4426
- sourceHandle?: string | null;
4427
- targetHandle?: string | null;
4428
- animated?: boolean;
4429
- hidden?: boolean;
4430
- deletable?: boolean;
4431
- selectable?: boolean;
4432
- selected?: boolean;
4433
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4434
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4435
- zIndex?: number;
4436
- ariaLabel?: string;
4437
- interactionWidth?: number;
4438
- label?: import('react').ReactNode;
4439
- labelStyle?: import('react').CSSProperties;
4440
- labelShowBg?: boolean;
4441
- labelBgStyle?: import('react').CSSProperties;
4442
- labelBgPadding?: [number, number];
4443
- labelBgBorderRadius?: number;
4444
- style?: import('react').CSSProperties;
4445
- className?: string;
4446
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4447
- focusable?: boolean;
4448
- data: import('..').RelationshipData;
4449
- readonly id: string;
4450
- readonly type: "relationship";
4451
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4452
- source: string;
4453
- target: string;
4454
- sourceHandle?: string | null;
4455
- targetHandle?: string | null;
4456
- animated?: boolean;
4457
- hidden?: boolean;
4458
- deletable?: boolean;
4459
- selectable?: boolean;
4460
- selected?: boolean;
4461
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4462
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4463
- zIndex?: number;
4464
- ariaLabel?: string;
4465
- interactionWidth?: number;
4466
- label?: import('react').ReactNode;
4467
- labelStyle?: import('react').CSSProperties;
4468
- labelShowBg?: boolean;
4469
- labelBgStyle?: import('react').CSSProperties;
4470
- labelBgPadding?: [number, number];
4471
- labelBgBorderRadius?: number;
4472
- style?: import('react').CSSProperties;
4473
- className?: string;
4474
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4475
- focusable?: boolean;
4476
- data: import('..').RelationshipData;
4477
- readonly id: string;
4478
- readonly type: "relationship";
4479
- }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4480
- source: string;
4481
- target: string;
4482
- sourceHandle?: string | null;
4483
- targetHandle?: string | null;
4484
- animated?: boolean;
4485
- hidden?: boolean;
4486
- deletable?: boolean;
4487
- selectable?: boolean;
4488
- selected?: boolean;
4489
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4490
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4491
- zIndex?: number;
4492
- ariaLabel?: string;
4493
- interactionWidth?: number;
4494
- label?: import('react').ReactNode;
4495
- labelStyle?: import('react').CSSProperties;
4496
- labelShowBg?: boolean;
4497
- labelBgStyle?: import('react').CSSProperties;
4498
- labelBgPadding?: [number, number];
4499
- labelBgBorderRadius?: number;
4500
- style?: import('react').CSSProperties;
4501
- className?: string;
4502
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4503
- focusable?: boolean;
4504
- data: import('..').RelationshipData;
4505
- readonly id: string;
4506
- readonly type: "relationship";
4507
- }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4508
- source: string;
4509
- target: string;
4510
- sourceHandle?: string | null;
4511
- targetHandle?: string | null;
4512
- animated?: boolean;
4513
- hidden?: boolean;
4514
- deletable?: boolean;
4515
- selectable?: boolean;
4516
- selected?: boolean;
4517
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4518
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4519
- zIndex?: number;
4520
- ariaLabel?: string;
4521
- interactionWidth?: number;
4522
- label?: import('react').ReactNode;
4523
- labelStyle?: import('react').CSSProperties;
4524
- labelShowBg?: boolean;
4525
- labelBgStyle?: import('react').CSSProperties;
4526
- labelBgPadding?: [number, number];
4527
- labelBgBorderRadius?: number;
4528
- style?: import('react').CSSProperties;
4529
- className?: string;
4530
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4531
- focusable?: boolean;
4532
- data: import('..').RelationshipData;
4533
- readonly id: string;
4534
- readonly type: "relationship";
4535
- }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4536
- source: string;
4537
- target: string;
4538
- sourceHandle?: string | null;
4539
- targetHandle?: string | null;
4540
- animated?: boolean;
4541
- hidden?: boolean;
4542
- deletable?: boolean;
4543
- selectable?: boolean;
4544
- selected?: boolean;
4545
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4546
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4547
- zIndex?: number;
4548
- ariaLabel?: string;
4549
- interactionWidth?: number;
4550
- label?: import('react').ReactNode;
4551
- labelStyle?: import('react').CSSProperties;
4552
- labelShowBg?: boolean;
4553
- labelBgStyle?: import('react').CSSProperties;
4554
- labelBgPadding?: [number, number];
4555
- labelBgBorderRadius?: number;
4556
- style?: import('react').CSSProperties;
4557
- className?: string;
4558
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4559
- focusable?: boolean;
4560
- data: import('..').RelationshipData;
4561
- readonly id: string;
4562
- readonly type: "relationship";
4563
- }>>), replace?: boolean | undefined) => void;
4564
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4565
- source: string;
4566
- target: string;
4567
- sourceHandle?: string | null;
4568
- targetHandle?: string | null;
4569
- animated?: boolean;
4570
- hidden?: boolean;
4571
- deletable?: boolean;
4572
- selectable?: boolean;
4573
- selected?: boolean;
4574
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4575
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4576
- zIndex?: number;
4577
- ariaLabel?: string;
4578
- interactionWidth?: number;
4579
- label?: import('react').ReactNode;
4580
- labelStyle?: import('react').CSSProperties;
4581
- labelShowBg?: boolean;
4582
- labelBgStyle?: import('react').CSSProperties;
4583
- labelBgPadding?: [number, number];
4584
- labelBgBorderRadius?: number;
4585
- style?: import('react').CSSProperties;
4586
- className?: string;
4587
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4588
- focusable?: boolean;
4589
- data: import('..').RelationshipData;
4590
- readonly id: string;
4591
- readonly type: "relationship";
4592
- }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
4593
- source: string;
4594
- target: string;
4595
- sourceHandle?: string | null;
4596
- targetHandle?: string | null;
4597
- animated?: boolean;
4598
- hidden?: boolean;
4599
- deletable?: boolean;
4600
- selectable?: boolean;
4601
- selected?: boolean;
4602
- markerStart?: import('@xyflow/system').EdgeMarkerType;
4603
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
4604
- zIndex?: number;
4605
- ariaLabel?: string;
4606
- interactionWidth?: number;
4607
- label?: import('react').ReactNode;
4608
- labelStyle?: import('react').CSSProperties;
4609
- labelShowBg?: boolean;
4610
- labelBgStyle?: import('react').CSSProperties;
4611
- labelBgPadding?: [number, number];
4612
- labelBgBorderRadius?: number;
4613
- style?: import('react').CSSProperties;
4614
- className?: string;
4615
- reconnectable?: boolean | import('@xyflow/system').HandleType;
4616
- focusable?: boolean;
4617
- data: import('..').RelationshipData;
4618
- readonly id: string;
4619
- readonly type: "relationship";
4620
- }>) => void) => () => void;
4621
- }) => void;
4622
- nextDynamicStep: (increment?: number | undefined) => void;
542
+ triggerSaveManualLayout: () => void;
543
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent) => void;
544
+ fitDiagram: (duration?: number) => void;
545
+ nextDynamicStep: (increment?: number) => void;
4623
546
  stopDynamicView: () => void;
4624
547
  }>), replace?: boolean | undefined, action?: A | undefined): void;
4625
548
  }> | null>;
4626
- 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;