@dskripchenko/diagrams 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -6080,6 +6080,7 @@ function actor(a) {
 		ry: 4
 	}), renderLabel(a.label, a.x, a.top + a.height / 2, { className: "dg-actor-label" })]);
 }
+/** A block's outline and section rules: drawn under the activation bars. */
 function frame(f) {
 	const parts = [el("rect", {
 		class: "dg-block",
@@ -6088,6 +6089,21 @@ function frame(f) {
 		width: f.right - f.left,
 		height: f.bottom - f.top
 	})];
+	for (const section of f.sections) parts.push(el("line", {
+		class: "dg-block-sep",
+		x1: f.left,
+		y1: section.y,
+		x2: f.right,
+		y2: section.y
+	}));
+	return el("g", { class: `dg-frame dg-frame-${f.block}` }, parts);
+}
+/**
+* A block's tab and guard texts: drawn over the activation bars, which would
+* otherwise cut through a label like "loop" that sits on a lifeline.
+*/
+function frameLabels(f) {
+	const parts = [];
 	if (f.tab) {
 		const w = f.tabWidth;
 		const tab = [
@@ -6106,17 +6122,8 @@ function frame(f) {
 		anchor: "start",
 		className: "dg-block-guard"
 	}));
-	for (const section of f.sections) {
-		parts.push(el("line", {
-			class: "dg-block-sep",
-			x1: f.left,
-			y1: section.y,
-			x2: f.right,
-			y2: section.y
-		}));
-		if (section.guard) parts.push(renderLabel(section.guard, (f.left + f.right) / 2, section.y + 4 + section.guard.height / 2, { className: "dg-block-guard" }));
-	}
-	return el("g", { class: `dg-frame dg-frame-${f.block}` }, parts);
+	for (const section of f.sections) if (section.guard) parts.push(renderLabel(section.guard, (f.left + f.right) / 2, section.y + 4 + section.guard.height / 2, { className: "dg-block-guard" }));
+	return el("g", { class: `dg-frame-labels dg-frame-${f.block}` }, parts.filter((p) => !!p));
 }
 function message(m, prefix) {
 	const kind = markerFor(m.head);
@@ -6198,6 +6205,7 @@ function renderSequenceLayout(layout, id, title, description) {
 			width: 10,
 			height: a.bottom - a.top
 		}))),
+		el("g", { class: "dg-frame-label-layer" }, layout.frames.map(frameLabels)),
 		el("g", { class: "dg-messages" }, layout.messages.map((m) => message(m, id))),
 		el("g", { class: "dg-notes" }, layout.notes.map((n) => el("g", { class: "dg-note-group" }, [el("rect", {
 			class: "dg-note",

package/dist/index.mjs

@@ -6079,6 +6079,7 @@ function actor(a) {
 		ry: 4
 	}), renderLabel(a.label, a.x, a.top + a.height / 2, { className: "dg-actor-label" })]);
 }
+/** A block's outline and section rules: drawn under the activation bars. */
 function frame(f) {
 	const parts = [el("rect", {
 		class: "dg-block",
@@ -6087,6 +6088,21 @@ function frame(f) {
 		width: f.right - f.left,
 		height: f.bottom - f.top
 	})];
+	for (const section of f.sections) parts.push(el("line", {
+		class: "dg-block-sep",
+		x1: f.left,
+		y1: section.y,
+		x2: f.right,
+		y2: section.y
+	}));
+	return el("g", { class: `dg-frame dg-frame-${f.block}` }, parts);
+}
+/**
+* A block's tab and guard texts: drawn over the activation bars, which would
+* otherwise cut through a label like "loop" that sits on a lifeline.
+*/
+function frameLabels(f) {
+	const parts = [];
 	if (f.tab) {
 		const w = f.tabWidth;
 		const tab = [
@@ -6105,17 +6121,8 @@ function frame(f) {
 		anchor: "start",
 		className: "dg-block-guard"
 	}));
-	for (const section of f.sections) {
-		parts.push(el("line", {
-			class: "dg-block-sep",
-			x1: f.left,
-			y1: section.y,
-			x2: f.right,
-			y2: section.y
-		}));
-		if (section.guard) parts.push(renderLabel(section.guard, (f.left + f.right) / 2, section.y + 4 + section.guard.height / 2, { className: "dg-block-guard" }));
-	}
-	return el("g", { class: `dg-frame dg-frame-${f.block}` }, parts);
+	for (const section of f.sections) if (section.guard) parts.push(renderLabel(section.guard, (f.left + f.right) / 2, section.y + 4 + section.guard.height / 2, { className: "dg-block-guard" }));
+	return el("g", { class: `dg-frame-labels dg-frame-${f.block}` }, parts.filter((p) => !!p));
 }
 function message(m, prefix) {
 	const kind = markerFor(m.head);
@@ -6197,6 +6204,7 @@ function renderSequenceLayout(layout, id, title, description) {
 			width: 10,
 			height: a.bottom - a.top
 		}))),
+		el("g", { class: "dg-frame-label-layer" }, layout.frames.map(frameLabels)),
 		el("g", { class: "dg-messages" }, layout.messages.map((m) => message(m, id))),
 		el("g", { class: "dg-notes" }, layout.notes.map((n) => el("g", { class: "dg-note-group" }, [el("rect", {
 			class: "dg-note",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dskripchenko/diagrams",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Mermaid-syntax diagrams rendered to SVG with zero runtime dependencies — flowchart, sequence, state, pie, gantt",
   "keywords": [
     "diagram",