@likec4/core 1.4.0 → 1.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2024 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,6 @@
 # `@likec4/core`
 
-[docs](https://docs.likec4.dev/)
+[docs](https://likec4.dev/)
 
 Package contains:
 

package/dist/colors/element.d.ts

@@ -57,7 +57,7 @@ export declare const ElementColors: {
         readonly fill: "#A35829";
         readonly stroke: "#7E451D";
         readonly hiContrast: "#FFE0C2";
-        readonly loContrast: "#FFA057";
+        readonly loContrast: "#f9b27c";
     };
     readonly indigo: {
         readonly fill: "#6366f1";

package/dist/colors/element.js

@@ -60,7 +60,7 @@ export const ElementColors = {
         fill: '#A35829',
         stroke: '#7E451D',
         hiContrast: '#FFE0C2',
-        loContrast: '#FFA057'
+        loContrast: '#f9b27c'
     },
     indigo: {
         // fill: colors.indigo[500],

package/dist/colors/index.d.ts

@@ -60,7 +60,7 @@ export declare const defaultTheme: {
             readonly fill: "#A35829";
             readonly stroke: "#7E451D";
             readonly hiContrast: "#FFE0C2";
-            readonly loContrast: "#FFA057";
+            readonly loContrast: "#f9b27c";
         };
         readonly indigo: {
             readonly fill: "#6366f1";
@@ -126,7 +126,7 @@ export declare const defaultTheme: {
             labelColor: "#cbd5e1";
         };
     };
-    font: "Helvetica";
+    font: "Arial";
     shadow: "#0a0a0a";
 };
 export { ElementColors, RelationshipColors };

package/dist/colors/index.js

@@ -3,7 +3,7 @@ import { RelationshipColors } from './relationships';
 export const defaultTheme = {
     elements: ElementColors,
     relationships: RelationshipColors,
-    font: 'Helvetica',
+    font: 'Arial',
     shadow: '#0a0a0a'
 };
 export { ElementColors, RelationshipColors };

package/dist/types/expression.d.ts

@@ -1,5 +1,6 @@
 import type { IconUrl } from './_common';
 import type { BorderStyle, ElementKind, ElementShape, Fqn, Tag } from './element';
+import type { RelationshipArrowType, RelationshipLineType } from './relation';
 import type { ThemeColor } from './theme';
 import type { ViewID } from './view';
 interface BaseExpr {
@@ -16,6 +17,7 @@ interface BaseExpr {
     inout?: never;
     incoming?: never;
     outgoing?: never;
+    customRelation?: never;
 }
 export interface ElementRefExpr extends Omit<BaseExpr, 'element' | 'isDescedants'> {
     element: Fqn;
@@ -57,6 +59,7 @@ export interface ElementTagExpr extends Omit<BaseExpr, 'elementTag' | 'isEqual'>
 export declare function isElementTagExpr(expr: Expression): expr is ElementTagExpr;
 export type ElementExpression = ElementRefExpr | WildcardExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
 export declare function isElement(expr: Expression): expr is ElementExpression;
+export type ElementPredicateExpression = ElementExpression | CustomElementExpr;
 export interface RelationExpr extends Omit<BaseExpr, 'source' | 'target'> {
     source: ElementExpression;
     target: ElementExpression;
@@ -75,8 +78,20 @@ export interface OutgoingExpr extends Omit<BaseExpr, 'outgoing'> {
     outgoing: ElementExpression;
 }
 export declare function isOutgoing(expr: Expression): expr is OutgoingExpr;
-export type AnyRelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
-export declare function isAnyRelation(expr: Expression): expr is AnyRelationExpression;
-export type Expression = ElementExpression | CustomElementExpr | AnyRelationExpression;
+export interface CustomRelationExpr extends Omit<BaseExpr, 'customRelation'> {
+    customRelation: {
+        relation: RelationExpr;
+        title?: string;
+        color?: ThemeColor;
+        line?: RelationshipLineType;
+        head?: RelationshipArrowType;
+        tail?: RelationshipArrowType;
+    };
+}
+export declare function isCustomRelationExpr(expr: Expression): expr is CustomRelationExpr;
+export type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
+export type RelationPredicateExpression = RelationExpression | CustomRelationExpr;
+export declare function isAnyRelation(expr: Expression): expr is RelationPredicateExpression;
+export type Expression = ElementPredicateExpression | RelationPredicateExpression;
 export {};
 //# sourceMappingURL=expression.d.ts.map

package/dist/types/expression.js

@@ -35,8 +35,11 @@ export function isIncoming(expr) {
 export function isOutgoing(expr) {
     return 'outgoing' in expr;
 }
+export function isCustomRelationExpr(expr) {
+    return 'customRelation' in expr;
+}
 export function isAnyRelation(expr) {
-    return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr);
+    return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr) || isCustomRelationExpr(expr);
 }
 // export const Expr = {
 //   isElementRef,

package/dist/types/model.d.ts

@@ -1,10 +1,10 @@
 import type { Element, Fqn } from './element';
 import type { Relation, RelationID } from './relation';
-import type { ComputedView, View, ViewID } from './view';
+import type { ComputedView, LikeC4View, ViewID } from './view';
 export interface LikeC4Model {
     elements: Record<Fqn, Element>;
     relations: Record<RelationID, Relation>;
-    views: Record<ViewID, View>;
+    views: Record<ViewID, LikeC4View>;
 }
 export interface LikeC4ComputedModel {
     elements: Record<Fqn, Element>;

package/dist/types/relation.d.ts

@@ -5,7 +5,7 @@ import type { ThemeColor } from './theme';
 export type RelationID = Opaque<string, 'RelationID'>;
 export type RelationshipKind = Opaque<string, 'RelationshipKind'>;
 export type RelationshipLineType = 'dashed' | 'solid' | 'dotted';
-export type RelationshipArrowType = 'none' | 'normal' | 'onormal' | 'diamond' | 'odiamond' | 'crow' | 'open' | 'vee';
+export type RelationshipArrowType = 'none' | 'normal' | 'onormal' | 'dot' | 'odot' | 'diamond' | 'odiamond' | 'crow' | 'open' | 'vee';
 export declare const DefaultLineStyle = "dashed";
 export declare const DefaultArrowType = "normal";
 export declare const DefaultRelationshipColor = "gray";

package/dist/types/theme.d.ts

@@ -19,7 +19,7 @@ export type RelationshipThemeColors = {
     [key in ThemeColor]: RelationshipThemeColorValues;
 };
 export interface LikeC4Theme {
-    font: 'Helvetica';
+    font: 'Arial';
     shadow: ColorLiteral;
     relationships: RelationshipThemeColors;
     elements: ElementThemeColors;

package/dist/types/view.d.ts

@@ -1,18 +1,18 @@
 import type { IconUrl, NonEmptyArray, Point, XYPosition } from './_common';
 import type { ElementKind, ElementShape, ElementStyle, Fqn, Tag } from './element';
-import type { CustomElementExpr, ElementExpression, Expression } from './expression';
+import type { ElementExpression, ElementPredicateExpression, Expression } from './expression';
 import type { Opaque } from './opaque';
 import type { RelationID, RelationshipArrowType, RelationshipLineType } from './relation';
-import type { ColorLiteral, ThemeColor } from './theme';
+import type { ThemeColor } from './theme';
 export type ViewID = Opaque<string, 'ViewID'>;
-export type ViewRuleExpression = {
+export type ViewRulePredicate = {
     include: Expression[];
     exclude?: never;
 } | {
     include?: never;
     exclude: Expression[];
 };
-export declare function isViewRuleExpression(rule: ViewRule): rule is ViewRuleExpression;
+export declare function isViewRulePredicate(rule: ViewRule): rule is ViewRulePredicate;
 export interface ViewRuleStyle {
     targets: ElementExpression[];
     style: ElementStyle & {
@@ -27,8 +27,8 @@ export interface ViewRuleAutoLayout {
     autoLayout: AutoLayoutDirection;
 }
 export declare function isViewRuleAutoLayout(rule: ViewRule): rule is ViewRuleAutoLayout;
-export type ViewRule = ViewRuleExpression | ViewRuleStyle | ViewRuleAutoLayout;
-export interface BasicView<ViewType extends 'element' | 'dynamic' = 'element' | 'dynamic'> {
+export type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout;
+export interface BasicView<ViewType extends 'element' | 'dynamic'> {
     readonly __?: ViewType;
     readonly id: ViewID;
     readonly title: string | null;
@@ -59,13 +59,13 @@ export interface BasicElementView extends BasicView<'element'> {
     readonly viewOf?: Fqn;
     readonly rules: ViewRule[];
 }
-export interface StrictElementView extends BasicElementView {
+export interface ScopedElementView extends BasicElementView {
     readonly viewOf: Fqn;
 }
 export interface ExtendsElementView extends BasicElementView {
     readonly extends: ViewID;
 }
-export type ElementView = StrictElementView | ExtendsElementView | BasicElementView;
+export type ElementView = ScopedElementView | ExtendsElementView | BasicElementView;
 export interface DynamicViewStep {
     readonly source: Fqn;
     readonly target: Fqn;
@@ -73,7 +73,7 @@ export interface DynamicViewStep {
     readonly isBackward?: boolean;
 }
 export type DynamicViewIncludeRule = {
-    include: (ElementExpression | CustomElementExpr)[];
+    include: ElementPredicateExpression[];
 };
 export declare function isDynamicViewIncludeRule(rule: DynamicViewRule): rule is DynamicViewIncludeRule;
 export type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleAutoLayout;
@@ -82,11 +82,11 @@ export interface DynamicView extends BasicView<'dynamic'> {
     readonly steps: DynamicViewStep[];
     readonly rules: DynamicViewRule[];
 }
-export type View = ElementView | DynamicView;
-export declare function isDynamicView(view: View): view is DynamicView;
-export declare function isElementView(view: View): view is ElementView;
-export declare function isExtendsElementView(view: View): view is ExtendsElementView;
-export declare function isStrictElementView(view: View): view is StrictElementView;
+export type LikeC4View = ElementView | DynamicView;
+export declare function isDynamicView(view: LikeC4View): view is DynamicView;
+export declare function isElementView(view: LikeC4View): view is ElementView;
+export declare function isExtendsElementView(view: LikeC4View): view is ExtendsElementView;
+export declare function isScopedElementView(view: LikeC4View): view is ScopedElementView;
 export type NodeId = Fqn;
 export type EdgeId = Opaque<string, 'EdgeId'>;
 export type StepEdgeIdLiteral = `step-${number}`;
@@ -119,6 +119,10 @@ export interface ComputedNode {
     navigateTo?: ViewID;
     level: number;
     depth?: number;
+    /**
+     * If this node was customized in the view
+     */
+    isCustomized?: boolean;
 }
 export interface ComputedEdge {
     id: EdgeId;
@@ -131,6 +135,10 @@ export interface ComputedEdge {
     line?: RelationshipLineType;
     head?: RelationshipArrowType;
     tail?: RelationshipArrowType;
+    /**
+     * If this edge is derived from custom relationship predicate
+     */
+    isCustomized?: boolean;
     /**
      * For layouting purposes
      * @default 'forward'
@@ -157,29 +165,15 @@ export type BBox = {
     width: number;
     height: number;
 };
-export interface DiagramLabel {
-    align: 'left' | 'right' | 'center';
-    fontStyle?: 'bold' | 'normal';
-    color?: ColorLiteral;
-    fontSize: number;
-    pt: Point;
-    width: number;
-    text: string;
-}
 export interface DiagramNode extends ComputedNode {
     width: number;
     height: number;
     position: Point;
-    labels: DiagramLabel[];
+    labelBBox: BBox;
 }
 export interface DiagramEdge extends ComputedEdge {
     points: NonEmptyArray<Point>;
-    headArrow?: NonEmptyArray<Point>;
-    headArrowPoint?: Point;
-    tailArrow?: NonEmptyArray<Point>;
-    tailArrowPoint?: Point;
-    labels?: NonEmptyArray<DiagramLabel>;
-    labelBBox?: BBox;
+    labelBBox?: BBox | null;
 }
 export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges'> {
     readonly nodes: DiagramNode[];

package/dist/types/view.js

@@ -1,5 +1,5 @@
 import { isNullish } from 'remeda';
-export function isViewRuleExpression(rule) {
+export function isViewRulePredicate(rule) {
     return (('include' in rule && Array.isArray(rule.include))
         || ('exclude' in rule && Array.isArray(rule.exclude)));
 }
@@ -21,7 +21,7 @@ export function isElementView(view) {
 export function isExtendsElementView(view) {
     return isElementView(view) && 'extends' in view;
 }
-export function isStrictElementView(view) {
+export function isScopedElementView(view) {
     return isElementView(view) && 'viewOf' in view;
 }
 export function StepEdgeId(step) {

package/dist/utils/fqn.d.ts

@@ -1,4 +1,5 @@
 import type { Element, Fqn } from '../types';
+type Predicate<T> = (x: T) => boolean;
 export declare function nameFromFqn(fqn: Fqn): string;
 export declare function isAncestor<E extends {
     id: Fqn;
@@ -12,6 +13,9 @@ export declare function isDescendantOf<E extends {
 export declare function notDescendantOf(ancestors: Element[]): (e: Element) => boolean;
 export declare function commonAncestor(first: Fqn, second: Fqn): Fqn | null;
 export declare function parentFqn(fqn: Fqn): Fqn | null;
+export declare function parentFqnPredicate<T extends {
+    parent: Fqn | null;
+}>(parent: Fqn): Predicate<T>;
 /**
  * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
  * (from closest to root)
@@ -31,4 +35,5 @@ export declare function compareFqnHierarchically<T extends string = string>(a: T
 export declare function compareByFqnHierarchically<T extends {
     id: string;
 }>(a: T, b: T): number;
+export {};
 //# sourceMappingURL=fqn.d.ts.map

package/dist/utils/fqn.js

@@ -52,6 +52,10 @@ export function parentFqn(fqn) {
     }
     return null;
 }
+export function parentFqnPredicate(parent) {
+    const prefix = parent + '.';
+    return (e) => !!e.parent && (e.parent === parent || e.parent.startsWith(prefix));
+}
 /**
  * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
  * (from closest to root)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/core",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -66,16 +66,16 @@
     }
   },
   "dependencies": {
-    "remeda": "^1.61.0",
+    "remeda": "^2.3.0",
     "ts-custom-error": "^3.3.1",
-    "type-fest": "^4.18.2"
+    "type-fest": "^4.21.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.4.0",
+    "@likec4/tsconfig": "1.6.0",
     "@total-typescript/ts-reset": "^0.5.1",
-    "execa": "^9.1.0",
-    "typescript": "^5.4.5",
-    "vitest": "~1.5.3"
+    "execa": "^9.3.0",
+    "typescript": "^5.5.3",
+    "vitest": "~2.0.3"
   },
-  "packageManager": "yarn@4.3.0"
+  "packageManager": "yarn@4.3.1"
 }

package/src/colors/element.ts

@@ -65,7 +65,7 @@ export const ElementColors = {
     fill: '#A35829',
     stroke: '#7E451D',
     hiContrast: '#FFE0C2',
-    loContrast: '#FFA057'
+    loContrast: '#f9b27c'
   },
   indigo: {
     // fill: colors.indigo[500],

package/src/colors/index.ts

@@ -5,7 +5,7 @@ import { RelationshipColors } from './relationships'
 export const defaultTheme = {
   elements: ElementColors,
   relationships: RelationshipColors,
-  font: 'Helvetica',
+  font: 'Arial',
   shadow: '#0a0a0a'
 } satisfies LikeC4Theme
 

package/src/types/expression.ts

@@ -1,5 +1,6 @@
 import type { IconUrl } from './_common'
 import type { BorderStyle, ElementKind, ElementShape, Fqn, Tag } from './element'
+import type { RelationshipArrowType, RelationshipLineType } from './relation'
 import type { ThemeColor } from './theme'
 import type { ViewID } from './view'
 
@@ -17,6 +18,7 @@ interface BaseExpr {
   inout?: never
   incoming?: never
   outgoing?: never
+  customRelation?: never
 }
 
 export interface ElementRefExpr extends Omit<BaseExpr, 'element' | 'isDescedants'> {
@@ -89,6 +91,8 @@ export function isElement(expr: Expression): expr is ElementExpression {
     || isExpandedElementExpr(expr)
 }
 
+export type ElementPredicateExpression = ElementExpression | CustomElementExpr
+
 export interface RelationExpr extends Omit<BaseExpr, 'source' | 'target'> {
   source: ElementExpression
   target: ElementExpression
@@ -118,13 +122,29 @@ export function isOutgoing(expr: Expression): expr is OutgoingExpr {
   return 'outgoing' in expr
 }
 
-export type AnyRelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr
+export interface CustomRelationExpr extends Omit<BaseExpr, 'customRelation'> {
+  customRelation: {
+    relation: RelationExpr
+    title?: string
+    color?: ThemeColor
+    line?: RelationshipLineType
+    head?: RelationshipArrowType
+    tail?: RelationshipArrowType
+  }
+}
+export function isCustomRelationExpr(expr: Expression): expr is CustomRelationExpr {
+  return 'customRelation' in expr
+}
+
+export type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr
+
+export type RelationPredicateExpression = RelationExpression | CustomRelationExpr
 
-export function isAnyRelation(expr: Expression): expr is AnyRelationExpression {
-  return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr)
+export function isAnyRelation(expr: Expression): expr is RelationPredicateExpression {
+  return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr) || isCustomRelationExpr(expr)
 }
 
-export type Expression = ElementExpression | CustomElementExpr | AnyRelationExpression
+export type Expression = ElementPredicateExpression | RelationPredicateExpression
 
 // export const Expr = {
 //   isElementRef,

package/src/types/model.ts

@@ -1,11 +1,11 @@
 import type { Element, Fqn } from './element'
 import type { Relation, RelationID } from './relation'
-import type { ComputedView, View, ViewID } from './view'
+import type { ComputedView, LikeC4View, ViewID } from './view'
 
 export interface LikeC4Model {
   elements: Record<Fqn, Element>
   relations: Record<RelationID, Relation>
-  views: Record<ViewID, View>
+  views: Record<ViewID, LikeC4View>
 }
 
 export interface LikeC4ComputedModel {

package/src/types/relation.ts

@@ -13,6 +13,8 @@ export type RelationshipArrowType =
   | 'none'
   | 'normal'
   | 'onormal'
+  | 'dot'
+  | 'odot'
   | 'diamond'
   | 'odiamond'
   | 'crow'

package/src/types/theme.ts

@@ -39,7 +39,7 @@ export type RelationshipThemeColors = {
 }
 
 export interface LikeC4Theme {
-  font: 'Helvetica' // for now only support Helvetica
+  font: 'Arial'
   shadow: ColorLiteral
   relationships: RelationshipThemeColors
   elements: ElementThemeColors

package/src/types/view.ts

@@ -1,15 +1,15 @@
 import { isNullish } from 'remeda'
 import type { IconUrl, NonEmptyArray, Point, XYPosition } from './_common'
 import type { ElementKind, ElementShape, ElementStyle, Fqn, Tag } from './element'
-import type { CustomElementExpr, ElementExpression, Expression } from './expression'
+import type { ElementExpression, ElementPredicateExpression, Expression } from './expression'
 import type { Opaque } from './opaque'
 import type { RelationID, RelationshipArrowType, RelationshipLineType } from './relation'
-import type { ColorLiteral, ThemeColor } from './theme'
+import type { ThemeColor } from './theme'
 
 // Full-qualified-name
 export type ViewID = Opaque<string, 'ViewID'>
 
-export type ViewRuleExpression =
+export type ViewRulePredicate =
   | {
     include: Expression[]
     exclude?: never
@@ -18,7 +18,7 @@ export type ViewRuleExpression =
     include?: never
     exclude: Expression[]
   }
-export function isViewRuleExpression(rule: ViewRule): rule is ViewRuleExpression {
+export function isViewRulePredicate(rule: ViewRule): rule is ViewRulePredicate {
   return (
     ('include' in rule && Array.isArray(rule.include))
     || ('exclude' in rule && Array.isArray(rule.exclude))
@@ -45,9 +45,9 @@ export function isViewRuleAutoLayout(rule: ViewRule): rule is ViewRuleAutoLayout
   return 'autoLayout' in rule
 }
 
-export type ViewRule = ViewRuleExpression | ViewRuleStyle | ViewRuleAutoLayout
+export type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout
 
-export interface BasicView<ViewType extends 'element' | 'dynamic' = 'element' | 'dynamic'> {
+export interface BasicView<ViewType extends 'element' | 'dynamic'> {
   readonly __?: ViewType
   readonly id: ViewID
   readonly title: string | null
@@ -81,14 +81,14 @@ export interface BasicElementView extends BasicView<'element'> {
   readonly viewOf?: Fqn
   readonly rules: ViewRule[]
 }
-export interface StrictElementView extends BasicElementView {
+export interface ScopedElementView extends BasicElementView {
   readonly viewOf: Fqn
 }
 
 export interface ExtendsElementView extends BasicElementView {
   readonly extends: ViewID
 }
-export type ElementView = StrictElementView | ExtendsElementView | BasicElementView
+export type ElementView = ScopedElementView | ExtendsElementView | BasicElementView
 
 export interface DynamicViewStep {
   readonly source: Fqn
@@ -98,7 +98,7 @@ export interface DynamicViewStep {
 }
 
 export type DynamicViewIncludeRule = {
-  include: (ElementExpression | CustomElementExpr)[]
+  include: ElementPredicateExpression[]
 }
 
 export function isDynamicViewIncludeRule(rule: DynamicViewRule): rule is DynamicViewIncludeRule {
@@ -114,27 +114,26 @@ export interface DynamicView extends BasicView<'dynamic'> {
   readonly rules: DynamicViewRule[]
 }
 
-export type View = ElementView | DynamicView
+export type LikeC4View = ElementView | DynamicView
 
-export function isDynamicView(view: View): view is DynamicView {
+export function isDynamicView(view: LikeC4View): view is DynamicView {
   return view.__ === 'dynamic'
 }
-export function isElementView(view: View): view is ElementView {
+export function isElementView(view: LikeC4View): view is ElementView {
   return isNullish(view.__) || view.__ === 'element'
 }
 
-export function isExtendsElementView(view: View): view is ExtendsElementView {
+export function isExtendsElementView(view: LikeC4View): view is ExtendsElementView {
   return isElementView(view) && 'extends' in view
 }
 
-export function isStrictElementView(view: View): view is StrictElementView {
+export function isScopedElementView(view: LikeC4View): view is ScopedElementView {
   return isElementView(view) && 'viewOf' in view
 }
 
 export type NodeId = Fqn
 
 export type EdgeId = Opaque<string, 'EdgeId'>
-
 export type StepEdgeIdLiteral = `step-${number}`
 export type StepEdgeId = Opaque<StepEdgeIdLiteral, 'EdgeId'>
 export function StepEdgeId(step: number): StepEdgeId {
@@ -177,6 +176,10 @@ export interface ComputedNode {
   level: number
   // For compound nodes, the max depth of nested nodes
   depth?: number
+  /**
+   * If this node was customized in the view
+   */
+  isCustomized?: boolean
 }
 
 export interface ComputedEdge {
@@ -190,7 +193,10 @@ export interface ComputedEdge {
   line?: RelationshipLineType
   head?: RelationshipArrowType
   tail?: RelationshipArrowType
-
+  /**
+   * If this edge is derived from custom relationship predicate
+   */
+  isCustomized?: boolean
   /**
    * For layouting purposes
    * @default 'forward'
@@ -227,35 +233,17 @@ export type BBox = {
   height: number
 }
 
-export interface DiagramLabel {
-  align: 'left' | 'right' | 'center'
-  fontStyle?: 'bold' | 'normal'
-  color?: ColorLiteral
-  fontSize: number
-  pt: Point
-  width: number
-  text: string
-}
-
 export interface DiagramNode extends ComputedNode {
   width: number
   height: number
-  position: Point // Absolute position, top left
-  // relative: Point // Top left, relative to parent
-  labels: DiagramLabel[]
+  // Absolute position, top left
+  position: Point
+  labelBBox: BBox
 }
 
 export interface DiagramEdge extends ComputedEdge {
   points: NonEmptyArray<Point>
-  // Polygons are used to draw arrows
-  headArrow?: NonEmptyArray<Point>
-  // Draw arrow from the last point of the edge to this point
-  headArrowPoint?: Point
-  tailArrow?: NonEmptyArray<Point>
-  // Draw arrow from the first point of the edge to this point
-  tailArrowPoint?: Point
-  labels?: NonEmptyArray<DiagramLabel>
-  labelBBox?: BBox
+  labelBBox?: BBox | null
 }
 
 export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges'> {

package/src/utils/fqn.ts

@@ -1,6 +1,8 @@
 import type { Element, Fqn } from '../types'
 import { isString } from './guards'
 
+type Predicate<T> = (x: T) => boolean
+
 export function nameFromFqn(fqn: Fqn) {
   const lastDot = fqn.lastIndexOf('.')
   if (lastDot > 0) {
@@ -64,6 +66,11 @@ export function parentFqn(fqn: Fqn): Fqn | null {
   return null
 }
 
+export function parentFqnPredicate<T extends { parent: Fqn | null }>(parent: Fqn): Predicate<T> {
+  const prefix = parent + '.'
+  return (e: T) => !!e.parent && (e.parent === parent || e.parent.startsWith(prefix))
+}
+
 /**
  * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
  * (from closest to root)