@likec4/diagram 1.44.0 → 1.45.0

package/dist/utils/vector.d.ts

@@ -76,6 +76,11 @@ export declare class Vector implements VectorValue {
      * @returns A new vector that is the normalized version of this vector.
      */
     normalize(): Vector;
+    /**
+     * Rounds the components of the vector to the nearest integers.
+     * @returns A new vector with rounded components.
+     */
+    round(): Vector;
 }
 export declare function vector(source: VectorValue | Vector): Vector;
 export declare function vector(x: number, y: number): Vector;

package/dist/utils/vector.js

@@ -106,6 +106,13 @@ class Vector {
     }
     return new Vector(this.x / len, this.y / len);
   }
+  /**
+   * Rounds the components of the vector to the nearest integers.
+   * @returns A new vector with rounded components.
+   */
+  round() {
+    return new Vector(Math.round(this.x), Math.round(this.y));
+  }
 }
 function vector(...args) {
   if (args.length === 1 && args[0] instanceof Vector) {

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,6 +1,7 @@
 import { NonEmptyArray, Point, BBox } from '@likec4/core';
 import { InternalNode, Rect, XYPosition, Position } from '@xyflow/react';
 import { NodeHandle } from '@xyflow/system';
+import { MouseEvent as ReactMouseEvent } from 'react';
 import { Vector } from './vector';
 export declare function distance(a: XYPosition, b: XYPosition): number;
 /**
@@ -28,6 +29,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 +41,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
@@ -60,7 +62,7 @@ export declare const isInside: (test: Rect, target: Rect) => boolean;
 export declare function bezierControlPoints(points: NonEmptyArray<Point>): 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 { 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 { isArray, hasAtLeast } from 'remeda';
 import { vector } from './vector.js';
 
-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;
@@ -114,4 +82,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, extractMinimalInternalNode, getNodeCenter, getNodeIntersection, getNodeIntersectionFromCenterToPoint, isEqualMinimalInternalNodes, isSamePoint, stopPropagation };
+export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -65,30 +65,31 @@
     "@dagrejs/dagre": "1.1.5",
     "@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.9.3",
+    "@xyflow/system": "0.0.73",
     "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",
+    "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.45.0",
+    "@likec4/styles": "1.45.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.4.3",
+    "@pandacss/dev": "^1.5.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.5.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/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "oxlint": "1.29.0",
     "postcss": "8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "typescript": "5.9.3",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "4.0.8",
+    "vitest": "4.0.13",
     "wireit": "0.14.12",
     "zx": "8.8.5",
     "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.44.0"
+    "@likec4/tsconfig": "1.45.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.4.3",
+  "schemaVersion": "1.5.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,6 +217,8 @@
       "transitionDelay]___[value:0s]___[cond:_hover",
       "lineClamp]___[value:5",
       "fill]___[value:none",
+      "visibility]___[value:hidden",
+      "offsetDistance]___[value:50%",
       "transition]___[value:none]___[cond:_reduceGraphics",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
       "strokeOpacity]___[value:0.08",
@@ -249,7 +252,6 @@
       "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",
@@ -458,7 +460,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",
@@ -768,6 +770,12 @@
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
+      "stroke]___[value:likec4.compare.manual.outline",
+      "mixBlendMode]___[value:plus-lighter",
+      "strokeWidth]___[value:8px",
+      "strokeWidth]___[value:12px]___[cond:_whenHovered",
+      "strokeOpacity]___[value:0.3",
+      "strokeOpacity]___[value:0.5]___[cond:_whenHovered",
       "mixBlendMode]___[value:normal",
       "fill]___[value:var(--likec4-palette-relation-stroke)",
       "stroke]___[value:var(--likec4-palette-relation-stroke)",
@@ -775,7 +783,6 @@
       "strokeWidth]___[value:1",
       "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",
@@ -795,7 +802,7 @@
       "outlineOffset]___[value:1]___[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 +817,11 @@
       "translateX]___[value:-1/2",
       "translateY]___[value:-1/2",
       "top]___[value:1",
+      "outlineColor]___[value:likec4.compare.manual.outline",
+      "outlineWidth]___[value:2px",
+      "outlineWidth]___[value:4px]___[cond:_light",
+      "outlineStyle]___[value:solid",
+      "outlineOffset]___[value:1",
       "right]___[value:0",
       "padding]___[value:2",
       "width]___[value:min-content",