@likec4/generators 1.41.0 → 1.42.0

package/dist/model/generate-aux.d.ts

@@ -1,4 +1,4 @@
-import { type AnyLikeC4Model } from '@likec4/core/model';
+import type { AnyLikeC4Model } from '@likec4/core/model';
 export declare function generateAux(model: AnyLikeC4Model, options?: {
     useCorePackage?: boolean;
 }): string;

package/dist/puml/generate-puml.d.ts

@@ -1,2 +1,3 @@
-import type { aux, LikeC4ViewModel } from '@likec4/core/model';
+import type { LikeC4ViewModel } from '@likec4/core/model';
+import type { aux } from '@likec4/core/types';
 export declare function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>): any;

package/dist/puml/generate-puml.js

@@ -1,6 +1,4 @@
-import {
-  RichText
-} from "@likec4/core/types";
+import { RichText } from "@likec4/core/types";
 import { CompositeGeneratorNode, joinToNode, NL, toString } from "langium/generate";
 import { isNullish as isNil } from "remeda";
 const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
@@ -9,41 +7,10 @@ const nodeName = (node) => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
 };
 const pumlColor = (color, customColorProvider, defaultColor = "#3b82f6") => {
-  switch (color) {
-    case "blue":
-    case "primary": {
-      return "#3b82f6";
-    }
-    case "amber": {
-      return "#a35829";
-    }
-    case "gray": {
-      return "#737373";
-    }
-    case "green": {
-      return "#428a4f";
-    }
-    case "indigo": {
-      return "#6366f1";
-    }
-    case "slate":
-    case "muted": {
-      return "#64748b";
-    }
-    case "red": {
-      return "#ac4d39";
-    }
-    case "sky":
-    case "secondary": {
-      return "#0284c7";
-    }
-    case null:
-    case void 0: {
-      return defaultColor;
-    }
-    default:
-      return customColorProvider(color) || color;
+  if (color) {
+    return customColorProvider(color) ?? defaultColor;
   }
+  return defaultColor;
 };
 const pumlDirection = ({ autoLayout }) => {
   switch (autoLayout.direction) {
@@ -83,11 +50,10 @@ const pumlShape = ({ shape }) => {
 const escapeLabel = (label) => isNil(label) ? null : JSON.stringify(label).slice(1, -1);
 export function generatePuml(viewmodel) {
   const view = viewmodel.$view;
-  const customColorDefinitions = viewmodel.$model.specification.customColors ?? {};
+  const colors = viewmodel.$model.$styles.theme.colors;
   const { nodes, edges } = view;
-  const customColors = new Map(Object.entries(customColorDefinitions));
-  const elemntColorProvider = (key) => (colorKey) => customColors.get(colorKey)?.elements[key];
-  const relationshipsColorProvider = (key) => (colorKey) => customColors.get(colorKey)?.relationships[key];
+  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 "', view.title || view.id, '"', NL).append(pumlDirection(view), " direction", NL);
@@ -104,7 +70,7 @@ export function generatePuml(viewmodel) {
     return new CompositeGeneratorNode().append("skinparam ", shape, "<<", fqn, ">>", "{", NL).indent({
       indentedChildren: (indent) => indent.append("BackgroundColor ", pumlColor(node.color, elemntColorProvider("fill")), NL).append(
         "FontColor ",
-        customColors.has(node.color) ? pumlColor(node.color, elemntColorProvider("hiContrast")) : "#FFFFFF",
+        pumlColor(node.color, elemntColorProvider("hiContrast"), "#FFFFFF"),
         NL
       ).append("BorderColor ", pumlColor(node.color, elemntColorProvider("stroke")), NL),
       indentation: 2
@@ -148,7 +114,7 @@ export function generatePuml(viewmodel) {
   const printEdge = (edge) => {
     const tech = escapeLabel(edge.technology) || "";
     const label = escapeLabel(edge.label) || "";
-    const color = pumlColor(edge.color, relationshipsColorProvider("lineColor"), "#777777");
+    const color = pumlColor(edge.color, relationshipsColorProvider("line"), "#777777");
     const colorTag = (color2) => `<color:${color2}>`;
     return new CompositeGeneratorNode().append(names.get(edge.source), " .[", color, ",thickness=2].> ", names.get(edge.target)).appendIf(!!(label || tech), ' : "', colorTag(color)).appendIf(!!label, label, colorTag(color)).appendIf(!!(label && tech), "\\n").appendIf(!!tech, colorTag(color), "<size:8>[", tech, "]</size>").appendIf(!!(label || tech), '"').append(NL);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -38,22 +38,25 @@
   "dependencies": {
     "json5": "^2.2.3",
     "langium": "3.5.0",
-    "remeda": "^2.30.0",
-    "@likec4/core": "1.41.0"
+    "remeda": "^2.31.1",
+    "@likec4/core": "1.42.0"
   },
   "devDependencies": {
     "@types/node": "~20.19.11",
     "typescript": "5.9.2",
     "unbuild": "3.5.0",
     "vitest": "3.2.4",
-    "@likec4/tsconfig": "1.41.0"
+    "@likec4/tsconfig": "1.42.0",
+    "@likec4/devops": "1.42.0"
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",
     "build": "unbuild",
     "lint": "run -T eslint src/ --fix",
-    "clean": "pnpm rimraf dist lib",
+    "clean": "likec4ops clean",
     "test": "vitest run --no-isolate",
     "test:watch": "vitest"
-  }
+  },
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js"
 }

package/src/model/generate-aux.ts

@@ -1,4 +1,4 @@
-import { type AnyLikeC4Model } from '@likec4/core/model'
+import type { AnyLikeC4Model } from '@likec4/core/model'
 import {
   compareNatural,
   sortNaturalByFqn,

package/src/puml/generate-puml.ts

@@ -1,15 +1,17 @@
-import type { aux, LikeC4ViewModel } from '@likec4/core/model'
-import {
-  type ComputedEdge,
-  type ComputedNode,
-  type ElementThemeColorValues,
-  type KeysOf,
-  type NodeId,
-  type ProcessedView,
-  type RelationshipThemeColorValues,
-  type ThemeColorValues,
-  RichText,
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type {
+  aux,
+  Color,
+  ComputedEdge,
+  ComputedNode,
+  ElementColorValues,
+  KeysOf,
+  NodeId,
+  ProcessedView,
+  RelationshipColorValues,
+  ThemeColor,
 } from '@likec4/core/types'
+import { RichText } from '@likec4/core/types'
 import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
 import { isNullish as isNil } from 'remeda'
 
@@ -22,45 +24,14 @@ const nodeName = (node: ComputedNode): string => {
 }
 
 const pumlColor = (
-  color: string | undefined,
-  customColorProvider: (colorKey: string) => string | undefined,
+  color: Color | undefined,
+  customColorProvider: (colorKey: Color) => string | undefined,
   defaultColor: string = '#3b82f6',
 ) => {
-  switch (color) {
-    case 'blue':
-    case 'primary': {
-      return '#3b82f6'
-    }
-    case 'amber': {
-      return '#a35829'
-    }
-    case 'gray': {
-      return '#737373'
-    }
-    case 'green': {
-      return '#428a4f'
-    }
-    case 'indigo': {
-      return '#6366f1'
-    }
-    case 'slate':
-    case 'muted': {
-      return '#64748b'
-    }
-    case 'red': {
-      return '#ac4d39'
-    }
-    case 'sky':
-    case 'secondary': {
-      return '#0284c7'
-    }
-    case null:
-    case undefined: {
-      return defaultColor
-    }
-    default:
-      return customColorProvider(color) || color
+  if (color) {
+    return customColorProvider(color) ?? defaultColor
   }
+  return defaultColor
 }
 
 const pumlDirection = ({ autoLayout }: ProcessedView) => {
@@ -104,13 +75,14 @@ const escapeLabel = (label: string | null | undefined) => isNil(label) ? null :
 
 export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   const view = viewmodel.$view
-  const customColorDefinitions = viewmodel.$model.specification.customColors ?? {}
+  const colors = viewmodel.$model.$styles.theme.colors
   const { nodes, edges } = view
-  const customColors = new Map<string, ThemeColorValues>(Object.entries(customColorDefinitions))
-  const elemntColorProvider = (key: KeysOf<ElementThemeColorValues>) => (colorKey: string) =>
-    customColors.get(colorKey)?.elements[key]
-  const relationshipsColorProvider = (key: KeysOf<RelationshipThemeColorValues>) => (colorKey: string) =>
-    customColors.get(colorKey)?.relationships[key]
+
+  const elemntColorProvider = (key: KeysOf<ElementColorValues>) => (colorKey: Color) =>
+    colorKey in colors ? colors[colorKey as ThemeColor].elements[key] : undefined
+  const relationshipsColorProvider = (key: KeysOf<RelationshipColorValues>) => (colorKey: Color) =>
+    colorKey in colors ? colors[colorKey as ThemeColor].relationships[key] : undefined
+
   const names = new Map<NodeId, string>()
 
   const printHeader = () => {
@@ -150,9 +122,7 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
             .append('BackgroundColor ', pumlColor(node.color, elemntColorProvider('fill')), NL)
             .append(
               'FontColor ',
-              customColors.has(node.color)
-                ? pumlColor(node.color, elemntColorProvider('hiContrast'))
-                : '#FFFFFF',
+              pumlColor(node.color, elemntColorProvider('hiContrast'), '#FFFFFF'),
               NL,
             )
             .append('BorderColor ', pumlColor(node.color, elemntColorProvider('stroke')), NL),
@@ -218,7 +188,7 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
     const tech = escapeLabel(edge.technology) || ''
     const label = escapeLabel(edge.label) || ''
-    const color = pumlColor(edge.color, relationshipsColorProvider('lineColor'), '#777777')
+    const color = pumlColor(edge.color, relationshipsColorProvider('line'), '#777777')
 
     const colorTag = (color: string) => `<color:${color}>`