@likec4/diagram 1.59.4 → 1.60.0

package/dist/utils/view-bounds.mjs

@@ -0,0 +1,57 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { invariant } from "@likec4/core";
+import { BBox as BBox$1 } from "@likec4/core/geometry";
+
+//#region src/utils/view-bounds.ts
+/**
+* Picks appropriate bounds from the view,
+* depending on its type and dynamic variant
+*/
+function pickViewBounds(view, dynamicVariant) {
+	if (view._type === "dynamic") try {
+		if ((dynamicVariant ?? view.variant) === "sequence") {
+			invariant(view.sequenceLayout, "Sequence layout is not available");
+			invariant(view.sequenceLayout.bounds, "Sequence layout bounds are not available");
+			return view.sequenceLayout.bounds;
+		}
+	} catch (error) {
+		console.error(error);
+	}
+	return view.bounds;
+}
+function calcEdgeBounds({ points, controlPoints, labelBBox }) {
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	if (controlPoints) for (const p of controlPoints) {
+		minX = Math.min(minX, p.x);
+		minY = Math.min(minY, p.y);
+		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);
+		minY = Math.min(minY, labelBBox.y);
+		maxX = Math.max(maxX, labelBBox.x + labelBBox.width);
+		maxY = Math.max(maxY, labelBBox.y + labelBBox.height);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function calcViewBounds({ nodes, edges }) {
+	return BBox$1.expand(BBox$1.merge(...nodes, ...edges.map(calcEdgeBounds).filter((box) => isFinite(box.x) && isFinite(box.y))), 20);
+}
+
+//#endregion
+export { calcEdgeBounds, calcViewBounds, pickViewBounds };

package/dist/utils/view-routing.mjs

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+//#region src/utils/view-routing.ts
+/**
+* Returns a view's resolved routing mode, defaulting to `spline` when omitted.
+*/
+function viewRouting(view) {
+	return view.routing ?? "spline";
+}
+
+//#endregion
+export { viewRouting };

package/dist/utils/xyflow.mjs

@@ -0,0 +1,174 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Position } from "@xyflow/react";
+import { flatMap, hasAtLeast, isArray, isNumber } from "remeda";
+import { BBox, vector } from "@likec4/core/geometry";
+import { invariant } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { Bezier } from "bezier-js";
+
+//#region src/utils/xyflow.ts
+function isEqualRects(a, b) {
+	return Math.trunc(a.x) === Math.trunc(b.x) && Math.trunc(a.y) === Math.trunc(b.y) && Math.trunc(a.width) === Math.trunc(b.width) && Math.trunc(a.height) === Math.trunc(b.height);
+}
+function isLeafNodeType(type) {
+	return type !== "compound-element" && type !== "compound-deployment" && type !== "view-group";
+}
+function leafNodeRects(nodes) {
+	const rects = [];
+	for (const node of nodes) if (isLeafNodeType(node.type)) rects.push(nodeToRect$1(node));
+	return rects;
+}
+function nodeToRect$1(nd) {
+	return {
+		x: Math.trunc(nd.internals.positionAbsolute.x),
+		y: Math.trunc(nd.internals.positionAbsolute.y),
+		width: Math.round(nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0),
+		height: Math.round(nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0)
+	};
+}
+__name(nodeToRect$1, "nodeToRect");
+function getNodeCenter(node) {
+	const { width, height } = getNodeDimensions(node);
+	const { x, y } = node.internals.positionAbsolute;
+	return {
+		x: Math.round(x + width / 2),
+		y: Math.round(y + height / 2)
+	};
+}
+/**
+* Helper function returns the intersection point
+* of the line between the center of the intersectionNode and the target
+*
+* @param intersectionNode the node that is the center of the line
+* @param target position of the target
+* @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
+*/
+function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
+	const { width, height } = intersectionNode;
+	const nodeCenter = BBox.center(intersectionNode);
+	const v = vector(target.x, target.y).subtract(nodeCenter);
+	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).trunc().toObject();
+}
+function bezierControlPoints(points) {
+	let [start, ...bezierPoints] = points;
+	invariant(start, "start should be defined");
+	const handles = [];
+	while (hasAtLeast(bezierPoints, 3)) {
+		const [cp1, cp2, end, ...rest] = bezierPoints;
+		const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
+		const inflections = bezier.inflections();
+		if (inflections.length === 0) inflections.push(.5);
+		inflections.forEach((t) => {
+			const { x, y } = bezier.get(t);
+			handles.push({
+				x: Math.trunc(x),
+				y: Math.trunc(y)
+			});
+		});
+		bezierPoints = rest;
+		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;
+}
+/**
+* Checks if two points are the same, considering both XYPoint (object ) and Point (tuple) formats.
+* @returns `true` If points are within 2px
+*/
+function isSamePoint(a, b) {
+	if (a === b) return true;
+	const [ax, ay] = isArray(a) ? a : [a.x, a.y];
+	const [bx, by] = isArray(b) ? b : [b.x, b.y];
+	return Math.hypot(bx - ax, by - ay) < 2.1;
+}
+function stopPropagation(e) {
+	e.nativeEvent.stopImmediatePropagation();
+	e.stopPropagation();
+}
+const printPoint = (point) => {
+	return `${Math.trunc(point[0])},${Math.trunc(point[1])}`;
+};
+function bezierPath(bezierSpline) {
+	let [start, ...points] = bezierSpline;
+	invariant(start, "start should be defined");
+	let path = `M ${printPoint(start)}`;
+	while (hasAtLeast(points, 3)) {
+		const [cp1, cp2, end, ...rest] = points;
+		path = path + ` C ${printPoint(cp1)} ${printPoint(cp2)} ${printPoint(end)}`;
+		points = rest;
+	}
+	invariant(points.length === 0, "all points should be consumed");
+	return path;
+}
+/**
+* Parses a single padding value to a number
+* @internal
+* @param padding - Padding to parse
+* @param viewport - Width or height of the viewport
+* @returns The padding in pixels
+*/
+function parsePadding(padding, viewport) {
+	if (typeof padding === "number") return Math.floor((viewport - viewport / (1 + padding)) * .5);
+	if (typeof padding === "string" && padding.endsWith("px")) {
+		const paddingValue = parseFloat(padding);
+		if (!Number.isNaN(paddingValue)) return Math.floor(paddingValue);
+	}
+	if (typeof padding === "string" && padding.endsWith("%")) {
+		const paddingValue = parseFloat(padding);
+		if (!Number.isNaN(paddingValue)) return Math.floor(viewport * paddingValue * .01);
+	}
+	console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
+	return 0;
+}
+/**
+* Parses the paddings to an object with top, right, bottom, left, x and y paddings
+* @internal
+* @param padding - Padding to parse
+* @param width - Width of the viewport
+* @param height - Height of the viewport
+* @returns An object with the paddings in pixels
+*/
+function parsePaddings(padding, width, height) {
+	if (typeof padding === "string" || typeof padding === "number") {
+		const paddingY = parsePadding(padding, height);
+		const paddingX = parsePadding(padding, width);
+		return {
+			top: paddingY,
+			right: paddingX,
+			bottom: paddingY,
+			left: paddingX,
+			x: paddingX * 2,
+			y: paddingY * 2
+		};
+	}
+	if (typeof padding === "object") {
+		const top = parsePadding(padding.top ?? padding.y ?? 0, height);
+		const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
+		const left = parsePadding(padding.left ?? padding.x ?? 0, width);
+		const right = parsePadding(padding.right ?? padding.x ?? 0, width);
+		return {
+			top,
+			right,
+			bottom,
+			left,
+			x: left + right,
+			y: top + bottom
+		};
+	}
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		x: 0,
+		y: 0
+	};
+}
+
+//#endregion
+export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isLeafNodeType, isSamePoint, leafNodeRects, nodeToRect$1 as nodeToRect, parsePaddings, stopPropagation };

