@likec4/diagram 1.59.3 → 1.60.0

package/dist/base/updateNodes.mjs

@@ -0,0 +1,47 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { deepEqual, shallowEqual } from "fast-equals";
+import { hasSubObject, isDefined, pickBy } from "remeda";
+import { getNodeDimensions } from "@xyflow/system";
+
+//#region src/base/updateNodes.ts
+const EMPTY_OBJ = {};
+function _update(current, updated) {
+	if (current === updated) return current;
+	updated = updated.map((update) => {
+		const existing = current.find((n) => n.id === update.id && n.type === update.type);
+		if (!existing) return update;
+		if (existing === update) return existing;
+		const isSameData = hasSubObject(existing.data, update.data);
+		let data = isSameData ? existing.data : update.data;
+		if (!isSameData) {
+			if (isDefined(existing.data.hovered) && !isDefined(data.hovered)) data = Object.assign({ hovered: existing.data.hovered }, data);
+			if (isDefined(existing.data.dimmed) && !isDefined(data.dimmed)) data = Object.assign({ dimmed: existing.data.dimmed }, data);
+		}
+		const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+		const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
+		const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
+		if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.ariaLabel, update.ariaLabel ?? existing.ariaLabel) && deepEqual(existing.ariaRole, update.ariaRole ?? existing.ariaRole) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+		const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
+		return {
+			...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
+			..."measured" in existing && { measured: {
+				width: update.width ?? update.initialWidth,
+				height: update.height ?? update.initialHeight
+			} },
+			...pickBy(update, isDefined),
+			width: update.width ?? update.initialWidth,
+			height: update.height ?? update.initialHeight,
+			...handles && { handles },
+			data
+		};
+	});
+	return shallowEqual(current, updated) ? current : updated;
+}
+function updateNodes(current, update) {
+	if (isDefined(update)) return _update(current, update);
+	update = current;
+	return (existing) => _update(existing, update);
+}
+
+//#endregion
+export { updateNodes };

package/dist/base-primitives/Markdown.d.mts

@@ -0,0 +1,34 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import "react";
+import { Tokens } from "@likec4/styles/tokens";
+import { RichTextOrEmpty } from "@likec4/core/types";
+//#region src/base-primitives/Markdown.d.ts
+export declare const Markdown: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "dangerouslySetInnerHTML" | "translate"> & {
+  value: RichTextOrEmpty;
+  /**
+   * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+   * @default false
+   */
+  uselikec4palette?: boolean;
+  /**
+   * Scale factor for the block
+   * @default 1
+   */
+  textScale?: number;
+  /**
+   * Font size for the block
+   * @default 'md'
+   */
+  fontSize?: Tokens["fontSizes"] | undefined;
+  /**
+   * If true, the component will not render anything if the value is empty.
+   * @default false
+   */
+  hideIfEmpty?: boolean | undefined;
+  /**
+   * Text to show if the value is empty.
+   * @default "no content"
+   */
+  emptyText?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/base-primitives/Markdown.mjs

@@ -0,0 +1,37 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Text } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { markdownBlock } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/Markdown.tsx
+const Markdown = forwardRef(({ value, textScale = 1, uselikec4palette = false, hideIfEmpty = false, emptyText = "no content", className, style, fontSize, ...props }, ref) => {
+	if (value.isEmpty && hideIfEmpty) return null;
+	const content = value.nonEmpty ? value.isMarkdown ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx("p", { children: value.text }) } : { children: /* @__PURE__ */ jsx(Text, {
+		component: "span",
+		fz: "xs",
+		c: "dimmed",
+		style: { userSelect: "none" },
+		children: emptyText
+	}) };
+	return /* @__PURE__ */ jsx(Box$1, {
+		...props,
+		ref,
+		className: cx(markdownBlock({
+			uselikec4palette,
+			value: value.isMarkdown ? "markdown" : "plaintext"
+		}), className),
+		style: {
+			...style,
+			...fontSize && { "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))` },
+			...textScale !== 1 && { ["--mantine-scale"]: textScale }
+		},
+		...content
+	});
+});
+Markdown.displayName = "Markdown";
+
+//#endregion
+export { Markdown };

package/dist/base-primitives/NodeHandles.d.mts

@@ -0,0 +1,10 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { AutoLayoutDirection } from "@likec4/core/types";
+//#region src/base-primitives/NodeHandles.d.ts
+/**
+ * XYFlow requires handles to be defined on nodes.
+ */
+export declare function DefaultHandles({ direction }: {
+  direction?: AutoLayoutDirection | undefined;
+}): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/NodeHandles.mjs

