@loopstack/loopstack-studio 0.25.0 → 0.25.2

package/dist/node_modules/mermaid/dist/chunks/mermaid.core/{blockDiagram-VD42YOAC.js → blockDiagram-DXYQGD6D.js}

@@ -1,17 +1,17 @@
 import { __name, log } from "./chunk-AGHRB4JF.js";
 import rgba_default from "../../../../khroma/dist/methods/rgba.js";
 import channel_default from "../../../../khroma/dist/methods/channel.js";
-import { clear, common_default, configureSvgSize, evaluate, getConfig, getConfig2, getUrl, sanitizeText } from "./chunk-ABZYJK2D.js";
+import { clear, common_default, configureSvgSize, getConfig, getConfig2, getEffectiveHtmlLabels, getUrl, sanitizeText } from "./chunk-ICPOFSXX.js";
 import select_default from "../../../../d3-selection/src/select.js";
 import line_default from "../../../../d3-shape/src/line.js";
 import basis_default from "../../../../d3-shape/src/curve/basis.js";
 import "../../../../d3/src/index.js";
-import { getLineFunctionsWithOffset } from "./chunk-HN2XXSSU.js";
-import { getSubGraphTitleMargins } from "./chunk-CVBHYZKI.js";
-import { decodeEntities, getStylesFromArray, utils_default } from "./chunk-S3R3BYOJ.js";
-import { createText, replaceIconSubstring } from "./chunk-JA3XYJ7Z.js";
-import clone_default from "../../../../lodash-es/clone.js";
+import { computeLabelTransform, getLineFunctionsWithOffset } from "./chunk-BSJP7CBP.js";
+import { decodeEntities, getStylesFromArray, utils_default } from "./chunk-5PVQY5BW.js";
+import { configureLabelImages, getSubGraphTitleMargins } from "./chunk-ZZ45TVLE.js";
+import { createText } from "./chunk-U2HBQHQK.js";
 import { getIconStyles } from "./chunk-FMBD7UC4.js";
