@likec4/core 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -1,8 +1,10 @@
-import { u, e, n as nonNullable, D as DefaultElementShape, a as DefaultThemeColor } from './shared/core.DeifT5lC.mjs';
-export { A as AsFqn, B as BorderStyles, J as DefaultArrowType, I as DefaultLineStyle, K as DefaultRelationshipColor, E as ElementShapes, c as Expr, V as StepEdgeId, X as extractStep, $ as getBBoxCenter, Y as getParallelStepsPrefix, i as invariant, F as isAndOperator, Z as isComputedDynamicView, _ as isComputedElementView, g as isCustomElement, w as isCustomRelationExpr, R as isDynamicView, P as isDynamicViewIncludeRule, Q as isDynamicViewParallelSteps, l as isElement, j as isElementKindExpr, o as isElementPredicateExpr, d as isElementRef, k as isElementTagExpr, S as isElementView, m as isElementWhere, f as isExpandedElementExpr, T as isExtendsElementView, q as isInOut, r as isIncoming, z as isKindEqual, C as isNotOperator, G as isOrOperator, s as isOutgoing, p as isRelation, t as isRelationExpression, x as isRelationPredicateExpr, v as isRelationWhere, U as isScopedElementView, W as isStepEdgeId, y as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, h as isWildcard, b as nonexhaustive, H as whereOperatorAsPredicate } from './shared/core.DeifT5lC.mjs';
+import { u, e, n as nonNullable, D as DefaultRelationshipColor, a as DefaultElementShape, b as DefaultThemeColor } from './shared/core.CUlHblBQ.mjs';
+export { A as AsFqn, B as BorderStyles, K as DefaultArrowType, J as DefaultLineStyle, E as ElementShapes, c as Expr, V as StepEdgeId, X as extractStep, $ as getBBoxCenter, Y as getParallelStepsPrefix, i as invariant, G as isAndOperator, Z as isComputedDynamicView, _ as isComputedElementView, h as isCustomElement, x as isCustomRelationExpr, R as isDynamicView, P as isDynamicViewIncludeRule, Q as isDynamicViewParallelSteps, m as isElement, k as isElementKindExpr, p as isElementPredicateExpr, f as isElementRef, l as isElementTagExpr, S as isElementView, o as isElementWhere, g as isExpandedElementExpr, T as isExtendsElementView, r as isInOut, s as isIncoming, C as isKindEqual, F as isNotOperator, H as isOrOperator, t as isOutgoing, q as isRelation, v as isRelationExpression, y as isRelationPredicateExpr, w as isRelationWhere, U as isScopedElementView, W as isStepEdgeId, z as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, j as isWildcard, d as nonexhaustive, I as whereOperatorAsPredicate } from './shared/core.CUlHblBQ.mjs';
+
+const { min: min$4, max: max$4 } = Math;
 
 const limit = (x, low = 0, high = 1) => {
-    return min$3(max$3(low, x), high);
+    return min$4(max$4(low, x), high);
 };
 
 const clip_rgb = (rgb) => {
@@ -123,7 +125,7 @@ class Color {
 }
 
 // this gets updated automatically
-const version = '3.0.0';
+const version = '3.1.1';
 
 const chroma = (...args) => {
     return new Color(...args);
@@ -2604,6 +2606,72 @@ const contrast = (a, b) => {
     return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
 };
 
+/**
+ * @license
+ *
+ * The APCA contrast prediction algorithm is based of the formulas published
+ * in the APCA-1.0.98G specification by Myndex. The specification is available at:
+ * https://raw.githubusercontent.com/Myndex/apca-w3/master/images/APCAw3_0.1.17_APCA0.0.98G.svg
+ *
+ * Note that the APCA implementation is still beta, so please update to
+ * future versions of chroma.js when they become available.
+ *
+ * You can read more about the APCA Readability Criterion at
+ * https://readtech.org/ARC/
+ */
+
+// constants
+const W_offset = 0.027;
+const P_in = 0.0005;
+const P_out = 0.1;
+const R_scale = 1.14;
+const B_threshold = 0.022;
+const B_exp = 1.414;
+
+const contrastAPCA = (text, bg) => {
+    // parse input colors
+    text = new Color(text);
+    bg = new Color(bg);
+    // if text color has alpha, blend against background
+    if (text.alpha() < 1) {
+        text = mix(bg, text, text.alpha(), 'rgb');
+    }
+    const l_text = lum(...text.rgb());
+    const l_bg = lum(...bg.rgb());
+
+    // soft clamp black levels
+    const Y_text =
+        l_text >= B_threshold
+            ? l_text
+            : l_text + Math.pow(B_threshold - l_text, B_exp);
+    const Y_bg =
+        l_bg >= B_threshold ? l_bg : l_bg + Math.pow(B_threshold - l_bg, B_exp);
+
+    // normal polarity (dark text on light background)
+    const S_norm = Math.pow(Y_bg, 0.56) - Math.pow(Y_text, 0.57);
+    // reverse polarity (light text on dark background)
+    const S_rev = Math.pow(Y_bg, 0.65) - Math.pow(Y_text, 0.62);
+    // clamp noise then scale
+    const C =
+        Math.abs(Y_bg - Y_text) < P_in
+            ? 0
+            : Y_text < Y_bg
+              ? S_norm * R_scale
+              : S_rev * R_scale;
+    // clamp minimum contrast then offset
+    const S_apc = Math.abs(C) < P_out ? 0 : C > 0 ? C - W_offset : C + W_offset;
+    // scale to 100
+    return S_apc * 100;
+};
+
+function lum(r, g, b) {
+    return (
+        0.2126729 * Math.pow(r / 255, 2.4) +
+        0.7151522 * Math.pow(g / 255, 2.4) +
+        0.072175 * Math.pow(b / 255, 2.4)
+    );
+}
+
 const { sqrt, pow, min, max: max$1, atan2, abs, cos, sin, exp, PI } = Math;
 
 function deltaE (a, b, Kl = 1, Kc = 1, Kh = 1) {
@@ -2766,10 +2834,24 @@ const colorbrewer = {
     Pastel1: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2']
 };
 
-// add lowercase aliases for case-insensitive matches
-for (let key of Object.keys(colorbrewer)) {
-    colorbrewer[key.toLowerCase()] = colorbrewer[key];
-}
+const colorbrewerTypes = Object.keys(colorbrewer);
+const typeMap = new Map(colorbrewerTypes.map((key) => [key.toLowerCase(), key]));
+
+// use Proxy to allow case-insensitive access to palettes
+const colorbrewerProxy =
+    typeof Proxy === 'function'
+        ? new Proxy(colorbrewer, {
+              get(target, prop) {
+                  const lower = prop.toLowerCase();
+                  if (typeMap.has(lower)) {
+                      return target[typeMap.get(lower)];
+                  }
+              },
+              getOwnPropertyNames() {
+                  return Object.getOwnPropertyNames(colorbrewerTypes);
+              }
+          })
+        : colorbrewer;
 
 const cmyk2rgb = (...args) => {
     args = unpack(args, 'cmyk');
@@ -2874,7 +2956,7 @@ const lch2css = (...args) => {
     let mode = last(args) || 'lab';
     lcha[0] = rnd2(lcha[0]) + '%';
     lcha[1] = rnd2(lcha[1]);
-    lcha[2] = rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
     if (mode === 'lcha' || (lcha.length > 3 && lcha[3] < 1)) {
         lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
@@ -2883,7 +2965,7 @@ const lch2css = (...args) => {
     return `lch(${lcha.join(' ')})`;
 };
 
-const oklab2css$1 = (...args) => {
+const oklab2css = (...args) => {
     const laba = unpack(args, 'lab');
     laba[0] = rnd2(laba[0] * 100) + '%';
     laba[1] = rnd3(laba[1]);
@@ -2903,17 +2985,17 @@ const rgb2oklch = (...args) => {
     return [L, c, h, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
 };
 
-const oklab2css = (...args) => {
-    const laba = unpack(args, 'lab');
-    laba[0] = rnd2(laba[0] * 100) + '%';
-    laba[1] = rnd3(laba[1]);
-    laba[2] = rnd2(laba[2]) + 'deg';
-    if (laba.length > 3 && laba[3] < 1) {
-        laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
+const oklch2css = (...args) => {
+    const lcha = unpack(args, 'lch');
+    lcha[0] = rnd2(lcha[0] * 100) + '%';
+    lcha[1] = rnd3(lcha[1]);
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    if (lcha.length > 3 && lcha[3] < 1) {
+        lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
-        laba.length = 3;
+        lcha.length = 3;
     }
-    return `oklch(${laba.join(' ')})`;
+    return `oklch(${lcha.join(' ')})`;
 };
 
 const { round: round$2 } = Math;
@@ -2949,10 +3031,10 @@ const rgb2css = (...args) => {
         return cssColor;
     }
     if (mode.substr(0, 5) === 'oklab') {
-        return oklab2css$1(rgb2oklab(rgba));
+        return oklab2css(rgb2oklab(rgba));
     }
     if (mode.substr(0, 5) === 'oklch') {
-        return oklab2css(rgb2oklch(rgba));
+        return oklch2css(rgb2oklch(rgba));
     }
     rgba[0] = round$2(rgba[0]);
     rgba[1] = round$2(rgba[1]);
@@ -2972,42 +3054,75 @@ const oklch2rgb = (...args) => {
     return [r, g, b, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
 };
 
-const RE_RGB = /^rgb\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\)$/;
-const RE_RGB_LEGACY = /^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/;
-
-const RE_RGBA =
-    /^rgba?\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\/\s*([01]|[01]?\.\d+)\)$/;
-const RE_RGBA_LEGACY =
-    /^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/;
-
-const RE_RGB_PCT =
-    /^rgb\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-const RE_RGB_PCT_LEGACY =
-    /^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-
-const RE_RGBA_PCT =
-    /^rgba?\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
-const RE_RGBA_PCT_LEGACY =
-    /^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
-
-const RE_HSL =
-    /^hsl\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
-const RE_HSL_LEGACY =
-    /^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
+const INT_OR_PCT = /((?:-?\d+)|(?:-?\d+(?:\.\d+)?)%|none)/.source;
+const FLOAT_OR_PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%?)|none)/.source;
+const PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%)|none)/.source;
+const RE_S = /\s*/.source;
+const SEP = /\s+/.source;
+const COMMA = /\s*,\s*/.source;
+const ANLGE = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)(?:deg)?)|none)/.source;
+const ALPHA = /\s*(?:\/\s*((?:[01]|[01]?\.\d+)|\d+(?:\.\d+)?%))?/.source;
+
+// e.g. rgb(250 20 0), rgb(100% 50% 20%), rgb(100% 50% 20% / 0.5)
+const RE_RGB = new RegExp(
+    '^rgba?\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_RGB_LEGACY = new RegExp(
+    '^rgb\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(COMMA) +
+        RE_S +
+        '\\)$'
+);
+const RE_RGBA_LEGACY = new RegExp(
+    '^rgba\\(' +
+        RE_S +
+        [INT_OR_PCT, INT_OR_PCT, INT_OR_PCT, FLOAT_OR_PCT].join(COMMA) +
+        RE_S +
+        '\\)$'
+);
 
-const RE_HSLA =
-    /^hsla?\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
+const RE_HSL = new RegExp(
+    '^hsla?\\(' + RE_S + [ANLGE, PCT, PCT].join(SEP) + ALPHA + '\\)$'
+);
+const RE_HSL_LEGACY = new RegExp(
+    '^hsl?\\(' + RE_S + [ANLGE, PCT, PCT].join(COMMA) + RE_S + '\\)$'
+);
 const RE_HSLA_LEGACY =
     /^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
 
-const RE_LAB =
-    /^lab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_LCH =
-    /^lch\(\s*(-?\d+(?:\.\d+)?%?) \s*((?:-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_OKLAB =
-    /^oklab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
-const RE_OKLCH =
-    /^oklch\(\s*(-?\d+(?:\.\d+)?%?) \s*(?:(-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
+const RE_LAB = new RegExp(
+    '^lab\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_LCH = new RegExp(
+    '^lch\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_OKLAB = new RegExp(
+    '^oklab\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
+const RE_OKLCH = new RegExp(
+    '^oklch\\(' +
+        RE_S +
+        [FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
+        ALPHA +
+        '\\)$'
+);
 
 const { round: round$1 } = Math;
 
@@ -3034,6 +3149,11 @@ const noneToValue = (v, noneValue) => {
 
 const css2rgb = (css) => {
     css = css.toLowerCase().trim();
+
+    if (css === 'transparent') {
+        return [0, 0, 0, 0];
+    }
+
     let m;
 
     if (input.format.named) {
@@ -3045,58 +3165,39 @@ const css2rgb = (css) => {
 
     // rgb(250 20 0) or rgb(250,20,0)
     if ((m = css.match(RE_RGB)) || (m = css.match(RE_RGB_LEGACY))) {
-        const rgb = m.slice(1, 4);
+        let rgb = m.slice(1, 4);
         for (let i = 0; i < 3; i++) {
-            rgb[i] = +rgb[i];
+            rgb[i] = +percentToAbsolute(noneToValue(rgb[i], 0), 0, 255);
         }
-        rgb[3] = 1; // default alpha
+        rgb = roundRGB(rgb);
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha; // default alpha
         return rgb;
     }
 
     // rgba(250,20,0,0.4)
-    if ((m = css.match(RE_RGBA)) || (m = css.match(RE_RGBA_LEGACY))) {
+    if ((m = css.match(RE_RGBA_LEGACY))) {
         const rgb = m.slice(1, 5);
         for (let i = 0; i < 4; i++) {
-            rgb[i] = +rgb[i];
-        }
-        return rgb;
-    }
-
-    // rgb(100%,0%,0%)
-    if ((m = css.match(RE_RGB_PCT)) || (m = css.match(RE_RGB_PCT_LEGACY))) {
-        const rgb = m.slice(1, 4);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i] * 2.55);
-        }
-        rgb[3] = 1; // default alpha
-        return rgb;
-    }
-
-    // rgba(100%,0%,0%,0.4)
-    if ((m = css.match(RE_RGBA_PCT)) || (m = css.match(RE_RGBA_PCT_LEGACY))) {
-        const rgb = m.slice(1, 5);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i] * 2.55);
+            rgb[i] = +percentToAbsolute(rgb[i], 0, 255);
         }
-        rgb[3] = +rgb[3];
         return rgb;
     }
 
     // hsl(0,100%,50%)
     if ((m = css.match(RE_HSL)) || (m = css.match(RE_HSL_LEGACY))) {
         const hsl = m.slice(1, 4);
-        hsl[1] *= 0.01;
-        hsl[2] *= 0.01;
-        const rgb = hsl2rgb(hsl);
-        for (let i = 0; i < 3; i++) {
-            rgb[i] = round$1(rgb[i]);
-        }
-        rgb[3] = 1;
+        hsl[0] = +noneToValue(hsl[0].replace('deg', ''), 0);
+        hsl[1] = +percentToAbsolute(noneToValue(hsl[1], 0), 0, 100) * 0.01;
+        hsl[2] = +percentToAbsolute(noneToValue(hsl[2], 0), 0, 100) * 0.01;
+        const rgb = roundRGB(hsl2rgb(hsl));
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     // hsla(0,100%,50%,0.5)
-    if ((m = css.match(RE_HSLA)) || (m = css.match(RE_HSLA_LEGACY))) {
+    if ((m = css.match(RE_HSLA_LEGACY))) {
         const hsl = m.slice(1, 4);
         hsl[1] *= 0.01;
         hsl[2] *= 0.01;
@@ -3110,16 +3211,17 @@ const css2rgb = (css) => {
 
     if ((m = css.match(RE_LAB))) {
         const lab = m.slice(1, 4);
-        lab[0] = percentToAbsolute(lab[0], 0, 100);
-        lab[1] = percentToAbsolute(lab[1], -125, 125, true);
-        lab[2] = percentToAbsolute(lab[2], -125, 125, true);
+        lab[0] = percentToAbsolute(noneToValue(lab[0], 0), 0, 100);
+        lab[1] = percentToAbsolute(noneToValue(lab[1], 0), -125, 125, true);
+        lab[2] = percentToAbsolute(noneToValue(lab[2], 0), -125, 125, true);
         // convert to D50 Lab whitepoint
         const wp = getLabWhitePoint();
         setLabWhitePoint('d50');
         const rgb = roundRGB(lab2rgb(lab));
         // convert back to original Lab whitepoint
         setLabWhitePoint(wp);
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
@@ -3134,27 +3236,30 @@ const css2rgb = (css) => {
         const rgb = roundRGB(lch2rgb(lch));
         // convert back to original Lab whitepoint
         setLabWhitePoint(wp);
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     if ((m = css.match(RE_OKLAB))) {
         const oklab = m.slice(1, 4);
-        oklab[0] = percentToAbsolute(oklab[0], 0, 1);
-        oklab[1] = percentToAbsolute(oklab[1], -0.4, 0.4, true);
-        oklab[2] = percentToAbsolute(oklab[2], -0.4, 0.4, true);
+        oklab[0] = percentToAbsolute(noneToValue(oklab[0], 0), 0, 1);
+        oklab[1] = percentToAbsolute(noneToValue(oklab[1], 0), -0.4, 0.4, true);
+        oklab[2] = percentToAbsolute(noneToValue(oklab[2], 0), -0.4, 0.4, true);
         const rgb = roundRGB(oklab2rgb(oklab));
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 
     if ((m = css.match(RE_OKLCH))) {
         const oklch = m.slice(1, 4);
-        oklch[0] = percentToAbsolute(oklch[0], 0, 1);
+        oklch[0] = percentToAbsolute(noneToValue(oklch[0], 0), 0, 1);
         oklch[1] = percentToAbsolute(noneToValue(oklch[1], 0), 0, 0.4, false);
         oklch[2] = +noneToValue(oklch[2].replace('deg', ''), 0);
         const rgb = roundRGB(oklch2rgb(oklch));
-        rgb[3] = m[4] !== undefined ? +m[4] : 1;
+        const alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
+        rgb[3] = alpha;
         return rgb;
     }
 };
@@ -3163,11 +3268,7 @@ css2rgb.test = (s) => {
     return (
         // modern
         RE_RGB.test(s) ||
-        RE_RGBA.test(s) ||
-        RE_RGB_PCT.test(s) ||
-        RE_RGBA_PCT.test(s) ||
         RE_HSL.test(s) ||
-        RE_HSLA.test(s) ||
         RE_LAB.test(s) ||
         RE_LCH.test(s) ||
         RE_OKLAB.test(s) ||
@@ -3175,10 +3276,9 @@ css2rgb.test = (s) => {
         // legacy
         RE_RGB_LEGACY.test(s) ||
         RE_RGBA_LEGACY.test(s) ||
-        RE_RGB_PCT_LEGACY.test(s) ||
-        RE_RGBA_PCT_LEGACY.test(s) ||
         RE_HSL_LEGACY.test(s) ||
-        RE_HSLA_LEGACY.test(s)
+        RE_HSLA_LEGACY.test(s) ||
+        s === 'transparent'
     );
 };
 
@@ -3344,10 +3444,11 @@ Object.assign(chroma, {
     average,
     bezier: bezier$1,
     blend,
-    brewer: colorbrewer,
+    brewer: colorbrewerProxy,
     Color,
     colors: w3cx11,
     contrast,
+    contrastAPCA,
     cubehelix,
     deltaE,
     distance,
@@ -3554,14 +3655,256 @@ function computeColorValues(color) {
   }
 }
 
-function r$1(...t){return u(Object.values,t)}
+function r$1(...n){return u(Object.values,n)}
 
 function i(...e){return u(r,e)}var r=(e,t)=>e.length>=t;
 
+function o(r,n){let e=Math.ceil(r),t=Math.floor(n);if(t<e)throw new RangeError(`randomInteger: The range [${r.toString()},${n.toString()}] contains no integer`);return Math.floor(Math.random()*(t-e+1)+e)}
+
 function t(r){return typeof r=="string"}
 
 function n(e){return !!e}
 
+function getId(element) {
+  return t(element) ? element : element.id;
+}
+
+class LikeC4DiagramModel {
+  constructor(view, model) {
+    this.view = view;
+    this.model = model;
+    for (const node of view.nodes) {
+      const el = new LikeC4DiagramModel.Element(node, this);
+      this._elements.set(node.id, el);
+      if (e(node.parent)) {
+        this._rootElements.add(el);
+      }
+    }
+    this._connections = new Map(view.edges.map((e) => [e.id, new LikeC4DiagramModel.Connection(e, this)]));
+  }
+  _rootElements = /* @__PURE__ */ new Set();
+  _elements = /* @__PURE__ */ new Map();
+  _connections;
+  get isDynamic() {
+    return this.view.__ === "dynamic";
+  }
+  get id() {
+    return this.view.id;
+  }
+  get title() {
+    return this.view.title;
+  }
+  get viewOf() {
+    if (e(this.view.__) || this.view.__ === "element") {
+      const computedView = this.view;
+      return computedView.viewOf ? this.model.element(computedView.viewOf) : null;
+    }
+    return null;
+  }
+  get tags() {
+    return this.view.tags ?? [];
+  }
+  roots() {
+    return [...this._rootElements];
+  }
+  elements() {
+    return [...this._elements.values()];
+  }
+  element(id) {
+    return nonNullable(this._elements.get(id), `LikeC4DiagramModel.Element ${id} in view ${this.view.id} not found`);
+  }
+  hasElement(id) {
+    return this._elements.has(id);
+  }
+  connections() {
+    return [...this._connections.values()];
+  }
+  connection(id) {
+    return nonNullable(this._connections.get(id), `Connection ${id} in view ${this.view.id}  not found`);
+  }
+  findConnections(source, target, direction = "direct") {
+    const sourceId = getId(source);
+    const targetId = getId(target);
+    return this.connections().filter(
+      (c) => c.source.id === sourceId && c.target.id === targetId || direction === "both" && c.source.id === targetId && c.target.id === sourceId
+    );
+  }
+  parent(element) {
+    const el = this.element(getId(element));
+    return el.node.parent ? this.element(el.node.parent) : null;
+  }
+  children(element) {
+    const el = this.element(getId(element));
+    return el.node.children.map((c) => this.element(c));
+  }
+  // Get all sibling (i.e. same parent)
+  siblings(element) {
+    const id = getId(element);
+    const parent = this.parent(id);
+    const siblings = parent ? this.children(parent) : this.roots();
+    return siblings.filter((e) => e.id !== id);
+  }
+  /**
+   * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+   * (from closest to root)
+   */
+  ancestors(element) {
+    let id = getId(element);
+    const result = [];
+    let parent;
+    while (parent = this.parent(id)) {
+      result.push(parent);
+      id = parent.id;
+    }
+    return result;
+  }
+  descendants(element) {
+    const children = this.children(element);
+    return children.flatMap((c) => [c, ...this.descendants(c.id)]);
+  }
+  incoming(element, filter = "all") {
+    const el = this.element(getId(element));
+    const edges = el.node.inEdges.map((e) => this.connection(e));
+    if (filter === "all" || edges.length === 0) {
+      return edges;
+    }
+    return edges.filter((rel) => {
+      if (filter === "direct") {
+        return rel.target.id === el.id;
+      }
+      return rel.target.id !== el.id;
+    });
+  }
+  incomers(element, filter = "all") {
+    return this.incoming(element, filter).map((r) => r.source);
+  }
+  /**
+   * Outgoing relationships from the element and its descendants
+   */
+  outgoing(element, filter = "all") {
+    const el = this.element(getId(element));
+    const edges = el.node.outEdges.map((e) => this.connection(e));
+    if (filter === "all" || edges.length === 0) {
+      return edges;
+    }
+    return edges.filter((rel) => {
+      if (filter === "direct") {
+        return rel.source.id === el.id;
+      }
+      return rel.source.id !== el.id;
+    });
+  }
+  outgoers(element, filter = "all") {
+    return this.outgoing(element, filter).map((r) => r.target);
+  }
+}
+((LikeC4DiagramModel2) => {
+  class Element {
+    constructor(node, view) {
+      this.node = node;
+      this.view = view;
+    }
+    get id() {
+      return this.node.id;
+    }
+    get title() {
+      return this.node.title;
+    }
+    get kind() {
+      return this.node.kind;
+    }
+    get isRoot() {
+      return e(this.node.parent);
+    }
+    get hasNested() {
+      return this.node.children.length > 0;
+    }
+    get shape() {
+      return this.node.shape;
+    }
+    get color() {
+      return this.node.color;
+    }
+    get tags() {
+      return this.node.tags ?? [];
+    }
+    get level() {
+      return this.node.level;
+    }
+    get depth() {
+      return this.node.depth ?? 0;
+    }
+    model() {
+      return this.view.model.element(this.id);
+    }
+    parent() {
+      return this.node.parent ? this.view.element(this.node.parent) : null;
+    }
+    metadata(key, defaultValue) {
+      return this.model().metadata(key) ?? defaultValue;
+    }
+    hasMetadata(key) {
+      return this.model().hasMetadata(key);
+    }
+    ancestors() {
+      return this.view.ancestors(this);
+    }
+    siblings() {
+      return this.view.siblings(this);
+    }
+    descendants() {
+      return this.view.descendants(this);
+    }
+    children() {
+      return this.view.children(this);
+    }
+    incoming(filter = "all") {
+      return this.view.incoming(this, filter);
+    }
+    incomers(filter = "all") {
+      return this.view.incomers(this, filter);
+    }
+    outgoing(filter = "all") {
+      return this.view.outgoing(this, filter);
+    }
+    outgoers(filter = "all") {
+      return this.view.outgoers(this, filter);
+    }
+    connectionsTo(target) {
+      return this.view.findConnections(this, target);
+    }
+  }
+  LikeC4DiagramModel2.Element = Element;
+  class Connection {
+    constructor(edge, view) {
+      this.edge = edge;
+      this.view = view;
+    }
+    get id() {
+      return this.edge.id;
+    }
+    get source() {
+      return this.view.element(this.edge.source);
+    }
+    get target() {
+      return this.view.element(this.edge.target);
+    }
+    get tags() {
+      return this.edge.tags ?? [];
+    }
+    get color() {
+      return this.edge.color ?? DefaultRelationshipColor;
+    }
+    /**
+     * Model relationships
+     */
+    relationships() {
+      return this.edge.relations.map((r) => nonNullable(this.view.model.relationship(r)));
+    }
+  }
+  LikeC4DiagramModel2.Connection = Connection;
+})(LikeC4DiagramModel || (LikeC4DiagramModel = {}));
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -3759,16 +4102,16 @@ class LikeC4ViewModel {
     this.model = model;
     for (const node of view.nodes) {
       const el = new LikeC4ViewModel.Element(node, this);
-      this.#elements.set(node.id, el);
+      this._elements.set(node.id, el);
       if (e(node.parent)) {
-        this.#rootElements.add(el);
+        this._rootElements.add(el);
       }
     }
-    this.#connections = new Map(view.edges.map((e) => [e.id, new LikeC4ViewModel.Connection(e, this)]));
+    this._connections = new Map(view.edges.map((e) => [e.id, new LikeC4ViewModel.Connection(e, this)]));
   }
-  #rootElements = /* @__PURE__ */ new Set();
-  #elements = /* @__PURE__ */ new Map();
-  #connections;
+  _rootElements = /* @__PURE__ */ new Set();
+  _elements = /* @__PURE__ */ new Map();
+  _connections;
   get id() {
     return this.view.id;
   }
@@ -3785,41 +4128,41 @@ class LikeC4ViewModel {
     return this.view.tags ?? [];
   }
   roots() {
-    return [...this.#rootElements];
+    return [...this._rootElements];
   }
   elements() {
-    return [...this.#elements.values()];
+    return [...this._elements.values()];
   }
   element(id) {
-    return nonNullable(this.#elements.get(id), `LikeC4ViewModel.Element ${id} in view ${this.view.id} not found`);
+    return nonNullable(this._elements.get(id), `LikeC4ViewModel.Element ${id} in view ${this.id} not found`);
   }
   hasElement(id) {
-    return this.#elements.has(id);
+    return this._elements.has(id);
   }
   connections() {
-    return [...this.#connections.values()];
+    return [...this._connections.values()];
   }
   connection(id) {
-    return nonNullable(this.#connections.get(id), `Connection ${id} in view ${this.view.id}  not found`);
+    return nonNullable(this._connections.get(id), `Connection ${id} in view ${this.id}  not found`);
   }
   findConnections(source, target, direction = "direct") {
-    const sourceId = t(source) ? source : source.id;
-    const targetId = t(target) ? target : target.id;
+    const sourceId = getId(source);
+    const targetId = getId(target);
     return this.connections().filter(
       (c) => c.source.id === sourceId && c.target.id === targetId || direction === "both" && c.source.id === targetId && c.target.id === sourceId
     );
   }
   parent(element) {
-    const el = this.element(t(element) ? element : element.id);
+    const el = this.element(getId(element));
     return el.node.parent ? this.element(el.node.parent) : null;
   }
   children(element) {
-    const el = this.element(t(element) ? element : element.id);
+    const el = this.element(getId(element));
     return el.node.children.map((c) => this.element(c));
   }
   // Get all sibling (i.e. same parent)
   siblings(element) {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     const parent = this.parent(id);
     const siblings = parent ? this.children(parent) : this.roots();
     return siblings.filter((e) => e.id !== id);
@@ -3829,7 +4172,7 @@ class LikeC4ViewModel {
    * (from closest to root)
    */
   ancestors(element) {
-    let id = t(element) ? element : element.id;
+    let id = getId(element);
     const result = [];
     let parent;
     while (parent = this.parent(id)) {
@@ -3843,8 +4186,8 @@ class LikeC4ViewModel {
     return children.flatMap((c) => [c, ...this.descendants(c.id)]);
   }
   incoming(element, filter = "all") {
-    const el = this.element(t(element) ? element : element.id);
-    const edges = el.node.inEdges.map((e) => nonNullable(this.#connections.get(e), `Edge ${e} not found`));
+    const el = this.element(getId(element));
+    const edges = el.node.inEdges.map((e) => nonNullable(this._connections.get(e), `Edge ${e} not found`));
     if (filter === "all" || edges.length === 0) {
       return edges;
     }
@@ -3862,8 +4205,8 @@ class LikeC4ViewModel {
    * Outgoing relationships from the element and its descendants
    */
   outgoing(element, filter = "all") {
-    const el = this.element(t(element) ? element : element.id);
-    const edges = el.node.outEdges.map((e) => nonNullable(this.#connections.get(e), `Edge ${e} not found`));
+    const el = this.element(getId(element));
+    const edges = el.node.outEdges.map((e) => nonNullable(this._connections.get(e), `Edge ${e} not found`));
     if (filter === "all" || edges.length === 0) {
       return edges;
     }
@@ -3976,103 +4319,126 @@ class LikeC4ViewModel {
   LikeC4ViewModel2.Connection = Connection;
 })(LikeC4ViewModel || (LikeC4ViewModel = {}));
 
-const RelationsSet = Set;
-const MapRelations = Map;
 class LikeC4Model {
-  constructor(computed) {
-    this.computed = computed;
-    for (const el of r$1(computed.elements)) {
+  constructor(type, sourcemodel, elements, relations) {
+    this.type = type;
+    this.sourcemodel = sourcemodel;
+    for (const el of elements) {
       this.addElement(el);
     }
-    for (const rel of r$1(computed.relations)) {
+    for (const rel of relations) {
       this.addRelation(rel);
     }
-    this.#views = new Map(
-      r$1(computed.views).map((v) => [v.id, new LikeC4ViewModel(v, this)])
-    );
   }
-  #elements = /* @__PURE__ */ new Map();
+  _elements = /* @__PURE__ */ new Map();
   // Parent element for given FQN
-  #parents = /* @__PURE__ */ new Map();
+  _parents = /* @__PURE__ */ new Map();
   // Children elements for given FQN
-  #children = /* @__PURE__ */ new Map();
-  #rootElements = /* @__PURE__ */ new Set();
-  #relations = /* @__PURE__ */ new Map();
+  _children = /* @__PURE__ */ new Map();
+  _rootElements = /* @__PURE__ */ new Set();
+  _relations = /* @__PURE__ */ new Map();
   // Incoming to an element or its descendants
-  #incoming = new MapRelations();
+  _incoming = /* @__PURE__ */ new Map();
   // Outgoing from an element or its descendants
-  #outgoing = new MapRelations();
+  _outgoing = /* @__PURE__ */ new Map();
   // Relationships inside the element, among descendants
-  #internal = new MapRelations();
-  #cacheAscendingSiblings = /* @__PURE__ */ new Map();
-  #views;
-  static from(computed) {
-    return new LikeC4Model(computed);
+  _internal = /* @__PURE__ */ new Map();
+  _cacheAscendingSiblings = /* @__PURE__ */ new Map();
+  _views = /* @__PURE__ */ new Map();
+  static create(source) {
+    if (source.__ === "layouted") {
+      return LikeC4Model.layouted(source);
+    }
+    return LikeC4Model.computed(source);
+  }
+  static computed(source) {
+    const instance = new LikeC4Model(
+      "computed",
+      source,
+      r$1(source.elements),
+      r$1(source.relations)
+    );
+    for (const view of r$1(source.views)) {
+      instance._views.set(view.id, new LikeC4ViewModel(view, instance));
+    }
+    return instance;
+  }
+  static layouted(source) {
+    const instance = new LikeC4Model(
+      "layouted",
+      source,
+      r$1(source.elements),
+      r$1(source.relations)
+    );
+    for (const view of r$1(source.views)) {
+      instance._views.set(view.id, new LikeC4DiagramModel(view, instance));
+    }
+    return instance;
   }
   /**
    * Returns the root elements of the model.
    */
   roots() {
-    return [...this.#rootElements];
+    return [...this._rootElements];
   }
   /**
    * Returns all elements in the model.
    */
   elements() {
-    return [...this.#elements.values()];
+    return [...this._elements.values()];
   }
   /**
    * Returns a specific element by its FQN.
    */
   element(id) {
-    return nonNullable(this.#elements.get(id), `Element ${id} not found`);
+    return nonNullable(this._elements.get(id), `Element ${id} not found`);
   }
   /**
    * Returns all relationships in the model.
    */
   relationships() {
-    return [...this.#relations.values()];
+    return [...this._relations.values()];
   }
   /**
    * Returns a specific relationship by its ID.
    */
   relationship(id) {
-    return nonNullable(this.#relations.get(id), `Relation ${id} not found`);
+    return nonNullable(this._relations.get(id), `Relation ${id} not found`);
   }
   /**
    * Returns all views in the model.
    */
   views() {
-    return [...this.#views.values()];
+    return [...this._views.values()];
   }
   /**
    * Returns a specific view by its ID.
    */
   view(viewId) {
-    return nonNullable(this.#views.get(viewId), `View ${viewId} not found`);
+    return nonNullable(this._views.get(viewId), `View ${viewId} not found`);
   }
   /**
    * Returns the parent element of given element.
    * @see ancestors
    */
   parent(element) {
-    const id = t(element) ? element : element.id;
-    return this.#parents.get(id) || null;
+    const id = getId(element);
+    return this._parents.get(id) || null;
   }
   /**
    * Get all children of the element (only direct children),
    * @see descendants
    */
   children(element) {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     return this._childrenOf(id);
   }
   /**
    * Get all sibling (i.e. same parent)
    */
   siblings(element) {
-    const id = t(element) ? element : element.id;
-    const parent = this.#parents.get(id);
+    const id = getId(element);
+    const parent = this._parents.get(id);
     const siblings = parent ? this._childrenOf(parent.id) : this.roots();
     return siblings.filter((e) => e.id !== id);
   }
@@ -4084,7 +4450,7 @@ class LikeC4Model {
     let id = t(element) ? element : element.id;
     const result = [];
     let parent;
-    while (parent = this.#parents.get(id)) {
+    while (parent = this._parents.get(id)) {
       result.push(parent);
       id = parent.id;
     }
@@ -4094,7 +4460,7 @@ class LikeC4Model {
    * Get all descendant elements (i.e. children, children’s children, etc.)
    */
   descendants(element) {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     const children = this._childrenOf(id);
     return children.flatMap((c) => [c, ...this.descendants(c.id)]);
   }
@@ -4103,7 +4469,7 @@ class LikeC4Model {
    * @see incomers
    */
   incoming(element, filter = "all") {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     const incoming = Array.from(this._incomingTo(id));
     if (filter === "all" || incoming.length === 0) {
       return incoming;
@@ -4126,7 +4492,7 @@ class LikeC4Model {
    * @see outgoers
    */
   outgoing(element, filter = "all") {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     const outgoing = Array.from(this._outgoingFrom(id));
     if (filter === "all" || outgoing.length === 0) {
       return outgoing;
@@ -4148,7 +4514,7 @@ class LikeC4Model {
    * Relationships inside the element, among descendants
    */
   internal(element) {
-    const id = t(element) ? element : element.id;
+    const id = getId(element);
     return Array.from(this._internalOf(id));
   }
   /**
@@ -4156,14 +4522,14 @@ class LikeC4Model {
    *  (from closest to root)
    */
   ascendingSiblings(element) {
-    const id = t(element) ? element : element.id;
-    let siblings = this.#cacheAscendingSiblings.get(id);
+    const id = getId(element);
+    let siblings = this._cacheAscendingSiblings.get(id);
     if (!siblings) {
       siblings = [
         ...this.siblings(id),
         ...this.ancestors(id).flatMap((a) => this.siblings(a.id))
       ];
-      this.#cacheAscendingSiblings.set(id, siblings);
+      this._cacheAscendingSiblings.set(id, siblings);
     }
     return siblings.slice();
   }
@@ -4171,29 +4537,29 @@ class LikeC4Model {
    * Resolve all views that contain the element
    */
   viewsWithElement(element) {
-    const id = t(element) ? element : element.id;
-    return [...this.#views.values()].filter((v) => v.hasElement(id));
+    const id = getId(element);
+    return [...this._views.values()].filter((v) => v.hasElement(id));
   }
   addElement(parsed) {
-    if (this.#elements.has(parsed.id)) {
+    if (this._elements.has(parsed.id)) {
       throw new Error(`Element ${parsed.id} already exists`);
     }
-    const el = new LikeC4Model.Element(parsed, this);
-    this.#elements.set(el.id, el);
+    const el = new LikeC4Model.ElementModel(parsed, this);
+    this._elements.set(el.id, el);
     const parentId = parentFqn(el.id);
     if (parentId) {
-      this.#parents.set(el.id, this.element(parentId));
+      this._parents.set(el.id, this.element(parentId));
       this._childrenOf(parentId).push(el);
     } else {
-      this.#rootElements.add(el);
+      this._rootElements.add(el);
     }
   }
   addRelation(relation) {
-    if (this.#relations.has(relation.id)) {
+    if (this._relations.has(relation.id)) {
       throw new Error(`Relation ${relation.id} already exists`);
     }
     const rel = new LikeC4Model.Relationship(relation, this);
-    this.#relations.set(rel.id, rel);
+    this._relations.set(rel.id, rel);
     this._incomingTo(relation.target).add(rel);
     this._outgoingFrom(relation.source).add(rel);
     const relParent = commonAncestor(relation.source, relation.target);
@@ -4216,40 +4582,85 @@ class LikeC4Model {
     }
   }
   _childrenOf(id) {
-    let children = this.#children.get(id);
+    let children = this._children.get(id);
     if (!children) {
       children = [];
-      this.#children.set(id, children);
+      this._children.set(id, children);
     }
     return children;
   }
   _incomingTo(id) {
-    let incoming = this.#incoming.get(id);
+    let incoming = this._incoming.get(id);
     if (!incoming) {
-      incoming = new RelationsSet();
-      this.#incoming.set(id, incoming);
+      incoming = /* @__PURE__ */ new Set();
+      this._incoming.set(id, incoming);
     }
     return incoming;
   }
   _outgoingFrom(id) {
-    let outgoing = this.#outgoing.get(id);
+    let outgoing = this._outgoing.get(id);
     if (!outgoing) {
-      outgoing = new RelationsSet();
-      this.#outgoing.set(id, outgoing);
+      outgoing = /* @__PURE__ */ new Set();
+      this._outgoing.set(id, outgoing);
     }
     return outgoing;
   }
   _internalOf(id) {
-    let internal = this.#internal.get(id);
+    let internal = this._internal.get(id);
     if (!internal) {
-      internal = new RelationsSet();
-      this.#internal.set(id, internal);
+      internal = /* @__PURE__ */ new Set();
+      this._internal.set(id, internal);
     }
     return internal;
   }
 }
 ((LikeC4Model2) => {
-  class Element {
+  function isModel(model) {
+    return model instanceof LikeC4Model2;
+  }
+  LikeC4Model2.isModel = isModel;
+  ((ViewModel2) => {
+    function isLayouted2(model) {
+      return model instanceof LikeC4DiagramModel;
+    }
+    ViewModel2.isLayouted = isLayouted2;
+  })(LikeC4Model2.ViewModel || (LikeC4Model2.ViewModel = {}));
+  function isLayouted(model) {
+    return model.type === "layouted";
+  }
+  LikeC4Model2.isLayouted = isLayouted;
+  class Relationship {
+    constructor(relationship, model) {
+      this.relationship = relationship;
+      this.model = model;
+    }
+    get id() {
+      return this.relationship.id;
+    }
+    get title() {
+      return this.relationship.title;
+    }
+    get kind() {
+      return this.relationship.kind ?? null;
+    }
+    get tags() {
+      return this.relationship.tags ?? [];
+    }
+    get source() {
+      return this.model.element(this.relationship.source);
+    }
+    get target() {
+      return this.model.element(this.relationship.target);
+    }
+    metadata(key, defaultValue) {
+      return this.relationship.metadata?.[key] ?? defaultValue;
+    }
+    hasMetadata(key) {
+      return n(this.relationship.metadata?.[key]);
+    }
+  }
+  LikeC4Model2.Relationship = Relationship;
+  class ElementModel {
     constructor(element, model) {
       this.element = element;
       this.model = model;
@@ -4324,46 +4735,21 @@ class LikeC4Model {
     //   return
     // }
   }
-  LikeC4Model2.Element = Element;
-  class Relationship {
-    constructor(relationship, model) {
-      this.relationship = relationship;
-      this.model = model;
-    }
-    get id() {
-      return this.relationship.id;
-    }
-    get title() {
-      return this.relationship.title;
-    }
-    get kind() {
-      return this.relationship.kind ?? null;
-    }
-    get tags() {
-      return this.relationship.tags ?? [];
-    }
-    get source() {
-      return this.model.element(this.relationship.source);
-    }
-    get target() {
-      return this.model.element(this.relationship.target);
-    }
-    metadata(key, defaultValue) {
-      return this.relationship.metadata?.[key] ?? defaultValue;
-    }
-    hasMetadata(key) {
-      return n(this.relationship.metadata?.[key]);
-    }
-  }
-  LikeC4Model2.Relationship = Relationship;
+  LikeC4Model2.ElementModel = ElementModel;
 })(LikeC4Model || (LikeC4Model = {}));
 
 const DELAY = "LIKEC4_DELAY";
-function delay(ms = 100) {
+function delay(...args) {
+  let ms = 100;
+  if (args.length === 2) {
+    ms = o(args[0], args[1]);
+  } else if (args.length === 1) {
+    ms = args[0];
+  }
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(DELAY);
-    }, ms);
+    }, ms ?? 100);
   });
 }
 
@@ -4387,4 +4773,4 @@ const compareRelations = (a, b) => {
   return compareFqnHierarchically(a.target, b.target);
 };
 
-export { DefaultElementShape, DefaultThemeColor, ElementColors, LikeC4Model, LikeC4ViewModel, RelationshipColors, ancestorsFqn, commonAncestor, compareByFqnHierarchically, compareFqnHierarchically, compareNatural, compareRelations, computeColorValues, defaultTheme, delay, i as hasAtLeast, isAncestor, isDescendantOf, isNonEmptyArray, isSameHierarchy, isString, nameFromFqn, nonNullable, notDescendantOf, parentFqn, parentFqnPredicate, sortByFqnHierarchically, sortNaturalByFqn };
+export { DefaultElementShape, DefaultRelationshipColor, DefaultThemeColor, ElementColors, LikeC4DiagramModel, LikeC4Model, LikeC4ViewModel, RelationshipColors, ancestorsFqn, commonAncestor, compareByFqnHierarchically, compareFqnHierarchically, compareNatural, compareRelations, computeColorValues, defaultTheme, delay, i as hasAtLeast, isAncestor, isDescendantOf, isNonEmptyArray, isSameHierarchy, isString, nameFromFqn, nonNullable, notDescendantOf, parentFqn, parentFqnPredicate, sortByFqnHierarchically, sortNaturalByFqn };