@likec4/core 1.34.2 → 1.36.0

package/src/model/LikeC4Model.ts

@@ -1,4 +1,4 @@
-import { entries, map, pipe, prop, sort, sortBy, values } from 'remeda'
+import { entries, hasAtLeast, map, pipe, prop, sort, sortBy, split, values } from 'remeda'
 import type {
   Any,
   Aux,
@@ -8,6 +8,7 @@ import type {
   IteratorLike,
   LayoutedLikeC4ModelData,
   LikeC4ModelDump,
+  LikeC4Project,
   ModelGlobals,
   ParsedLikeC4ModelData,
   Relationship,
@@ -17,7 +18,7 @@ import type {
 } from '../types'
 import { type ProjectId, _stage, GlobalFqn, isGlobalFqn, isOnStage, whereOperatorAsPredicate } from '../types'
 import type * as aux from '../types/_aux'
-import { compareNatural, ifilter, invariant, memoizeProp, nonNullable } from '../utils'
+import { compareNatural, compareNaturalHierarchically, ifilter, invariant, memoizeProp, nonNullable } from '../utils'
 import { ancestorsFqn, commonAncestor, parentFqn, sortParentsFirst } from '../utils/fqn'
 import { DefaultMap } from '../utils/mnemonist'
 import type {
@@ -36,9 +37,10 @@ import {
   type IncomingFilter,
   type OutgoingFilter,
   type RelationOrId,
-  getId,
 } from './types'
+import { getId, getViewFolderPath, normalizeViewPath, VIEW_FOLDERS_SEPARATOR } from './utils'
 import { LikeC4ViewModel } from './view/LikeC4ViewModel'
+import { LikeC4ViewsFolder } from './view/LikeC4ViewsFolder'
 import type { NodeModel } from './view/NodeModel'
 
 export class LikeC4Model<A extends Any = aux.Unknown> {
@@ -68,6 +70,16 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
 
   protected readonly _views = new Map<aux.ViewId<A>, LikeC4ViewModel<A>>()
 
+  protected readonly _rootViewFolder: LikeC4ViewsFolder<A>
+  protected readonly _viewFolders = new Map<string, LikeC4ViewsFolder<A>>()
+
+  protected readonly _viewFolderItems = new DefaultMap<
+    string,
+    Set<LikeC4ViewsFolder<A> | LikeC4ViewModel<A>>
+  >(
+    () => new Set(),
+  )
+
   protected readonly _allTags = new DefaultMap<
     aux.Tag<A>,
     Set<ElementModel<A> | RelationshipModel<A> | LikeC4ViewModel<A>>
@@ -108,6 +120,7 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     const {
       _stage: stage = 'layouted',
       projectId = 'unknown',
+      project,
       globals,
       imports,
       deployments,
@@ -119,6 +132,7 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     return new LikeC4Model({
       [_stage]: stage as 'layouted',
       projectId,
+      project,
       globals: {
         predicates: globals?.predicates ?? {},
         dynamicPredicates: globals?.dynamicPredicates ?? {},
@@ -165,17 +179,65 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     this.deployment = new LikeC4DeploymentModel(this)
 
     if (isOnStage($data, 'computed') || isOnStage($data, 'layouted')) {
+      const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR)
       const views = pipe(
         values($data.views as Record<string, $View<A>>),
-        sort((a, b) => compareNatural(a.title ?? 'untitled', b.title ?? 'untitled')),
+        map(view => ({
+          view,
+          path: normalizeViewPath(view.title ?? view.id),
+          folderPath: view.title && getViewFolderPath(view.title) || '',
+        })),
+        // Sort hierarchically by groups, but keep same order within groups
+        sort((a, b) => compare(a.folderPath, b.folderPath)),
       )
-      for (const view of views) {
-        const vm = new LikeC4ViewModel(this, view)
+
+      const getOrCreateFolder = (path: string) => {
+        let folder = this._viewFolders.get(path)
+        if (!folder) {
+          const segments = split(path, VIEW_FOLDERS_SEPARATOR)
+          invariant(hasAtLeast(segments, 1), `View group path "${path}" must have at least one element`)
+          let defaultView
+          // Root group has "index" as default view
+          if (path === '') {
+            defaultView = views.find(view => view.view.id === 'index')
+          } else {
+            defaultView = views.find(view => view.path === path)
+          }
+          folder = new LikeC4ViewsFolder(this, segments, defaultView?.view.id)
+          this._viewFolders.set(path, folder)
+        }
+        return folder
+      }
+
+      this._rootViewFolder = getOrCreateFolder('')
+
+      // Process view groups
+      // Sort in natural order to preserve hierarchy
+      for (const { folderPath } of views) {
+        if (this._viewFolders.has(folderPath)) {
+          continue
+        }
+        // Create groups for each segment of the path
+        split(folderPath, VIEW_FOLDERS_SEPARATOR).reduce((parent, segment) => {
+          const path = [...parent, segment]
+          const folder = getOrCreateFolder(path.join(VIEW_FOLDERS_SEPARATOR))
+          this._viewFolderItems.get(parent.join(VIEW_FOLDERS_SEPARATOR)).add(folder)
+          return path
+        }, [] as string[])
+      }
+
+      for (const { view, folderPath } of views) {
+        const vm = new LikeC4ViewModel(this, view, getOrCreateFolder(folderPath))
+        this._viewFolderItems.get(folderPath).add(vm)
         this._views.set(view.id, vm)
         for (const tag of vm.tags) {
           this._allTags.get(tag).add(vm)
         }
       }
+    } else {
+      // Model is not computed or layouted, but we still need to create root folder
+      this._rootViewFolder = new LikeC4ViewsFolder(this, [''], undefined)
+      this._viewFolders.set(this._rootViewFolder.path, this._rootViewFolder)
     }
   }
 
@@ -236,6 +298,12 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     return this.$data.projectId ?? 'unknown' as any
   }
 
+  get project(): LikeC4Project {
+    return this.$data.project ?? memoizeProp(this, Symbol.for('project'), () => ({
+      id: this.projectId as unknown as scalar.ProjectId,
+    }))
+  }
+
   get specification(): Specification<A> {
     return this.$data.specification
   }
@@ -254,6 +322,21 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     }))
   }
 
+  /**
+   * Returns the element with the given FQN.
+   *
+   * @throws Error if element is not found\
+   * Use {@link findElement} if you don't want to throw an error
+   *
+   * @note Method is type-safe for typed model
+
+   * @example
+   * model.element('cloud.frontend')
+   * // or object with id property of scalar.Fqn
+   * model.element({
+   *   id: 'dashboard',
+   * })
+   */
   public element(el: ElementOrFqn<A>): ElementModel<A> {
     if (el instanceof ElementModel) {
       return el
@@ -261,6 +344,16 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
     const id = getId(el)
     return nonNullable(this._elements.get(id), `Element ${id} not found`)
   }
+
+  /**
+   * Returns the element with the given FQN.
+   *
+   * @returns Element if found, null otherwise
+   * @note Method is not type-safe as {@link element}
+   *
+   * @example
+   * model.findElement('cloud.frontend')
+   */
   public findElement(el: aux.LooseElementId<A>): ElementModel<A> | null {
     return this._elements.get(getId(el)) ?? null
   }
@@ -342,15 +435,69 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
 
   /**
    * Returns a specific view by its ID.
+   * @note Method is type-safe for typed model
+   * @throws Error if view is not found\
+   * Use {@link findView} if you don't want to throw an error
+   *
+   * @example
+   * model.view('index')
+   * // or object with id property of scalar.ViewId
+   * model.view({
+   *   id: 'index',
+   * })
    */
   public view(viewId: aux.ViewId<A> | { id: scalar.ViewId<aux.ViewId<A>> }): LikeC4ViewModel<A, $View<A>> {
     const id = getId(viewId)
     return nonNullable(this._views.get(id), `View ${id} not found`)
   }
+
+  /**
+   * Returns a specific view by its ID.
+   * @note Method is not type-safe as {@link view}
+   *
+   * @example
+   * model.findView('index')
+   */
   public findView(viewId: aux.LooseViewId<A>): LikeC4ViewModel<A, $View<A>> | null {
     return this._views.get(viewId as aux.ViewId<A>) ?? null
   }
 
+  /**
+   * Returns a view folder by its path.
+   * Path is extracted from the view title, e.g. "Group 1/Group 2/View" -> "Group 1/Group 2"
+   * @throws Error if view folder is not found.
+   */
+  public viewFolder(path: string): LikeC4ViewsFolder<A> {
+    return nonNullable(this._viewFolders.get(path), `View folder ${path} not found`)
+  }
+
+  /**
+   * Root folder is a special one with an empty path and used only for internal purposes.
+   * It is not visible to the user and should be used only to get top-level folders and views.
+   */
+  get rootViewFolder(): LikeC4ViewsFolder<A> {
+    return this._rootViewFolder
+  }
+
+  /**
+   * Whether the model has any view folders.
+   */
+  get hasViewFolders(): boolean {
+    // Root view folder is always present
+    return this._viewFolders.size > 1
+  }
+
+  /**
+   * Returns all children of a view folder.
+   * Path is extracted from the view title, e.g. "Group 1/Group 2/View" -> "Group 1/Group 2"
+   *
+   * @throws Error if view folder is not found.
+   */
+  public viewFolderItems(path: string): ReadonlySet<LikeC4ViewsFolder<A> | LikeC4ViewModel<A>> {
+    invariant(this._viewFolders.has(path), `View folder ${path} not found`)
+    return this._viewFolderItems.get(path)
+  }
+
   /**
    * Returns the parent element of given element.
    * @see ancestors
@@ -452,7 +599,8 @@ export class LikeC4Model<A extends Any = aux.Unknown> {
   }
 
   /**
-   * Returns all tags used in the model, sorted alphabetically.
+   * Returns array of all tags used in the model, sorted naturally.\
+   * Use {@link specification.tags} to get all defined tags
    */
   get tags(): aux.Tags<A> {
     return memoizeProp(this, 'tags', () => sort([...this._allTags.keys()], compareNatural))
@@ -667,6 +815,7 @@ export namespace LikeC4Model {
   export const EMPTY = LikeC4Model.create<aux.UnknownComputed>({
     _stage: 'computed',
     projectId: 'default' as never,
+    project: { id: 'default' as never },
     specification: {
       elements: {},
       relationships: {},
@@ -692,24 +841,24 @@ export namespace LikeC4Model {
     // dprint-ignore
     aux.Unknown extends A
       ? LikeC4Model<aux.UnknownParsed>
-      : A extends Aux<any, infer E, infer D, infer V, infer P, infer Spec>
-        ? LikeC4Model<Aux<'parsed', E, D, V, P, Spec>>
+      : A extends Aux<any, infer E, infer D, infer V, infer PID, infer Spec>
+        ? LikeC4Model<Aux<'parsed', E, D, V, PID, Spec>>
         : never
 
   export type Computed<A = aux.Unknown> =
     // dprint-ignore
     aux.Unknown extends A
     ? LikeC4Model<aux.UnknownComputed>
-    : A extends Aux<any, infer E, infer D, infer V, infer P, infer Spec>
-      ? LikeC4Model<Aux<'computed', E, D, V, P, Spec>>
+    : A extends Aux<any, infer E, infer D, infer V, infer PID, infer Spec>
+      ? LikeC4Model<Aux<'computed', E, D, V, PID, Spec>>
       : never
 
   export type Layouted<A = aux.Unknown> =
     // dprint-ignore
     aux.Unknown extends A
       ? LikeC4Model<aux.UnknownLayouted>
-      : A extends Aux<any, infer E, infer D, infer V, infer P, infer Spec>
-        ? LikeC4Model<Aux<'layouted', E, D, V, P, Spec>>
+      : A extends Aux<any, infer E, infer D, infer V, infer PID, infer Spec>
+        ? LikeC4Model<Aux<'layouted', E, D, V, PID, Spec>>
         : never
 
   export type Node<A = aux.Unknown> = A extends aux.AnyAux ? NodeModel<A> : never

package/src/model/index.ts

@@ -36,6 +36,7 @@ export { LikeC4DeploymentModel } from './DeploymentModel'
 
 export { EdgeModel } from './view/EdgeModel'
 export { LikeC4ViewModel } from './view/LikeC4ViewModel'
+export { LikeC4ViewsFolder } from './view/LikeC4ViewsFolder'
 export { NodeModel } from './view/NodeModel'
 
 export type {
@@ -62,3 +63,10 @@ export type {
 } from '../types'
 
 export { RichText, type RichTextEmpty, type RichTextOrEmpty } from '../types'
+
+export {
+  extractViewTitleFromPath,
+  getViewFolderPath,
+  normalizeViewPath,
+  VIEW_FOLDERS_SEPARATOR,
+} from './utils'

package/src/model/types.ts

@@ -16,7 +16,7 @@ import type { LikeC4ViewModel } from './view/LikeC4ViewModel'
 export type IncomingFilter = 'all' | 'direct' | 'to-descendants'
 export type OutgoingFilter = 'all' | 'direct' | 'from-descendants'
 
-type AnyScalar<V extends string> =
+export type AnyScalar<V extends string> =
   | Tagged<V, 'Fqn'>
   | Tagged<V, 'DeploymentFqn'>
   | Tagged<V, 'ViewId'>
@@ -24,13 +24,6 @@ type AnyScalar<V extends string> =
   | Tagged<V, 'EdgeId'>
   | Tagged<V, 'RelationId'>
 
-/**
- * Utility function to extract `id` from the given element.
- */
-export function getId<Id extends string, Scalar extends AnyScalar<Id>>(element: Id | { id: Scalar }): Scalar {
-  return typeof element === 'string' ? element as unknown as Scalar : element.id
-}
-
 export type ElementOrFqn<A extends AnyAux> = aux.ElementId<A> | { id: aux.Fqn<A> }
 
 export type DeploymentOrFqn<A extends AnyAux> = aux.DeploymentId<A> | { id: aux.DeploymentFqn<A> }

package/src/model/utils.ts

@@ -0,0 +1,66 @@
+import { hasAtLeast } from 'remeda'
+import type { NonEmptyArray } from '../types'
+import { invariant } from '../utils'
+import type { AnyScalar } from './types'
+
+/**
+ * Utility function to extract `id` from the given element.
+ */
+export const getId = <Id extends string, Scalar extends AnyScalar<Id>>(element: Id | { id: Scalar }): Scalar => {
+  return typeof element === 'string' ? element as unknown as Scalar : element.id
+}
+
+export const VIEW_FOLDERS_SEPARATOR = '/'
+
+const splitViewTitle = (title: string): NonEmptyArray<string> => {
+  invariant(!title.includes('\n'), 'View title cannot contain newlines')
+  if (title.includes(VIEW_FOLDERS_SEPARATOR)) {
+    const segments = title
+      .split(VIEW_FOLDERS_SEPARATOR)
+      .map(s => s.trim())
+      .filter(s => s.length > 0)
+    if (hasAtLeast(segments, 1)) {
+      return segments
+    }
+    return ['']
+  }
+  return [title.trim()]
+}
+
+/**
+ * Normalizes view path by removing spaces from segments, removing empty segments,
+ * and removing leading/trailing slashes
+ * @example
+ * normalizeViewPath('One / Tw o / Thre e') === 'One/Tw o/Thre e'
+ */
+export const normalizeViewPath = (title: string): string => {
+  return splitViewTitle(title).join(VIEW_FOLDERS_SEPARATOR)
+}
+
+/**
+ * Returns view group path if it is used as a path
+ * Returns empty string if it is not a path
+ * @example
+ * getViewFolderPath('One / Tw o / Thre e') === 'One/Tw o'
+ * getViewFolderPath('One') === ''
+ */
+export const getViewFolderPath = (title: string): string | null => {
+  const segments = splitViewTitle(title)
+  if (!hasAtLeast(segments, 2)) {
+    return null
+  }
+  return segments.slice(0, -1).join(VIEW_FOLDERS_SEPARATOR)
+}
+
+/**
+ * Returns view title if it is used as a path
+ * @example
+ * getViewTitleFromPath('One / Tw o / Thre e') === 'Thre e'
+ * getViewTitleFromPath('One') === 'One'
+ */
+export const extractViewTitleFromPath = (title: string): string => {
+  if (!title.includes(VIEW_FOLDERS_SEPARATOR)) {
+    return title.trim()
+  }
+  return splitViewTitle(title).pop() ?? title
+}

package/src/model/view/LikeC4ViewModel.ts

@@ -7,10 +7,9 @@ import type {
   scalar,
   ViewWithType,
 } from '../../types'
-import { _stage, _type } from '../../types'
-import { type RichTextOrEmpty, RichText } from '../../types'
+import { type RichTextOrEmpty, _stage, _type, RichText } from '../../types'
 import type * as aux from '../../types/_aux'
-import { DefaultMap, ifind, nonNullable } from '../../utils'
+import { DefaultMap, ifind, memoizeProp, nonNullable } from '../../utils'
 import type { ElementModel } from '../ElementModel'
 import type { LikeC4Model } from '../LikeC4Model'
 import {
@@ -18,9 +17,10 @@ import {
   type EdgeOrId,
   type NodeOrId,
   type WithTags,
-  getId,
 } from '../types'
+import { extractViewTitleFromPath, getId, normalizeViewPath } from '../utils'
 import { type EdgesIterator, EdgeModel } from './EdgeModel'
+import type { LikeC4ViewsFolder } from './LikeC4ViewsFolder'
 import { type NodesIterator, NodeModel } from './NodeModel'
 
 export type ViewsIterator<A extends Any, V extends $View<A> = $View<A>> = IteratorLike<LikeC4ViewModel<A, V>>
@@ -44,9 +44,29 @@ export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>>
   public readonly $view: V
   public readonly $model: LikeC4Model<A>
 
-  constructor(model: LikeC4Model<A>, view: V) {
+  public readonly title: string | null
+
+  /**
+   * View folder this view belongs to.
+   * If view is top-level, this is the root folder.
+   */
+  public readonly folder: LikeC4ViewsFolder<A>
+  /**
+   * Path to this view, processed by {@link normalizeViewPath}
+   *
+   * @example
+   * "Group 1/Group 2/View"
+   */
+  public readonly viewPath: string
+
+  constructor(
+    model: LikeC4Model<A>,
+    view: V,
+    folder: LikeC4ViewsFolder<A>,
+  ) {
     this.$model = model
     this.$view = view
+    this.folder = folder
     for (const node of view.nodes) {
       const el = new NodeModel<A, V>(this, Object.freeze(node))
       this.#nodes.set(node.id, el)
@@ -79,6 +99,9 @@ export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>>
       }
       this.#edges.set(edge.id, edgeModel)
     }
+
+    this.title = this.$view.title ? extractViewTitleFromPath(this.$view.title) : null
+    this.viewPath = this.$view.title ? normalizeViewPath(this.$view.title) : this.$view.id
   }
 
   get _type(): V[_type] {
@@ -89,8 +112,40 @@ export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>>
     return this.$view.id
   }
 
-  get title(): string | null {
-    return this.$view.title
+  /**
+   * Returns title if defined, otherwise returns its {@link id}
+   */
+  get titleOrId(): string {
+    return this.title ?? this.id
+  }
+
+  /**
+   * Returns title if defined, otherwise returns `Untitled`.
+   */
+  get titleOrUntitled(): string {
+    return this.title ?? 'Untitled'
+  }
+
+  /**
+   * Returns path to this view as an array of groups and this view as the last element
+   * If view is top-level, returns only this view.
+   *
+   * @example
+   * viewPath = "Group 1/Group 2/View"
+   *
+   * breadcrumbs = [
+   *   "Group 1",             // folder
+   *   "Group 1/Group 2",     // folder
+   *   "Group 1/Group 2/View" // view
+   * ]
+   */
+  get breadcrumbs(): [...LikeC4ViewsFolder<A>[], this] {
+    return memoizeProp(this, 'breadcrumbs', () => {
+      if (!this.folder.isRoot) {
+        return [...this.folder.breadcrumbs, this]
+      }
+      return [this]
+    })
   }
 
   get description(): RichTextOrEmpty {

package/src/model/view/LikeC4ViewsFolder.ts

@@ -0,0 +1,151 @@
+import { isEmpty, last } from 'remeda'
+import type { aux, NonEmptyArray } from '../../types'
+import { invariant, memoizeProp } from '../../utils'
+import type { LikeC4Model } from '../LikeC4Model'
+import { LikeC4ViewModel } from './LikeC4ViewModel'
+
+export class LikeC4ViewsFolder<A extends aux.Any = aux.Any> {
+  public readonly $model: LikeC4Model<A>
+
+  /**
+   * Path to this view folder, processed by {@link normalizeViewPath}
+   *
+   * @example
+   * "Folder 1/Folder 2/Folder 3"
+   */
+  public readonly path: string
+
+  /**
+   * Title of this view folder.
+   *
+   * @example
+   * // title is the last segment of the path
+   * path = "Folder 1/Folder 2/Folder 3"
+   * title = "Folder 3"
+   */
+  public readonly title: string
+
+  /**
+   * Whether this is the root view folder.
+   *
+   * !NOTE
+   * Root folder is special folder with an empty path and used only for internal purposes. \
+   * It is not visible to the user and should not be used in the code.
+   */
+  public readonly isRoot: boolean
+
+  protected readonly parentPath: string | undefined
+
+  protected readonly defaultViewId: aux.StrictViewId<A> | undefined
+
+  constructor(
+    $model: LikeC4Model<A>,
+    path: NonEmptyArray<string>,
+    defaultViewId: aux.StrictViewId<A> | undefined,
+  ) {
+    this.$model = $model
+    this.path = path.join('/')
+    this.isRoot = this.path === ''
+    this.title = last(path)
+    if (this.isRoot) {
+      this.parentPath = undefined
+    } else {
+      this.parentPath = path.slice(0, -1).join('/')
+    }
+    this.defaultViewId = defaultViewId
+  }
+
+  /**
+   * Default view of this view folder.\
+   * It is for the case when there is a view at the same path as this folder.\
+   * (if there are multiple views at the same path, the first one is chosen)
+   *
+   * @example
+   * ```
+   * // Assume the following views exist:
+   * const views = [
+   *   "Folder 1/ Folder 2 / View",
+   *   "Folder 1/ Folder 2 / View / Subview",
+   * ]
+   * ```
+   * Group with path `Folder 1/ Folder 2 / View`\
+   * will have default view `Folder 1/ Folder 2 / View`
+   */
+  get defaultView(): LikeC4ViewModel<A> | null {
+    if (!this.defaultViewId) {
+      return null
+    }
+    return this.$model.view(this.defaultViewId)
+  }
+
+  /**
+   * Returns path to this view folder as an array of ancestors (excluding root) and this view folder as the last element
+   *
+   * @throws Error if this is the root folder.
+   */
+  get breadcrumbs(): [...LikeC4ViewsFolder<A>[], this] {
+    invariant(!this.isRoot, 'Root view folder has no breadcrumbs')
+    return memoizeProp(this, 'breadcrumbs', () => {
+      const parent = this.parent
+      if (parent) {
+        if (parent.isRoot) {
+          return [parent, this]
+        }
+        return [...parent.breadcrumbs, this]
+      }
+      return [this]
+    })
+  }
+
+  /**
+   * Returns parent folder
+   *
+   * @throws Error if this is the root folder.
+   */
+  get parent(): LikeC4ViewsFolder<A> | null {
+    invariant(!this.isRoot, 'Root view folder has no parent')
+    if (isEmpty(this.parentPath)) {
+      return null
+    }
+    return this.$model.viewFolder(this.parentPath)
+  }
+
+  /**
+   * Returns sorted set of children
+   * - First folders
+   * - Then views
+   */
+  get children(): ReadonlySet<LikeC4ViewsFolder<A> | LikeC4ViewModel<A>> {
+    return this.$model.viewFolderItems(this.path)
+  }
+
+  /**
+   * Returns sorted array of children folders
+   */
+  get folders(): ReadonlyArray<LikeC4ViewsFolder<A>> {
+    return memoizeProp(this, 'folders', () => {
+      const folders: LikeC4ViewsFolder<A>[] = []
+      for (const child of this.children) {
+        if (child instanceof LikeC4ViewsFolder) {
+          folders.push(child)
+        }
+      }
+      return folders
+    })
+  }
+
+  /**
+   * Returns all views in this view folder.
+   */
+  get views(): ReadonlyArray<LikeC4ViewModel<A>> {
+    return memoizeProp(this, 'views', () => {
+      const views: LikeC4ViewModel<A>[] = []
+      for (const child of this.children) {
+        if (child instanceof LikeC4ViewModel) {
+          views.push(child)
+        }
+      }
+      return views
+    })
+  }
+}