@@ -0,0 +1,44 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { nonexhaustive } from "@likec4/core";
+
+//#region src/base-primitives/NodeHandles.tsx
+/**
+* XYFlow requires handles to be defined on nodes.
+*/
+function DefaultHandles({ direction = "TB" }) {
+	let sourcePosition;
+	let targetPosition;
+	switch (direction) {
+		case "TB":
+			sourcePosition = Position.Bottom;
+			targetPosition = Position.Top;
+			break;
+		case "BT":
+			sourcePosition = Position.Top;
+			targetPosition = Position.Bottom;
+			break;
+		case "LR":
+			sourcePosition = Position.Right;
+			targetPosition = Position.Left;
+			break;
+		case "RL":
+			sourcePosition = Position.Left;
+			targetPosition = Position.Right;
+			break;
+		default: nonexhaustive(direction);
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		position: sourcePosition,
+		className: "likec4-node-handle-center"
+	}), /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		position: targetPosition,
+		className: "likec4-node-handle-center"
+	})] });
+}
+
+//#endregion
+export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodeProps } from "../../base/types.mjs";
+import { MouseEvent, ReactNode } from "react";
+import { Simplify } from "type-fest";
+//#region src/base-primitives/compound/CompoundActionButton.d.ts
+type CompoundActionButtonProps = Simplify<BaseNodeProps & {
+  icon?: ReactNode;
+  ariaLabel?: string;
+  onClick: (e: MouseEvent) => void;
+}>;
+export declare function CompoundActionButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: CompoundActionButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/compound/CompoundActionButton.mjs

@@ -0,0 +1,57 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { compoundActionBtn } from "./actionbtns.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/compound/CompoundActionButton.tsx
+const variants = {
+	normal: {
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	hovered: {
+		scale: 1.2,
+		x: -1,
+		y: -1
+	},
+	whileHover: {
+		scale: 1.4,
+		x: -3,
+		y: -1
+	},
+	whileTap: { scale: 1 }
+};
+function CompoundActionButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Navigate to view", onClick }) {
+	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	const isActionVisible = selected || isHoverDebounced;
+	let variant = isHoverDebounced ? "hovered" : "normal";
+	return /* @__PURE__ */ jsx(m.div, {
+		initial: false,
+		variants,
+		animate: variant,
+		whileHover: "whileHover",
+		whileTap: "whileTap",
+		className: "likec4-compound-navigation compound-action",
+		onClick: stopPropagation,
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
+			onClick,
+			onDoubleClick: stopPropagation,
+			children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
+		})
+	});
+}
+
+//#endregion
+export { CompoundActionButton };

package/dist/base-primitives/compound/CompoundDetailsButton.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodeProps } from "../../base/types.mjs";
+import { MouseEvent, ReactNode } from "react";
+import { Simplify } from "type-fest";
+//#region src/base-primitives/compound/CompoundDetailsButton.d.ts
+type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
+  icon?: ReactNode;
+  ariaLabel?: string;
+  onClick: (e: MouseEvent) => void;
+}>;
+export declare function CompoundDetailsButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: CompoundDetailsButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/compound/CompoundDetailsButton.mjs

@@ -0,0 +1,47 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { compoundActionBtn } from "./actionbtns.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/compound/CompoundDetailsButton.tsx
+const variants = {
+	normal: { scale: 1 },
+	hovered: { scale: 1.2 },
+	whileHover: { scale: 1.4 },
+	whileTap: { scale: 1 }
+};
+function CompoundDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
+	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	const isActionVisible = selected || isHoverDebounced;
+	const variant = isHoverDebounced ? "hovered" : "normal";
+	return /* @__PURE__ */ jsx(m.div, {
+		initial: false,
+		variants,
+		animate: variant,
+		whileHover: "whileHover",
+		whileTap: "whileTap",
+		className: "likec4-compound-details details-button",
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
+			onClick,
+			onDoubleClick: stopPropagation,
+			children: icon ?? /* @__PURE__ */ jsx(IconId, {
+				stroke: 1.8,
+				style: { width: "75%" }
+			})
+		})
+	});
+}
+
+//#endregion
+export { CompoundDetailsButton };

package/dist/base-primitives/compound/CompoundNodeContainer.d.mts

@@ -0,0 +1,17 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNode, BaseNodeProps } from "../../base/types.mjs";
+import { HTMLAttributes, PropsWithChildren } from "react";
+import { Color, ElementStyle } from "@likec4/core/types";
+//#region src/base-primitives/compound/CompoundNodeContainer.d.ts
+export type RequiredData = {
+  color: Color;
+  depth: number;
+  style: ElementStyle;
+};
+type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+  layoutId?: string | undefined;
+  nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
+}>;
+export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data } }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/compound/CompoundNodeContainer.mjs

