@likec4/generators 1.46.4 → 1.48.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2025 Denis Davydkov
+Copyright (c) 2023-2026 Denis Davydkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.d.mts

@@ -0,0 +1,59 @@
+import { DiagramView } from "@likec4/core";
+import { aux } from "@likec4/core/types";
+import { AnyLikeC4Model, LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
+
+//#region src/d2/generate-d2.d.ts
+declare function generateD2(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
+//#endregion
+//#region src/mmd/generate-mmd.d.ts
+declare function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
+//#endregion
+//#region src/model/generate-likec4-model.d.ts
+declare function generateLikeC4Model(model: LikeC4Model<any>, options?: {
+  useCorePackage?: boolean;
+}): string;
+//#endregion
+//#region src/puml/generate-puml.d.ts
+declare function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
+//#endregion
+//#region src/react-next/generate-react-next.d.ts
+/**
+ * @deprecated in favor packages/likec4/src/cli/codegen/react/index.ts
+ */
+declare function generateReactNext(views: Iterable<DiagramView>): {
+  viewsData: {
+    fileName: string;
+    js: string;
+    dts: string;
+  };
+  components: {
+    js: string;
+    dts: string;
+    fileName: string;
+  };
+  index: {
+    js: string;
+    dts: string;
+  };
+};
+//#endregion
+//#region src/react/generate-react-types.d.ts
+declare function generateReactTypes(model: AnyLikeC4Model, options?: {
+  useCorePackage?: boolean;
+}): string;
+//#endregion
+//#region src/views-data-ts/generate-views-data.d.ts
+/**
+ * Generate *.js file with views data
+ */
+declare function generateViewsDataJs(diagrams: Iterable<DiagramView>): string;
+/**
+ * Generate *.ts file with views data
+ */
+declare function generateViewsDataTs(diagrams: Iterable<DiagramView>): string;
+/**
+ * Generate *.d.ts
+ */
+declare function generateViewsDataDTs(diagrams: Iterable<DiagramView>): string;
+//#endregion
+export { generateD2, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs };

package/dist/index.mjs

@@ -0,0 +1,589 @@
+import { CompositeGeneratorNode, NL, expandToNode, joinToNode, toString } from "langium/generate";
+import { isEmptyish, isNullish, keys, map, pipe, values } from "remeda";
+import { nonexhaustive } from "@likec4/core";
+import JSON5 from "json5";
+import { compareNatural, invariant, sortNaturalByFqn } from "@likec4/core/utils";
+import { RichText } from "@likec4/core/types";
+
+//#region src/d2/generate-d2.ts
+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 "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 })));
+}
+
+//#endregion
+//#region src/mmd/generate-mmd.ts
+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} }`;
+		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
+	}));
+}
+
+//#endregion
+//#region src/model/generate-aux.ts
+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();
+}
+
+//#endregion
+//#region src/model/generate-likec4-model.ts
+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();
+}
+
+//#endregion
+//#region src/puml/generate-puml.ts
+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 "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));
+}
+
+//#endregion
+//#region src/views-data-ts/generateViewId.ts
+function generateViewId(views) {
+	return joinToNode(views, (view) => expandToNode`${JSON5.stringify(view.id)}`, { separator: " | " });
+}
+
+//#endregion
+//#region src/views-data-ts/generate-views-data.ts
+/**
+* Generate *.js file with views data
+*/
+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);
+}
+/**
+* Generate *.ts file with views data
+*/
+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);
+}
+/**
+* Generate *.d.ts
+*/
+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);
+}
+
+//#endregion
+//#region src/react-next/generate-react-next.ts
+/**
+* @deprecated in favor packages/likec4/src/cli/codegen/react/index.ts
+*/
+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)
+	};
+}
+
+//#endregion
+//#region src/react/generate-react-types.ts
+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();
+}
+
+//#endregion
+export { generateD2, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs };