@likec4/diagram 1.44.0 → 1.46.0

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
-export { Vector, vector } from './vector';
-export type { VectorValue } from './vector';
+export { Vector, vector } from '@likec4/core/geometry';
+export type { VectorValue } from '@likec4/core/geometry';
 export { bezierControlPoints, bezierPath, distance, distanceBetweenPoints, extractMinimalInternalNode, getNodeCenter, getNodeIntersection, getNodeIntersectionFromCenterToPoint, isEqualMinimalInternalNodes, isInside, isSamePoint, type MinimalInternalNode, nodeToRect, stopPropagation, } from './xyflow';
 export { roundDpr } from './roundDpr';
 export { pickViewBounds } from './view-bounds';

package/dist/utils/view-bounds.js

@@ -17,12 +17,6 @@ function calcEdgeBounds({ points, controlPoints, labelBBox }) {
   let minY = Infinity;
   let maxX = -Infinity;
   let maxY = -Infinity;
-  for (const p of points) {
-    minX = Math.min(minX, p[0]);
-    minY = Math.min(minY, p[1]);
-    maxX = Math.max(maxX, p[0]);
-    maxY = Math.max(maxY, p[1]);
-  }
   if (controlPoints) {
     for (const p of controlPoints) {
       minX = Math.min(minX, p.x);
@@ -30,6 +24,13 @@ function calcEdgeBounds({ points, controlPoints, labelBBox }) {
       maxX = Math.max(maxX, p.x);
       maxY = Math.max(maxY, p.y);
     }
+  } else {
+    for (const [x, y] of points) {
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, y);
+    }
   }
   if (labelBBox) {
     minX = Math.min(minX, labelBBox.x);

package/dist/utils/xyflow.d.ts

@@ -1,7 +1,7 @@
-import { NonEmptyArray, Point, BBox } from '@likec4/core';
+import { NonEmptyArray, Point, BBox, Vector } from '@likec4/core';
 import { InternalNode, Rect, XYPosition, Position } from '@xyflow/react';
 import { NodeHandle } from '@xyflow/system';
-import { Vector } from './vector';
+import { MouseEvent as ReactMouseEvent } from 'react';
 export declare function distance(a: XYPosition, b: XYPosition): number;
 /**
  * Minimal type to access only needed properties of InternalNode
@@ -28,6 +28,7 @@ export type MinimalInternalNode = {
  */
 export declare function extractMinimalInternalNode<N extends InternalNode>(nd: N): MinimalInternalNode;
 export declare function isEqualMinimalInternalNodes(a: MinimalInternalNode, b: MinimalInternalNode): boolean;
+export declare function isEqualRects(a: Rect, b: Rect): boolean;
 export declare const nodeToRect: (nd: MinimalInternalNode) => Rect;
 export declare function getNodeCenter(node: MinimalInternalNode): XYPosition;
 /**
@@ -39,7 +40,7 @@ export declare function getNodeCenter(node: MinimalInternalNode): XYPosition;
  * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
  * @returns coordinates of the intersection point
  */
-export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: MinimalInternalNode, target: XYPosition, nodeMargin?: number): Vector;
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: BBox, target: XYPosition, nodeMargin?: number): Vector;
 /**
  * Helper function returns the intersection point
  * of the line between the center of the intersectionNode and the target
@@ -57,10 +58,10 @@ export declare function getNodeIntersection(intersectionNode: MinimalInternalNod
  * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
  */
 export declare const isInside: (test: Rect, target: Rect) => boolean;
-export declare function bezierControlPoints(points: NonEmptyArray<Point>): XYPosition[];
+export declare function bezierControlPoints(points: NonEmptyArray<Point>): NonEmptyArray<XYPosition>;
 export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
 export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;
-export declare function stopPropagation(e: React.MouseEvent): void;
+export declare function stopPropagation(e: ReactMouseEvent): void;
 export declare function bezierPath(bezierSpline: NonEmptyArray<Point>): string;
 export declare function toXYFlowPosition(position: 'left' | 'right' | 'top' | 'bottom'): Position;
 export declare function createXYFlowNodeNandles(bbox: BBox): NodeHandle[];