package/package.json

@@ -1,51 +1,33 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.59.4",
-  "license": "MIT",
-  "bugs": "https://github.com/likec4/likec4/issues",
-  "homepage": "https://likec4.dev",
-  "author": "Denis Davydkov <denis@davydkov.com>",
+  "version": "1.60.0",
   "description": "A React component library for rendering software architecture diagrams",
+  "homepage": "https://likec4.dev",
+  "bugs": "https://github.com/likec4/likec4/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/likec4/likec4.git",
     "directory": "packages/diagram"
   },
-  "sponsor": {
-    "url": "https://github.com/sponsors/davydkov"
-  },
-  "files": [
-    "dist",
-    "**/package.json",
-    "*.css",
-    "panda.buildinfo.json",
-    "!**/*.spec.*",
-    "!**/__*/**",
-    "!**/*.d.ts.map"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
+  "license": "MIT",
+  "author": "Denis Davydkov <denis@davydkov.com>",
+  "sideEffects": false,
   "type": "module",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
   "exports": {
     ".": {
       "sources": "./src/index.ts",
       "default": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "import": "./dist/index.mjs",
+        "default": "./dist/index.mjs"
       }
     },
     "./custom": {
       "sources": "./src/custom/index.ts",
       "default": {
-        "types": "./dist/custom/index.d.ts",
-        "import": "./dist/custom/index.js",
-        "default": "./dist/custom/index.js"
+        "types": "./dist/custom/index.d.mts",
+        "import": "./dist/custom/index.mjs",
+        "default": "./dist/custom/index.mjs"
       }
     },
     "./panda.buildinfo.json": "./panda.buildinfo.json",
@@ -55,59 +37,81 @@
     "./styles.css": "./styles.css",
     "./package.json": "./package.json"
   },
