@likec4/core 0.40.0 → 0.42.0

package/dist/cjs/utils/fqn.d.ts

@@ -5,13 +5,18 @@ export declare function isAncestor<E extends {
 }>(...args: [ancestor: Fqn, another: Fqn] | [ancestor: E, another: E]): boolean;
 export declare function isSameHierarchy<E extends {
     id: Fqn;
-}>(...args: [one: Fqn, another: Fqn] | [one: E, another: E]): boolean;
+}>(one: E | Fqn, another: E | Fqn): boolean;
 export declare function isDescendantOf<E extends {
     id: Fqn;
 }>(ancestors: E[]): (e: E) => boolean;
 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;
+/**
+ * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+ * (from closest to root)
+ */
+export declare function ancestorsFqn(fqn: Fqn): Fqn[];
 /**
  * Compares two fully qualified names (fqns) hierarchically based on their depth.
  * From parent nodes to leaves

package/dist/cjs/utils/fqn.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ancestorsFqn = ancestorsFqn;
 exports.commonAncestor = commonAncestor;
 exports.compareByFqnHierarchically = compareByFqnHierarchically;
 exports.compareFqnHierarchically = compareFqnHierarchically;
@@ -27,10 +28,10 @@ function isAncestor(...args) {
   const another = (0, _guards.isString)(args[1]) ? args[1] : args[1].id;
   return another.startsWith(ancestor + ".");
 }
-function isSameHierarchy(...args) {
-  const one = (0, _guards.isString)(args[0]) ? args[0] : args[0].id;
-  const another = (0, _guards.isString)(args[1]) ? args[1] : args[1].id;
-  return one === another || another.startsWith(one + ".") || one.startsWith(another + ".");
+function isSameHierarchy(one, another) {
+  const first = (0, _guards.isString)(one) ? one : one.id;
+  const second = (0, _guards.isString)(another) ? another : another.id;
+  return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
 }
 function isDescendantOf(ancestors) {
   const predicates = ancestors.flatMap(a => [e => e.id === a.id, e => isAncestor(a, e)]);
@@ -66,6 +67,18 @@ function parentFqn(fqn) {
   }
   return null;
 }
+function ancestorsFqn(fqn) {
+  const path = fqn.split(".");
+  path.pop();
+  if (path.length === 0) {
+    return [];
+  }
+  return path.reduce((acc, _, idx) => {
+    const ancestor = path.slice(0, idx + 1).join(".");
+    acc.unshift(ancestor);
+    return acc;
+  }, []);
+}
 function compareFqnHierarchically(a, b) {
   const depthA = a.split(".").length;
   const depthB = b.split(".").length;

package/dist/cjs/utils/guards.d.ts

@@ -1,3 +1,4 @@
 import type { NonEmptyArray } from '../types';
+export { hasAtLeast } from 'remeda';
 export declare function isString(value: unknown): value is string;
 export declare function isNonEmptyArray<A>(arr: ArrayLike<A>): arr is NonEmptyArray<A>;

package/dist/cjs/utils/guards.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "hasAtLeast", {
+  enumerable: true,
+  get: function () {
+    return _remeda.hasAtLeast;
+  }
+});
 exports.isNonEmptyArray = isNonEmptyArray;
 exports.isString = isString;
+var _remeda = require("remeda");
 function isString(value) {
   return value != null && typeof value === "string";
 }

package/dist/cjs/utils/index.d.ts

@@ -1,4 +1,3 @@
 export * from './fqn';
 export * from './guards';
-export * from './compute-node-levels';
 export * from './relations';

package/dist/cjs/utils/index.js

@@ -25,17 +25,6 @@ Object.keys(_guards).forEach(function (key) {
     }
   });
 });
-var _computeNodeLevels = require("./compute-node-levels");
-Object.keys(_computeNodeLevels).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _computeNodeLevels[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _computeNodeLevels[key];
-    }
-  });
-});
 var _relations = require("./relations");
 Object.keys(_relations).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/esm/colors/element.d.ts

@@ -0,0 +1,68 @@
+export declare const ElementColors: {
+    readonly primary: {
+        fill: "#3b82f6";
+        stroke: "#2563eb";
+        hiContrast: "#eff6ff";
+        loContrast: "#bfdbfe";
+    };
+    readonly blue: {
+        fill: "#3b82f6";
+        stroke: "#2563eb";
+        hiContrast: "#eff6ff";
+        loContrast: "#bfdbfe";
+    };
+    readonly secondary: {
+        fill: "#0284c7";
+        stroke: "#0369a1";
+        hiContrast: "#f0f9ff";
+        loContrast: "#e0f2fe";
+    };
+    readonly sky: {
+        fill: "#0284c7";
+        stroke: "#0369a1";
+        hiContrast: "#f0f9ff";
+        loContrast: "#e0f2fe";
+    };
+    readonly muted: {
+        fill: "#64748b";
+        stroke: "#475569";
+        hiContrast: "#f8fafc";
+        loContrast: "#e2e8f0";
+    };
+    readonly slate: {
+        fill: "#64748b";
+        stroke: "#475569";
+        hiContrast: "#f8fafc";
+        loContrast: "#e2e8f0";
+    };
+    readonly gray: {
+        readonly fill: "#737373";
+        readonly stroke: "#525252";
+        readonly hiContrast: "#fafafa";
+        readonly loContrast: "#e5e5e5";
+    };
+    readonly red: {
+        readonly fill: "#b54548";
+        readonly stroke: "#8c333a";
+        readonly hiContrast: "#f8fafc";
+        readonly loContrast: "#F9C6C6";
+    };
+    readonly green: {
+        readonly fill: "#428a4f";
+        readonly stroke: "#2d5d39";
+        readonly hiContrast: "#f8fafc";
+        readonly loContrast: "#c2f0c2";
+    };
+    readonly amber: {
+        readonly fill: "#d97706";
+        readonly stroke: "#b45309";
+        readonly hiContrast: "#f8fafc";
+        readonly loContrast: "#ffe0c2";
+    };
+    readonly indigo: {
+        readonly fill: "#6366f1";
+        readonly stroke: "#4f46e5";
+        readonly hiContrast: "#eef2ff";
+        readonly loContrast: "#c7d2fe";
+    };
+};

package/dist/{cjs/colors.js → esm/colors/element.js}

@@ -1,45 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultTheme = exports.RelationColors = exports.Colors = void 0;
 const blue = {
-  // fill: colors.blue[500],
-  // stroke: colors.blue[600],
-  // hiContrast: colors.blue[50],
-  // loContrast: colors.blue[200],
   fill: "#3b82f6",
   stroke: "#2563eb",
   hiContrast: "#eff6ff",
   loContrast: "#bfdbfe"
 };
 const sky = {
-  // fill: colors.sky[600],
-  // stroke: colors.sky[700],
-  // hiContrast: colors.sky[50],
-  // loContrast: colors.sky[100],
   fill: "#0284c7",
   stroke: "#0369a1",
   hiContrast: "#f0f9ff",
   loContrast: "#e0f2fe"
 };
 const slate = {
-  // fill: colors.slate[500],
-  // stroke: colors.slate[600],
-  // hiContrast: colors.slate[50],
-  // loContrast: colors.slate[200],
   fill: "#64748b",
   stroke: "#475569",
   hiContrast: "#f8fafc",
   loContrast: "#e2e8f0"
 };
-const RelationColors = {
-  lineColor: "#b1b1b1",
-  labelColor: "#b1b1b1"
-};
-exports.RelationColors = RelationColors;
-const Colors = {
+export const ElementColors = {
   primary: blue,
   blue,
   secondary: sky,
@@ -92,7 +69,6 @@ const Colors = {
     loContrast: "#ffe0c2"
     // colors.gray[800],
   },
-
   indigo: {
     // fill: colors.indigo[500],
     // stroke: colors.indigo[600],
@@ -104,11 +80,3 @@ const Colors = {
     loContrast: "#c7d2fe"
   }
 };
-exports.Colors = Colors;
-const defaultTheme = {
-  font: "Helvetica",
-  shadow: "#0a0a0a",
-  relation: RelationColors,
-  colors: Colors
-};
-exports.defaultTheme = defaultTheme;

package/dist/esm/colors/index.d.ts

@@ -0,0 +1,132 @@
+import { ElementColors } from './element';
+import { RelationshipColors } from './relationships';
+export declare const defaultTheme: {
+    elements: {
+        readonly primary: {
+            fill: "#3b82f6";
+            stroke: "#2563eb";
+            hiContrast: "#eff6ff";
+            loContrast: "#bfdbfe";
+        };
+        readonly blue: {
+            fill: "#3b82f6";
+            stroke: "#2563eb";
+            hiContrast: "#eff6ff";
+            loContrast: "#bfdbfe";
+        };
+        readonly secondary: {
+            fill: "#0284c7";
+            stroke: "#0369a1";
+            hiContrast: "#f0f9ff";
+            loContrast: "#e0f2fe";
+        };
+        readonly sky: {
+            fill: "#0284c7";
+            stroke: "#0369a1";
+            hiContrast: "#f0f9ff";
+            loContrast: "#e0f2fe";
+        };
+        readonly muted: {
+            fill: "#64748b";
+            stroke: "#475569";
+            hiContrast: "#f8fafc";
+            loContrast: "#e2e8f0";
+        };
+        readonly slate: {
+            fill: "#64748b";
+            stroke: "#475569";
+            hiContrast: "#f8fafc";
+            loContrast: "#e2e8f0";
+        };
+        readonly gray: {
+            readonly fill: "#737373";
+            readonly stroke: "#525252";
+            readonly hiContrast: "#fafafa";
+            readonly loContrast: "#e5e5e5";
+        };
+        readonly red: {
+            readonly fill: "#b54548";
+            readonly stroke: "#8c333a";
+            readonly hiContrast: "#f8fafc";
+            readonly loContrast: "#F9C6C6";
+        };
+        readonly green: {
+            readonly fill: "#428a4f";
+            readonly stroke: "#2d5d39";
+            readonly hiContrast: "#f8fafc";
+            readonly loContrast: "#c2f0c2";
+        };
+        readonly amber: {
+            readonly fill: "#d97706";
+            readonly stroke: "#b45309";
+            readonly hiContrast: "#f8fafc";
+            readonly loContrast: "#ffe0c2";
+        };
+        readonly indigo: {
+            readonly fill: "#6366f1";
+            readonly stroke: "#4f46e5";
+            readonly hiContrast: "#eef2ff";
+            readonly loContrast: "#c7d2fe";
+        };
+    };
+    relationships: {
+        amber: {
+            lineColor: "#b45309";
+            labelBgColor: "#78350f";
+            labelColor: "#f59e0b";
+        };
+        blue: {
+            lineColor: "#3b82f6";
+            labelBgColor: "#172554";
+            labelColor: "#60a5fa";
+        };
+        gray: {
+            lineColor: "#6E6E6E";
+            labelBgColor: "#18191b";
+            labelColor: "#C6C6C6";
+        };
+        green: {
+            lineColor: "#15803d";
+            labelBgColor: "#052e16";
+            labelColor: "#22c55e";
+        };
+        indigo: {
+            lineColor: "#6366f1";
+            labelBgColor: "#1e1b4b";
+            labelColor: "#818cf8";
+        };
+        muted: {
+            lineColor: "#64748b";
+            labelBgColor: "#0f172a";
+            labelColor: "#cbd5e1";
+        };
+        primary: {
+            lineColor: "#3b82f6";
+            labelBgColor: "#172554";
+            labelColor: "#60a5fa";
+        };
+        red: {
+            lineColor: "#b91c1c";
+            labelBgColor: "#b91c1c";
+            labelColor: "#dc2626";
+        };
+        secondary: {
+            lineColor: "#0ea5e9";
+            labelBgColor: "#082f49";
+            labelColor: "#38bdf8";
+        };
+        sky: {
+            lineColor: "#0ea5e9";
+            labelBgColor: "#082f49";
+            labelColor: "#38bdf8";
+        };
+        slate: {
+            lineColor: "#64748b";
+            labelBgColor: "#0f172a";
+            labelColor: "#cbd5e1";
+        };
+    };
+    font: "Helvetica";
+    shadow: "#0a0a0a";
+};
+export { ElementColors, RelationshipColors };

package/dist/esm/colors/index.js

@@ -0,0 +1,9 @@
+import { ElementColors } from "./element.js";
+import { RelationshipColors } from "./relationships.js";
+export const defaultTheme = {
+  elements: ElementColors,
+  relationships: RelationshipColors,
+  font: "Helvetica",
+  shadow: "#0a0a0a"
+};
+export { ElementColors, RelationshipColors };

package/dist/esm/colors/relationships.d.ts

@@ -0,0 +1,57 @@
+export declare const RelationshipColors: {
+    amber: {
+        lineColor: "#b45309";
+        labelBgColor: "#78350f";
+        labelColor: "#f59e0b";
+    };
+    blue: {
+        lineColor: "#3b82f6";
+        labelBgColor: "#172554";
+        labelColor: "#60a5fa";
+    };
+    gray: {
+        lineColor: "#6E6E6E";
+        labelBgColor: "#18191b";
+        labelColor: "#C6C6C6";
+    };
+    green: {
+        lineColor: "#15803d";
+        labelBgColor: "#052e16";
+        labelColor: "#22c55e";
+    };
+    indigo: {
+        lineColor: "#6366f1";
+        labelBgColor: "#1e1b4b";
+        labelColor: "#818cf8";
+    };
+    muted: {
+        lineColor: "#64748b";
+        labelBgColor: "#0f172a";
+        labelColor: "#cbd5e1";
+    };
+    primary: {
+        lineColor: "#3b82f6";
+        labelBgColor: "#172554";
+        labelColor: "#60a5fa";
+    };
+    red: {
+        lineColor: "#b91c1c";
+        labelBgColor: "#b91c1c";
+        labelColor: "#dc2626";
+    };
+    secondary: {
+        lineColor: "#0ea5e9";
+        labelBgColor: "#082f49";
+        labelColor: "#38bdf8";
+    };
+    sky: {
+        lineColor: "#0ea5e9";
+        labelBgColor: "#082f49";
+        labelColor: "#38bdf8";
+    };
+    slate: {
+        lineColor: "#64748b";
+        labelBgColor: "#0f172a";
+        labelColor: "#cbd5e1";
+    };
+};

package/dist/esm/colors/relationships.js

@@ -0,0 +1,64 @@
+const gray = {
+  lineColor: "#6E6E6E",
+  labelBgColor: "#18191b",
+  labelColor: "#C6C6C6"
+};
+const slate = {
+  lineColor: "#64748b",
+  // 500
+  labelBgColor: "#0f172a",
+  // 900
+  labelColor: "#cbd5e1"
+  // 300
+};
+const blue = {
+  lineColor: "#3b82f6",
+  // 500
+  labelBgColor: "#172554",
+  // 950
+  labelColor: "#60a5fa"
+  // 400
+};
+const sky = {
+  lineColor: "#0ea5e9",
+  // 500
+  labelBgColor: "#082f49",
+  // 950
+  labelColor: "#38bdf8"
+  // 400
+};
+export const RelationshipColors = {
+  amber: {
+    lineColor: "#b45309",
+    labelBgColor: "#78350f",
+    labelColor: "#f59e0b"
+  },
+  blue,
+  gray,
+  green: {
+    lineColor: "#15803d",
+    // 700
+    labelBgColor: "#052e16",
+    //950
+    labelColor: "#22c55e"
+    // 500
+  },
+  indigo: {
+    lineColor: "#6366f1",
+    // 500
+    labelBgColor: "#1e1b4b",
+    // 950
+    labelColor: "#818cf8"
+    // 400
+  },
+  muted: slate,
+  primary: blue,
+  red: {
+    lineColor: "#b91c1c",
+    labelBgColor: "#b91c1c",
+    labelColor: "#dc2626"
+  },
+  secondary: sky,
+  sky,
+  slate
+};

package/dist/esm/index.d.ts

@@ -1,7 +1,5 @@
 export * from './colors';
-export * from './compute-view';
 export * from './errors';
-export * from './model-index';
 export * from './types';
 export * from './utils';
 export type * as likec4 from './types';

package/dist/esm/index.js

@@ -1,6 +1,4 @@
-export * from "./colors.js";
-export * from "./compute-view/index.js";
+export * from "./colors/index.js";
 export * from "./errors/index.js";
-export * from "./model-index/index.js";
 export * from "./types/index.js";
 export * from "./utils/index.js";

package/dist/esm/types/computed-view.d.ts

@@ -1,6 +1,6 @@
 import type { Opaque } from './opaque';
 import type { ElementKind, ElementShape, Fqn, Tag } from './element';
-import type { RelationID } from './relation';
+import type { RelationID, RelationshipArrowType, RelationshipLineType } from './relation';
 import type { BasicElementView, ViewID, ViewRuleAutoLayout } from './view';
 import type { IconUrl, NonEmptyArray } from './_common';
 import type { ThemeColor } from './theme';
@@ -31,11 +31,14 @@ export interface ComputedEdge {
     target: NodeId;
     label: string | null;
     relations: RelationID[];
+    color?: ThemeColor;
+    line?: RelationshipLineType;
+    head?: RelationshipArrowType;
+    tail?: RelationshipArrowType;
 }
-export interface ComputedView extends BasicElementView {
-    viewOf?: Fqn;
-    extends?: ViewID;
-    autoLayout: ViewRuleAutoLayout['autoLayout'];
-    nodes: ComputedNode[];
-    edges: ComputedEdge[];
+export interface ComputedView extends Omit<BasicElementView, 'rules'> {
+    readonly extends?: ViewID;
+    readonly autoLayout: ViewRuleAutoLayout['autoLayout'];
+    readonly nodes: ComputedNode[];
+    readonly edges: ComputedEdge[];
 }

package/dist/esm/types/diagram.d.ts

@@ -1,6 +1,13 @@
 import type { ColorLiteral } from './theme';
 import type { ComputedEdge, ComputedNode, ComputedView } from './computed-view';
+import type { NonEmptyArray } from './_common';
 export type Point = [x: number, y: number];
+export type BBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export interface DiagramLabel {
     align: 'left' | 'right' | 'center';
     fontStyle?: 'bold' | 'normal';
@@ -20,13 +27,15 @@ export interface DiagramNode extends ComputedNode {
     depth?: number;
 }
 export interface DiagramEdge extends ComputedEdge {
-    points: Point[];
-    headArrow?: Point[];
-    labels: DiagramLabel[];
+    points: NonEmptyArray<Point>;
+    headArrow?: NonEmptyArray<Point>;
+    tailArrow?: NonEmptyArray<Point>;
+    labels?: NonEmptyArray<DiagramLabel>;
+    labelBBox?: BBox;
 }
 export interface DiagramView extends Omit<ComputedView, 'nodes' | 'edges'> {
     readonly nodes: DiagramNode[];
     readonly edges: DiagramEdge[];
-    width: number;
-    height: number;
+    readonly width: number;
+    readonly height: number;
 }

package/dist/esm/types/expression.d.ts

@@ -14,7 +14,7 @@ interface BaseExpr {
 }
 export interface ElementRefExpr extends Omit<BaseExpr, 'element' | 'isDescedants'> {
     element: Fqn;
-    isDescedants: boolean;
+    isDescedants?: boolean;
 }
 export declare function isElementRef(expr: Expression): expr is ElementRefExpr;
 export interface WildcardExpr extends Omit<BaseExpr, 'wildcard'> {

package/dist/esm/types/relation.d.ts

@@ -1,10 +1,22 @@
 import type { Opaque } from './opaque';
 import type { Fqn, Tag } from './element';
+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 declare const DefaultLineStyle = "dashed";
+export declare const DefaultArrowType = "normal";
+export declare const DefaultRelationshipColor = "gray";
 export interface Relation {
     readonly id: RelationID;
     readonly source: Fqn;
     readonly target: Fqn;
     readonly title: string;
     readonly tags?: Tag[];
+    readonly kind?: RelationshipKind;
+    readonly color?: ThemeColor;
+    readonly line?: RelationshipLineType;
+    readonly head?: RelationshipArrowType;
+    readonly tail?: RelationshipArrowType;
 }

package/dist/esm/types/relation.js

@@ -0,0 +1,3 @@
+export const DefaultLineStyle = "dashed";
+export const DefaultArrowType = "normal";
+export const DefaultRelationshipColor = "gray";

package/dist/esm/types/theme.d.ts

@@ -1,28 +1,26 @@
 export type ThemeColor = 'amber' | 'blue' | 'gray' | 'slate' | 'green' | 'indigo' | 'muted' | 'primary' | 'red' | 'secondary' | 'sky';
 export type HexColorLiteral = `#${string}`;
 export type ColorLiteral = HexColorLiteral;
-export type InteractiveColor = HexColorLiteral | [
-    HexColorLiteral,
-    {
-        onHover: HexColorLiteral;
-    }
-];
-export interface ThemeColorValues {
+export interface ElementThemeColorValues {
     fill: ColorLiteral;
     stroke: ColorLiteral;
     hiContrast: ColorLiteral;
     loContrast: ColorLiteral;
 }
-export type ThemeColors = {
-    [key in ThemeColor]: ThemeColorValues;
+export type ElementThemeColors = {
+    [key in ThemeColor]: ElementThemeColorValues;
 };
-export interface ThemeRelationColors {
-    lineColor: InteractiveColor;
-    labelColor: InteractiveColor;
+export interface RelationshipThemeColorValues {
+    lineColor: ColorLiteral;
+    labelBgColor: ColorLiteral;
+    labelColor: ColorLiteral;
 }
+export type RelationshipThemeColors = {
+    [key in ThemeColor]: RelationshipThemeColorValues;
+};
 export interface LikeC4Theme {
     font: 'Helvetica';
     shadow: ColorLiteral;
-    relation: ThemeRelationColors;
-    colors: ThemeColors;
+    relationships: RelationshipThemeColors;
+    elements: ElementThemeColors;
 }