@dskripchenko/diagrams 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -398,6 +398,7 @@ function context() {
 	canvasContext = null;
 	try {
 		const g = globalThis;
+		if (g.navigator?.userAgent?.includes("jsdom")) return canvasContext;
 		if (typeof g.OffscreenCanvas === "function") canvasContext = new g.OffscreenCanvas(1, 1).getContext("2d");
 		else if (g.document && typeof g.document.createElement === "function") canvasContext = g.document.createElement("canvas").getContext("2d");
 		if (canvasContext && canvasContext.measureText("M").width <= 0) canvasContext = null;
@@ -6079,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",
@@ -6087,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 = [
@@ -6105,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);
@@ -6197,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

@@ -397,6 +397,7 @@ function context() {
 	canvasContext = null;
 	try {
 		const g = globalThis;
+		if (g.navigator?.userAgent?.includes("jsdom")) return canvasContext;
 		if (typeof g.OffscreenCanvas === "function") canvasContext = new g.OffscreenCanvas(1, 1).getContext("2d");
 		else if (g.document && typeof g.document.createElement === "function") canvasContext = g.document.createElement("canvas").getContext("2d");
 		if (canvasContext && canvasContext.measureText("M").width <= 0) canvasContext = null;
@@ -6078,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",
@@ -6086,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 = [
@@ -6104,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);
@@ -6196,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.0",
+  "version": "1.0.2",
   "description": "Mermaid-syntax diagrams rendered to SVG with zero runtime dependencies — flowchart, sequence, state, pie, gantt",
   "keywords": [
     "diagram",
@@ -30,7 +30,6 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.28.0",
   "publishConfig": {
     "access": "public"
   },
@@ -50,21 +49,12 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "scripts": {
-    "build": "tsc --noEmit -p tsconfig.build.json && vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint src tests scripts",
-    "typecheck": "tsc --noEmit",
-    "changeset": "changeset",
-    "release": "pnpm build && changeset publish",
-    "check:browser": "node scripts/browser-check.mjs"
-  },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
     "@eslint/js": "^10.0.1",
     "@microsoft/api-extractor": "^7.59.4",
     "eslint": "^10.13.0",
+    "jsdom": "^29.1.1",
     "playwright": "1.64.1",
     "prettier": "^3.9.10",
     "typescript": "^6.0.3",
@@ -72,5 +62,15 @@
     "vite": "^8.3.5",
     "vite-plugin-dts": "^5.1.2",
     "vitest": "^5.0.5"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.build.json && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src tests scripts",
+    "typecheck": "tsc --noEmit",
+    "changeset": "changeset",
+    "release": "pnpm build && changeset publish",
+    "check:browser": "node scripts/browser-check.mjs"
   }
-}
+}