+  "files": [
+    "dist",
+    "**/package.json",
+    "*.css",
+    "panda.buildinfo.json",
+    "!**/*.spec.*",
+    "!**/__*/**",
+    "!**/*.d.ts.map"
+  ],
   "dependencies": {
-    "@likec4/core": "1.59.4",
-    "@likec4/styles": "1.59.4",
     "@dagrejs/dagre": "1.1.8",
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
+    "@likec4/core": "1.60.0",
+    "@likec4/styles": "1.60.0",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "9.6.0",
-    "@mantine/hooks": "9.6.0",
+    "@mantine/core": "9.7.1",
+    "@mantine/hooks": "9.7.1",
     "@nanostores/media-query": "0.1.2",
-    "@nanostores/react": "1.1.0",
-    "@react-hookz/web": "^25.2.0",
+    "@nanostores/react": "2.0.1",
+    "@react-hookz/web": "^25.3.0",
     "@xstate/react": "6.1.0",
-    "@xstate/store": "4.2.3",
-    "@xstate/store-react": "2.0.0",
+    "@xstate/store": "4.3.0",
+    "@xstate/store-react": "2.1.0",
+    "@xyflow/react": "12.12.0",
+    "@xyflow/system": "0.0.83",
     "bezier-js": "^6.1.4",
+    "d3-force": "^3.0.0",
     "d3-shape": "^3.2.0",
     "defu": "^6.1.7",
-    "fast-equals": "^6.0.3",
-    "immer": "^11.1.18",
+    "fast-equals": "^6.1.1",
+    "immer": "^11.1.21",
     "motion": "^12.43.0",
-    "nanostores": "1.5.3",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "react-error-boundary": "^6.1.4",
-    "remeda": "^2.45.0",
+    "nanostores": "1.5.5",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-error-boundary": "^6.1.6",
+    "remeda": "^2.51.0",
     "type-fest": "^4.41.0",
-    "xstate": "5.32.6",
-    "@xyflow/react": "12.11.6",
-    "@xyflow/system": "0.0.82",
-    "@tabler/icons-react": "3.46.0"
+    "xstate": "5.33.2"
   },
   "devDependencies": {
     "@likec4/devops": "1.59.4",
-    "@likec4/tsconfig": "1.59.4",
+    "@likec4/tsconfig": "1.60.0",
     "@pandacss/dev": "^1.12.1",
     "@statelyai/inspect": "^0.4.0",
+    "@tabler/icons-react": "3.49.0",
+    "@tsdown/css": "^0.23.0",
     "@types/bezier-js": "^4.1.3",
+    "@types/d3-force": "^3.0.10",
     "@types/d3-shape": "^3.1.8",
     "@types/node": "~22.19.19",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
-    "@vitejs/plugin-react": "^6.1.1",
-    "oxlint": "1.81.0",
-    "postcss": "8.5.28",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "oxc-transform-react": "^0.153.0",
+    "oxlint": "1.87.0",
+    "postcss": "8.5.29",
+    "postcss-import": "^17.0.0",
+    "tsdown": "^0.23.0",
     "typescript": "6.0.3",
-    "vite": "^8.2.2",
+    "vite": "^8.3.4",
     "vite-plugin-dts": "5.0.2",
     "vitest": "4.1.11",
     "zx": "8.8.5"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sponsor": {
+    "url": "https://github.com/sponsors/davydkov"
+  },
   "scripts": {
     "typecheck": "tsc --build --verbose",
-    "build": "vite build -m production",
+    "build": "tsdown",
     "pack": "pnpm pack",
     "test": "vitest run --no-isolate",
     "clean": "likec4ops clean",
@@ -115,6 +119,6 @@
     "lint:fix": "oxlint --type-aware --fix",
     "lint:package": "pnpx publint ./package.tgz"
   },
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js"
+  "types": "dist/index.d.mts",
+  "module": "dist/index.mjs"
 }

