@likec4/language-server 1.14.0 → 1.15.1

package/src/generated-lib/icons.ts

@@ -342,7 +342,6 @@ export const LibIcons: string = `likec4lib { icons {
   azure:arc-data-services
   azure:arc-kubernetes
   azure:arc-machines
-  azure:arc-postgre-sql
   azure:arc-sql-managed-instance
   azure:arc-sql-server
   azure:atm-multistack

package/src/like-c4.langium

@@ -197,7 +197,7 @@ MetadataAttribute:
 ModelViews:
   name='views' '{' (
       views+=LikeC4ViewRule |
-      styles+=ViewRuleStyle
+      styles+=ViewRuleStyleOrGlobalRef
     )*
   '}';
 
@@ -267,15 +267,27 @@ ViewLayoutDirection returns string:
 
 ViewRule:
   ViewRulePredicate |
-  ViewRuleStyle |
-  ViewRuleGlobalStyle |
+  ViewRuleGroup |
+  ViewRuleStyleOrGlobalRef |
   ViewRuleAutoLayout
 ;
 
+ViewRuleGroup:
+  'group' title=String? '{'
+    props+=(
+      ColorProperty |
+      BorderProperty |
+      OpacityProperty
+    )*
+    groupRules+=(
+      ViewRulePredicate |
+      ViewRuleGroup
+    )*
+  '}';
+
 DynamicViewRule:
   DynamicViewIncludePredicate |
-  ViewRuleStyle |
-  ViewRuleGlobalStyle |
+  ViewRuleStyleOrGlobalRef |
   ViewRuleAutoLayout
 ;
 
@@ -444,7 +456,10 @@ ViewRuleStyle:
   '}';
 
 ViewRuleGlobalStyle:
-  'global' 'style' style=[GlobalStyle];
+  'global' 'style' style=[GlobalStyleId];
+
+ViewRuleStyleOrGlobalRef:
+  ViewRuleStyle | ViewRuleGlobalStyle;
 
 ViewRuleAutoLayout:
   'autoLayout' direction=ViewLayoutDirection (
@@ -491,18 +506,26 @@ RelationNavigateToProperty:
 Globals:
   name='global' '{'
     (
-      styles+=GlobalStyle*
+      styles+=(GlobalStyle | GlobalStyleGroup)*
     )*
   '}';
 
+GlobalStyleId:
+  name=IdTerminal;
+
 GlobalStyle:
-  'style' name=IdTerminal target=ElementExpressionsIterator '{'
+  'style' id=GlobalStyleId target=ElementExpressionsIterator '{'
     props+=(
       StyleProperty |
       NotationProperty
     )*
   '}';
 
+GlobalStyleGroup:
+  'styleGroup' id=GlobalStyleId '{'
+    styles+=ViewRuleStyle*
+  '}';
+
 // Common properties -------------------------------------
 
 LinkProperty:
@@ -593,7 +616,7 @@ CustomColorId returns string:
   IdTerminal | ElementShape | ArrowType | LineOptions | 'element' | 'model';
 
 Id returns string:
-  IdTerminal | ElementShape | ThemeColor | ArrowType | LineOptions | 'element' | 'model';
+  IdTerminal | ElementShape | ThemeColor | ArrowType | LineOptions | 'element' | 'model' | 'group';
 
 fragment EqOperator:
   (

package/src/lsp/CompletionProvider.ts

@@ -1,11 +1,13 @@
-import { type GrammarAST, type MaybePromise } from 'langium'
+import { AstUtils, type GrammarAST, type MaybePromise } from 'langium'
 import {
   type CompletionAcceptor,
   type CompletionContext,
   type CompletionProviderOptions,
   DefaultCompletionProvider
 } from 'langium/lsp'
+import { anyPass } from 'remeda'
 import { CompletionItemKind, InsertTextFormat } from 'vscode-languageserver-types'
+import { ast } from '../ast'
 
 export class LikeC4CompletionProvider extends DefaultCompletionProvider {
   override readonly completionOptions = {
@@ -20,7 +22,15 @@ export class LikeC4CompletionProvider extends DefaultCompletionProvider {
     if (!this.filterKeyword(context, keyword)) {
       return
     }
-    if (['views', 'specification', 'model'].includes(keyword.value)) {
+    if (['title', 'description', 'technology'].includes(keyword.value)) {
+      return acceptor(context, {
+        label: keyword.value,
+        kind: CompletionItemKind.Property,
+        insertTextFormat: InsertTextFormat.Snippet,
+        insertText: `${keyword.value} '\${0}'`
+      })
+    }
+    if (['views', 'specification', 'model', 'with'].includes(keyword.value)) {
       return acceptor(context, {
         label: keyword.value,
         detail: `Insert ${keyword.value} block`,
@@ -29,6 +39,19 @@ export class LikeC4CompletionProvider extends DefaultCompletionProvider {
         insertText: `${keyword.value} {\n\t$0\n}`
       })
     }
+    if (keyword.value === 'group') {
+      return acceptor(context, {
+        label: keyword.value,
+        detail: `Insert group block`,
+        kind: CompletionItemKind.Class,
+        insertTextFormat: InsertTextFormat.Snippet,
+        insertText: [
+          'group \'${1:Title}\' {',
+          '\t$0',
+          '}'
+        ].join('\n')
+      })
+    }
     if (keyword.value === 'dynamic') {
       return acceptor(context, {
         label: keyword.value,
@@ -44,6 +67,51 @@ export class LikeC4CompletionProvider extends DefaultCompletionProvider {
         ].join('\n')
       })
     }
+    if (keyword.value === 'style' && context.node) {
+      if (AstUtils.hasContainerOfType(context.node, ast.isGlobalStyle)) {
+        return acceptor(context, {
+          label: keyword.value,
+          detail: `Insert ${keyword.value} block`,
+          kind: CompletionItemKind.Module,
+          insertTextFormat: InsertTextFormat.Snippet,
+          insertText: `${keyword.value} \${1:name} \${2:*} {\n\t\${3|color,shape,border,opacity,icon|} \$0\n}`
+        })
+      }
+      if (AstUtils.hasContainerOfType(context.node, anyPass([ast.isModelViews, ast.isGlobalStyleGroup]))) {
+        return acceptor(context, {
+          label: keyword.value,
+          detail: `Insert ${keyword.value} block`,
+          kind: CompletionItemKind.Module,
+          insertTextFormat: InsertTextFormat.Snippet,
+          insertText: `${keyword.value} \${1:*} {\n\t\${2|color,shape,border,opacity,icon|} \$0\n}`
+        })
+      }
+      return acceptor(context, {
+        label: keyword.value,
+        detail: `Insert ${keyword.value} block`,
+        kind: CompletionItemKind.Module,
+        insertTextFormat: InsertTextFormat.Snippet,
+        insertText: `${keyword.value} {\n\t\${1|color,shape,border,opacity,icon|} \$0\n}`
+      })
+    }
+    if (keyword.value === 'extend') {
+      return acceptor(context, {
+        label: keyword.value,
+        detail: `Extend another view`,
+        kind: CompletionItemKind.Class,
+        insertTextFormat: InsertTextFormat.Snippet,
+        insertText: 'extend ${1:element} {\n\t$0\n}'
+      })
+    }
+
+    if (keyword.value === 'autoLayout') {
+      return acceptor(context, {
+        label: keyword.value,
+        kind: CompletionItemKind.Class,
+        insertTextFormat: InsertTextFormat.Snippet,
+        insertText: 'autoLayout ${1|TopBottom,BottomTop,LeftRight,RightLeft|}$0'
+      })
+    }
     acceptor(context, {
       label: keyword.value,
       kind: this.getKeywordCompletionItemKind(keyword),

package/src/lsp/SemanticTokenProvider.ts

@@ -68,7 +68,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
           SemanticTokenModifiers.readonly
         ]
       })
-      return
+      return 'prune'
     }
     if (ast.isWhereRelationKind(node) && isTruthy(node.value)) {
       acceptor({
@@ -97,6 +97,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         type: SemanticTokenTypes.type,
         modifier: [SemanticTokenModifiers.definition]
       })
+      return 'prune'
     }
     if (ast.isElementTagExpression(node) && isTruthy(node.tag)) {
       acceptor({
@@ -105,6 +106,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         type: SemanticTokenTypes.type,
         modifier: [SemanticTokenModifiers.definition]
       })
+      return 'prune'
     }
     if (ast.isElementRef(node) || ast.isFqnElementRef(node)) {
       acceptor({

package/src/model/model-builder.ts

@@ -46,7 +46,6 @@ import { isParsedLikeC4LangiumDocument } from '../ast'
 import { logError, logger, logWarnError } from '../logger'
 import { computeDynamicView, computeView, LikeC4ModelGraph } from '../model-graph'
 import type { LikeC4Services } from '../module'
-import { printDocs } from '../utils/printDocs'
 import { assignNavigateTo, resolveGlobalRules, resolveRelativePaths, resolveRulesExtendedViews } from '../view-utils'
 
 function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[]): c4.ParsedLikeC4Model {
@@ -256,18 +255,23 @@ function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[
 
       return {
         ...model,
+        customColorDefinitions,
         tags,
         links,
         docUri,
         description,
         title,
-        id,
-        customColorDefinitions
+        id
       }
     }
   }
 
-  const parsedViews = docs.flatMap(d => map(d.c4Views, toC4View(d)))
+  const parsedViews = pipe(
+    docs,
+    flatMap(d => map(d.c4Views, toC4View(d))),
+    // Resolve relative paths and sort by
+    resolveRelativePaths
+  )
   // Add index view if not present
   if (!parsedViews.some(v => v.id === 'index')) {
     parsedViews.unshift({
@@ -292,7 +296,6 @@ function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[
 
   const views = pipe(
     parsedViews,
-    resolveRelativePaths,
     indexBy(prop('id')),
     resolveRulesExtendedViews
   )
@@ -363,7 +366,7 @@ export class LikeC4ModelBuilder {
         logger.debug('[ModelBuilder] No documents to build model from')
         return null
       }
-      logger.debug(`[ModelBuilder] onValidated (${docs.length} docs)`)
+      logger.debug(`[ModelBuilder] buildModel (${docs.length} docs)`)
       return buildModel(this.services, docs)
     })
   }
@@ -396,7 +399,10 @@ export class LikeC4ModelBuilder {
 
       const allViews = [] as c4.ComputedView[]
       for (const view of values(model.views)) {
-        const result = isElementView(view) ? computeView(view, index) : computeDynamicView(view, index)
+        const resolvedView = resolveGlobalRules(view, model.globals.styles)
+        const result = isElementView(resolvedView)
+          ? computeView(resolvedView, index)
+          : computeDynamicView(resolvedView, index)
         if (!result.isSuccess) {
           logWarnError(result.error)
           continue

package/src/model/model-parser.ts

@@ -30,7 +30,7 @@ import {
   ViewOps
 } from '../ast'
 import { elementRef, getFqnElementRef } from '../elementRef'
-import { type NotationProperty } from '../generated/ast'
+import { isGlobalStyle, isGlobalStyleGroup, type NotationProperty } from '../generated/ast'
 import { logError, logger, logWarnError } from '../logger'
 import type { LikeC4Services } from '../module'
 import { stringHash } from '../utils'
@@ -291,7 +291,7 @@ export class LikeC4ModelParser {
     const styles = globals.flatMap(r => r.styles.filter(isValid))
     for (const style of styles) {
       try {
-        const globalStyleId = style.name as c4.GlobalStyleID
+        const globalStyleId = style.id.name as c4.GlobalStyleID
         if (!isTruthy(globalStyleId)) {
           continue
         }
@@ -299,15 +299,30 @@ export class LikeC4ModelParser {
           logger.warn(`Global style named "${globalStyleId}" is already defined`)
           continue
         }
-        c4Globals.styles[globalStyleId] = [
-          this.parseGlobalStyle(style, isValid)
-        ]
+
+        const styles = this.parseGlobalStyleOrGroup(style, isValid)
+        if (styles.length > 0) {
+          c4Globals.styles[globalStyleId] = styles as c4.NonEmptyArray<c4.ViewRuleStyle>
+        }
       } catch (e) {
         logWarnError(e)
       }
     }
   }
 
+  private parseGlobalStyleOrGroup(
+    astRule: ast.GlobalStyle | ast.GlobalStyleGroup,
+    isValid: IsValidFn
+  ): c4.ViewRuleStyle[] {
+    if (ast.isGlobalStyle(astRule)) {
+      return [this.parseGlobalStyle(astRule, isValid)]
+    }
+    if (ast.isGlobalStyleGroup(astRule)) {
+      return astRule.styles.map(s => this.parseViewRuleStyle(s, isValid))
+    }
+    nonexhaustive(astRule)
+  }
+
   private parseGlobalStyle(astRule: ast.GlobalStyle, isValid: IsValidFn): c4.ViewRuleStyle {
     const styleProps = astRule.props.filter(ast.isStyleProperty)
     const targets = astRule.target
@@ -319,7 +334,7 @@ export class LikeC4ModelParser {
     const viewBlocks = doc.parseResult.value.views.filter(v => isValid(v))
     for (const viewBlock of viewBlocks) {
       const localStyles = viewBlock.styles
-        .flatMap(s => this.parseViewRuleStyle(s, isValid))
+        .flatMap(s => this.parseViewRuleStyleOrGlobalRef(s, isValid))
       const stylesToApply = localStyles
 
       for (const view of viewBlock.views) {
@@ -530,8 +545,11 @@ export class LikeC4ModelParser {
 
   private parseRelationPredicate(astNode: ast.RelationPredicate, _isValid: IsValidFn): c4.RelationPredicateExpression {
     if (ast.isRelationPredicateWith(astNode)) {
-      const subject = ast.isRelationPredicateWhere(astNode.subject) ? astNode.subject.subject : astNode.subject
-      return this.parseRelationPredicateWith(astNode, subject)
+      let relation = ast.isRelationPredicateWhere(astNode.subject)
+        ? this.parseRelationPredicateWhere(astNode.subject)
+        : this.parseRelationExpr(astNode.subject)
+
+      return this.parseRelationPredicateWith(astNode, relation)
     }
     if (ast.isRelationPredicateWhere(astNode)) {
       return this.parseRelationPredicateWhere(astNode)
@@ -558,9 +576,8 @@ export class LikeC4ModelParser {
 
   private parseRelationPredicateWith(
     astNode: ast.RelationPredicateWith,
-    subject: ast.RelationExpression
+    relation: c4.RelationExpression | c4.RelationWhereExpr
   ): c4.CustomRelationExpr {
-    const relation = this.parseRelationExpr(subject)
     const props = astNode.custom?.props ?? []
     return props.reduce(
       (acc, prop) => {
@@ -636,12 +653,22 @@ export class LikeC4ModelParser {
     if (ast.isViewRulePredicate(astRule)) {
       return this.parseViewRulePredicate(astRule, isValid)
     }
-    if (ast.isViewRuleStyle(astRule)) {
-      return this.parseViewRuleStyle(astRule, isValid)
+    if (ast.isViewRuleStyleOrGlobalRef(astRule)) {
+      return this.parseViewRuleStyleOrGlobalRef(astRule, isValid)
     }
     if (ast.isViewRuleAutoLayout(astRule)) {
       return toAutoLayout(astRule)
     }
+    if (ast.isViewRuleGroup(astRule)) {
+      return this.parseViewRuleGroup(astRule, isValid)
+    }
+    nonexhaustive(astRule)
+  }
+
+  private parseViewRuleStyleOrGlobalRef(astRule: ast.ViewRuleStyleOrGlobalRef, isValid: IsValidFn): c4.ViewRuleStyleOrGlobalRef {
+    if (ast.isViewRuleStyle(astRule)) {
+      return this.parseViewRuleStyle(astRule, isValid)
+    }
     if (ast.isViewRuleGlobalStyle(astRule)) {
       return this.parseViewRuleGlobalStyle(astRule, isValid)
     }
@@ -655,6 +682,33 @@ export class LikeC4ModelParser {
     return this.parseRuleStyle(styleProps, targets, isValid, notation)
   }
 
+  private parseViewRuleGroup(astNode: ast.ViewRuleGroup, _isValid: IsValidFn): c4.ViewRuleGroup {
+    const groupRules = [] as c4.ViewRuleGroup['groupRules']
+    for (const rule of astNode.groupRules) {
+      try {
+        if (!_isValid(rule)) {
+          continue
+        }
+        if (ast.isViewRulePredicate(rule)) {
+          groupRules.push(this.parseViewRulePredicate(rule, _isValid))
+          continue
+        }
+        if (ast.isViewRuleGroup(rule)) {
+          groupRules.push(this.parseViewRuleGroup(rule, _isValid))
+          continue
+        }
+        nonexhaustive(rule)
+      } catch (e) {
+        logWarnError(e)
+      }
+    }
+    return {
+      title: toSingleLine(astNode.title) ?? null,
+      groupRules,
+      ...toElementStyle(astNode.props, _isValid)
+    }
+  }
+
   private parseRuleStyle(
     styleProperties: ast.StyleProperty[],
     elementExpressionsIterator: ast.ElementExpressionsIterator,
@@ -673,7 +727,7 @@ export class LikeC4ModelParser {
     }
   }
 
-  private parseViewRuleGlobalStyle(astRule: ast.ViewRuleGlobalStyle, isValid: IsValidFn): c4.ViewRuleGlobalStyle {
+  private parseViewRuleGlobalStyle(astRule: ast.ViewRuleGlobalStyle, _isValid: IsValidFn): c4.ViewRuleGlobalStyle {
     return {
       styleId: astRule.style.$refText as c4.GlobalStyleID
     }
@@ -777,7 +831,7 @@ export class LikeC4ModelParser {
 
   private parseElementView(
     astNode: ast.ElementView,
-    additionalStyles: c4.ViewRuleStyle[],
+    additionalStyles: c4.ViewRuleStyleOrGlobalRef[],
     isValid: IsValidFn
   ): ParsedAstElementView {
     const body = astNode.body
@@ -849,7 +903,7 @@ export class LikeC4ModelParser {
 
   private parseDynamicElementView(
     astNode: ast.DynamicView,
-    additionalStyles: c4.ViewRuleStyle[],
+    additionalStyles: c4.ViewRuleStyleOrGlobalRef[],
     isValid: IsValidFn
   ): ParsedAstDynamicView {
     const body = astNode.body
@@ -917,15 +971,12 @@ export class LikeC4ModelParser {
     if (ast.isDynamicViewIncludePredicate(astRule)) {
       return this.parseDynamicViewIncludePredicate(astRule, isValid)
     }
-    if (ast.isViewRuleStyle(astRule)) {
-      return this.parseViewRuleStyle(astRule, isValid)
+    if (ast.isViewRuleStyleOrGlobalRef(astRule)) {
+      return this.parseViewRuleStyleOrGlobalRef(astRule, isValid)
     }
     if (ast.isViewRuleAutoLayout(astRule)) {
       return toAutoLayout(astRule)
     }
-    if (ast.isViewRuleGlobalStyle(astRule)) {
-      return this.parseViewRuleGlobalStyle(astRule, isValid)
-    }
     nonexhaustive(astRule)
   }
 

package/src/model-graph/compute-view/__test__/fixture.ts

@@ -11,8 +11,16 @@ import {
   type ElementWhereExpr,
   type Expression as C4Expression,
   type Fqn,
+  type IncomingExpr as C4IncomingExpr,
+  type InOutExpr as C4InOutExpr,
+  isElementRef,
+  isElementWhere,
+  isRelationExpression,
+  isRelationWhere,
   type NonEmptyArray,
+  type OutgoingExpr as C4OutgoingExpr,
   type Relation,
+  type RelationExpr as C4RelationExpr,
   type RelationID,
   type RelationshipArrowType,
   type RelationshipLineType,
@@ -20,6 +28,7 @@ import {
   type Tag,
   type ViewID,
   type ViewRule,
+  type ViewRuleGroup,
   type ViewRulePredicate,
   type ViewRuleStyle,
   type WhereOperator
@@ -362,8 +371,6 @@ export type Expression =
   | IncomingExpr
   | OutgoingExpr
   | RelationExpr
-  | ElementWhereExpr
-  | RelationWhereExpr
 
 export function $custom(
   expr: ElementRefExpr,
@@ -411,6 +418,49 @@ export function $where(
   }
 }
 
+export function $inout(
+  expr: InOutExpr | C4ElementExpression
+): C4InOutExpr {
+  const innerExpression = !isString(expr)
+    ? expr as C4Expression
+    : $expr(expr.replace(/->/g, '').trim() as ElementRefExpr) as any
+
+  return { inout: innerExpression }
+}
+
+export function $incoming(
+  expr: IncomingExpr | C4ElementExpression
+): C4IncomingExpr {
+  const innerExpression = !isString(expr)
+    ? expr as C4Expression
+    : $expr(expr.replace('-> ', '') as ElementRefExpr) as any
+
+  return { incoming: innerExpression }
+}
+
+export function $outgoing(
+  expr: OutgoingExpr | C4ElementExpression
+): C4OutgoingExpr {
+  const innerExpression = !isString(expr)
+    ? expr as C4Expression
+    : $expr(expr.replace(' ->', '') as ElementRefExpr) as any
+
+  return { outgoing: innerExpression }
+}
+
+export function $relation(
+  expr: RelationExpr
+): C4RelationExpr {
+  const [source, target] = expr.split(/ -> | <-> /)
+  const isBidirectional = expr.includes(' <-> ')
+
+  return {
+    source: $expr(source as ElementRefExpr) as any,
+    target: $expr(target as ElementRefExpr) as any,
+    ...(isBidirectional && { isBidirectional })
+  }
+}
+
 export function $expr(expr: Expression | C4Expression): C4Expression {
   if (!isString(expr)) {
     return expr as C4Expression
@@ -419,34 +469,13 @@ export function $expr(expr: Expression | C4Expression): C4Expression {
     return { wildcard: true }
   }
   if (expr.startsWith('->')) {
-    if (expr.endsWith('->')) {
-      return {
-        inout: $expr(expr.replace(/->/g, '').trim() as ElementRefExpr) as any
-      }
-    }
-    return {
-      incoming: $expr(expr.replace('-> ', '') as ElementRefExpr) as any
-    }
+    return expr.endsWith('->') ? $inout(expr as InOutExpr) : $incoming(expr as IncomingExpr)
   }
   if (expr.endsWith(' ->')) {
-    return {
-      outgoing: $expr(expr.replace(' ->', '') as ElementRefExpr) as any
-    }
-  }
-  if (expr.includes(' <-> ')) {
-    const [source, target] = expr.split(' <-> ')
-    return {
-      source: $expr(source as ElementRefExpr) as any,
-      target: $expr(target as ElementRefExpr) as any,
-      isBidirectional: true
-    }
+    return $outgoing(expr as OutgoingExpr)
   }
-  if (expr.includes(' -> ')) {
-    const [source, target] = expr.split(' -> ')
-    return {
-      source: $expr(source as ElementRefExpr) as any,
-      target: $expr(target as ElementRefExpr) as any
-    }
+  if (expr.includes(' -> ') || expr.includes(' <-> ')) {
+    return $relation(expr as RelationExpr)
   }
   if (expr.endsWith('._')) {
     return {
@@ -465,9 +494,41 @@ export function $expr(expr: Expression | C4Expression): C4Expression {
   }
 }
 
-export function $include(expr: Expression | C4Expression): ViewRulePredicate {
+type CustomProps = {
+  where?: WhereOperator<TestTag, string>
+  with?: {
+    title?: string
+    description?: string
+    technology?: string
+    shape?: ElementShape
+    color?: Color
+    border?: BorderStyle
+    icon?: string
+    opacity?: number
+    navigateTo?: string
+  } & Omit<C4CustomRelationExpr['customRelation'], 'relation' | 'navigateTo'>
+}
+export function $include(expr: Expression | C4Expression, props?: CustomProps): ViewRulePredicate {
+  let _expr = props?.where ? $where(expr, props.where) : $expr(expr)
+  if (props?.with) {
+    if (isRelationExpression(_expr) || isRelationWhere(_expr)) {
+      _expr = {
+        customRelation: {
+          relation: _expr,
+          ...props.with as any
+        }
+      }
+    } else if (isElementRef(_expr) || isElementWhere(_expr)) {
+      _expr = {
+        custom: {
+          expr: _expr,
+          ...props.with as any
+        }
+      }
+    }
+  }
   return {
-    include: [$expr(expr)]
+    include: [_expr]
   }
 }
 export function $exclude(expr: Expression | C4Expression): ViewRulePredicate {
@@ -475,6 +536,12 @@ export function $exclude(expr: Expression | C4Expression): ViewRulePredicate {
     exclude: [$expr(expr)]
   }
 }
+export function $group(groupRules: ViewRuleGroup['groupRules']): ViewRuleGroup {
+  return {
+    title: null,
+    groupRules
+  }
+}
 
 export function $style(element: ElementRefExpr, style: ViewRuleStyle['style']): ViewRuleStyle {
   return {