package/dist/utils/xyflow.js

@@ -1,68 +1,36 @@
-import '@likec4/core';
+import { BBox } from '@likec4/core';
+import { vector } from '@likec4/core/geometry';
 import { invariant } from '@likec4/core/utils';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
 import { Bezier } from 'bezier-js';
-import { hasAtLeast, isNumber, isArray } from 'remeda';
-import { vector } from './vector.js';
+import { isArray, hasAtLeast } from 'remeda';
 
-function extractMinimalInternalNode(nd) {
-  const minimal = {
-    internals: {
-      positionAbsolute: nd.internals.positionAbsolute
-    }
-  };
-  if (nd.measured) {
-    minimal.measured = nd.measured;
-  }
-  if (isNumber(nd.width)) {
-    minimal.width = nd.width;
-  }
-  if (isNumber(nd.height)) {
-    minimal.height = nd.height;
-  }
-  if (isNumber(nd.initialWidth)) {
-    minimal.initialWidth = nd.initialWidth;
-  }
-  if (isNumber(nd.initialHeight)) {
-    minimal.initialHeight = nd.initialHeight;
-  }
-  return minimal;
-}
-function isEqualMinimalInternalNodes(a, b) {
-  const posA = a.internals.positionAbsolute;
-  const posB = b.internals.positionAbsolute;
-  if (posA.x !== posB.x || posA.y !== posB.y) {
-    return false;
-  }
-  const widthA = a.measured?.width ?? a.width ?? a.initialWidth ?? 0;
-  const widthB = b.measured?.width ?? b.width ?? b.initialWidth ?? 0;
-  if (widthA !== widthB) {
-    return false;
-  }
-  const heightA = a.measured?.height ?? a.height ?? a.initialHeight ?? 0;
-  const heightB = b.measured?.height ?? b.height ?? b.initialHeight ?? 0;
-  return heightA === heightB;
+function isEqualRects(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
+const nodeToRect = (nd) => ({
+  x: Math.round(nd.internals.positionAbsolute.x),
+  y: Math.round(nd.internals.positionAbsolute.y),
+  width: nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0,
+  height: nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0
+});
 function getNodeCenter(node) {
   const { width, height } = getNodeDimensions(node);
   const { x, y } = node.internals.positionAbsolute;
   return {
-    x: x + width / 2,
-    y: y + height / 2
+    x: Math.round(x + width / 2),
+    y: Math.round(y + height / 2)
   };
 }
 function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
-  const nodeCenter = getNodeCenter(intersectionNode);
-  const { width, height } = getNodeDimensions(intersectionNode);
+  const { width, height } = intersectionNode;
+  const nodeCenter = BBox.center(intersectionNode);
   const v = vector(target.x, target.y).subtract(nodeCenter);
-  const xScale = (nodeMargin + (width || 0) / 2) / v.x;
-  const yScale = (nodeMargin + (height || 0) / 2) / v.y;
+  const xScale = (nodeMargin + width / 2) / v.x;
+  const yScale = (nodeMargin + height / 2) / v.y;
   const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
-  return vector(v).multiply(scale).add(nodeCenter);
-}
-function getNodeIntersection(intersectionNode, targetNode) {
-  return getNodeIntersectionFromCenterToPoint(intersectionNode, getNodeCenter(targetNode));
+  return vector(v).multiply(scale).add(nodeCenter).round();
 }
 function bezierControlPoints(points) {
   let [start, ...bezierPoints] = points;
@@ -88,15 +56,16 @@ function bezierControlPoints(points) {
     start = end;
   }
   invariant(bezierPoints.length === 0, "all points should be consumed");
+  invariant(hasAtLeast(handles, 1), "at least one control point should be generated");
   return handles;
 }
-const isClose = (a, b) => {
-  return Math.abs(a - b) < 3.1;
-};
 function isSamePoint(a, b) {
-  const [ax, ay] = isArray(a) ? a : [a.x, a.y];
-  const [bx, by] = isArray(b) ? b : [b.x, b.y];
-  return isClose(ax, bx) && isClose(ay, by);
+  const pointA = isArray(a) ? { x: a[0], y: a[1] } : a;
+  const pointB = isArray(b) ? { x: b[0], y: b[1] } : b;
+  return distanceBetweenPoints(pointA, pointB) < 2.1;
+}
+function distanceBetweenPoints(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
 }
 function stopPropagation(e) {
   return e.stopPropagation();
@@ -114,4 +83,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, extractMinimalInternalNode, getNodeCenter, getNodeIntersection, getNodeIntersectionFromCenterToPoint, isEqualMinimalInternalNodes, isSamePoint, stopPropagation };
+export { bezierControlPoints, bezierPath, distanceBetweenPoints, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -62,33 +62,34 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@dagrejs/dagre": "1.1.5",
+    "@dagrejs/dagre": "1.1.8",
     "@floating-ui/dom": "^1.7.4",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "8.3.7",
-    "@mantine/hooks": "8.3.7",
+    "@mantine/core": "8.3.9",
+    "@mantine/hooks": "8.3.9",
     "@nanostores/react": "1.0.0",
+    "@nanostores/media-query": "0.1.2",
     "@react-hookz/web": "^25.2.0",
     "@xstate/react": "6.0.0",
-    "@xyflow/react": "12.9.0",
-    "@xyflow/system": "0.0.71",
+    "@xyflow/react": "12.10.0",
+    "@xyflow/system": "0.0.74",
     "immer": "^10.2.0",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
-    "fast-equals": "^5.3.2",
+    "fast-equals": "^5.3.3",
     "khroma": "2.1.0",
-    "motion": "^12.23.24",
-    "nanostores": "1.0.1",
+    "motion": "^12.23.25",
+    "nanostores": "1.1.0",
     "react-error-boundary": "^6.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.32.0",
     "type-fest": "^4.41.0",
     "xstate": "5.24.0",
-    "@likec4/core": "1.44.0",
-    "@likec4/styles": "1.44.0"
+    "@likec4/core": "1.46.0",
+    "@likec4/styles": "1.46.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.4.3",
+    "@pandacss/dev": "^1.6.1",
     "@types/react": "^18.x || ^19.x",
     "@types/react-dom": "^18.x || ^19.x",
     "react": "^18.x || ^19.x",
@@ -106,27 +107,27 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.4.3",
+    "@pandacss/dev": "^1.6.1",
     "@statelyai/inspect": "^0.4.0",
     "@tabler/icons-react": "3.35.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/node": "~20.19.22",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
-    "@vitejs/plugin-react": "^5.1.0",
-    "oxlint": "1.28.0",
+    "@types/node": "~22.19.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "oxlint": "1.31.0",
     "postcss": "8.5.6",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
     "typescript": "5.9.3",
-    "vite": "^7.2.2",
+    "vite": "^7.2.6",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "4.0.8",
+    "vitest": "4.0.15",
     "wireit": "0.14.12",
     "zx": "8.8.5",
     "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.44.0"
+    "@likec4/tsconfig": "1.46.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.4.3",
+  "schemaVersion": "1.6.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -118,6 +118,7 @@
       "width]___[value:max-content]___[cond:@/sm",
       "maxWidth]___[value:calc(100vw - 2 * {spacing.md})]___[cond:@/sm",
       "maxWidth]___[value:calc(100cqw - 2 * {spacing.md})]___[cond:@/sm<___>xs",
+      "display]___[value:none]___[cond:_print",
       "mainAxis]___[value:4",
       "position]___[value:bottom-start",
       "layerStyle]___[value:likec4.panel",
@@ -216,40 +217,12 @@
       "transitionDelay]___[value:0s]___[cond:_hover",
       "lineClamp]___[value:5",
       "fill]___[value:none",
-      "transition]___[value:none]___[cond:_reduceGraphics",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
-      "strokeOpacity]___[value:0.08",
-      "transitionProperty]___[value:stroke-width, stroke-opacity]___[cond:_noReduceGraphics",
-      "transitionDuration]___[value:fast]___[cond:_noReduceGraphics",
-      "transitionTimingFunction]___[value:inOut]___[cond:_noReduceGraphics",
-      "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
-      "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
-      "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
-      "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
-      "fill]___[value:[var(--xy-edge-stroke)]",
-      "stroke]___[value:[var(--xy-edge-stroke)]",
-      "strokeDashoffset]___[value:0",
-      "animationStyle]___[value:xyedgeAnimated]___[cond:_noReduceGraphics",
-      "animationPlayState]___[value:paused]___[cond:_noReduceGraphics",
-      "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
-      "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
-      "animationPlayState]___[value:running]___[cond:_whenHovered<___>_noReduceGraphics",
-      "animationDelay]___[value:450ms]___[cond:_whenHovered<___>_noReduceGraphics",
-      "animationPlayState]___[value:running]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
-      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
-      "animationPlayState]___[value:paused]___[cond:_whenDimmed",
-      "animationName]___[value:none]___[cond:_smallZoom",
-      "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
-      "animationPlayState]___[value:paused]___[cond:_whenPanning",
       "justifyContent]___[value:center",
       "zIndex]___[value:1",
       "display]___[value:none]___[cond:_smallZoom",
       "gap]___[value:1.5",
       "lineClamp]___[value:2",
       "lineClamp]___[value:3",
-      "maxHeight]___[value:8rem ",
       "top]___[value:0.5",
       "right]___[value:0.5",
       "right]___[value:[5px]]___[cond:_shapeBrowser",
@@ -301,6 +274,7 @@
       "paddingTop]___[value:2",
       "marginTop]___[value:2",
       "marginTop]___[value:0",
+      "color]___[value:orange",
       "--bleed-x]___[value:token(spacing.2, 2)",
       "--bleed-y]___[value:token(spacing.2, 2)",
       "marginInline]___[value:calc(var(--bleed-x, 0) * -1)",
@@ -311,12 +285,18 @@
       "gap]___[value:2",
       "offset]___[value:2",
       "position]___[value:top-start",
+      "width]___[value:350",
+      "position]___[value:right",
+      "offset]___[value:10",
+      "background]___[value:white",
       "opacity]___[value:0.65",
+      "display]___[value:inline-flex",
       "paddingLeft]___[value:2.5",
       "paddingBlock]___[value:1.5",
       "borderLeft]___[value:2px dotted",
       "borderLeftColor]___[value:mantine.colors.gray[3]",
       "borderLeftColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
+      "opacity]___[value:0.5",
       "display]___[value:block",
       "fontSize]___[value:xxs",
       "lineHeight]___[value:sm",
@@ -342,10 +322,12 @@
       "transform]___[value:translateY(-3px)]___[cond:_active",
       "boxShadow]___[value:lg",
       "textStyle]___[value:xs",
+      "layerStyle]___[value:likec4.panel.action",
+      "position]___[value:right-start",
+      "stroke]___[value:1.7",
       "paddingBlock]___[value:1",
       "paddingLeft]___[value:3",
       "color]___[value:likec4.panel.text",
-      "color]___[value:orange",
       "color]___[value:green",
       "padding]___[value:0.5",
       "width]___[value:[20px]",
@@ -372,14 +354,15 @@
       "overflow]___[value:visible",
       "color]___[value:mantine.colors.gray[4]]___[cond:_dark",
       "color]___[value:mantine.colors.gray[8]]___[cond:_light",
-      "opacity]___[value:0.5",
       "marginInlineEnd]___[value:0.5",
       "crossAxis]___[value:-22",
       "padding]___[value:1.5",
       "marginTop]___[value:4",
       "marginTop]___[value:xs",
-      "layerStyle]___[value:likec4.panel.action",
+      "layerStyle]___[value:likec4.panel.action.filled",
       "paddingInline]___[value:xxs",
+      "backgroundColor]___[value:none",
+      "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_notDisabled<___>_hover",
       "fontWeight]___[value:400",
       "boxShadow]___[value:md",
       "mainAxis]___[value:2",
@@ -387,7 +370,6 @@
       "lineHeight]___[value:1.1",
       "color]___[value:mantine.colors.gray[9]]___[cond:_light",
       "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
-      "position]___[value:right-start",
       "mainAxis]___[value:10",
       "opacity]___[value:0.6",
       "padding]___[value:8",
@@ -401,7 +383,6 @@
       "position]___[value:top",
       "width]___[value:70%]___[cond:& > svg",
       "height]___[value:70%]___[cond:& > svg",
-      "position]___[value:right",
       "mainAxis]___[value:12",
       "top]___[value:md",
       "left]___[value:md",
@@ -458,7 +439,7 @@
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "border]___[value:none",
-      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent), color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px) ",
+      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent), color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px) ",
       "display]___[value:none]___[cond:& .react-flow__attribution",
       "flex]___[value:0",
       "cursor]___[value:move",