package/panda.buildinfo.json

@@ -384,6 +384,7 @@
       "mainAxis]___[value:12",
       "marginBottom]___[value:10",
       "marginBlock]___[value:10",
+      "marginTop]___[value:10",
       "paddingTop]___[value:100%",
       "left]___[value:2",
       "bottom]___[value:2",
@@ -786,6 +787,16 @@
       "r]___[value:[10]]___[cond:_hover",
       "transitionDuration]___[value:fastest]___[cond:_hover",
       "cursor]___[value:grabbing]___[cond:_groupActive",
+      "width]___[value:[100%]",
+      "height]___[value:[100%]",
+      "borderRadius]___[value:[50%]",
+      "backgroundColor]___[value:var(--likec4-palette-fill)",
+      "border]___[value:[2px solid var(--likec4-palette-stroke)]",
+      "left]___[value:[calc(100% + 6px)]",
+      "top]___[value:[50%]",
+      "translateY]___[value:-1/2",
+      "color]___[value:[var(--likec4-palette-hiContrast)]",
+      "opacity]___[value:[0.7]",
       "outlineColor]___[value:likec4.compare.outline]___[cond:& + .likec4-element-shape",
       "outlineWidth]___[value:[4px]]___[cond:& + .likec4-element-shape",
       "outlineStyle]___[value:dashed]___[cond:& + .likec4-element-shape",
@@ -799,7 +810,6 @@
       "paddingRight]___[value:xxs",
       "zIndex]___[value:[200]",
       "cursor]___[value:zoom-out",
-      "backgroundColor]___[value:var(--likec4-palette-fill)",
       "top]___[value:1",
       "translateX]___[value:-1/2",
       "--_color]___[value:var(--likec4-palette-stroke)",
@@ -1045,7 +1055,8 @@
       "elementNodeData": [
         "iconPosition]___[value:left]___[recipe:elementNodeData",
         "withIconColor]___[value:false]___[recipe:elementNodeData",
-        "withIconBlend]___[value:false]___[recipe:elementNodeData"
+        "withIconBlend]___[value:false]___[recipe:elementNodeData",
+        "sizing]___[value:auto]___[recipe:elementNodeData"
       ],
       "elementNode": [],
       "elementShapeRecipe": [