@likec4/diagram 1.45.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/xyflow.d.ts

@@ -1,8 +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 { MouseEvent as ReactMouseEvent } from 'react';
-import { Vector } from './vector';
 export declare function distance(a: XYPosition, b: XYPosition): number;
 /**
  * Minimal type to access only needed properties of InternalNode
@@ -59,7 +58,7 @@ 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: ReactMouseEvent): void;

package/dist/utils/xyflow.js

@@ -1,10 +1,10 @@
 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 { isArray, hasAtLeast } from 'remeda';
-import { vector } from './vector.js';
 
 function isEqualRects(a, b) {
   return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
@@ -56,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();
@@ -82,4 +83,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };
+export { bezierControlPoints, bezierPath, distanceBetweenPoints, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -62,7 +62,7 @@
     "./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.9",
@@ -71,25 +71,25 @@
     "@nanostores/media-query": "0.1.2",
     "@react-hookz/web": "^25.2.0",
     "@xstate/react": "6.0.0",
-    "@xyflow/react": "12.9.3",
-    "@xyflow/system": "0.0.73",
+    "@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.3",
     "khroma": "2.1.0",
-    "motion": "^12.23.24",
+    "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.45.0",
-    "@likec4/styles": "1.45.0"
+    "@likec4/core": "1.46.0",
+    "@likec4/styles": "1.46.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.5.1",
+    "@pandacss/dev": "^1.6.1",
     "@types/react": "^18.x || ^19.x",
     "@types/react-dom": "^18.x || ^19.x",
     "react": "^18.x || ^19.x",
@@ -107,27 +107,27 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.5.1",
+    "@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.6",
+    "@types/node": "~22.19.1",
+    "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "oxlint": "1.29.0",
+    "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.4",
+    "vite": "^7.2.6",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "4.0.13",
+    "vitest": "4.0.15",
     "wireit": "0.14.12",
     "zx": "8.8.5",
     "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.45.0"
+    "@likec4/tsconfig": "1.46.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.5.1",
+  "schemaVersion": "1.6.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -217,35 +217,6 @@
       "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",
-      "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",
@@ -303,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)",
@@ -313,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",
@@ -344,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]",
@@ -374,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",
@@ -389,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",
@@ -403,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",
@@ -631,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<___>& > *",
@@ -771,35 +749,38 @@
       "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)",
-      "fillOpacity]___[value:0.75",
-      "strokeWidth]___[value:1",
+      "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",
-      "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",
+      "visibility]___[value:hidden",
+      "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 oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
@@ -818,10 +799,9 @@
       "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",
+      "outlineWidth]___[value:4px",
+      "outlineStyle]___[value:dashed",
+      "outlineOffset]___[value:1.5",
       "right]___[value:0",
       "padding]___[value:2",
       "width]___[value:min-content",
@@ -841,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",
@@ -876,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",
@@ -930,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",