@@ -629,7 +610,6 @@
       "paddingInline]___[value:md",
       "paddingBlock]___[value:xs",
       "marginTop]___[value:sm",
-      "display]___[value:inline-flex",
       "borderStyle]___[value:solid]___[cond:_hover",
       "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
       "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
@@ -768,34 +748,42 @@
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
-      "mixBlendMode]___[value:normal",
-      "fill]___[value:var(--likec4-palette-relation-stroke)",
-      "stroke]___[value:var(--likec4-palette-relation-stroke)",
-      "fillOpacity]___[value:0.75",
-      "strokeWidth]___[value:1",
+      "stroke]___[value:likec4.compare.manual.outline",
+      "strokeWidth]___[value:8px",
+      "strokeWidth]___[value:12px]___[cond:_whenHovered",
+      "strokeOpacity]___[value:0.5",
+      "cursor]___[value:copy]___[cond:& .react-flow__edge-interaction",
+      "zIndex]___[value:9999",
+      "mixBlendMode]___[value:screen]___[cond:_dark",
+      "mixBlendMode]___[value:multiply]___[cond:_light",
+      "fill]___[value:[var(--xy-edge-stroke)]",
+      "stroke]___[value:transparent",
+      "fillOpacity]___[value:0.5",
+      "strokeWidth]___[value:10",
+      "r]___[value:4",
       "cursor]___[value:grab",
