@likec4/diagram 1.38.0 → 1.39.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 (86) hide show
  1. package/bundle/{chunk-BZV0K82k.js → chunk-Bg7UjtMS.js} +332 -326
  2. package/bundle/custom.js +59 -59
  3. package/bundle/index.js +244 -170
  4. package/dist/LikeC4Diagram.props.d.ts +15 -8
  5. package/dist/base/BaseXYFlow.js +5 -5
  6. package/dist/base/index.d.ts +1 -2
  7. package/dist/base/primitives/MarkdownBlock.js +2 -1
  8. package/dist/base/primitives/customEdge.d.ts +3 -3
  9. package/dist/base/primitives/element/ElementTitle.js +2 -10
  10. package/dist/base/types.d.ts +62 -5
  11. package/dist/base/types.js +54 -0
  12. package/dist/bundle/LikeC4View.d.ts +2 -2
  13. package/dist/bundle/LikeC4View.props.d.ts +4 -3
  14. package/dist/bundle/ReactLikeC4.d.ts +4 -4
  15. package/dist/custom/customNodes.d.ts +2 -1
  16. package/dist/hooks/useXYFlow.d.ts +28 -29
  17. package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +4 -5
  18. package/dist/likec4diagram/custom/nodes/ElementActions.js +1 -1
  19. package/dist/likec4diagram/types.d.ts +2 -1
  20. package/dist/likec4diagram/useViewToNodesEdges.js +1 -1
  21. package/dist/likec4model/LikeC4ModelContext.d.ts +5 -2
  22. package/dist/likec4model/useLikeC4ElementsTree.js +1 -1
  23. package/dist/likec4model/useLikeC4Model.d.ts +7 -20
  24. package/dist/navigationpanel/NavigationPanel.js +3 -1
  25. package/dist/navigationpanel/NavigationPanelDropdown.js +1 -1
  26. package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +6 -4
  27. package/dist/navigationpanel/walkthrough/WalkthroughPanel.d.ts +1 -0
  28. package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +83 -0
  29. package/dist/overlays/element-details/actor.d.ts +556 -557
  30. package/dist/overlays/relationship-details/RelationshipDetails.d.ts +2 -3
  31. package/dist/overlays/relationship-details/actor.d.ts +1 -1
  32. package/dist/overlays/relationship-details/actor.js +7 -7
  33. package/dist/overlays/relationship-details/compute.js +2 -1
  34. package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +2 -3
  35. package/dist/overlays/relationship-details/hooks.d.ts +18 -19
  36. package/dist/overlays/relationship-details/layout.js +2 -1
  37. package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +2 -3
  38. package/dist/overlays/relationships-browser/actor.d.ts +12 -12
  39. package/dist/overlays/relationships-browser/actor.js +8 -8
  40. package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +2 -3
  41. package/dist/overlays/relationships-browser/layout.js +2 -1
  42. package/dist/search/components/ElementsColumn.js +1 -1
  43. package/dist/state/DiagramActorProvider.js +2 -2
  44. package/dist/state/assign.js +6 -6
  45. package/dist/state/diagram-machine.js +14 -14
  46. package/dist/styles-min.css +1 -1
  47. package/dist/styles-xyflow.css +1 -1
  48. package/dist/styles.css +1 -1
  49. package/dist/styles.css2.js +1 -1
  50. package/dist/utils/xyflow.js +2 -2
  51. package/package.json +16 -16
  52. package/panda.buildinfo.json +14 -11
  53. package/src/LikeC4Diagram.props.ts +16 -16
  54. package/src/base/index.ts +1 -2
  55. package/src/base/primitives/MarkdownBlock.tsx +1 -0
  56. package/src/base/primitives/customEdge.ts +5 -5
  57. package/src/base/primitives/element/ElementTitle.tsx +10 -22
  58. package/src/base/types.ts +122 -13
  59. package/src/bundle/LikeC4View.props.ts +4 -3
  60. package/src/bundle/LikeC4View.tsx +6 -6
  61. package/src/bundle/ReactLikeC4.tsx +7 -6
  62. package/src/custom/customNodes.ts +3 -1
  63. package/src/hooks/useSetState.ts +2 -2
  64. package/src/likec4diagram/custom/nodes/ElementActions.tsx +2 -1
  65. package/src/likec4diagram/types.ts +1 -1
  66. package/src/likec4diagram/useViewToNodesEdges.ts +1 -1
  67. package/src/likec4model/LikeC4ModelContext.tsx +5 -2
  68. package/src/likec4model/useLikeC4ElementsTree.ts +3 -3
  69. package/src/likec4model/useLikeC4Model.ts +8 -5
  70. package/src/navigationpanel/NavigationPanel.tsx +2 -0
  71. package/src/navigationpanel/NavigationPanelDropdown.tsx +1 -1
  72. package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx +3 -1
  73. package/src/navigationpanel/walkthrough/WalkthroughPanel.tsx +88 -0
  74. package/src/overlays/relationship-details/compute.ts +3 -12
  75. package/src/overlays/relationship-details/layout.ts +3 -3
  76. package/src/overlays/relationships-browser/actor.ts +2 -1
  77. package/src/overlays/relationships-browser/layout.ts +3 -3
  78. package/src/search/components/ElementsColumn.tsx +3 -3
  79. package/src/utils/xyflow.ts +2 -2
  80. package/dist/base/types.Base.d.ts +0 -54
  81. package/dist/base/types.Base.js +0 -48
  82. package/dist/likec4diagram/custom/edges/NotePopover.d.ts +0 -4
  83. package/src/base/types.Base.ts +0 -104
  84. package/src/likec4diagram/custom/edges/NotePopover.tsx +0 -95
  85. /package/dist/{likec4diagram/custom/edges/NotePopover.css.d.ts → navigationpanel/walkthrough/WalkthroughPanel.css.d.ts} +0 -0
  86. /package/src/{likec4diagram/custom/edges/NotePopover.css.ts → navigationpanel/walkthrough/WalkthroughPanel.css.ts} +0 -0
