@uigraph/sdk 1.2.11 → 1.2.13

package/dist/index.cjs

@@ -2743,7 +2743,7 @@ function convertC4ToReactFlow(data) {
 				sourceHandle: `source-${side.source}`,
 				targetHandle: `target-${side.target}`,
 				label,
-				type: "simplebezier",
+				type: "smoothstep",
 				style: {
 					stroke: lineColor,
 					strokeWidth: (_style$lineWidth = style === null || style === void 0 ? void 0 : style.lineWidth) !== null && _style$lineWidth !== void 0 ? _style$lineWidth : 1.5
@@ -2780,16 +2780,19 @@ 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,
+	NODE_SEPARATION_HORIZONTAL: 120,
+	NODE_SEPARATION_VERTICAL: 180,
+	CONTAINER_SEPARATION_HORIZONTAL: 180,
+	CONTAINER_SEPARATION_VERTICAL: 280,
+	NESTED_SUBGRAPH_SEPARATION_HORIZONTAL: 160,
+	NESTED_SUBGRAPH_SEPARATION_VERTICAL: 220,
+	MIN_SUBGRAPH_WIDTH_HORIZONTAL: 600,
+	MIN_SUBGRAPH_WIDTH_VERTICAL: 240,
+	MIN_SUBGRAPH_HEIGHT: 200,
 	META_GRAPH_MARGIN: 100,
 	NESTED_CONTENT_MARGIN: 40,
-	MIXED_CONTENT_VERTICAL_SPACING: 100,
-	MIXED_CONTENT_HORIZONTAL_SPACING: 120
+	MIXED_CONTENT_VERTICAL_SPACING: 180,
+	MIXED_CONTENT_HORIZONTAL_SPACING: 160
 };
 const LAYOUT_RANKERS = {
 	NETWORK_SIMPLEX: "network-simplex",
@@ -2853,10 +2856,27 @@ function resolvePortalNodeType(hasImageUrl, tag) {
 	if (tag && TAG_TO_NODE_TYPE[tag]) return TAG_TO_NODE_TYPE[tag];
 	return "shape";
 }
+const COMPOUND_SHAPE_DELIMITERS = {
+	circle: {
+		open: "((",
+		close: "))"
+	},
+	stadium: {
+		open: "([",
+		close: "])"
+	},
+	cylinder: {
+		open: "[(",
+		close: ")]"
+	},
+	subroutine: {
+		open: "[[",
+		close: "]]"
+	}
+};
 function getNodeShape(nodeDefinition) {
 	if (nodeDefinition.includes("{") && nodeDefinition.includes("}")) return "diamond";
-	if (nodeDefinition.includes("((") && nodeDefinition.includes("))")) return "circle";
-	if (nodeDefinition.includes("([") && nodeDefinition.includes("])")) return "stadium";
+	for (const [shape, { open, close }] of Object.entries(COMPOUND_SHAPE_DELIMITERS)) if (nodeDefinition.includes(open) && nodeDefinition.includes(close)) return shape;
 	if (nodeDefinition.includes("[") && nodeDefinition.includes("]")) return "rect";
 	if (nodeDefinition.includes("(") && nodeDefinition.includes(")")) return "round";
 	return "rect";
@@ -2906,15 +2926,35 @@ function parseMermaidCode(code) {
 	}
 	const lines = cleanCode.split("\n");
 	const subgraphStack = [];
+	const SHAPE_DELIMITER_PAIRS = [
+		["[", "]"],
+		["(", ")"],
+		["{", "}"]
+	];
+	function stripWrappingShapeDelimiters(label) {
+		let result = label;
+		let changed = true;
+		while (changed && result.length >= 2) {
+			changed = false;
+			for (const [open, close] of SHAPE_DELIMITER_PAIRS) if (result[0] === open && result[result.length - 1] === close) {
+				const stripped = result.slice(1, -1).trim().replace(new RegExp("^\"(.*)\"$", "s"), "$1").replace(new RegExp("^'(.*)'$", "s"), "$1").trim();
+				if (!stripped) break;
+				result = stripped;
+				changed = true;
+				break;
+			}
+		}
+		return result;
+	}
 	function enhancedCleanLabel(label) {
-		return label.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]*>/g, "").replace(/\\u([0-9a-fA-F]{4})/g, (match, code$1) => {
+		return stripWrappingShapeDelimiters(label.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]*>/g, "").replace(/\\u([0-9a-fA-F]{4})/g, (match, code$1) => {
 			try {
 				return String.fromCharCode(parseInt(code$1, 16));
 			} catch (_unused) {
 				debugLog(`Warning: Could not parse unicode character: ${match}`);
 				return match;
 			}
-		}).replace(/\\n/g, "\n").replace(/\s*\n\s*/g, "\n").trim();
+		}).replace(/\\n/g, "\n").replace(/\s*\n\s*/g, "\n").trim());
 	}
 	debugLog("Pre-scanning for node definitions...");
 	lines.forEach((line, lineIndex) => {
@@ -2960,11 +3000,13 @@ function parseMermaidCode(code) {
 			if (shapeDef) {
 				const shape = getNodeShape(fullDef);
 				let rawLabel = nodeId;
-				const labelContentMatch = shapeDef.match(new RegExp("^[\\[\\(\\{](.*)[\\]\\)\\}]$", "s"));
-				if (labelContentMatch) {
-					rawLabel = labelContentMatch[1];
-					rawLabel = rawLabel.replace(/^"(.*)"$/, "$1").replace(/^'(.*)'$/, "$1");
+				const compoundDelimiters = COMPOUND_SHAPE_DELIMITERS[shape];
+				if (compoundDelimiters && shapeDef.startsWith(compoundDelimiters.open) && shapeDef.endsWith(compoundDelimiters.close)) rawLabel = shapeDef.slice(compoundDelimiters.open.length, shapeDef.length - compoundDelimiters.close.length);
+				else {
+					const labelContentMatch = shapeDef.match(new RegExp("^[\\[\\(\\{](.*)[\\]\\)\\}]$", "s"));
+					if (labelContentMatch) rawLabel = labelContentMatch[1];
 				}
+				rawLabel = rawLabel.replace(new RegExp("^\"(.*)\"$", "s"), "$1").replace(new RegExp("^'(.*)'$", "s"), "$1");
 				const label = enhancedCleanLabel(rawLabel);
 				nodeDefinitions.set(nodeId, {
 					label,
@@ -3121,7 +3163,16 @@ function parseMermaidCode(code) {
 				const openChar = openCharMatch[1];
 				const openPos = idx + rest.indexOf(openChar);
 				const closeChar = openChar === "[" ? "]" : openChar === "(" ? ")" : "}";
-				const closePos = str.indexOf(closeChar, openPos + 1);
+				let depth = 0;
+				let closePos = -1;
+				for (let pos = openPos; pos < str.length; pos++) if (str[pos] === openChar) depth++;
+				else if (str[pos] === closeChar) {
+					depth--;
+					if (depth === 0) {
+						closePos = pos;
+						break;
+					}
+				}
 				if (closePos !== -1) return {
 					id,
 					full: str.slice(startIndex + idMatch[0].search(/\S/), closePos + 1).trim(),
@@ -3134,101 +3185,106 @@ function parseMermaidCode(code) {
 				endIndex: idx
 			};
 		}
+		const arrowHeads = [
+			"-.->",
+			"-->",
+			"==>",
+			"->>",
+			"<->",
+			"-<>",
+			"<-",
+			"->"
+		];
 		function parseEdge(str) {
 			try {
+				const hops = [];
 				let i$2 = 0;
-				const src = extractToken(str, i$2);
+				let src = extractToken(str, i$2);
 				if (!src) return null;
 				i$2 = src.endIndex;
-				while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
-				const arrowHeads = [
-					"-.->",
-					"-->",
-					"==>",
-					"->>",
-					"<->",
-					"-<>",
-					"<-",
-					"->"
-				];
-				let foundArrowIndex = -1;
-				let foundArrow = "";
-				for (const ah of arrowHeads) {
-					const idx = str.indexOf(ah, i$2);
-					if (idx !== -1 && (foundArrowIndex === -1 || idx < foundArrowIndex)) {
-						foundArrowIndex = idx;
-						foundArrow = ah;
-					}
-				}
-				let op = null;
-				let edgeLabel = "";
-				if (foundArrowIndex !== -1) {
-					const between = str.slice(i$2, foundArrowIndex);
-					const prePipeMatch = between.match(/\|(.*?)\|/);
-					if (prePipeMatch) edgeLabel = prePipeMatch[1];
-					else {
-						const inline = between.replace(/^\s*[\-\.=:\~]+\s*/g, "").replace(/\s*[\-\.=:\~]+\s*$/g, "").trim();
-						if (inline) edgeLabel = inline;
-					}
-					op = foundArrow;
-					i$2 = foundArrowIndex + foundArrow.length;
+				while (true) {
 					while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
-					if (str[i$2] === "|") {
-						const next = str.indexOf("|", i$2 + 1);
-						if (next !== -1) {
-							edgeLabel = str.slice(i$2 + 1, next);
-							i$2 = next + 1;
+					let foundArrowIndex = -1;
+					let foundArrow = "";
+					for (const ah of arrowHeads) {
+						const idx = str.indexOf(ah, i$2);
+						if (idx !== -1 && (foundArrowIndex === -1 || idx < foundArrowIndex)) {
+							foundArrowIndex = idx;
+							foundArrow = ah;
 						}
 					}
-				} else {
-					for (const o of [
-						"---",
-						"-.-",
-						"::",
-						":-:",
-						"...",
-						"~",
-						"==="
-					].sort((a, b) => b.length - a.length)) if (str.startsWith(o, i$2)) {
-						op = o;
-						i$2 += o.length;
-						break;
-					}
-					if (!op) return null;
-					while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
-					if (str[i$2] === "|") {
-						const next = str.indexOf("|", i$2 + 1);
-						if (next !== -1) {
-							edgeLabel = str.slice(i$2 + 1, next);
-							i$2 = next + 1;
+					let op = null;
+					let edgeLabel = "";
+					if (foundArrowIndex !== -1) {
+						const between = str.slice(i$2, foundArrowIndex);
+						const prePipeMatch = between.match(/\|(.*?)\|/);
+						if (prePipeMatch) edgeLabel = prePipeMatch[1];
+						else {
+							const inline = between.replace(/^\s*[\-\.=:\~]+\s*/g, "").replace(/\s*[\-\.=:\~]+\s*$/g, "").trim();
+							if (inline) edgeLabel = inline;
 						}
+						op = foundArrow;
+						i$2 = foundArrowIndex + foundArrow.length;
+						while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
+						if (str[i$2] === "|") {
+							const next = str.indexOf("|", i$2 + 1);
+							if (next !== -1) {
+								edgeLabel = str.slice(i$2 + 1, next);
+								i$2 = next + 1;
+							}
+						}
+					} else if (hops.length === 0) {
+						for (const o of [
+							"---",
+							"-.-",
+							"::",
+							":-:",
+							"...",
+							"~",
+							"==="
+						].sort((a, b) => b.length - a.length)) if (str.startsWith(o, i$2)) {
+							op = o;
+							i$2 += o.length;
+							break;
+						}
+						if (!op) return null;
+						while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
+						if (str[i$2] === "|") {
+							const next = str.indexOf("|", i$2 + 1);
+							if (next !== -1) {
+								edgeLabel = str.slice(i$2 + 1, next);
+								i$2 = next + 1;
+							}
+						}
+					} else break;
+					while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
+					const tgt = extractToken(str, i$2);
+					if (!tgt) break;
+					const trailing = str.slice(tgt.endIndex).trimStart();
+					if (!edgeLabel && !trailing.startsWith(":::") && !arrowHeads.some((ah) => trailing.includes(ah))) {
+						const colonLabelMatch = trailing.match(/^:\s*(.+)$/);
+						if (colonLabelMatch) edgeLabel = colonLabelMatch[1].trim();
 					}
+					const isReverseArrow = op === "<-";
+					hops.push({
+						sourceId: isReverseArrow ? tgt.id : src.id,
+						sourceFull: isReverseArrow ? tgt.full : src.full,
+						targetId: isReverseArrow ? src.id : tgt.id,
+						targetFull: isReverseArrow ? src.full : tgt.full,
+						edgeType: isReverseArrow ? "->" : op,
+						edgeLabel
+					});
+					src = tgt;
+					i$2 = tgt.endIndex;
 				}
-				while (i$2 < str.length && /\s/.test(str[i$2])) i$2++;
-				const tgt = extractToken(str, i$2);
-				if (!tgt) return null;
-				const trailing = str.slice(tgt.endIndex).trimStart();
-				if (!edgeLabel && !trailing.startsWith(":::")) {
-					const colonLabelMatch = trailing.match(/^:\s*(.+)$/);
-					if (colonLabelMatch) edgeLabel = colonLabelMatch[1].trim();
-				}
-				const isReverseArrow = op === "<-";
-				return {
-					sourceId: isReverseArrow ? tgt.id : src.id,
-					sourceFull: isReverseArrow ? tgt.full : src.full,
-					targetId: isReverseArrow ? src.id : tgt.id,
-					targetFull: isReverseArrow ? src.full : tgt.full,
-					edgeType: isReverseArrow ? "->" : op,
-					edgeLabel
-				};
+				return hops.length > 0 ? hops : null;
 			} catch (_unused2) {
 				return null;
 			}
 		}
-		const parsedEdge = parseEdge(line);
-		if (!parsedEdge) debugLog(`Line "${line}" did not match edge pattern - checking for standalone nodes`);
-		if (parsedEdge) try {
-			const { sourceId, targetId, edgeType, edgeLabel } = parsedEdge;
+		const parsedEdges = parseEdge(line);
+		if (!parsedEdges) debugLog(`Line "${line}" did not match edge pattern - checking for standalone nodes`);
+		if (parsedEdges) for (const { sourceId, targetId, edgeType, edgeLabel } of parsedEdges) try {
 			debugLog(`Found edge: ${sourceId} ${edgeType} ${targetId} with label: "${edgeLabel}" in context: ${currentSubgraph || "global"}`);
 			const isSourceSubgraph = subgraphMap.has(sourceId);
 			const isTargetSubgraph = subgraphMap.has(targetId);
@@ -3248,10 +3304,11 @@ function parseMermaidCode(code) {
 					createOrGetNode(targetId, targetSubgraph);
 				}
 			}
+			const unquotedEdgeLabel = edgeLabel.replace(new RegExp("^\"(.*)\"$", "s"), "$1").replace(new RegExp("^'(.*)'$", "s"), "$1");
 			edges.push({
 				source: sourceId,
 				target: targetId,
-				label: enhancedCleanLabel(edgeLabel),
+				label: enhancedCleanLabel(unquotedEdgeLabel),
 				type: edgeType,
 				isSourceSubgraph,
 				isTargetSubgraph
@@ -3307,7 +3364,9 @@ const MERMAID_TO_PORTAL_SHAPE = {
 	round: "rounded-rect",
 	stadium: "terminator",
 	circle: "ellipse",
-	diamond: "diamond"
+	diamond: "diamond",
+	cylinder: "cylinder",
+	subroutine: "subroutine"
 };
 const SUBGRAPH_HEADER_HEIGHT = LAYOUT_SPACING.SUBGRAPH_HEADER_HEIGHT;
 const SUBGRAPH_PADDING = LAYOUT_SPACING.SUBGRAPH_PADDING;
@@ -3318,6 +3377,9 @@ const CONTAINER_SEPARATION_HORIZONTAL = LAYOUT_SPACING.CONTAINER_SEPARATION_HORI
 const CONTAINER_SEPARATION_VERTICAL = LAYOUT_SPACING.CONTAINER_SEPARATION_VERTICAL;
 const NESTED_SUBGRAPH_SEPARATION_HORIZONTAL = LAYOUT_SPACING.NESTED_SUBGRAPH_SEPARATION_HORIZONTAL;
 const NESTED_SUBGRAPH_SEPARATION_VERTICAL = LAYOUT_SPACING.NESTED_SUBGRAPH_SEPARATION_VERTICAL;
+const MIN_SUBGRAPH_WIDTH_HORIZONTAL = LAYOUT_SPACING.MIN_SUBGRAPH_WIDTH_HORIZONTAL;
+const MIN_SUBGRAPH_WIDTH_VERTICAL = LAYOUT_SPACING.MIN_SUBGRAPH_WIDTH_VERTICAL;
+const MIN_SUBGRAPH_HEIGHT = LAYOUT_SPACING.MIN_SUBGRAPH_HEIGHT;
 const META_GRAPH_MARGIN = LAYOUT_SPACING.META_GRAPH_MARGIN;
 const NESTED_CONTENT_MARGIN = LAYOUT_SPACING.NESTED_CONTENT_MARGIN;
 const MIXED_CONTENT_VERTICAL_SPACING = LAYOUT_SPACING.MIXED_CONTENT_VERTICAL_SPACING;
@@ -3341,7 +3403,8 @@ function calculateNodeSize(label, shape, isImageNode = false) {
 		} catch (_unused) {}
 		return text.length * 8;
 	}
-	const baseWidth = Math.max(...lines.map((line) => Math.ceil(measureLineWidth(line)))) + 30;
+	const maxLineWidth = Math.max(...lines.map((line) => Math.ceil(measureLineWidth(line))));
+	const baseWidth = maxLineWidth + 30;
 	const baseHeight = lines.length * 18 + 20;
 	const width = Math.max(80, baseWidth + 30);
 	const height = Math.max(40, baseHeight + 20);
@@ -3356,6 +3419,27 @@ function calculateNodeSize(label, shape, isImageNode = false) {
 			height: size
 		};
 	}
+	if (shape === "stadium") {
+		const sideInset = Math.max(12, height / 2) * 2;
+		return {
+			width: Math.max(width, maxLineWidth + sideInset + 20),
+			height
+		};
+	}
+	if (shape === "cylinder") {
+		const capInset = Math.max(12, Math.min(height * .18, width * .5) + 8) * 2;
+		return {
+			width,
+			height: Math.max(height, lines.length * 18 + capInset + 10)
+		};
+	}
+	if (shape === "subroutine") {
+		const sideInset = Math.max(24, width * .2);
+		return {
+			width: Math.max(width, maxLineWidth + sideInset + 20),
+			height
+		};
+	}
 	return {
 		width,
 		height
@@ -3404,6 +3488,7 @@ function processSubgraphsInHierarchicalOrder(subgraphs) {
 }
 function layoutSubgraphs(nodes, edges, subgraphs, direction) {
 	const subgraphLayouts = /* @__PURE__ */ new Map();
+	const isHorizontal = direction === "LR" || direction === "RL";
 	const orderedSubgraphs = processSubgraphsInHierarchicalOrder(subgraphs);
 	debugLog(`Laying out ${orderedSubgraphs.length} subgraphs in hierarchical order`);
 	orderedSubgraphs.forEach((subgraph) => {
@@ -3476,8 +3561,8 @@ function layoutSubgraphs(nodes, edges, subgraphs, direction) {
 		validateNodeSpacing(nodePositions, subgraph.id);
 		const baseWidth = maxX - minX + SUBGRAPH_PADDING * 2;
 		const baseHeight = maxY - minY + SUBGRAPH_PADDING * 2 + SUBGRAPH_HEADER_HEIGHT + SUBGRAPH_CONTENT_TOP_MARGIN;
-		const width = baseWidth + 4;
-		const height = baseHeight + 4;
+		const width = Math.max(baseWidth + SUBGRAPH_PADDING * 3, isHorizontal ? MIN_SUBGRAPH_WIDTH_HORIZONTAL : MIN_SUBGRAPH_WIDTH_VERTICAL);
+		const height = Math.max(baseHeight + SUBGRAPH_PADDING * 2, MIN_SUBGRAPH_HEIGHT);
 		subgraphLayouts.set(subgraph.id, {
 			id: subgraph.id,
 			title: subgraph.title,
@@ -3587,8 +3672,8 @@ function adjustParentSizesAfterPositioning(subgraphLayouts, subgraphPositions, o
 			const contentMaxBottom = Math.max(maxNodeBottom, maxChildBottom);
 			const requiredWidth = contentMaxRight + (isHorizontal ? SUBGRAPH_PADDING * 4 : SUBGRAPH_PADDING * 3);
 			const requiredHeight = contentMaxBottom + SUBGRAPH_PADDING * 3;
-			const newWidth = Math.max(layout.width, requiredWidth, isHorizontal ? 600 : 240);
-			const newHeight = Math.max(layout.height, requiredHeight, 200);
+			const newWidth = Math.max(layout.width, requiredWidth, isHorizontal ? MIN_SUBGRAPH_WIDTH_HORIZONTAL : MIN_SUBGRAPH_WIDTH_VERTICAL);
+			const newHeight = Math.max(layout.height, requiredHeight, MIN_SUBGRAPH_HEIGHT);
 			if (newWidth > layout.width || newHeight > layout.height) {
 				debugLog(`Post-positioning resize (iter ${iterations}): ${subgraph.id} ${layout.width}x${layout.height} → ${newWidth}x${newHeight}`);
 				layout.width = newWidth;
@@ -3623,11 +3708,12 @@ function validateNodeSpacing(nodePositions, subgraphId) {
 	if (!hasOverlap) debugLog(`✓ Node spacing validated for subgraph ${subgraphId} - no overlaps detected`);
 }
 function layoutMetaGraph(nodes, edges, subgraphLayouts, direction) {
+	const hasTopLevelSubgraphs = Array.from(subgraphLayouts.values()).some((layout) => !layout.parentId);
 	const g = new dagre.default.graphlib.Graph();
 	g.setGraph({
 		rankdir: direction,
-		nodesep: CONTAINER_SEPARATION_HORIZONTAL,
-		ranksep: CONTAINER_SEPARATION_VERTICAL,
+		nodesep: hasTopLevelSubgraphs ? CONTAINER_SEPARATION_HORIZONTAL : NODE_SEPARATION_HORIZONTAL,
+		ranksep: hasTopLevelSubgraphs ? CONTAINER_SEPARATION_VERTICAL : NODE_SEPARATION_VERTICAL,
 		marginx: META_GRAPH_MARGIN,
 		marginy: META_GRAPH_MARGIN,
 		ranker: DAGRE_RANKER
@@ -3872,7 +3958,8 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 		];
 		return subgraphColors[index % subgraphColors.length];
 	}
-	processSubgraphsInHierarchicalOrder(subgraphs).forEach((subgraph, index) => {
+	const orderedSubgraphs = processSubgraphsInHierarchicalOrder(subgraphs);
+	orderedSubgraphs.forEach((subgraph, index) => {
 		const layout = subgraphLayouts.get(subgraph.id);
 		const position = subgraphPositions.get(subgraph.id);
 		if (layout && position) {
@@ -4067,11 +4154,42 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 			zIndex: 1
 		});
 	});
+	const nodeSubgraphById = new Map(nodes.map((n) => [n.id, n.subgraph]));
+	const meaningfulEdges = edges.filter((edge) => {
+		if (edge.isTargetSubgraph && nodeSubgraphById.get(edge.source) === edge.target) {
+			debugLog(`Dropping edge ${edge.source} -> ${edge.target}: source already lives inside this subgraph`);
+			return false;
+		}
+		if (edge.isSourceSubgraph && nodeSubgraphById.get(edge.target) === edge.source) {
+			debugLog(`Dropping edge ${edge.source} -> ${edge.target}: target already lives inside this subgraph`);
+			return false;
+		}
+		return true;
+	});
+	const nodeAxisPosition = /* @__PURE__ */ new Map();
+	orderedSubgraphs.forEach((subgraph) => {
+		const position = subgraphPositions.get(subgraph.id);
+		if (position) nodeAxisPosition.set(`subgraph-${subgraph.id}`, position);
+	});
+	nodes.forEach((node) => {
+		if (node.subgraph) {
+			const subgraphLayout = subgraphLayouts.get(node.subgraph);
+			const subgraphPosition = subgraphPositions.get(node.subgraph);
+			const nodeLayout = subgraphLayout === null || subgraphLayout === void 0 ? void 0 : subgraphLayout.nodes.get(node.id);
+			if (nodeLayout && subgraphPosition) nodeAxisPosition.set(node.id, {
+				x: subgraphPosition.x + nodeLayout.x,
+				y: subgraphPosition.y + nodeLayout.y
+			});
+		} else {
+			const standalonePos = standalonePositions.get(node.id);
+			if (standalonePos) nodeAxisPosition.set(node.id, standalonePos);
+		}
+	});
 	return {
 		nodes: reactFlowNodes,
-		edges: edges.map((edge, index) => {
+		edges: meaningfulEdges.map((edge, index) => {
 			const edgeStyle = { strokeWidth: 2.5 };
-			const edgeType = "default";
+			const edgeType = "smoothstep";
 			switch (edge.type) {
 				case "-->":
 				case "->": break;
@@ -4088,6 +4206,22 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 			}
 			const sourceId = edge.isSourceSubgraph ? `subgraph-${edge.source}` : edge.source;
 			const targetId = edge.isTargetSubgraph ? `subgraph-${edge.target}` : edge.target;
+			const isHorizontalLayout = direction === "LR" || direction === "RL";
+			let sourceHandle = isHorizontalLayout ? "source-right" : "source-bottom";
+			let targetHandle = isHorizontalLayout ? "target-left" : "target-top";
+			const sourcePoint = nodeAxisPosition.get(sourceId);
+			const targetPoint = nodeAxisPosition.get(targetId);
+			if (sourcePoint && targetPoint) {
+				if (isHorizontalLayout) {
+					if (targetPoint.x < sourcePoint.x) {
+						sourceHandle = "source-left";
+						targetHandle = "target-right";
+					}
+				} else if (targetPoint.y < sourcePoint.y) {
+					sourceHandle = "source-top";
+					targetHandle = "target-bottom";
+				}
+			}
 			return {
 				id: `edge-${edge.source}-${edge.target}-${index}`,
 				source: sourceId,
@@ -4107,8 +4241,8 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
 					width: 20,
 					height: 20
 				},
-				sourceHandle: direction === "LR" || direction === "RL" ? "source-right" : "source-bottom",
-				targetHandle: direction === "LR" || direction === "RL" ? "target-left" : "target-top",
+				sourceHandle,
+				targetHandle,
 				zIndex: 0
 			};
 		})
@@ -6895,12 +7029,503 @@ function convertUiGraphToMermaid(input, options) {
 		context
 	};
 }
+const SHAPE_IDS = [
+	"rectangle",
+	"rounded-rect",
+	"ellipse",
+	"diamond",
+	"triangle",
+	"parallelogram",
+	"trapezoid",
+	"hexagon",
+	"document",
+	"cylinder",
+	"delay",
+	"off-page-connector",
+	"display",
+	"collate",
+	"sort",
+	"terminator",
+	"or",
+	"database",
+	"multiple-documents",
+	"subroutine",
+	"manual-input",
+	"summing-junction",
+	"internal-storage"
+];
+const STROKE_STYLES = [
+	"solid",
+	"dashed",
+	"dotted"
+];
+function clampNum(value, min, max) {
+	if (value === void 0 || !Number.isFinite(value)) return void 0;
+	return Math.min(max, Math.max(min, value));
+}
+function dropUndefined(input) {
+	const output = {};
+	for (const [key, value] of Object.entries(input)) {
+		if (value === void 0) continue;
+		output[key] = value;
+	}
+	return output;
+}
+function mapShapeStylePatch(patch) {
+	return dropUndefined({
+		fill: patch.fill,
+		stroke: patch.stroke,
+		strokeWidth: clampNum(patch.strokeWidth, 0, 10),
+		strokeStyle: patch.strokeStyle,
+		cornerRadius: clampNum(patch.cornerRadius, 0, 64),
+		textColor: patch.textColor,
+		textFontSize: clampNum(patch.textFontSize, 8, 48),
+		shape: patch.shape
+	});
+}
+function mapCloudStylePatch(patch) {
+	return dropUndefined({
+		fill: patch.fill,
+		stroke: patch.stroke,
+		strokeWidth: clampNum(patch.strokeWidth, 0, 10),
+		strokeStyle: patch.strokeStyle
+	});
+}
+function mapTextStylePatch(patch) {
+	return dropUndefined({
+		fill: patch.fill,
+		stroke: patch.stroke,
+		strokeWidth: clampNum(patch.strokeWidth, 0, 10),
+		strokeStyle: patch.strokeStyle,
+		borderRadius: clampNum(patch.cornerRadius, 0, 64),
+		color: patch.textColor,
+		fontSize: clampNum(patch.textFontSize, 8, 48)
+	});
+}
+function mapGroupStylePatch(patch) {
+	return dropUndefined({
+		backgroundColor: patch.fill,
+		borderColor: patch.stroke
+	});
+}
+function mapC4StylePatch(patch) {
+	return dropUndefined({
+		fill: patch.fill,
+		stroke: patch.stroke,
+		fontColor: patch.textColor
+	});
+}
+function mapC4BoundaryStylePatch(patch) {
+	return dropUndefined({
+		backgroundColor: patch.fill,
+		borderColor: patch.stroke,
+		fontColor: patch.textColor
+	});
+}
+function mapSequenceParticipantStylePatch(patch) {
+	return dropUndefined({
+		color: patch.stroke,
+		textColor: patch.textColor
+	});
+}
+const NODE_TYPE_REGISTRY = {
+	shape: {
+		tag: "shape",
+		diagramTypes: ["flowchart"],
+		isContainer: false,
+		geometryEditable: true,
+		shapes: SHAPE_IDS,
+		mapStylePatch: mapShapeStylePatch
+	},
+	default: {
+		tag: "default",
+		diagramTypes: ["flowchart"],
+		isContainer: false,
+		geometryEditable: true,
+		shapes: SHAPE_IDS,
+		mapStylePatch: mapShapeStylePatch
+	},
+	cloud: {
+		tag: "cloud",
+		diagramTypes: ["flowchart"],
+		isContainer: false,
+		geometryEditable: true,
+		mapStylePatch: mapCloudStylePatch
+	},
+	text: {
+		tag: "text",
+		diagramTypes: ["flowchart"],
+		isContainer: false,
+		geometryEditable: true,
+		mapStylePatch: mapTextStylePatch
+	},
+	group: {
+		tag: "group",
+		diagramTypes: ["flowchart"],
+		isContainer: true,
+		geometryEditable: false,
+		mapStylePatch: mapGroupStylePatch
+	},
+	c4: {
+		tag: "c4",
+		diagramTypes: ["c4"],
+		isContainer: false,
+		geometryEditable: true,
+		mapStylePatch: mapC4StylePatch
+	},
+	c4Boundary: {
+		tag: "c4Boundary",
+		diagramTypes: ["c4"],
+		isContainer: true,
+		geometryEditable: false,
+		mapStylePatch: mapC4BoundaryStylePatch
+	},
+	sequenceParticipant: {
+		tag: "sequenceParticipant",
+		diagramTypes: ["sequence"],
+		isContainer: false,
+		geometryEditable: false,
+		mapStylePatch: mapSequenceParticipantStylePatch
+	}
+};
+function getNodeTypeSpec(type) {
+	if (type === void 0) return void 0;
+	return NODE_TYPE_REGISTRY[type];
+}
+function buildNodeStyleDataPatch(type, patch) {
+	var _getNodeTypeSpec$mapS, _getNodeTypeSpec;
+	return (_getNodeTypeSpec$mapS = (_getNodeTypeSpec = getNodeTypeSpec(type)) === null || _getNodeTypeSpec === void 0 ? void 0 : _getNodeTypeSpec.mapStylePatch(patch)) !== null && _getNodeTypeSpec$mapS !== void 0 ? _getNodeTypeSpec$mapS : {};
+}
+function isGeometryEditableNodeType(type) {
+	var _getNodeTypeSpec$geom, _getNodeTypeSpec2;
+	return (_getNodeTypeSpec$geom = (_getNodeTypeSpec2 = getNodeTypeSpec(type)) === null || _getNodeTypeSpec2 === void 0 ? void 0 : _getNodeTypeSpec2.geometryEditable) !== null && _getNodeTypeSpec$geom !== void 0 ? _getNodeTypeSpec$geom : false;
+}
+const THEME_ROLES = [
+	"boundary",
+	"client",
+	"service",
+	"data",
+	"messaging",
+	"neutral"
+];
+const DEFAULT_THEME_ID = "professional";
+const THEME_REGISTRY = {
+	professional: {
+		id: "professional",
+		label: "Professional",
+		description: "Calm slate-navy palette, the default look",
+		mode: "dark",
+		promptHint: "clean, modern, professional, calm, corporate, default, no specific style requested",
+		nodeText: "#F8FAFC",
+		canvasText: "#93B4E8",
+		roles: {
+			boundary: {
+				fill: "#171B26",
+				stroke: "#3D4759"
+			},
+			client: {
+				fill: "#1C2336",
+				stroke: "#3D5EA8"
+			},
+			service: {
+				fill: "#1C2336",
+				stroke: "#3D5EA8"
+			},
+			data: {
+				fill: "#18242F",
+				stroke: "#3D8A7A"
+			},
+			messaging: {
+				fill: "#241F30",
+				stroke: "#6B5CA8"
+			},
+			neutral: {
+				fill: "#1C2336",
+				stroke: "#3D5EA8"
+			}
+		},
+		edge: {
+			stroke: "#828DA3",
+			strokeWidth: 1.5,
+			labelBackground: "#1E293B",
+			labelText: "#E2E8F0",
+			emphasizedStroke: "#5B9BFF",
+			emphasizedStrokeWidth: 3
+		}
+	},
+	"midnight-bold": {
+		id: "midnight-bold",
+		label: "Midnight Bold",
+		description: "Dark background, saturated high-contrast accents",
+		mode: "dark",
+		promptHint: "dark, bold, saturated, high contrast, vivid, striking",
+		nodeText: "#F8FAFC",
+		canvasText: "#7FB2FF",
+		roles: {
+			boundary: {
+				fill: "#12151F",
+				stroke: "#3D4759"
+			},
+			client: {
+				fill: "#1C2336",
+				stroke: "#5B9BFF"
+			},
+			service: {
+				fill: "#1C2336",
+				stroke: "#38BDF8"
+			},
+			data: {
+				fill: "#0F2D3A",
+				stroke: "#2AD4B3"
+			},
+			messaging: {
+				fill: "#2A2410",
+				stroke: "#E8B93E"
+			},
+			neutral: {
+				fill: "#1C2336",
+				stroke: "#5B9BFF"
+			}
+		},
+		edge: {
+			stroke: "#5B9BFF",
+			strokeWidth: 2.5,
+			labelBackground: "#1E293B",
+			labelText: "#E2E8F0",
+			emphasizedStroke: "#5B9BFF",
+			emphasizedStrokeWidth: 4
+		}
+	},
+	"soft-pastel": {
+		id: "soft-pastel",
+		label: "Soft Pastel",
+		description: "Dark cards, soft muted pastel-hued borders",
+		mode: "dark",
+		promptHint: "soft, pastel, gentle, muted, airy, whimsical",
+		nodeText: "#F1F5F9",
+		canvasText: "#A8C8E8",
+		roles: {
+			boundary: {
+				fill: "#171B24",
+				stroke: "#7C93B8"
+			},
+			client: {
+				fill: "#1A2233",
+				stroke: "#8FD9C4"
+			},
+			service: {
+				fill: "#1A2233",
+				stroke: "#93B8F0"
+			},
+			data: {
+				fill: "#1F1A2E",
+				stroke: "#E3A98C"
+			},
+			messaging: {
+				fill: "#241F14",
+				stroke: "#E8D48A"
+			},
+			neutral: {
+				fill: "#1C2029",
+				stroke: "#A8B3C4"
+			}
+		},
+		edge: {
+			stroke: "#8FA3C4",
+			strokeWidth: 2,
+			labelBackground: "#1E293B",
+			labelText: "#E8EDF5",
+			emphasizedStroke: "#8FD9C4",
+			emphasizedStrokeWidth: 3.5
+		}
+	},
+	monochrome: {
+		id: "monochrome",
+		label: "Monochrome",
+		description: "Grayscale, roles differ by shade rather than hue",
+		mode: "dark",
+		promptHint: "monochrome, grayscale, black and white, minimal, neutral",
+		nodeText: "#F3F4F6",
+		canvasText: "#D1D5DB",
+		roles: {
+			boundary: {
+				fill: "#17191D",
+				stroke: "#4B5563"
+			},
+			client: {
+				fill: "#23262B",
+				stroke: "#9CA3AF"
+			},
+			service: {
+				fill: "#1D2024",
+				stroke: "#6B7280"
+			},
+			data: {
+				fill: "#26292E",
+				stroke: "#D1D5DB"
+			},
+			messaging: {
+				fill: "#202225",
+				stroke: "#4B5563"
+			},
+			neutral: {
+				fill: "#1F2226",
+				stroke: "#6B7280"
+			}
+		},
+		edge: {
+			stroke: "#9CA3AF",
+			strokeWidth: 2,
+			labelBackground: "#111318",
+			labelText: "#E5E7EB",
+			emphasizedStroke: "#F3F4F6",
+			emphasizedStrokeWidth: 3.5
+		}
+	},
+	"high-contrast": {
+		id: "high-contrast",
+		label: "High Contrast",
+		description: "Maximum-contrast palette for accessibility or emphasis",
+		mode: "dark",
+		promptHint: "high contrast, accessible, accessibility, maximum contrast, bright neon",
+		nodeText: "#000000",
+		canvasText: "#FFFFFF",
+		roles: {
+			boundary: {
+				fill: "#000000",
+				stroke: "#FFFFFF"
+			},
+			client: {
+				fill: "#FFD400",
+				stroke: "#000000"
+			},
+			service: {
+				fill: "#00E5FF",
+				stroke: "#000000"
+			},
+			data: {
+				fill: "#00FF85",
+				stroke: "#000000"
+			},
+			messaging: {
+				fill: "#FF6EC7",
+				stroke: "#000000"
+			},
+			neutral: {
+				fill: "#FFFFFF",
+				stroke: "#000000"
+			}
+		},
+		edge: {
+			stroke: "#FFFFFF",
+			strokeWidth: 2.5,
+			labelBackground: "#000000",
+			labelText: "#FFFFFF",
+			emphasizedStroke: "#FFD400",
+			emphasizedStrokeWidth: 4.5
+		}
+	},
+	blueprint: {
+		id: "blueprint",
+		label: "Blueprint",
+		description: "Monochrome technical blueprint — one blue hue, thin uniform lines, near-transparent fills",
+		mode: "dark",
+		promptHint: "blueprint, technical, monochrome blue, schematic, precise, no decorative color, engineering drawing",
+		nodeText: "#CFE3F5",
+		canvasText: "#5B8FBF",
+		roles: {
+			boundary: {
+				fill: "#0B1929",
+				stroke: "#3D6A94"
+			},
+			client: {
+				fill: "#0E1D30",
+				stroke: "#5B8FBF"
+			},
+			service: {
+				fill: "#0E1D30",
+				stroke: "#4A7BAA"
+			},
+			data: {
+				fill: "#0E1D30",
+				stroke: "#6FA8D6"
+			},
+			messaging: {
+				fill: "#0E1D30",
+				stroke: "#3D6A94"
+			},
+			neutral: {
+				fill: "#0E1D30",
+				stroke: "#4A7BAA"
+			}
+		},
+		edge: {
+			stroke: "#3D6A94",
+			strokeWidth: 1,
+			labelBackground: "#0B1929",
+			labelText: "#CFE3F5",
+			emphasizedStroke: "#6FA8D6",
+			emphasizedStrokeWidth: 2
+		}
+	},
+	ocean: {
+		id: "ocean",
+		label: "Ocean",
+		description: "Cool dark blues and teals",
+		mode: "dark",
+		promptHint: "ocean, cool, blue, teal, calm water, deep sea",
+		nodeText: "#EAF6FA",
+		canvasText: "#7FD9EE",
+		roles: {
+			boundary: {
+				fill: "#0B1F2A",
+				stroke: "#2E5A6E"
+			},
+			client: {
+				fill: "#0F2E3D",
+				stroke: "#4FB8D6"
+			},
+			service: {
+				fill: "#0F3A3A",
+				stroke: "#35C7B0"
+			},
+			data: {
+				fill: "#10293F",
+				stroke: "#3B7DD8"
+			},
+			messaging: {
+				fill: "#172B3D",
+				stroke: "#6E93C7"
+			},
+			neutral: {
+				fill: "#10222C",
+				stroke: "#4FB8D6"
+			}
+		},
+		edge: {
+			stroke: "#4FB8D6",
+			strokeWidth: 2,
+			labelBackground: "#0B1F2A",
+			labelText: "#DCEEF5",
+			emphasizedStroke: "#35C7B0",
+			emphasizedStrokeWidth: 3.5
+		}
+	}
+};
+function getTheme(themeId) {
+	if (themeId && THEME_REGISTRY[themeId]) return THEME_REGISTRY[themeId];
+	return THEME_REGISTRY[DEFAULT_THEME_ID];
+}
+function buildThemeCatalogPromptContext() {
+	return Object.values(THEME_REGISTRY).map((t) => `- "${t.id}" (${t.mode}): ${t.description}. Matches requests like: ${t.promptHint}.`).join("\n");
+}
 exports.AstToSqlGenerator = AstToSqlGenerator;
 exports.AstToUiConverter = AstToUiConverter;
 exports.BasicDetailsSchema = BasicDetailsSchema;
 exports.C4_COLORS = C4_COLORS;
 exports.C4_LAYOUT = C4_LAYOUT;
 exports.ComponentInputType = require_component_type.ComponentInputType;
+exports.DEFAULT_THEME_ID = DEFAULT_THEME_ID;
 exports.DialectIdSchema = DialectIdSchema;
 exports.DocumentCollectionSchema = DocumentCollectionSchema;
 exports.DocumentIndexSchema = DocumentIndexSchema;
@@ -6914,11 +7539,18 @@ exports.MongoEditorSchema = MongoEditorSchema;
 exports.MongoIndexFieldSchema = MongoIndexFieldSchema;
 exports.MongoIndexSchema = MongoIndexSchema;
 exports.MongoNestedFieldSchema = MongoNestedFieldSchema;
+exports.NODE_TYPE_REGISTRY = NODE_TYPE_REGISTRY;
 exports.NestedFieldSchema = NestedFieldSchema;
 exports.NoSqlFieldSchema = NoSqlFieldSchema;
 exports.SEQUENCE_LAYOUT = SEQUENCE_LAYOUT;
+exports.SHAPE_IDS = SHAPE_IDS;
+exports.STROKE_STYLES = STROKE_STYLES;
 exports.SqlToAstParser = SqlToAstParser;
+exports.THEME_REGISTRY = THEME_REGISTRY;
+exports.THEME_ROLES = THEME_ROLES;
 exports.buildMetaData = buildMetaData;
+exports.buildNodeStyleDataPatch = buildNodeStyleDataPatch;
+exports.buildThemeCatalogPromptContext = buildThemeCatalogPromptContext;
 exports.computeDiagramSyncHash = computeDiagramSyncHash;
 exports.contextSchema = require_headless.contextSchema;
 exports.convertC4MermaidToReactFlow = convertC4MermaidToReactFlow;
@@ -6939,8 +7571,11 @@ exports.flattenMetaData = flattenMetaData;
 exports.generateTableNodeId = generateTableNodeId;
 exports.generateUUID = generateUUID;
 exports.getC4ElementColors = getC4ElementColors;
+exports.getNodeTypeSpec = getNodeTypeSpec;
+exports.getTheme = getTheme;
 exports.isC4Diagram = isC4Diagram;
 exports.isC4ReactFlowDiagram = isC4ReactFlowDiagram;
+exports.isGeometryEditableNodeType = isGeometryEditableNodeType;
 exports.isSequenceDiagram = isSequenceDiagram;
 exports.parseC4Diagram = parseC4Diagram;
 exports.sanitizeMermaidLabels = sanitizeMermaidLabels;