@uigraph/sdk 1.2.0 → 1.2.2

package/dist/index.cjs

@@ -1779,6 +1779,53 @@ function syncBaseData(prev, next, options) {
 	}
 	return updated;
 }
+const LAYOUT_SPACING = {
+	SUBGRAPH_HEADER_HEIGHT: 35,
+	SUBGRAPH_PADDING: 8,
+	SUBGRAPH_CONTENT_TOP_MARGIN: 10,
+	NODE_SEPARATION_HORIZONTAL: 80,
+	NODE_SEPARATION_VERTICAL: 100,
+	CONTAINER_SEPARATION_HORIZONTAL: 120,
+	CONTAINER_SEPARATION_VERTICAL: 160,
+	NESTED_SUBGRAPH_SEPARATION_HORIZONTAL: 120,
+	NESTED_SUBGRAPH_SEPARATION_VERTICAL: 140,
+	META_GRAPH_MARGIN: 100,
+	NESTED_CONTENT_MARGIN: 40,
+	MIXED_CONTENT_VERTICAL_SPACING: 100,
+	MIXED_CONTENT_HORIZONTAL_SPACING: 120
+};
+const LAYOUT_RANKERS = {
+	NETWORK_SIMPLEX: "network-simplex",
+	TIGHT_TREE: "tight-tree",
+	LONGEST_PATH: "longest-path"
+};
+const DEFAULT_LAYOUT_RANKER = LAYOUT_RANKERS.TIGHT_TREE;
+const SEQUENCE_PARTICIPANT_COLOR = "#E2E8F0";
+const SEQUENCE_LAYOUT = {
+	COLUMN_WIDTH: 360,
+	ROW_HEIGHT: 60,
+	HEADER_HEIGHT: 40,
+	MESSAGE_NODE_WIDTH: 140,
+	MESSAGE_NODE_HEIGHT: 32,
+	SELF_LOOP_OFFSET: 48,
+	PARTICIPANT_NODE_WIDTH: 10,
+	MESSAGE_MAX_WIDTH: 240,
+	MESSAGE_TARGET_WRAP_LINES: 2,
+	MESSAGE_CHAR_WIDTH: 7,
+	MESSAGE_LINE_HEIGHT: 20,
+	MESSAGE_HORIZONTAL_PADDING: 24,
+	MESSAGE_VERTICAL_PADDING: 8,
+	ROW_VERTICAL_PADDING: 16,
+	NOTE_OFFSET: 24,
+	BLOCK_TOP_PADDING: 36,
+	BLOCK_BOTTOM_PADDING: 16,
+	BLOCK_SIDE_PADDING: 44,
+	BLOCK_SECTION_PADDING: 22,
+	BLOCK_CONTENT_INSET: 12,
+	BLOCK_FRAME_GAP: 12,
+	BOX_TOP_INSET: 26,
+	BOX_BOTTOM_PADDING: 24
+};
 function sanitizeMermaidLabels(src) {
 	if (!src) return src;
 	const subgraphFixed = src.replace(/([A-Za-z0-9_]+)\[((?:(?![\"']).)*?)\]/g, (m, id, label) => {
@@ -1940,36 +1987,6 @@ function getComponentFieldByLabel(fields, label) {
 		return ((_field$label = field.label) === null || _field$label === void 0 ? void 0 : _field$label.toLowerCase()) === label.toLowerCase();
 	});
 }
-const LAYOUT_SPACING = {
-	SUBGRAPH_HEADER_HEIGHT: 35,
-	SUBGRAPH_PADDING: 8,
-	SUBGRAPH_CONTENT_TOP_MARGIN: 10,
-	NODE_SEPARATION_HORIZONTAL: 80,
-	NODE_SEPARATION_VERTICAL: 100,
-	CONTAINER_SEPARATION_HORIZONTAL: 120,
-	CONTAINER_SEPARATION_VERTICAL: 160,
-	NESTED_SUBGRAPH_SEPARATION_HORIZONTAL: 120,
-	NESTED_SUBGRAPH_SEPARATION_VERTICAL: 140,
-	META_GRAPH_MARGIN: 100,
-	NESTED_CONTENT_MARGIN: 40,
-	MIXED_CONTENT_VERTICAL_SPACING: 100,
-	MIXED_CONTENT_HORIZONTAL_SPACING: 120
-};
-const LAYOUT_RANKERS = {
-	NETWORK_SIMPLEX: "network-simplex",
-	TIGHT_TREE: "tight-tree",
-	LONGEST_PATH: "longest-path"
-};
-const DEFAULT_LAYOUT_RANKER = LAYOUT_RANKERS.TIGHT_TREE;
-const SEQUENCE_LAYOUT = {
-	COLUMN_WIDTH: 360,
-	ROW_HEIGHT: 60,
-	HEADER_HEIGHT: 40,
-	MESSAGE_NODE_WIDTH: 120,
-	MESSAGE_NODE_HEIGHT: 36,
-	SELF_LOOP_OFFSET: 80,
-	PARTICIPANT_NODE_WIDTH: 10
-};
 const LABEL_TYPE_PREFIX = /^\s*type:(\w+)\s*[:|-]\s*/i;
 const TAG_TO_NODE_TYPE = {
 	builder: "builder",
@@ -1997,6 +2014,1075 @@ function resolvePortalNodeType(hasImageUrl, tag) {
 	if (tag && TAG_TO_NODE_TYPE[tag]) return TAG_TO_NODE_TYPE[tag];
 	return "shape";
 }
+function estimateLines(words, charsPerLine) {
+	let lines = 1;
+	let current = 0;
+	for (const word of words) {
+		if (word.length > charsPerLine) {
+			if (current > 0) lines += 1;
+			const wordLines = Math.ceil(word.length / charsPerLine);
+			lines += wordLines - 1;
+			current = word.length - (wordLines - 1) * charsPerLine;
+			continue;
+		}
+		const next = current === 0 ? word.length : current + 1 + word.length;
+		if (next > charsPerLine) {
+			lines += 1;
+			current = word.length;
+		} else current = next;
+	}
+	return lines;
+}
+function estimateSequenceMessageBoxSize(label) {
+	const { MESSAGE_NODE_WIDTH, MESSAGE_NODE_HEIGHT, MESSAGE_MAX_WIDTH, MESSAGE_TARGET_WRAP_LINES, MESSAGE_CHAR_WIDTH, MESSAGE_LINE_HEIGHT, MESSAGE_HORIZONTAL_PADDING, MESSAGE_VERTICAL_PADDING } = SEQUENCE_LAYOUT;
+	const text = label.trim();
+	if (!text) return {
+		width: MESSAGE_NODE_WIDTH,
+		height: MESSAGE_NODE_HEIGHT
+	};
+	if (text.includes("\n")) {
+		const segments = text.split("\n").map((segment) => estimateSequenceMessageBoxSize(segment));
+		return {
+			width: Math.max(...segments.map((segment) => segment.width)),
+			height: segments.reduce((total, segment) => total + segment.height - Number(MESSAGE_VERTICAL_PADDING), Number(MESSAGE_VERTICAL_PADDING))
+		};
+	}
+	const words = text.split(/\s+/).filter(Boolean);
+	const longestWord = Math.max(1, ...words.map((w) => w.length));
+	const idealCharsPerLine = Math.max(1, Math.ceil(text.length / MESSAGE_TARGET_WRAP_LINES));
+	const charsPerLineNeeded = Math.max(idealCharsPerLine, longestWord);
+	const width = Math.min(MESSAGE_MAX_WIDTH, Math.max(MESSAGE_NODE_WIDTH, MESSAGE_HORIZONTAL_PADDING + charsPerLineNeeded * MESSAGE_CHAR_WIDTH));
+	const lines = estimateLines(words, Math.max(1, Math.floor((width - MESSAGE_HORIZONTAL_PADDING) / MESSAGE_CHAR_WIDTH)));
+	return {
+		width,
+		height: Math.max(MESSAGE_NODE_HEIGHT, lines * MESSAGE_LINE_HEIGHT + MESSAGE_VERTICAL_PADDING)
+	};
+}
+const ARROW_TOKENS = [
+	{
+		token: "<<-->>",
+		lineStyle: "dashed",
+		arrowType: "bidirectional"
+	},
+	{
+		token: "<<->>",
+		lineStyle: "solid",
+		arrowType: "bidirectional"
+	},
+	{
+		token: "--|\\",
+		lineStyle: "dashed",
+		arrowType: "half",
+		half: "top"
+	},
+	{
+		token: "-|\\",
+		lineStyle: "solid",
+		arrowType: "half",
+		half: "top"
+	},
+	{
+		token: "--|/",
+		lineStyle: "dashed",
+		arrowType: "half",
+		half: "bottom"
+	},
+	{
+		token: "-|/",
+		lineStyle: "solid",
+		arrowType: "half",
+		half: "bottom"
+	},
+	{
+		token: "/|--",
+		lineStyle: "dashed",
+		arrowType: "half",
+		half: "top",
+		reversed: true
+	},
+	{
+		token: "/|-",
+		lineStyle: "solid",
+		arrowType: "half",
+		half: "top",
+		reversed: true
+	},
+	{
+		token: "\\--",
+		lineStyle: "dashed",
+		arrowType: "half",
+		half: "bottom",
+		reversed: true
+	},
+	{
+		token: "\\-",
+		lineStyle: "solid",
+		arrowType: "half",
+		half: "bottom",
+		reversed: true
+	},
+	{
+		token: "//--",
+		lineStyle: "dashed",
+		arrowType: "stick",
+		half: "top",
+		reversed: true
+	},
+	{
+		token: "//-",
+		lineStyle: "solid",
+		arrowType: "stick",
+		half: "top",
+		reversed: true
+	},
+	{
+		token: "--//",
+		lineStyle: "dashed",
+		arrowType: "stick",
+		half: "bottom"
+	},
+	{
+		token: "-//",
+		lineStyle: "solid",
+		arrowType: "stick",
+		half: "bottom"
+	},
+	{
+		token: "--\\",
+		lineStyle: "dashed",
+		arrowType: "stick",
+		half: "top"
+	},
+	{
+		token: "-\\",
+		lineStyle: "solid",
+		arrowType: "stick",
+		half: "top"
+	},
+	{
+		token: "-->>",
+		lineStyle: "dashed",
+		arrowType: "filled"
+	},
+	{
+		token: "->>",
+		lineStyle: "solid",
+		arrowType: "filled"
+	},
+	{
+		token: "--x",
+		lineStyle: "dashed",
+		arrowType: "cross"
+	},
+	{
+		token: "-x",
+		lineStyle: "solid",
+		arrowType: "cross"
+	},
+	{
+		token: "--)",
+		lineStyle: "dashed",
+		arrowType: "open"
+	},
+	{
+		token: "-)",
+		lineStyle: "solid",
+		arrowType: "open"
+	},
+	{
+		token: "-->",
+		lineStyle: "dashed",
+		arrowType: "none"
+	},
+	{
+		token: "->",
+		lineStyle: "solid",
+		arrowType: "none"
+	}
+];
+const BLOCK_OPENERS = [
+	"loop",
+	"alt",
+	"opt",
+	"par",
+	"critical",
+	"break",
+	"rect"
+];
+const SECTION_KEYWORDS = [
+	"else",
+	"and",
+	"option"
+];
+const CSS_COLOR_NAMES = new Set(`transparent aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue
+   blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan
+   darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen
+   darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey
+   darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite
+   forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink
+   indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral
+   lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen
+   lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta
+   maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue
+   mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin
+   navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen
+   paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red
+   rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue
+   slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white
+   whitesmoke yellow yellowgreen`.split(/\s+/).filter(Boolean));
+const NAMED_ENTITIES = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	nbsp: " "
+};
+function decodeSequenceText(raw) {
+	return raw.replace(/<br\s*\/?>/gi, "\n").replace(/&#x([0-9a-f]+);/gi, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/&#(\d+);/g, (_, dec) => String.fromCodePoint(parseInt(dec, 10))).replace(/&([a-z]+);/gi, (match, name) => {
+		const decoded = NAMED_ENTITIES[name.toLowerCase()];
+		if (decoded === void 0) return match;
+		return decoded;
+	}).trim();
+}
+function findArrow(line) {
+	for (let i = 0; i < line.length; i++) for (const arrow of ARROW_TOKENS) if (line.startsWith(arrow.token, i)) return {
+		arrow,
+		start: i,
+		end: i + arrow.token.length
+	};
+}
+function splitColorAndLabel(rest) {
+	const trimmed = rest.trim();
+	if (!trimmed) return { label: "" };
+	const functional = trimmed.match(/^(rgba?|hsla?)\s*\([^)]*\)/i);
+	if (functional) return {
+		color: functional[0],
+		label: trimmed.slice(functional[0].length).trim()
+	};
+	const [firstWord, ...restWords] = trimmed.split(/\s+/);
+	if (CSS_COLOR_NAMES.has(firstWord.toLowerCase())) return {
+		color: firstWord,
+		label: restWords.join(" ")
+	};
+	return { label: trimmed };
+}
+function parseParticipantDeclaration(rest) {
+	const trimmed = rest.trim();
+	const configStart = trimmed.indexOf("@{");
+	let id;
+	let remainder;
+	let type;
+	let inlineAlias;
+	if (configStart === -1) {
+		const asMatch$1 = trimmed.match(/^(.*?)\s+as\s+(.+)$/i);
+		id = (asMatch$1 ? asMatch$1[1] : trimmed).trim();
+		remainder = asMatch$1 ? decodeSequenceText(asMatch$1[2]) : "";
+		return {
+			id,
+			name: remainder || id,
+			alias: remainder || void 0,
+			type
+		};
+	}
+	id = trimmed.slice(0, configStart).trim();
+	const configEnd = trimmed.indexOf("}", configStart);
+	const configText = configEnd === -1 ? "" : trimmed.slice(configStart + 1, configEnd + 1);
+	remainder = configEnd === -1 ? "" : trimmed.slice(configEnd + 1).trim();
+	try {
+		const config = JSON.parse(configText);
+		if (typeof config.type === "string") type = config.type;
+		if (typeof config.alias === "string") inlineAlias = config.alias;
+	} catch (_unused) {}
+	const asMatch = remainder.match(/^as\s+(.+)$/i);
+	const externalAlias = asMatch ? decodeSequenceText(asMatch[1]) : void 0;
+	const alias = externalAlias !== null && externalAlias !== void 0 ? externalAlias : inlineAlias && decodeSequenceText(inlineAlias);
+	return {
+		id,
+		name: alias !== null && alias !== void 0 ? alias : id,
+		alias,
+		type
+	};
+}
+function parseSequenceDiagram(code) {
+	const participants = [];
+	const participantMap = /* @__PURE__ */ new Map();
+	const messages = [];
+	const notes = [];
+	const blocks = [];
+	const boxes = [];
+	const activations = [];
+	const openActivations = /* @__PURE__ */ new Map();
+	const blockStack = [];
+	const openStack = [];
+	let openBox;
+	let autonumber;
+	let title;
+	let accTitle;
+	let accDescr;
+	let row = 0;
+	let pendingCreate;
+	function ensureParticipant(id, options = {}) {
+		var _options$name, _options$type;
+		const existing = participantMap.get(id);
+		if (existing) {
+			if (options.alias !== void 0) {
+				existing.alias = options.alias;
+				existing.name = options.alias;
+			}
+			if (options.type !== void 0) existing.type = options.type;
+			return existing;
+		}
+		const participant = {
+			id,
+			name: (_options$name = options.name) !== null && _options$name !== void 0 ? _options$name : id,
+			alias: options.alias,
+			index: participants.length,
+			type: (_options$type = options.type) !== null && _options$type !== void 0 ? _options$type : "participant",
+			links: [],
+			boxId: openBox === null || openBox === void 0 ? void 0 : openBox.id
+		};
+		participants.push(participant);
+		participantMap.set(id, participant);
+		if (openBox) openBox.participants.push(id);
+		return participant;
+	}
+	function activate(id, atRow) {
+		var _openActivations$get;
+		const stack = (_openActivations$get = openActivations.get(id)) !== null && _openActivations$get !== void 0 ? _openActivations$get : [];
+		stack.push(atRow);
+		openActivations.set(id, stack);
+	}
+	function deactivate(id, atRow) {
+		const stack = openActivations.get(id);
+		if (!stack || stack.length === 0) return;
+		const startRow = stack.pop();
+		activations.push({
+			participant: id,
+			startRow,
+			endRow: atRow
+		});
+	}
+	const lines = code.split("\n");
+	for (let index = 0; index < lines.length; index++) {
+		const trimmed = lines[index].replace(/%%.*$/, "").trim();
+		if (!trimmed) continue;
+		if (/^sequencediagram\b/i.test(trimmed)) continue;
+		if (trimmed.match(/^accDescr\s*\{$/i)) {
+			const collected = [];
+			index++;
+			while (index < lines.length && !/^\s*\}\s*$/.test(lines[index])) {
+				collected.push(lines[index].trim());
+				index++;
+			}
+			accDescr = collected.join("\n");
+			continue;
+		}
+		const titleMatch = trimmed.match(/^title\s*:?\s*(.*)$/i);
+		if (titleMatch) {
+			title = decodeSequenceText(titleMatch[1]);
+			continue;
+		}
+		const accTitleMatch = trimmed.match(/^accTitle\s*:\s*(.*)$/i);
+		if (accTitleMatch) {
+			accTitle = decodeSequenceText(accTitleMatch[1]);
+			continue;
+		}
+		const accDescrMatch = trimmed.match(/^accDescr\s*:\s*(.*)$/i);
+		if (accDescrMatch) {
+			accDescr = decodeSequenceText(accDescrMatch[1]);
+			continue;
+		}
+		const autonumberMatch = trimmed.match(/^autonumber(?:\s+(off|[\d.]+))?(?:\s+([\d.]+))?$/i);
+		if (autonumberMatch) {
+			const [, first, second] = autonumberMatch;
+			if ((first === null || first === void 0 ? void 0 : first.toLowerCase()) === "off") {
+				autonumber = void 0;
+				continue;
+			}
+			const start$1 = first === void 0 ? 1 : Number(first);
+			autonumber = {
+				start: start$1,
+				step: second === void 0 ? 1 : Number(second),
+				next: start$1,
+				declaredStart: start$1
+			};
+			continue;
+		}
+		const boxMatch = trimmed.match(/^box\b\s*(.*)$/i);
+		if (boxMatch) {
+			const { color, label: label$1 } = splitColorAndLabel(boxMatch[1]);
+			const box = {
+				id: `box-${boxes.length}`,
+				label: decodeSequenceText(label$1),
+				color,
+				participants: []
+			};
+			boxes.push(box);
+			openBox = box;
+			openStack.push({
+				kind: "box",
+				id: box.id
+			});
+			continue;
+		}
+		if (/^end$/i.test(trimmed)) {
+			const open = openStack.pop();
+			if ((open === null || open === void 0 ? void 0 : open.kind) === "box") {
+				openBox = void 0;
+				continue;
+			}
+			const block = blockStack.pop();
+			if (block) {
+				block.endRow = row - 1;
+				const lastSection = block.sections[block.sections.length - 1];
+				if (lastSection) lastSection.endRow = row - 1;
+			}
+			continue;
+		}
+		const blockOpener = BLOCK_OPENERS.find((keyword) => new RegExp(`^${keyword}\\b`, "i").test(trimmed));
+		if (blockOpener) {
+			const rest = trimmed.slice(blockOpener.length).trim();
+			const { color, label: label$1 } = blockOpener === "rect" ? splitColorAndLabel(rest) : {
+				color: void 0,
+				label: rest
+			};
+			const parent = blockStack[blockStack.length - 1];
+			const block = {
+				id: `block-${blocks.length}`,
+				type: blockOpener,
+				label: decodeSequenceText(label$1),
+				color,
+				sections: [{
+					label: decodeSequenceText(label$1),
+					startRow: row,
+					endRow: row
+				}],
+				startRow: row,
+				endRow: row,
+				depth: blockStack.length,
+				parentId: parent === null || parent === void 0 ? void 0 : parent.id
+			};
+			blocks.push(block);
+			blockStack.push(block);
+			openStack.push({
+				kind: "block",
+				id: block.id
+			});
+			continue;
+		}
+		const sectionKeyword = SECTION_KEYWORDS.find((keyword) => new RegExp(`^${keyword}\\b`, "i").test(trimmed));
+		if (sectionKeyword) {
+			const block = blockStack[blockStack.length - 1];
+			if (block) {
+				const previous = block.sections[block.sections.length - 1];
+				if (previous) previous.endRow = row - 1;
+				block.sections.push({
+					label: decodeSequenceText(trimmed.slice(sectionKeyword.length).trim()),
+					startRow: row,
+					endRow: row
+				});
+			}
+			continue;
+		}
+		const createMatch = trimmed.match(/^create\s+(participant|actor)\s+(.+)$/i);
+		if (createMatch) {
+			pendingCreate = {
+				type: createMatch[1].toLowerCase(),
+				rest: createMatch[2]
+			};
+			continue;
+		}
+		const destroyMatch = trimmed.match(/^destroy\s+(.+)$/i);
+		if (destroyMatch) {
+			const target = ensureParticipant(destroyMatch[1].trim());
+			target.destroyedAtRow = row;
+			continue;
+		}
+		const participantMatch = trimmed.match(/^(participant|actor)\s+(.+)$/i);
+		if (participantMatch) {
+			var _declaration$type;
+			const keyword = participantMatch[1].toLowerCase();
+			const declaration = parseParticipantDeclaration(participantMatch[2]);
+			ensureParticipant(declaration.id, {
+				name: declaration.name,
+				alias: declaration.alias,
+				type: (_declaration$type = declaration.type) !== null && _declaration$type !== void 0 ? _declaration$type : keyword
+			});
+			continue;
+		}
+		const activateMatch = trimmed.match(/^(activate|deactivate)\s+(.+)$/i);
+		if (activateMatch) {
+			const target = ensureParticipant(activateMatch[2].trim());
+			if (activateMatch[1].toLowerCase() === "activate") activate(target.id, row);
+			else deactivate(target.id, row - 1);
+			continue;
+		}
+		const noteMatch = trimmed.match(/^note\s+(right of|left of|over)\s+([^:]+):\s*(.*)$/i);
+		if (noteMatch) {
+			const noteParticipants = noteMatch[2].split(",").map((name) => name.trim()).filter(Boolean);
+			noteParticipants.forEach((name) => ensureParticipant(name));
+			notes.push({
+				placement: noteMatch[1].toLowerCase(),
+				participants: noteParticipants.map((name) => name),
+				text: decodeSequenceText(noteMatch[3]),
+				rowIndex: row
+			});
+			row++;
+			continue;
+		}
+		const linksMatch = trimmed.match(/^links\s+([^:]+):\s*(\{.*\})$/i);
+		if (linksMatch) {
+			const target = ensureParticipant(linksMatch[1].trim());
+			try {
+				const parsed = JSON.parse(linksMatch[2]);
+				for (const [label$1, url] of Object.entries(parsed)) target.links.push({
+					label: label$1,
+					url
+				});
+			} catch (_unused2) {}
+			continue;
+		}
+		const linkMatch = trimmed.match(/^link\s+([^:]+):\s*(.+?)\s*@\s*(\S+)$/i);
+		if (linkMatch) {
+			ensureParticipant(linkMatch[1].trim()).links.push({
+				label: linkMatch[2].trim(),
+				url: linkMatch[3].trim()
+			});
+			continue;
+		}
+		const colonIndex = trimmed.indexOf(":");
+		const arrowMatch = findArrow(colonIndex === -1 ? trimmed : trimmed.slice(0, colonIndex));
+		if (!arrowMatch || colonIndex === -1) continue;
+		const { arrow, start, end } = arrowMatch;
+		let fromRaw = trimmed.slice(0, start).trim();
+		let toRaw = trimmed.slice(end, colonIndex).trim();
+		const label = decodeSequenceText(trimmed.slice(colonIndex + 1));
+		const centralSource = fromRaw.endsWith("()");
+		if (centralSource) fromRaw = fromRaw.slice(0, -2).trim();
+		let activates = false;
+		let deactivates = false;
+		let centralTarget = false;
+		let scanning = true;
+		while (scanning) {
+			scanning = false;
+			if (toRaw.startsWith("+")) {
+				activates = true;
+				toRaw = toRaw.slice(1).trim();
+				scanning = true;
+			}
+			if (toRaw.startsWith("-")) {
+				deactivates = true;
+				toRaw = toRaw.slice(1).trim();
+				scanning = true;
+			}
+			if (toRaw.startsWith("()")) {
+				centralTarget = true;
+				toRaw = toRaw.slice(2).trim();
+				scanning = true;
+			}
+		}
+		if (!fromRaw || !toRaw) continue;
+		ensureParticipant(fromRaw);
+		if (pendingCreate) {
+			var _declaration$type2;
+			const declaration = parseParticipantDeclaration(pendingCreate.rest);
+			const created = ensureParticipant(declaration.id, {
+				name: declaration.name,
+				alias: declaration.alias,
+				type: (_declaration$type2 = declaration.type) !== null && _declaration$type2 !== void 0 ? _declaration$type2 : pendingCreate.type
+			});
+			created.createdAtRow = row;
+			pendingCreate = void 0;
+			toRaw = declaration.id;
+		}
+		const to = ensureParticipant(toRaw);
+		const message = {
+			from: fromRaw,
+			to: to.id,
+			label,
+			lineStyle: arrow.lineStyle,
+			arrowType: arrow.arrowType,
+			rowIndex: row
+		};
+		if (arrow.half) message.half = arrow.half;
+		if (arrow.reversed) message.reversed = true;
+		if (centralSource) message.centralSource = true;
+		if (centralTarget) message.centralTarget = true;
+		if (activates) message.activates = true;
+		if (deactivates) message.deactivates = true;
+		if (autonumber) {
+			message.sequenceNumber = autonumber.next;
+			autonumber.next = Number((autonumber.next + autonumber.step).toFixed(2));
+		}
+		if (activates) activate(to.id, row);
+		if (deactivates) deactivate(fromRaw, row);
+		messages.push(message);
+		row++;
+	}
+	for (const [participant, stack] of openActivations) for (const startRow of stack) activations.push({
+		participant,
+		startRow,
+		endRow: Math.max(row - 1, startRow)
+	});
+	for (const block of blockStack) {
+		block.endRow = row - 1;
+		const lastSection = block.sections[block.sections.length - 1];
+		if (lastSection) lastSection.endRow = row - 1;
+	}
+	activations.sort((a, b) => a.startRow - b.startRow);
+	return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+		participants,
+		messages,
+		notes,
+		blocks,
+		boxes,
+		activations
+	}, autonumber ? { autonumber: {
+		start: autonumber.declaredStart,
+		step: autonumber.step
+	} } : {}), title === void 0 ? {} : { title }), accTitle === void 0 ? {} : { accTitle }), accDescr === void 0 ? {} : { accDescr });
+}
+const BLOCK_STYLES = {
+	loop: {
+		border: "#64748B",
+		background: "rgba(100, 116, 139, 0.06)"
+	},
+	alt: {
+		border: "#6366F1",
+		background: "rgba(99, 102, 241, 0.06)"
+	},
+	opt: {
+		border: "#0EA5E9",
+		background: "rgba(14, 165, 233, 0.06)"
+	},
+	par: {
+		border: "#22C55E",
+		background: "rgba(34, 197, 94, 0.06)"
+	},
+	critical: {
+		border: "#F97316",
+		background: "rgba(249, 115, 22, 0.06)"
+	},
+	break: {
+		border: "#EF4444",
+		background: "rgba(239, 68, 68, 0.06)"
+	},
+	rect: {
+		border: "transparent",
+		background: "rgba(148, 163, 184, 0.10)"
+	}
+};
+function participantX(index) {
+	const { COLUMN_WIDTH } = SEQUENCE_LAYOUT;
+	return index * COLUMN_WIDTH + COLUMN_WIDTH / 2;
+}
+function rowHandleId(rowIndex, side, handleType) {
+	return `row-${rowIndex}-${side}-${handleType}`;
+}
+function buildGrid(data) {
+	const { ROW_HEIGHT, ROW_VERTICAL_PADDING, HEADER_HEIGHT } = SEQUENCE_LAYOUT;
+	const { BLOCK_TOP_PADDING, BLOCK_BOTTOM_PADDING, BLOCK_SECTION_PADDING, BLOCK_FRAME_GAP } = SEQUENCE_LAYOUT;
+	const items = [...data.messages.map((message) => ({
+		kind: "message",
+		parserRow: message.rowIndex,
+		message
+	})), ...data.notes.map((note) => ({
+		kind: "note",
+		parserRow: note.rowIndex,
+		note
+	}))].sort((a, b) => a.parserRow - b.parserRow);
+	const sizes = /* @__PURE__ */ new Map();
+	const layoutRowByParserRow = /* @__PURE__ */ new Map();
+	const rowSpan = /* @__PURE__ */ new Map();
+	let cursor = 0;
+	for (const item of items) {
+		const text = item.kind === "message" ? item.message.label : item.note.text;
+		sizes.set(item.parserRow, estimateSequenceMessageBoxSize(text));
+		layoutRowByParserRow.set(item.parserRow, cursor);
+		const span = item.kind === "message" && item.message.from === item.message.to ? 2 : 1;
+		rowSpan.set(item.parserRow, span);
+		cursor += span;
+	}
+	const totalRows = Math.max(cursor, 1);
+	const rowHeight = Math.max(ROW_HEIGHT, ...[...sizes.values()].map((size) => size.height + ROW_VERTICAL_PADDING));
+	function toLayoutRow(parserRow) {
+		for (let row = parserRow; row < parserRow + items.length + 1; row++) {
+			const layoutRow = layoutRowByParserRow.get(row);
+			if (layoutRow !== void 0) return layoutRow;
+		}
+		return totalRows;
+	}
+	function toLastLayoutRow(parserRow) {
+		for (let row = parserRow; row >= 0; row--) {
+			const layoutRow = layoutRowByParserRow.get(row);
+			if (layoutRow !== void 0) return layoutRow + rowSpan.get(row) - 1;
+		}
+		return 0;
+	}
+	const padBefore = new Array(totalRows + 1).fill(0);
+	const padAfter = new Array(totalRows + 1).fill(0);
+	for (const block of data.blocks) {
+		if (block.endRow < block.startRow) continue;
+		padBefore[toLayoutRow(block.startRow)] += BLOCK_TOP_PADDING + BLOCK_FRAME_GAP;
+		padAfter[toLastLayoutRow(block.endRow)] += BLOCK_BOTTOM_PADDING;
+		for (const section of block.sections.slice(1)) {
+			if (section.endRow < section.startRow) continue;
+			padBefore[toLayoutRow(section.startRow)] += BLOCK_SECTION_PADDING;
+		}
+	}
+	const rowTops = [];
+	let y = HEADER_HEIGHT;
+	for (let row = 0; row < totalRows; row++) {
+		y += padBefore[row];
+		rowTops.push(y);
+		y += rowHeight + padAfter[row];
+	}
+	const contentHeight = y;
+	return {
+		items,
+		sizes,
+		rowHeight,
+		totalRows,
+		rowTops,
+		rowCenters: rowTops.map((top) => top + rowHeight / 2),
+		contentHeight,
+		padBefore,
+		padAfter,
+		toLayoutRow,
+		toLastLayoutRow,
+		layoutRowByParserRow
+	};
+}
+function messageBoxX(fromIndex, toIndex, width) {
+	const { SELF_LOOP_OFFSET } = SEQUENCE_LAYOUT;
+	if (fromIndex === toIndex) return participantX(fromIndex) + SELF_LOOP_OFFSET;
+	return (participantX(fromIndex) + participantX(toIndex)) / 2 - width / 2;
+}
+function noteBox(note, grid, indexById) {
+	const { NOTE_OFFSET, COLUMN_WIDTH } = SEQUENCE_LAYOUT;
+	const indices = note.participants.map((id) => indexById.get(id)).filter((index) => index !== void 0);
+	if (indices.length === 0) return void 0;
+	const size = grid.sizes.get(note.rowIndex);
+	const first = participantX(indices[0]);
+	const last = participantX(indices[indices.length - 1]);
+	if (note.placement === "right of") return {
+		x: first + NOTE_OFFSET,
+		width: size.width
+	};
+	if (note.placement === "left of") return {
+		x: first - NOTE_OFFSET - size.width,
+		width: size.width
+	};
+	if (indices.length > 1) {
+		const width = Math.max(size.width, last - first + COLUMN_WIDTH / 2);
+		return {
+			x: (first + last) / 2 - width / 2,
+			width
+		};
+	}
+	return {
+		x: first - size.width / 2,
+		width: size.width
+	};
+}
+function blockFrameNode(block, data, grid, indexById) {
+	if (block.endRow < block.startRow) return void 0;
+	const { BLOCK_SIDE_PADDING, BLOCK_TOP_PADDING, BLOCK_BOTTOM_PADDING, BLOCK_CONTENT_INSET } = SEQUENCE_LAYOUT;
+	const involved = /* @__PURE__ */ new Set();
+	const lefts = [];
+	const rights = [];
+	function boxInset(parserRow) {
+		return BLOCK_CONTENT_INSET * (data.blocks.filter((other) => other.depth > block.depth && other.endRow >= other.startRow && other.startRow <= parserRow && other.endRow >= parserRow).length + 1);
+	}
+	for (const message of data.messages) {
+		if (message.rowIndex < block.startRow || message.rowIndex > block.endRow) continue;
+		const from = indexById.get(message.from);
+		const to = indexById.get(message.to);
+		if (from !== void 0) involved.add(from);
+		if (to !== void 0) involved.add(to);
+		if (from === void 0 || to === void 0) continue;
+		const width$1 = grid.sizes.get(message.rowIndex).width;
+		const x$1 = messageBoxX(from, to, width$1);
+		const inset = boxInset(message.rowIndex);
+		lefts.push(x$1 - inset);
+		rights.push(x$1 + width$1 + inset);
+	}
+	for (const note of data.notes) {
+		if (note.rowIndex < block.startRow || note.rowIndex > block.endRow) continue;
+		note.participants.forEach((id) => {
+			const index = indexById.get(id);
+			if (index !== void 0) involved.add(index);
+		});
+		const box = noteBox(note, grid, indexById);
+		if (box === void 0) continue;
+		const inset = boxInset(note.rowIndex);
+		lefts.push(box.x - inset);
+		rights.push(box.x + box.width + inset);
+	}
+	if (involved.size === 0) data.participants.forEach((p) => involved.add(p.index));
+	const minIndex = Math.min(...involved);
+	const maxIndex = Math.max(...involved);
+	const startRow = grid.toLayoutRow(block.startRow);
+	const endRow = grid.toLastLayoutRow(block.endRow);
+	const sidePadding = Math.max(BLOCK_CONTENT_INSET, BLOCK_SIDE_PADDING - block.depth * BLOCK_CONTENT_INSET);
+	const nested = data.blocks.filter((other) => other.id !== block.id && other.depth > block.depth);
+	const deeperAtTop = nested.filter((other) => other.endRow >= other.startRow && grid.toLayoutRow(other.startRow) === startRow).length;
+	const deeperAtBottom = nested.filter((other) => other.endRow >= other.startRow && grid.toLastLayoutRow(other.endRow) === endRow).length;
+	const x = Math.min(participantX(minIndex) - sidePadding, ...lefts);
+	const width = Math.max(participantX(maxIndex) + sidePadding, ...rights) - x;
+	const top = grid.rowTops[startRow] - BLOCK_TOP_PADDING * (deeperAtTop + 1);
+	const height = grid.rowTops[endRow] + grid.rowHeight + BLOCK_BOTTOM_PADDING * (deeperAtBottom + 1) - top;
+	const style = BLOCK_STYLES[block.type];
+	return {
+		id: `sequence-block-${block.id}`,
+		type: "group",
+		position: {
+			x,
+			y: top
+		},
+		width,
+		height,
+		zIndex: Math.min(-1, -10 + block.depth),
+		selectable: true,
+		data: {
+			source: "mermaid",
+			backgroundColor: style.background,
+			borderColor: style.border,
+			autoLayout: false,
+			sequenceBlock: {
+				type: block.type,
+				label: block.label,
+				color: block.color,
+				depth: block.depth,
+				startRow,
+				endRow,
+				sections: block.sections.map((section) => ({
+					label: section.label,
+					startRow: grid.toLayoutRow(section.startRow),
+					endRow: grid.toLastLayoutRow(section.endRow)
+				}))
+			},
+			componentFields: [generateComponentFieldNameInput(block.label ? `${block.type} ${block.label}` : block.type)]
+		},
+		style: {
+			width,
+			height
+		}
+	};
+}
+function noteNode(note, grid, indexById) {
+	const box = noteBox(note, grid, indexById);
+	if (box === void 0) return void 0;
+	const { x, width } = box;
+	const size = grid.sizes.get(note.rowIndex);
+	const row = grid.toLayoutRow(note.rowIndex);
+	return {
+		id: `note-${note.rowIndex}`,
+		type: "shape",
+		position: {
+			x,
+			y: grid.rowCenters[row] - size.height / 2
+		},
+		width,
+		height: size.height,
+		data: {
+			source: "mermaid",
+			shape: "rectangle",
+			fill: "#FEF3C7",
+			stroke: "#F59E0B",
+			strokeWidth: 1,
+			textColor: "#1F2937",
+			sequenceNote: {
+				placement: note.placement,
+				participants: note.participants,
+				row
+			},
+			componentFields: [generateComponentFieldNameInput(note.text)]
+		},
+		style: {
+			width,
+			height: size.height
+		}
+	};
+}
+function messageMarkers(message, color) {
+	const arrow = {
+		width: 16,
+		height: 16,
+		color
+	};
+	if (message.arrowType === "none") return {};
+	if (message.arrowType === "filled") return { markerEnd: _objectSpread2({ type: __xyflow_react.MarkerType.ArrowClosed }, arrow) };
+	if (message.arrowType === "bidirectional") return {
+		markerStart: _objectSpread2({ type: __xyflow_react.MarkerType.ArrowClosed }, arrow),
+		markerEnd: _objectSpread2({ type: __xyflow_react.MarkerType.ArrowClosed }, arrow)
+	};
+	if (message.reversed) return { markerStart: _objectSpread2({ type: __xyflow_react.MarkerType.Arrow }, arrow) };
+	return { markerEnd: _objectSpread2({ type: __xyflow_react.MarkerType.Arrow }, arrow) };
+}
+function convertSequenceDiagramToReactFlow(mermaidCode) {
+	const data = parseSequenceDiagram(mermaidCode);
+	const { PARTICIPANT_NODE_WIDTH, COLUMN_WIDTH, BOX_TOP_INSET, BOX_BOTTOM_PADDING, BLOCK_SIDE_PADDING } = SEQUENCE_LAYOUT;
+	const grid = buildGrid(data);
+	const indexById = new Map(data.participants.map((p) => [p.id, p.index]));
+	const nodes = [];
+	const edges = [];
+	for (const box of data.boxes) {
+		var _box$color;
+		const indices = box.participants.map((id) => indexById.get(id)).filter((index) => index !== void 0);
+		if (indices.length === 0) continue;
+		const minIndex = Math.min(...indices);
+		const maxIndex = Math.max(...indices);
+		const x = participantX(minIndex) - COLUMN_WIDTH / 2 + 8;
+		const width = participantX(maxIndex) - participantX(minIndex) + COLUMN_WIDTH - 16;
+		nodes.push({
+			id: `sequence-box-${box.id}`,
+			type: "group",
+			position: {
+				x,
+				y: -BOX_TOP_INSET
+			},
+			width,
+			height: grid.contentHeight + BOX_TOP_INSET + BOX_BOTTOM_PADDING,
+			zIndex: -20,
+			data: {
+				source: "mermaid",
+				backgroundColor: (_box$color = box.color) !== null && _box$color !== void 0 ? _box$color : "rgba(148, 163, 184, 0.08)",
+				borderColor: "#94A3B8",
+				autoLayout: false,
+				sequenceBox: {
+					label: box.label,
+					participants: box.participants
+				},
+				componentFields: [generateComponentFieldNameInput(box.label)]
+			},
+			style: {
+				width,
+				height: grid.contentHeight + BOX_TOP_INSET + BOX_BOTTOM_PADDING
+			}
+		});
+	}
+	for (const block of data.blocks) {
+		const node = blockFrameNode(block, data, grid, indexById);
+		if (node) nodes.push(node);
+	}
+	for (const participant of data.participants) {
+		const activations = data.activations.filter((activation) => activation.participant === participant.id).map((activation) => ({
+			startRow: grid.toLayoutRow(activation.startRow),
+			endRow: grid.toLastLayoutRow(activation.endRow)
+		}));
+		nodes.push({
+			id: `participant-${participant.id}`,
+			type: "sequenceParticipant",
+			position: {
+				x: participantX(participant.index) - PARTICIPANT_NODE_WIDTH / 2,
+				y: 0
+			},
+			data: _objectSpread2(_objectSpread2(_objectSpread2({
+				source: "mermaid",
+				label: participant.name,
+				participantType: participant.type,
+				rowCount: grid.totalRows,
+				rowHeight: grid.rowHeight,
+				rowYs: grid.rowCenters,
+				lifelineHeight: grid.contentHeight,
+				activations,
+				links: participant.links
+			}, participant.createdAtRow === void 0 ? {} : { lifelineStartRow: grid.toLayoutRow(participant.createdAtRow) }), participant.destroyedAtRow === void 0 ? {} : { lifelineEndRow: grid.toLastLayoutRow(participant.destroyedAtRow) }), {}, { componentFields: [generateComponentFieldNameInput(participant.name), generateComponentFieldInput({
+				componentFieldId: "color",
+				label: "Color",
+				data: SEQUENCE_PARTICIPANT_COLOR,
+				type: require_component_type.ComponentInputType.ColorPicker
+			})] })
+		});
+	}
+	for (const note of data.notes) {
+		const node = noteNode(note, grid, indexById);
+		if (node) nodes.push(node);
+	}
+	for (const message of data.messages) {
+		const fromIndex = indexById.get(message.from);
+		const toIndex = indexById.get(message.to);
+		if (fromIndex === void 0 || toIndex === void 0) continue;
+		const isSelf = fromIndex === toIndex;
+		const goesRight = fromIndex < toIndex;
+		const size = grid.sizes.get(message.rowIndex);
+		const row = grid.toLayoutRow(message.rowIndex);
+		const x = messageBoxX(fromIndex, toIndex, size.width);
+		const messageId = `message-${message.rowIndex}`;
+		nodes.push({
+			id: messageId,
+			type: "shape",
+			position: {
+				x,
+				y: grid.rowCenters[row] - size.height / 2
+			},
+			width: size.width,
+			height: size.height,
+			data: _objectSpread2(_objectSpread2({
+				source: "mermaid",
+				shape: "rectangle",
+				fill: "#1E293B",
+				stroke: "#475569",
+				strokeWidth: 1
+			}, message.sequenceNumber === void 0 ? {} : { sequenceNumber: message.sequenceNumber }), {}, { componentFields: [generateComponentFieldNameInput(message.label)] }),
+			style: {
+				width: size.width,
+				height: size.height
+			}
+		});
+		const color = "#94a3b8";
+		const edgeStyle = _objectSpread2({
+			stroke: color,
+			strokeWidth: 2
+		}, message.lineStyle === "dashed" ? { strokeDasharray: "4 4" } : {});
+		const sourceSide = goesRight || isSelf ? "right" : "left";
+		const targetSide = isSelf ? "right" : goesRight ? "left" : "right";
+		edges.push(_objectSpread2({
+			id: `edge-${message.rowIndex}-a`,
+			source: `participant-${message.from}`,
+			target: messageId,
+			sourceHandle: rowHandleId(row, sourceSide, "source"),
+			targetHandle: isSelf ? "target-top" : sourceSide === "right" ? "target-left" : "target-right",
+			type: "smoothstep",
+			style: edgeStyle,
+			data: _objectSpread2(_objectSpread2(_objectSpread2({
+				source: "mermaid",
+				arrowType: message.arrowType
+			}, message.half ? { half: message.half } : {}), message.reversed ? { reversed: true } : {}), message.centralSource ? { centralSource: true } : {})
+		}, message.reversed ? messageMarkers(message, color) : {}));
+		edges.push(_objectSpread2({
+			id: `edge-${message.rowIndex}-b`,
+			source: messageId,
+			target: `participant-${message.to}`,
+			sourceHandle: isSelf ? "source-bottom" : goesRight ? "source-right" : "source-left",
+			targetHandle: rowHandleId(row + (isSelf ? 1 : 0), targetSide, "target"),
+			type: "smoothstep",
+			style: edgeStyle,
+			data: _objectSpread2(_objectSpread2({
+				source: "mermaid",
+				arrowType: message.arrowType
+			}, message.half ? { half: message.half } : {}), message.centralTarget ? { centralTarget: true } : {})
+		}, message.reversed ? {} : messageMarkers(message, color)));
+	}
+	if (data.title) nodes.push({
+		id: "sequence-title",
+		type: "text",
+		position: {
+			x: participantX(0) - COLUMN_WIDTH / 2,
+			y: -BOX_TOP_INSET - BLOCK_SIDE_PADDING
+		},
+		data: {
+			source: "mermaid",
+			componentFields: [generateComponentFieldNameInput(data.title)]
+		}
+	});
+	return {
+		nodes,
+		edges
+	};
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
 	try {
 		var i = n[a](c), u = i.value;
@@ -2023,7 +3109,7 @@ function _asyncToGenerator(n) {
 }
 mermaid.default.initialize({
 	startOnLoad: false,
-	theme: "default",
+	theme: "dark",
 	flowchart: {
 		htmlLabels: false,
 		curve: "linear"
@@ -2038,70 +3124,6 @@ function detectDiagramType(code) {
 	}
 	return "flowchart";
 }
-function parseSequenceDiagram(code) {
-	const participants = [];
-	const messages = [];
-	const participantMap = /* @__PURE__ */ new Map();
-	const lines = code.split("\n");
-	let messageRow = 0;
-	for (const line of lines) {
-		const trimmed = line.trim();
-		if (!trimmed || trimmed.toLowerCase() === "sequencediagram") continue;
-		const participantMatch = trimmed.match(/^(?:participant|actor)\s+(\S+)(?:\s+as\s+(.+))?$/i);
-		if (participantMatch) {
-			var _participantMatch$;
-			const id = participantMatch[1];
-			const alias = (_participantMatch$ = participantMatch[2]) === null || _participantMatch$ === void 0 ? void 0 : _participantMatch$.trim();
-			if (!participantMap.has(id)) {
-				const index = participants.length;
-				participantMap.set(id, index);
-				participants.push({
-					id,
-					name: alias !== null && alias !== void 0 ? alias : id,
-					alias,
-					index
-				});
-			}
-			continue;
-		}
-		const messageMatch = trimmed.match(/^([A-Za-z0-9_]+)\s*(-->>|-->|--\)|->>|->|-\))\s*([A-Za-z0-9_]+)\s*:\s*(.*)$/);
-		if (messageMatch) {
-			const [, from, arrow, to, label] = messageMatch;
-			if (!participantMap.has(from)) {
-				const index = participants.length;
-				participantMap.set(from, index);
-				participants.push({
-					id: from,
-					name: from,
-					index
-				});
-			}
-			if (!participantMap.has(to)) {
-				const index = participants.length;
-				participantMap.set(to, index);
-				participants.push({
-					id: to,
-					name: to,
-					index
-				});
-			}
-			const lineStyle = arrow.startsWith("--") ? "dashed" : "solid";
-			const arrowType = arrow.includes(">>") ? "filled" : arrow.includes(")") ? "open" : "none";
-			messages.push({
-				from,
-				to,
-				label: label.trim(),
-				lineStyle,
-				arrowType,
-				rowIndex: messageRow++
-			});
-		}
-	}
-	return {
-		participants,
-		messages
-	};
-}
 const MERMAID_TO_PORTAL_SHAPE = {
 	rect: "rectangle",
 	round: "rounded-rect",
@@ -3089,12 +4111,12 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 	debugLog("Creating React Flow elements");
 	function getNodeColors(shape) {
 		const colors = {
-			rect: ["#E3F2FD", "#1976D2"],
-			diamond: ["#FFF3E0", "#F57C00"],
-			circle: ["#E8F5E8", "#388E3C"],
-			stadium: ["#F3E5F5", "#7B1FA2"],
-			round: ["#FCE4EC", "#C2185B"]
-		}[shape] || ["#F0F4F8", "#2D3748"];
+			rect: ["#1C2336", "#3D5EA8"],
+			diamond: ["#1C2336", "#3D5EA8"],
+			circle: ["#1C2336", "#3D5EA8"],
+			stadium: ["#1C2336", "#3D5EA8"],
+			round: ["#1C2336", "#3D5EA8"]
+		}[shape] || ["#1C2336", "#3D5EA8"];
 		return {
 			backgroundColor: colors[0],
 			borderColor: colors[1]
@@ -3103,24 +4125,24 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 	function getSubgraphColors(index) {
 		const subgraphColors = [
 			{
-				bg: "rgba(227, 242, 253, 0.4)",
-				border: "#1976D2"
+				bg: "rgba(100, 181, 246, 0.08)",
+				border: "#64B5F6"
 			},
 			{
-				bg: "rgba(232, 245, 233, 0.4)",
-				border: "#388E3C"
+				bg: "rgba(129, 199, 132, 0.08)",
+				border: "#81C784"
 			},
 			{
-				bg: "rgba(243, 229, 245, 0.4)",
-				border: "#7B1FA2"
+				bg: "rgba(186, 104, 200, 0.08)",
+				border: "#BA68C8"
 			},
 			{
-				bg: "rgba(255, 243, 224, 0.4)",
-				border: "#F57C00"
+				bg: "rgba(255, 183, 77, 0.08)",
+				border: "#FFB74D"
 			},
 			{
-				bg: "rgba(252, 228, 236, 0.4)",
-				border: "#C2185B"
+				bg: "rgba(240, 98, 146, 0.08)",
+				border: "#F06292"
 			}
 		];
 		return subgraphColors[index % subgraphColors.length];
@@ -3353,7 +4375,8 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 				labelStyle: {
 					fontSize: "12px",
 					fontWeight: "500",
-					backgroundColor: "white",
+					color: "#E2E8F0",
+					backgroundColor: "#1E293B",
 					padding: "2px 6px"
 				},
 				markerEnd: {
@@ -3376,120 +4399,7 @@ function layoutGraph(nodes, edges, subgraphs, direction) {
 	adjustParentSizesAfterPositioning(subgraphLayouts, subgraphPositions, processSubgraphsInHierarchicalOrder(subgraphs), direction);
 	return createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgraphPositions, standalonePositions, direction);
 }
-function getParticipantX(index) {
-	const { COLUMN_WIDTH } = SEQUENCE_LAYOUT;
-	return index * COLUMN_WIDTH + COLUMN_WIDTH / 2;
-}
-function getRowY(rowIndex) {
-	const { HEADER_HEIGHT, ROW_HEIGHT } = SEQUENCE_LAYOUT;
-	return HEADER_HEIGHT + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
-}
-function rowHandleId(rowIndex, side, handleType) {
-	return `row-${rowIndex}-${side}-${handleType}`;
-}
-function convertSequenceDiagramToReactFlow(_x2) {
-	return _convertSequenceDiagramToReactFlow.apply(this, arguments);
-}
-function _convertSequenceDiagramToReactFlow() {
-	_convertSequenceDiagramToReactFlow = _asyncToGenerator(function* (mermaidCode) {
-		const { participants, messages } = parseSequenceDiagram(mermaidCode);
-		const { PARTICIPANT_NODE_WIDTH, MESSAGE_NODE_WIDTH, MESSAGE_NODE_HEIGHT, SELF_LOOP_OFFSET } = SEQUENCE_LAYOUT;
-		const hasSelfLoop = messages.some((m) => m.from === m.to);
-		const rowCount = messages.length + (hasSelfLoop ? 1 : 0);
-		const nodes = [];
-		const edges = [];
-		for (const p of participants) nodes.push({
-			id: `participant-${p.id}`,
-			type: "sequenceParticipant",
-			position: {
-				x: getParticipantX(p.index) - PARTICIPANT_NODE_WIDTH / 2,
-				y: 0
-			},
-			data: {
-				source: "mermaid",
-				label: p.name,
-				rowCount,
-				componentFields: [generateComponentFieldNameInput(p.name), generateComponentFieldInput({
-					componentFieldId: "color",
-					label: "Color",
-					data: "#000000",
-					type: require_component_type.ComponentInputType.ColorPicker
-				})]
-			}
-		});
-		for (const m of messages) {
-			const fromParticipant = participants.find((p) => p.id === m.from);
-			const toParticipant = participants.find((p) => p.id === m.to);
-			if (!fromParticipant || !toParticipant) continue;
-			const fromIndex = fromParticipant.index;
-			const toIndex = toParticipant.index;
-			const isSelf = fromIndex === toIndex;
-			const goesRight = fromIndex < toIndex;
-			const centerX = isSelf ? getParticipantX(fromIndex) + SELF_LOOP_OFFSET : (getParticipantX(fromIndex) + getParticipantX(toIndex)) / 2;
-			const messageId = `message-${m.rowIndex}`;
-			nodes.push({
-				id: messageId,
-				type: "shape",
-				position: {
-					x: centerX - MESSAGE_NODE_WIDTH / 2,
-					y: getRowY(m.rowIndex) - MESSAGE_NODE_HEIGHT / 2
-				},
-				data: {
-					source: "mermaid",
-					shape: "rectangle",
-					fill: "#f8fafc",
-					stroke: "#CCCCCC",
-					strokeWidth: 1,
-					componentFields: [generateComponentFieldNameInput(m.label)]
-				},
-				style: {
-					width: MESSAGE_NODE_WIDTH,
-					height: MESSAGE_NODE_HEIGHT
-				}
-			});
-			const edgeStyle = _objectSpread2({
-				stroke: "#94a3b8",
-				strokeWidth: 2
-			}, m.lineStyle === "dashed" ? { strokeDasharray: "4 4" } : {});
-			const markerEnd = m.arrowType !== "none" ? {
-				type: m.arrowType === "filled" ? __xyflow_react.MarkerType.ArrowClosed : __xyflow_react.MarkerType.Arrow,
-				width: 16,
-				height: 16,
-				color: "#94a3b8"
-			} : void 0;
-			const sourceSide = goesRight || isSelf ? "right" : "left";
-			const targetSide = isSelf ? "right" : goesRight ? "left" : "right";
-			edges.push({
-				id: `edge-${m.rowIndex}-a`,
-				source: `participant-${m.from}`,
-				target: messageId,
-				sourceHandle: rowHandleId(m.rowIndex, sourceSide, "source"),
-				targetHandle: isSelf ? "target-top" : sourceSide === "right" ? "target-left" : "target-right",
-				type: "smoothstep",
-				style: edgeStyle,
-				data: { source: "mermaid" }
-			});
-			edges.push(_objectSpread2(_objectSpread2({
-				id: `edge-${m.rowIndex}-b`,
-				source: messageId,
-				target: `participant-${m.to}`,
-				sourceHandle: isSelf ? "source-bottom" : goesRight ? "source-right" : "source-left",
-				targetHandle: rowHandleId(m.rowIndex + (isSelf ? 1 : 0), targetSide, "target"),
-				type: "smoothstep",
-				style: m.lineStyle === "dashed" ? edgeStyle : {
-					stroke: "#94a3b8",
-					strokeWidth: 2
-				}
-			}, markerEnd ? { markerEnd } : {}), {}, { data: { source: "mermaid" } }));
-		}
-		return {
-			nodes,
-			edges
-		};
-	});
-	return _convertSequenceDiagramToReactFlow.apply(this, arguments);
-}
-function convertFlowchartToReactFlow(_x3) {
+function convertFlowchartToReactFlow(_x2) {
 	return _convertFlowchartToReactFlow.apply(this, arguments);
 }
 function _convertFlowchartToReactFlow() {
@@ -3513,7 +4423,7 @@ function _convertFlowchartToReactFlow() {
 	});
 	return _convertFlowchartToReactFlow.apply(this, arguments);
 }
-function convertMermaidToReactFlow(_x4) {
+function convertMermaidToReactFlow(_x3) {
 	return _convertMermaidToReactFlow.apply(this, arguments);
 }
 function _convertMermaidToReactFlow() {
@@ -4634,6 +5544,8 @@ exports.MongoIndexSchema = MongoIndexSchema;
 exports.MongoNestedFieldSchema = MongoNestedFieldSchema;
 exports.NestedFieldSchema = NestedFieldSchema;
 exports.NoSqlFieldSchema = NoSqlFieldSchema;
+exports.SEQUENCE_LAYOUT = SEQUENCE_LAYOUT;
+exports.SEQUENCE_PARTICIPANT_COLOR = SEQUENCE_PARTICIPANT_COLOR;
 exports.SqlToAstParser = SqlToAstParser;
 exports.buildMetaData = buildMetaData;
 exports.contextSchema = require_headless.contextSchema;
@@ -4644,6 +5556,7 @@ exports.convertMermaidToReactFlowWithContext = convertMermaidToReactFlowWithCont
 exports.convertMongoSchemaToAst = convertMongoSchemaToAst;
 exports.convertNoSQLToAst = convertNoSQLToAst;
 exports.convertUiGraphToMermaid = convertUiGraphToMermaid;
+exports.estimateSequenceMessageBoxSize = estimateSequenceMessageBoxSize;
 exports.flattenMetaData = flattenMetaData;
 exports.generateTableNodeId = generateTableNodeId;
 exports.generateUUID = generateUUID;