@@ -1,7 +1,6 @@
1
1
  import { RelationshipDetailsActorRef } from './actor';
2
2
  import { FunctionComponent, CSSProperties, ReactNode } from 'react';
3
3
  import { Position } from '@xyflow/system';
4
- import { EdgeData, Dimmed } from '../../base/types.Base';
5
4
  import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
6
5
  export declare const edgeTypes: {
7
6
  relationship: FunctionComponent<{
@@ -31,10 +30,10 @@ export declare const edgeTypes: {
31
30
  markerEnd?: string;
32
31
  pathOptions?: any;
33
32
  interactionWidth?: number;
34
- data: EdgeData & {
33
+ data: import("../../base").Base.EdgeData & {
35
34
  hovered?: boolean;
36
35
  active?: boolean;
37
- dimmed?: Dimmed;
36
+ dimmed?: import("../../base").Base.Dimmed;
38
37
  relationId: RelationId;
39
38
  color: Color | undefined;
40
39
  label: string | null;
@@ -620,7 +620,7 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
620
620
  reconnectable?: boolean | HandleType;
621
621
  focusable?: boolean;
622
622
  ariaRole?: AriaRole;
623
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
623
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
624
624
  type: "relationship";
625
625
  data: {
626
626
  hovered?: boolean;
@@ -7,7 +7,7 @@ import { MinZoom } from '../../base/const.js';
7
7
  import { updateEdges } from '../../base/updateEdges.js';
8
8
  import { updateNodes } from '../../base/updateNodes.js';
9
9
  import { layoutResultToXYFlow } from './layout-to-xyflow.js';
10
- import { setDimmed, setHovered, setData } from '../../base/types.Base.js';
10
+ import { Base } from '../../base/types.js';
11
11
 
12
12
  function inputToSubject(input) {
13
13
  if ("edgeId" in input) {
@@ -161,12 +161,12 @@ const relationshipDetailsLogic = setup({
161
161
  );
162
162
  return context.xyedges.map((edge) => {
163
163
  if (edge.id === event.edge.id) {
164
- return setData(edge, {
164
+ return Base.setData(edge, {
165
165
  hovered: true,
166
166
  dimmed: false
167
167
  });
168
168
  }
169
- return hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge;
169
+ return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
170
170
  });
171
171
  }
172
172
  }),
@@ -180,7 +180,7 @@ const relationshipDetailsLogic = setup({
180
180
  assign({
181
181
  xyedges: ({ context, event }) => context.xyedges.map((edge) => {
182
182
  if (edge.id === event.edge.id) {
183
- return setHovered(edge, false);
183
+ return Base.setHovered(edge, false);
184
184
  }
185
185
  return edge;
186
186
  })
@@ -191,7 +191,7 @@ const relationshipDetailsLogic = setup({
191
191
  },
192
192
  "dim.nonhovered.edges": {
193
193
  actions: assign({
194
- xyedges: ({ context }) => context.xyedges.map((edge) => setDimmed(edge, edge.data.hovered !== true))
194
+ xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
195
195
  })
196
196
  },
197
197
  "undim.edges": {
@@ -200,10 +200,10 @@ const relationshipDetailsLogic = setup({
200
200
  const hasSelected = context.xyedges.some((edge) => edge.selected === true);
201
201
  if (hasSelected) {
202
202
  return context.xyedges.map(
203
- (edge) => setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
203
+ (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
204
204
  );
205
205
  }
206
- return context.xyedges.map(setDimmed(false));
206
+ return context.xyedges.map(Base.setDimmed(false));
207
207
  }
208
208
  })
209
209
  },
@@ -1,6 +1,7 @@
1
- import { hasAtLeast, invariant, isAncestor, sortParentsFirst } from '@likec4/core';
2
1
  import { treeFromElements } from '@likec4/core/compute-view/relationships';
3
2
  import { modelConnection } from '@likec4/core/model';
3
+ import { invariant, isAncestor, sortParentsFirst } from '@likec4/core/utils';
4
+ import { hasAtLeast } from 'remeda';
4
5
 
5
6
  const finalize = (elements, explicits) => {
6
7
  if (elements.size > 2 && explicits.size !== elements.size) {
@@ -1,6 +1,5 @@
1
1
  import { FunctionComponent, CSSProperties, ReactNode } from 'react';
2
2
  import { Position } from '@xyflow/system';
3
- import { EdgeData, Dimmed } from '../../../base/types.Base';
4
3
  import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
5
4
  export declare const RelationshipEdge: FunctionComponent<{
6
5
  id: string;
@@ -29,10 +28,10 @@ export declare const RelationshipEdge: FunctionComponent<{
29
28
  markerEnd?: string;
30
29
  pathOptions?: any;
31
30
  interactionWidth?: number;
32
- data: EdgeData & {
31
+ data: import("../../../base").Base.EdgeData & {
33
32
  hovered?: boolean;
34
33
  active?: boolean;
35
- dimmed?: Dimmed;
34
+ dimmed?: import("../../../base").Base.Dimmed;
36
35
  relationId: RelationId;
37
36
  color: Color | undefined;
38
37
  label: string | null;
@@ -3,7 +3,6 @@ import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from
3
3
  import { Context, ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
4
4
  import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
5
5
  import { EdgeMarkerType, HandleType } from '@xyflow/system';
6
- import { Dimmed } from '../../base/types.Base';
7
6
  export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
8
7
  export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
9
8
  export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
@@ -48,12 +47,12 @@ export declare function useRelationshipDetails(): {
48
47
  reconnectable?: boolean | HandleType;
49
48
  focusable?: boolean;
50
49
  ariaRole?: AriaRole;
51
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
50
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
52
51
  type: "relationship";
53
52
  data: {
54
53
  hovered?: boolean;
55
54
  active?: boolean;
56
- dimmed?: Dimmed;
55
+ dimmed?: import("../../base").Base.Dimmed;
57
56
  relationId: RelationId;
58
57
  color: Color | undefined;
59
58
  label: string | null;
@@ -93,12 +92,12 @@ export declare function useRelationshipDetails(): {
93
92
  reconnectable?: boolean | HandleType;
94
93
  focusable?: boolean;
95
94
  ariaRole?: AriaRole;
96
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
95
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
97
96
  type: "relationship";
98
97
  data: {
99
98
  hovered?: boolean;
100
99
  active?: boolean;
101
- dimmed?: Dimmed;
100
+ dimmed?: import("../../base").Base.Dimmed;
102
101
  relationId: RelationId;
103
102
  color: Color | undefined;
104
103
  label: string | null;
@@ -135,12 +134,12 @@ export declare function useRelationshipDetails(): {
135
134
  reconnectable?: boolean | HandleType;
136
135
  focusable?: boolean;
137
136
  ariaRole?: AriaRole;
138
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
137
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
139
138
  type: "relationship";
140
139
  data: {
141
140
  hovered?: boolean;
142
141
  active?: boolean;
143
- dimmed?: Dimmed;
142
+ dimmed?: import("../../base").Base.Dimmed;
144
143
  relationId: RelationId;
145
144
  color: Color | undefined;
146
145
  label: string | null;
@@ -176,12 +175,12 @@ export declare function useRelationshipDetails(): {
176
175
  reconnectable?: boolean | HandleType;
177
176
  focusable?: boolean;
178
177
  ariaRole?: AriaRole;
179
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
178
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
180
179
  type: "relationship";
181
180
  data: {
182
181
  hovered?: boolean;
183
182
  active?: boolean;
184
- dimmed?: Dimmed;
183
+ dimmed?: import("../../base").Base.Dimmed;
185
184
  relationId: RelationId;
186
185
  color: Color | undefined;
187
186
  label: string | null;
@@ -217,12 +216,12 @@ export declare function useRelationshipDetails(): {
217
216
  reconnectable?: boolean | HandleType;
218
217
  focusable?: boolean;
219
218
  ariaRole?: AriaRole;
220
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
219
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
221
220
  type: "relationship";
222
221
  data: {
223
222
  hovered?: boolean;
224
223
  active?: boolean;
225
- dimmed?: Dimmed;
224
+ dimmed?: import("../../base").Base.Dimmed;
226
225
  relationId: RelationId;
227
226
  color: Color | undefined;
228
227
  label: string | null;
@@ -258,12 +257,12 @@ export declare function useRelationshipDetails(): {
258
257
  reconnectable?: boolean | HandleType;
259
258
  focusable?: boolean;
260
259
  ariaRole?: AriaRole;
261
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
260
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
262
261
  type: "relationship";
263
262
  data: {
264
263
  hovered?: boolean;
265
264
  active?: boolean;
266
- dimmed?: Dimmed;
265
+ dimmed?: import("../../base").Base.Dimmed;
267
266
  relationId: RelationId;
268
267
  color: Color | undefined;
269
268
  label: string | null;
@@ -299,12 +298,12 @@ export declare function useRelationshipDetails(): {
299
298
  reconnectable?: boolean | HandleType;
300
299
  focusable?: boolean;
301
300
  ariaRole?: AriaRole;
302
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
301
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
303
302
  type: "relationship";
304
303
  data: {
305
304
  hovered?: boolean;
306
305
  active?: boolean;
307
- dimmed?: Dimmed;
306
+ dimmed?: import("../../base").Base.Dimmed;
308
307
  relationId: RelationId;
309
308
  color: Color | undefined;
310
309
  label: string | null;
@@ -341,12 +340,12 @@ export declare function useRelationshipDetails(): {
341
340
  reconnectable?: boolean | HandleType;
342
341
  focusable?: boolean;
343
342
  ariaRole?: AriaRole;
344
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
343
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
345
344
  type: "relationship";
346
345
  data: {
347
346
  hovered?: boolean;
348
347
  active?: boolean;
349
- dimmed?: Dimmed;
348
+ dimmed?: import("../../base").Base.Dimmed;
350
349
  relationId: RelationId;
351
350
  color: Color | undefined;
352
351
  label: string | null;
@@ -382,12 +381,12 @@ export declare function useRelationshipDetails(): {
382
381
  reconnectable?: boolean | HandleType;
383
382
  focusable?: boolean;
384
383
  ariaRole?: AriaRole;
385
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
384
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
386
385
  type: "relationship";
387
386
  data: {
388
387
  hovered?: boolean;
389
388
  active?: boolean;
390
- dimmed?: Dimmed;
389
+ dimmed?: import("../../base").Base.Dimmed;
391
390
  relationId: RelationId;
392
391
  color: Color | undefined;
393
392
  label: string | null;
@@ -1,6 +1,7 @@
1
1
  import { treeFromElements } from '@likec4/core/compute-view/relationships';
2
2
  import dagre from '@dagrejs/dagre';
3
- import { ifind, RichText, DefaultMap, invariant } from '@likec4/core';
3
+ import { RichText } from '@likec4/core';
4
+ import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
4
5
  import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
5
6
 
6
7
  const Sizes = {
@@ -1,7 +1,6 @@
1
1
  import { RelationshipsBrowserActorRef } from './actor';
2
2
  import { FunctionComponent, CSSProperties, ReactNode } from 'react';
3
3
  import { Position } from '@xyflow/system';
4
- import { EdgeData, Dimmed } from '../../base/types.Base';
5
4
  import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
6
5
  export declare const edgeTypes: {
7
6
  relationship: FunctionComponent<{
@@ -31,10 +30,10 @@ export declare const edgeTypes: {
31
30
  markerEnd?: string;
32
31
  pathOptions?: any;
33
32
  interactionWidth?: number;
34
- data: EdgeData & {
33
+ data: import("../../base").Base.EdgeData & {
35
34
  hovered?: boolean;
36
35
  active?: boolean;
37
- dimmed?: Dimmed;
36
+ dimmed?: import("../../base").Base.Dimmed;
38
37
  sourceFqn: Fqn;
39
38
  targetFqn: Fqn;
40
39
  relations: NonEmptyArray<RelationId>;
@@ -203,7 +203,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
203
203
  reconnectable?: boolean | HandleType;
204
204
  focusable?: boolean;
205
205
  ariaRole?: AriaRole;
206
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
206
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
207
207
  type: "relationship";
208
208
  data: {
209
209
  hovered?: boolean;
@@ -258,7 +258,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
258
258
  reconnectable?: boolean | HandleType;
259
259
  focusable?: boolean;
260
260
  ariaRole?: AriaRole;
261
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
261
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
262
262
  type: "relationship";
263
263
  data: {
264
264
  hovered?: boolean;
@@ -320,7 +320,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
320
320
  reconnectable?: boolean | HandleType;
321
321
  focusable?: boolean;
322
322
  ariaRole?: AriaRole;
323
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
323
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
324
324
  type: "relationship";
325
325
  data: {
326
326
  hovered?: boolean;
@@ -807,7 +807,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
807
807
  reconnectable?: boolean | HandleType;
808
808
  focusable?: boolean;
809
809
  ariaRole?: AriaRole;
810
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
810
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
811
811
  type: "relationship";
812
812
  data: {
813
813
  hovered?: boolean;
@@ -853,7 +853,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
853
853
  reconnectable?: boolean | HandleType;
854
854
  focusable?: boolean;
855
855
  ariaRole?: AriaRole;
856
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
856
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
857
857
  type: "relationship";
858
858
  data: {
859
859
  hovered?: boolean;
@@ -896,7 +896,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
896
896
  reconnectable?: boolean | HandleType;
897
897
  focusable?: boolean;
898
898
  ariaRole?: AriaRole;
899
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
899
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
900
900
  type: "relationship";
901
901
  data: {
902
902
  hovered?: boolean;
@@ -938,7 +938,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
938
938
  reconnectable?: boolean | HandleType;
939
939
  focusable?: boolean;
940
940
  ariaRole?: AriaRole;
941
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
941
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
942
942
  type: "relationship";
943
943
  data: {
944
944
  hovered?: boolean;
@@ -980,7 +980,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
980
980
  reconnectable?: boolean | HandleType;
981
981
  focusable?: boolean;
982
982
  ariaRole?: AriaRole;
983
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
983
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
984
984
  type: "relationship";
985
985
  data: {
986
986
  hovered?: boolean;
@@ -1022,7 +1022,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
1022
1022
  reconnectable?: boolean | HandleType;
1023
1023
  focusable?: boolean;
1024
1024
  ariaRole?: AriaRole;
1025
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
1025
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
1026
1026
  type: "relationship";
1027
1027
  data: {
1028
1028
  hovered?: boolean;
@@ -1064,7 +1064,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
1064
1064
  reconnectable?: boolean | HandleType;
1065
1065
  focusable?: boolean;
1066
1066
  ariaRole?: AriaRole;
1067
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
1067
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
1068
1068
  type: "relationship";
1069
1069
  data: {
1070
1070
  hovered?: boolean;
@@ -1107,7 +1107,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
1107
1107
  reconnectable?: boolean | HandleType;
1108
1108
  focusable?: boolean;
1109
1109
  ariaRole?: AriaRole;
1110
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
1110
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
1111
1111
  type: "relationship";
1112
1112
  data: {
1113
1113
  hovered?: boolean;
@@ -1149,7 +1149,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
1149
1149
  reconnectable?: boolean | HandleType;
1150
1150
  focusable?: boolean;
1151
1151
  ariaRole?: AriaRole;
1152
- domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
1152
+ domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
1153
1153
  type: "relationship";
1154
1154
  data: {
1155
1155
  hovered?: boolean;
@@ -1,4 +1,4 @@
1
- import { invariant, nonNullable, delay } from '@likec4/core';
1
+ import { invariant, nonNullable, delay } from '@likec4/core/utils';
2
2
  import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
3
3
  import { getViewportForBounds } from '@xyflow/system';
4
4
  import { prop, omit, isNullish } from 'remeda';
@@ -9,8 +9,8 @@ import { updateNodes } from '../../base/updateNodes.js';
9
9
  import { typedSystem } from '../../state/utils.js';
10
10
  import { ViewPadding } from './const.js';
11
11
  import { viewToNodesEdge } from './useViewToNodesEdges.js';
12
+ import { Base } from '../../base/types.js';
12
13
  import { centerXYInternalNode } from '../../utils/xyflow.js';
13
- import { setDimmed, setHovered, setData } from '../../base/types.Base.js';
14
14
 
15
15
  const findRootSubject = (nodes) => nodes.find(
16
16
  (n) => n.data.column === "subjects" && isNullish(n.parentId)
@@ -104,7 +104,7 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
104
104
  xyedges: []
105
105
  });
106
106
  await delay(120);
107
- next.xynodes = next.xynodes.map(setDimmed(false));
107
+ next.xynodes = next.xynodes.map(Base.setDimmed(false));
108
108
  if (signal.aborted) {
109
109
  return updateXYData();
110
110
  }
@@ -334,12 +334,12 @@ const relationshipsBrowserLogic = setup({
334
334
  const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
335
335
  return context.xyedges.map((edge) => {
336
336
  if (edge.id === event.edge.id) {
337
- return setData(edge, {
337
+ return Base.setData(edge, {
338
338
  hovered: true,
339
339
  dimmed: false
340
340
  });
341
341
  }
342
- return hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge;
342
+ return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
343
343
  });
344
344
  }
345
345
  }),
@@ -354,7 +354,7 @@ const relationshipsBrowserLogic = setup({
354
354
  xyedges: ({ context, event }) => {
355
355
  return context.xyedges.map((edge) => {
356
356
  if (edge.id === event.edge.id) {
357
- return setHovered(edge, false);
357
+ return Base.setHovered(edge, false);
358
358
  }
359
359
  return edge;
360
360
  });
@@ -367,14 +367,14 @@ const relationshipsBrowserLogic = setup({
367
367
  "dim.nonhovered.edges": {
368
368
  actions: assign({
369
369
  xyedges: ({ context }) => context.xyedges.map(
370
- (edge) => edge.data.hovered ? edge : setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
370
+ (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
371
371
  )
372
372
  })
373
373
  },
374
374
  "undim.edges": {
375
375
  actions: assign({
376
376
  xyedges: ({ context }) => {
377
- return context.xyedges.map(setDimmed(false));
377
+ return context.xyedges.map(Base.setDimmed(false));
378
378
  }
379
379
  })
380
380
  },
@@ -1,6 +1,5 @@
1
1
  import { FunctionComponent, CSSProperties, ReactNode } from 'react';
2
2
  import { Position } from '@xyflow/system';
3
- import { EdgeData, Dimmed } from '../../../base/types.Base';
4
3
  import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
5
4
  export declare const RelationshipEdge: FunctionComponent<{
6
5
  id: string;
@@ -29,10 +28,10 @@ export declare const RelationshipEdge: FunctionComponent<{
29
28
  markerEnd?: string;
30
29
  pathOptions?: any;
31
30
  interactionWidth?: number;
32
- data: EdgeData & {
31
+ data: import("../../../base").Base.EdgeData & {
33
32
  hovered?: boolean;
34
33
  active?: boolean;
35
- dimmed?: Dimmed;
34
+ dimmed?: import("../../../base").Base.Dimmed;
36
35
  sourceFqn: Fqn;
37
36
  targetFqn: Fqn;
38
37
  relations: NonEmptyArray<RelationId>;
@@ -1,7 +1,8 @@
1
1
  import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
2
2
  import { useMemo } from 'react';
3
3
  import dagre from '@dagrejs/dagre';
4
- import { toArray, invariant, RichText, ifind, nonNullable, DefaultMap } from '@likec4/core';
4
+ import { RichText } from '@likec4/core/types';
5
+ import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core/utils';
5
6
  import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
6
7
  import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
7
8
 
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core';
2
+ import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core/utils';
3
3
  import { cx } from '@likec4/styles/css';
4
4
  import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
5
5
  import { useCallbackRef } from '@mantine/hooks';
@@ -40,9 +40,9 @@ function DiagramActorProvider({
40
40
  actors: {
41
41
  syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
42
42
  actions: {
43
- "trigger:OnChange": (_, params) => {
43
+ "trigger:OnChange": ((_, params) => {
44
44
  handlersRef.current.onChange?.(params);
45
- }
45
+ })
46
46
  }
47
47
  })
48
48
  }
@@ -3,8 +3,8 @@ import { getNodeDimensions } from '@xyflow/system';
3
3
  import { deepEqual } from 'fast-equals';
4
4
  import { omit, mergeDeep, isEmpty } from 'remeda';
5
5
  import { assertEvent } from 'xstate';
6
+ import { Base } from '../base/types.js';
6
7
  import { VectorImpl, vector } from '../utils/vector.js';
7
- import { setDimmed, setData } from '../base/types.Base.js';
8
8
 
9
9
  function lastClickedNode(params) {
10
10
  const { lastClickedNode: lastClickedNode2 } = params.context;
@@ -101,18 +101,18 @@ function focusNodesEdges(params) {
101
101
  if (edge.source === focusedNode || edge.target === focusedNode) {
102
102
  focused.add(edge.source);
103
103
  focused.add(edge.target);
104
- return setData(edge, {
104
+ return Base.setData(edge, {
105
105
  dimmed: false,
106
106
  active: true
107
107
  });
108
108
  }
109
- return setData(edge, {
109
+ return Base.setData(edge, {
110
110
  dimmed: true,
111
111
  active: false
112
112
  });
113
113
  });
114
114
  return {
115
- xynodes: _xynodes.map((n) => setDimmed(n, !focused.has(n.id))),
115
+ xynodes: _xynodes.map((n) => Base.setDimmed(n, !focused.has(n.id))),
116
116
  xyedges
117
117
  };
118
118
  }
@@ -336,14 +336,14 @@ function updateActiveWalkthrough({ context }) {
336
336
  return {
337
337
  xyedges: context.xyedges.map((edge) => {
338
338
  const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
339
- return setData(edge, {
339
+ return Base.setData(edge, {
340
340
  active,
341
341
  dimmed: !active
342
342
  });
343
343
  }),
344
344
  xynodes: context.xynodes.map((node) => {
345
345
  const dimmed = step.source !== node.id && step.target !== node.id;
346
- return setDimmed(node, dimmed);
346
+ return Base.setDimmed(node, dimmed);
347
347
  })
348
348
  };
349
349
  }