@likec4/language-server 1.0.2 → 1.1.1

package/README.md

@@ -1,5 +1,5 @@
 # `@likec4/language-server`
 
-[docs](https://likec4.dev/docs/) | [playground](https://likec4.dev/playground/) | [demo](https://template.likec4.dev/view/cloud)
+[docs](https://docs.likec4.dev/) | [playground](https://playground.likec4.dev/) | [demo](https://template.likec4.dev/view/cloud)
 
 Language Server Protocol (LSP) based on [languim](https://github.com/languim/languim) library.

package/contrib/likec4.monarch.ts

@@ -1,7 +1,7 @@
 // Monarch syntax highlighting for the likec4 language.
 export default {
     keywords: [
-        'BottomTop','LeftRight','RightLeft','TopBottom','amber','autoLayout','blue','browser','color','crow','cylinder','dashed','description','diamond','dotted','element','exclude','extend','extends','gray','green','head','icon','include','indigo','it','kind','line','link','mobile','model','muted','navigateTo','none','normal','odiamond','of','onormal','open','person','primary','queue','rectangle','red','relationship','secondary','shape','sky','slate','solid','specification','storage','style','tag','tail','technology','this','title','vee','view','views','with'
+        'BottomTop','LeftRight','RightLeft','TopBottom','amber','autoLayout','blue','border','browser','color','crow','cylinder','dashed','description','diamond','dotted','element','exclude','extend','extends','gray','green','head','icon','include','indigo','it','kind','line','link','mobile','model','muted','navigateTo','none','normal','odiamond','of','onormal','opacity','open','person','primary','queue','rectangle','red','relationship','secondary','shape','sky','slate','solid','specification','storage','style','tag','tail','technology','this','title','vee','view','views','with'
     ],
     operators: [
         '*','->','<->'
@@ -10,11 +10,6 @@ export default {
 
     tokenizer: {
         initial: [
-            { regex: /_/, action: {"token":"UNDERSCORE"} },
-            { regex: /-/, action: {"token":"DASH"} },
-            { regex: /[^\W\d_]/, action: { cases: { '@keywords': {"token":"keyword"}, '@default': {"token":"LETTER"} }} },
-            { regex: /[0-9]/, action: {"token":"DIGIT"} },
-            { regex: /[\r?\n]/, action: {"token":"NEWLINE"} },
             { regex: /\w+:\/\/\S+/, action: {"token":"URI_WITH_SCHEMA"} },
             { regex: /\.{0,2}\/[^\/]\S+/, action: {"token":"URI_RELATIVE"} },
             { regex: /\b\._/, action: {"token":"DotUnderscore"} },
@@ -26,16 +21,16 @@ export default {
             { regex: /:/, action: {"token":"Colon"} },
             { regex: /;/, action: {"token":"SemiColon"} },
             { regex: /,/, action: {"token":"Comma"} },
+            { regex: /\b\d+%/, action: {"token":"Percent"} },
             { regex: /"[^"]*"|'[^']*'/, action: {"token":"string"} },
-            { regex: /((([^\W\d_])|((_)+(([^\W\d_])|([0-9]))))(((([^\W\d_])|([0-9]))|(_))|(-))*)/, action: { cases: { '@keywords': {"token":"keyword"}, '@default': {"token":"IdTerminal"} }} },
+            { regex: /\b(_+[a-zA-Z]|[a-zA-Z])[\w_-]*/, action: { cases: { '@keywords': {"token":"keyword"}, '@default': {"token":"IdTerminal"} }} },
             { include: '@whitespace' },
             { regex: /@symbols/, action: { cases: { '@operators': {"token":"operator"}, '@default': {"token":""} }} },
         ],
         whitespace: [
-            { regex: /[^\S\r\n]/, action: {"token":"white"} },
             { regex: /\/\*/, action: {"token":"comment","next":"@comment"} },
             { regex: /\/\/[^\n\r]*/, action: {"token":"comment"} },
-            { regex: /(([\r?\n])|([^\S\r\n]))+/, action: {"token":"white"} },
+            { regex: /\s+/, action: {"token":"white"} },
         ],
         comment: [
             { regex: /[^/\*]+/, action: {"token":"comment"} },

package/contrib/likec4.tmLanguage.json

@@ -12,7 +12,7 @@
     },
     {
       "name": "keyword.control.likec4",
-      "match": "\\b(BottomTop|LeftRight|RightLeft|TopBottom|amber|autoLayout|blue|browser|color|crow|cylinder|dashed|description|diamond|dotted|element|exclude|extend|extends|gray|green|head|icon|include|indigo|it|kind|line|link|mobile|model|muted|navigateTo|none|normal|odiamond|of|onormal|open|person|primary|queue|rectangle|red|relationship|secondary|shape|sky|slate|solid|specification|storage|style|tag|tail|technology|this|title|vee|view|views|with)\\b"
+      "match": "\\b(BottomTop|LeftRight|RightLeft|TopBottom|amber|autoLayout|blue|border|browser|color|crow|cylinder|dashed|description|diamond|dotted|element|exclude|extend|extends|gray|green|head|icon|include|indigo|it|kind|line|link|mobile|model|muted|navigateTo|none|normal|odiamond|of|onormal|opacity|open|person|primary|queue|rectangle|red|relationship|secondary|shape|sky|slate|solid|specification|storage|style|tag|tail|technology|this|title|vee|view|views|with)\\b"
     },
     {
       "name": "string.quoted.double.likec4",

package/dist/ast.d.ts

@@ -15,12 +15,15 @@ declare module './generated/ast' {
         [idattr]?: c4.ViewID | undefined;
     }
 }
+type ParsedElementStyle = {
+    shape?: c4.ElementShape;
+    icon?: c4.IconUrl;
+    color?: c4.ThemeColor;
+    border?: c4.BorderStyle;
+    opacity?: number;
+};
 export interface ParsedAstSpecification {
-    kinds: Record<c4.ElementKind, {
-        shape?: c4.ElementShape;
-        color?: c4.ThemeColor;
-        icon?: c4.IconUrl;
-    }>;
+    kinds: Record<c4.ElementKind, ParsedElementStyle>;
     relationships: Record<c4.RelationshipKind, {
         color?: c4.ThemeColor;
         line?: c4.RelationshipLineType;
@@ -35,11 +38,9 @@ export interface ParsedAstElement {
     title: string;
     description?: string;
     technology?: string;
-    icon?: c4.IconUrl;
     tags?: c4.NonEmptyArray<c4.Tag>;
     links?: c4.NonEmptyArray<string>;
-    shape?: c4.ElementShape;
-    color?: c4.ThemeColor;
+    style: ParsedElementStyle;
 }
 export interface ParsedAstRelation {
     id: c4.RelationID;
@@ -101,27 +102,20 @@ export declare function isLikeC4LangiumDocument(doc: LangiumDocument): doc is Li
 export declare function isParsedLikeC4LangiumDocument(doc: LangiumDocument): doc is ParsedLikeC4LangiumDocument;
 type Guard<N extends AstNode> = (n: AstNode) => n is N;
 type Guarded<G> = G extends Guard<infer N> ? N : never;
-declare const isValidatableAstNode: (n: AstNode) => n is ast.DescedantsExpr | ast.ElementKindExpr | ast.ElementRef | ast.ElementTagExpr | ast.ExpandElementExpr | ast.WildcardExpr | ast.ElementStringProperty | ast.LinkProperty | ast.StyleProperties | ast.ExplicitRelation | ast.ImplicitRelation | ast.RelationStringProperty | ast.RelationStyleProperty | ast.ViewStringProperty | ast.ViewRuleAutoLayout | ast.ExcludePredicate | ast.IncludePredicate | ast.ViewRuleStyle | ast.CustomElementExpr | ast.InOutExpr | ast.IncomingExpr | ast.OutgoingExpr | ast.RelationExpr | ast.SpecificationRelationshipKind | ast.RelationBody | ast.ElementBody | ast.ExtendElementBody | ast.Model | ast.Element | ast.ExtendElement | ast.SpecificationRule | ast.SpecificationElementKind | ast.ElementViewBody | ast.ElementView | ast.ModelViews | ast.SpecificationTag;
+declare const isValidatableAstNode: (n: AstNode) => n is ast.DescedantsExpr | ast.ElementKindExpr | ast.ElementRef | ast.ElementTagExpr | ast.ExpandElementExpr | ast.WildcardExpr | ast.ElementStringProperty | ast.LinkProperty | ast.StyleProperties | ast.ExplicitRelation | ast.ImplicitRelation | ast.RelationStringProperty | ast.RelationStyleProperty | ast.ViewStringProperty | ast.ViewRuleAutoLayout | ast.ExcludePredicate | ast.IncludePredicate | ast.ViewRuleStyle | ast.CustomElementExpr | ast.InOutExpr | ast.IncomingExpr | ast.OutgoingExpr | ast.RelationExpr | ast.SpecificationRelationshipKind | ast.RelationBody | ast.ElementBody | ast.ExtendElementBody | ast.Model | ast.Element | ast.ExtendElement | ast.SpecificationRule | ast.CustomElementExprBody | ast.SpecificationElementKind | ast.ElementViewBody | ast.ElementView | ast.ModelViews | ast.Tags | ast.SpecificationTag;
 type ValidatableAstNode = Guarded<typeof isValidatableAstNode>;
 export declare function checksFromDiagnostics(doc: LikeC4LangiumDocument): {
     isValid: (n: ValidatableAstNode) => boolean;
-    invalidNodes: WeakSet<ast.DescedantsExpr | ast.ElementKindExpr | ast.ElementRef | ast.ElementTagExpr | ast.ExpandElementExpr | ast.WildcardExpr | ast.ElementStringProperty | ast.LinkProperty | ast.StyleProperties | ast.ExplicitRelation | ast.ImplicitRelation | ast.RelationStringProperty | ast.RelationStyleProperty | ast.ViewStringProperty | ast.ViewRuleAutoLayout | ast.ExcludePredicate | ast.IncludePredicate | ast.ViewRuleStyle | ast.CustomElementExpr | ast.InOutExpr | ast.IncomingExpr | ast.OutgoingExpr | ast.RelationExpr | ast.SpecificationRelationshipKind | ast.RelationBody | ast.ElementBody | ast.ExtendElementBody | ast.Model | ast.Element | ast.ExtendElement | ast.SpecificationRule | ast.SpecificationElementKind | ast.ElementViewBody | ast.ElementView | ast.ModelViews | ast.SpecificationTag>;
+    invalidNodes: WeakSet<ast.DescedantsExpr | ast.ElementKindExpr | ast.ElementRef | ast.ElementTagExpr | ast.ExpandElementExpr | ast.WildcardExpr | ast.ElementStringProperty | ast.LinkProperty | ast.StyleProperties | ast.ExplicitRelation | ast.ImplicitRelation | ast.RelationStringProperty | ast.RelationStyleProperty | ast.ViewStringProperty | ast.ViewRuleAutoLayout | ast.ExcludePredicate | ast.IncludePredicate | ast.ViewRuleStyle | ast.CustomElementExpr | ast.InOutExpr | ast.IncomingExpr | ast.OutgoingExpr | ast.RelationExpr | ast.SpecificationRelationshipKind | ast.RelationBody | ast.ElementBody | ast.ExtendElementBody | ast.Model | ast.Element | ast.ExtendElement | ast.SpecificationRule | ast.CustomElementExprBody | ast.SpecificationElementKind | ast.ElementViewBody | ast.ElementView | ast.ModelViews | ast.Tags | ast.SpecificationTag>;
 };
+export type ChecksFromDiagnostics = ReturnType<typeof checksFromDiagnostics>;
 export declare function streamModel(doc: LikeC4LangiumDocument): Generator<ast.Relation | ast.Element, void, unknown>;
 export declare function resolveRelationPoints(node: ast.Relation): {
     source: ast.Element;
     target: ast.Element;
 };
-export declare function toElementStyle(props?: Array<ast.StyleProperty>): {
-    color?: c4.ThemeColor;
-    shape?: c4.ElementShape;
-    icon?: c4.IconUrl;
-};
-export declare function toElementStyleExcludeDefaults(props?: ast.StyleProperties['props']): {
-    shape?: "browser" | "cylinder" | "mobile" | "person" | "queue" | "storage";
-    color?: "amber" | "blue" | "gray" | "green" | "indigo" | "muted" | "red" | "secondary" | "sky" | "slate";
-    icon?: c4.IconUrl;
-};
+export declare function parseAstOpacityProperty({ value }: ast.OpacityProperty): number;
+export declare function toElementStyle(props?: Array<ast.StyleProperty>): ParsedElementStyle;
 export declare function toRelationshipStyle(props?: ast.SpecificationRelationshipKind['props']): {
     color?: c4.ThemeColor;
     line?: c4.RelationshipLineType;

package/dist/ast.js

@@ -1,14 +1,12 @@
 import {
   DefaultArrowType,
-  DefaultElementShape,
   DefaultLineStyle,
   DefaultRelationshipColor,
-  DefaultThemeColor,
   nonexhaustive,
   RelationRefError
 } from "@likec4/core";
 import { AstUtils, DocumentState } from "langium";
-import { isNullish } from "remeda";
+import { clamp, isNullish } from "remeda";
 import { DiagnosticSeverity } from "vscode-languageserver-protocol";
 import { elementRef } from "./elementRef.js";
 import * as ast from "./generated/ast.js";
@@ -62,9 +60,9 @@ function validatableAstNodeGuards(predicates) {
   return (n) => predicates.some((p) => p(n));
 }
 const isValidatableAstNode = validatableAstNodeGuards([
-  ast.isViewRuleStyle,
+  ast.isCustomElementExprBody,
   ast.isViewRulePredicateExpr,
-  ast.isViewRulePredicate,
+  ast.isTags,
   ast.isViewRule,
   ast.isViewProperty,
   ast.isElementViewBody,
@@ -151,36 +149,43 @@ export function resolveRelationPoints(node) {
     target
   };
 }
+export function parseAstOpacityProperty({ value }) {
+  const opacity = parseFloat(value);
+  return isNaN(opacity) ? 100 : clamp(opacity, { min: 0, max: 100 });
+}
 export function toElementStyle(props) {
   const result = {};
   if (!props || props.length === 0) {
     return result;
   }
   for (const prop of props) {
-    if (ast.isColorProperty(prop)) {
-      result.color = prop.value;
-      continue;
-    }
-    if (ast.isShapeProperty(prop)) {
-      result.shape = prop.value;
-      continue;
-    }
-    if (ast.isIconProperty(prop)) {
-      result.icon = prop.value;
-      continue;
+    switch (true) {
+      case ast.isBorderProperty(prop): {
+        result.border = prop.value;
+        break;
+      }
+      case ast.isColorProperty(prop): {
+        result.color = prop.value;
+        break;
+      }
+      case ast.isShapeProperty(prop): {
+        result.shape = prop.value;
+        break;
+      }
+      case ast.isIconProperty(prop): {
+        result.icon = prop.value;
+        break;
+      }
+      case ast.isOpacityProperty(prop): {
+        result.opacity = parseAstOpacityProperty(prop);
+        break;
+      }
+      default:
+        nonexhaustive(prop.$type);
     }
-    nonexhaustive(prop);
   }
   return result;
 }
-export function toElementStyleExcludeDefaults(props) {
-  const { color, shape, ...rest } = toElementStyle(props);
-  return {
-    ...rest,
-    ...color && color !== DefaultThemeColor ? { color } : {},
-    ...shape && shape !== DefaultElementShape ? { shape } : {}
-  };
-}
 export function toRelationshipStyle(props) {
   const result = {};
   if (!props || props.length === 0) {

package/dist/generated/ast.d.ts

@@ -19,11 +19,14 @@ export declare const LikeC4Terminals: {
     Colon: RegExp;
     SemiColon: RegExp;
     Comma: RegExp;
+    Percent: RegExp;
     String: RegExp;
     IdTerminal: RegExp;
 };
 export type ArrowType = 'crow' | 'diamond' | 'none' | 'normal' | 'odiamond' | 'onormal' | 'open' | 'vee';
 export declare function isArrowType(item: unknown): item is ArrowType;
+export type BorderStyleValue = 'none' | LineOptions;
+export declare function isBorderStyleValue(item: unknown): item is BorderStyleValue;
 export type ElementExpr = DescedantsExpr | ElementKindExpr | ElementRef | ElementTagExpr | ExpandElementExpr | WildcardExpr;
 export declare const ElementExpr = "ElementExpr";
 export declare function isElementExpr(item: unknown): item is ElementExpr;
@@ -45,7 +48,7 @@ export declare function isRelationProperty(item: unknown): item is RelationPrope
 export type RelationshipStyleProperty = ArrowProperty | ColorProperty | LineProperty;
 export declare const RelationshipStyleProperty = "RelationshipStyleProperty";
 export declare function isRelationshipStyleProperty(item: unknown): item is RelationshipStyleProperty;
-export type StyleProperty = ColorProperty | IconProperty | ShapeProperty;
+export type StyleProperty = BorderProperty | ColorProperty | IconProperty | OpacityProperty | ShapeProperty;
 export declare const StyleProperty = "StyleProperty";
 export declare function isStyleProperty(item: unknown): item is StyleProperty;
 export type TagId = string;
@@ -76,6 +79,14 @@ export interface ArrowProperty extends AstNode {
 }
 export declare const ArrowProperty = "ArrowProperty";
 export declare function isArrowProperty(item: unknown): item is ArrowProperty;
+export interface BorderProperty extends AstNode {
+    readonly $container: CustomElementExprBody | StyleProperties | ViewRuleStyle;
+    readonly $type: 'BorderProperty';
+    key: 'border';
+    value: BorderStyleValue;
+}
+export declare const BorderProperty = "BorderProperty";
+export declare function isBorderProperty(item: unknown): item is BorderProperty;
 export interface ColorProperty extends AstNode {
     readonly $container: CustomElementExprBody | RelationStyleProperty | SpecificationRelationshipKind | StyleProperties | ViewRuleStyle;
     readonly $type: 'ColorProperty';
@@ -95,7 +106,7 @@ export declare function isCustomElementExpr(item: unknown): item is CustomElemen
 export interface CustomElementExprBody extends AstNode {
     readonly $container: CustomElementExpr;
     readonly $type: 'CustomElementExprBody';
-    props: Array<ColorProperty | ElementStringProperty | NavigateToProperty | ShapeProperty>;
+    props: Array<ElementStringProperty | NavigateToProperty | StyleProperty>;
 }
 export declare const CustomElementExprBody = "CustomElementExprBody";
 export declare function isCustomElementExprBody(item: unknown): item is CustomElementExprBody;
@@ -240,7 +251,7 @@ export interface FqnElementRef extends AstNode {
 export declare const FqnElementRef = "FqnElementRef";
 export declare function isFqnElementRef(item: unknown): item is FqnElementRef;
 export interface IconProperty extends AstNode {
-    readonly $container: StyleProperties | ViewRuleStyle;
+    readonly $container: CustomElementExprBody | StyleProperties | ViewRuleStyle;
     readonly $type: 'IconProperty';
     key: 'icon';
     value: Uri;
@@ -326,6 +337,14 @@ export interface NavigateToProperty extends AstNode {
 }
 export declare const NavigateToProperty = "NavigateToProperty";
 export declare function isNavigateToProperty(item: unknown): item is NavigateToProperty;
+export interface OpacityProperty extends AstNode {
+    readonly $container: CustomElementExprBody | StyleProperties | ViewRuleStyle;
+    readonly $type: 'OpacityProperty';
+    key: 'opacity';
+    value: string;
+}
+export declare const OpacityProperty = "OpacityProperty";
+export declare function isOpacityProperty(item: unknown): item is OpacityProperty;
 export interface OutgoingExpr extends AstNode {
     readonly $container: ExcludePredicate | IncludePredicate;
     readonly $type: 'OutgoingExpr';
@@ -468,6 +487,7 @@ export declare const WildcardExpr = "WildcardExpr";
 export declare function isWildcardExpr(item: unknown): item is WildcardExpr;
 export type LikeC4AstType = {
     ArrowProperty: ArrowProperty;
+    BorderProperty: BorderProperty;
     ColorProperty: ColorProperty;
     CustomElementExpr: CustomElementExpr;
     CustomElementExprBody: CustomElementExprBody;
@@ -501,6 +521,7 @@ export type LikeC4AstType = {
     Model: Model;
     ModelViews: ModelViews;
     NavigateToProperty: NavigateToProperty;
+    OpacityProperty: OpacityProperty;
     OutgoingExpr: OutgoingExpr;
     Relation: Relation;
     RelationBody: RelationBody;

package/dist/generated/ast.js

@@ -2,7 +2,7 @@ import { AbstractAstReflection } from "langium";
 export const LikeC4Terminals = {
   BLOCK_COMMENT: /\/\*[\s\S]*?\*\//,
   LINE_COMMENT: /\/\/[^\n\r]*/,
-  WS: /(([\r?\n])|([^\S\r\n]))+/,
+  WS: /\s+/,
   URI_WITH_SCHEMA: /\w+:\/\/\S+/,
   URI_RELATIVE: /\.{0,2}\/[^\/]\S+/,
   DotUnderscore: /\b\._/,
@@ -14,12 +14,16 @@ export const LikeC4Terminals = {
   Colon: /:/,
   SemiColon: /;/,
   Comma: /,/,
+  Percent: /\b\d+%/,
   String: /"[^"]*"|'[^']*'/,
-  IdTerminal: /((([^\W\d_])|((_)+(([^\W\d_])|([0-9]))))(((([^\W\d_])|([0-9]))|(_))|(-))*)/
+  IdTerminal: /\b(_+[a-zA-Z]|[a-zA-Z])[\w_-]*/
 };
 export function isArrowType(item) {
   return item === "none" || item === "normal" || item === "onormal" || item === "diamond" || item === "odiamond" || item === "crow" || item === "open" || item === "vee";
 }
+export function isBorderStyleValue(item) {
+  return isLineOptions(item) || item === "none";
+}
 export const ElementExpr = "ElementExpr";
 export function isElementExpr(item) {
   return reflection.isInstance(item, ElementExpr);
@@ -32,7 +36,7 @@ export function isElementShape(item) {
   return item === "rectangle" || item === "person" || item === "browser" || item === "mobile" || item === "cylinder" || item === "storage" || item === "queue";
 }
 export function isId(item) {
-  return isElementShape(item) || isThemeColor(item) || isArrowType(item) || isLineOptions(item) || item === "element" || item === "model" || typeof item === "string" && /((([^\W\d_])|((_)+(([^\W\d_])|([0-9]))))(((([^\W\d_])|([0-9]))|(_))|(-))*)/.test(item);
+  return isElementShape(item) || isThemeColor(item) || isArrowType(item) || isLineOptions(item) || item === "element" || item === "model" || typeof item === "string" && /\b(_+[a-zA-Z]|[a-zA-Z])[\w_-]*/.test(item);
 }
 export function isLineOptions(item) {
   return item === "solid" || item === "dashed" || item === "dotted";
@@ -85,6 +89,10 @@ export const ArrowProperty = "ArrowProperty";
 export function isArrowProperty(item) {
   return reflection.isInstance(item, ArrowProperty);
 }
+export const BorderProperty = "BorderProperty";
+export function isBorderProperty(item) {
+  return reflection.isInstance(item, BorderProperty);
+}
 export const ColorProperty = "ColorProperty";
 export function isColorProperty(item) {
   return reflection.isInstance(item, ColorProperty);
@@ -209,6 +217,10 @@ export const NavigateToProperty = "NavigateToProperty";
 export function isNavigateToProperty(item) {
   return reflection.isInstance(item, NavigateToProperty);
 }
+export const OpacityProperty = "OpacityProperty";
+export function isOpacityProperty(item) {
+  return reflection.isInstance(item, OpacityProperty);
+}
 export const OutgoingExpr = "OutgoingExpr";
 export function isOutgoingExpr(item) {
   return reflection.isInstance(item, OutgoingExpr);
@@ -283,7 +295,7 @@ export function isWildcardExpr(item) {
 }
 export class LikeC4AstReflection extends AbstractAstReflection {
   getAllTypes() {
-    return ["ArrowProperty", "ColorProperty", "CustomElementExpr", "CustomElementExprBody", "DescedantsExpr", "Element", "ElementBody", "ElementExpr", "ElementKind", "ElementKindExpr", "ElementProperty", "ElementRef", "ElementStringProperty", "ElementTagExpr", "ElementView", "ElementViewBody", "ElementViewRef", "ExcludePredicate", "ExpandElementExpr", "ExplicitRelation", "ExtendElement", "ExtendElementBody", "FqnElementRef", "IconProperty", "ImplicitRelation", "InOutExpr", "IncludePredicate", "IncomingExpr", "LikeC4Grammar", "LineProperty", "LinkProperty", "Model", "ModelViews", "NavigateToProperty", "OutgoingExpr", "Relation", "RelationBody", "RelationExpr", "RelationProperty", "RelationStringProperty", "RelationStyleProperty", "RelationshipKind", "RelationshipStyleProperty", "ShapeProperty", "SpecificationElementKind", "SpecificationRelationshipKind", "SpecificationRule", "SpecificationTag", "StyleProperties", "StyleProperty", "Tag", "Tags", "ViewProperty", "ViewRule", "ViewRuleAutoLayout", "ViewRulePredicate", "ViewRulePredicateExpr", "ViewRuleStyle", "ViewStringProperty", "WildcardExpr"];
+    return ["ArrowProperty", "BorderProperty", "ColorProperty", "CustomElementExpr", "CustomElementExprBody", "DescedantsExpr", "Element", "ElementBody", "ElementExpr", "ElementKind", "ElementKindExpr", "ElementProperty", "ElementRef", "ElementStringProperty", "ElementTagExpr", "ElementView", "ElementViewBody", "ElementViewRef", "ExcludePredicate", "ExpandElementExpr", "ExplicitRelation", "ExtendElement", "ExtendElementBody", "FqnElementRef", "IconProperty", "ImplicitRelation", "InOutExpr", "IncludePredicate", "IncomingExpr", "LikeC4Grammar", "LineProperty", "LinkProperty", "Model", "ModelViews", "NavigateToProperty", "OpacityProperty", "OutgoingExpr", "Relation", "RelationBody", "RelationExpr", "RelationProperty", "RelationStringProperty", "RelationStyleProperty", "RelationshipKind", "RelationshipStyleProperty", "ShapeProperty", "SpecificationElementKind", "SpecificationRelationshipKind", "SpecificationRule", "SpecificationTag", "StyleProperties", "StyleProperty", "Tag", "Tags", "ViewProperty", "ViewRule", "ViewRuleAutoLayout", "ViewRulePredicate", "ViewRulePredicateExpr", "ViewRuleStyle", "ViewStringProperty", "WildcardExpr"];
   }
   computeIsSubtype(subtype, supertype) {
     switch (subtype) {
@@ -291,6 +303,12 @@ export class LikeC4AstReflection extends AbstractAstReflection {
       case LineProperty: {
         return this.isSubtype(RelationshipStyleProperty, supertype);
       }
+      case BorderProperty:
+      case IconProperty:
+      case OpacityProperty:
+      case ShapeProperty: {
+        return this.isSubtype(StyleProperty, supertype);
+      }
       case ColorProperty: {
         return this.isSubtype(RelationshipStyleProperty, supertype) || this.isSubtype(StyleProperty, supertype);
       }
@@ -322,10 +340,6 @@ export class LikeC4AstReflection extends AbstractAstReflection {
       case ImplicitRelation: {
         return this.isSubtype(Relation, supertype);
       }
-      case IconProperty:
-      case ShapeProperty: {
-        return this.isSubtype(StyleProperty, supertype);
-      }
       case LinkProperty: {
         return this.isSubtype(ElementProperty, supertype) || this.isSubtype(RelationProperty, supertype) || this.isSubtype(ViewProperty, supertype);
       }
@@ -384,6 +398,15 @@ export class LikeC4AstReflection extends AbstractAstReflection {
           ]
         };
       }
+      case "BorderProperty": {
+        return {
+          name: "BorderProperty",
+          properties: [
+            { name: "key" },
+            { name: "value" }
+          ]
+        };
+      }
       case "ColorProperty": {
         return {
           name: "ColorProperty",
@@ -666,6 +689,15 @@ export class LikeC4AstReflection extends AbstractAstReflection {
           ]
         };
       }
+      case "OpacityProperty": {
+        return {
+          name: "OpacityProperty",
+          properties: [
+            { name: "key" },
+            { name: "value" }
+          ]
+        };
+      }
       case "OutgoingExpr": {
         return {
           name: "OutgoingExpr",