@@ -0,0 +1,49 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { clamp } from "remeda";
+import * as m from "motion/react-m";
+import { compoundNode } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/compound/CompoundNodeContainer.tsx
+function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, children, style, ...rest }) {
+	const styles = useLikeC4Styles();
+	let opacity = clamp(data.style.opacity ?? 100, {
+		min: 0,
+		max: 100
+	});
+	const isTransparent = opacity < 98;
+	const borderOpacity = 50 + clamp(50 * (opacity / 100), {
+		min: 0,
+		max: 50
+	});
+	const compoundClass = compoundNode({
+		isTransparent,
+		inverseColor: opacity < 70,
+		borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
+	});
+	const depth = clamp(data.depth ?? 1, {
+		min: 1,
+		max: 5
+	});
+	return /* @__PURE__ */ jsx(m.div, {
+		className: cx(compoundClass, className),
+		initial: false,
+		"data-likec4-hovered": isHovered,
+		"data-likec4-color": data.color,
+		"data-compound-depth": depth,
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		tabIndex: -1,
+		animate: {
+			["--_border-transparency"]: `${borderOpacity}%`,
+			["--_compound-transparency"]: `${opacity}%`
+		},
+		style,
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { CompoundNodeContainer };

package/dist/base-primitives/compound/CompoundTitle.d.mts

@@ -0,0 +1,21 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { Color, ComputedNodeStyle, NodeId } from "@likec4/core/types";
+//#region src/base-primitives/compound/CompoundTitle.d.ts
+type RequiredData = {
+  id: NodeId;
+  title: string;
+  color: Color;
+  style: ComputedNodeStyle;
+  icon?: string | null;
+};
+type CompoundTitleProps = {
+  data: RequiredData;
+  /**
+   * Opt-in: hide the title from assistive technologies. The main diagram sets
+   * this because the compound node's accessible label already conveys the
+   * title, so re-exposing it here would cause a duplicate announcement.
+   */
+  'aria-hidden'?: boolean | undefined;
+};
+export declare function CompoundTitle({ data, 'aria-hidden': ariaHidden }: CompoundTitleProps): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/compound/CompoundTitle.mjs

@@ -0,0 +1,22 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { IconRenderer } from "../../context/IconRenderer.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/base-primitives/compound/CompoundTitle.tsx
+function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
+	const elementIcon = IconRenderer({
+		element: data,
+		className: "likec4-compound-icon"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "likec4-compound-title-container",
+		"aria-hidden": ariaHidden,
+		children: [elementIcon, /* @__PURE__ */ jsx("div", {
+			className: "likec4-compound-title",
+			children: data.title
+		})]
+	});
+}
+
+//#endregion
+export { CompoundTitle };

package/dist/base-primitives/compound/actionbtns.css.mjs

@@ -0,0 +1,13 @@
+import { cva } from "@likec4/styles/css";
+
+//#region src/base-primitives/compound/actionbtns.css.ts
+const compoundActionBtn = cva({
+	base: { transitionDuration: "medium" },
+	variants: { delay: { true: { transitionDelay: {
+		base: "[0.2s]",
+		_hover: "0"
+	} } } }
+});
+
+//#endregion
+export { compoundActionBtn };

package/dist/base-primitives/edge/EdgeActionButton.d.mts

@@ -0,0 +1 @@
+import { MouseEvent, ReactNode } from "react";

package/dist/base-primitives/edge/EdgeActionButton.mjs

@@ -0,0 +1,23 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { edgeActionBtn } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/edge/EdgeActionButton.tsx
+function EdgeActionButton({ icon, ariaLabel = "Navigate to view", onClick }) {
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		className: cx("nodrag nopan", edgeActionBtn()),
+		onPointerDownCapture: stopPropagation,
+		onClick,
+		role: "button",
+		"aria-label": ariaLabel,
+		onDoubleClick: stopPropagation,
+		children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
+	});
+}
+
+//#endregion
+export { EdgeActionButton };

package/dist/base-primitives/edge/EdgeContainer.d.mts

@@ -0,0 +1,4 @@
+import "../../base/types.mjs";
+import { PropsWithChildren } from "react";
+import { DiagramEdge } from "@likec4/core/types";
+import "type-fest";

