@likec4/core 1.6.0 → 1.7.0

package/dist/colors/element.d.ts

@@ -45,7 +45,7 @@ export declare const ElementColors: {
         readonly fill: "#AC4D39";
         readonly stroke: "#853A2D";
         readonly hiContrast: "#FBD3CB";
-        readonly loContrast: "#FF977D";
+        readonly loContrast: "#f5b2a3";
     };
     readonly green: {
         readonly fill: "#428a4f";

package/dist/colors/element.js

@@ -48,7 +48,7 @@ export const ElementColors = {
         hiContrast: '#FBD3CB',
         // hiContrast: '#f8fafc',
         // loContrast: '#fdd8d8' // radix black red 12
-        loContrast: '#FF977D'
+        loContrast: '#f5b2a3'
     },
     green: {
         fill: '#428a4f',

package/dist/colors/index.d.ts

@@ -48,7 +48,7 @@ export declare const defaultTheme: {
             readonly fill: "#AC4D39";
             readonly stroke: "#853A2D";
             readonly hiContrast: "#FBD3CB";
-            readonly loContrast: "#FF977D";
+            readonly loContrast: "#f5b2a3";
         };
         readonly green: {
             readonly fill: "#428a4f";
@@ -108,7 +108,7 @@ export declare const defaultTheme: {
         red: {
             lineColor: "#AC4D39";
             labelBgColor: "#b91c1c";
-            labelColor: "#FF977D";
+            labelColor: "#f5b2a3";
         };
         secondary: {
             lineColor: "#0ea5e9";

package/dist/colors/relationships.d.ts

@@ -37,7 +37,7 @@ export declare const RelationshipColors: {
     red: {
         lineColor: "#AC4D39";
         labelBgColor: "#b91c1c";
-        labelColor: "#FF977D";
+        labelColor: "#f5b2a3";
     };
     secondary: {
         lineColor: "#0ea5e9";

package/dist/colors/relationships.js

@@ -41,7 +41,7 @@ export const RelationshipColors = {
     red: {
         lineColor: '#AC4D39',
         labelBgColor: '#b91c1c',
-        labelColor: '#FF977D'
+        labelColor: '#f5b2a3'
     },
     secondary: sky,
     sky,

package/dist/types/_common.d.ts

@@ -2,7 +2,7 @@ import type { Opaque } from './opaque';
 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T];
 export type IconUrl = Opaque<string, 'IconUrl'>;
 export type Point = readonly [x: number, y: number];
-export interface XYPosition {
+export interface XYPoint {
     x: number;
     y: number;
 }

package/dist/types/expression.d.ts

@@ -1,9 +1,11 @@
 import type { IconUrl } from './_common';
 import type { BorderStyle, ElementKind, ElementShape, Fqn, Tag } from './element';
+import type { WhereOperator } from './operators';
 import type { RelationshipArrowType, RelationshipLineType } from './relation';
 import type { ThemeColor } from './theme';
 import type { ViewID } from './view';
 interface BaseExpr {
+    where?: never;
     element?: never;
     custom?: never;
     expanded?: never;
@@ -30,7 +32,7 @@ export interface ExpandedElementExpr extends Omit<BaseExpr, 'expanded'> {
 export declare function isExpandedElementExpr(expr: Expression): expr is ExpandedElementExpr;
 export interface CustomElementExpr extends Omit<BaseExpr, 'custom'> {
     custom: {
-        element: Fqn;
+        expr: ElementExpression | ElementWhereExpr;
         title?: string;
         description?: string;
         technology?: string;
@@ -59,7 +61,15 @@ 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 ElementWhereExpr extends Omit<BaseExpr, 'where'> {
+    where: {
+        expr: ElementExpression;
+        condition: WhereOperator;
+    };
+}
+export declare function isElementWhere(expr: Expression): expr is ElementWhereExpr;
+export type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
+export declare function isElementPredicateExpr(expr: Expression): expr is ElementPredicateExpression;
 export interface RelationExpr extends Omit<BaseExpr, 'source' | 'target'> {
     source: ElementExpression;
     target: ElementExpression;
@@ -78,10 +88,21 @@ export interface OutgoingExpr extends Omit<BaseExpr, 'outgoing'> {
     outgoing: ElementExpression;
 }
 export declare function isOutgoing(expr: Expression): expr is OutgoingExpr;
+export type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
+export declare function isRelationExpression(expr: Expression): expr is RelationExpression;
+export interface RelationWhereExpr extends Omit<BaseExpr, 'where'> {
+    where: {
+        expr: RelationExpression;
+        condition: WhereOperator;
+    };
+}
+export declare function isRelationWhere(expr: Expression): expr is RelationWhereExpr;
 export interface CustomRelationExpr extends Omit<BaseExpr, 'customRelation'> {
     customRelation: {
-        relation: RelationExpr;
+        relation: RelationExpression | RelationWhereExpr;
         title?: string;
+        description?: string;
+        technology?: string;
         color?: ThemeColor;
         line?: RelationshipLineType;
         head?: RelationshipArrowType;
@@ -89,9 +110,8 @@ export interface CustomRelationExpr extends Omit<BaseExpr, 'customRelation'> {
     };
 }
 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 RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
+export declare function isRelationPredicateExpr(expr: Expression): expr is RelationPredicateExpression;
 export type Expression = ElementPredicateExpression | RelationPredicateExpression;
 export {};
 //# sourceMappingURL=expression.d.ts.map

package/dist/types/expression.js

@@ -5,7 +5,7 @@ export function isExpandedElementExpr(expr) {
     return 'expanded' in expr;
 }
 export function isCustomElement(expr) {
-    return 'custom' in expr;
+    return 'custom' in expr && (isElement(expr.custom.expr) || isElementWhere(expr.custom.expr));
 }
 export function isWildcard(expr) {
     return 'wildcard' in expr;
@@ -23,6 +23,12 @@ export function isElement(expr) {
         || isElementTagExpr(expr)
         || isExpandedElementExpr(expr);
 }
+export function isElementWhere(expr) {
+    return 'where' in expr && isElement(expr.where.expr);
+}
+export function isElementPredicateExpr(expr) {
+    return isElement(expr) || isElementWhere(expr) || isCustomElement(expr);
+}
 export function isRelation(expr) {
     return 'source' in expr && 'target' in expr;
 }
@@ -35,11 +41,17 @@ export function isIncoming(expr) {
 export function isOutgoing(expr) {
     return 'outgoing' in expr;
 }
+export function isRelationExpression(expr) {
+    return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr);
+}
+export function isRelationWhere(expr) {
+    return 'where' in expr && isRelationExpression(expr.where.expr);
+}
 export function isCustomRelationExpr(expr) {
     return 'customRelation' in expr;
 }
-export function isAnyRelation(expr) {
-    return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr) || isCustomRelationExpr(expr);
+export function isRelationPredicateExpr(expr) {
+    return isRelationExpression(expr) || isRelationWhere(expr) || isCustomRelationExpr(expr);
 }
 // export const Expr = {
 //   isElementRef,

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export * from './element';
 export * from './expression';
 export * from './model';
 export * from './opaque';
+export * from './operators';
 export * from './relation';
 export * from './theme';
 export * from './view';

package/dist/types/index.js

@@ -3,6 +3,7 @@ export * from './element';
 export * from './expression';
 export * from './model';
 export * from './opaque';
+export * from './operators';
 export * from './relation';
 export * from './theme';
 export * from './view';

package/dist/types/operators.d.ts

@@ -0,0 +1,35 @@
+import type { NonEmptyArray } from './_common';
+export type EqualOperator<V> = {
+    eq: V;
+} | {
+    neq: V;
+};
+export interface TagEqual {
+    tag: EqualOperator<string>;
+}
+export declare const isTagEqual: (operator: WhereOperator) => operator is TagEqual;
+export interface KindEqual {
+    kind: EqualOperator<string>;
+}
+export declare const isKindEqual: (operator: WhereOperator) => operator is KindEqual;
+export interface NotOperator<T> {
+    not: T;
+}
+export declare const isNotOperator: (operator: WhereOperator) => operator is NotOperator<WhereOperator>;
+export interface AndOperator<T> {
+    and: NonEmptyArray<T>;
+}
+export declare const isAndOperator: (operator: WhereOperator) => operator is AndOperator<WhereOperator>;
+export interface OrOperator<T> {
+    or: NonEmptyArray<T>;
+}
+export declare const isOrOperator: (operator: WhereOperator) => operator is OrOperator<WhereOperator>;
+export type WhereOperator = TagEqual | KindEqual | NotOperator<WhereOperator> | AndOperator<WhereOperator> | OrOperator<WhereOperator>;
+type Filterable<FTag extends string = string, FKind extends string = string> = {
+    tags?: FTag[] | null;
+    kind?: FKind;
+};
+type OperatorPredicate<V extends Filterable> = (value: V) => boolean;
+export declare function whereOperatorAsPredicate<FTag extends string = string, FKind extends string = string>(operator: WhereOperator): OperatorPredicate<Filterable<FTag, FKind>>;
+export {};
+//# sourceMappingURL=operators.d.ts.map

package/dist/types/operators.js

@@ -0,0 +1,59 @@
+import { allPass, anyPass, isNot, isNullish } from 'remeda';
+import { nonexhaustive } from '../errors';
+export const isTagEqual = (operator) => {
+    return 'tag' in operator;
+};
+export const isKindEqual = (operator) => {
+    return 'kind' in operator;
+};
+export const isNotOperator = (operator) => {
+    return 'not' in operator;
+};
+export const isAndOperator = (operator) => {
+    return 'and' in operator;
+};
+export const isOrOperator = (operator) => {
+    return 'or' in operator;
+};
+export function whereOperatorAsPredicate(operator) {
+    switch (true) {
+        case isTagEqual(operator): {
+            if ('eq' in operator.tag) {
+                const tag = operator.tag.eq;
+                return (value) => {
+                    return Array.isArray(value.tags) && value.tags.includes(tag);
+                };
+            }
+            const tag = operator.tag.neq;
+            return (value) => {
+                return !Array.isArray(value.tags) || !value.tags.includes(tag);
+            };
+        }
+        case isKindEqual(operator): {
+            if ('eq' in operator.kind) {
+                const kind = operator.kind.eq;
+                return (value) => {
+                    return value.kind === kind;
+                };
+            }
+            const kind = operator.kind.neq;
+            return (value) => {
+                return isNullish(value.kind) || value.kind !== kind;
+            };
+        }
+        case isNotOperator(operator): {
+            const predicate = whereOperatorAsPredicate(operator.not);
+            return isNot(predicate);
+        }
+        case isAndOperator(operator): {
+            const predicates = operator.and.map(whereOperatorAsPredicate);
+            return allPass(predicates);
+        }
+        case isOrOperator(operator): {
+            const predicates = operator.or.map(whereOperatorAsPredicate);
+            return anyPass(predicates);
+        }
+        default:
+            nonexhaustive(operator);
+    }
+}

package/dist/types/relation.d.ts

@@ -14,6 +14,8 @@ export interface Relation {
     readonly source: Fqn;
     readonly target: Fqn;
     readonly title: string;
+    readonly description?: string;
+    readonly technology?: string;
     readonly tags?: NonEmptyArray<Tag>;
     readonly kind?: RelationshipKind;
     readonly color?: ThemeColor;

package/dist/types/view-changes.d.ts

@@ -1,7 +1,7 @@
-import type { NonEmptyArray, XYPosition } from './_common';
+import type { NonEmptyArray } from './_common';
 import type { BorderStyle, ElementShape, Fqn } from './element';
 import type { ThemeColor } from './theme';
-import type { EdgeId } from './view';
+import type { ViewManualLayout } from './view';
 export declare namespace ViewChanges {
     interface ChangeElementStyle {
         op: 'change-element-style';
@@ -15,15 +15,7 @@ export declare namespace ViewChanges {
     }
     interface SaveManualLayout {
         op: 'save-manual-layout';
-        nodes: Record<Fqn, {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        }>;
-        edges: Record<EdgeId, {
-            controlPoints: XYPosition[];
-        }>;
+        layout: ViewManualLayout;
     }
 }
 export type ViewChangeOp = ViewChanges.ChangeElementStyle | ViewChanges.SaveManualLayout;

package/dist/types/view.d.ts

@@ -1,4 +1,4 @@
-import type { IconUrl, NonEmptyArray, Point, XYPosition } from './_common';
+import type { IconUrl, NonEmptyArray, Point, XYPoint } from './_common';
 import type { ElementKind, ElementShape, ElementStyle, Fqn, Tag } from './element';
 import type { ElementExpression, ElementPredicateExpression, Expression } from './expression';
 import type { Opaque } from './opaque';
@@ -43,9 +43,8 @@ export interface BasicView<ViewType extends 'element' | 'dynamic'> {
     /**
      * For all views we find common ancestor path.
      * This is used to generate relative paths, i.e.:
-     * - "" for views in the common ancestor directory (or root)
-     * - "subdir" for views in "<root>/subdir"
-     * - "subdir/subdir1" for views in "<root>/subdir/subdir1"
+     * - "/home/project/index.c4" becomes "index.c4"
+     * - "/home/project/subdir/views.c4" becomes "subdir/views.c4"
      *
      * Undefined if the view is auto-generated.
      */
@@ -70,6 +69,12 @@ export interface DynamicViewStep {
     readonly source: Fqn;
     readonly target: Fqn;
     readonly title: string | null;
+    readonly description?: string;
+    readonly technology?: string;
+    readonly color?: ThemeColor;
+    readonly line?: RelationshipLineType;
+    readonly head?: RelationshipArrowType;
+    readonly tail?: RelationshipArrowType;
     readonly isBackward?: boolean;
 }
 export type DynamicViewIncludeRule = {
@@ -130,6 +135,8 @@ export interface ComputedEdge {
     source: NodeId;
     target: NodeId;
     label: string | null;
+    description?: string;
+    technology?: string;
     relations: RelationID[];
     color?: ThemeColor;
     line?: RelationshipLineType;
@@ -145,16 +152,31 @@ export interface ComputedEdge {
      */
     dir?: 'forward' | 'back';
 }
-export interface ComputedElementView extends Omit<ElementView, 'rules'> {
+export interface ComputedElementView extends Omit<ElementView, 'rules' | 'docUri'> {
     readonly extends?: ViewID;
     readonly autoLayout: ViewRuleAutoLayout['autoLayout'];
     readonly nodes: ComputedNode[];
     readonly edges: ComputedEdge[];
+    rules?: never;
+    docUri?: never;
+    /**
+     * Hash of the view object.
+     * This is used to detect changes in layout
+     */
+    hash: string;
 }
-export interface ComputedDynamicView extends Omit<DynamicView, 'rules' | 'steps'> {
+export interface ComputedDynamicView extends Omit<DynamicView, 'rules' | 'steps' | 'docUri'> {
     readonly autoLayout: ViewRuleAutoLayout['autoLayout'];
     readonly nodes: ComputedNode[];
     readonly edges: ComputedEdge[];
+    steps?: never;
+    rules?: never;
+    docUri?: never;
+    /**
+     * Hash of the view object.
+     * This is used to detect changes in layout
+     */
+    hash: string;
 }
 export declare function isComputedDynamicView(view: ComputedView): view is ComputedDynamicView;
 export type ComputedView = ComputedElementView | ComputedDynamicView;
@@ -165,6 +187,7 @@ export type BBox = {
     width: number;
     height: number;
 };
+export declare function getBBoxCenter({ x, y, width, height }: BBox): XYPoint;
 export interface DiagramNode extends ComputedNode {
     width: number;
     height: number;
@@ -173,23 +196,40 @@ export interface DiagramNode extends ComputedNode {
 }
 export interface DiagramEdge extends ComputedEdge {
     points: NonEmptyArray<Point>;
+    controlPoints?: NonEmptyArray<XYPoint>;
     labelBBox?: BBox | null;
+    dotpos?: string;
 }
-export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges'> {
+export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges' | 'manualLayout'> {
     readonly nodes: DiagramNode[];
     readonly edges: DiagramEdge[];
+    readonly bounds: BBox;
+    /**
+     * If diagram has manual layout
+     * But was changed and layout should be recalculated
+     */
+    hasLayoutDrift?: boolean;
+    manualLayout?: never;
+}
+export type ViewManualLayout = {
+    readonly hash: string;
+    readonly x: number;
+    readonly y: number;
     readonly width: number;
     readonly height: number;
-}
-export interface ViewManualLayout {
-    readonly nodes: Record<Fqn, {
+    readonly autoLayout: AutoLayoutDirection;
+    readonly nodes: Record<string, {
+        isCompound: boolean;
         x: number;
         y: number;
         width: number;
         height: number;
     }>;
-    readonly edges: Record<EdgeId, {
-        controlPoints: XYPosition[];
+    readonly edges: Record<string, {
+        dotpos?: string;
+        points: NonEmptyArray<Point>;
+        controlPoints?: NonEmptyArray<XYPoint>;
+        labelBBox?: BBox;
     }>;
-}
+};
 //# sourceMappingURL=view.d.ts.map

package/dist/types/view.js

@@ -42,3 +42,9 @@ export function isComputedDynamicView(view) {
 export function isComputedElementView(view) {
     return isNullish(view.__) || view.__ === 'element';
 }
+export function getBBoxCenter({ x, y, width, height }) {
+    return {
+        x: x + width / 2,
+        y: y + height / 2
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/core",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -71,11 +71,11 @@
     "type-fest": "^4.21.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.6.0",
+    "@likec4/tsconfig": "1.7.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "execa": "^9.3.0",
-    "typescript": "^5.5.3",
-    "vitest": "~2.0.3"
+    "typescript": "^5.5.4",
+    "vitest": "~2.0.5"
   },
   "packageManager": "yarn@4.3.1"
 }

package/src/colors/element.ts

@@ -53,7 +53,7 @@ export const ElementColors = {
     hiContrast: '#FBD3CB',
     // hiContrast: '#f8fafc',
     // loContrast: '#fdd8d8' // radix black red 12
-    loContrast: '#FF977D'
+    loContrast: '#f5b2a3'
   },
   green: {
     fill: '#428a4f',

package/src/colors/relationships.ts

@@ -46,7 +46,7 @@ export const RelationshipColors = {
   red: {
     lineColor: '#AC4D39',
     labelBgColor: '#b91c1c',
-    labelColor: '#FF977D'
+    labelColor: '#f5b2a3'
   },
   secondary: sky,
   sky,

package/src/types/_common.ts

@@ -6,7 +6,7 @@ export type IconUrl = Opaque<string, 'IconUrl'>
 
 export type Point = readonly [x: number, y: number]
 
-export interface XYPosition {
+export interface XYPoint {
   x: number
   y: number
 }

package/src/types/expression.ts

@@ -1,10 +1,12 @@
 import type { IconUrl } from './_common'
 import type { BorderStyle, ElementKind, ElementShape, Fqn, Tag } from './element'
+import type { WhereOperator } from './operators'
 import type { RelationshipArrowType, RelationshipLineType } from './relation'
 import type { ThemeColor } from './theme'
 import type { ViewID } from './view'
 
 interface BaseExpr {
+  where?: never
   element?: never
   custom?: never
   expanded?: never
@@ -38,7 +40,7 @@ export function isExpandedElementExpr(expr: Expression): expr is ExpandedElement
 
 export interface CustomElementExpr extends Omit<BaseExpr, 'custom'> {
   custom: {
-    element: Fqn
+    expr: ElementExpression | ElementWhereExpr
     title?: string
     description?: string
     technology?: string
@@ -52,7 +54,7 @@ export interface CustomElementExpr extends Omit<BaseExpr, 'custom'> {
 }
 
 export function isCustomElement(expr: Expression): expr is CustomElementExpr {
-  return 'custom' in expr
+  return 'custom' in expr && (isElement(expr.custom.expr) || isElementWhere(expr.custom.expr))
 }
 
 export interface WildcardExpr extends Omit<BaseExpr, 'wildcard'> {
@@ -91,7 +93,20 @@ export function isElement(expr: Expression): expr is ElementExpression {
     || isExpandedElementExpr(expr)
 }
 
-export type ElementPredicateExpression = ElementExpression | CustomElementExpr
+export interface ElementWhereExpr extends Omit<BaseExpr, 'where'> {
+  where: {
+    expr: ElementExpression
+    condition: WhereOperator
+  }
+}
+export function isElementWhere(expr: Expression): expr is ElementWhereExpr {
+  return 'where' in expr && isElement(expr.where.expr)
+}
+
+export type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr
+export function isElementPredicateExpr(expr: Expression): expr is ElementPredicateExpression {
+  return isElement(expr) || isElementWhere(expr) || isCustomElement(expr)
+}
 
 export interface RelationExpr extends Omit<BaseExpr, 'source' | 'target'> {
   source: ElementExpression
@@ -122,10 +137,28 @@ export function isOutgoing(expr: Expression): expr is OutgoingExpr {
   return 'outgoing' in expr
 }
 
+export type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr
+
+export function isRelationExpression(expr: Expression): expr is RelationExpression {
+  return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr)
+}
+
+export interface RelationWhereExpr extends Omit<BaseExpr, 'where'> {
+  where: {
+    expr: RelationExpression
+    condition: WhereOperator
+  }
+}
+export function isRelationWhere(expr: Expression): expr is RelationWhereExpr {
+  return 'where' in expr && isRelationExpression(expr.where.expr)
+}
+
 export interface CustomRelationExpr extends Omit<BaseExpr, 'customRelation'> {
   customRelation: {
-    relation: RelationExpr
+    relation: RelationExpression | RelationWhereExpr
     title?: string
+    description?: string
+    technology?: string
     color?: ThemeColor
     line?: RelationshipLineType
     head?: RelationshipArrowType
@@ -136,12 +169,10 @@ export function isCustomRelationExpr(expr: Expression): expr is CustomRelationEx
   return 'customRelation' in expr
 }
 
-export type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr
-
-export type RelationPredicateExpression = RelationExpression | CustomRelationExpr
+export type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr
 
-export function isAnyRelation(expr: Expression): expr is RelationPredicateExpression {
-  return isRelation(expr) || isInOut(expr) || isIncoming(expr) || isOutgoing(expr) || isCustomRelationExpr(expr)
+export function isRelationPredicateExpr(expr: Expression): expr is RelationPredicateExpression {
+  return isRelationExpression(expr) || isRelationWhere(expr) || isCustomRelationExpr(expr)
 }
 
 export type Expression = ElementPredicateExpression | RelationPredicateExpression

package/src/types/index.ts

@@ -3,6 +3,7 @@ export * from './element'
 export * from './expression'
 export * from './model'
 export * from './opaque'
+export * from './operators'
 export * from './relation'
 export * from './theme'
 export * from './view'

package/src/types/operators.ts

@@ -0,0 +1,114 @@
+import { allPass, anyPass, isNot, isNullish } from 'remeda'
+import { nonexhaustive } from '../errors'
+import type { NonEmptyArray } from './_common'
+
+export type EqualOperator<V> = {
+  eq: V
+} | {
+  neq: V
+}
+
+export interface TagEqual {
+  tag: EqualOperator<string>
+}
+export const isTagEqual = (operator: WhereOperator): operator is TagEqual => {
+  return 'tag' in operator
+}
+
+export interface KindEqual {
+  kind: EqualOperator<string>
+}
+export const isKindEqual = (operator: WhereOperator): operator is KindEqual => {
+  return 'kind' in operator
+}
+
+export interface NotOperator<T> {
+  not: T
+}
+export const isNotOperator = (operator: WhereOperator): operator is NotOperator<WhereOperator> => {
+  return 'not' in operator
+}
+
+export interface AndOperator<T> {
+  and: NonEmptyArray<T>
+}
+export const isAndOperator = (operator: WhereOperator): operator is AndOperator<WhereOperator> => {
+  return 'and' in operator
+}
+
+export interface OrOperator<T> {
+  or: NonEmptyArray<T>
+}
+export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
+  return 'or' in operator
+}
+
+export type WhereOperator =
+  | TagEqual
+  | KindEqual
+  | NotOperator<WhereOperator>
+  | AndOperator<WhereOperator>
+  | OrOperator<WhereOperator>
+// type Ops<T> = UnionToIntersection<Op<T>>
+// type Op1<T> = RequireExactlyOne<T>
+
+// export type Operator1<T> = T extends Op<T> ? Op1<Ops<T>> : never
+// export type Operator = Operator1<any>
+
+// type L = keyof UnionToIntersection<Op<any>>
+
+type Filterable<
+  FTag extends string = string,
+  FKind extends string = string
+> = {
+  tags?: FTag[] | null
+  kind?: FKind
+}
+
+type OperatorPredicate<V extends Filterable> = (value: V) => boolean
+
+export function whereOperatorAsPredicate<
+  FTag extends string = string,
+  FKind extends string = string
+>(operator: WhereOperator): OperatorPredicate<Filterable<FTag, FKind>> {
+  switch (true) {
+    case isTagEqual(operator): {
+      if ('eq' in operator.tag) {
+        const tag = operator.tag.eq
+        return (value) => {
+          return Array.isArray(value.tags) && value.tags.includes(tag as FTag)
+        }
+      }
+      const tag = operator.tag.neq
+      return (value) => {
+        return !Array.isArray(value.tags) || !value.tags.includes(tag as FTag)
+      }
+    }
+    case isKindEqual(operator): {
+      if ('eq' in operator.kind) {
+        const kind = operator.kind.eq
+        return (value) => {
+          return value.kind === kind
+        }
+      }
+      const kind = operator.kind.neq
+      return (value) => {
+        return isNullish(value.kind) || value.kind !== kind
+      }
+    }
+    case isNotOperator(operator): {
+      const predicate = whereOperatorAsPredicate(operator.not)
+      return isNot(predicate)
+    }
+    case isAndOperator(operator): {
+      const predicates = operator.and.map(whereOperatorAsPredicate)
+      return allPass(predicates)
+    }
+    case isOrOperator(operator): {
+      const predicates = operator.or.map(whereOperatorAsPredicate)
+      return anyPass(predicates)
+    }
+    default:
+      nonexhaustive(operator)
+  }
+}

package/src/types/relation.ts

@@ -30,6 +30,8 @@ export interface Relation {
   readonly source: Fqn
   readonly target: Fqn
   readonly title: string
+  readonly description?: string
+  readonly technology?: string
   readonly tags?: NonEmptyArray<Tag>
   readonly kind?: RelationshipKind
   readonly color?: ThemeColor

package/src/types/view-changes.ts

@@ -1,7 +1,7 @@
-import type { NonEmptyArray, XYPosition } from './_common'
+import type { NonEmptyArray, XYPoint } from './_common'
 import type { BorderStyle, ElementShape, Fqn } from './element'
 import type { ThemeColor } from './theme'
-import type { EdgeId } from './view'
+import type { EdgeId, ViewManualLayout } from './view'
 
 export namespace ViewChanges {
   export interface ChangeElementStyle {
@@ -17,15 +17,7 @@ export namespace ViewChanges {
 
   export interface SaveManualLayout {
     op: 'save-manual-layout'
-    nodes: Record<Fqn, {
-      x: number
-      y: number
-      width: number
-      height: number
-    }>
-    edges: Record<EdgeId, {
-      controlPoints: XYPosition[]
-    }>
+    layout: ViewManualLayout
   }
 }
 export type ViewChangeOp = ViewChanges.ChangeElementStyle | ViewChanges.SaveManualLayout

package/src/types/view.ts

@@ -1,5 +1,5 @@
 import { isNullish } from 'remeda'
-import type { IconUrl, NonEmptyArray, Point, XYPosition } from './_common'
+import type { IconUrl, NonEmptyArray, Point, XYPoint } from './_common'
 import type { ElementKind, ElementShape, ElementStyle, Fqn, Tag } from './element'
 import type { ElementExpression, ElementPredicateExpression, Expression } from './expression'
 import type { Opaque } from './opaque'
@@ -63,9 +63,8 @@ export interface BasicView<ViewType extends 'element' | 'dynamic'> {
   /**
    * For all views we find common ancestor path.
    * This is used to generate relative paths, i.e.:
-   * - "" for views in the common ancestor directory (or root)
-   * - "subdir" for views in "<root>/subdir"
-   * - "subdir/subdir1" for views in "<root>/subdir/subdir1"
+   * - "/home/project/index.c4" becomes "index.c4"
+   * - "/home/project/subdir/views.c4" becomes "subdir/views.c4"
    *
    * Undefined if the view is auto-generated.
    */
@@ -94,6 +93,12 @@ export interface DynamicViewStep {
   readonly source: Fqn
   readonly target: Fqn
   readonly title: string | null
+  readonly description?: string
+  readonly technology?: string
+  readonly color?: ThemeColor
+  readonly line?: RelationshipLineType
+  readonly head?: RelationshipArrowType
+  readonly tail?: RelationshipArrowType
   readonly isBackward?: boolean
 }
 
@@ -188,6 +193,8 @@ export interface ComputedEdge {
   source: NodeId
   target: NodeId
   label: string | null
+  description?: string
+  technology?: string
   relations: RelationID[]
   color?: ThemeColor
   line?: RelationshipLineType
@@ -204,16 +211,33 @@ export interface ComputedEdge {
   dir?: 'forward' | 'back'
 }
 
-export interface ComputedElementView extends Omit<ElementView, 'rules'> {
+export interface ComputedElementView extends Omit<ElementView, 'rules' | 'docUri'> {
   readonly extends?: ViewID
   readonly autoLayout: ViewRuleAutoLayout['autoLayout']
   readonly nodes: ComputedNode[]
   readonly edges: ComputedEdge[]
+  rules?: never
+  docUri?: never
+
+  /**
+   * Hash of the view object.
+   * This is used to detect changes in layout
+   */
+  hash: string
 }
-export interface ComputedDynamicView extends Omit<DynamicView, 'rules' | 'steps'> {
+export interface ComputedDynamicView extends Omit<DynamicView, 'rules' | 'steps' | 'docUri'> {
   readonly autoLayout: ViewRuleAutoLayout['autoLayout']
   readonly nodes: ComputedNode[]
   readonly edges: ComputedEdge[]
+  steps?: never
+  rules?: never
+  docUri?: never
+
+  /**
+   * Hash of the view object.
+   * This is used to detect changes in layout
+   */
+  hash: string
 }
 export function isComputedDynamicView(view: ComputedView): view is ComputedDynamicView {
   return view.__ === 'dynamic'
@@ -233,6 +257,18 @@ export type BBox = {
   height: number
 }
 
+export function getBBoxCenter({
+  x,
+  y,
+  width,
+  height
+}: BBox): XYPoint {
+  return {
+    x: x + width / 2,
+    y: y + height / 2
+  }
+}
+
 export interface DiagramNode extends ComputedNode {
   width: number
   height: number
@@ -242,25 +278,52 @@ export interface DiagramNode extends ComputedNode {
 }
 
 export interface DiagramEdge extends ComputedEdge {
+  // Bezier points
   points: NonEmptyArray<Point>
+  // Control points to adjust the edge
+  controlPoints?: NonEmptyArray<XYPoint>
   labelBBox?: BBox | null
+  // Graphviz edge POS
+  // TODO: temporary solution, should be moved out
+  dotpos?: string
 }
 
-export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges'> {
+export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges' | 'manualLayout'> {
   readonly nodes: DiagramNode[]
   readonly edges: DiagramEdge[]
-  readonly width: number
-  readonly height: number
+  readonly bounds: BBox
+
+  /**
+   * If diagram has manual layout
+   * But was changed and layout should be recalculated
+   */
+  hasLayoutDrift?: boolean
+  // Should not exist in DiagramView
+  manualLayout?: never
 }
 
-export interface ViewManualLayout {
-  readonly nodes: Record<Fqn, {
+export type ViewManualLayout = {
+  // Object hash of previous layout
+  readonly hash: string
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+  readonly autoLayout: AutoLayoutDirection
+  readonly nodes: Record<string, {
+    isCompound: boolean
     x: number
     y: number
     width: number
     height: number
   }>
-  readonly edges: Record<EdgeId, {
-    controlPoints: XYPosition[]
+  readonly edges: Record<string, {
+    // Graphviz edge POS
+    dotpos?: string
+    // Bezier points
+    points: NonEmptyArray<Point>
+    // Control points to adjust the edge
+    controlPoints?: NonEmptyArray<XYPoint>
+    labelBBox?: BBox
   }>
 }