@likec4/diagram 1.2.1 → 1.3.0

package/dist/style.css

@@ -605,7 +605,6 @@ svg.react-flow__connectionline {
   --likec4-font-family: var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"');
   --likec4-background-color: var(--mantine-color-body);
   --likec4-background-pattern-color: var(--mantine-color-dimmed);
-  --likec4-filter-dimmed: brightness(.6) grayscale(.8) opacity(.5) blur(1px);
   --likec4-compound-font-family: var(--likec4-font-family);
   --likec4-compound-title-color: var(--likec4-element-loContrast);
   --likec4-element-font-family: var(--likec4-font-family);
@@ -1268,9 +1267,6 @@ svg.react-flow__connectionline {
   --xy-background-color: var(--likec4-background-color);
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
 }
-.react-flow._2h8g8h1 .react-flow__viewport {
-  backface-visibility: hidden;
-}
 .react-flow._2h8g8h1._2h8g8h3 {
   --likec4-background-color: transparent !important;
   --xy-background-color: transparent !important;
@@ -1294,10 +1290,6 @@ svg.react-flow__connectionline {
   --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 35%);
   --xy-edge-stroke-width: 2.2px;
 }
-svg:has(.bexn7q2) {
-  filter: var(--likec4-filter-dimmed);
-  transition: filter 800ms ease-out;
-}
 :where([data-mantine-color-scheme="dark"]) .bexn7q1 {
   --bexn7q0: white;
   --xy-edge-label-color: var(--likec4-relation-labelColor);
@@ -1317,6 +1309,13 @@ svg:has(.bexn7q2) {
 .react-flow__edges > svg {
   mix-blend-mode: screen;
 }
+.react-flow__edges > svg:has(.bexn7q2) {
+  opacity: 0.8;
+  transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
+  transition-delay: 200ms;
+  filter: grayscale(0.85) blur(1px);
+  will-change: opacity, filter;
+}
 .bexn7q3 {
   stroke-width: var(--xy-edge-stroke-width);
   stroke-opacity: 0.08;
@@ -1331,7 +1330,6 @@ svg:has(.bexn7q2) {
 .bexn7q4 {
   fill: var(--xy-edge-stroke);
   stroke: var(--xy-edge-stroke);
-  pointer-events: none;
 }
 .bexn7q5 {
   fill: var(--xy-edge-stroke);
@@ -1339,12 +1337,20 @@ svg:has(.bexn7q2) {
   fill-opacity: 0.75;
   stroke-width: 1;
   cursor: grab;
-  pointer-events: visible;
+  pointer-events: auto;
+  visibility: hidden;
 }
-:where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-hovered='true']) .bexn7q5 {
-  transition: all 150ms ease-out;
+.bexn7q5:hover {
+  stroke: var(--mantine-primary-color-filled-hover);
+  stroke-width: 9;
+  transition: stroke 100ms ease-out, stroke-width 100ms ease-out;
+}
+:where(.react-flow__edge.selected, [data-edge-hovered='true']) .bexn7q5 {
+  visibility: visible;
+  transition: fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out;
+  transition-delay: 50ms;
   fill-opacity: 1;
-  stroke-width: 3;
+  stroke-width: 5;
 }
 .bexn7q7 {
   animation-duration: 800ms;
@@ -1354,18 +1360,18 @@ svg:has(.bexn7q2) {
 :where([data-edge-hovered='true']) .bexn7q7 {
   animation-name: bexn7q6;
   animation-delay: 350ms;
-  transition: all 130ms ease-out;
+  transition: stroke,stroke-width 130ms ease-out;
 }
 :where(.react-flow__edge.selected, [data-edge-active='true']) .bexn7q7 {
   animation-name: bexn7q6;
   animation-delay: 0ms;
-  transition: all 130ms ease-out;
+  transition: stroke,stroke-width 130ms ease-out;
 }
 :where([data-edge-dir='back']) .bexn7q7 {
   animation-direction: reverse;
 }
 .bexn7qb {
-  --bexn7qa: translate(var(--bexn7q8, 50%), var(--bexn7q9, 50%));
+  --bexn7qa: translate(var(--bexn7q8, -50%), var(--bexn7q9, -50%));
   top: 0;
   left: 0;
   font-family: var(--likec4-font-family);
@@ -1384,8 +1390,11 @@ svg:has(.bexn7q2) {
   transform: var(--bexn7qa) scale(1.1);
 }
 .bexn7qb:is(.bexn7q2) {
-  transition: filter 800ms ease-out;
-  filter: var(--likec4-filter-dimmed);
+  opacity: 0.8;
+  transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
+  transition-delay: 200ms;
+  filter: grayscale(0.85) blur(2px);
+  will-change: opacity, filter;
 }
 .bexn7qc {
   position: absolute;
@@ -1412,7 +1421,7 @@ svg:has(.bexn7q2) {
   text-align: left;
   font-size: calc(0.78125rem * var(--mantine-scale));
   line-height: 1.2;
-}@keyframes lbtzdo8 {
+}@keyframes lbtzdo9 {
   from {
     opacity: 0.6;
   }
@@ -1427,46 +1436,62 @@ svg:has(.bexn7q2) {
   padding: 0;
   margin: 0;
 }
-.lbtzdo1 {
-  filter: var(--likec4-filter-dimmed);
-  transition: filter 800ms ease-out;
+.react-flow__node-compound:has(.lbtzdo1) {
+  opacity: 0.25;
+  transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
+  transition-delay: 200ms;
+  filter: grayscale(0.85) blur(1px);
+  will-change: opacity, filter;
 }
-.lbtzdo3 {
+.lbtzdo4 {
   width: 100%;
   height: 100%;
   position: relative;
   border-radius: 6px;
   box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4);
   padding: 8px;
-  background: var(--likec4-element-fill);
   transition: all 200ms ease-out;
 }
-:where(.react-flow__node.selected) .lbtzdo3 {
+.lbtzdo4:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  pointer-events: none;
+  transition: background 175ms ease-out, opacity 175ms ease-out;
+  background: var(--likec4-element-fill);
+  background-clip: padding-box;
+}
+:where(.react-flow__node.selected) .lbtzdo4 {
   box-shadow: none;
 }
-:where(.react-flow__node:focus-visible) .lbtzdo3 {
+:where(.react-flow__node:focus-visible) .lbtzdo4 {
   transition-duration: 0ms;
   outline: 3px solid var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   outline-offset: calc(0.09375rem * var(--mantine-scale));
 }
 .lbtzdo6 {
-  --lbtzdo4: calc(var(--lbtzdo2, 80%) - var(--lbtzdo5));
-  --lbtzdo5: 0%;
+  --lbtzdo5: 0;
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   border-style: dashed;
   border-width: 3px;
   padding: 6px;
-  border-color: color-mix(in srgb , var(--likec4-element-stroke),  transparent min(var(--lbtzdo4), 30%));
-  background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo4));
+  box-shadow: none;
+  border-color: color-mix(in srgb , var(--likec4-element-stroke), transparent var(--lbtzdo3, 10%));
   background-clip: padding-box;
 }
+.lbtzdo6:before {
+  transition-delay: 200ms;
+  opacity: calc(var(--lbtzdo2, 1) + var(--lbtzdo5));
+}
 :where(.react-flow__node.selected) .lbtzdo6 {
-  --lbtzdo5: 5%;
-  transition-delay: 50ms;
+  --lbtzdo5: .05;
 }
 :where([data-hovered]) .lbtzdo6 {
-  --lbtzdo5: 15%;
-  transition-delay: 175ms;
+  --lbtzdo5: .1;
 }
 .lbtzdo7 {
   font-family: var(--likec4-compound-font-family);
@@ -1483,7 +1508,7 @@ svg:has(.bexn7q2) {
   color: var(--_compound-title-color,var(--likec4-compound-title-color));
   padding-left: 12px;
 }
-:where([data-likec4-navigable='true']) .lbtzdo7 {
+.lbtzdo8 {
   padding-left: 26px;
 }
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
@@ -1492,9 +1517,9 @@ svg:has(.bexn7q2) {
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdo7 {
   opacity: 1;
 }
-.lbtzdob {
-  --lbtzdo9: var(--likec4-element-loContrast);
-  --lbtzdoa: 6;
+.lbtzdoc {
+  --lbtzdoa: var(--likec4-element-loContrast);
+  --lbtzdob: 6;
   position: absolute;
   top: 0;
   left: 0;
@@ -1504,33 +1529,33 @@ svg:has(.bexn7q2) {
   overflow: visible;
   visibility: hidden;
 }
-:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdob {
+:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdoc {
   visibility: visible;
 }
-:where(.react-flow__node:focus-within:not(.selected)) .lbtzdob {
-  --lbtzdo9: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
-  --lbtzdoa: 8;
+:where(.react-flow__node:focus-within:not(.selected)) .lbtzdoc {
+  --lbtzdoa: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
+  --lbtzdob: 8;
 }
-:where([data-mantine-color-scheme='light']) .lbtzdob {
-  --lbtzdo9: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
+:where([data-mantine-color-scheme='light']) .lbtzdoc {
+  --lbtzdoa: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
 }
-.lbtzdob rect {
-  stroke: var(--lbtzdo9);
+.lbtzdoc rect {
+  stroke: var(--lbtzdoa);
   transform-origin: center center;
-  stroke-width: var(--lbtzdoa);
+  stroke-width: var(--lbtzdob);
   animation-duration: 800ms;
-  animation-name: lbtzdo8;
+  animation-name: lbtzdo9;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   fill: none;
 }
 .lbtzdo0 {
-  --lbtzdoc: var(--likec4-element-loContrast);
+  --lbtzdod: var(--likec4-element-loContrast);
 }
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
-  --lbtzdoc: var(--likec4-element-stroke);
+  --lbtzdod: var(--likec4-element-stroke);
 }
-.lbtzdod {
+.lbtzdoe {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -1539,37 +1564,37 @@ svg:has(.bexn7q2) {
   left: 3px;
   top: 7px;
   cursor: pointer;
-  color: var(--_compound-title-color,var(--lbtzdoc));
+  color: var(--_compound-title-color,var(--lbtzdod));
   transform-origin: 90% 70%;
   opacity: 0.75;
   transition: all 150ms ease-out;
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-.lbtzdod:hover {
+.lbtzdoe:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.466);
   opacity: 1;
   transition-delay: 0;
 }
-.lbtzdod:active {
+.lbtzdoe:active {
   transform: scale(1.1);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdod {
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdoe {
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 50%);
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 20%);
   opacity: 0.85;
 }
-:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdod:not(:hover) {
+:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdoe:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.223);
   opacity: 1;
   transition-delay: 250ms;
 }
-.lbtzdod svg.icon {
+.lbtzdoe svg.icon {
   width: 70%;
   height: 70%;
   stroke-width: 1.5;
@@ -1583,16 +1608,19 @@ svg:has(.bexn7q2) {
 }
 ._1b6tkn2 {
   --_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));
-  position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
-  backface-visibility: hidden;
+  display: flex;
+  align-items: stretch;
 }
-.react-flow__node:has(._1b6tkn3) {
-  filter: var(--likec4-filter-dimmed);
-  transition: filter 800ms ease-out;
+.react-flow__node-element:has(._1b6tkn3) {
+  opacity: 0.25;
+  transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
+  transition-delay: 200ms;
+  filter: grayscale(0.85) blur(2px);
+  will-change: opacity, filter;
 }
 ._1b6tkn5 {
   stroke: var(--likec4-element-loContrast);
@@ -1616,6 +1644,9 @@ svg:has(.bexn7q2) {
 :where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn5 {
   stroke-width: 10;
 }
+._1b6tkn3 ._1b6tkn5 {
+  visibility: hidden;
+}
 ._1b6tkn6 {
   fill: var(--likec4-element-fill);
 }
@@ -1670,9 +1701,7 @@ svg:has(.bexn7q2) {
 }
 ._1b6tknc {
   --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
-  position: relative;
-  width: 100%;
-  height: 100%;
+  flex: 1;
   padding: var(--_1b6tkn1);
   display: flex;
   flex-direction: column;
@@ -1731,6 +1760,7 @@ svg:has(.bexn7q2) {
   filter: var(--_1b6tkng, var(--_1b6tknf));
   transition: filter 300ms ease-out;
   transition-delay: 0ms;
+  z-index: -1;
 }
 :where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tknh {
   filter: none;
@@ -1829,6 +1859,31 @@ svg:has(.bexn7q2) {
 }
 ._4ysv0o2 {
   text-align: left;
+}.hbkbtj0 {
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  margin: 0;
+}
+.hbkbtj1 {
+  cursor: default;
+  min-width: 100px;
+  max-width: calc(100vw - 16px);
+  background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+.hbkbtj3 {
+  white-space-collapse: preserve-breaks;
+  color: var(--mantine-color-gray-7);
+}
+:where([data-mantine-color-scheme="dark"]) .hbkbtj3 {
+  color: var(--mantine-color-gray-5);
+}
+@media (min-width: 62em) {
+  .hbkbtj1 {
+    max-width: 45vw;
+  }
 }._2jkb2y0 {
   position: absolute;
   bottom: 0.5rem;
@@ -1859,36 +1914,12 @@ svg:has(.bexn7q2) {
 [data-mantine-color-scheme="light"] ._2jkb2y3 {
   --_2jkb2y2: 15%;
 }
-._2jkb2y3 .tabler-icon {
-  width: 80%;
+:where(._2jkb2y1, ._2jkb2y3) .tabler-icon {
+  width: 0.85em;
+  height: 0.85em;
 }._1lmzt1h0 {
   top: var(--likec4-options-panel-top, 1rem);
   right: var(--likec4-options-panel-right, 1rem);
   margin: 0;
   box-shadow: var(--mantine-shadow-xl);
-}.hbkbtj0 {
-  bottom: 0;
-  left: 0;
-  padding: 8px;
-  margin: 0;
-}
-.hbkbtj1 {
-  cursor: default;
-  min-width: 100px;
-  max-width: calc(100vw - 16px);
-  background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-}
-.hbkbtj3 {
-  white-space-collapse: preserve-breaks;
-  color: var(--mantine-color-gray-7);
-}
-:where([data-mantine-color-scheme="dark"]) .hbkbtj3 {
-  color: var(--mantine-color-gray-5);
-}
-@media (min-width: 62em) {
-  .hbkbtj1 {
-    max-width: 45vw;
-  }
 }

package/dist/theme.css.d.ts

@@ -2,7 +2,6 @@ export declare const vars: {
     default: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
-    filterDimmed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     likec4: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         background: {

package/dist/ui/OptionsPanel.d.ts

@@ -1 +1,3 @@
-export default function OptionsPanel(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const OptionsPanelMemo: import('react').NamedExoticComponent<object>;
+export default OptionsPanelMemo;

package/dist/xyflow/XYFlow.d.ts

@@ -2,10 +2,11 @@ import { CSSProperties, PropsWithChildren } from 'react';
 import { XYFlowEdge, XYFlowNode } from './types';
 
 type XYFlowWrapperProps = PropsWithChildren<{
+    colorMode?: 'system' | 'light' | 'dark';
     className?: string | undefined;
     defaultNodes: XYFlowNode[];
     defaultEdges: XYFlowEdge[];
     style?: CSSProperties | undefined;
 }>;
-export declare function XYFlow({ className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function XYFlow({ colorMode, className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/xyflow/XYFlowInner.d.ts

@@ -7,5 +7,5 @@ type XYFlowInnerProps = PropsWithChildren<{
     showDiagramTitle: boolean;
     enableDynamicViewWalkthrough: boolean;
 }>;
-export declare function XYFlowInner({ children, background, controls, showDiagramTitle, enableDynamicViewWalkthrough }: XYFlowInnerProps): import("react/jsx-runtime").JSX.Element;
+export declare const XYFlowInner: import('react').NamedExoticComponent<XYFlowInnerProps>;
 export {};

package/dist/xyflow/const.d.ts

@@ -3,4 +3,4 @@ export declare const ZIndexes: {
     readonly Edge: 2;
     readonly Element: 3;
 };
-export declare const MinZoom = 0.05;
+export declare const MinZoom = 0.1;

package/dist/xyflow/diagram-to-xyflow.d.ts

@@ -1,7 +1,7 @@
 import { DiagramView } from '@likec4/core';
 import { XYFlowData } from '../xyflow/types';
 
-export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'nodes' | 'edges' | '__'>, opts: {
+export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>, opts: {
     draggable: boolean;
     selectable: boolean;
 }): XYFlowData;

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -1,5 +1,4 @@
 import { EdgeProps } from '@xyflow/react';
-import { CSSProperties } from 'react';
 
 export declare const RelationshipEdge: import('react').NamedExoticComponent<EdgeProps<{
     source: string;
@@ -17,12 +16,12 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     ariaLabel?: string;
     interactionWidth?: number;
     label?: import('react').ReactNode;
-    labelStyle?: CSSProperties;
+    labelStyle?: import('react').CSSProperties;
     labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
+    labelBgStyle?: import('react').CSSProperties;
     labelBgPadding?: [number, number];
     labelBgBorderRadius?: number;
-    style?: CSSProperties;
+    style?: import('react').CSSProperties;
     className?: string;
     updatable?: import('@xyflow/react').EdgeUpdatable;
     focusable?: boolean;

package/dist/xyflow/edges/utils.d.ts

@@ -1,8 +1,10 @@
-import { Point } from '@likec4/core';
 import { Position, XYPosition } from '@xyflow/react';
 import { InternalXYFlowNode } from '../types';
 
-export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point): readonly [number, number];
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, { x: x1, y: y1 }: XYPosition): {
+    x: number;
+    y: number;
+};
 export declare function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition): readonly [number, number, Position];
 export declare function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode): {
     sx: number;

package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts

@@ -1,8 +1,10 @@
 export declare const container: string;
 export declare const dimmed: string;
-export declare const varTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const compoundBody: string;
 export declare const transparent: string;
 export declare const title: string;
+export declare const titleWithNavigation: string;
 export declare const indicator: string;
 export declare const navigateBtn: string;

package/dist/xyflow/nodes/element/ElementNode.d.ts

@@ -2,5 +2,5 @@ import { NodeProps } from '@xyflow/react';
 import { ElementXYFlowNode } from '../../types';
 
 type ElementNodeProps = NodeProps<ElementXYFlowNode>;
-export declare function ElementNode({ id, data: { element }, dragging, selected, width, height }: ElementNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare const ElementNodeMemo: import('react').NamedExoticComponent<ElementNodeProps>;
 export {};

package/dist/xyflow/nodes/element/index.d.ts

@@ -1 +1 @@
-export { ElementNode } from './ElementNode';
+export { ElementNodeMemo as ElementNode } from './ElementNode';

package/dist/xyflow/types.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core';
+import { BBox, DiagramEdge, DiagramNode, Fqn, Point, XYPosition } from '@likec4/core';
 import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { SetReadonly, SetRequired } from 'type-fest';
@@ -25,7 +25,7 @@ export declare namespace XYFlowNode {
 }
 export type RelationshipData = {
     edge: DiagramEdge;
-    controlPoints: Point[];
+    controlPoints: XYPosition[] | null;
     headPoint: Point | null;
     tailPoint: Point | null;
     type: 'bezier' | 'poly';

package/dist/xyflow/utils.d.ts

@@ -1,4 +1,7 @@
+import { DiagramEdge, Point } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/react';
 
 export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
+export declare function bezierControlPoints(diagramEdge: DiagramEdge): XYPosition[];
+export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,9 +48,12 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.2.1",
+    "@likec4/core": "1.3.0",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.0.0",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
@@ -59,27 +62,26 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.10.1",
-    "@mantine/hooks": "^7.10.1",
+    "@mantine/core": "7.10.2",
+    "@mantine/hooks": "7.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.2.1",
+    "@likec4/tsconfig": "1.3.0",
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "^7.10.1",
-    "@mantine/hooks": "^7.10.1",
-    "@mantine/vanilla-extract": "^7.10.1",
+    "@mantine/core": "7.10.2",
+    "@mantine/hooks": "7.10.2",
+    "@mantine/vanilla-extract": "7.10.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/css": "^1.15.2",
-    "@vanilla-extract/dynamic": "^2.1.1",
-    "@vanilla-extract/esbuild-plugin": "^2.3.6",
+    "@vanilla-extract/esbuild-plugin": "^2.3.7",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "^12.0.0-next",
+    "@xyflow/react": "12.0.0-next.21",
+    "@xyflow/system": "0.0.29",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "execa": "^9.1.0",
@@ -89,8 +91,7 @@
     "tilg": "^0.1.1",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5",
-    "unbuild": "^2.0.0",
-    "vite": "5.3.0",
+    "vite": "5.3.1",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -17,10 +17,10 @@ globalStyle(`.react-flow${cssReactFlow}`, {
     [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
   }
 })
-globalStyle(`.react-flow${cssReactFlow} .react-flow__viewport`, {
-  // willChange: 'transform'
-  backfaceVisibility: 'hidden'
-})
+
+// globalStyle(`.react-flow${cssReactFlow} .react-flow__node`, {
+//   willChange: 'transform'
+// })
 
 export const cssDisablePan = style({})