package/dist/base-primitives/edge/EdgeContainer.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { pickBy } from "remeda";
+import { invariant } from "@likec4/core";
+
+//#region src/base-primitives/edge/EdgeContainer.tsx
+function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style, ...rest }) {
+	animated = animated || isActive;
+	const props = {
+		className: cx(className, "likec4-edge-container", selected && "selected", selectable && "selectable"),
+		"data-likec4-color": color,
+		"data-edge-dir": data.dir ?? "forward",
+		"data-edge-active": isActive,
+		"data-likec4-hovered": isHovered,
+		...animated && { "data-likec4-animated": animated },
+		...selected && { "data-likec4-selected": selected },
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		...pickBy(rest, (value, key) => value !== void 0 && key.startsWith("data-"))
+	};
+	if (component === "svg") return /* @__PURE__ */ jsx("svg", {
+		style,
+		...props,
+		children
+	});
+	invariant(component === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
+	return /* @__PURE__ */ jsx("g", {
+		style,
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { EdgeContainer };

package/dist/base-primitives/edge/EdgeLabel.d.mts

@@ -0,0 +1,5 @@
+import "../../base/types.mjs";
+import { ReactNode } from "react";
+import "motion/react";
+import { DiagramEdge } from "@likec4/core/types";
+import "type-fest";

package/dist/base-primitives/edge/EdgeLabel.mjs

@@ -0,0 +1,46 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { Box } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+import { edgeLabel } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/edge/EdgeLabel.tsx
+const EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, isSequenceStep: isStepEdge = false, stepNum, pointerEvents = "all", className, children, ...rest }, ref) => {
+	const hasLabel = isTruthy(label) || isTruthy(technology);
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		className: cx("likec4-edge-label", edgeLabel({
+			pointerEvents,
+			isStepEdge,
+			cursor: selectable || isStepEdge ? "pointer" : "default"
+		}), className),
+		"data-edge-id": id,
+		animate: { scale: isHovered && !selected ? 1.06 : 1 },
+		...rest,
+		children: [isStepEdge && stepNum && /* @__PURE__ */ jsx(Box, {
+			className: "likec4-edge-label__step-number",
+			children: stepNum
+		}), hasLabel && /* @__PURE__ */ jsxs(Box, {
+			className: "likec4-edge-label__contents",
+			children: [
+				isTruthy(label) && /* @__PURE__ */ jsx(Box, {
+					lineClamp: 5,
+					className: "likec4-edge-label__text",
+					children: label
+				}),
+				isTruthy(technology) && /* @__PURE__ */ jsx(Box, {
+					className: "likec4-edge-label__technology",
+					children: "[ " + technology + " ]"
+				}),
+				children
+			]
+		})]
+	});
+});
+EdgeLabel.displayName = "EdgeLabel";
+
+//#endregion
+export { EdgeLabel };

package/dist/base-primitives/edge/EdgeLabelContainer.d.mts

@@ -0,0 +1,4 @@
+import "../../base/types.mjs";
+import { HTMLAttributes } from "react";
+import { DiagramEdge } from "@likec4/core/types";
+import "type-fest";

package/dist/base-primitives/edge/EdgeLabelContainer.mjs

@@ -0,0 +1,40 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { EdgeLabelRenderer } from "@xyflow/react";
+import { isNumber } from "remeda";
+
+//#region src/base-primitives/edge/EdgeLabelContainer.tsx
+const toCssVarValue = (value) => {
+	if (value === void 0) return "";
+	return isNumber(value) ? `${Math.trunc(value)}px` : value;
+};
+function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, labelBBox, color = "gray" }, animated }, labelPosition: labelXY, className, style: contentStyle, children, ...rest }) {
+	let labelX = labelXY?.x ?? labelBBox?.x;
+	let labelY = labelXY?.y ?? labelBBox?.y;
+	if (labelX === void 0 || labelY === void 0) return null;
+	const translate = labelXY?.translate ?? "";
+	animated = animated || isActive;
+	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("nodrag nopan", "likec4-edge-label-container", className),
+		"data-likec4-hovered": isHovered,
+		"data-likec4-color": color,
+		"data-edge-active": isActive,
+		"data-edge-animated": animated || isActive,
+		...animated && { "data-likec4-animated": animated },
+		...selected !== false && { "data-likec4-selected": selected },
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		style: { transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}` },
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...contentStyle,
+				...labelBBox && { maxWidth: labelBBox.width + 20 }
+			},
+			children
+		})
+	}, id) });
+}
+
+//#endregion
+export { EdgeLabelContainer };

package/dist/base-primitives/edge/EdgeMarkers.d.mts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+import { RelationshipArrowType } from "@likec4/core/types";