@likec4/diagram 1.55.1 → 1.57.0

package/dist/utils/index.js

@@ -0,0 +1,5 @@
+import "./roundDpr.js";
+import "./xyflow.js";
+import "./view-bounds.js";
+import { vector as vector$1 } from "@likec4/core/geometry";
+export { vector$1 as vector };

package/dist/utils/roundDpr.js

@@ -1,20 +1,24 @@
-import { clamp } from 'remeda';
-
+import "../_virtual/_rolldown/runtime.js";
+import { clamp } from "remeda";
+//#region src/utils/roundDpr.ts
+/**
+* Returns the current device pixel ratio (DPR) given the passed options
+*
+* @param options
+* @returns current device pixel ratio
+*/
 function getDevicePixelRatio() {
-  const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
-  const dpr = hasDprProp ? window.devicePixelRatio : 1;
-  return clamp(Math.floor(dpr), {
-    min: 1,
-    max: 4
-  });
+	const dpr = typeof window !== "undefined" && typeof window.devicePixelRatio === "number" ? window.devicePixelRatio : 1;
+	return clamp(Math.floor(dpr), {
+		min: 1,
+		max: 4
+	});
 }
-let knownDpr;
+var knownDpr;
 function roundDpr(v) {
-  knownDpr ??= getDevicePixelRatio();
-  if (knownDpr < 2) {
-    return Math.round(v);
-  }
-  return Math.round(v * knownDpr) / knownDpr;
+	knownDpr ??= getDevicePixelRatio();
+	if (knownDpr < 2) return Math.round(v);
+	return Math.round(v * knownDpr) / knownDpr;
 }
-
+//#endregion
 export { roundDpr };

package/dist/utils/view-bounds.js

@@ -1,62 +1,55 @@
-import { invariant } from '@likec4/core';
-import { BBox } from '@likec4/core/geometry';
-
+import "../_virtual/_rolldown/runtime.js";
+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 {
-      const variant = dynamicVariant ?? view.variant;
-      if (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;
+	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
-  };
+	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.expand(
-    BBox.merge(
-      ...nodes,
-      ...edges.map(calcEdgeBounds).filter((box) => isFinite(box.x) && isFinite(box.y))
-    ),
-    20
-  );
+	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/xyflow.js

@@ -1,131 +1,161 @@
-import { BBox, 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';
-
-function nodeToRect(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)
-  };
+import { __name } from "../_virtual/_rolldown/runtime.js";
+import "@xyflow/react";
+import { hasAtLeast, isArray } 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 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)
-  };
+	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();
+	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 = [
-    // start
-  ];
-  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(0.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;
+	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;
+	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();
+	e.nativeEvent.stopImmediatePropagation();
+	e.stopPropagation();
 }
-const printPoint = (point) => {
-  return `${Math.trunc(point[0])},${Math.trunc(point[1])}`;
+var 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;
+	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)) * 0.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 * 0.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;
+	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 };
+	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
+	};
 }
-
-export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isSamePoint, nodeToRect, parsePaddings, stopPropagation };
+//#endregion
+export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isSamePoint, nodeToRect$1 as nodeToRect, parsePaddings, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.55.1",
+  "version": "1.57.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -65,8 +65,8 @@
     "@dagrejs/dagre": "1.1.8",
     "@floating-ui/dom": "^1.7.6",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "8.3.18",
-    "@mantine/hooks": "8.3.18",
+    "@mantine/core": "9.2.1",
+    "@mantine/hooks": "9.2.1",
     "@nanostores/media-query": "0.1.2",
     "@nanostores/react": "1.1.0",
     "@react-hookz/web": "^25.2.0",
@@ -85,45 +85,38 @@
     "motion": "^12.36.0",
     "nanostores": "1.2.0",
     "react-error-boundary": "^6.1.1",
-    "react-shadow": "^20.6.0",
     "remeda": "^2.33.7",
     "type-fest": "^4.41.0",
     "xstate": "5.30.0",
-    "@likec4/core": "1.55.1",
-    "@likec4/styles": "1.55.1"
+    "@tabler/icons-react": "3.44.0",
+    "@likec4/styles": "1.57.0",
+    "@likec4/core": "1.57.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.9.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
-  "peerDependenciesMeta": {
-    "@pandacss/dev": {
-      "optional": true
-    }
-  },
   "devDependencies": {
-    "@pandacss/dev": "^1.9.1",
+    "@pandacss/dev": "^1.11.1",
     "@statelyai/inspect": "^0.4.0",
-    "@tabler/icons-react": "3.40.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.8",
-    "@types/node": "~22.19.15",
-    "@types/react": "19.2.14",
+    "@types/node": "~22.19.19",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react-compiler-runtime": "^1.0.0",
     "oxlint": "1.59.0",
-    "postcss": "8.5.9",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "postcss": "8.5.15",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "typescript": "5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
+    "vite": "^8.0.14",
+    "vite-plugin-dts": "5.0.0-beta.6",
     "vitest": "4.1.3",
-    "wireit": "0.14.12",
     "zx": "8.8.5",
-    "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.55.1"
+    "@likec4/devops": "1.57.0",
+    "@likec4/tsconfig": "1.57.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.9.1",
+  "schemaVersion": "1.11.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -977,20 +977,6 @@
         "*]___[value:default]___[recipe:navigationPanelActionIcon",
         "*]___[value:filled]___[recipe:navigationPanelActionIcon"
       ],
-      "elementNodeData": [
-        "iconPosition]___[value:left]___[recipe:elementNodeData",
-        "withIconColor]___[value:false]___[recipe:elementNodeData",
-        "withIconColor]___[value:true]___[recipe:elementNodeData",
-        "*]___[value:true]___[recipe:elementNodeData",
-        "*]___[value:false]___[recipe:elementNodeData",
-        "*]___[value:left]___[recipe:elementNodeData",
-        "iconPosition]___[value:right]___[recipe:elementNodeData",
-        "*]___[value:right]___[recipe:elementNodeData",
-        "iconPosition]___[value:top]___[recipe:elementNodeData",
-        "*]___[value:top]___[recipe:elementNodeData",
-        "iconPosition]___[value:bottom]___[recipe:elementNodeData",
-        "*]___[value:bottom]___[recipe:elementNodeData"
-      ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",
@@ -1018,6 +1004,20 @@
       "edgeActionBtn": [],
       "edgePath": [],
       "actionButtons": [],
+      "elementNodeData": [
+        "iconPosition]___[value:left]___[recipe:elementNodeData",
+        "withIconColor]___[value:false]___[recipe:elementNodeData",
+        "withIconColor]___[value:true]___[recipe:elementNodeData",
+        "*]___[value:true]___[recipe:elementNodeData",
+        "*]___[value:false]___[recipe:elementNodeData",
+        "*]___[value:left]___[recipe:elementNodeData",
+        "iconPosition]___[value:right]___[recipe:elementNodeData",
+        "*]___[value:right]___[recipe:elementNodeData",
+        "iconPosition]___[value:top]___[recipe:elementNodeData",
+        "*]___[value:top]___[recipe:elementNodeData",
+        "iconPosition]___[value:bottom]___[recipe:elementNodeData",
+        "*]___[value:bottom]___[recipe:elementNodeData"
+      ],
       "elementNode": [],
       "elementShapeRecipe": [
         "withBorder]___[value:none]___[recipe:elementShapeRecipe",