-      "pointerEvents]___[value:auto",
       "visibility]___[value:hidden",
-      "fillOpacity]___[value:1]___[cond:_hover",
-      "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
-      "strokeWidth]___[value:18]___[cond:_hover",
-      "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
+      "transitionDuration]___[value:120ms",
+      "transitionProperty]___[value:visibility, fill, fill-opacity, r",
+      "transitionTimingFunction]___[value:inOut",
+      "transitionDelay]___[value:20ms",
       "visibility]___[value:visible]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "transitionDelay]___[value:50ms]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
       "fillOpacity]___[value:1]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "strokeWidth]___[value:12]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "cursor]___[value:grabbing",
-      "cursor]___[value:grabbing !important]___[cond:& *",
-      "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
+      "transitionTimingFunction]___[value:out]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "transitionDelay]___[value:0ms]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "r]___[value:6]___[cond::where([data-likec4-selected='true']) &",
+      "r]___[value:8]___[cond::is([data-likec4-hovered='true']) &",
+      "fill]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
+      "r]___[value:10]___[cond:_hover",
+      "transitionDuration]___[value:100ms]___[cond:_hover",
+      "cursor]___[value:grabbing]___[cond:_groupActive",
       "outlineColor]___[value:likec4.compare.manual.outline]___[cond:& + .likec4-element-shape",
