@likec4/diagram 1.59.0 → 1.59.1

package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js

@@ -156,6 +156,27 @@ var labelText = css.raw({
 	textOverflow: "ellipsis"
 });
 var LabelSpan = styled("span", { base: labelText });
+/**
+* Height of the leading step badge; also the line-height of the first label line
+* so that a multiline label keeps its first line aligned with the badge/arrow.
+*/
+var rowLeadingHeight = "18px";
+/** Groups the step badge and arrow so they stay centered against the first label line. */
+var leadingIcons = css.raw({
+	flex: "none",
+	display: "flex",
+	alignItems: "center",
+	gap: "2",
+	height: rowLeadingHeight
+});
+var MultilineLabelSpan = styled("span", { base: css.raw({
+	flex: "1",
+	minWidth: "0",
+	fontSize: "xs",
+	lineHeight: rowLeadingHeight,
+	whiteSpace: "pre-line",
+	overflowWrap: "anywhere"
+}) });
 var selectFlow = selectDiagramContext((s) => {
 	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
 	const description = s.view.description;
@@ -425,41 +446,41 @@ var StepRow = ({ node, elementProps, selected }) => {
 	const { stepnum, source, target, label, notes } = node.nodeProps;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box$1, {
 		...elementProps,
-		className: cx(elementProps.className, css(rowBase)),
-		children: [
-			/* @__PURE__ */ jsx(StepNum, { children: stepnum }),
-			/* @__PURE__ */ jsx(IconArrowRight, {
+		className: cx(elementProps.className, css(rowBase, { alignItems: "flex-start" })),
+		children: [/* @__PURE__ */ jsxs(Box$1, {
+			className: css(leadingIcons),
+			children: [/* @__PURE__ */ jsx(StepNum, { children: stepnum }), /* @__PURE__ */ jsx(IconArrowRight, {
 				size: 13,
 				className: css({
 					flex: "none",
 					color: "text.dimmed"
 				})
-			}),
-			label ? /* @__PURE__ */ jsx(LabelSpan, { children: label }) : /* @__PURE__ */ jsxs(HStack, {
-				css: {
-					gap: "1",
-					minWidth: "0",
-					flex: "1"
-				},
-				children: [
-					/* @__PURE__ */ jsx(LabelSpan, {
-						css: {
-							flex: "none",
-							color: "text.dimmed"
-						},
-						children: source
-					}),
-					/* @__PURE__ */ jsx(IconArrowRight, {
-						size: 11,
-						className: css({
-							flex: "none",
-							color: "text.dimmed"
-						})
-					}),
-					/* @__PURE__ */ jsx(LabelSpan, { children: target })
-				]
-			})
-		]
+			})]
+		}), label ? /* @__PURE__ */ jsx(MultilineLabelSpan, { children: label }) : /* @__PURE__ */ jsxs(HStack, {
+			css: {
+				gap: "1",
+				minWidth: "0",
+				flex: "1",
+				minHeight: rowLeadingHeight
+			},
+			children: [
+				/* @__PURE__ */ jsx(LabelSpan, {
+					css: {
+						flex: "none",
+						color: "text.dimmed"
+					},
+					children: source
+				}),
+				/* @__PURE__ */ jsx(IconArrowRight, {
+					size: 11,
+					className: css({
+						flex: "none",
+						color: "text.dimmed"
+					})
+				}),
+				/* @__PURE__ */ jsx(LabelSpan, { children: target })
+			]
+		})]
 	}), notes && /* @__PURE__ */ jsx(Markdown, {
 		value: RichText.from(notes),
 		fontSize: "sm",

package/dist/likec4diagram/xyflow-sequence/layouter.js

@@ -112,6 +112,11 @@ var SequenceViewLayouter = class {
 		const { column, row } = type === "source" ? step.from : step.to;
 		const x = this.actorBox(column).centerX;
 		const { rowTop } = nonNullable(this.#rows[row]);
+		if (step.isSelfLoop && type === "target") return {
+			cx: x.value(),
+			cy: rowTop.value(),
+			height: 24
+		};
 		return {
 			cx: x.value(),
 			cy: rowTop.value() + 40 + step.offset,
@@ -198,7 +203,7 @@ var SequenceViewLayouter = class {
 		let height = step.label?.height ? step.label.height + 50 + 24 : 100;
 		height = Math.max(height, 100) + step.offset;
 		this.ensureRow(step.from.row, height);
-		if (step.isSelfLoop) this.ensureRow(step.to.row, 0);
+		if (step.to.row !== step.from.row) this.ensureRow(step.to.row, 24);
 		return this;
 	}
 	/**