@likec4/generators 1.47.0 → 1.49.0

package/dist/index.mjs

@@ -0,0 +1,928 @@
+import { RichText, flattenMarkdownOrString } from "@likec4/core/types";
+import { isEmptyish, isNullish, keys, map, pipe, values } from "remeda";
+import { CompositeGeneratorNode, NL, expandToNode, joinToNode, toString } from "langium/generate";
+import { nonexhaustive } from "@likec4/core";
+import JSON5 from "json5";
+import { compareNatural, invariant, sortNaturalByFqn } from "@likec4/core/utils";
+const DEFAULT_ELEMENT_COLORS = {
+	primary: {
+		fill: "#3b82f6",
+		stroke: "#2563eb"
+	},
+	gray: {
+		fill: "#6b7280",
+		stroke: "#4b5563"
+	},
+	green: {
+		fill: "#22c55e",
+		stroke: "#16a34a"
+	},
+	red: {
+		fill: "#ef4444",
+		stroke: "#dc2626"
+	},
+	blue: {
+		fill: "#3b82f6",
+		stroke: "#2563eb"
+	},
+	indigo: {
+		fill: "#6366f1",
+		stroke: "#4f46e5"
+	},
+	muted: {
+		fill: "#9ca3af",
+		stroke: "#6b7280"
+	}
+};
+const DEFAULT_EDGE_COLOR = "#6b7280";
+function escapeXml(unsafe) {
+	return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function drawioShape(shape) {
+	switch (shape) {
+		case "person": return "shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;";
+		case "rectangle": return "shape=rectangle;";
+		case "browser": return "shape=rectangle;rounded=1;";
+		case "mobile": return "shape=rectangle;rounded=1;";
+		case "cylinder": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "queue": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "storage": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "bucket": return "shape=rectangle;rounded=1;";
+		case "document": return "shape=document;whiteSpace=wrap;html=1;boundedLbl=1;";
+		case "component": return "shape=component;";
+		default: return "shape=rectangle;";
+	}
+}
+function getElementColors(viewmodel, color) {
+	const styles = "$styles" in viewmodel && viewmodel.$styles ? viewmodel.$styles : null;
+	if (styles) try {
+		const values = styles.colors(color);
+		return {
+			fill: values.elements.fill,
+			stroke: values.elements.stroke
+		};
+	} catch {}
+	return DEFAULT_ELEMENT_COLORS[color] ?? DEFAULT_ELEMENT_COLORS["primary"];
+}
+function getEdgeStrokeColor(viewmodel, color) {
+	const styles = "$styles" in viewmodel && viewmodel.$styles ? viewmodel.$styles : null;
+	if (styles) try {
+		return styles.colors(color).relationships.line;
+	} catch {}
+	return DEFAULT_EDGE_COLOR;
+}
+function generateDrawio(viewmodel) {
+	const view = viewmodel.$view;
+	const { nodes, edges } = view;
+	const rootId = "0";
+	const defaultParentId = "1";
+	const nodeIds = /* @__PURE__ */ new Map();
+	let cellId = 2;
+	const getCellId = (nodeId) => {
+		let id = nodeIds.get(nodeId);
+		if (!id) {
+			id = String(cellId++);
+			nodeIds.set(nodeId, id);
+		}
+		return id;
+	};
+	const vertexCells = [];
+	const edgeCells = [];
+	const sortedNodes = [...nodes].sort((a, b) => {
+		if (isNullish(a.parent) && isNullish(b.parent)) return 0;
+		if (isNullish(a.parent)) return -1;
+		if (isNullish(b.parent)) return 1;
+		if (a.parent === b.parent) return 0;
+		if (a.id.startsWith(b.id + ".")) return 1;
+		if (b.id.startsWith(a.id + ".")) return -1;
+		return 0;
+	});
+	const getBBox = (n) => {
+		const d = n;
+		return {
+			x: typeof d.x === "number" ? d.x : Array.isArray(d.position) ? d.position[0] : 0,
+			y: typeof d.y === "number" ? d.y : Array.isArray(d.position) ? d.position[1] : 0,
+			width: typeof d.width === "number" ? d.width : d.size?.width ?? 120,
+			height: typeof d.height === "number" ? d.height : d.size?.height ?? 60
+		};
+	};
+	for (const node of sortedNodes) {
+		const id = getCellId(node.id);
+		const parentId = node.parent ? getCellId(node.parent) : defaultParentId;
+		const label = escapeXml(node.title);
+		const shapeStyle = drawioShape(node.shape);
+		const { x, y, width, height } = getBBox(node);
+		const elemColors = getElementColors(viewmodel, node.color);
+		const colorStyle = elemColors != null ? `fillColor=${elemColors.fill};strokeColor=${elemColors.stroke};fontColor=${elemColors.stroke};` : "";
+		const description = node.description && flattenMarkdownOrString(node.description);
+		const desc = isEmptyish(description) ? "" : escapeXml(description);
+		const technology = node.technology && flattenMarkdownOrString(node.technology);
+		const tech = isEmptyish(technology) ? "" : escapeXml(technology);
+		const userData = desc !== "" || tech !== "" ? `<mxUserObject><data key="likec4Description">${desc}</data><data key="likec4Technology">${tech}</data></mxUserObject>\n  ` : "";
+		vertexCells.push(`<mxCell id="${id}" value="${label}" style="${shapeStyle}${colorStyle}verticalAlign=middle;align=center;overflow=fill;spacingLeft=2;spacingRight=2;spacingTop=2;spacingBottom=2;" vertex="1" parent="${parentId}">
+  ${userData}<mxGeometry x="${Math.round(x)}" y="${Math.round(y)}" width="${Math.round(width)}" height="${Math.round(height)}" as="geometry" />
+</mxCell>`);
+	}
+	for (const edge of edges) {
+		const id = String(cellId++);
+		const sourceId = getCellId(edge.source);
+		const targetId = getCellId(edge.target);
+		const label = edge.label ? escapeXml(edge.label) : "";
+		const strokeColor = getEdgeStrokeColor(viewmodel, edge.color);
+		const dashStyle = edge.line === "dashed" ? "dashed=1;" : edge.line === "dotted" ? "dashed=1;dashPattern=1 1;" : "";
+		edgeCells.push(`<mxCell id="${id}" value="${label}" style="endArrow=block;html=1;rounded=0;exitX=1;exitY=0.5;entryX=0;entryY=0.5;strokeColor=${strokeColor};${dashStyle}" edge="1" parent="${defaultParentId}" source="${sourceId}" target="${targetId}">
+  <mxGeometry relative="1" as="geometry" />
+</mxCell>`);
+	}
+	let bounds = {
+		x: 0,
+		y: 0,
+		width: 800,
+		height: 600
+	};
+	try {
+		const b = viewmodel.bounds;
+		if (b != null && typeof b.x === "number") bounds = b;
+	} catch {}
+	const allCells = [
+		`<mxCell id="${defaultParentId}" vertex="1" parent="${rootId}">
+  <mxGeometry x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" as="geometry" />
+</mxCell>`,
+		...vertexCells,
+		...edgeCells
+	].join("\n");
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${(/* @__PURE__ */ new Date()).toISOString()}" agent="LikeC4" version="1.0" etag="" type="device">
+  <diagram name="${escapeXml(view.id)}" id="likec4-${escapeXml(view.id)}">
+    <mxGraphModel dx="800" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale=1 pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="${rootId}" />
+        ${allCells}
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+`;
+}
+const capitalizeFirstLetter$2 = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
+const fqnName$2 = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter$2).join("");
+const nodeName$2 = (node) => {
+	return fqnName$2(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
+};
+const d2direction = ({ autoLayout }) => {
+	switch (autoLayout.direction) {
+		case "TB": return "down";
+		case "BT": return "up";
+		case "LR": return "right";
+		case "RL": return "left";
+	}
+};
+const d2shape = ({ shape }) => {
+	switch (shape) {
+		case "queue":
+		case "cylinder":
+		case "rectangle":
+		case "document": return shape;
+		case "person": return "c4-person";
+		case "storage": return "stored_data";
+		case "component":
+		case "bucket":
+		case "mobile":
+		case "browser": return "rectangle";
+	}
+};
+function generateD2(viewmodel) {
+	const view = viewmodel.$view;
+	const { nodes, edges } = view;
+	const names = /* @__PURE__ */ new Map();
+	const printNode = (node, parentName) => {
+		const name = nodeName$2(node);
+		const fqnName = (parentName ? parentName + "." : "") + name;
+		names.set(node.id, fqnName);
+		const label = JSON.stringify(node.title);
+		const shape = d2shape(node);
+		return new CompositeGeneratorNode().append(name, ": {", NL).indent({
+			indentedChildren: (indent) => indent.append("label: ", label, NL).appendIf(shape !== "rectangle", "shape: ", shape, NL).appendIf(node.children.length > 0, NL, joinToNode(nodes.filter((n) => n.parent === node.id), (n) => printNode(n, fqnName))),
+			indentation: 2
+		}).append("}", NL);
+	};
+	const printEdge = (edge) => {
+		return new CompositeGeneratorNode().append(names.get(edge.source), " -> ", names.get(edge.target)).append((out) => edge.label && out.append(": ", JSON.stringify(edge.label)));
+	};
+	return toString(new CompositeGeneratorNode().append("direction: ", d2direction(view), NL, NL).append(joinToNode(nodes.filter((n) => isNullish(n.parent)), (n) => printNode(n), { appendNewLineIfNotEmpty: true })).appendIf(edges.length > 0, NL, joinToNode(edges, (e) => printEdge(e), { appendNewLineIfNotEmpty: true })));
+}
+const capitalizeFirstLetter$1 = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
+const fqnName$1 = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter$1).join("");
+const nodeName$1 = (node) => {
+	return fqnName$1(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
+};
+const toSingleQuotes = (str) => str.replace(/\\?"/g, `'`);
+const mmdshape = ({ shape, title }) => {
+	const label = `label: ${JSON.stringify(title)}`;
+	switch (shape) {
+		case "queue": return `@{ shape: horizontal-cylinder, ${label} }`;
+		case "person": return `@{ icon: "fa:user", shape: rounded, ${label} }`;
+		case "storage": return `@{ shape: disk, ${label} }`;
+		case "cylinder": return `@{ shape: cylinder, ${label} }`;
+		case "mobile":
+		case "browser": return `@{ shape: rounded, ${label} }`;
+		case "bucket": return `@{ shape: trap-t, ${label} }`;
+		case "rectangle": return `@{ shape: rectangle, ${label} }`;
+		case "document": return `@{ shape: doc, ${label} }`;
+		case "component": return `@{ shape: rectangle, ${label} }`;
+		default: nonexhaustive(shape);
+	}
+};
+function generateMermaid(viewmodel) {
+	const view = viewmodel.$view;
+	const { nodes, edges } = view;
+	const names = /* @__PURE__ */ new Map();
+	const printNode = (node, parentName) => {
+		const name = nodeName$1(node);
+		const fqnName = (parentName ? parentName + "." : "") + name;
+		names.set(node.id, fqnName);
+		const baseNode = new CompositeGeneratorNode();
+		if (node.children.length > 0) {
+			const label = toSingleQuotes(node.title);
+			baseNode.append("subgraph ", fqnName, "[\"`", label, "`\"]", NL).indent({
+				indentedChildren: [joinToNode(nodes.filter((n) => n.parent === node.id), (n) => printNode(n, fqnName), { appendNewLineIfNotEmpty: true })],
+				indentation: 2
+			}).append("end", NL);
+		} else baseNode.append(fqnName, mmdshape(node));
+		return baseNode;
+	};
+	const printEdge = (edge) => {
+		return new CompositeGeneratorNode().append(names.get(edge.source), " -.", edge.label ? " \"`" + toSingleQuotes(edge.label) + "`\" .-" : "-", "> ", names.get(edge.target));
+	};
+	return toString(new CompositeGeneratorNode().append("---", NL, `title: ${JSON.stringify(toSingleQuotes(viewmodel.titleOrId))}`, NL, "---", NL).append("graph ", view.autoLayout.direction, NL).indent({
+		indentedChildren: (indent) => {
+			indent.append(joinToNode(nodes.filter((n) => isNullish(n.parent)), (n) => printNode(n), { appendNewLineIfNotEmpty: true })).appendIf(edges.length > 0, joinToNode(edges, (e) => printEdge(e), { appendNewLineIfNotEmpty: true }));
+		},
+		indentation: 2
+	}));
+}
+function getAttr(attrs, name) {
+	const re = new RegExp(`${name}="([^"]*)"`, "i");
+	const m = attrs.match(re);
+	return m ? m[1] : void 0;
+}
+function parseNum(s) {
+	if (s === void 0 || s === "") return void 0;
+	const n = Number.parseFloat(s);
+	return Number.isNaN(n) ? void 0 : n;
+}
+function parseStyle(style) {
+	const map = /* @__PURE__ */ new Map();
+	if (!style) return map;
+	for (const part of style.split(";")) {
+		const eq = part.indexOf("=");
+		if (eq > 0) {
+			const k = part.slice(0, eq).trim();
+			const v = part.slice(eq + 1).trim();
+			if (k && v) map.set(k.toLowerCase(), v);
+		}
+	}
+	return map;
+}
+function parseUserData(fullTag) {
+	const out = {};
+	const descMatch = fullTag.match(/<data\s+key="likec4Description"[^>]*>([\s\S]*?)<\/data>/i);
+	if (descMatch?.[1]) out.description = decodeXmlEntities(descMatch[1].trim());
+	const techMatch = fullTag.match(/<data\s+key="likec4Technology"[^>]*>([\s\S]*?)<\/data>/i);
+	if (techMatch?.[1]) out.technology = decodeXmlEntities(techMatch[1].trim());
+	return out;
+}
+function parseDrawioXml(xml) {
+	const cells = [];
+	const mxCellRe = /<mxCell\s+([^>]+?)(?:\s*\/>|>([\s\S]*?)<\/mxCell>)/gi;
+	const geomAttr = (tag, name) => getAttr(tag, name);
+	let m;
+	while ((m = mxCellRe.exec(xml)) !== null) {
+		const attrs = m[1] ?? "";
+		const inner = m[2] ?? "";
+		const id = getAttr(attrs, "id");
+		if (!id) continue;
+		const valueRaw = getAttr(attrs, "value");
+		const parent = getAttr(attrs, "parent");
+		const source = getAttr(attrs, "source");
+		const target = getAttr(attrs, "target");
+		const vertex = getAttr(attrs, "vertex") === "1";
+		const edge = getAttr(attrs, "edge") === "1";
+		const style = getAttr(attrs, "style");
+		const geomMatch = m[0].match(/<mxGeometry[^>]*>/i);
+		const geomStr = geomMatch ? geomMatch[0] : "";
+		const styleMap = parseStyle(style ?? void 0);
+		const userData = parseUserData(inner);
+		const x = parseNum(geomAttr(geomStr, "x"));
+		const y = parseNum(geomAttr(geomStr, "y"));
+		const width = parseNum(geomAttr(geomStr, "width"));
+		const height = parseNum(geomAttr(geomStr, "height"));
+		const fillColor = styleMap.get("fillcolor") ?? styleMap.get("fillColor");
+		const strokeColor = styleMap.get("strokecolor") ?? styleMap.get("strokeColor");
+		const cell = {
+			id,
+			...valueRaw != null && valueRaw !== "" ? { value: decodeXmlEntities(valueRaw) } : {},
+			...parent != null && parent !== "" ? { parent } : {},
+			...source != null && source !== "" ? { source } : {},
+			...target != null && target !== "" ? { target } : {},
+			vertex,
+			edge,
+			...style != null && style !== "" ? { style } : {},
+			...x !== void 0 ? { x } : {},
+			...y !== void 0 ? { y } : {},
+			...width !== void 0 ? { width } : {},
+			...height !== void 0 ? { height } : {},
+			...fillColor !== void 0 ? { fillColor } : {},
+			...strokeColor !== void 0 ? { strokeColor } : {},
+			...userData.description != null ? { description: userData.description } : {},
+			...userData.technology != null ? { technology: userData.technology } : {}
+		};
+		cells.push(cell);
+	}
+	return cells;
+}
+function decodeXmlEntities(s) {
+	return s.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'").replace(/&amp;/g, "&");
+}
+function inferKind(style) {
+	if (!style) return "container";
+	const s = style.toLowerCase();
+	if (s.includes("umlactor") || s.includes("shape=person")) return "actor";
+	if (s.includes("swimlane") || s.includes("shape=rectangle") && s.includes("rounded")) return "system";
+	return "container";
+}
+function toId(name) {
+	return name.trim().replace(/\s+/g, "_").replace(/[^a-zA-Z0-9_.-]/g, "").replace(/^[0-9]/, "_$&") || "element";
+}
+function parseDrawioToLikeC4(xml) {
+	const cells = parseDrawioXml(xml);
+	const byId = /* @__PURE__ */ new Map();
+	for (const c of cells) byId.set(c.id, c);
+	const vertices = cells.filter((c) => c.vertex && c.id !== "1");
+	const edges = cells.filter((c) => c.edge && c.source && c.target);
+	const rootId = "1";
+	const idToFqn = /* @__PURE__ */ new Map();
+	const idToCell = /* @__PURE__ */ new Map();
+	for (const v of vertices) idToCell.set(v.id, v);
+	const usedNames = /* @__PURE__ */ new Set();
+	function uniqueName(base) {
+		let name = toId(base || "element");
+		let n = name;
+		let i = 0;
+		while (usedNames.has(n)) n = `${name}_${++i}`;
+		usedNames.add(n);
+		return n;
+	}
+	for (const v of vertices) if (v.parent === rootId || !v.parent) {
+		const name = uniqueName(v.value ?? v.id);
+		idToFqn.set(v.id, name);
+	}
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (const v of vertices) {
+			if (idToFqn.has(v.id)) continue;
+			const parent = v.parent ? idToFqn.get(v.parent) : null;
+			if (parent != null) {
+				const local = uniqueName(v.value ?? v.id);
+				idToFqn.set(v.id, `${parent}.${local}`);
+				changed = true;
+			}
+		}
+	}
+	for (const v of vertices) if (!idToFqn.has(v.id)) idToFqn.set(v.id, uniqueName(v.value ?? v.id));
+	const hexToCustomName = /* @__PURE__ */ new Map();
+	let customColorIndex = 0;
+	for (const v of vertices) {
+		const fill = v.fillColor?.trim();
+		if (fill && /^#[0-9A-Fa-f]{3,8}$/.test(fill)) {
+			if (!hexToCustomName.has(fill)) hexToCustomName.set(fill, `drawio_color_${++customColorIndex}`);
+		}
+	}
+	const lines = [];
+	if (hexToCustomName.size > 0) {
+		lines.push("specification {");
+		for (const [hex, name] of hexToCustomName) lines.push(`  color ${name} ${hex}`);
+		lines.push("}");
+		lines.push("");
+	}
+	lines.push("model {");
+	lines.push("");
+	const children = /* @__PURE__ */ new Map();
+	const roots = [];
+	for (const [cellId, fqn] of idToFqn) {
+		const cell = idToCell.get(cellId);
+		if (!cell) continue;
+		if (cell.parent === rootId || !cell.parent) roots.push({
+			cellId,
+			fqn
+		});
+		else {
+			const parentFqn = idToFqn.get(cell.parent);
+			if (parentFqn != null) {
+				const list = children.get(parentFqn) ?? [];
+				list.push({
+					cellId,
+					fqn
+				});
+				children.set(parentFqn, list);
+			} else roots.push({
+				cellId,
+				fqn
+			});
+		}
+	}
+	function emitElement(cellId, fqn, indent) {
+		const cell = idToCell.get(cellId);
+		if (!cell) return;
+		const kind = inferKind(cell.style);
+		const title = cell.value && cell.value.trim() || fqn.split(".").pop() || "Element";
+		const name = fqn.split(".").pop();
+		const pad = "  ".repeat(indent);
+		const desc = cell.description?.trim();
+		const tech = cell.technology?.trim();
+		const colorName = cell.fillColor && /^#[0-9A-Fa-f]{3,8}$/.test(cell.fillColor.trim()) ? hexToCustomName.get(cell.fillColor.trim()) : void 0;
+		if (kind === "actor") lines.push(`${pad}${name} = actor '${title.replace(/'/g, "''")}'`);
+		else if (kind === "system") lines.push(`${pad}${name} = system '${title.replace(/'/g, "''")}'`);
+		else lines.push(`${pad}${name} = container '${title.replace(/'/g, "''")}'`);
+		const childList = children.get(fqn);
+		if (childList && childList.length > 0 || desc || tech || colorName) {
+			lines.push(`${pad}{`);
+			if (colorName) lines.push(`${pad}  style { color ${colorName} }`);
+			if (desc) lines.push(`${pad}  description '${desc.replace(/'/g, "''")}'`);
+			if (tech) lines.push(`${pad}  technology '${tech.replace(/'/g, "''")}'`);
+			if (childList && childList.length > 0) for (const ch of childList) emitElement(ch.cellId, ch.fqn, indent + 1);
+			lines.push(`${pad}}`);
+		} else {
+			lines.push(`${pad}{`);
+			lines.push(`${pad}}`);
+		}
+		lines.push("");
+	}
+	for (const { cellId, fqn } of roots) emitElement(cellId, fqn, 1);
+	for (const e of edges) {
+		const src = idToFqn.get(e.source);
+		const tgt = idToFqn.get(e.target);
+		if (!src || !tgt) continue;
+		const label = e.value && e.value.trim() ? ` '${e.value.replace(/'/g, "''")}'` : "";
+		lines.push(`  ${src} -> ${tgt}${label}`);
+	}
+	lines.push("}");
+	lines.push("");
+	lines.push("views {");
+	lines.push("  view index {");
+	lines.push("    include *");
+	lines.push("  }");
+	lines.push("}");
+	lines.push("");
+	return lines.join("\n");
+}
+function toUnion(elements) {
+	if (elements.length === 0) return "never";
+	return elements.sort(compareNatural).map((v) => `  | ${JSON.stringify(v)}`).join("\n").trimStart();
+}
+function elementIdToUnion(_elements) {
+	const elements = values(_elements);
+	if (elements.length === 0) return "never";
+	return pipe(elements, sortNaturalByFqn, map((v) => `  | ${JSON.stringify(v.id)}`)).join("\n").trimStart();
+}
+function generateAux(model, options = {}) {
+	const { useCorePackage = false } = options;
+	return `
+import type { Aux, SpecAux } from '${useCorePackage ? "@likec4/core/types" : "likec4/model"}';
+
+export type $Specs = SpecAux<
+  // Element kinds
+  ${toUnion(keys(model.specification.elements))},
+  // Deployment kinds
+  ${toUnion(keys(model.specification.deployments ?? {}))},
+  // Relationship kinds
+  ${toUnion(keys(model.specification.relationships ?? {}))},
+  // Tags
+  ${toUnion(keys(model.specification.tags ?? {}))},
+  // Metadata keys
+  ${toUnion(model.specification.metadataKeys ?? [])}
+>
+
+export type $Aux = Aux<
+  ${JSON.stringify(model.stage)},
+  // Elements
+  ${elementIdToUnion(model.$data.elements)},
+  // Deployments
+  ${elementIdToUnion(model.$data.deployments.elements)},
+  // Views
+  ${toUnion(keys(model.$data.views))},
+  // Project ID
+  ${JSON.stringify(model.projectId)},
+  $Specs
+>
+
+export type $ElementId = $Aux['ElementId']
+export type $DeploymentId = $Aux['DeploymentId']
+export type $ViewId = $Aux['ViewId']
+
+export type $ElementKind = $Aux['ElementKind']
+export type $RelationKind = $Aux['RelationKind']
+export type $DeploymentKind = $Aux['DeploymentKind']
+export type $Tag = $Aux['Tag']
+export type $Tags = readonly $Aux['Tag'][]
+export type $MetadataKey = $Aux['MetadataKey']
+`.trimStart();
+}
+function generateLikeC4Model(model, options = {}) {
+	const aux = generateAux(model, options);
+	const { useCorePackage = false } = options;
+	return `
+/* prettier-ignore-start */
+/* eslint-disable */
+
+/******************************************************************************
+ * This file was generated
+ * DO NOT EDIT MANUALLY!
+ ******************************************************************************/
+
+import { LikeC4Model } from '${useCorePackage ? "@likec4/core" : "likec4"}/model'
+${aux}
+
+export const likec4model: LikeC4Model<$Aux> = new LikeC4Model(${JSON5.stringify(model.$data, {
+		space: 2,
+		quote: "'"
+	})} as any) as any
+
+/* prettier-ignore-end */
+`.trimStart();
+}
+const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
+const fqnName = (nodeId) => {
+	return nodeId.split(/[.-]/).map(capitalizeFirstLetter).join("");
+};
+const nodeName = (node) => {
+	return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
+};
+const pumlColor = (color, customColorProvider, defaultColor = "#3b82f6") => {
+	if (color) return customColorProvider(color) ?? defaultColor;
+	return defaultColor;
+};
+const pumlDirection = ({ autoLayout }) => {
+	switch (autoLayout.direction) {
+		case "TB": return "top to bottom";
+		case "BT":
+			console.warn("Bottom to top direction is not supported. Defaulting to top to bottom.");
+			return "top to bottom";
+		case "LR": return "left to right";
+		case "RL":
+			console.warn("Right to left direction is not supported. Defaulting to left to right.");
+			return "left to right";
+	}
+};
+const pumlShape = ({ shape }) => {
+	switch (shape) {
+		case "queue":
+		case "rectangle":
+		case "person": return shape;
+		case "storage":
+		case "cylinder": return "database";
+		case "component": return "component";
+		case "document":
+		case "mobile":
+		case "bucket":
+		case "browser": return "rectangle";
+		default: nonexhaustive(shape);
+	}
+};
+const escapeLabel = (label) => isEmptyish(label) ? null : JSON.stringify(label).slice(1, -1).replace(/\\"/g, "\"");
+function generatePuml(viewmodel) {
+	const view = viewmodel.$view;
+	const colors = viewmodel.$model.$styles.theme.colors;
+	const { nodes, edges } = view;
+	const elemntColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].elements[key] : void 0;
+	const relationshipsColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].relationships[key] : void 0;
+	const names = /* @__PURE__ */ new Map();
+	const printHeader = () => {
+		return new CompositeGeneratorNode().append("title \"", viewmodel.titleOrId, "\"", NL).append(pumlDirection(view), " direction", NL);
+	};
+	const printTheme = () => {
+		return new CompositeGeneratorNode().append("hide stereotype", NL).append("skinparam ranksep ", "60", NL).append("skinparam nodesep ", "30", NL).append("skinparam {", NL).indent({
+			indentedChildren: (indent) => indent.append("arrowFontSize ", "10", NL).append("defaultTextAlignment ", "center", NL).append("wrapWidth ", "200", NL).append("maxMessageSize ", "100", NL).append("shadowing ", "false", NL),
+			indentation: 2
+		}).append("}", NL);
+	};
+	const printStereotypes = (node) => {
+		const shape = pumlShape(node);
+		const fqn = fqnName(node.id);
+		return new CompositeGeneratorNode().append("skinparam ", shape, "<<", fqn, ">>", "{", NL).indent({
+			indentedChildren: (indent) => indent.append("BackgroundColor ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("FontColor ", pumlColor(node.color, elemntColorProvider("hiContrast"), "#FFFFFF"), NL).append("BorderColor ", pumlColor(node.color, elemntColorProvider("stroke")), NL),
+			indentation: 2
+		}).append("}", NL);
+	};
+	const printNode = (node) => {
+		const shape = pumlShape(node);
+		const fqn = fqnName(node.id);
+		const label = escapeLabel(node.title) || nodeName(node);
+		const tech = escapeLabel(node.technology);
+		names.set(node.id, fqn);
+		const description = RichText.from(node.description);
+		return new CompositeGeneratorNode().append(shape, " ").append("\"").append("==", label).appendIf(!!tech, `\\n<size:10>[`, tech, "]</size>").appendIf(description.nonEmpty, `\\n\\n`, escapeLabel(description.text)).append("\"", " <<", fqn, ">> ", "as ", fqn, NL);
+	};
+	const printBoundary = (node) => {
+		const label = escapeLabel(node.title) || nodeName(node);
+		const fqn = fqnName(node.id);
+		names.set(node.id, fqn);
+		return new CompositeGeneratorNode().append("rectangle \"", label, "\" <<", fqn, ">> as ", fqn, " {", NL).indent({
+			indentedChildren: (indent) => indent.append("skinparam ", "RectangleBorderColor<<", fqn, ">> ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("skinparam ", "RectangleFontColor<<", fqn, ">> ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("skinparam ", "RectangleBorderStyle<<", fqn, ">> ", "dashed", NL, NL).append(joinToNode(nodes.filter((n) => n.parent === node.id), (c) => c.children.length > 0 ? printBoundary(c) : printNode(c))),
+			indentation: 2
+		}).append("}", NL);
+	};
+	const printEdge = (edge) => {
+		const tech = edge.technology || "";
+		const label = edge.label || tech;
+		const color = pumlColor(edge.color, relationshipsColorProvider("line"), "#777777");
+		const withColor = (text) => `<color:${color}>${text.replaceAll("\"", `'`)}`;
+		const out = new CompositeGeneratorNode().append(names.get(edge.source), " .[", color, ",thickness=2].> ", names.get(edge.target));
+		if (label || tech) {
+			out.append(" : ", label.split("\n").map((l) => isEmptyish(l) ? l : withColor(l)).join("\\n"));
+			if (tech && tech !== label) out.append("\\n<size:8>[", withColor(tech), "]</size>");
+		}
+		return out.append(NL);
+	};
+	return toString(new CompositeGeneratorNode().append("@startuml", NL).append(printHeader(), NL).append(printTheme(), NL).append(joinToNode(nodes.filter((n) => n.children.length == 0), (n) => printStereotypes(n), { appendNewLineIfNotEmpty: true })).append(joinToNode(nodes.filter((n) => isNullish(n.parent)), (n) => n.children.length > 0 ? printBoundary(n) : printNode(n), { appendNewLineIfNotEmpty: true })).appendIf(edges.length > 0, NL, joinToNode(edges, (e) => printEdge(e), { appendNewLineIfNotEmpty: true })).append(`@enduml`, NL));
+}
+function generateViewId(views) {
+	return joinToNode(views, (view) => expandToNode`${JSON5.stringify(view.id)}`, { separator: " | " });
+}
+function generateViewsDataJs(diagrams) {
+	const views = Array.from(diagrams);
+	const out = new CompositeGeneratorNode();
+	out.appendTemplate`
+    /******************************************************************************
+     * This file was generated
+     * DO NOT EDIT MANUALLY!
+     ******************************************************************************/
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    `.append(NL, NL);
+	if (views.length == 0) {
+		out.append("export const LikeC4Views = {}", NL);
+		return toString(out);
+	}
+	out.appendTemplate`
+    export const LikeC4Views = {
+  `.indent({
+		indentation: 2,
+		indentedChildren(indented) {
+			indented.appendNewLineIf(views.length > 1).append(joinToNode(views, (view) => expandToNode`${JSON5.stringify(view.id)}: ${JSON5.stringify(view)}`, {
+				separator: ",",
+				appendNewLineIfNotEmpty: true
+			}));
+		}
+	}).append("}", NL, NL).appendTemplate`
+
+    export function isLikeC4ViewId(value) {
+      return (
+        value != null &&
+        typeof value === 'string' &&
+        !!LikeC4Views[value]
+      )
+    }
+
+    /* prettier-ignore-end */
+  `.append(NL);
+	return toString(out);
+}
+function generateViewsDataTs(diagrams) {
+	const views = Array.from(diagrams);
+	const out = new CompositeGeneratorNode();
+	out.appendTemplate`
+    /******************************************************************************
+     * This file was generated
+     * DO NOT EDIT MANUALLY!
+     ******************************************************************************/
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    // @ts-nocheck
+
+    import type { DiagramView } from 'likec4'
+    `.append(NL, NL);
+	if (views.length === 0) {
+		out.append("export {}", NL);
+		return toString(out);
+	}
+	out.appendTemplate`
+    export type LikeC4ViewId = ${generateViewId(views)};
+    export const LikeC4Views = {
+  `.indent({
+		indentation: 2,
+		indentedChildren(indented) {
+			indented.appendNewLineIf(views.length > 1).append(joinToNode(views, (view) => expandToNode`${JSON5.stringify(view.id)}: (${JSON5.stringify(view)} as unknown) as DiagramView`, {
+				separator: ",",
+				appendNewLineIfNotEmpty: true
+			}));
+		}
+	}).append("} as const satisfies Record<LikeC4ViewId, DiagramView>", NL, NL).appendTemplate`
+    export type LikeC4Views = typeof LikeC4Views
+
+    export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId {
+      return (
+        value != null &&
+        typeof value === 'string' &&
+        !!LikeC4Views[value]
+      )
+    }
+
+    /* prettier-ignore-end */
+  `.append(NL);
+	return toString(out);
+}
+function generateViewsDataDTs(diagrams) {
+	const views = Array.from(diagrams);
+	const out = new CompositeGeneratorNode();
+	out.appendTemplate`
+    /******************************************************************************
+     * This file was generated
+     * DO NOT EDIT MANUALLY!
+     ******************************************************************************/
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    import type { DiagramView } from 'likec4'
+    `.append(NL, NL);
+	if (views.length == 0) {
+		out.append("export {}", NL);
+		return toString(out);
+	}
+	out.appendTemplate`
+    export type LikeC4ViewId = ${generateViewId(views)};
+    export type LikeC4Views = Record<LikeC4ViewId, DiagramView>
+
+    export declare const LikeC4Views: LikeC4Views
+    export declare function isLikeC4ViewId(value: unknown): value is LikeC4ViewId
+
+    /* prettier-ignore-end */
+  `.append(NL);
+	return toString(out);
+}
+function generateReactNext(views) {
+	return {
+		viewsData: {
+			fileName: "likec4-views-data",
+			js: generateViewsDataJs(views),
+			dts: generateViewsDataDTs(views)
+		},
+		components: {
+			fileName: "likec4-components",
+			...generateComponents()
+		},
+		index: generateIndex()
+	};
+}
+function generateComponents() {
+	const js = new CompositeGeneratorNode().appendTemplate`
+    /******************************************************************************
+     * This file was generated
+     * DO NOT EDIT MANUALLY!
+     ******************************************************************************/
+    /* prettier-ignore-start */
+    /* eslint-disable */
+    import { createElement } from "react";
+    import { LikeC4Diagram, EmbeddedLikeC4Diagram } from "@likec4/diagram";
+    import { LikeC4Views } from "./likec4-views-data";
+    export function LikeC4View({ viewId, ...props }) {
+        const view = LikeC4Views[viewId];
+        if (!view) {
+            throw new Error(\`LikeC4View NotFound: "\${viewId}"\`);
+        }
+        return createElement(LikeC4Diagram, { view: view, ...props });
+    }
+    export function EmbeddedLikeC4View({ viewId, ...props }) {
+        return createElement(EmbeddedLikeC4Diagram, { viewId: viewId, views: LikeC4Views, ...props });
+    }
+    /* prettier-ignore-end */
+  `;
+	const dts = new CompositeGeneratorNode().appendTemplate`
+    /// <reference types="react" />
+    /******************************************************************************
+     * This file was generated
+     * DO NOT EDIT MANUALLY!
+     ******************************************************************************/
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    import type { LikeC4DiagramProps, EmbeddedLikeC4DiagramProps } from "@likec4/diagram";
+    import type { LikeC4ViewId } from "./likec4-views-data";
+
+    export type LikeC4ViewProps = {
+        viewId: LikeC4ViewId;
+    } & Omit<LikeC4DiagramProps, "view">;
+
+    export declare function LikeC4View({ viewId, ...props }: LikeC4ViewProps): JSX.Element;
+
+    export type EmbeddedLikeC4ViewProps = {
+        viewId: LikeC4ViewId;
+    } & Omit<EmbeddedLikeC4DiagramProps, "viewId" | "views">;
+
+    export declare function EmbeddedLikeC4View({ viewId, ...props }: EmbeddedLikeC4ViewProps): JSX.Element;
+    /* prettier-ignore-end */
+  `;
+	return {
+		js: toString(js),
+		dts: toString(dts)
+	};
+}
+function generateIndex() {
+	const js = new CompositeGeneratorNode().appendTemplate`
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    // You are safe to edit/move these style imports,
+    // but they are required
+    import "@mantine/core/styles.css";
+    import "@likec4/diagram/style.css";
+
+    export * from "./likec4-components";
+
+    // OR with lazy loading:
+    //
+    // import { lazy } from "react";
+    // export const LikeC4View = lazy(async () => await import("./likec4-components").then(m => ({default: m.LikeC4View})));
+    // export const EmbeddedLikeC4View = lazy(async () => await import("./likec4-components").then(m => ({default: m.EmbeddedLikeC4View})));
+
+    /* prettier-ignore-end */
+  `;
+	const dts = new CompositeGeneratorNode().appendTemplate`
+    /* prettier-ignore-start */
+    /* eslint-disable */
+
+    export * from "./likec4-components";
+
+    /* prettier-ignore-end */
+  `;
+	return {
+		js: toString(js),
+		dts: toString(dts)
+	};
+}
+function generateReactTypes(model, options = {}) {
+	const { useCorePackage = false } = options;
+	invariant(!model.isParsed(), "can not generate react types for parsed model");
+	const aux = generateAux(model, options);
+	return `
+/* prettier-ignore-start */
+/* eslint-disable */
+
+/******************************************************************************
+ * This file was generated
+ * DO NOT EDIT MANUALLY!
+ ******************************************************************************/
+
+import type { PropsWithChildren } from 'react'
+import type { JSX } from 'react/jsx-runtime'
+import type { LikeC4Model } from '${useCorePackage ? "@likec4/core" : "likec4"}/model'
+import type { LayoutedView } from '${useCorePackage ? "@likec4/core/types" : "likec4/model"}'
+import type {
+  LikeC4ViewProps as GenericLikeC4ViewProps,
+  ReactLikeC4Props as GenericReactLikeC4Props
+} from 'likec4/react'
+
+${aux}
+
+declare function isLikeC4ViewId(value: unknown): value is $ViewId;
+
+declare const likec4model: LikeC4Model<$Aux>;
+declare function useLikeC4Model(): LikeC4Model<$Aux>;
+declare function useLikeC4View(viewId: $ViewId): LayoutedView<$Aux>;
+
+declare function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element;
+
+type IconRendererProps = {
+  node: {
+    id: string
+    title: string
+    icon?: string | undefined
+  }
+}
+declare function RenderIcon(props: IconRendererProps): JSX.Element;
+
+type LikeC4ViewProps = GenericLikeC4ViewProps<$Aux>;
+declare function LikeC4View({viewId, ...props}: LikeC4ViewProps): JSX.Element;
+
+type ReactLikeC4Props = GenericReactLikeC4Props<$Aux>
+declare function ReactLikeC4({viewId, ...props}: ReactLikeC4Props): JSX.Element;
+
+export {
+  type LikeC4ViewProps,
+  type ReactLikeC4Props,
+  isLikeC4ViewId,
+  useLikeC4Model,
+  useLikeC4View,
+  likec4model,
+  LikeC4ModelProvider,
+  LikeC4View,
+  RenderIcon,
+  ReactLikeC4
+}
+/* prettier-ignore-end */
+`.trimStart();
+}
+export { generateD2, generateDrawio, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs, parseDrawioToLikeC4 };