-      "outlineWidth]___[value:2px]___[cond:& + .likec4-element-shape",
-      "outlineWidth]___[value:4px]___[cond:& + .likec4-element-shape<___>_light",
-      "outlineStyle]___[value:solid]___[cond:& + .likec4-element-shape",
-      "outlineOffset]___[value:1]___[cond:& + .likec4-element-shape",
+      "outlineWidth]___[value:4px]___[cond:& + .likec4-element-shape",
+      "outlineStyle]___[value:dashed]___[cond:& + .likec4-element-shape",
+      "outlineOffset]___[value:1.5]___[cond:& + .likec4-element-shape",
       "borderWidth]___[value:1",
       "--_color]___[value:var(--likec4-palette-stroke)",
-      "--_color]___[value:[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
+      "--_color]___[value:[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
       "borderColor]___[value:[var(--_color)/30]",
       "backgroundColor]___[value:var(--likec4-palette-fill)/15",
       "paddingLeft]___[value:2",
@@ -810,6 +798,10 @@
       "translateX]___[value:-1/2",
       "translateY]___[value:-1/2",
       "top]___[value:1",
+      "outlineColor]___[value:likec4.compare.manual.outline",
+      "outlineWidth]___[value:4px",
+      "outlineStyle]___[value:dashed",
+      "outlineOffset]___[value:1.5",
       "right]___[value:0",
       "padding]___[value:2",
       "width]___[value:min-content",