+import clone_default from "../../../../lodash-es/clone.js";
 import { Graph } from "../../../../dagre-d3-es/src/graphlib/graph.js";
 import "../../../../dagre-d3-es/src/graphlib/index.js";
 var parser = (function() {
@@ -1149,7 +1149,7 @@ var parser = (function() {
 	return __name(z, "Parser"), z.prototype = R, R.Parser = z, new z();
 })();
 parser.parser = parser;
-var block_default = parser, blockDatabase = /* @__PURE__ */ new Map(), edgeList = [], edgeCount = /* @__PURE__ */ new Map(), COLOR_KEYWORD = "color", FILL_KEYWORD = "fill", BG_FILL = "bgFill", STYLECLASS_SEP = ",", config = getConfig2(), classes = /* @__PURE__ */ new Map(), sanitizeText2 = /* @__PURE__ */ __name((e) => common_default.sanitizeText(e, config), "sanitizeText"), addStyleClass = /* @__PURE__ */ __name(function(e, S = "") {
+var block_default = parser, blockDatabase = /* @__PURE__ */ new Map(), edgeList = [], edgeCount = /* @__PURE__ */ new Map(), COLOR_KEYWORD = "color", FILL_KEYWORD = "fill", BG_FILL = "bgFill", STYLECLASS_SEP = ",", config = getConfig2(), classes = /* @__PURE__ */ new Map(), diagramId = "", sanitizeText2 = /* @__PURE__ */ __name((e) => common_default.sanitizeText(e, config), "sanitizeText"), addStyleClass = /* @__PURE__ */ __name(function(e, S = "") {
 	let C = classes.get(e);
 	C || (C = {
 		id: e,
@@ -1222,7 +1222,7 @@ var block_default = parser, blockDatabase = /* @__PURE__ */ new Map(), edgeList
 		type: "composite",
 		children: [],
 		columns: -1
-	}, blockDatabase = /* @__PURE__ */ new Map([["root", rootBlock]]), blocks = [], classes = /* @__PURE__ */ new Map(), edgeList = [], edgeCount = /* @__PURE__ */ new Map();
+	}, blockDatabase = /* @__PURE__ */ new Map([["root", rootBlock]]), blocks = [], classes = /* @__PURE__ */ new Map(), edgeList = [], edgeCount = /* @__PURE__ */ new Map(), diagramId = "";
 }, "clear");
 function typeStr2Type(e) {
 	switch (log.debug("typeStr2Type", e), e) {
@@ -1285,7 +1285,11 @@ var cnt = 0, blockDB_default = {
 		return classes;
 	}, "getClasses"),
 	clear: clear2,
-	generateId: /* @__PURE__ */ __name(() => (cnt++, "id-" + Math.random().toString(36).substr(2, 12) + "-" + cnt), "generateId")
+	generateId: /* @__PURE__ */ __name(() => (cnt++, "id-" + Math.random().toString(36).substr(2, 12) + "-" + cnt), "generateId"),
+	setDiagramId: /* @__PURE__ */ __name((e) => {
+		diagramId = e;
+	}, "setDiagramId"),
+	getDiagramId: /* @__PURE__ */ __name(() => diagramId, "getDiagramId")
 }, fade = /* @__PURE__ */ __name((e, S) => {
 	let T = channel_default;
 	return rgba_default(T(e, "r"), T(e, "g"), T(e, "b"), S);
@@ -1349,6 +1353,17 @@ var cnt = 0, blockDB_default = {
 
   .edgeLabel {
     background-color: ${e.edgeLabelBackground};
+    /*
+     * This is for backward compatibility with existing code that didn't
+     * add a \`<p>\` around edge labels.
+     *
+     * TODO: We should probably remove this in a future release.
+     */
+    p {
+      margin: 0;
+      padding: 0;
+      display: inline;
+    }
     rect {
       opacity: 0.5;
       background-color: ${e.edgeLabelBackground};
@@ -1359,8 +1374,7 @@ var cnt = 0, blockDB_default = {
 
   /* For html labels only */
   .labelBkg {
-    background-color: ${fade(e.edgeLabelBackground, .5)};
-    // background-color:
+    background-color: ${e.edgeLabelBackground};
   }
 
   .node .cluster {
@@ -1453,13 +1467,13 @@ __name(calculateBlockPosition, "calculateBlockPosition");
 var getMaxChildSize = /* @__PURE__ */ __name((e) => {
 	let C = 0, w = 0;
 	for (let T of e.children) {
-		let { width: E, height: D, x: O, y: k } = T.size ?? {
+		let { width: e, height: E, x: D, y: O } = T.size ?? {
 			width: 0,
 			height: 0,
 			x: 0,
 			y: 0
 		};
-		log.debug("getMaxChildSize abc95 child:", T.id, "width:", E, "height:", D, "x:", O, "y:", k, T.type), T.type !== "space" && (E > C && (C = E / (e.widthInColumns ?? 1)), D > w && (w = D));
+		log.debug("getMaxChildSize abc95 child:", T.id, "width:", e, "height:", E, "x:", D, "y:", O, T.type), T.type !== "space" && (e > C && (C = e / (T.widthInColumns ?? 1)), E > w && (w = E));
 	}
 	return {
 		width: C,
@@ -1516,20 +1530,38 @@ function layoutBlocks(e, C) {
 	if (log.debug("layoutBlocks columns abc95", e.id, "=>", w, e), e.children && e.children.length > 0) {
 		let T = e?.children[0]?.size?.width ?? 0, E = e.children.length * T + (e.children.length - 1) * padding;
 		log.debug("widthOfChildren 88", E, "posX");
-		let D = 0;
+		let D = /* @__PURE__ */ new Map();
+		{
+			let S = 0;
+			for (let C of e.children) {
+				if (!C.size) continue;
+				let { py: e } = calculateBlockPosition(w, S), T = D.get(e) ?? 0;
+				C.size.height > T && D.set(e, C.size.height);
+				let E = C?.widthInColumns ?? 1;
+				w > 0 && (E = Math.min(E, w - S % w)), S += E;
+			}
+		}
+		let O = /* @__PURE__ */ new Map();
+		{
+			let e = 0, S = [...D.keys()].sort((e, S) => e - S);
+			for (let C of S) O.set(C, e), e += (D.get(C) ?? 0) + padding;
+		}
+		let k = 0;
 		log.debug("abc91 block?.size?.x", e.id, e?.size?.x);
-		let O = e?.size?.x ? e?.size?.x + (-e?.size?.width / 2 || 0) : -padding, k = 0;
+		let A = e?.size?.x ? e?.size?.x + (-e?.size?.width / 2 || 0) : -padding, j = 0;
 		for (let T of e.children) {
 			let E = e;
 			if (!T.size) continue;
-			let { width: A, height: j } = T.size, { px: M, py: N } = calculateBlockPosition(w, D);
-			if (N != k && (k = N, O = e?.size?.x ? e?.size?.x + (-e?.size?.width / 2 || 0) : -padding, log.debug("New row in layout for block", e.id, " and child ", T.id, k)), log.debug(`abc89 layout blocks (child) id: ${T.id} Pos: ${D} (px, py) ${M},${N} (${E?.size?.x},${E?.size?.y}) parent: ${E.id} width: ${A}${padding}`), E.size) {
-				let e = A / 2;
-				T.size.x = O + padding + e, log.debug(`abc91 layout blocks (calc) px, pyid:${T.id} startingPos=X${O} new startingPosX${T.size.x} ${e} padding=${padding} width=${A} halfWidth=${e} => x:${T.size.x} y:${T.size.y} ${T.widthInColumns} (width * (child?.w || 1)) / 2 ${A * (T?.widthInColumns ?? 1) / 2}`), O = T.size.x + e, T.size.y = E.size.y - E.size.height / 2 + N * (j + padding) + j / 2 + padding, log.debug(`abc88 layout blocks (calc) px, pyid:${T.id}startingPosX${O}${padding}${e}=>x:${T.size.x}y:${T.size.y}${T.widthInColumns}(width * (child?.w || 1)) / 2${A * (T?.widthInColumns ?? 1) / 2}`);
+			let { width: M, height: N } = T.size, { px: P, py: F } = calculateBlockPosition(w, k);
+			if (F != j && (j = F, A = e?.size?.x ? e?.size?.x + (-e?.size?.width / 2 || 0) : -padding, log.debug("New row in layout for block", e.id, " and child ", T.id, j)), log.debug(`abc89 layout blocks (child) id: ${T.id} Pos: ${k} (px, py) ${P},${F} (${E?.size?.x},${E?.size?.y}) parent: ${E.id} width: ${M}${padding}`), E.size) {
+				let e = M / 2;
+				T.size.x = A + padding + e, log.debug(`abc91 layout blocks (calc) px, pyid:${T.id} startingPos=X${A} new startingPosX${T.size.x} ${e} padding=${padding} width=${M} halfWidth=${e} => x:${T.size.x} y:${T.size.y} ${T.widthInColumns} (width * (child?.w || 1)) / 2 ${M * (T?.widthInColumns ?? 1) / 2}`), A = T.size.x + e;
+				let C = O.get(F) ?? 0, w = D.get(F) ?? N;
+				T.size.y = E.size.y - E.size.height / 2 + C + w / 2 + padding, log.debug(`abc88 layout blocks (calc) px, pyid:${T.id}startingPosX${A}${padding}${e}=>x:${T.size.x}y:${T.size.y}${T.widthInColumns}(width * (child?.w || 1)) / 2${M * (T?.widthInColumns ?? 1) / 2}`);
 			}
 			T.children && layoutBlocks(T, C);
-			let P = T?.widthInColumns ?? 1;
-			w > 0 && (P = Math.min(P, w - D % w)), D += P, log.debug("abc88 columnsPos", T, D);
+			let I = T?.widthInColumns ?? 1;
+			w > 0 && (I = Math.min(I, w - k % w)), k += I, log.debug("abc88 columnsPos", T, k);
 		}
 	}
 	log.debug(`layout blocks (<==layoutBlocks) ${e.id} x: ${e?.size?.x} y: ${e?.size?.y} width: ${e?.size?.width}`);
@@ -1572,35 +1604,18 @@ function layout(e) {
 	};
 }
 __name(layout, "layout");
-function applyStyle(e, S) {
-	S && e.attr("style", S);
-}
-__name(applyStyle, "applyStyle");
-function addHtmlLabel(e, S) {
-	let C = select_default(document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")), w = C.append("xhtml:div"), T = e.label, E = e.isNode ? "nodeLabel" : "edgeLabel", D = w.append("span");
-	return D.html(sanitizeText(T, S)), applyStyle(D, e.labelStyle), D.attr("class", E), applyStyle(w, e.labelStyle), w.style("display", "inline-block"), w.style("white-space", "nowrap"), w.attr("xmlns", "http://www.w3.org/1999/xhtml"), C.node();
-}
-__name(addHtmlLabel, "addHtmlLabel");
-var createLabel_default = /* @__PURE__ */ __name(async (e, C, w, T) => {
-	let E = e || "";
+var createLabel_default = /* @__PURE__ */ __name(async (e, S, C, w = !1, T = !1) => {
+	let E = S || "";
 	typeof E == "object" && (E = E[0]);
-	let D = getConfig2();
-	if (evaluate(D.flowchart.htmlLabels)) return E = E.replace(/\\n|\n/g, "<br />"), log.debug("vertexText" + E), addHtmlLabel({
+	let D = getConfig2(), O = getEffectiveHtmlLabels(D);
+	return await createText(e, E, {
+		style: C,
+		isTitle: w,
+		useHtmlLabels: O,
+		markdown: !1,
 		isNode: T,
-		label: await replaceIconSubstring(decodeEntities(E)),
-		labelStyle: C.replace("fill:", "color:")
+		width: Infinity
 	}, D);
-	{
-		let e = document.createElementNS("http://www.w3.org/2000/svg", "text");
-		e.setAttribute("style", C.replace("color:", "fill:"));
-		let S = [];
-		S = typeof E == "string" ? E.split(/\\n|\n|<br\s*\/?>/gi) : Array.isArray(E) ? E : [];
-		for (let C of S) {
-			let S = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-			S.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve"), S.setAttribute("dy", "1em"), S.setAttribute("x", "0"), w ? S.setAttribute("class", "title-row") : S.setAttribute("class", "row"), S.textContent = C.trim(), e.appendChild(S);
-		}
-		return e;
-	}
 }, "createLabel"), addEdgeMarkers = /* @__PURE__ */ __name((e, S, C, w, T) => {
 	S.arrowTypeStart && addEdgeMarker(e, "start", S.arrowTypeStart, C, w, T), S.arrowTypeEnd && addEdgeMarker(e, "end", S.arrowTypeEnd, C, w, T);
 }, "addEdgeMarkers"), arrowTypesMap = {
@@ -1622,47 +1637,69 @@ var createLabel_default = /* @__PURE__ */ __name(async (e, C, w, T) => {
 	let k = C === "start" ? "Start" : "End";
 	e.attr(`marker-${C}`, `url(${T}#${E}_${D}-${O}${k})`);
 }, "addEdgeMarker"), edgeLabels = {}, terminalLabels = {}, insertEdgeLabel = /* @__PURE__ */ __name(async (e, S) => {
-	let C = getConfig2(), w = evaluate(C.flowchart.htmlLabels), T = S.labelType === "markdown" ? createText(e, S.label, {
+	let C = getConfig2(), w = getEffectiveHtmlLabels(C), T = e.insert("g").attr("class", "edgeLabel"), E = T.insert("g").attr("class", "label"), D = S.labelType === "markdown", O = await createText(e, S.label, {
 		style: S.labelStyle,
 		useHtmlLabels: w,
-		addSvgBackground: !0
-	}, C) : await createLabel_default(S.label, S.labelStyle), E = e.insert("g").attr("class", "edgeLabel"), D = E.insert("g").attr("class", "label");
-	D.node().appendChild(T);
-	let k = T.getBBox();
+		addSvgBackground: D,
+		isNode: !1,
+		markdown: D,
+		width: D ? void 0 : Infinity
+	}, C);
+	E.node().appendChild(O);
+	let j = O.getBBox(), M = j;
 	if (w) {
-		let e = T.children[0], S = select_default(T);
-		k = e.getBoundingClientRect(), S.attr("width", k.width), S.attr("height", k.height);
+		let e = O.children[0], S = select_default(O);
+		j = e.getBoundingClientRect(), M = j, S.attr("width", j.width), S.attr("height", j.height);
+	} else {
+		let e = select_default(O).select("text").node();
+		e && typeof e.getBBox == "function" && (M = e.getBBox());
 	}
-	D.attr("transform", "translate(" + -k.width / 2 + ", " + -k.height / 2 + ")"), edgeLabels[S.id] = E, S.width = k.width, S.height = k.height;
-	let j;
+	E.attr("transform", computeLabelTransform(M, w)), edgeLabels[S.id] = T, S.width = j.width, S.height = j.height;
+	let P;
 	if (S.startLabelLeft) {
-		let C = await createLabel_default(S.startLabelLeft, S.labelStyle), w = e.insert("g").attr("class", "edgeTerminals"), T = w.insert("g").attr("class", "inner");
-		j = T.node().appendChild(C);
-		let E = C.getBBox();
-		T.attr("transform", "translate(" + -E.width / 2 + ", " + -E.height / 2 + ")"), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].startLeft = w, setTerminalWidth(j, S.startLabelLeft);
+		let C = e.insert("g").attr("class", "edgeTerminals"), T = C.insert("g").attr("class", "inner"), E = await createLabel_default(T, S.startLabelLeft, S.labelStyle);
+		P = E;
+		let D = E.getBBox();
+		if (w) {
+			let e = E.children[0], S = select_default(E);
+			D = e.getBoundingClientRect(), S.attr("width", D.width), S.attr("height", D.height);
+		}
+		T.attr("transform", computeLabelTransform(D, w)), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].startLeft = C, setTerminalWidth(P, S.startLabelLeft);
 	}
 	if (S.startLabelRight) {
-		let C = await createLabel_default(S.startLabelRight, S.labelStyle), w = e.insert("g").attr("class", "edgeTerminals"), T = w.insert("g").attr("class", "inner");
-		j = w.node().appendChild(C), T.node().appendChild(C);
-		let E = C.getBBox();
-		T.attr("transform", "translate(" + -E.width / 2 + ", " + -E.height / 2 + ")"), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].startRight = w, setTerminalWidth(j, S.startLabelRight);
+		let C = e.insert("g").attr("class", "edgeTerminals"), T = C.insert("g").attr("class", "inner"), E = await createLabel_default(C, S.startLabelRight, S.labelStyle);
+		P = E, T.node().appendChild(E);
+		let D = E.getBBox();
+		if (w) {
+			let e = E.children[0], S = select_default(E);
+			D = e.getBoundingClientRect(), S.attr("width", D.width), S.attr("height", D.height);
+		}
+		T.attr("transform", computeLabelTransform(D, w)), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].startRight = C, setTerminalWidth(P, S.startLabelRight);
 	}
 	if (S.endLabelLeft) {
-		let C = await createLabel_default(S.endLabelLeft, S.labelStyle), w = e.insert("g").attr("class", "edgeTerminals"), T = w.insert("g").attr("class", "inner");
-		j = T.node().appendChild(C);
-		let E = C.getBBox();
-		T.attr("transform", "translate(" + -E.width / 2 + ", " + -E.height / 2 + ")"), w.node().appendChild(C), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].endLeft = w, setTerminalWidth(j, S.endLabelLeft);
+		let C = e.insert("g").attr("class", "edgeTerminals"), T = C.insert("g").attr("class", "inner"), E = await createLabel_default(T, S.endLabelLeft, S.labelStyle);
+		P = E;
+		let D = E.getBBox();
+		if (w) {
+			let e = E.children[0], S = select_default(E);
+			D = e.getBoundingClientRect(), S.attr("width", D.width), S.attr("height", D.height);
+		}
+		T.attr("transform", computeLabelTransform(D, w)), C.node().appendChild(E), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].endLeft = C, setTerminalWidth(P, S.endLabelLeft);
 	}
 	if (S.endLabelRight) {
-		let C = await createLabel_default(S.endLabelRight, S.labelStyle), w = e.insert("g").attr("class", "edgeTerminals"), T = w.insert("g").attr("class", "inner");
-		j = T.node().appendChild(C);
-		let E = C.getBBox();
-		T.attr("transform", "translate(" + -E.width / 2 + ", " + -E.height / 2 + ")"), w.node().appendChild(C), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].endRight = w, setTerminalWidth(j, S.endLabelRight);
+		let C = e.insert("g").attr("class", "edgeTerminals"), T = C.insert("g").attr("class", "inner"), E = await createLabel_default(T, S.endLabelRight, S.labelStyle);
+		P = E;
+		let D = E.getBBox();
+		if (w) {
+			let e = E.children[0], S = select_default(E);
+			D = e.getBoundingClientRect(), S.attr("width", D.width), S.attr("height", D.height);
+		}
+		T.attr("transform", computeLabelTransform(D, w)), C.node().appendChild(E), terminalLabels[S.id] || (terminalLabels[S.id] = {}), terminalLabels[S.id].endRight = C, setTerminalWidth(P, S.endLabelRight);
 	}
-	return T;
+	return O;
 }, "insertEdgeLabel");
 function setTerminalWidth(e, S) {
-	getConfig2().flowchart.htmlLabels && e && (e.style.width = S.length * 9 + "px", e.style.height = "12px");
+	getEffectiveHtmlLabels(getConfig2()) && e && (e.style.width = S.length * 9 + "px", e.style.height = "12px");
 }
 __name(setTerminalWidth, "setTerminalWidth");
 var positionEdgeLabel = /* @__PURE__ */ __name((e, C) => {
@@ -1748,12 +1785,12 @@ var positionEdgeLabel = /* @__PURE__ */ __name((e, C) => {
 		} else T = e, E || w.push(e);
 	}), w;
 }, "cutPathAtIntersect"), insertEdge = /* @__PURE__ */ __name(function(e, C, w, T, E, D, O) {
-	let k = w.points;
+	let A = w.points;
 	log.debug("abc88 InsertEdge: edge=", w, "e=", C);
 	let M = !1, N = D.node(C.v);
-	var L = D.node(C.w);
-	L?.intersect && N?.intersect && (k = k.slice(1, w.points.length - 1), k.unshift(N.intersect(k[0])), k.push(L.intersect(k[k.length - 1]))), w.toCluster && (log.debug("to cluster abc88", T[w.toCluster]), k = cutPathAtIntersect(w.points, T[w.toCluster].node), M = !0), w.fromCluster && (log.debug("from cluster abc88", T[w.fromCluster]), k = cutPathAtIntersect(k.reverse(), T[w.fromCluster].node).reverse(), M = !0);
-	let R = k.filter((e) => !Number.isNaN(e.y)), z = basis_default;
+	var I = D.node(C.w);
+	I?.intersect && N?.intersect && (A = A.slice(1, w.points.length - 1), A.unshift(N.intersect(A[0])), A.push(I.intersect(A[A.length - 1]))), w.toCluster && (log.debug("to cluster abc88", T[w.toCluster]), A = cutPathAtIntersect(w.points, T[w.toCluster].node), M = !0), w.fromCluster && (log.debug("from cluster abc88", T[w.fromCluster]), A = cutPathAtIntersect(A.reverse(), T[w.fromCluster].node).reverse(), M = !0);
+	let R = A.filter((e) => !Number.isNaN(e.y)), z = basis_default;
 	w.curve && (E === "graph" || E === "flowchart") && (z = w.curve);
 	let { x: B, y: V } = getLineFunctionsWithOffset(w), H = line_default().x(B).y(V).curve(z), U;
 	switch (w.thickness) {
@@ -1782,7 +1819,7 @@ var positionEdgeLabel = /* @__PURE__ */ __name((e, C) => {
 	let W = e.append("path").attr("d", H(R)).attr("id", w.id).attr("class", " " + U + (w.classes ? " " + w.classes : "")).attr("style", w.style), G = "";
 	(getConfig2().flowchart.arrowMarkerAbsolute || getConfig2().state.arrowMarkerAbsolute) && (G = getUrl(!0)), addEdgeMarkers(W, w, G, O, E);
 	let K = {};
-	return M && (K.updatedPath = k), K.originalPath = w.points, K;
+	return M && (K.updatedPath = A), K.originalPath = w.points, K;
 }, "insertEdge"), expandAndDeduplicateDirections = /* @__PURE__ */ __name((e) => {
 	let S = /* @__PURE__ */ new Set();
 	for (let C of e) switch (C) {
@@ -2270,42 +2307,27 @@ var intersect_default = {
 			y: w + A
 		};
 	}, "intersectRect")
-}, labelHelper = /* @__PURE__ */ __name(async (S, C, w, T) => {
-	let E = getConfig2(), D, k = C.useHtmlLabels || evaluate(E.flowchart.htmlLabels);
-	D = w || "node default";
-	let j = S.insert("g").attr("class", D).attr("id", C.domId || C.id), P = j.insert("g").attr("class", "label").attr("style", C.labelStyle), F;
-	F = C.labelText === void 0 ? "" : typeof C.labelText == "string" ? C.labelText : C.labelText[0];
-	let I = P.node(), L;
-	L = C.labelType === "markdown" ? createText(P, sanitizeText(decodeEntities(F), E), {
-		useHtmlLabels: k,
-		width: C.width || E.flowchart.wrappingWidth,
+}, labelHelper = /* @__PURE__ */ __name(async (e, S, C, w) => {
+	let T = getConfig2(), E, D = S.useHtmlLabels || getEffectiveHtmlLabels(T);
+	E = C || "node default";
+	let O = e.insert("g").attr("class", E).attr("id", S.domId || S.id), j = O.insert("g").attr("class", "label").attr("style", S.labelStyle), P;
+	P = S.labelText === void 0 ? "" : typeof S.labelText == "string" ? S.labelText : S.labelText[0];
+	let F;
+	F = S.labelType === "markdown" ? createText(j, sanitizeText(decodeEntities(P), T), {
+		useHtmlLabels: D,
+		width: S.width || T.flowchart.wrappingWidth,
 		classes: "markdown-node-label"
-	}, E) : I.appendChild(await createLabel_default(sanitizeText(decodeEntities(F), E), C.labelStyle, !1, T));
-	let z = L.getBBox(), B = C.padding / 2;
-	if (evaluate(E.flowchart.htmlLabels)) {
-		let S = L.children[0], C = select_default(L), w = S.getElementsByTagName("img");
-		if (w) {
-			let S = F.replace(/<img[^>]*>/g, "").trim() === "";
-			await Promise.all([...w].map((C) => new Promise((w) => {
-				function T() {
-					if (C.style.display = "flex", C.style.flexDirection = "column", S) {
-						let e = E.fontSize ? E.fontSize : window.getComputedStyle(document.body).fontSize, S = parseInt(e, 10) * 5 + "px";
-						C.style.minWidth = S, C.style.maxWidth = S;
-					} else C.style.width = "100%";
-					w(C);
-				}
-				__name(T, "setupImage"), setTimeout(() => {
-					C.complete && T();
-				}), C.addEventListener("error", T), C.addEventListener("load", T);
-			})));
-		}
-		z = S.getBoundingClientRect(), C.attr("width", z.width), C.attr("height", z.height);
+	}, T) : await createLabel_default(j, sanitizeText(decodeEntities(P), T), S.labelStyle, !1, w);
+	let I = F.getBBox(), L = S.padding / 2;
+	if (getEffectiveHtmlLabels(T)) {
+		let e = F.children[0], S = select_default(F);
+		await configureLabelImages(e, P), I = e.getBoundingClientRect(), S.attr("width", I.width), S.attr("height", I.height);
 	}
-	return k ? P.attr("transform", "translate(" + -z.width / 2 + ", " + -z.height / 2 + ")") : P.attr("transform", "translate(0, " + -z.height / 2 + ")"), C.centerLabel && P.attr("transform", "translate(" + -z.width / 2 + ", " + -z.height / 2 + ")"), P.insert("rect", ":first-child"), {
-		shapeSvg: j,
-		bbox: z,
-		halfPadding: B,
-		label: P
+	return D ? j.attr("transform", "translate(" + -I.width / 2 + ", " + -I.height / 2 + ")") : j.attr("transform", "translate(0, " + -I.height / 2 + ")"), S.centerLabel && j.attr("transform", "translate(" + -I.width / 2 + ", " + -I.height / 2 + ")"), j.insert("rect", ":first-child"), {
+		shapeSvg: O,
+		bbox: I,
+		halfPadding: L,
+		label: j
 	};
 }, "labelHelper"), updateNodeBounds = /* @__PURE__ */ __name((e, S) => {
 	let C = S.node().getBBox();
@@ -2318,7 +2340,7 @@ function insertPolygonShape(e, S, C, w) {
 }
 __name(insertPolygonShape, "insertPolygonShape");
 var note_default = /* @__PURE__ */ __name(async (e, C) => {
-	C.useHtmlLabels || getConfig2().flowchart.htmlLabels || (C.centerLabel = !0);
+	C.useHtmlLabels || getEffectiveHtmlLabels(getConfig2()) || (C.centerLabel = !0);
 	let { shapeSvg: w, bbox: T, halfPadding: E } = await labelHelper(e, C, "node " + C.classes, !0);
 	log.info("Classes = ", C.classes);
 	let D = w.insert("rect", ":first-child");
@@ -2606,24 +2628,24 @@ __name(applyNodePropertyBorders, "applyNodePropertyBorders");
 var rectWithTitle = /* @__PURE__ */ __name(async (e, C) => {
 	let w;
 	w = C.classes ? "node " + C.classes : "node default";
-	let T = e.insert("g").attr("class", w).attr("id", C.domId || C.id), E = T.insert("rect", ":first-child"), D = T.insert("line"), k = T.insert("g").attr("class", "label"), j = C.labelText.flat ? C.labelText.flat() : C.labelText, M = "";
+	let T = e.insert("g").attr("class", w).attr("id", C.domId || C.id), E = T.insert("rect", ":first-child"), D = T.insert("line"), O = T.insert("g").attr("class", "label"), j = C.labelText.flat ? C.labelText.flat() : C.labelText, M = "";
 	M = typeof j == "object" ? j[0] : j, log.info("Label text abc79", M, j, typeof j == "object");
-	let P = k.node().appendChild(await createLabel_default(M, C.labelStyle, !0, !0)), F = {
+	let P = await createLabel_default(O, M, C.labelStyle, !0, !0), F = {
 		width: 0,
 		height: 0
 	};
-	if (evaluate(getConfig2().flowchart.htmlLabels)) {
+	if (getEffectiveHtmlLabels(getConfig2())) {
 		let e = P.children[0], S = select_default(P);
 		F = e.getBoundingClientRect(), S.attr("width", F.width), S.attr("height", F.height);
 	}
 	log.info("Text 2", j);
-	let I = j.slice(1, j.length), L = P.getBBox(), R = k.node().appendChild(await createLabel_default(I.join ? I.join("<br/>") : I, C.labelStyle, !0, !0));
-	if (evaluate(getConfig2().flowchart.htmlLabels)) {
+	let I = j.slice(1, j.length), L = P.getBBox(), R = await createLabel_default(O, I.join ? I.join("<br/>") : I, C.labelStyle, !0, !0);
+	if (getEffectiveHtmlLabels(getConfig2())) {
 		let e = R.children[0], S = select_default(R);
 		F = e.getBoundingClientRect(), S.attr("width", F.width), S.attr("height", F.height);
 	}
 	let z = C.padding / 2;
-	return select_default(R).attr("transform", "translate( " + (F.width > L.width ? 0 : (L.width - F.width) / 2) + ", " + (L.height + z + 5) + ")"), select_default(P).attr("transform", "translate( " + (F.width < L.width ? 0 : -(L.width - F.width) / 2) + ", 0)"), F = k.node().getBBox(), k.attr("transform", "translate(" + -F.width / 2 + ", " + (-F.height / 2 - z + 3) + ")"), E.attr("class", "outer title-state").attr("x", -F.width / 2 - z).attr("y", -F.height / 2 - z).attr("width", F.width + C.padding).attr("height", F.height + C.padding), D.attr("class", "divider").attr("x1", -F.width / 2 - z).attr("x2", F.width / 2 + z).attr("y1", -F.height / 2 - z + L.height + z).attr("y2", -F.height / 2 - z + L.height + z), updateNodeBounds(C, E), C.intersect = function(e) {
+	return select_default(R).attr("transform", "translate( " + (F.width > L.width ? 0 : (L.width - F.width) / 2) + ", " + (L.height + z + 5) + ")"), select_default(P).attr("transform", "translate( " + (F.width < L.width ? 0 : -(L.width - F.width) / 2) + ", 0)"), F = O.node().getBBox(), O.attr("transform", "translate(" + -F.width / 2 + ", " + (-F.height / 2 - z + 3) + ")"), E.attr("class", "outer title-state").attr("x", -F.width / 2 - z).attr("y", -F.height / 2 - z).attr("width", F.width + C.padding).attr("height", F.height + C.padding), D.attr("class", "divider").attr("x1", -F.width / 2 - z).attr("x2", F.width / 2 + z).attr("y1", -F.height / 2 - z + L.height + z).attr("y2", -F.height / 2 - z + L.height + z), updateNodeBounds(C, E), C.intersect = function(e) {
 		return intersect_default.rect(C, e);
 	}, T;
 }, "rectWithTitle"), stadium = /* @__PURE__ */ __name(async (e, S) => {
@@ -2731,53 +2753,53 @@ var rectWithTitle = /* @__PURE__ */ __name(async (e, C) => {
 	class_box: /* @__PURE__ */ __name(async (e, S) => {
 		let C = S.padding / 2, w;
 		w = S.classes ? "node " + S.classes : "node default";
-		let T = e.insert("g").attr("class", w).attr("id", S.domId || S.id), E = T.insert("rect", ":first-child"), D = T.insert("line"), k = T.insert("line"), j = 0, M = 4, P = T.insert("g").attr("class", "label"), F = 0, I = S.classData.annotations?.[0], L = S.classData.annotations[0] ? "«" + S.classData.annotations[0] + "»" : "", R = P.node().appendChild(await createLabel_default(L, S.labelStyle, !0, !0)), z = R.getBBox();
-		if (evaluate(getConfig2().flowchart.htmlLabels)) {
-			let e = R.children[0], S = select_default(R);
-			z = e.getBoundingClientRect(), S.attr("width", z.width), S.attr("height", z.height);
+		let T = e.insert("g").attr("class", w).attr("id", S.domId || S.id), E = T.insert("rect", ":first-child"), D = T.insert("line"), O = T.insert("line"), j = 0, M = 4, P = T.insert("g").attr("class", "label"), F = 0, I = S.classData.annotations?.[0], L = await createLabel_default(P, S.classData.annotations[0] ? "«" + S.classData.annotations[0] + "»" : "", S.labelStyle, !0, !0), R = L.getBBox();
+		if (getEffectiveHtmlLabels(getConfig2())) {
+			let e = L.children[0], S = select_default(L);
+			R = e.getBoundingClientRect(), S.attr("width", R.width), S.attr("height", R.height);
 		}
-		S.classData.annotations[0] && (M += z.height + 4, j += z.width);
-		let B = S.classData.label;
-		S.classData.type !== void 0 && S.classData.type !== "" && (getConfig2().flowchart.htmlLabels ? B += "&lt;" + S.classData.type + "&gt;" : B += "<" + S.classData.type + ">");
-		let V = P.node().appendChild(await createLabel_default(B, S.labelStyle, !0, !0));
-		select_default(V).attr("class", "classTitle");
-		let H = V.getBBox();
-		if (evaluate(getConfig2().flowchart.htmlLabels)) {
-			let e = V.children[0], S = select_default(V);
-			H = e.getBoundingClientRect(), S.attr("width", H.width), S.attr("height", H.height);
+		S.classData.annotations[0] && (M += R.height + 4, j += R.width);
+		let z = S.classData.label;
+		S.classData.type !== void 0 && S.classData.type !== "" && (getEffectiveHtmlLabels(getConfig2()) ? z += "&lt;" + S.classData.type + "&gt;" : z += "<" + S.classData.type + ">");
+		let B = await createLabel_default(P, z, S.labelStyle, !0, !0);
+		select_default(B).attr("class", "classTitle");
+		let V = B.getBBox();
+		if (getEffectiveHtmlLabels(getConfig2())) {
+			let e = B.children[0], S = select_default(B);
+			V = e.getBoundingClientRect(), S.attr("width", V.width), S.attr("height", V.height);
 		}
-		M += H.height + 4, H.width > j && (j = H.width);
-		let U = [];
+		M += V.height + 4, V.width > j && (j = V.width);
+		let H = [];
 		S.classData.members.forEach(async (e) => {
 			let C = e.getDisplayDetails(), w = C.displayText;
-			getConfig2().flowchart.htmlLabels && (w = w.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
-			let T = P.node().appendChild(await createLabel_default(w, C.cssStyle ? C.cssStyle : S.labelStyle, !0, !0)), E = T.getBBox();
-			if (evaluate(getConfig2().flowchart.htmlLabels)) {
+			getEffectiveHtmlLabels(getConfig2()) && (w = w.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
+			let T = await createLabel_default(P, w, C.cssStyle ? C.cssStyle : S.labelStyle, !0, !0), E = T.getBBox();
+			if (getEffectiveHtmlLabels(getConfig2())) {
 				let e = T.children[0], S = select_default(T);
 				E = e.getBoundingClientRect(), S.attr("width", E.width), S.attr("height", E.height);
 			}
-			E.width > j && (j = E.width), M += E.height + 4, U.push(T);
+			E.width > j && (j = E.width), M += E.height + 4, H.push(T);
 		}), M += 8;
-		let W = [];
+		let U = [];
 		if (S.classData.methods.forEach(async (e) => {
 			let C = e.getDisplayDetails(), w = C.displayText;
-			getConfig2().flowchart.htmlLabels && (w = w.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
-			let T = P.node().appendChild(await createLabel_default(w, C.cssStyle ? C.cssStyle : S.labelStyle, !0, !0)), E = T.getBBox();
-			if (evaluate(getConfig2().flowchart.htmlLabels)) {
+			getEffectiveHtmlLabels(getConfig2()) && (w = w.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
+			let T = await createLabel_default(P, w, C.cssStyle ? C.cssStyle : S.labelStyle, !0, !0), E = T.getBBox();
+			if (getEffectiveHtmlLabels(getConfig2())) {
 				let e = T.children[0], S = select_default(T);
 				E = e.getBoundingClientRect(), S.attr("width", E.width), S.attr("height", E.height);
 			}
-			E.width > j && (j = E.width), M += E.height + 4, W.push(T);
+			E.width > j && (j = E.width), M += E.height + 4, U.push(T);
 		}), M += 8, I) {
-			let e = (j - z.width) / 2;
-			select_default(R).attr("transform", "translate( " + (-1 * j / 2 + e) + ", " + -1 * M / 2 + ")"), F = z.height + 4;
+			let e = (j - R.width) / 2;
+			select_default(L).attr("transform", "translate( " + (-1 * j / 2 + e) + ", " + -1 * M / 2 + ")"), F = R.height + 4;
 		}
-		let G = (j - H.width) / 2;
-		return select_default(V).attr("transform", "translate( " + (-1 * j / 2 + G) + ", " + (-1 * M / 2 + F) + ")"), F += H.height + 4, D.attr("class", "divider").attr("x1", -j / 2 - C).attr("x2", j / 2 + C).attr("y1", -M / 2 - C + 8 + F).attr("y2", -M / 2 - C + 8 + F), F += 8, U.forEach((e) => {
+		let W = (j - V.width) / 2;
+		return select_default(B).attr("transform", "translate( " + (-1 * j / 2 + W) + ", " + (-1 * M / 2 + F) + ")"), F += V.height + 4, D.attr("class", "divider").attr("x1", -j / 2 - C).attr("x2", j / 2 + C).attr("y1", -M / 2 - C + 8 + F).attr("y2", -M / 2 - C + 8 + F), F += 8, H.forEach((e) => {
 			select_default(e).attr("transform", "translate( " + -j / 2 + ", " + (-1 * M / 2 + F + 8 / 2) + ")");
 			let S = e?.getBBox();
 			F += (S?.height ?? 0) + 4;
-		}), F += 8, k.attr("class", "divider").attr("x1", -j / 2 - C).attr("x2", j / 2 + C).attr("y1", -M / 2 - C + 8 + F).attr("y2", -M / 2 - C + 8 + F), F += 8, W.forEach((e) => {
+		}), F += 8, O.attr("class", "divider").attr("x1", -j / 2 - C).attr("x2", j / 2 + C).attr("y1", -M / 2 - C + 8 + F).attr("y2", -M / 2 - C + 8 + F), F += 8, U.forEach((e) => {
 			select_default(e).attr("transform", "translate( " + -j / 2 + ", " + (-1 * M / 2 + F) + ")");
 			let S = e?.getBBox();
 			F += (S?.height ?? 0) + 4;
@@ -2801,13 +2823,13 @@ var rectWithTitle = /* @__PURE__ */ __name(async (e, C) => {
 function getNodeFromBlock(e, S, C = !1) {
 	let w = e, T = "default";
 	(w?.classes?.length || 0) > 0 && (T = (w?.classes ?? []).join(" ")), T += " flowchart-label";
-	let E = 0, D = "", O;
+	let E = 0, D = "", k;
 	switch (w.type) {
 		case "round":
 			E = 5, D = "rect";
 			break;
 		case "composite":
-			E = 0, D = "composite", O = 0;
+			E = 0, D = "composite", k = 0;
 			break;
 		case "square":
 			D = "rect";
@@ -2867,7 +2889,7 @@ function getNodeFromBlock(e, S, C = !1) {
 		height: 0,
 		x: 0,
 		y: 0
-	};
+	}, N = S.getDiagramId();
 	return {
 		labelStyle: A.labelStyle,
 		shape: D,
@@ -2877,6 +2899,7 @@ function getNodeFromBlock(e, S, C = !1) {
 		class: T,
 		style: A.style,
 		id: w.id,
+		domId: N ? `${N}-${w.id}` : w.id,
 		directions: w.directions,
 		width: M.width,
 		height: M.height,
@@ -2885,7 +2908,7 @@ function getNodeFromBlock(e, S, C = !1) {
 		positioned: C,
 		intersect: void 0,
 		type: w.type,
-		padding: O ?? getConfig()?.block?.padding ?? 0
+		padding: k ?? getConfig()?.block?.padding ?? 0
 	};
 }
 __name(getNodeFromBlock, "getNodeFromBlock");
@@ -2952,13 +2975,14 @@ async function insertEdges(e, S, C, w, T) {
 					x: O.x,
 					y: O.y
 				}
-			];
+			], A = T ? `${T}-${C.id}` : C.id;
 			insertEdge(e, {
 				v: C.start,
 				w: C.end,
-				name: C.id
+				name: A
 			}, {
 				...C,
+				id: A,
 				arrowTypeEnd: C.arrowTypeEnd,
 				arrowTypeStart: C.arrowTypeStart,
 				points: k,
@@ -2985,7 +3009,9 @@ var diagram = {
 	db: blockDB_default,
 	renderer: {
 		draw: /* @__PURE__ */ __name(async function(e, C, w, T) {
-			let { securityLevel: E, block: O } = getConfig(), A = T.db, j;
+			let { securityLevel: E, block: k } = getConfig(), A = T.db;
+			A.setDiagramId(C);
+			let j;
 			E === "sandbox" && (j = select_default("#i" + C));
 			let M = select_default(E === "sandbox" ? j.nodes()[0].contentDocument.body : "body"), P = E === "sandbox" ? M.select(`[id="${C}"]`) : select_default(`[id="${C}"]`);
 			markers_default(P, [
@@ -2997,7 +3023,7 @@ var diagram = {
 			await calculateBlockSizes(R, F, A);
 			let z = layout(A);
 			if (await insertBlocks(R, F, A), await insertEdges(R, L, I, A, C), z) {
-				let e = z, C = Math.max(1, Math.round(.125 * (e.width / e.height))), w = e.height + C + 10, T = e.width + 10, { useMaxWidth: E } = O;
+				let e = z, C = Math.max(1, Math.round(.125 * (e.width / e.height))), w = e.height + C + 10, T = e.width + 10, { useMaxWidth: E } = k;
 				configureSvgSize(P, w, T, !!E), log.debug("Here Bounds", z, e), P.attr("viewBox", `${e.x - 5} ${e.y - 5} ${e.width + 10} ${e.height + 10}`);
 			}
 		}, "draw"),