@uigraph/sdk 1.2.3 → 1.2.5

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { t as ComponentInputType } from "./__component-type.CYmD-KIu.mjs";
-import { t as contextSchema } from "./__headless.DpdtlCFx.mjs";
+import { t as contextSchema } from "./__headless.bq_YVz7q.mjs";
 import { arrayNonNullable, generateUUID as generateUUID$1, objectPick } from "daily-code";
 import { z } from "zod";
 import { MarkerType, Position } from "@xyflow/react";
+import markdownToDelta from "markdown-to-quill-delta";
 import dagre from "dagre";
 import mermaid from "mermaid";
-import markdownToDelta from "markdown-to-quill-delta";
 function mapDynamoTypeToAstType(dynamoType) {
 	switch (dynamoType) {
 		case "S": return "string";
@@ -1773,76 +1773,433 @@ 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 DEFAULT_C4_LAYOUT = {
+	c4ShapeInRow: 4,
+	c4BoundaryInRow: 2
 };
-({
-	NETWORK_SIMPLEX: "network-simplex",
-	TIGHT_TREE: "tight-tree",
-	LONGEST_PATH: "longest-path"
-}).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 buildStereotype(keyword) {
+	const suffix = keyword.shape === "db" ? "_db" : keyword.shape === "queue" ? "_queue" : "";
+	return `${keyword.isExternal ? "external_" : ""}${keyword.kind}${suffix}`;
+}
+const C4_DIAGRAM_TYPES = [
+	"C4Context",
+	"C4Container",
+	"C4Component",
+	"C4Dynamic",
+	"C4Deployment"
+];
+const ELEMENT_KINDS = {
+	Person: "person",
+	System: "system",
+	Container: "container",
+	Component: "component"
 };
-function sanitizeMermaidLabels(src) {
-	if (!src) return src;
-	const subgraphFixed = src.replace(/([A-Za-z0-9_]+)\[((?:(?![\"']).)*?)\]/g, (m, id, label) => {
-		if (/^[\"']/.test(label)) return m;
-		if (/[()\"\[\],:;]/.test(label)) return `${id}[\"${String(label).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"]`;
-		return m;
-	}).replace(/^([ \t]*subgraph\s+)([^\n\r]+)(\|[^\n\r]*)?$/gim, (m, pre, title, rest) => {
-		const t = String(title).trim();
-		if (/^[\"']/.test(t)) return m;
-		if (/[()\"\[\],:;]/.test(t)) return `${pre}\"${t.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"${rest || ""}`;
-		return m;
-	});
-	const diagRegex = /\b(graph|flowchart|sequenceDiagram|stateDiagram|classDiagram|gantt|journey|erDiagram|gitGraph|pie|timeline|infoDiagram)\b/i;
-	const allStarts = [];
-	let mm;
-	const globalRegex = new RegExp(diagRegex.source, "gim");
-	while ((mm = globalRegex.exec(subgraphFixed)) !== null) {
-		allStarts.push(mm.index);
-		if (globalRegex.lastIndex === mm.index) globalRegex.lastIndex++;
+const BOUNDARY_KEYWORDS = {
+	Boundary: { kind: "generic" },
+	Enterprise_Boundary: {
+		kind: "enterprise",
+		fixedType: "ENTERPRISE"
+	},
+	System_Boundary: {
+		kind: "system",
+		fixedType: "SYSTEM"
+	},
+	Container_Boundary: {
+		kind: "container",
+		fixedType: "CONTAINER"
+	},
+	Deployment_Node: {
+		kind: "node",
+		nodeType: "node"
+	},
+	Node: {
+		kind: "node",
+		nodeType: "node"
+	},
+	Node_L: {
+		kind: "node",
+		nodeType: "nodeL"
+	},
+	Node_R: {
+		kind: "node",
+		nodeType: "nodeR"
 	}
-	if (allStarts.length <= 1) return subgraphFixed;
-	const first = allStarts[0];
-	const second = allStarts[1];
-	return subgraphFixed.slice(first, second).trim();
+};
+const REL_DIRECTIONS = {
+	Rel: "default",
+	RelIndex: "default",
+	BiRel: "bi",
+	Rel_Back: "back",
+	Rel_U: "up",
+	Rel_Up: "up",
+	Rel_D: "down",
+	Rel_Down: "down",
+	Rel_L: "left",
+	Rel_Left: "left",
+	Rel_R: "right",
+	Rel_Right: "right",
+	Rel_Neighbor: "default",
+	BiRel_Neighbor: "bi"
+};
+const DIRECTIONS = [
+	"TB",
+	"BT",
+	"LR",
+	"RL"
+];
+function parseElementKeyword(keyword) {
+	let rest = keyword;
+	let isExternal = false;
+	if (rest.endsWith("_Ext")) {
+		isExternal = true;
+		rest = rest.slice(0, -4);
+	}
+	let shape = "default";
+	if (rest.endsWith("Db")) {
+		shape = "db";
+		rest = rest.slice(0, -2);
+	} else if (rest.endsWith("Queue")) {
+		shape = "queue";
+		rest = rest.slice(0, -5);
+	}
+	const kind = ELEMENT_KINDS[rest];
+	if (!kind) return null;
+	return {
+		kind,
+		shape,
+		isExternal
+	};
+}
+function splitArguments(raw) {
+	if (!raw.trim()) return [];
+	const args = [];
+	let current = "";
+	let inQuotes = false;
+	let depth = 0;
+	for (let i = 0; i < raw.length; i++) {
+		const char = raw[i];
+		if (char === "\"" && raw[i - 1] !== "\\") {
+			inQuotes = !inQuotes;
+			current += char;
+			continue;
+		}
+		if (!inQuotes && (char === "(" || char === "[")) depth++;
+		if (!inQuotes && (char === ")" || char === "]")) depth--;
+		if (char === "," && !inQuotes && depth === 0) {
+			args.push(current.trim());
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	args.push(current.trim());
+	return args;
+}
+function unquote(value) {
+	const trimmed = value.trim();
+	if (trimmed.startsWith("\"") && trimmed.endsWith("\"") && trimmed.length >= 2) return trimmed.slice(1, -1).replace(/\\"/g, "\"").replace(/<br\s*\/?>/gi, "\n").trim();
+	return trimmed.replace(/<br\s*\/?>/gi, "\n");
+}
+function partitionArguments(args) {
+	const positional = [];
+	const named = {};
+	for (const arg of args) {
+		const match = arg.match(/^\$([A-Za-z0-9_]+)\s*=\s*([\s\S]*)$/);
+		if (match) {
+			named[match[1]] = unquote(match[2]);
+			continue;
+		}
+		positional.push(unquote(arg));
+	}
+	return {
+		positional,
+		named
+	};
+}
+function slot(positional, index) {
+	const value = positional[index];
+	if (value === void 0) return void 0;
+	if (value === "") return void 0;
+	return value;
+}
+function isC4Diagram(code) {
+	for (const line of code.split("\n")) {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("%%")) continue;
+		return C4_DIAGRAM_TYPES.some((type) => trimmed.toLowerCase().startsWith(type.toLowerCase()));
+	}
+	return false;
+}
+function toStatements(code) {
+	const statements = [];
+	let buffer = "";
+	let depth = 0;
+	for (const rawLine of code.split("\n")) {
+		const line = rawLine.replace(/%%.*$/, "").trim();
+		if (!line) continue;
+		buffer = buffer ? `${buffer} ${line}` : line;
+		let inQuotes = false;
+		for (let i = 0; i < line.length; i++) {
+			const char = line[i];
+			if (char === "\"" && line[i - 1] !== "\\") inQuotes = !inQuotes;
+			if (inQuotes) continue;
+			if (char === "(") depth++;
+			if (char === ")") depth--;
+		}
+		if (depth > 0) continue;
+		depth = 0;
+		statements.push(...splitOnBraces(buffer));
+		buffer = "";
+	}
+	if (buffer) statements.push(...splitOnBraces(buffer));
+	return statements;
+}
+function splitOnBraces(buffer) {
+	const statements = [];
+	let current = "";
+	let inQuotes = false;
+	let depth = 0;
+	function flush() {
+		if (current.trim()) statements.push(current.trim());
+		current = "";
+	}
+	for (let i = 0; i < buffer.length; i++) {
+		const char = buffer[i];
+		if (char === "\"" && buffer[i - 1] !== "\\") inQuotes = !inQuotes;
+		if (!inQuotes && char === "(") depth++;
+		if (!inQuotes && char === ")") depth--;
+		if (!inQuotes && depth === 0 && char === "{") {
+			current += char;
+			flush();
+			continue;
+		}
+		if (!inQuotes && depth === 0 && char === "}") {
+			flush();
+			statements.push("}");
+			continue;
+		}
+		current += char;
+	}
+	flush();
+	return statements;
+}
+function parseC4Diagram(code) {
+	const elements = [];
+	const boundaries = [];
+	const relationships = [];
+	const elementStyles = {};
+	const boundaryStyles = {};
+	const relStyles = {};
+	const layout = _objectSpread2({}, DEFAULT_C4_LAYOUT);
+	let type = "C4Context";
+	let title;
+	let accTitle;
+	let accDescription;
+	let direction;
+	const boundaryStack = [];
+	let anonymousBoundaryCount = 0;
+	let accDescrLines;
+	function currentParentId() {
+		return boundaryStack[boundaryStack.length - 1];
+	}
+	function registerChild(childId) {
+		const parentId = currentParentId();
+		if (!parentId) return;
+		const parent = boundaries.find((boundary) => boundary.id === parentId);
+		if (!parent) return;
+		if (parent.childIds.includes(childId)) return;
+		parent.childIds.push(childId);
+	}
+	for (const statement of toStatements(code)) {
+		if (accDescrLines) {
+			if (statement === "}") {
+				accDescription = accDescrLines.join("\n").trim();
+				accDescrLines = void 0;
+				continue;
+			}
+			accDescrLines.push(statement);
+			continue;
+		}
+		const detectedType = C4_DIAGRAM_TYPES.find((candidate) => statement.toLowerCase().startsWith(candidate.toLowerCase()));
+		if (detectedType) {
+			type = detectedType;
+			continue;
+		}
+		if (statement === "}") {
+			boundaryStack.pop();
+			continue;
+		}
+		const directionMatch = statement.match(/^direction\s+(TB|BT|LR|RL)$/i);
+		if (directionMatch) {
+			direction = DIRECTIONS.find((candidate) => candidate === directionMatch[1].toUpperCase());
+			continue;
+		}
+		const accTitleMatch = statement.match(/^accTitle\s*:\s*(.*)$/i);
+		if (accTitleMatch) {
+			accTitle = unquote(accTitleMatch[1]);
+			continue;
+		}
+		if (/^accDescr\s*\{$/i.test(statement)) {
+			accDescrLines = [];
+			continue;
+		}
+		const accDescrMatch = statement.match(/^accDescr\s*:\s*(.*)$/i);
+		if (accDescrMatch) {
+			accDescription = unquote(accDescrMatch[1]);
+			continue;
+		}
+		const titleMatch = statement.match(/^title\s+(.*)$/i);
+		if (titleMatch) {
+			title = unquote(titleMatch[1]);
+			continue;
+		}
+		const callMatch = statement.match(/^([A-Za-z_][A-Za-z0-9_]*)\s*\(([\s\S]*)\)\s*(\{)?\s*$/);
+		if (!callMatch) continue;
+		const [, keyword, rawArgs, openBrace] = callMatch;
+		const { positional, named } = partitionArguments(splitArguments(rawArgs));
+		if (keyword === "UpdateLayoutConfig") {
+			var _named$c4ShapeInRow, _named$c4BoundaryInRo;
+			const inRow = (_named$c4ShapeInRow = named.c4ShapeInRow) !== null && _named$c4ShapeInRow !== void 0 ? _named$c4ShapeInRow : slot(positional, 0);
+			const boundaryInRow = (_named$c4BoundaryInRo = named.c4BoundaryInRow) !== null && _named$c4BoundaryInRo !== void 0 ? _named$c4BoundaryInRo : slot(positional, 1);
+			if (inRow) layout.c4ShapeInRow = Number(inRow) || layout.c4ShapeInRow;
+			if (boundaryInRow) layout.c4BoundaryInRow = Number(boundaryInRow) || layout.c4BoundaryInRow;
+			continue;
+		}
+		if (keyword === "UpdateElementStyle" || keyword === "UpdateBoundaryStyle") {
+			var _named$shadowing, _named$bgColor, _named$fontColor, _named$borderColor, _named$shape, _named$sprite, _named$techn, _named$legendText, _named$legendSprite;
+			const target = slot(positional, 0);
+			if (!target) continue;
+			const shadowing = (_named$shadowing = named.shadowing) !== null && _named$shadowing !== void 0 ? _named$shadowing : slot(positional, 4);
+			const style = {
+				bgColor: (_named$bgColor = named.bgColor) !== null && _named$bgColor !== void 0 ? _named$bgColor : slot(positional, 1),
+				fontColor: (_named$fontColor = named.fontColor) !== null && _named$fontColor !== void 0 ? _named$fontColor : slot(positional, 2),
+				borderColor: (_named$borderColor = named.borderColor) !== null && _named$borderColor !== void 0 ? _named$borderColor : slot(positional, 3),
+				shadowing: shadowing === void 0 ? void 0 : shadowing === "true",
+				shape: (_named$shape = named.shape) !== null && _named$shape !== void 0 ? _named$shape : slot(positional, 5),
+				sprite: (_named$sprite = named.sprite) !== null && _named$sprite !== void 0 ? _named$sprite : slot(positional, 6),
+				techn: (_named$techn = named.techn) !== null && _named$techn !== void 0 ? _named$techn : slot(positional, 7),
+				legendText: (_named$legendText = named.legendText) !== null && _named$legendText !== void 0 ? _named$legendText : slot(positional, 8),
+				legendSprite: (_named$legendSprite = named.legendSprite) !== null && _named$legendSprite !== void 0 ? _named$legendSprite : slot(positional, 9)
+			};
+			if (keyword === "UpdateBoundaryStyle") boundaryStyles[target] = style;
+			else elementStyles[target] = style;
+			continue;
+		}
+		if (keyword === "UpdateRelStyle") {
+			var _named$offsetX, _named$offsetY, _named$textColor, _named$lineColor;
+			const from = slot(positional, 0);
+			const to = slot(positional, 1);
+			if (!from || !to) continue;
+			const offsetX = (_named$offsetX = named.offsetX) !== null && _named$offsetX !== void 0 ? _named$offsetX : slot(positional, 4);
+			const offsetY = (_named$offsetY = named.offsetY) !== null && _named$offsetY !== void 0 ? _named$offsetY : slot(positional, 5);
+			const lineWidth = named.lineWidth;
+			relStyles[`${from}->${to}`] = {
+				textColor: (_named$textColor = named.textColor) !== null && _named$textColor !== void 0 ? _named$textColor : slot(positional, 2),
+				lineColor: (_named$lineColor = named.lineColor) !== null && _named$lineColor !== void 0 ? _named$lineColor : slot(positional, 3),
+				offsetX: offsetX === void 0 ? void 0 : Number(offsetX),
+				offsetY: offsetY === void 0 ? void 0 : Number(offsetY),
+				lineWidth: lineWidth === void 0 ? void 0 : Number(lineWidth),
+				lineStyle: named.lineStyle
+			};
+			continue;
+		}
+		if (/^(SHOW_|HIDE_)/.test(keyword)) continue;
+		const boundaryKeyword = BOUNDARY_KEYWORDS[keyword];
+		if (boundaryKeyword) {
+			var _slot, _ref, _ref2, _boundaryKeyword$fixe, _slot2, _named$descr, _named$sprite2, _named$tags;
+			const id = (_slot = slot(positional, 0)) !== null && _slot !== void 0 ? _slot : `boundary-${++anonymousBoundaryCount}`;
+			const isNode = boundaryKeyword.nodeType !== void 0;
+			const defaultType = isNode ? "node" : "system";
+			const boundaryType = (_ref = (_ref2 = (_boundaryKeyword$fixe = boundaryKeyword.fixedType) !== null && _boundaryKeyword$fixe !== void 0 ? _boundaryKeyword$fixe : named.type) !== null && _ref2 !== void 0 ? _ref2 : slot(positional, 2)) !== null && _ref !== void 0 ? _ref : defaultType;
+			const tagsIndex = boundaryKeyword.fixedType ? 2 : isNode ? 5 : 3;
+			const boundary = {
+				id,
+				label: (_slot2 = slot(positional, 1)) !== null && _slot2 !== void 0 ? _slot2 : id,
+				kind: boundaryKeyword.kind,
+				type: boundaryType,
+				description: isNode ? (_named$descr = named.descr) !== null && _named$descr !== void 0 ? _named$descr : slot(positional, 3) : named.descr,
+				nodeType: boundaryKeyword.nodeType,
+				parentId: currentParentId(),
+				childIds: [],
+				sprite: (_named$sprite2 = named.sprite) !== null && _named$sprite2 !== void 0 ? _named$sprite2 : isNode ? slot(positional, 4) : void 0,
+				tags: (_named$tags = named.tags) !== null && _named$tags !== void 0 ? _named$tags : slot(positional, tagsIndex),
+				link: named.link
+			};
+			registerChild(id);
+			const existing = boundaries.findIndex((entry) => entry.id === id);
+			if (existing === -1) boundaries.push(boundary);
+			else boundaries[existing] = _objectSpread2(_objectSpread2({}, boundary), {}, { childIds: boundaries[existing].childIds });
+			if (openBrace) boundaryStack.push(id);
+			continue;
+		}
+		const relDirection = REL_DIRECTIONS[keyword];
+		if (relDirection) {
+			var _slot3, _named$techn2, _named$descr2, _named$sprite3, _named$tags2;
+			const args = keyword === "RelIndex" ? positional.slice(1) : positional;
+			const from = slot(args, 0);
+			const to = slot(args, 1);
+			if (!from || !to) continue;
+			const relationship = {
+				from,
+				to,
+				label: (_slot3 = slot(args, 2)) !== null && _slot3 !== void 0 ? _slot3 : "",
+				technology: (_named$techn2 = named.techn) !== null && _named$techn2 !== void 0 ? _named$techn2 : slot(args, 3),
+				description: (_named$descr2 = named.descr) !== null && _named$descr2 !== void 0 ? _named$descr2 : slot(args, 4),
+				direction: relDirection,
+				index: relationships.length,
+				sprite: (_named$sprite3 = named.sprite) !== null && _named$sprite3 !== void 0 ? _named$sprite3 : slot(args, 5),
+				tags: (_named$tags2 = named.tags) !== null && _named$tags2 !== void 0 ? _named$tags2 : slot(args, 6),
+				link: named.link
+			};
+			const existing = relationships.findIndex((entry) => entry.from === from && entry.to === to);
+			if (existing === -1) relationships.push(relationship);
+			else relationships[existing] = _objectSpread2(_objectSpread2({}, relationship), {}, { index: relationships[existing].index });
+			continue;
+		}
+		const elementKeyword = parseElementKeyword(keyword);
+		if (elementKeyword) {
+			var _slot4, _named$techn3, _named$descr3, _named$sprite4, _named$tags3;
+			const id = slot(positional, 0);
+			if (!id) continue;
+			const hasTechnologySlot = elementKeyword.kind === "container" || elementKeyword.kind === "component";
+			const descrIndex = hasTechnologySlot ? 3 : 2;
+			const link = named.link;
+			const element = {
+				id,
+				label: (_slot4 = slot(positional, 1)) !== null && _slot4 !== void 0 ? _slot4 : id,
+				technology: (_named$techn3 = named.techn) !== null && _named$techn3 !== void 0 ? _named$techn3 : hasTechnologySlot ? slot(positional, 2) : void 0,
+				description: (_named$descr3 = named.descr) !== null && _named$descr3 !== void 0 ? _named$descr3 : slot(positional, descrIndex),
+				kind: elementKeyword.kind,
+				shape: elementKeyword.shape,
+				isExternal: elementKeyword.isExternal,
+				stereotype: buildStereotype(elementKeyword),
+				parentId: currentParentId(),
+				sprite: (_named$sprite4 = named.sprite) !== null && _named$sprite4 !== void 0 ? _named$sprite4 : slot(positional, descrIndex + 1),
+				tags: (_named$tags3 = named.tags) !== null && _named$tags3 !== void 0 ? _named$tags3 : slot(positional, descrIndex + 2),
+				link,
+				subDiagramId: (link === null || link === void 0 ? void 0 : link.startsWith("uig:")) ? link.slice(4) : void 0
+			};
+			registerChild(id);
+			const existing = elements.findIndex((entry) => entry.id === id);
+			if (existing === -1) elements.push(element);
+			else elements[existing] = element;
+			continue;
+		}
+	}
+	return {
+		type,
+		title,
+		accTitle,
+		accDescription,
+		direction,
+		elements,
+		boundaries,
+		relationships,
+		elementStyles,
+		boundaryStyles,
+		relStyles,
+		layout
+	};
 }
 function flattenMetaData(fields, fieldsValues) {
 	const output = {};
@@ -1980,6 +2337,422 @@ function getComponentFieldByLabel(fields, label) {
 		return ((_field$label = field.label) === null || _field$label === void 0 ? void 0 : _field$label.toLowerCase()) === label.toLowerCase();
 	});
 }
+const C4_LAYOUT = {
+	WIDTH: 240,
+	MIN_HEIGHT: 80,
+	SHAPE_MARGIN: 90,
+	ROW_MARGIN: 80,
+	SHAPE_PADDING: 24,
+	BOUNDARY_HEADER: 72,
+	BOUNDARY_PADDING: 48,
+	BOUNDARY_MARGIN: 60,
+	DIAGRAM_MARGIN_X: 60,
+	DIAGRAM_MARGIN_Y: 40
+};
+const C4_COLORS = {
+	person: {
+		fill: "#08427B",
+		stroke: "#052E56"
+	},
+	personExternal: {
+		fill: "#686868",
+		stroke: "#4D4D4D"
+	},
+	system: {
+		fill: "#1168BD",
+		stroke: "#0B4884"
+	},
+	systemExternal: {
+		fill: "#999999",
+		stroke: "#6B6B6B"
+	},
+	container: {
+		fill: "#438DD5",
+		stroke: "#2E6295"
+	},
+	containerExternal: {
+		fill: "#B3B3B3",
+		stroke: "#8A8A8A"
+	},
+	component: {
+		fill: "#85BBF0",
+		stroke: "#5D82A8"
+	},
+	componentExternal: {
+		fill: "#CCCCCC",
+		stroke: "#A6A6A6"
+	},
+	node: {
+		fill: "#1F2937",
+		stroke: "#4B5563"
+	},
+	nodeExternal: {
+		fill: "#374151",
+		stroke: "#6B7280"
+	}
+};
+const BOUNDARY_BORDER = "#828DA3";
+function getC4ElementColors(element) {
+	var _C4_COLORS$key;
+	return (_C4_COLORS$key = C4_COLORS[element.isExternal ? `${element.kind}External` : element.kind]) !== null && _C4_COLORS$key !== void 0 ? _C4_COLORS$key : C4_COLORS.system;
+}
+const NAME_LINE_HEIGHT = 22;
+const SMALL_LINE_HEIGHT = 18;
+const PERSON_GLYPH = 30;
+const CYLINDER_LIPS = 34;
+const QUEUE_CAPS = 68;
+function wrappedLines(text, usableWidth, charWidth) {
+	if (!text) return 0;
+	const charsPerLine = Math.max(6, Math.floor(usableWidth / charWidth));
+	return text.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(line.length / charsPerLine)), 0);
+}
+function measureElement(element) {
+	let usableWidth = C4_LAYOUT.WIDTH - C4_LAYOUT.SHAPE_PADDING * 2;
+	if (element.shape === "queue") usableWidth -= QUEUE_CAPS;
+	let height = C4_LAYOUT.SHAPE_PADDING * 2;
+	height += SMALL_LINE_HEIGHT;
+	if (element.kind === "person") height += PERSON_GLYPH;
+	height += wrappedLines(element.label, usableWidth, 8.6) * NAME_LINE_HEIGHT;
+	if (element.technology) height += SMALL_LINE_HEIGHT;
+	height += wrappedLines(element.description, usableWidth, 5.9) * SMALL_LINE_HEIGHT;
+	if (element.shape === "db") height += CYLINDER_LIPS;
+	return {
+		width: C4_LAYOUT.WIDTH,
+		height: Math.max(C4_LAYOUT.MIN_HEIGHT, height)
+	};
+}
+function layoutContainer(containerId, data, childrenOf, elementById, placements) {
+	var _childrenOf$get;
+	const childIds = (_childrenOf$get = childrenOf.get(containerId)) !== null && _childrenOf$get !== void 0 ? _childrenOf$get : [];
+	const shapeIds = childIds.filter((id) => elementById.has(id));
+	const boundaryIds = childIds.filter((id) => !elementById.has(id));
+	const originX = containerId ? C4_LAYOUT.BOUNDARY_PADDING : C4_LAYOUT.DIAGRAM_MARGIN_X;
+	const originY = containerId ? C4_LAYOUT.BOUNDARY_HEADER : C4_LAYOUT.DIAGRAM_MARGIN_Y;
+	let cursorY = originY;
+	let maxX = originX;
+	let lastMargin = 0;
+	const perRow = Math.max(1, data.layout.c4ShapeInRow);
+	for (let index = 0; index < shapeIds.length; index += perRow) {
+		const row = shapeIds.slice(index, index + perRow);
+		let rowHeight = 0;
+		row.forEach((id, column) => {
+			const size = measureElement(elementById.get(id));
+			const x = originX + column * (C4_LAYOUT.WIDTH + C4_LAYOUT.SHAPE_MARGIN);
+			placements.set(id, {
+				x,
+				y: cursorY,
+				width: size.width,
+				height: size.height
+			});
+			rowHeight = Math.max(rowHeight, size.height);
+			maxX = Math.max(maxX, x + size.width);
+		});
+		cursorY += rowHeight + C4_LAYOUT.ROW_MARGIN;
+		lastMargin = C4_LAYOUT.ROW_MARGIN;
+	}
+	const boundarySizes = /* @__PURE__ */ new Map();
+	for (const id of boundaryIds) boundarySizes.set(id, layoutContainer(id, data, childrenOf, elementById, placements));
+	const boundariesPerRow = Math.max(1, data.layout.c4BoundaryInRow);
+	for (let index = 0; index < boundaryIds.length; index += boundariesPerRow) {
+		const row = boundaryIds.slice(index, index + boundariesPerRow);
+		let rowHeight = 0;
+		let cursorX = originX;
+		for (const id of row) {
+			const size = boundarySizes.get(id);
+			placements.set(id, {
+				x: cursorX,
+				y: cursorY,
+				width: size.width,
+				height: size.height
+			});
+			cursorX += size.width + C4_LAYOUT.BOUNDARY_MARGIN;
+			rowHeight = Math.max(rowHeight, size.height);
+			maxX = Math.max(maxX, cursorX - C4_LAYOUT.BOUNDARY_MARGIN);
+		}
+		cursorY += rowHeight + C4_LAYOUT.BOUNDARY_MARGIN;
+		lastMargin = C4_LAYOUT.BOUNDARY_MARGIN;
+	}
+	const hasChildren = shapeIds.length > 0 || boundaryIds.length > 0;
+	const trailing = containerId ? C4_LAYOUT.BOUNDARY_PADDING : C4_LAYOUT.DIAGRAM_MARGIN_Y;
+	if (!hasChildren) return {
+		width: C4_LAYOUT.WIDTH + originX + trailing,
+		height: C4_LAYOUT.MIN_HEIGHT + originY + trailing
+	};
+	return {
+		width: maxX + originX,
+		height: cursorY - lastMargin + trailing
+	};
+}
+function resolveSide(direction, from, to) {
+	if (direction === "up") return {
+		source: "top",
+		target: "bottom"
+	};
+	if (direction === "down") return {
+		source: "bottom",
+		target: "top"
+	};
+	if (direction === "left") return {
+		source: "left",
+		target: "right"
+	};
+	if (direction === "right") return {
+		source: "right",
+		target: "left"
+	};
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	if (Math.abs(dx) > Math.abs(dy)) {
+		if (dx >= 0) return {
+			source: "right",
+			target: "left"
+		};
+		return {
+			source: "left",
+			target: "right"
+		};
+	}
+	if (dy >= 0) return {
+		source: "bottom",
+		target: "top"
+	};
+	return {
+		source: "top",
+		target: "bottom"
+	};
+}
+function applyElementStyle(base, style) {
+	var _style$bgColor, _style$borderColor;
+	return {
+		fill: (_style$bgColor = style === null || style === void 0 ? void 0 : style.bgColor) !== null && _style$bgColor !== void 0 ? _style$bgColor : base.fill,
+		stroke: (_style$borderColor = style === null || style === void 0 ? void 0 : style.borderColor) !== null && _style$borderColor !== void 0 ? _style$borderColor : base.stroke,
+		fontColor: style === null || style === void 0 ? void 0 : style.fontColor
+	};
+}
+function convertC4ToReactFlow(data) {
+	const elementById = new Map(data.elements.map((el) => [el.id, el]));
+	const boundaryById = new Map(data.boundaries.map((b) => [b.id, b]));
+	const childrenOf = /* @__PURE__ */ new Map();
+	function attach(id, parentId) {
+		var _childrenOf$get2;
+		const siblings = (_childrenOf$get2 = childrenOf.get(parentId)) !== null && _childrenOf$get2 !== void 0 ? _childrenOf$get2 : [];
+		siblings.push(id);
+		childrenOf.set(parentId, siblings);
+	}
+	for (const boundary of data.boundaries) attach(boundary.id, boundary.parentId);
+	for (const element of data.elements) attach(element.id, element.parentId);
+	const placements = /* @__PURE__ */ new Map();
+	layoutContainer(void 0, data, childrenOf, elementById, placements);
+	const nodes = [];
+	for (const boundary of data.boundaries) {
+		var _data$boundaryStyles$, _style$bgColor2, _style$borderColor2;
+		const placement = placements.get(boundary.id);
+		if (!placement) continue;
+		const style = (_data$boundaryStyles$ = data.boundaryStyles[boundary.id]) !== null && _data$boundaryStyles$ !== void 0 ? _data$boundaryStyles$ : data.elementStyles[boundary.id];
+		nodes.push({
+			id: boundary.id,
+			type: "c4Boundary",
+			position: {
+				x: placement.x,
+				y: placement.y
+			},
+			data: {
+				source: "mermaid",
+				c4BoundaryKind: boundary.kind,
+				boundaryType: boundary.type,
+				description: boundary.description,
+				c4NodeType: boundary.nodeType,
+				link: boundary.link,
+				backgroundColor: (_style$bgColor2 = style === null || style === void 0 ? void 0 : style.bgColor) !== null && _style$bgColor2 !== void 0 ? _style$bgColor2 : "transparent",
+				borderColor: (_style$borderColor2 = style === null || style === void 0 ? void 0 : style.borderColor) !== null && _style$borderColor2 !== void 0 ? _style$borderColor2 : BOUNDARY_BORDER,
+				fontColor: style === null || style === void 0 ? void 0 : style.fontColor,
+				componentFields: [generateComponentFieldNameInput(boundary.label)]
+			},
+			style: {
+				width: placement.width,
+				height: placement.height
+			},
+			width: placement.width,
+			height: placement.height,
+			parentId: boundary.parentId,
+			extent: boundary.parentId ? "parent" : void 0,
+			selectable: true,
+			draggable: true
+		});
+	}
+	for (const element of data.elements) {
+		const placement = placements.get(element.id);
+		if (!placement) continue;
+		const colors = applyElementStyle(getC4ElementColors(element), data.elementStyles[element.id]);
+		nodes.push({
+			id: element.id,
+			type: element.subDiagramId ? "subDiagram" : "c4",
+			position: {
+				x: placement.x,
+				y: placement.y
+			},
+			width: placement.width,
+			height: placement.height,
+			data: {
+				source: "mermaid",
+				diagramId: element.subDiagramId,
+				diagramName: element.label,
+				c4Kind: element.kind,
+				c4Shape: element.shape,
+				isExternal: element.isExternal,
+				technology: element.technology,
+				description: element.description,
+				link: element.link,
+				fill: colors.fill,
+				stroke: colors.stroke,
+				fontColor: colors.fontColor,
+				componentFields: [generateComponentFieldNameInput(element.label)]
+			},
+			style: {
+				width: placement.width,
+				height: placement.height
+			},
+			parentId: element.parentId,
+			extent: element.parentId ? "parent" : void 0
+		});
+	}
+	const parentOf = /* @__PURE__ */ new Map();
+	for (const boundary of data.boundaries) parentOf.set(boundary.id, boundary.parentId);
+	for (const element of data.elements) parentOf.set(element.id, element.parentId);
+	function absoluteCenter(id) {
+		const placement = placements.get(id);
+		let x = placement.x + placement.width / 2;
+		let y = placement.y + placement.height / 2;
+		let parentId = parentOf.get(id);
+		while (parentId) {
+			const parent = placements.get(parentId);
+			x += parent.x;
+			y += parent.y;
+			parentId = parentOf.get(parentId);
+		}
+		return {
+			x,
+			y
+		};
+	}
+	return {
+		nodes,
+		edges: data.relationships.filter((rel) => (elementById.has(rel.from) || boundaryById.has(rel.from)) && (elementById.has(rel.to) || boundaryById.has(rel.to))).map((rel) => {
+			var _style$lineColor, _style$lineWidth;
+			const isBack = rel.direction === "back";
+			const source = isBack ? rel.to : rel.from;
+			const target = isBack ? rel.from : rel.to;
+			const style = data.relStyles[`${rel.from}->${rel.to}`];
+			const lineColor = (_style$lineColor = style === null || style === void 0 ? void 0 : style.lineColor) !== null && _style$lineColor !== void 0 ? _style$lineColor : BOUNDARY_BORDER;
+			const label = [rel.label, rel.technology ? `[${rel.technology}]` : ""].filter(Boolean).join(" ");
+			const side = resolveSide(rel.direction, absoluteCenter(source), absoluteCenter(target));
+			return {
+				id: `c4-rel-${rel.from}-${rel.to}-${rel.index}`,
+				source,
+				target,
+				sourceHandle: `source-${side.source}`,
+				targetHandle: `target-${side.target}`,
+				label,
+				type: "simplebezier",
+				style: {
+					stroke: lineColor,
+					strokeWidth: (_style$lineWidth = style === null || style === void 0 ? void 0 : style.lineWidth) !== null && _style$lineWidth !== void 0 ? _style$lineWidth : 1.5
+				},
+				data: {
+					source: "mermaid",
+					labelColor: style === null || style === void 0 ? void 0 : style.textColor,
+					labelOffsetX: style === null || style === void 0 ? void 0 : style.offsetX,
+					labelOffsetY: style === null || style === void 0 ? void 0 : style.offsetY
+				},
+				markerEnd: {
+					type: MarkerType.ArrowClosed,
+					width: 14,
+					height: 14,
+					color: lineColor
+				},
+				markerStart: rel.direction === "bi" ? {
+					type: MarkerType.ArrowClosed,
+					width: 14,
+					height: 14,
+					color: lineColor
+				} : void 0
+			};
+		})
+	};
+}
+function convertC4MermaidToReactFlow(code) {
+	return convertC4ToReactFlow(parseC4Diagram(code));
+}
+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
+};
+({
+	NETWORK_SIMPLEX: "network-simplex",
+	TIGHT_TREE: "tight-tree",
+	LONGEST_PATH: "longest-path"
+}).TIGHT_TREE;
+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) => {
+		if (/^[\"']/.test(label)) return m;
+		if (/[()\"\[\],:;]/.test(label)) return `${id}[\"${String(label).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"]`;
+		return m;
+	}).replace(/^([ \t]*subgraph\s+)([^\n\r]+)(\|[^\n\r]*)?$/gim, (m, pre, title, rest) => {
+		const t = String(title).trim();
+		if (/^[\"']/.test(t)) return m;
+		if (/[()\"\[\],:;]/.test(t)) return `${pre}\"${t.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"${rest || ""}`;
+		return m;
+	});
+	const diagRegex = /\b(graph|flowchart|sequenceDiagram|stateDiagram|classDiagram|gantt|journey|erDiagram|gitGraph|pie|timeline|infoDiagram)\b/i;
+	const allStarts = [];
+	let mm;
+	const globalRegex = new RegExp(diagRegex.source, "gim");
+	while ((mm = globalRegex.exec(subgraphFixed)) !== null) {
+		allStarts.push(mm.index);
+		if (globalRegex.lastIndex === mm.index) globalRegex.lastIndex++;
+	}
+	if (allStarts.length <= 1) return subgraphFixed;
+	const first = allStarts[0];
+	const second = allStarts[1];
+	return subgraphFixed.slice(first, second).trim();
+}
 const LABEL_TYPE_PREFIX = /^\s*type:(\w+)\s*[:|-]\s*/i;
 const TAG_TO_NODE_TYPE = {
 	builder: "builder",
@@ -2193,6 +2966,14 @@ const ARROW_TOKENS = [
 		arrowType: "none"
 	}
 ];
+function findArrowTokenFor(options) {
+	const exact = ARROW_TOKENS.find((candidate) => candidate.lineStyle === options.lineStyle && candidate.arrowType === options.arrowType && candidate.half === options.half && Boolean(candidate.reversed) === Boolean(options.reversed));
+	if (exact) return exact.token;
+	const byHead = ARROW_TOKENS.find((candidate) => candidate.lineStyle === options.lineStyle && candidate.arrowType === options.arrowType);
+	if (byHead) return byHead.token;
+	if (options.lineStyle === "dashed") return "-->>";
+	return "->>";
+}
 const BLOCK_OPENERS = [
 	"loop",
 	"alt",
@@ -2982,12 +3763,7 @@ function convertSequenceDiagramToReactFlow(mermaidCode) {
 				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: ComponentInputType.ColorPicker
-			})] })
+			}, participant.createdAtRow === void 0 ? {} : { lifelineStartRow: grid.toLayoutRow(participant.createdAtRow) }), participant.destroyedAtRow === void 0 ? {} : { lifelineEndRow: grid.toLastLayoutRow(participant.destroyedAtRow) }), {}, { componentFields: [generateComponentFieldNameInput(participant.name)] })
 		});
 	}
 	for (const note of data.notes) {
@@ -3119,6 +3895,7 @@ function detectDiagramType(code) {
 	for (const line of lines) {
 		const trimmed = line.trim().toLowerCase();
 		if (trimmed.startsWith("sequencediagram")) return "sequence";
+		if (trimmed.startsWith("c4")) return "c4";
 		if (trimmed.startsWith("flowchart") || trimmed.startsWith("graph")) return "flowchart";
 	}
 	return "flowchart";
@@ -4346,7 +5123,6 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 		edges: edges.map((edge, index) => {
 			const edgeStyle = { strokeWidth: 2.5 };
 			const edgeType = "default";
-			const animated = true;
 			switch (edge.type) {
 				case "-->":
 				case "->": break;
@@ -4369,7 +5145,6 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 				target: targetId,
 				label: edge.label,
 				type: edgeType,
-				animated,
 				style: edgeStyle,
 				labelStyle: {
 					fontSize: "12px",
@@ -4428,7 +5203,9 @@ function convertMermaidToReactFlow(_x3) {
 function _convertMermaidToReactFlow() {
 	_convertMermaidToReactFlow = _asyncToGenerator(function* (mermaidCode) {
 		try {
-			if (detectDiagramType(mermaidCode) === "sequence") return convertSequenceDiagramToReactFlow(mermaidCode);
+			const diagramType = detectDiagramType(mermaidCode);
+			if (diagramType === "sequence") return convertSequenceDiagramToReactFlow(mermaidCode);
+			if (diagramType === "c4") return convertC4MermaidToReactFlow(mermaidCode);
 			return convertFlowchartToReactFlow(mermaidCode);
 		} catch (error) {
 			console.error("Error converting Mermaid to React Flow:", error);
@@ -4440,6 +5217,295 @@ function _convertMermaidToReactFlow() {
 	});
 	return _convertMermaidToReactFlow.apply(this, arguments);
 }
+function isSequenceDiagram(nodes) {
+	return nodes.some((node) => node.type === "sequenceParticipant");
+}
+function fieldValue(node, componentFieldId) {
+	var _node$data, _field$data;
+	const fields = (_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.componentFields;
+	if (!Array.isArray(fields)) return void 0;
+	const field = fields.find((candidate) => (candidate === null || candidate === void 0 ? void 0 : candidate.componentFieldId) === componentFieldId);
+	const value = field === null || field === void 0 || (_field$data = field.data) === null || _field$data === void 0 || (_field$data = _field$data[0]) === null || _field$data === void 0 ? void 0 : _field$data.value;
+	if (typeof value !== "string") return void 0;
+	if (!value.trim()) return void 0;
+	return value;
+}
+function nodeLabel(node) {
+	var _node$data2;
+	const fromField = fieldValue(node, "name");
+	if (fromField !== void 0) return fromField;
+	const label = (_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.label;
+	if (typeof label === "string") return label;
+	return "";
+}
+function encodeLabel(text) {
+	return text.replace(/#/g, "&#35;").replace(/\r\n?/g, "\n").replace(/\n/g, "<br/>").trim();
+}
+function toMermaidId(name, index, used) {
+	const base = name.replace(/[^A-Za-z0-9_]/g, "") || `P${index}`;
+	let candidate = base;
+	let suffix = 2;
+	while (used.has(candidate)) {
+		candidate = `${base}_${suffix}`;
+		suffix++;
+	}
+	used.add(candidate);
+	return candidate;
+}
+function collectParticipants(nodes) {
+	const used = /* @__PURE__ */ new Set();
+	return nodes.filter((node) => node.type === "sequenceParticipant").sort((a, b) => a.position.x - b.position.x).map((node, index) => {
+		var _node$data3, _node$data4, _node$data5, _node$data6, _node$data7;
+		const name = nodeLabel(node) || `Participant ${index + 1}`;
+		const rawType = (_node$data3 = node.data) === null || _node$data3 === void 0 ? void 0 : _node$data3.participantType;
+		const activations = (_node$data4 = node.data) === null || _node$data4 === void 0 ? void 0 : _node$data4.activations;
+		const links = (_node$data5 = node.data) === null || _node$data5 === void 0 ? void 0 : _node$data5.links;
+		const createdRow = (_node$data6 = node.data) === null || _node$data6 === void 0 ? void 0 : _node$data6.lifelineStartRow;
+		const destroyedRow = (_node$data7 = node.data) === null || _node$data7 === void 0 ? void 0 : _node$data7.lifelineEndRow;
+		return _objectSpread2(_objectSpread2(_objectSpread2({
+			nodeId: node.id,
+			mermaidId: toMermaidId(name, index, used),
+			name,
+			type: typeof rawType === "string" ? rawType : "participant",
+			links: Array.isArray(links) ? links : [],
+			activations: Array.isArray(activations) ? activations : []
+		}, typeof createdRow === "number" ? { createdRow } : {}), typeof destroyedRow === "number" ? { destroyedRow } : {}), {}, { x: node.position.x });
+	});
+}
+function buildMessageLinks(edges, participantNodeIds) {
+	const links = /* @__PURE__ */ new Map();
+	for (const edge of edges) {
+		if (participantNodeIds.has(edge.source)) links.set(edge.target, _objectSpread2(_objectSpread2({}, links.get(edge.target)), {}, { from: edge.source }));
+		if (participantNodeIds.has(edge.target)) links.set(edge.source, _objectSpread2(_objectSpread2({}, links.get(edge.source)), {}, { to: edge.target }));
+	}
+	return links;
+}
+function arrowTokenOf(edgeFrom, edgeTo) {
+	var _edgeTo$data$arrowTyp, _edgeTo$data, _edgeFrom$data, _edgeTo$data$half, _edgeTo$data2, _edgeFrom$data2, _edgeFrom$data3, _ref, _ref2;
+	const arrowType = (_edgeTo$data$arrowTyp = edgeTo === null || edgeTo === void 0 || (_edgeTo$data = edgeTo.data) === null || _edgeTo$data === void 0 ? void 0 : _edgeTo$data.arrowType) !== null && _edgeTo$data$arrowTyp !== void 0 ? _edgeTo$data$arrowTyp : edgeFrom === null || edgeFrom === void 0 || (_edgeFrom$data = edgeFrom.data) === null || _edgeFrom$data === void 0 ? void 0 : _edgeFrom$data.arrowType;
+	const half = (_edgeTo$data$half = edgeTo === null || edgeTo === void 0 || (_edgeTo$data2 = edgeTo.data) === null || _edgeTo$data2 === void 0 ? void 0 : _edgeTo$data2.half) !== null && _edgeTo$data$half !== void 0 ? _edgeTo$data$half : edgeFrom === null || edgeFrom === void 0 || (_edgeFrom$data2 = edgeFrom.data) === null || _edgeFrom$data2 === void 0 ? void 0 : _edgeFrom$data2.half;
+	const reversed = (edgeFrom === null || edgeFrom === void 0 || (_edgeFrom$data3 = edgeFrom.data) === null || _edgeFrom$data3 === void 0 ? void 0 : _edgeFrom$data3.reversed) === true;
+	return findArrowTokenFor(_objectSpread2(_objectSpread2({
+		lineStyle: (edgeTo === null || edgeTo === void 0 || (_ref = edgeTo.style) === null || _ref === void 0 ? void 0 : _ref.strokeDasharray) !== void 0 || (edgeFrom === null || edgeFrom === void 0 || (_ref2 = edgeFrom.style) === null || _ref2 === void 0 ? void 0 : _ref2.strokeDasharray) !== void 0 ? "dashed" : "solid",
+		arrowType: arrowType !== null && arrowType !== void 0 ? arrowType : "filled"
+	}, half ? { half } : {}), {}, { reversed }));
+}
+function noteParticipantNodeIds(note, participants, noteNode$1) {
+	const byImportedId = (Array.isArray(note.participants) ? note.participants.filter((value) => typeof value === "string") : []).map((id) => participants.find((participant) => participant.nodeId === `participant-${id}`)).filter((participant) => Boolean(participant));
+	if (byImportedId.length > 0) return byImportedId.map((participant) => participant.nodeId);
+	if (participants.length === 0) return [];
+	const noteCenter = noteNode$1.position.x + (Number(noteNode$1.width) || 0) / 2;
+	return [[...participants].sort((a, b) => Math.abs(a.x - noteCenter) - Math.abs(b.x - noteCenter))[0].nodeId];
+}
+function collectRowItems(nodes, edges, participants) {
+	const participantNodeIds = new Set(participants.map((p) => p.nodeId));
+	const links = buildMessageLinks(edges, participantNodeIds);
+	const items = [];
+	for (const node of nodes) {
+		var _node$data8, _node$data9, _edgeFrom$data4, _edgeTo$data3;
+		if (participantNodeIds.has(node.id)) continue;
+		const note = (_node$data8 = node.data) === null || _node$data8 === void 0 ? void 0 : _node$data8.sequenceNote;
+		if (note) {
+			var _note$placement;
+			items.push({
+				item: {
+					kind: "note",
+					nodeId: node.id,
+					text: nodeLabel(node),
+					placement: (_note$placement = note.placement) !== null && _note$placement !== void 0 ? _note$placement : "over",
+					participantNodeIds: noteParticipantNodeIds(note, participants, node)
+				},
+				y: node.position.y
+			});
+			continue;
+		}
+		const link = links.get(node.id);
+		if (!(link === null || link === void 0 ? void 0 : link.from) || !link.to) continue;
+		const edgeFrom = edges.find((edge) => edge.target === node.id && edge.source === link.from);
+		const edgeTo = edges.find((edge) => edge.source === node.id && edge.target === link.to);
+		const sequenceNumber = (_node$data9 = node.data) === null || _node$data9 === void 0 ? void 0 : _node$data9.sequenceNumber;
+		items.push({
+			item: _objectSpread2({
+				kind: "message",
+				nodeId: node.id,
+				fromNodeId: link.from,
+				toNodeId: link.to,
+				label: nodeLabel(node),
+				token: arrowTokenOf(edgeFrom, edgeTo),
+				centralSource: (edgeFrom === null || edgeFrom === void 0 || (_edgeFrom$data4 = edgeFrom.data) === null || _edgeFrom$data4 === void 0 ? void 0 : _edgeFrom$data4.centralSource) === true,
+				centralTarget: (edgeTo === null || edgeTo === void 0 || (_edgeTo$data3 = edgeTo.data) === null || _edgeTo$data3 === void 0 ? void 0 : _edgeTo$data3.centralTarget) === true
+			}, typeof sequenceNumber === "number" ? { sequenceNumber } : {}),
+			y: node.position.y
+		});
+	}
+	return items.sort((a, b) => a.y - b.y).map((entry) => entry.item);
+}
+function collectBlocks(nodes) {
+	const blocks = [];
+	for (const node of nodes) {
+		var _node$data10, _block$type, _block$label, _block$depth, _block$sections;
+		const block = (_node$data10 = node.data) === null || _node$data10 === void 0 ? void 0 : _node$data10.sequenceBlock;
+		if (!block) continue;
+		if (typeof block.startRow !== "number") continue;
+		if (typeof block.endRow !== "number") continue;
+		blocks.push(_objectSpread2(_objectSpread2({
+			type: (_block$type = block.type) !== null && _block$type !== void 0 ? _block$type : "rect",
+			label: (_block$label = block.label) !== null && _block$label !== void 0 ? _block$label : ""
+		}, block.color ? { color: block.color } : {}), {}, {
+			depth: (_block$depth = block.depth) !== null && _block$depth !== void 0 ? _block$depth : 0,
+			startRow: block.startRow,
+			endRow: block.endRow,
+			sections: ((_block$sections = block.sections) !== null && _block$sections !== void 0 ? _block$sections : []).filter((section) => typeof section.startRow === "number" && typeof section.endRow === "number").map((section) => {
+				var _section$label;
+				return {
+					label: (_section$label = section.label) !== null && _section$label !== void 0 ? _section$label : "",
+					startRow: section.startRow,
+					endRow: section.endRow
+				};
+			})
+		}));
+	}
+	return blocks;
+}
+function collectBoxes(nodes, participants) {
+	const boxes = [];
+	for (const node of nodes) {
+		var _node$data11, _node$data12, _box$label;
+		const box = (_node$data11 = node.data) === null || _node$data11 === void 0 ? void 0 : _node$data11.sequenceBox;
+		if (!box) continue;
+		const byImportedId = (Array.isArray(box.participants) ? box.participants.filter((value) => typeof value === "string") : []).map((id) => participants.find((participant) => participant.nodeId === `participant-${id}`)).filter((participant) => Boolean(participant));
+		const left = node.position.x;
+		const right = node.position.x + (Number(node.width) || 0);
+		const contained = byImportedId.length > 0 ? byImportedId : participants.filter((participant) => participant.x >= left && participant.x <= right);
+		if (contained.length === 0) continue;
+		const backgroundColor = (_node$data12 = node.data) === null || _node$data12 === void 0 ? void 0 : _node$data12.backgroundColor;
+		boxes.push(_objectSpread2(_objectSpread2({ label: (_box$label = box.label) !== null && _box$label !== void 0 ? _box$label : "" }, typeof backgroundColor === "string" ? { color: backgroundColor } : {}), {}, { participantNodeIds: contained.map((participant) => participant.nodeId) }));
+	}
+	return boxes;
+}
+function participantDeclaration(participant, keyword) {
+	const stereotype = participant.type === "participant" || participant.type === "actor" ? "" : `@{ "type": "${participant.type}" }`;
+	const alias = participant.mermaidId === participant.name ? "" : ` as ${encodeLabel(participant.name)}`;
+	return `${keyword} ${participant.mermaidId}${stereotype}${alias}`;
+}
+function convertReactFlowToSequenceMermaid(nodes, edges) {
+	const participants = collectParticipants(nodes);
+	const items = collectRowItems(nodes, edges, participants);
+	const blocks = collectBlocks(nodes);
+	const boxes = collectBoxes(nodes, participants);
+	const participantByNodeId = new Map(participants.map((participant) => [participant.nodeId, participant]));
+	const rowByItemId = /* @__PURE__ */ new Map();
+	const lastRowByItemId = /* @__PURE__ */ new Map();
+	let row = 0;
+	for (const item of items) {
+		rowByItemId.set(item.nodeId, row);
+		const isSelf = item.kind === "message" && item.fromNodeId === item.toNodeId;
+		lastRowByItemId.set(item.nodeId, isSelf ? row + 1 : row);
+		row += isSelf ? 2 : 1;
+	}
+	const rowCount = row;
+	const lines = ["sequenceDiagram"];
+	const titleNode = nodes.find((node) => node.id === "sequence-title");
+	if (titleNode) {
+		var _fieldValue;
+		const text = (_fieldValue = fieldValue(titleNode, "text")) !== null && _fieldValue !== void 0 ? _fieldValue : nodeLabel(titleNode);
+		if (text) lines.push(`  title ${encodeLabel(text)}`);
+	}
+	const boxByFirstParticipant = /* @__PURE__ */ new Map();
+	const boxEndByParticipant = /* @__PURE__ */ new Map();
+	for (const box of boxes) {
+		var _boxEndByParticipant$;
+		const ordered = participants.filter((participant) => box.participantNodeIds.includes(participant.nodeId));
+		if (ordered.length === 0) continue;
+		boxByFirstParticipant.set(ordered[0].nodeId, box);
+		boxEndByParticipant.set(ordered[ordered.length - 1].nodeId, ((_boxEndByParticipant$ = boxEndByParticipant.get(ordered[ordered.length - 1].nodeId)) !== null && _boxEndByParticipant$ !== void 0 ? _boxEndByParticipant$ : 0) + 1);
+	}
+	for (const participant of participants) {
+		var _boxEndByParticipant$2;
+		const box = boxByFirstParticipant.get(participant.nodeId);
+		if (box) {
+			const color = box.color ? `${box.color} ` : "";
+			lines.push(`  box ${color}${encodeLabel(box.label)}`.trimEnd());
+		}
+		if (participant.createdRow === void 0) {
+			const keyword = participant.type === "actor" ? "actor" : "participant";
+			lines.push(`  ${participantDeclaration(participant, keyword)}`);
+		}
+		const boxEnds = (_boxEndByParticipant$2 = boxEndByParticipant.get(participant.nodeId)) !== null && _boxEndByParticipant$2 !== void 0 ? _boxEndByParticipant$2 : 0;
+		for (let index = 0; index < boxEnds; index++) lines.push("  end");
+	}
+	for (const participant of participants) for (const link of participant.links) lines.push(`  link ${participant.mermaidId}: ${link.label} @ ${link.url}`);
+	const numbered = items.filter((item) => item.kind === "message" && item.sequenceNumber !== void 0);
+	if (numbered.length > 0) {
+		const start = numbered[0].sequenceNumber;
+		const step = numbered.length > 1 ? numbered[1].sequenceNumber - numbered[0].sequenceNumber : 1;
+		lines.push(`  autonumber ${start} ${step}`);
+	}
+	const openBlocks = [];
+	function indent() {
+		return "  ".repeat(openBlocks.length + 1);
+	}
+	for (let currentRow = 0; currentRow < rowCount; currentRow++) {
+		const opening = blocks.filter((block) => block.startRow === currentRow).sort((a, b) => a.depth - b.depth);
+		for (const block of opening) {
+			const label = encodeLabel(block.label);
+			const color = block.type === "rect" && block.color ? `${block.color} ` : "";
+			lines.push(`${indent()}${block.type} ${color}${label}`.trimEnd());
+			openBlocks.push(block);
+		}
+		for (const [depth, block] of openBlocks.entries()) for (const section of block.sections.slice(1)) {
+			if (section.startRow !== currentRow) continue;
+			const keyword = block.type === "par" ? "and" : block.type === "critical" ? "option" : "else";
+			lines.push(`${"  ".repeat(depth + 1)}${keyword} ${encodeLabel(section.label)}`.trimEnd());
+		}
+		const item = items.find((entry) => rowByItemId.get(entry.nodeId) === currentRow);
+		if (item) {
+			for (const participant of participants) {
+				if (participant.createdRow !== currentRow) continue;
+				const keyword = participant.type === "actor" ? "actor" : "participant";
+				lines.push(`${indent()}create ${participantDeclaration(participant, keyword)}`);
+			}
+			for (const participant of participants) {
+				if (participant.destroyedRow !== currentRow) continue;
+				lines.push(`${indent()}destroy ${participant.mermaidId}`);
+			}
+			for (const participant of participants) for (const activation of participant.activations) {
+				if (activation.startRow !== currentRow) continue;
+				lines.push(`${indent()}activate ${participant.mermaidId}`);
+			}
+			if (item.kind === "message") {
+				const from = participantByNodeId.get(item.fromNodeId);
+				const to = participantByNodeId.get(item.toNodeId);
+				if (from && to) {
+					const source = item.centralSource ? `${from.mermaidId}()` : from.mermaidId;
+					const target = item.centralTarget ? `()${to.mermaidId}` : to.mermaidId;
+					lines.push(`${indent()}${source}${item.token}${target}: ${encodeLabel(item.label)}`);
+				}
+			}
+			if (item.kind === "note") {
+				const names = item.participantNodeIds.map((nodeId) => {
+					var _participantByNodeId$;
+					return (_participantByNodeId$ = participantByNodeId.get(nodeId)) === null || _participantByNodeId$ === void 0 ? void 0 : _participantByNodeId$.mermaidId;
+				}).filter((id) => id !== void 0);
+				if (names.length > 0) lines.push(`${indent()}Note ${item.placement} ${names.join(",")}: ${encodeLabel(item.text)}`);
+			}
+		}
+		const rowEnd = item ? lastRowByItemId.get(item.nodeId) : currentRow;
+		for (const participant of participants) for (const activation of participant.activations) {
+			if (activation.endRow !== rowEnd) continue;
+			lines.push(`${indent()}deactivate ${participant.mermaidId}`);
+		}
+		while (openBlocks.length > 0 && openBlocks[openBlocks.length - 1].endRow <= rowEnd) {
+			openBlocks.pop();
+			lines.push(`${indent()}end`);
+		}
+	}
+	while (openBlocks.length > 0) {
+		openBlocks.pop();
+		lines.push(`${indent()}end`);
+	}
+	return lines.join("\n");
+}
 const BOUND_PADDING = 20;
 function createGroupNode(options) {
 	var _options$id, _options$name;
@@ -4762,6 +5828,7 @@ function _convertMermaidToReactFlowWithContext() {
 				if ((_ctx$style = ctx.style) === null || _ctx$style === void 0 ? void 0 : _ctx$style.height) clonedNode.height = ctx.style.height;
 				if ((_ctx$style2 = ctx.style) === null || _ctx$style2 === void 0 ? void 0 : _ctx$style2.width) clonedNode.width = ctx.style.width;
 				clonedNode.data = _objectSpread2(_objectSpread2(_objectSpread2({}, clonedNode.data), objectPick((_ctx$style3 = ctx.style) !== null && _ctx$style3 !== void 0 ? _ctx$style3 : {}, [
+					"color",
 					"fill",
 					"stroke",
 					"strokeWidth",
@@ -4818,6 +5885,10 @@ function _convertMermaidToReactFlowWithContext() {
 			if (nodeParent) return _objectSpread2(_objectSpread2({}, node), {}, { parentId: nodeParent.id });
 			return node;
 		})];
+		if (isSequenceDiagram(combinedNodes)) return {
+			edges: resolvedEdges,
+			nodes: combinedNodes
+		};
 		return {
 			edges: resolvedEdges,
 			nodes: (options === null || options === void 0 ? void 0 : options.repositionNodes) ? resizeNodesLayouts(combinedNodes) : combinedNodes
@@ -5431,20 +6502,16 @@ function resolveMermaidDetailedNodeLabel(node) {
 		]);
 	}
 	if (nodeType === "sequenceParticipant") {
-		var _getFieldString4, _getFieldString5;
+		var _getFieldString4;
 		const label = (_getFieldString4 = getFieldString(componentFields, "Label")) !== null && _getFieldString4 !== void 0 ? _getFieldString4 : pickString(nodeData === null || nodeData === void 0 ? void 0 : nodeData.label);
 		const participantName = name !== null && name !== void 0 ? name : label;
 		const rowCount = typeof (nodeData === null || nodeData === void 0 ? void 0 : nodeData.rowCount) === "number" ? nodeData.rowCount : void 0;
-		const color = (_getFieldString5 = getFieldString(componentFields, "Color")) !== null && _getFieldString5 !== void 0 ? _getFieldString5 : pickString(nodeData === null || nodeData === void 0 ? void 0 : nodeData.color);
+		const color = pickString(nodeData === null || nodeData === void 0 ? void 0 : nodeData.color);
 		return buildDetailedLabel([
 			participantName ? `SequenceParticipant: ${participantName}` : "SequenceParticipant",
 			...typeof rowCount === "number" ? [`rows: ${rowCount}`] : [],
 			...color ? [`color: ${color}`] : [],
-			...buildFieldLines(componentFields, new Set([
-				"name",
-				"label",
-				"color"
-			]))
+			...buildFieldLines(componentFields, new Set(["name", "label"]))
 		]);
 	}
 	if (nodeType === "comment") return buildDetailedLabel([`Comment: ${(typeof (nodeData === null || nodeData === void 0 ? void 0 : nodeData.isResolved) === "boolean" ? nodeData.isResolved : void 0) ? "Resolved" : "Open"}`, ...buildFieldLines(componentFields, new Set(["name"]))]);
@@ -5524,4 +6591,4 @@ function convertUiGraphToMermaid(input, options) {
 		context
 	};
 }
-export { AstToSqlGenerator, AstToUiConverter, BasicDetailsSchema, ComponentInputType, DialectIdSchema, DocumentCollectionSchema, DocumentIndexSchema, DynamoAttributeSchema, DynamoEditorSchema, DynamoGsiSchema, EditorSupportedDialectSchema, JsonEditorSchema, MongoCollectionSchema, MongoEditorSchema, MongoIndexFieldSchema, MongoIndexSchema, MongoNestedFieldSchema, NestedFieldSchema, NoSqlFieldSchema, SEQUENCE_LAYOUT, SEQUENCE_PARTICIPANT_COLOR, SqlToAstParser, buildMetaData, contextSchema, convertDynamoSchemaToAst, convertJsonSchemaToAst, convertMermaidToReactFlow, convertMermaidToReactFlowWithContext, convertMongoSchemaToAst, convertNoSQLToAst, convertUiGraphToMermaid, estimateSequenceMessageBoxSize, flattenMetaData, generateTableNodeId, generateUUID, sanitizeMermaidLabels, syncBaseData };
+export { AstToSqlGenerator, AstToUiConverter, BasicDetailsSchema, C4_COLORS, C4_LAYOUT, ComponentInputType, DialectIdSchema, DocumentCollectionSchema, DocumentIndexSchema, DynamoAttributeSchema, DynamoEditorSchema, DynamoGsiSchema, EditorSupportedDialectSchema, JsonEditorSchema, MongoCollectionSchema, MongoEditorSchema, MongoIndexFieldSchema, MongoIndexSchema, MongoNestedFieldSchema, NestedFieldSchema, NoSqlFieldSchema, SEQUENCE_LAYOUT, SqlToAstParser, buildMetaData, contextSchema, convertC4MermaidToReactFlow, convertC4ToReactFlow, convertDynamoSchemaToAst, convertJsonSchemaToAst, convertMermaidToReactFlow, convertMermaidToReactFlowWithContext, convertMongoSchemaToAst, convertNoSQLToAst, convertReactFlowToSequenceMermaid, convertUiGraphToMermaid, estimateSequenceMessageBoxSize, flattenMetaData, generateTableNodeId, generateUUID, getC4ElementColors, isC4Diagram, isSequenceDiagram, parseC4Diagram, sanitizeMermaidLabels, syncBaseData };