@likec4/core 0.40.0 → 0.42.0

package/README.md

@@ -1,10 +1,6 @@
-# LikeC4 Core
+# `@likec4/core`
 
-[docs](https://likec4.dev/docs/) | [example](https://likec4.dev/examples/bigbank/likec4/)
-
-```bash
-npm install @likec4/core
-```
+[docs](https://likec4.dev/docs/)
 
 Package contains:
 

package/dist/cjs/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/{esm/colors.js → cjs/colors/element.js}

@@ -1,38 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ElementColors = 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"
 };
-export const RelationColors = {
-  lineColor: "#b1b1b1",
-  labelColor: "#b1b1b1"
-};
-export const Colors = {
+const ElementColors = {
   primary: blue,
   blue,
   secondary: sky,
@@ -85,6 +75,7 @@ export const Colors = {
     loContrast: "#ffe0c2"
     // colors.gray[800],
   },
+
   indigo: {
     // fill: colors.indigo[500],
     // stroke: colors.indigo[600],
@@ -96,9 +87,4 @@ export const Colors = {
     loContrast: "#c7d2fe"
   }
 };
-export const defaultTheme = {
-  font: "Helvetica",
-  shadow: "#0a0a0a",
-  relation: RelationColors,
-  colors: Colors
-};
+exports.ElementColors = ElementColors;

package/dist/cjs/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/cjs/colors/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ElementColors", {
+  enumerable: true,
+  get: function () {
+    return _element.ElementColors;
+  }
+});
+Object.defineProperty(exports, "RelationshipColors", {
+  enumerable: true,
+  get: function () {
+    return _relationships.RelationshipColors;
+  }
+});
+exports.defaultTheme = void 0;
+var _element = require("./element");
+var _relationships = require("./relationships");
+const defaultTheme = {
+  elements: _element.ElementColors,
+  relationships: _relationships.RelationshipColors,
+  font: "Helvetica",
+  shadow: "#0a0a0a"
+};
+exports.defaultTheme = defaultTheme;

package/dist/cjs/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/cjs/colors/relationships.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelationshipColors = void 0;
+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
+};
+
+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
+};
+exports.RelationshipColors = RelationshipColors;

package/dist/cjs/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/cjs/index.js

@@ -14,17 +14,6 @@ Object.keys(_colors).forEach(function (key) {
     }
   });
 });
-var _computeView = require("./compute-view");
-Object.keys(_computeView).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _computeView[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _computeView[key];
-    }
-  });
-});
 var _errors = require("./errors");
 Object.keys(_errors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -36,17 +25,6 @@ Object.keys(_errors).forEach(function (key) {
     }
   });
 });
-var _modelIndex = require("./model-index");
-Object.keys(_modelIndex).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _modelIndex[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _modelIndex[key];
-    }
-  });
-});
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/relation.js

@@ -1 +1,12 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultRelationshipColor = exports.DefaultLineStyle = exports.DefaultArrowType = void 0;
+const DefaultLineStyle = "dashed";
+exports.DefaultLineStyle = DefaultLineStyle;
+const DefaultArrowType = "normal";
+exports.DefaultArrowType = DefaultArrowType;
+const DefaultRelationshipColor = "gray";
+exports.DefaultRelationshipColor = DefaultRelationshipColor;

package/dist/cjs/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;
 }

package/dist/cjs/types/view.d.ts

@@ -4,10 +4,13 @@ import type { ElementExpression, Expression } from './expression';
 import type { IconUrl, NonEmptyArray } from './_common';
 import type { ThemeColor } from './theme';
 export type ViewID = Opaque<string, 'ViewID'>;
-export interface ViewRuleExpression {
-    isInclude: boolean;
-    exprs: Expression[];
-}
+export type ViewRuleExpression = {
+    include: Expression[];
+    exclude?: never;
+} | {
+    include?: never;
+    exclude: Expression[];
+};
 export declare function isViewRuleExpression(rule: ViewRule): rule is ViewRuleExpression;
 export interface ViewRuleStyle {
     targets: ElementExpression[];

package/dist/cjs/types/view.js

@@ -9,7 +9,7 @@ exports.isViewRuleAutoLayout = isViewRuleAutoLayout;
 exports.isViewRuleExpression = isViewRuleExpression;
 exports.isViewRuleStyle = isViewRuleStyle;
 function isViewRuleExpression(rule) {
-  return "exprs" in rule && "isInclude" in rule;
+  return "include" in rule && Array.isArray(rule.include) || "exclude" in rule && Array.isArray(rule.exclude);
 }
 function isViewRuleStyle(rule) {
   return "style" in rule && "targets" in rule;