likec4 1.0.2 → 1.1.0

package/dist/__app__/src/{view._viewId.d2.lazy-DTd-VfOz.js → view._viewId.d2.lazy-BX8VfXLS.js}

@@ -1,5 +1,5 @@
-import { p as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, x as Code, w as notFound } from "./main-DDd-kcC2.js";
-import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-Dhp7OfYa.js";
+import { l as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, C as Code, p as notFound } from "./main-Ccc7-VWf.js";
+import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-DBWYV6RO.js";
 import { d2Source } from "virtual:likec4/d2-sources";
 const Route = createLazyFileRoute("/view/$viewId/d2")({
   component: ViewAsD2

package/dist/__app__/src/{view._viewId.dot.lazy-DC6I8DnA.js → view._viewId.dot.lazy-_gnghLVA.js}

@@ -1,5 +1,5 @@
-import { p as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, x as Code, y as svgContainer, w as notFound } from "./main-DDd-kcC2.js";
-import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-Dhp7OfYa.js";
+import { l as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, C as Code, q as svgContainer, p as notFound } from "./main-Ccc7-VWf.js";
+import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-DBWYV6RO.js";
 import { dotSource, svgSource } from "virtual:likec4/dot-sources";
 const Route = createLazyFileRoute("/view/$viewId/dot")({
   component: ViewAsDot

package/dist/__app__/src/{view._viewId.mmd.lazy-CkKTxoM5.js → view._viewId.mmd.lazy-o20hkhat.js}

@@ -1,5 +1,5 @@
-import { r as reactExports, b as useSyncedRef, p as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, x as Code, y as svgContainer, w as notFound } from "./main-DDd-kcC2.js";
-import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-Dhp7OfYa.js";
+import { r as reactExports, b as useSyncedRef, l as createLazyFileRoute, j as jsxRuntimeExports, S as ScrollArea, C as Code, q as svgContainer, p as notFound } from "./main-Ccc7-VWf.js";
+import { P as PanelGroup, a as Panel, c as cssScrollArea, b as cssCodeBlock, C as CopyToClipboard, d as PanelResizeHandle } from "./view_viewId_.css-DBWYV6RO.js";
 import { mmdSource } from "virtual:likec4/mmd-sources";
 function useAsync(asyncFn, initialValue) {
   const [state, setState] = reactExports.useState({

package/dist/__app__/src/{view._viewId.react-legacy.lazy-D82hW8RW.js → view._viewId.react-legacy.lazy-DvQqUilU.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, u as useRafCallback, a as useUnmountEffect, b as useSyncedRef$1, c as useFirstMountState, i as isBrowser$1, d as change, e as channels, U as Utils, C as Color, f as commonjsGlobal, g as getDefaultExportFromCjs, s as schedulerExports, R as React, j as jsxRuntimeExports, t as toHex, h as scale, k as invariant, n as nonexhaustive, l as useUpdateEffect, m as nonNullable, o as defaultTheme, B as Box, p as createLazyFileRoute, q as useRouter, v as useLikeC4View, w as notFound } from "./main-DDd-kcC2.js";
+import { r as reactExports, u as useRafCallback, a as useUnmountEffect, b as useSyncedRef$1, c as useFirstMountState, i as isBrowser$1, d as commonjsGlobal, g as getDefaultExportFromCjs, s as schedulerExports, R as React, j as jsxRuntimeExports, e as invariant, n as nonexhaustive, f as useUpdateEffect, h as nonNullable, k as defaultTheme, B as Box, l as createLazyFileRoute, m as useRouter, o as useLikeC4View, p as notFound } from "./main-Ccc7-VWf.js";
 function useIsMounted$1(initialValue = !1) {
   const isMounted = reactExports.useRef(initialValue), get = reactExports.useCallback(() => isMounted.current, []);
   return reactExports.useEffect(() => (isMounted.current = !0, () => {
@@ -61,23 +61,7 @@ function useWindowSize(stateHook = useRafState, measureOnMount) {
     listeners.delete(setSize), listeners.size === 0 && window.removeEventListener("resize", callAllListeners);
   }), [setSize]), size;
 }
-const DefaultLineStyle = "dashed", DefaultArrowType = "normal", DefaultRelationshipColor = "gray", rgba$1 = (r, g, b = 0, a = 1) => {
-  if (typeof r != "number")
-    return change(r, { a: g });
-  const channels$1 = channels.set({
-    r: Utils.channel.clamp.r(r),
-    g: Utils.channel.clamp.g(g),
-    b: Utils.channel.clamp.b(b),
-    a: Utils.channel.clamp.a(a)
-  });
-  return Color.stringify(channels$1);
-}, rgba$2 = rgba$1, adjustChannel = (color, channel, amount) => {
-  const channels2 = Color.parse(color), amountCurrent = channels2[channel], amountNext = Utils.channel.clamp[channel](amountCurrent + amount);
-  return amountCurrent !== amountNext && (channels2[channel] = amountNext), Color.stringify(channels2);
-}, adjustChannel$1 = adjustChannel, lighten = (color, amount) => adjustChannel$1(color, "l", amount), lighten$1 = lighten, mix = (color1, color2, weight = 50) => {
-  const { r: r1, g: g1, b: b1, a: a1 } = Color.parse(color1), { r: r2, g: g2, b: b2, a: a2 } = Color.parse(color2), weightScale = weight / 100, weightNormalized = weightScale * 2 - 1, alphaDelta = a1 - a2, weight1 = ((weightNormalized * alphaDelta === -1 ? weightNormalized : (weightNormalized + alphaDelta) / (1 + weightNormalized * alphaDelta)) + 1) / 2, weight2 = 1 - weight1, r = r1 * weight1 + r2 * weight2, g = g1 * weight1 + g2 * weight2, b = b1 * weight1 + b2 * weight2, a = a1 * weightScale + a2 * (1 - weightScale);
-  return rgba$2(r, g, b, a);
-}, mix$1 = mix;
+const DefaultLineStyle = "dashed", DefaultArrowType = "normal", DefaultRelationshipColor = "gray";
 var __defProp$1 = Object.defineProperty, __export = (target, all) => {
   for (var name in all)
     __defProp$1(target, name, { get: all[name], enumerable: !0 });
@@ -438,7 +422,7 @@ var clamp$2 = (min, max, v) => Math.min(Math.max(v, min), max), colors2 = {
 function call$1(...parts) {
   return "\\(\\s*(" + parts.join(")\\s*,\\s*(") + ")\\s*\\)";
 }
-var rgb = new RegExp("rgb" + call$1(NUMBER, NUMBER, NUMBER)), rgba = new RegExp("rgba" + call$1(NUMBER, NUMBER, NUMBER, NUMBER)), hsl = new RegExp("hsl" + call$1(NUMBER, PERCENTAGE, PERCENTAGE)), hsla = new RegExp(
+var rgb = new RegExp("rgb" + call$1(NUMBER, NUMBER, NUMBER)), rgba$2 = new RegExp("rgba" + call$1(NUMBER, NUMBER, NUMBER, NUMBER)), hsl = new RegExp("hsl" + call$1(NUMBER, PERCENTAGE, PERCENTAGE)), hsla = new RegExp(
   "hsla" + call$1(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
 ), hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex6 = /^#([0-9a-fA-F]{6})$/, hex8 = /^#([0-9a-fA-F]{8})$/;
 function normalizeColor(color) {
@@ -447,7 +431,7 @@ function normalizeColor(color) {
   parse255(match[2]) << 16 | // g
   parse255(match[3]) << 8 | // b
   255) >>> // a
-  0 : (match = rgba.exec(color)) ? (parse255(match[1]) << 24 | // r
+  0 : (match = rgba$2.exec(color)) ? (parse255(match[1]) << 24 | // r
   parse255(match[2]) << 16 | // g
   parse255(match[3]) << 8 | // b
   parse1(match[4])) >>> // a
@@ -12174,7 +12158,489 @@ const AnimatedStage = /* @__PURE__ */ animated(Stage), AnimatedRect = /* @__PURE
     return ctor !== b.constructor ? !1 : ctor === Array ? compareArrays(a, b, isEqual) : ctor === Date ? compareDates(a, b) : ctor === RegExp ? compareRegexps(a, b) : a.valueOf !== valueOf ? a.valueOf() === b.valueOf() : a.toString !== toString ? a.toString() === b.toString() : compareObjects(a, b, isEqual);
   }
   return a !== a && b !== b;
+}, Channel = {
+  /* CLAMP */
+  min: {
+    r: 0,
+    g: 0,
+    b: 0,
+    s: 0,
+    l: 0,
+    a: 0
+  },
+  max: {
+    r: 255,
+    g: 255,
+    b: 255,
+    h: 360,
+    s: 100,
+    l: 100,
+    a: 1
+  },
+  clamp: {
+    r: (r) => r >= 255 ? 255 : r < 0 ? 0 : r,
+    g: (g) => g >= 255 ? 255 : g < 0 ? 0 : g,
+    b: (b) => b >= 255 ? 255 : b < 0 ? 0 : b,
+    h: (h) => h % 360,
+    s: (s) => s >= 100 ? 100 : s < 0 ? 0 : s,
+    l: (l) => l >= 100 ? 100 : l < 0 ? 0 : l,
+    a: (a) => a >= 1 ? 1 : a < 0 ? 0 : a
+  },
+  /* CONVERSION */
+  //SOURCE: https://planetcalc.com/7779
+  toLinear: (c) => {
+    const n = c / 255;
+    return c > 0.03928 ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92;
+  },
+  //SOURCE: https://gist.github.com/mjackson/5311256
+  hue2rgb: (p, q, t) => (t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p),
+  hsl2rgb: ({ h, s, l }, channel) => {
+    if (!s)
+      return l * 2.55;
+    h /= 360, s /= 100, l /= 100;
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+    switch (channel) {
+      case "r":
+        return Channel.hue2rgb(p, q, h + 1 / 3) * 255;
+      case "g":
+        return Channel.hue2rgb(p, q, h) * 255;
+      case "b":
+        return Channel.hue2rgb(p, q, h - 1 / 3) * 255;
+    }
+  },
+  rgb2hsl: ({ r, g, b }, channel) => {
+    r /= 255, g /= 255, b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2;
+    if (channel === "l")
+      return l * 100;
+    if (max === min)
+      return 0;
+    const d = max - min, s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (channel === "s")
+      return s * 100;
+    switch (max) {
+      case r:
+        return ((g - b) / d + (g < b ? 6 : 0)) * 60;
+      case g:
+        return ((b - r) / d + 2) * 60;
+      case b:
+        return ((r - g) / d + 4) * 60;
+      default:
+        return -1;
+    }
+  }
+}, Lang = {
+  /* API */
+  clamp: (number, lower, upper) => lower > upper ? Math.min(lower, Math.max(upper, number)) : Math.min(upper, Math.max(lower, number)),
+  round: (number) => Math.round(number * 1e10) / 1e10
+}, lang = Lang, Unit = {
+  /* API */
+  dec2hex: (dec) => {
+    const hex = Math.round(dec).toString(16);
+    return hex.length > 1 ? hex : `0${hex}`;
+  }
+}, unit = Unit, Utils = {
+  channel: Channel,
+  lang,
+  unit
+}, DEC2HEX = {};
+for (let i = 0; i <= 255; i++)
+  DEC2HEX[i] = Utils.unit.dec2hex(i);
+const TYPE = {
+  ALL: 0,
+  RGB: 1,
+  HSL: 2
 };
+class Type {
+  constructor() {
+    this.type = TYPE.ALL;
+  }
+  /* API */
+  get() {
+    return this.type;
+  }
+  set(type2) {
+    if (this.type && this.type !== type2)
+      throw new Error("Cannot change both RGB and HSL channels at the same time");
+    this.type = type2;
+  }
+  reset() {
+    this.type = TYPE.ALL;
+  }
+  is(type2) {
+    return this.type === type2;
+  }
+}
+class Channels {
+  /* CONSTRUCTOR */
+  constructor(data, color) {
+    this.color = color, this.changed = !1, this.data = data, this.type = new Type();
+  }
+  /* API */
+  set(data, color) {
+    return this.color = color, this.changed = !1, this.data = data, this.type.type = TYPE.ALL, this;
+  }
+  /* HELPERS */
+  _ensureHSL() {
+    const data = this.data, { h, s, l } = data;
+    h === void 0 && (data.h = Utils.channel.rgb2hsl(data, "h")), s === void 0 && (data.s = Utils.channel.rgb2hsl(data, "s")), l === void 0 && (data.l = Utils.channel.rgb2hsl(data, "l"));
+  }
+  _ensureRGB() {
+    const data = this.data, { r, g, b } = data;
+    r === void 0 && (data.r = Utils.channel.hsl2rgb(data, "r")), g === void 0 && (data.g = Utils.channel.hsl2rgb(data, "g")), b === void 0 && (data.b = Utils.channel.hsl2rgb(data, "b"));
+  }
+  /* GETTERS */
+  get r() {
+    const data = this.data, r = data.r;
+    return !this.type.is(TYPE.HSL) && r !== void 0 ? r : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "r"));
+  }
+  get g() {
+    const data = this.data, g = data.g;
+    return !this.type.is(TYPE.HSL) && g !== void 0 ? g : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "g"));
+  }
+  get b() {
+    const data = this.data, b = data.b;
+    return !this.type.is(TYPE.HSL) && b !== void 0 ? b : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "b"));
+  }
+  get h() {
+    const data = this.data, h = data.h;
+    return !this.type.is(TYPE.RGB) && h !== void 0 ? h : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "h"));
+  }
+  get s() {
+    const data = this.data, s = data.s;
+    return !this.type.is(TYPE.RGB) && s !== void 0 ? s : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "s"));
+  }
+  get l() {
+    const data = this.data, l = data.l;
+    return !this.type.is(TYPE.RGB) && l !== void 0 ? l : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "l"));
+  }
+  get a() {
+    return this.data.a;
+  }
+  /* SETTERS */
+  set r(r) {
+    this.type.set(TYPE.RGB), this.changed = !0, this.data.r = r;
+  }
+  set g(g) {
+    this.type.set(TYPE.RGB), this.changed = !0, this.data.g = g;
+  }
+  set b(b) {
+    this.type.set(TYPE.RGB), this.changed = !0, this.data.b = b;
+  }
+  set h(h) {
+    this.type.set(TYPE.HSL), this.changed = !0, this.data.h = h;
+  }
+  set s(s) {
+    this.type.set(TYPE.HSL), this.changed = !0, this.data.s = s;
+  }
+  set l(l) {
+    this.type.set(TYPE.HSL), this.changed = !0, this.data.l = l;
+  }
+  set a(a) {
+    this.changed = !0, this.data.a = a;
+  }
+}
+const Channels$1 = Channels, channels = new Channels$1({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex = {
+  /* VARIABLES */
+  re: /^#((?:[a-f0-9]{2}){2,4}|[a-f0-9]{3})$/i,
+  /* API */
+  parse: (color) => {
+    if (color.charCodeAt(0) !== 35)
+      return;
+    const match = color.match(Hex.re);
+    if (!match)
+      return;
+    const hex = match[1], dec = parseInt(hex, 16), length = hex.length, hasAlpha = length % 4 === 0, isFullLength = length > 4, multiplier = isFullLength ? 1 : 17, bits = isFullLength ? 8 : 4, bitsOffset = hasAlpha ? 0 : -1, mask = isFullLength ? 255 : 15;
+    return channels.set({
+      r: (dec >> bits * (bitsOffset + 3) & mask) * multiplier,
+      g: (dec >> bits * (bitsOffset + 2) & mask) * multiplier,
+      b: (dec >> bits * (bitsOffset + 1) & mask) * multiplier,
+      a: hasAlpha ? (dec & mask) * multiplier / 255 : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { r, g, b, a } = channels2;
+    return a < 1 ? `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}${DEC2HEX[Math.round(a * 255)]}` : `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}`;
+  }
+}, HSL = {
+  /* VARIABLES */
+  re: /^hsla?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(?:deg|grad|rad|turn)?)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(%)?))?\s*?\)$/i,
+  hueRe: /^(.+?)(deg|grad|rad|turn)$/i,
+  /* HELPERS */
+  _hue2deg: (hue) => {
+    const match = hue.match(HSL.hueRe);
+    if (match) {
+      const [, number, unit2] = match;
+      switch (unit2) {
+        case "grad":
+          return Utils.channel.clamp.h(parseFloat(number) * 0.9);
+        case "rad":
+          return Utils.channel.clamp.h(parseFloat(number) * 180 / Math.PI);
+        case "turn":
+          return Utils.channel.clamp.h(parseFloat(number) * 360);
+      }
+    }
+    return Utils.channel.clamp.h(parseFloat(hue));
+  },
+  /* API */
+  parse: (color) => {
+    const charCode = color.charCodeAt(0);
+    if (charCode !== 104 && charCode !== 72)
+      return;
+    const match = color.match(HSL.re);
+    if (!match)
+      return;
+    const [, h, s, l, a, isAlphaPercentage] = match;
+    return channels.set({
+      h: HSL._hue2deg(h),
+      s: Utils.channel.clamp.s(parseFloat(s)),
+      l: Utils.channel.clamp.l(parseFloat(l)),
+      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { h, s, l, a } = channels2;
+    return a < 1 ? `hsla(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%, ${a})` : `hsl(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%)`;
+  }
+}, Keyword = {
+  /* VARIABLES */
+  colors: {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyanaqua: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkgrey: "#a9a9a9",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkslategrey: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dimgrey: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    grey: "#808080",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    indianred: "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgray: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightgrey: "#d3d3d3",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightslategrey: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370db",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#db7093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    slategrey: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    transparent: "#00000000",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32"
+  },
+  /* API */
+  parse: (color) => {
+    color = color.toLowerCase();
+    const hex = Keyword.colors[color];
+    if (hex)
+      return Hex.parse(hex);
+  },
+  stringify: (channels2) => {
+    const hex = Hex.stringify(channels2);
+    for (const name in Keyword.colors)
+      if (Keyword.colors[name] === hex)
+        return name;
+  }
+}, RGB = {
+  /* VARIABLES */
+  re: /^rgba?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?)))?\s*?\)$/i,
+  /* API */
+  parse: (color) => {
+    const charCode = color.charCodeAt(0);
+    if (charCode !== 114 && charCode !== 82)
+      return;
+    const match = color.match(RGB.re);
+    if (!match)
+      return;
+    const [, r, isRedPercentage, g, isGreenPercentage, b, isBluePercentage, a, isAlphaPercentage] = match;
+    return channels.set({
+      r: Utils.channel.clamp.r(isRedPercentage ? parseFloat(r) * 2.55 : parseFloat(r)),
+      g: Utils.channel.clamp.g(isGreenPercentage ? parseFloat(g) * 2.55 : parseFloat(g)),
+      b: Utils.channel.clamp.b(isBluePercentage ? parseFloat(b) * 2.55 : parseFloat(b)),
+      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { r, g, b, a } = channels2;
+    return a < 1 ? `rgba(${Utils.lang.round(r)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)}, ${Utils.lang.round(a)})` : `rgb(${Utils.lang.round(r)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)})`;
+  }
+}, Color = {
+  /* VARIABLES */
+  format: {
+    keyword: Keyword,
+    hex: Hex,
+    rgb: RGB,
+    rgba: RGB,
+    hsl: HSL,
+    hsla: HSL
+  },
+  /* API */
+  parse: (color) => {
+    if (typeof color != "string")
+      return color;
+    const channels2 = Hex.parse(color) || RGB.parse(color) || HSL.parse(color) || Keyword.parse(color);
+    if (channels2)
+      return channels2;
+    throw new Error(`Unsupported color format: "${color}"`);
+  },
+  stringify: (channels2) => !channels2.changed && channels2.color ? channels2.color : channels2.type.is(TYPE.HSL) || channels2.data.r === void 0 ? HSL.stringify(channels2) : channels2.a < 1 || !Number.isInteger(channels2.r) || !Number.isInteger(channels2.g) || !Number.isInteger(channels2.b) ? RGB.stringify(channels2) : Hex.stringify(channels2)
+}, change = (color, channels2) => {
+  const ch = Color.parse(color);
+  for (const c in channels2)
+    ch[c] = Utils.channel.clamp[c](channels2[c]);
+  return Color.stringify(ch);
+}, change$1 = change, rgba = (r, g, b = 0, a = 1) => {
+  if (typeof r != "number")
+    return change$1(r, { a: g });
+  const channels$1 = channels.set({
+    r: Utils.channel.clamp.r(r),
+    g: Utils.channel.clamp.g(g),
+    b: Utils.channel.clamp.b(b),
+    a: Utils.channel.clamp.a(a)
+  });
+  return Color.stringify(channels$1);
+}, rgba$1 = rgba, toHex = (color) => Color.format.hex.stringify(Color.parse(color)), adjustChannel = (color, channel, amount) => {
+  const channels2 = Color.parse(color), amountCurrent = channels2[channel], amountNext = Utils.channel.clamp[channel](amountCurrent + amount);
+  return amountCurrent !== amountNext && (channels2[channel] = amountNext), Color.stringify(channels2);
+}, adjustChannel$1 = adjustChannel, lighten = (color, amount) => adjustChannel$1(color, "l", amount), lighten$1 = lighten, adjust = (color, channels2) => {
+  const ch = Color.parse(color), changes = {};
+  for (const c in channels2)
+    channels2[c] && (changes[c] = ch[c] + channels2[c]);
+  return change$1(color, changes);
+}, adjust$1 = adjust, mix = (color1, color2, weight = 50) => {
+  const { r: r1, g: g1, b: b1, a: a1 } = Color.parse(color1), { r: r2, g: g2, b: b2, a: a2 } = Color.parse(color2), weightScale = weight / 100, weightNormalized = weightScale * 2 - 1, alphaDelta = a1 - a2, weight1 = ((weightNormalized * alphaDelta === -1 ? weightNormalized : (weightNormalized + alphaDelta) / (1 + weightNormalized * alphaDelta)) + 1) / 2, weight2 = 1 - weight1, r = r1 * weight1 + r2 * weight2, g = g1 * weight1 + g2 * weight2, b = b1 * weight1 + b2 * weight2, a = a1 * weightScale + a2 * (1 - weightScale);
+  return rgba$1(r, g, b, a);
+}, mix$1 = mix, scale = (color, channels2) => {
+  const ch = Color.parse(color), adjustments = {}, delta = (amount, weight, max) => weight > 0 ? (max - amount) * weight / 100 : amount * weight / 100;
+  for (const c in channels2)
+    adjustments[c] = delta(ch[c], channels2[c], Utils.channel.max[c]);
+  return adjust$1(color, adjustments);
+}, scale$1 = scale;
 function EdgeArrow({
   arrowType,
   points,
@@ -12822,18 +13288,18 @@ function DiagramStateProvider({ children }) {
 }
 const edgeColors = memoize((colors3, isHovered) => isHovered ? {
   lineColor: toHex(
-    scale(colors3.lineColor, {
+    scale$1(colors3.lineColor, {
       l: 30
     })
   ),
   labelColor: toHex(
-    scale(colors3.labelColor, {
+    scale$1(colors3.labelColor, {
       l: 40,
       s: 5
     })
   ),
   labelBgColor: toHex(
-    scale(colors3.labelBgColor, {
+    scale$1(colors3.labelBgColor, {
       l: -10
     })
   )
@@ -14455,7 +14921,7 @@ function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
 }
 const compoundColor = memoize(
   (color, depth) => toHex(
-    scale(color, {
+    scale$1(color, {
       l: -35 - 5 * depth,
       s: -15 - 5 * depth
     })

package/dist/__app__/src/{view_viewId_.css-Dhp7OfYa.js → view_viewId_.css-DBWYV6RO.js}

@@ -1,4 +1,4 @@
-import { z as React, j as jsxRuntimeExports, B as Box, A as CopyButton$1, T as Tooltip, D as ActionIcon, I as IconCheck, E as rem, F as IconCopy } from "./main-DDd-kcC2.js";
+import { t as React, j as jsxRuntimeExports, B as Box, v as CopyButton$1, T as Tooltip, A as ActionIcon, I as IconCheck, w as rem, x as IconCopy } from "./main-Ccc7-VWf.js";
 const {
   createElement,
   createContext,