@likec4/core 1.34.2 → 1.35.0

package/dist/shared/{core.4SpVCM9m.mjs → core.rpF8esVq.mjs}

@@ -1,24 +1,29 @@
 import { u as u$1 } from './core.DbRvwARP.mjs';
-import { p } from './core.BTnf14gD.mjs';
+import { p } from './core.Y3j3s-oq.mjs';
 import { m as m$2 } from './core.ByrmCl9I.mjs';
-import { g as hierarchyLevel, n as nameFromFqn, i as isAncestor, d as commonAncestor, l as sortNaturalByFqn, m as sortParentsFirst, p as parentFqn, b as ancestorsFqn, C, c as compareNatural } from './core.C_C-3c1S.mjs';
+import { i as i$2 } from './core.CpwrZi3D.mjs';
+import { g as hierarchyLevel, n as nameFromFqn, i as isAncestor, d as commonAncestor, l as sortNaturalByFqn, m as sortParentsFirst, p as parentFqn, b as ancestorsFqn, C, a as compareNaturalHierarchically, c as compareNatural } from './core.DQj9iv_y.mjs';
 import { g as getOrCreate } from './core.DcS-0zys.mjs';
-import { i, n as n$2, e as DeploymentNodeModel, c as DeployedInstanceModel, N as NestedElementOfDeployedInstanceModel, g as DeploymentRelationModel } from './core.D5qVzkws.mjs';
-import { D as DefaultMap } from './core.BMCb0wJI.mjs';
-import { a as nonNullable, i as invariant } from './core.D4npX2q8.mjs';
-import { s as splitGlobalFqn, F as FqnRef, b as isDeploymentNode, r as extractStep, q as isStepEdgeId, m as isGroupElementKind, a as _type, _ as _stage, i as isOnStage, w as whereOperatorAsPredicate, o as isGlobalFqn, n as GlobalFqn } from './core.Br7Fab9l.mjs';
+import { i as i$1, n as n$3, e as DeploymentNodeModel, c as DeployedInstanceModel, N as NestedElementOfDeployedInstanceModel, g as DeploymentRelationModel } from './core.CQS11dNK.mjs';
+import { D as DefaultMap } from './core.yaRvRnMW.mjs';
+import { i as invariant, a as nonNullable } from './core.D4npX2q8.mjs';
+import { s as splitGlobalFqn, F as FqnRef, b as isDeploymentNode, r as extractStep, q as isStepEdgeId, m as isGroupElementKind, a as _type, _ as _stage, i as isOnStage, w as whereOperatorAsPredicate, o as isGlobalFqn, n as GlobalFqn } from './core.BajmN8zR.mjs';
 import { m as memoizeProp } from './core.B0oEIXqd.mjs';
 import { i as ifilter } from './core.BH9nN-_I.mjs';
-import { a as DefaultElementShape, D as DefaultThemeColor, R as RichText, b as DefaultShapeSize, n as n$1, g as DefaultRelationshipColor, e as DefaultLineStyle } from './core.D56nCp7e.mjs';
+import { a as DefaultElementShape, D as DefaultThemeColor, R as RichText, b as DefaultShapeSize, n as n$2, g as DefaultRelationshipColor, e as DefaultLineStyle } from './core.D56nCp7e.mjs';
 import { a as ihead, i as ifind } from './core.DsMrjY2q.mjs';
 
 function r(...t){return u$1(Object.values,t)}
 
 var T={asc:(r,n)=>r>n,desc:(r,n)=>r<n};function s(r,n){let[e,...o]=n;if(!m$1(e)){let t=u(...o);return r(e,t)}let a=u(e,...o);return t=>r(t,a)}function u(r,n,...e){let o=typeof r=="function"?r:r[0],a=typeof r=="function"?"asc":r[1],{[a]:t}=T,i=n===void 0?void 0:u(n,...e);return (y,c)=>{let p=o(y),l=o(c);return t(p,l)?1:t(l,p)?-1:i?.(y,c)??0}}function m$1(r){if(d(r))return  true;if(typeof r!="object"||!Array.isArray(r))return  false;let[n,e,...o]=r;return d(n)&&typeof e=="string"&&e in T&&o.length===0}var d=r=>typeof r=="function"&&r.length===1;
 
+function i(t,e,n){return typeof e=="number"||e===void 0?r=>r.split(t,e):t.split(e,n)}
+
 function m(...r){return u$1(o,r)}function o(r,t){let e=[...r];return e.sort(t),e}
 
-function a(...r){return s(n,r)}var n=(r,t)=>[...r].sort(t);
+function a$1(...r){return s(n$1,r)}var n$1=(r,t)=>[...r].sort(t);
+
+function a(...e){return u$1(n,e)}var n=e=>e.at(-1);
 
 function t(...r){return u$1(Object.entries,r)}
 