@@ -829,6 +821,7 @@
       "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
       "fill]___[value:var(--likec4-palette-fill)",
       "stroke]___[value:var(--likec4-palette-stroke)",
+      "strokeWidth]___[value:1",
       "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
       "letterSpacing]___[value:0.2px",
       "paddingTop]___[value:0",
@@ -864,6 +857,20 @@
       "maxWidth]___[value:220px"
     ],
     "recipes": {
+      "edgeLabel": [
+        "pointerEvents]___[value:all]___[recipe:edgeLabel",
+        "isStepEdge]___[value:false]___[recipe:edgeLabel",
+        "cursor]___[value:default]___[recipe:edgeLabel",
+        "cursor]___[value:pointer]___[recipe:edgeLabel",
+        "*]___[value:false]___[recipe:edgeLabel",
+        "isStepEdge]___[value:true]___[recipe:edgeLabel",
+        "*]___[value:true]___[recipe:edgeLabel",
+        "*]___[value:pointer]___[recipe:edgeLabel",
+        "*]___[value:default]___[recipe:edgeLabel",
+        "pointerEvents]___[value:none]___[recipe:edgeLabel",
+        "*]___[value:none]___[recipe:edgeLabel",
+        "*]___[value:all]___[recipe:edgeLabel"
+      ],
       "overlay": [
         "fullscreen]___[value:false]___[recipe:overlay",
         "withBackdrop]___[value:true]___[recipe:overlay",
@@ -918,20 +925,7 @@
         "borderStyle]___[value:dotted]___[recipe:compoundNode"
       ],
       "edgeActionBtn": [],
-      "edgeLabel": [
-        "pointerEvents]___[value:all]___[recipe:edgeLabel",
-        "isStepEdge]___[value:false]___[recipe:edgeLabel",
-        "cursor]___[value:pointer]___[recipe:edgeLabel",
-        "cursor]___[value:default]___[recipe:edgeLabel",
-        "pointerEvents]___[value:none]___[recipe:edgeLabel",
-        "*]___[value:false]___[recipe:edgeLabel",
-        "isStepEdge]___[value:true]___[recipe:edgeLabel",
-        "*]___[value:true]___[recipe:edgeLabel",
-        "*]___[value:pointer]___[recipe:edgeLabel",
-        "*]___[value:default]___[recipe:edgeLabel",
-        "*]___[value:none]___[recipe:edgeLabel",
-        "*]___[value:all]___[recipe:edgeLabel"
-      ],
+      "edgePath": [],
       "elementNodeData": [],
       "elementShapeRecipe": [
         "shapetype]___[value:html]___[recipe:elementShapeRecipe",