@@ -68,7 +73,7 @@ class ElementModel {
    */
   get tags() {
     return memoizeProp(this, Symbol.for("tags"), () => {
-      return i([
+      return i$1([
         ...this.$element.tags ?? [],
         ...this.$model.specification.elements[this.$element.kind]?.tags ?? []
       ]);
@@ -226,13 +231,13 @@ class ElementModel {
    * @returns true if the element is deployed
    */
   isDeployed() {
-    return n$1(ihead(this.deployments()));
+    return n$2(ihead(this.deployments()));
   }
   deployments() {
     return this.$model.deployment.instancesOf(this);
   }
   hasMetadata() {
-    return !!this.$element.metadata && !n$2(this.$element.metadata);
+    return !!this.$element.metadata && !n$3(this.$element.metadata);
   }
   getMetadata(field) {
     if (field) {
@@ -248,9 +253,37 @@ class ElementModel {
   }
 }
 
-function getId(element) {
+const getId = (element) => {
   return typeof element === "string" ? element : element.id;
-}
+};
+const VIEW_FOLDERS_SEPARATOR = "/";
+const splitViewTitle = (title) => {
+  invariant(!title.includes("\n"), "View title cannot contain newlines");
+  if (title.includes(VIEW_FOLDERS_SEPARATOR)) {
+    const segments = title.split(VIEW_FOLDERS_SEPARATOR).map((s) => s.trim()).filter((s) => s.length > 0);
+    if (i$2(segments, 1)) {
+      return segments;
+    }
+    return [""];
+  }
+  return [title.trim()];
+};
+const normalizeViewPath = (title) => {
+  return splitViewTitle(title).join(VIEW_FOLDERS_SEPARATOR);
+};
+const getViewFolderPath = (title) => {
+  const segments = splitViewTitle(title);
+  if (!i$2(segments, 2)) {
+    return null;
+  }
+  return segments.slice(0, -1).join(VIEW_FOLDERS_SEPARATOR);
+};
+const extractViewTitleFromPath = (title) => {
+  if (!title.includes(VIEW_FOLDERS_SEPARATOR)) {
+    return title.trim();
+  }
+  return splitViewTitle(title).pop() ?? title;
+};
 
 class LikeC4DeploymentModel {
   constructor($model) {
@@ -579,13 +612,13 @@ class RelationshipModel {
     return `${this.source.id} -> ${this.target.id}`;
   }
   get title() {
-    if (!n$1(this.$relationship.title)) {
+    if (!n$2(this.$relationship.title)) {
       return null;
     }
     return this.$relationship.title;
   }
   get technology() {
-    if (!n$1(this.$relationship.technology)) {
+    if (!n$2(this.$relationship.technology)) {
       return null;
     }
     return this.$relationship.technology;
@@ -629,7 +662,7 @@ class RelationshipModel {
     return true;
   }
   hasMetadata() {
-    return !!this.$relationship.metadata && !n$2(this.$relationship.metadata);
+    return !!this.$relationship.metadata && !n$3(this.$relationship.metadata);
   }
   getMetadata(field) {
     if (field) {
@@ -851,13 +884,13 @@ class NodeModel {
    * Check if this node references to logical model element.
    */
   hasElement() {
-    return n$1(this.#node.modelRef);
+    return n$2(this.#node.modelRef);
   }
   /**
    * Check if this node references to deployment element (Node or Instance).
    */
   hasDeployment() {
-    return n$1(this.#node.deploymentRef);
+    return n$2(this.#node.deploymentRef);
   }
   /**
    * Check if this node references to deployed instance
@@ -891,9 +924,23 @@ class LikeC4ViewModel {
   #allTags = new DefaultMap((_key) => /* @__PURE__ */ new Set());
   $view;
   $model;
-  constructor(model, view) {
+  title;
+  /**
+   * View folder this view belongs to.
+   * If view is top-level, this is the root folder.
+   */
+  folder;
+  /**
+   * Path to this view, processed by {@link normalizeViewPath}
+   *
+   * @example
+   * "Group 1/Group 2/View"
+   */
+  viewPath;
+  constructor(model, view, folder) {
     this.$model = model;
     this.$view = view;
+    this.folder = folder;
     for (const node of view.nodes) {
       const el = new NodeModel(this, Object.freeze(node));
       this.#nodes.set(node.id, el);
@@ -925,6 +972,8 @@ class LikeC4ViewModel {
       }
       this.#edges.set(edge.id, edgeModel);
     }
+    this.title = this.$view.title ? extractViewTitleFromPath(this.$view.title) : null;
+    this.viewPath = this.$view.title ? normalizeViewPath(this.$view.title) : this.$view.id;
   }
   get _type() {
     return this.$view[_type];
@@ -932,8 +981,38 @@ class LikeC4ViewModel {
   get id() {
     return this.$view.id;
   }
-  get title() {
-    return this.$view.title;
+  /**
+   * Returns title if defined, otherwise returns its {@link id}
+   */
+  get titleOrId() {
+    return this.title ?? this.id;
+  }
+  /**
+   * Returns title if defined, otherwise returns `Untitled`.
+   */
+  get titleOrUntitled() {
+    return this.title ?? "Untitled";
+  }
+  /**
+   * Returns path to this view as an array of groups and this view as the last element
+   * If view is top-level, returns only this view.
+   *
+   * @example
+   * viewPath = "Group 1/Group 2/View"
+   *
+   * breadcrumbs = [
+   *   "Group 1",             // folder
+   *   "Group 1/Group 2",     // folder
+   *   "Group 1/Group 2/View" // view
+   * ]
+   */
+  get breadcrumbs() {
+    return memoizeProp(this, "breadcrumbs", () => {
+      if (!this.folder.isRoot) {
+        return [...this.folder.breadcrumbs, this];
+      }
+      return [this];
+    });
   }
   get description() {
     return RichText.memoize(this, this.$view.description);
@@ -1066,7 +1145,7 @@ class LikeC4ViewModel {
     return this.$view[_type] === "element";
   }
   isScopedElementView() {
-    return this.$view[_type] === "element" && n$1(this.$view.viewOf);
+    return this.$view[_type] === "element" && n$2(this.$view.viewOf);
   }
   isDeploymentView() {
     return this.$view[_type] === "deployment";
@@ -1076,6 +1155,136 @@ class LikeC4ViewModel {
   }
 }
 
+class LikeC4ViewsFolder {
+  $model;
+  /**
+   * Path to this view folder, processed by {@link normalizeViewPath}
+   *
+   * @example
+   * "Folder 1/Folder 2/Folder 3"
+   */
+  path;
+  /**
+   * Title of this view folder.
+   *
+   * @example
+   * // title is the last segment of the path
+   * path = "Folder 1/Folder 2/Folder 3"
+   * title = "Folder 3"
+   */
+  title;
+  /**
+   * Whether this is the root view folder.
+   *
+   * !NOTE
+   * Root folder is special folder with an empty path and used only for internal purposes. \
+   * It is not visible to the user and should not be used in the code.
+   */
+  isRoot;
+  parentPath;
+  defaultViewId;
+  constructor($model, path, defaultViewId) {
+    this.$model = $model;
+    this.path = path.join("/");
+    this.isRoot = this.path === "";
+    this.title = a(path);
+    if (this.isRoot) {
+      this.parentPath = void 0;
+    } else {
+      this.parentPath = path.slice(0, -1).join("/");
+    }
+    this.defaultViewId = defaultViewId;
+  }
+  /**
+   * Default view of this view folder.\
+   * It is for the case when there is a view at the same path as this folder.\
+   * (if there are multiple views at the same path, the first one is chosen)
+   *
+   * @example
+   * ```
+   * // Assume the following views exist:
+   * const views = [
+   *   "Folder 1/ Folder 2 / View",
+   *   "Folder 1/ Folder 2 / View / Subview",
+   * ]
+   * ```
+   * Group with path `Folder 1/ Folder 2 / View`\
+   * will have default view `Folder 1/ Folder 2 / View`
+   */
+  get defaultView() {
+    if (!this.defaultViewId) {
+      return null;
+    }
+    return this.$model.view(this.defaultViewId);
+  }
+  /**
+   * Returns path to this view folder as an array of ancestors (excluding root) and this view folder as the last element
+   *
+   * @throws Error if this is the root folder.
+   */
+  get breadcrumbs() {
+    invariant(!this.isRoot, "Root view folder has no breadcrumbs");
+    return memoizeProp(this, "breadcrumbs", () => {
+      const parent = this.parent;
+      if (parent) {
+        if (parent.isRoot) {
+          return [parent, this];
+        }
+        return [...parent.breadcrumbs, this];
+      }
+      return [this];
+    });
+  }
+  /**
+   * Returns parent folder
+   *
+   * @throws Error if this is the root folder.
+   */
+  get parent() {
+    invariant(!this.isRoot, "Root view folder has no parent");
+    if (n$3(this.parentPath)) {
+      return null;
+    }
+    return this.$model.viewFolder(this.parentPath);
+  }
+  /**
+   * Returns sorted set of children
+   * - First folders
+   * - Then views
+   */
+  get children() {
+    return this.$model.viewFolderItems(this.path);
+  }
+  /**
+   * Returns sorted array of children folders
+   */
+  get folders() {
+    return memoizeProp(this, "folders", () => {
+      const folders = [];
+      for (const child of this.children) {
+        if (child instanceof LikeC4ViewsFolder) {
+          folders.push(child);
+        }
+      }
+      return folders;
+    });
+  }
+  /**
+   * Returns all views in this view folder.
+   */
+  get views() {
+    return memoizeProp(this, "views", () => {
+      const views = [];
+      for (const child of this.children) {
+        if (child instanceof LikeC4ViewModel) {
+          views.push(child);
+        }
+      }
+      return views;
+    });
+  }
+}
+
 class LikeC4Model {
   /**
    * Don't use in runtime, only for type inference
@@ -1095,6 +1304,11 @@ class LikeC4Model {
   // Relationships inside the element, among descendants
   _internal = new DefaultMap(() => /* @__PURE__ */ new Set());
   _views = /* @__PURE__ */ new Map();
+  _rootViewFolder;
+  _viewFolders = /* @__PURE__ */ new Map();
+  _viewFolderItems = new DefaultMap(
+    () => /* @__PURE__ */ new Set()
+  );
   _allTags = new DefaultMap(
     () => /* @__PURE__ */ new Set()
   );
@@ -1169,17 +1383,56 @@ class LikeC4Model {
     }
     this.deployment = new LikeC4DeploymentModel(this);
     if (isOnStage($data, "computed") || isOnStage($data, "layouted")) {
+      const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
       const views = C(
         r($data.views),
-        m((a, b) => compareNatural(a.title ?? "untitled", b.title ?? "untitled"))
+        m$2((view) => ({
+          view,
+          path: normalizeViewPath(view.title ?? view.id),
+          folderPath: view.title && getViewFolderPath(view.title) || ""
+        })),
+        // Sort hierarchically by groups, but keep same order within groups
+        m((a, b) => compare(a.folderPath, b.folderPath))
       );
-      for (const view of views) {
-        const vm = new LikeC4ViewModel(this, view);
+      const getOrCreateFolder = (path) => {
+        let folder = this._viewFolders.get(path);
+        if (!folder) {
+          const segments = i(path, VIEW_FOLDERS_SEPARATOR);
+          invariant(i$2(segments, 1), `View group path "${path}" must have at least one element`);
+          let defaultView;
+          if (path === "") {
+            defaultView = views.find((view) => view.view.id === "index");
+          } else {
+            defaultView = views.find((view) => view.path === path);
+          }
+          folder = new LikeC4ViewsFolder(this, segments, defaultView?.view.id);
+          this._viewFolders.set(path, folder);
+        }
+        return folder;
+      };
+      this._rootViewFolder = getOrCreateFolder("");
+      for (const { folderPath } of views) {
+        if (this._viewFolders.has(folderPath)) {
+          continue;
+        }
+        i(folderPath, VIEW_FOLDERS_SEPARATOR).reduce((parent, segment) => {
+          const path = [...parent, segment];
+          const folder = getOrCreateFolder(path.join(VIEW_FOLDERS_SEPARATOR));
+          this._viewFolderItems.get(parent.join(VIEW_FOLDERS_SEPARATOR)).add(folder);
+          return path;
+        }, []);
+      }
+      for (const { view, folderPath } of views) {
+        const vm = new LikeC4ViewModel(this, view, getOrCreateFolder(folderPath));
+        this._viewFolderItems.get(folderPath).add(vm);
         this._views.set(view.id, vm);
         for (const tag of vm.tags) {
           this._allTags.get(tag).add(vm);
         }
       }
+    } else {
+      this._rootViewFolder = new LikeC4ViewsFolder(this, [""], void 0);
+      this._viewFolders.set(this._rootViewFolder.path, this._rootViewFolder);
     }
   }
   /**
@@ -1250,6 +1503,21 @@ class LikeC4Model {
       }
     }));
   }
+  /**
+     * Returns the element with the given FQN.
+     *
+     * @throws Error if element is not found\
+     * Use {@link findElement} if you don't want to throw an error
+     *
+     * @note Method is type-safe for typed model
+  
+     * @example
+     * model.element('cloud.frontend')
+     * // or object with id property of scalar.Fqn
+     * model.element({
+     *   id: 'dashboard',
+     * })
+     */
   element(el) {
     if (el instanceof ElementModel) {
       return el;
@@ -1257,6 +1525,15 @@ class LikeC4Model {
     const id = getId(el);
     return nonNullable(this._elements.get(id), `Element ${id} not found`);
   }
+  /**
+   * Returns the element with the given FQN.
+   *
+   * @returns Element if found, null otherwise
+   * @note Method is not type-safe as {@link element}
+   *
+   * @example
+   * model.findElement('cloud.frontend')
+   */
   findElement(el) {
     return this._elements.get(getId(el)) ?? null;
   }
@@ -1307,14 +1584,62 @@ class LikeC4Model {
   }
   /**
    * Returns a specific view by its ID.
+   * @note Method is type-safe for typed model
+   * @throws Error if view is not found\
+   * Use {@link findView} if you don't want to throw an error
+   *
+   * @example
+   * model.view('index')
+   * // or object with id property of scalar.ViewId
+   * model.view({
+   *   id: 'index',
+   * })
    */
   view(viewId) {
     const id = getId(viewId);
     return nonNullable(this._views.get(id), `View ${id} not found`);
   }
+  /**
+   * Returns a specific view by its ID.
+   * @note Method is not type-safe as {@link view}
+   *
+   * @example
+   * model.findView('index')
+   */
   findView(viewId) {
     return this._views.get(viewId) ?? null;
   }
+  /**
+   * Returns a view folder by its path.
+   * Path is extracted from the view title, e.g. "Group 1/Group 2/View" -> "Group 1/Group 2"
+   * @throws Error if view folder is not found.
+   */
+  viewFolder(path) {
+    return nonNullable(this._viewFolders.get(path), `View folder ${path} not found`);
+  }
+  /**
+   * Root folder is a special one with an empty path and used only for internal purposes.
+   * It is not visible to the user and should be used only to get top-level folders and views.
+   */
+  get rootViewFolder() {
+    return this._rootViewFolder;
+  }
+  /**
+   * Whether the model has any view folders.
+   */
+  get hasViewFolders() {
+    return this._viewFolders.size > 1;
+  }
+  /**
+   * Returns all children of a view folder.
+   * Path is extracted from the view title, e.g. "Group 1/Group 2/View" -> "Group 1/Group 2"
+   *
+   * @throws Error if view folder is not found.
+   */
+  viewFolderItems(path) {
+    invariant(this._viewFolders.has(path), `View folder ${path} not found`);
+    return this._viewFolderItems.get(path);
+  }
   /**
    * Returns the parent element of given element.
    * @see ancestors
@@ -1403,7 +1728,8 @@ class LikeC4Model {
     return;
   }
   /**
-   * Returns all tags used in the model, sorted alphabetically.
+   * Returns array of all tags used in the model, sorted naturally.\
+   * Use {@link specification.tags} to get all defined tags
    */
   get tags() {
     return memoizeProp(this, "tags", () => m([...this._allTags.keys()], compareNatural));
@@ -1420,7 +1746,7 @@ class LikeC4Model {
         tagged
       })),
       m((a, b) => compareNatural(a.tag, b.tag)),
-      a(
+      a$1(
         [p("count"), "desc"]
       )
     ));
@@ -1636,4 +1962,4 @@ function isEdgeModel(edge) {
   return edge instanceof EdgeModel;
 }
 
-export { ElementModel as E, LikeC4Model as L, NodeModel as N, RelationshipModel as R, LikeC4DeploymentModel as a, EdgeModel as b, LikeC4ViewModel as c, isDeployedInstanceModel as d, isDeploymentElementModel as e, isNestedElementOfDeployedInstanceModel as f, isDeploymentRelationModel as g, isRelationModel as h, isDeploymentNodeModel as i, isElementModel as j, isLikeC4ViewModel as k, isNodeModel as l, isEdgeModel as m, a as n, r, t };
+export { ElementModel as E, LikeC4Model as L, NodeModel as N, RelationshipModel as R, VIEW_FOLDERS_SEPARATOR as V, LikeC4DeploymentModel as a, EdgeModel as b, LikeC4ViewModel as c, LikeC4ViewsFolder as d, extractViewTitleFromPath as e, isDeployedInstanceModel as f, getViewFolderPath as g, isDeploymentElementModel as h, isDeploymentNodeModel as i, isNestedElementOfDeployedInstanceModel as j, isDeploymentRelationModel as k, isRelationModel as l, isElementModel as m, normalizeViewPath as n, isLikeC4ViewModel as o, isNodeModel as p, isEdgeModel as q, r, a$1 as s, t, a as u };

package/dist/shared/{core.BMCb0wJI.mjs → core.yaRvRnMW.mjs}

@@ -1,4 +1,4 @@
-import { r as getDefaultExportFromCjs } from './core.C_C-3c1S.mjs';
+import { r as getDefaultExportFromCjs } from './core.DQj9iv_y.mjs';
 
 /**
  * Mnemonist DefaultMap

package/dist/theme/index.mjs

@@ -1,3 +1,6 @@
+import { k } from '../shared/core.BpJu1RrF.mjs';
+import '../shared/core.DbRvwARP.mjs';
+
 const { min: min$4, max: max$4 } = Math;
 
 const limit = (x, low = 0, high = 1) => {
@@ -3628,6 +3631,9 @@ const RelationshipColors = {
   slate
 };
 
+const CONTRAST_MIN_WITH_FOREGROUND = 60;
+const CONTRAST_START_TONE_DIFFERENCE = 2;
+const CONTRAST_STEP_TONE_DIFFERENCE = 1;
 const defaultTheme = {
   elements: ElementColors,
   relationships: RelationshipColors,
@@ -3685,12 +3691,14 @@ const defaultTheme = {
 function computeColorValues(color) {
   if (color.match(/^#([0-9a-f]{3}){1,2}$/i)) {
     const colors = generateColors(color);
+    const fillColor = colors[6];
+    const contrastedColors = getContrastedColorsAPCA(fillColor);
     return {
       elements: {
-        fill: colors[6],
+        fill: fillColor,
         stroke: colors[7],
-        hiContrast: colors[0],
-        loContrast: colors[1]
+        hiContrast: contrastedColors[0],
+        loContrast: contrastedColors[1]
       },
       relationships: {
         lineColor: colors[4],
@@ -3705,5 +3713,27 @@ function computeColorValues(color) {
     };
   }
 }
+function getContrastedColorsAPCA(refColor) {
+  const refColorChroma = chroma(refColor);
+  let lightColorRgb = refColorChroma.brighten(CONTRAST_START_TONE_DIFFERENCE);
+  let darkColorRgb = refColorChroma.darken(CONTRAST_START_TONE_DIFFERENCE);
+  let previousLight;
+  let previousDark;
+  let contrastWithLight;
+  let contrastWithDark;
+  do {
+    previousLight = lightColorRgb;
+    previousDark = darkColorRgb;
+    lightColorRgb = lightColorRgb.brighten(CONTRAST_STEP_TONE_DIFFERENCE);
+    darkColorRgb = darkColorRgb.darken(CONTRAST_STEP_TONE_DIFFERENCE);
+    contrastWithLight = chroma.contrastAPCA(refColorChroma, lightColorRgb);
+    contrastWithDark = chroma.contrastAPCA(refColorChroma, darkColorRgb);
+  } while (Math.abs(contrastWithLight) < CONTRAST_MIN_WITH_FOREGROUND && Math.abs(contrastWithDark) < CONTRAST_MIN_WITH_FOREGROUND && (!k(lightColorRgb, previousLight) || !k(darkColorRgb, previousDark)));
+  if (Math.abs(contrastWithLight) > Math.abs(contrastWithDark)) {
+    return [lightColorRgb.brighten(0.4).hex(), lightColorRgb.hex()];
+  } else {
+    return [darkColorRgb.darken(0.4).hex(), darkColorRgb.hex()];
+  }
+}
 
 export { ElementColors, RelationshipColors, computeColorValues, defaultTheme };

package/dist/types/index.d.mts

@@ -1,8 +1,8 @@
 import { N as NonEmptyArray } from '../shared/core.DuSLYTG6.mjs';
 export { C as Coalesce, E as ExclusiveUnion, I as IteratorLike, K as KeysOf, L as Link, b as NTuple, a as NonEmptyReadonlyArray, P as Predicate } from '../shared/core.DuSLYTG6.mjs';
 export { A as Any, A as AnyAux, a as Aux, E as ExtractOnStage, M as ModelStage, S as SpecAux, U as Unknown, b as UnknownComputed, c as UnknownLayouted, d as UnknownParsed, e as _stage, f as _type, _ as aux, i as isOnStage } from '../shared/core.DAj3LuFH.mjs';
-import { aP as ViewManualLayout, aK as AutoLayoutDirection } from '../shared/core.IWLie-Ma.mjs';
-export { W as AbstractRelationship, ad as AndOperator, aE as AnyExcludePredicate, aD as AnyIncludePredicate, aq as AnyView, aF as AnyViewRuleStyle, z as AuxFromDump, A as AuxFromLikeC4ModelData, B as BBox, aS as BaseParsedViewProperties, aR as BaseViewProperties, aZ as ComputedDeploymentView, a_ as ComputedDynamicView, aX as ComputedEdge, aY as ComputedElementView, C as ComputedLikeC4ModelData, aW as ComputedNode, ao as ComputedView, U as DefaultArrowType, I as DefaultElementShape, T as DefaultLineStyle, K as DefaultPaddingSize, V as DefaultRelationshipColor, J as DefaultShapeSize, N as DefaultTextSize, H as DefaultThemeColor, q as DeployedInstance, r as DeploymentElement, s as DeploymentElementRef, D as DeploymentElementStyle, p as DeploymentNode, w as DeploymentRelation, v as DeploymentRelationship, b5 as DeploymentViewExcludePredicate, b4 as DeploymentViewIncludePredicate, b6 as DeploymentViewPredicate, b8 as DeploymentViewRule, b7 as DeploymentViewRuleStyle, b0 as DiagramEdge, a$ as DiagramNode, am as DiagramView, be as DynamicViewIncludeRule, bb as DynamicViewParallelSteps, bf as DynamicViewRule, ba as DynamicViewStep, bd as DynamicViewStepOrParallel, Q as Element, _ as ElementSpecification, O as ElementStyle, bj as ElementViewExcludePredicate, bi as ElementViewIncludePredicate, bk as ElementViewPredicate, bo as ElementViewRule, bl as ElementViewRuleGroup, bn as ElementViewRuleStyle, a3 as EqualOperator, E as Expression, ai as Filterable, F as FqnExpr, f as FqnRef, j as GlobalDynamicPredicates, G as GlobalPredicateId, i as GlobalPredicates, k as GlobalStyleID, l as GlobalStyles, a6 as KindEqual, b2 as LayoutedDeploymentView, b3 as LayoutedDynamicView, b1 as LayoutedElementView, L as LayoutedLikeC4ModelData, am as LayoutedView, o as LikeC4ModelData, y as LikeC4ModelDump, al as LikeC4View, e as ModelExpression, M as ModelFqnExpr, m as ModelGlobals, Z as ModelRelation, d as ModelRelationExpr, aT as NodeNotation, ab as NotOperator, aj as OperatorPredicate, af as OrOperator, b9 as ParsedDeploymentView, bg as ParsedDynamicView, bp as ParsedElementView, n as ParsedLikeC4ModelData, al as ParsedView, a8 as Participant, a9 as ParticipantOperator, g as Point, P as PredicateSelector, ap as ProcessedView, h as RectBox, c as RelationExpr, Y as Relationship, a1 as RelationshipSpecification, R as RichText, a as RichTextEmpty, b as RichTextOrEmpty, x as SpecTypesFromDump, a2 as Specification, S as SpecificationDump, a4 as TagEqual, $ as TagSpecification, aO as ViewAutoLayout, ar as ViewOnStage, at as ViewRule, aM as ViewRuleAutoLayout, aI as ViewRuleGlobalPredicateRef, aG as ViewRuleGlobalStyle, au as ViewRulePredicate, aQ as ViewType, aV as ViewWithHash, aU as ViewWithNotation, as as ViewWithType, ah as WhereOperator, X as XYPoint, bc as getParallelStepsPrefix, ae as isAndOperator, aL as isAutoLayoutDirection, ax as isComputedView, u as isDeployedInstance, t as isDeploymentNode, aB as isDeploymentView, an as isDiagramView, aC as isDynamicView, bh as isDynamicViewParallelSteps, ay as isElementView, aA as isExtendsElementView, a7 as isKindEqual, an as isLayoutedView, ac as isNotOperator, ag as isOrOperator, aa as isParticipantOperator, az as isScopedElementView, a0 as isTagColorSpecified, a5 as isTagEqual, aN as isViewRuleAutoLayout, aJ as isViewRuleGlobalPredicateRef, aH as isViewRuleGlobalStyle, bm as isViewRuleGroup, av as isViewRulePredicate, aw as isViewRuleStyle, ak as whereOperatorAsPredicate } from '../shared/core.IWLie-Ma.mjs';
+import { aP as ViewManualLayout, aK as AutoLayoutDirection } from '../shared/core.Ddua-wiI.mjs';
+export { W as AbstractRelationship, ad as AndOperator, aE as AnyExcludePredicate, aD as AnyIncludePredicate, aq as AnyView, aF as AnyViewRuleStyle, z as AuxFromDump, A as AuxFromLikeC4ModelData, B as BBox, aS as BaseParsedViewProperties, aR as BaseViewProperties, aZ as ComputedDeploymentView, a_ as ComputedDynamicView, aX as ComputedEdge, aY as ComputedElementView, C as ComputedLikeC4ModelData, aW as ComputedNode, ao as ComputedView, U as DefaultArrowType, I as DefaultElementShape, T as DefaultLineStyle, K as DefaultPaddingSize, V as DefaultRelationshipColor, J as DefaultShapeSize, N as DefaultTextSize, H as DefaultThemeColor, q as DeployedInstance, r as DeploymentElement, s as DeploymentElementRef, D as DeploymentElementStyle, p as DeploymentNode, w as DeploymentRelation, v as DeploymentRelationship, b5 as DeploymentViewExcludePredicate, b4 as DeploymentViewIncludePredicate, b6 as DeploymentViewPredicate, b8 as DeploymentViewRule, b7 as DeploymentViewRuleStyle, b0 as DiagramEdge, a$ as DiagramNode, am as DiagramView, be as DynamicViewIncludeRule, bb as DynamicViewParallelSteps, bf as DynamicViewRule, ba as DynamicViewStep, bd as DynamicViewStepOrParallel, Q as Element, _ as ElementSpecification, O as ElementStyle, bj as ElementViewExcludePredicate, bi as ElementViewIncludePredicate, bk as ElementViewPredicate, bo as ElementViewRule, bl as ElementViewRuleGroup, bn as ElementViewRuleStyle, a3 as EqualOperator, E as Expression, ai as Filterable, F as FqnExpr, f as FqnRef, j as GlobalDynamicPredicates, G as GlobalPredicateId, i as GlobalPredicates, k as GlobalStyleID, l as GlobalStyles, a6 as KindEqual, b2 as LayoutedDeploymentView, b3 as LayoutedDynamicView, b1 as LayoutedElementView, L as LayoutedLikeC4ModelData, am as LayoutedView, o as LikeC4ModelData, y as LikeC4ModelDump, al as LikeC4View, e as ModelExpression, M as ModelFqnExpr, m as ModelGlobals, Z as ModelRelation, d as ModelRelationExpr, aT as NodeNotation, ab as NotOperator, aj as OperatorPredicate, af as OrOperator, b9 as ParsedDeploymentView, bg as ParsedDynamicView, bp as ParsedElementView, n as ParsedLikeC4ModelData, al as ParsedView, a8 as Participant, a9 as ParticipantOperator, g as Point, P as PredicateSelector, ap as ProcessedView, h as RectBox, c as RelationExpr, Y as Relationship, a1 as RelationshipSpecification, R as RichText, a as RichTextEmpty, b as RichTextOrEmpty, x as SpecTypesFromDump, a2 as Specification, S as SpecificationDump, a4 as TagEqual, $ as TagSpecification, aO as ViewAutoLayout, ar as ViewOnStage, at as ViewRule, aM as ViewRuleAutoLayout, aI as ViewRuleGlobalPredicateRef, aG as ViewRuleGlobalStyle, au as ViewRulePredicate, aQ as ViewType, aV as ViewWithHash, aU as ViewWithNotation, as as ViewWithType, ah as WhereOperator, X as XYPoint, bc as getParallelStepsPrefix, ae as isAndOperator, aL as isAutoLayoutDirection, ax as isComputedView, u as isDeployedInstance, t as isDeploymentNode, aB as isDeploymentView, an as isDiagramView, aC as isDynamicView, bh as isDynamicViewParallelSteps, ay as isElementView, aA as isExtendsElementView, a7 as isKindEqual, an as isLayoutedView, ac as isNotOperator, ag as isOrOperator, aa as isParticipantOperator, az as isScopedElementView, a0 as isTagColorSpecified, a5 as isTagEqual, aN as isViewRuleAutoLayout, aJ as isViewRuleGlobalPredicateRef, aH as isViewRuleGlobalStyle, bm as isViewRuleGroup, av as isViewRulePredicate, aw as isViewRuleStyle, ak as whereOperatorAsPredicate } from '../shared/core.Ddua-wiI.mjs';
 import { F as Fqn, D as DeploymentFqn } from '../shared/core.668kXpZq.mjs';
 export { A as AnyFqn, B as BuiltInIcon, b as DeploymentKind, j as EdgeId, E as ElementKind, e as GlobalFqn, G as GroupElementKind, I as Icon, a as IconUrl, M as MarkdownOrString, N as NodeId, P as ProjectId, d as RelationId, R as RelationKind, c as RelationshipKind, k as StepEdgeId, S as StepEdgeIdLiteral, m as StepEdgeKind, T as Tag, V as ViewId, o as extractStep, f as flattenMarkdownOrString, g as isGlobalFqn, i as isGroupElementKind, n as isStepEdgeId, s as scalar, h as splitGlobalFqn, l as stepEdgeId } from '../shared/core.668kXpZq.mjs';
 import { b as BorderStyle, c as ElementShape, h as ThemeColor } from '../shared/core.CzdwsPmY.mjs';

package/dist/types/index.mjs

@@ -1,5 +1,5 @@
-export { D as DeploymentFqn, E as EdgeId, l as Fqn, F as FqnRef, n as GlobalFqn, G as GroupElementKind, N as NodeId, R as RelationId, S as StepEdgeKind, V as ViewId, _ as _stage, a as _type, r as extractStep, k as flattenMarkdownOrString, h as isAndOperator, c as isDeployedInstance, b as isDeploymentNode, o as isGlobalFqn, m as isGroupElementKind, e as isKindEqual, g as isNotOperator, i as isOnStage, j as isOrOperator, f as isParticipantOperator, q as isStepEdgeId, d as isTagEqual, s as splitGlobalFqn, p as stepEdgeId, w as whereOperatorAsPredicate } from '../shared/core.Br7Fab9l.mjs';
-export { E as Expression, F as FqnExpr, b as ModelExpression, M as ModelFqnExpr, a as ModelRelationExpr, R as RelationExpr, p as getParallelStepsPrefix, n as isAutoLayoutDirection, d as isComputedView, j as isDeploymentView, e as isDiagramView, k as isDynamicView, q as isDynamicViewParallelSteps, f as isElementView, h as isExtendsElementView, e as isLayoutedView, g as isScopedElementView, o as isViewRuleAutoLayout, m as isViewRuleGlobalPredicateRef, l as isViewRuleGlobalStyle, r as isViewRuleGroup, i as isViewRulePredicate, c as isViewRuleStyle } from '../shared/core.DXRAwwDB.mjs';
+export { D as DeploymentFqn, E as EdgeId, l as Fqn, F as FqnRef, n as GlobalFqn, G as GroupElementKind, N as NodeId, R as RelationId, S as StepEdgeKind, V as ViewId, _ as _stage, a as _type, r as extractStep, k as flattenMarkdownOrString, h as isAndOperator, c as isDeployedInstance, b as isDeploymentNode, o as isGlobalFqn, m as isGroupElementKind, e as isKindEqual, g as isNotOperator, i as isOnStage, j as isOrOperator, f as isParticipantOperator, q as isStepEdgeId, d as isTagEqual, s as splitGlobalFqn, p as stepEdgeId, w as whereOperatorAsPredicate } from '../shared/core.BajmN8zR.mjs';
+export { E as Expression, F as FqnExpr, b as ModelExpression, M as ModelFqnExpr, a as ModelRelationExpr, R as RelationExpr, p as getParallelStepsPrefix, n as isAutoLayoutDirection, d as isComputedView, j as isDeploymentView, e as isDiagramView, k as isDynamicView, q as isDynamicViewParallelSteps, f as isElementView, h as isExtendsElementView, e as isLayoutedView, g as isScopedElementView, o as isViewRuleAutoLayout, m as isViewRuleGlobalPredicateRef, l as isViewRuleGlobalStyle, r as isViewRuleGroup, i as isViewRulePredicate, c as isViewRuleStyle } from '../shared/core.B1ZN723l.mjs';
 export { B as BBox, a as BorderStyles, E as ElementShapes, R as RectBox, T as ThemeColors, i as isTagColorSpecified, b as isThemeColor } from '../shared/core.CxGKeL-L.mjs';
 export { f as DefaultArrowType, a as DefaultElementShape, e as DefaultLineStyle, c as DefaultPaddingSize, g as DefaultRelationshipColor, b as DefaultShapeSize, d as DefaultTextSize, D as DefaultThemeColor, R as RichText } from '../shared/core.D56nCp7e.mjs';
 import '../shared/core.zLlww-07.mjs';