@likec4/diagram 1.38.1 → 1.39.1

package/bundle/{chunk-BZV0K82k.js → chunk-CaxOLfbm.js}

@@ -3,8 +3,9 @@ import React__default, { useState, Fragment, createContext, useContext, useRef,
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
-import { isTagColorSpecified, invariant, hasAtLeast, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
+import { isTagColorSpecified, nonexhaustive, invariant as invariant$1, defaultTheme, ElementShapes } from "@likec4/core";
 import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core/types";
+import { invariant } from "@likec4/core/utils";
 function isObject$1(value) {
   return typeof value == "object" && value != null && !Array.isArray(value);
 }
@@ -2801,7 +2802,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
@@ -2820,7 +2821,7 @@ function isTopLayer(element) {
 }
 const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"], willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"], containValues = ["paint", "layout", "strict", "content"];
 function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit(), css2 = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const webkit = isWebKit(), css2 = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   return transformProperties.some((value) => css2[value] ? css2[value] !== "none" : !1) || (css2.containerType ? css2.containerType !== "normal" : !1) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : !1) || !webkit && (css2.filter ? css2.filter !== "none" : !1) || willChangeValues.some((value) => (css2.willChange || "").includes(value)) || containValues.some((value) => (css2.contain || "").includes(value));
 }
 function getContainingBlock(element) {
@@ -2841,7 +2842,7 @@ const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#docu
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -3738,7 +3739,7 @@ const offset$3 = function(options) {
   };
 };
 function getCssDimensions(element) {
-  const css2 = getComputedStyle(element);
+  const css2 = getComputedStyle$1(element);
   let width = parseFloat(css2.width) || 0, height = parseFloat(css2.height) || 0;
   const hasOffset = isHTMLElement(element), offsetWidth = hasOffset ? element.offsetWidth : width, offsetHeight = hasOffset ? element.offsetHeight : height, shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
   return shouldFallback && (width = offsetWidth, height = offsetHeight), {
@@ -3787,7 +3788,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     const win2 = getWindow(domElement), offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win2, currentIFrame = getFrameElement(currentWin);
     for (; currentIFrame && offsetParent && offsetWin !== currentWin; ) {
-      const iframeScale = getScale(currentIFrame), iframeRect = currentIFrame.getBoundingClientRect(), css2 = getComputedStyle(currentIFrame), left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css2.paddingLeft)) * iframeScale.x, top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css2.paddingTop)) * iframeScale.y;
+      const iframeScale = getScale(currentIFrame), iframeRect = currentIFrame.getBoundingClientRect(), css2 = getComputedStyle$1(currentIFrame), left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css2.paddingLeft)) * iframeScale.x, top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css2.paddingTop)) * iframeScale.y;
       x *= iframeScale.x, y2 *= iframeScale.y, width *= iframeScale.x, height *= iframeScale.y, x += left, y2 += top, currentWin = getWindow(currentIFrame), currentIFrame = getFrameElement(currentWin);
     }
   }
@@ -3802,12 +3803,8 @@ function getWindowScrollBarX(element, rect) {
   const leftScroll = getNodeScroll(element).scrollLeft;
   return rect ? rect.left + leftScroll : getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  ignoreScrollbarX === void 0 && (ignoreScrollbarX = !1);
-  const htmlRect = documentElement.getBoundingClientRect(), x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect)
-  )), y2 = htmlRect.top + scroll.scrollTop;
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect(), x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect), y2 = htmlRect.top + scroll.scrollTop;
   return {
     x,
     y: y2
@@ -3832,7 +3829,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     const offsetRect = getBoundingClientRect(offsetParent);
     scale2 = getScale(offsetParent), offsets.x = offsetRect.x + offsetParent.clientLeft, offsets.y = offsetRect.y + offsetParent.clientTop;
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, !0) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale2.x,
     height: rect.height * scale2.y,
@@ -3847,13 +3844,14 @@ function getDocumentRect(element) {
   const html = getDocumentElement(element), scroll = getNodeScroll(element), body2 = element.ownerDocument.body, width = max$1(html.scrollWidth, html.clientWidth, body2.scrollWidth, body2.clientWidth), height = max$1(html.scrollHeight, html.clientHeight, body2.scrollHeight, body2.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y2 = -scroll.scrollTop;
-  return getComputedStyle(body2).direction === "rtl" && (x += max$1(html.clientWidth, body2.clientWidth) - width), {
+  return getComputedStyle$1(body2).direction === "rtl" && (x += max$1(html.clientWidth, body2.clientWidth) - width), {
     width,
     height,
     x,
     y: y2
   };
 }
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win2 = getWindow(element), html = getDocumentElement(element), visualViewport = win2.visualViewport;
   let width = html.clientWidth, height = html.clientHeight, x = 0, y2 = 0;
@@ -3862,6 +3860,11 @@ function getViewportRect(element, strategy) {
     const visualViewportBased = isWebKit();
     (!visualViewportBased || visualViewportBased && strategy === "fixed") && (x = visualViewport.offsetLeft, y2 = visualViewport.offsetTop);
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument, body2 = doc.body, bodyStyles = getComputedStyle(body2), bodyMarginInline = doc.compatMode === "CSS1Compat" && parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0, clippingStableScrollbarWidth = Math.abs(html.clientWidth - body2.clientWidth - bodyMarginInline);
+    clippingStableScrollbarWidth <= SCROLLBAR_MAX && (width -= clippingStableScrollbarWidth);
+  } else windowScrollbarX <= SCROLLBAR_MAX && (width += windowScrollbarX);
   return {
     width,
     height,
@@ -3900,17 +3903,17 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
 }
 function hasFixedPositionAncestor(element, stopNode) {
   const parentNode = getParentNode(element);
-  return parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode) ? !1 : getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  return parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode) ? !1 : getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
 function getClippingElementAncestors(element, cache) {
   const cachedResult = cache.get(element);
   if (cachedResult)
     return cachedResult;
   let result = getOverflowAncestors(element, [], !1).filter((el) => isElement(el) && getNodeName(el) !== "body"), currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === "fixed";
+  const elementIsFixed = getComputedStyle$1(element).position === "fixed";
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   for (; isElement(currentNode) && !isLastTraversableNode(currentNode); ) {
-    const computedStyle = getComputedStyle(currentNode), currentNodeIsContaining = isContainingBlock(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode), currentNodeIsContaining = isContainingBlock(currentNode);
     !currentNodeIsContaining && computedStyle.position === "fixed" && (currentContainingBlockComputedStyle = null), (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) ? result = result.filter((ancestor) => ancestor !== currentNode) : currentContainingBlockComputedStyle = computedStyle, currentNode = getParentNode(currentNode);
   }
   return cache.set(element, result), result;
@@ -3968,10 +3971,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === "static";
+  return getComputedStyle$1(element).position === "static";
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed")
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed")
     return null;
   if (polyfill)
     return polyfill(element);
@@ -4009,7 +4012,7 @@ const getElementRects = async function(data) {
   };
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === "rtl";
+  return getComputedStyle$1(element).direction === "rtl";
 }
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
@@ -4726,7 +4729,7 @@ function useDismiss(context2, props) {
     if (isHTMLElement(target) && floating) {
       const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth, canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
       let xCond = canScrollY && event.offsetX > target.clientWidth;
-      if (canScrollY && getComputedStyle(target).direction === "rtl" && (xCond = event.offsetX <= target.offsetWidth - target.clientWidth), xCond || canScrollX && event.offsetY > target.clientHeight)
+      if (canScrollY && getComputedStyle$1(target).direction === "rtl" && (xCond = event.offsetX <= target.offsetWidth - target.clientWidth), xCond || canScrollX && event.offsetY > target.clientHeight)
         return;
     }
     const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId, targetIsInsideChildren = tree && getChildren$1(tree.nodesRef.current, nodeId).some((node) => {
@@ -8691,6 +8694,10 @@ function u$2(r2, n2, o2) {
   if (a === 1) return u$3(r2, n2, o2);
   throw new Error("Wrong number of arguments");
 }
+function i$1(...e2) {
+  return u$2(n$2, e2);
+}
+var n$2 = (e2, r2) => e2.length >= r2;
 function l$1(...n2) {
   return u$2(d, n2);
 }
@@ -10521,7 +10528,7 @@ function nogamma(a, b) {
   var d2 = b - a;
   return d2 ? linear(a, d2) : constant$1(isNaN(a) ? b : a);
 }
-const interpolateRgb = function rgbGamma(y2) {
+const interpolateRgb = (function rgbGamma(y2) {
   var color2 = gamma(y2);
   function rgb$1(start2, end) {
     var r2 = color2((start2 = rgb(start2)).r, (end = rgb(end)).r), g = color2(start2.g, end.g), b = color2(start2.b, end.b), opacity = nogamma(start2.opacity, end.opacity);
@@ -10530,7 +10537,7 @@ const interpolateRgb = function rgbGamma(y2) {
     };
   }
   return rgb$1.gamma = rgbGamma, rgb$1;
-}(1);
+})(1);
 function numberArray(a, b) {
   b || (b = []);
   var n2 = a ? Math.min(b.length, a.length) : 0, c = b.slice(), i2;
@@ -10663,7 +10670,7 @@ function sinh(x) {
 function tanh(x) {
   return ((x = Math.exp(2 * x)) - 1) / (x + 1);
 }
-const interpolateZoom = function zoomRho(rho, rho2, rho4) {
+const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
   function zoom2(p0, p1) {
     var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i2, S;
     if (d2 < epsilon2)
@@ -10691,7 +10698,7 @@ const interpolateZoom = function zoomRho(rho, rho2, rho4) {
     var _1 = Math.max(1e-3, +_), _2 = _1 * _1, _4 = _2 * _2;
     return zoomRho(_1, _2, _4);
   }, zoom2;
-}(Math.SQRT2, 2, 4);
+})(Math.SQRT2, 2, 4);
 var frame = 0, timeout$1 = 0, interval = 0, pokeDelay = 1e3, taskHead, taskTail, clockLast = 0, clockNow = 0, clockSkew = 0, clock = typeof performance == "object" && performance.now ? performance : Date, setFrame = typeof window == "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f2) {
   setTimeout(f2, 17);
 };
@@ -11866,7 +11873,7 @@ const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding)
   };
 }, isMacOs = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
 function isCoordinateExtent(extent) {
-  return extent !== void 0 && extent !== "parent";
+  return extent != null && extent !== "parent";
 }
 function getNodeDimensions(node) {
   return {
@@ -12518,8 +12525,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
           continue;
         let nextPosition = { x: x - dragItem.distance.x, y: y2 - dragItem.distance.y };
         snapToGrid && (nextPosition = multiDragSnapOffset ? {
-          x: nextPosition.x + multiDragSnapOffset.x,
-          y: nextPosition.y + multiDragSnapOffset.y
+          x: Math.round(nextPosition.x + multiDragSnapOffset.x),
+          y: Math.round(nextPosition.y + multiDragSnapOffset.y)
         } : snapPosition(nextPosition, snapGrid));
         let adjustedNodeExtent = null;
         if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
@@ -14629,13 +14636,13 @@ const ArrowSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
     strokeWidth,
     ...color2 && { stroke: color2 }
   };
-  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" });
+  return jsx("polyline", { className: "arrow", style: style2, strokeLinecap: "round", fill: "none", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4" });
 }, ArrowClosedSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
   const style2 = {
     strokeWidth,
     ...color2 && { stroke: color2, fill: color2 }
   };
-  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
+  return jsx("polyline", { className: "arrowclosed", style: style2, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
 }, MarkerSymbols = {
   [MarkerType.Arrow]: ArrowSymbol,
   [MarkerType.ArrowClosed]: ArrowClosedSymbol
@@ -15880,9 +15887,9 @@ function createIsCircular(areItemsEqual) {
 function getStrictProperties(object2) {
   return getOwnPropertyNames(object2).concat(getOwnPropertySymbols(object2));
 }
-var hasOwn = Object.hasOwn || function(object2, property) {
+var hasOwn = Object.hasOwn || (function(object2, property) {
   return hasOwnProperty.call(object2, property);
-};
+});
 function sameValueZeroEqual(a, b) {
   return a === b || !a && !b && a !== a && b !== b;
 }
@@ -16479,11 +16486,12 @@ function useTagSpecification(tag) {
 }
 const RootContainerContext = createContext(createRef());
 function RootContainer({
+  id: id2,
   className,
   reduceGraphics = !1,
   children: children2
 }) {
-  const id2 = useId$1(), ref = useRef(null), $isPanning = usePanningAtom();
+  const ref = useRef(null), $isPanning = usePanningAtom();
   return useEffect(() => $isPanning.listen((isPanning) => {
     ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
   }), [$isPanning]), /* @__PURE__ */ jsx(
@@ -17487,7 +17495,7 @@ function bezierControlPoints(diagramEdge) {
   const handles = [
     // start
   ];
-  for (; hasAtLeast(bezierPoints, 3); ) {
+  for (; i$1(bezierPoints, 3); ) {
     const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
     inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
       const { x, y: y2 } = bezier.get(t2);
@@ -17518,7 +17526,7 @@ function bezierPath(bezierSpline) {
   let [start2, ...points] = bezierSpline;
   invariant(start2, "start should be defined");
   let path = `M ${start2[0]},${start2[1]}`;
-  for (; hasAtLeast(points, 3); ) {
+  for (; i$1(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
@@ -17833,9 +17841,9 @@ function createSystem(rootActor, options) {
 }
 let executingCustomAction = !1;
 const $$ACTOR_TYPE = 1;
-let ProcessingStatus = /* @__PURE__ */ function(ProcessingStatus2) {
+let ProcessingStatus = /* @__PURE__ */ (function(ProcessingStatus2) {
   return ProcessingStatus2[ProcessingStatus2.NotStarted = 0] = "NotStarted", ProcessingStatus2[ProcessingStatus2.Running = 1] = "Running", ProcessingStatus2[ProcessingStatus2.Stopped = 2] = "Stopped", ProcessingStatus2;
-}({});
+})({});
 const defaultOptions = {
   clock: {
     setTimeout: (fn, ms) => setTimeout(fn, ms),
@@ -19612,11 +19620,16 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
   },
   getVariantProps: likec4tagFn.getVariantProps
 }), markdownBlockFn = /* @__PURE__ */ createRecipe("likec4-markdown-block", {
-  uselikec4palette: !1
+  uselikec4palette: !1,
+  value: "markdown"
 }, []), markdownBlockVariantMap = {
   uselikec4palette: [
     "true",
     "false"
+  ],
+  value: [
+    "markdown",
+    "plaintext"
   ]
 }, markdownBlockVariantKeys = Object.keys(markdownBlockVariantMap), markdownBlock = /* @__PURE__ */ Object.assign(memo(markdownBlockFn.recipeFn), {
   __recipe__: !0,
@@ -20468,7 +20481,8 @@ const MarkdownBlock = forwardRef(({
       ...props,
       className: cx(
         markdownBlock({
-          uselikec4palette
+          uselikec4palette,
+          value: value.isMarkdown ? "markdown" : "plaintext"
         }),
         className
       ),
@@ -20528,7 +20542,7 @@ function ElementTitle({ id: id2, data, iconSize }) {
               children: data.technology
             }
           ),
-          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes2.description, "likec4-element-description"),
@@ -20538,15 +20552,7 @@ function ElementTitle({ id: id2, data, iconSize }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          ) : /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes2.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description.text
-            }
-          ))
+          )
         ] })
       ]
     }
@@ -20591,7 +20597,7 @@ const style = {
       }
     }), buttons2;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
-  return extraButtons && hasAtLeast(extraButtons, 1) && (buttons = [...buttons, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
+  return extraButtons && i$1(extraButtons, 1) && (buttons = [...buttons, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 }, DeploymentElementActions = ({
   extraButtons,
   ...props
@@ -20613,7 +20619,7 @@ const style = {
       }
     }), buttons2;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
-  return extraButtons && hasAtLeast(extraButtons, 1) && (buttons = [...buttons, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
+  return extraButtons && i$1(extraButtons, 1) && (buttons = [...buttons, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 }, {
   primary,
   secondary,
@@ -20639,7 +20645,7 @@ const style = {
 function useHandlers(target, props) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers(), diagram = useDiagram(), [originalColor, setOriginalColor] = useState(null), onColorPreview = useCallbackRef((color2) => {
     if (color2 === null) {
-      invariant(originalColor, "originalColor is null"), setOriginalColor(null), diagram.updateNodeData(props.id, {
+      invariant$1(originalColor, "originalColor is null"), setOriginalColor(null), diagram.updateNodeData(props.id, {
         color: originalColor
       });
       return;
@@ -21512,7 +21518,7 @@ export {
   parseThemeColor as Z,
   createEventHandler as _,
   useMediaQuery as a,
-  isBrowser as a$,
+  useDebouncedCallback as a$,
   useDelayGroup as a0,
   useFloating as a1,
   useInteractions as a2,
@@ -21523,209 +21529,209 @@ export {
   Loader as a7,
   createScopedKeydownHandler as a8,
   getContrastColor as a9,
-  isControllingVariants as aA,
-  isVariantNode as aB,
-  hasReducedMotionListener as aC,
-  initPrefersReducedMotion as aD,
-  prefersReducedMotion as aE,
-  transformProps as aF,
-  featureDefinitions as aG,
-  resolveVariantFromProps as aH,
-  isCSSVariableName as aI,
-  buildHTMLStyles as aJ,
-  scrapeMotionValuesFromProps$1 as aK,
-  camelToDash as aL,
-  scrapeMotionValuesFromProps as aM,
-  buildSVGAttrs as aN,
-  isSVGTag as aO,
-  isSVGComponent as aP,
-  optimizedAppearDataAttribute as aQ,
-  isVariantLabel as aR,
-  variantProps as aS,
-  isAnimationControls as aT,
-  variantPriorityOrder as aU,
-  isRefObject as aV,
-  SwitchLayoutGroupContext as aW,
-  addScaleCorrector as aX,
-  resolveMotionValue as aY,
-  scaleCorrectors as aZ,
-  useDebouncedCallback as a_,
+  isMotionValue as aA,
+  isControllingVariants as aB,
+  isVariantNode as aC,
+  hasReducedMotionListener as aD,
+  initPrefersReducedMotion as aE,
+  prefersReducedMotion as aF,
+  transformProps as aG,
+  featureDefinitions as aH,
+  resolveVariantFromProps as aI,
+  isCSSVariableName as aJ,
+  buildHTMLStyles as aK,
+  scrapeMotionValuesFromProps$1 as aL,
+  camelToDash as aM,
+  scrapeMotionValuesFromProps as aN,
+  buildSVGAttrs as aO,
+  isSVGTag as aP,
+  isSVGComponent as aQ,
+  optimizedAppearDataAttribute as aR,
+  isVariantLabel as aS,
+  variantProps as aT,
+  isAnimationControls as aU,
+  variantPriorityOrder as aV,
+  isRefObject as aW,
+  SwitchLayoutGroupContext as aX,
+  addScaleCorrector as aY,
+  resolveMotionValue as aZ,
+  scaleCorrectors as a_,
   findElementAncestor as aa,
   useClickOutside as ab,
   createReactComponent as ac,
   C as ad,
   s as ae,
   u$2 as af,
-  number as ag,
-  alpha as ah,
-  clamp$1 as ai,
-  percent as aj,
-  isCSSVariableToken as ak,
-  px as al,
-  transformPropOrder as am,
-  degrees$1 as an,
-  vw as ao,
-  vh as ap,
-  numberValueTypes as aq,
-  MotionConfigContext as ar,
-  useConstant as as,
-  PresenceContext as at,
-  useIsomorphicLayoutEffect$1 as au,
-  LayoutGroupContext as av,
-  loadFeatures as aw,
-  LazyContext as ax,
-  loadExternalIsValidProp as ay,
-  isMotionValue as az,
+  i$1 as ag,
+  number as ah,
+  alpha as ai,
+  clamp$1 as aj,
+  percent as ak,
+  isCSSVariableToken as al,
+  px as am,
+  transformPropOrder as an,
+  degrees$1 as ao,
+  vw as ap,
+  vh as aq,
+  numberValueTypes as ar,
+  MotionConfigContext as as,
+  useConstant as at,
+  PresenceContext as au,
+  useIsomorphicLayoutEffect$1 as av,
+  LayoutGroupContext as aw,
+  loadFeatures as ax,
+  LazyContext as ay,
+  loadExternalIsValidProp as az,
   useMantineTheme as b,
-  Box as b$,
-  css as b0,
-  getPatternStyles as b1,
-  patternFns as b2,
-  splitProps as b3,
-  styled as b4,
-  Background as b5,
-  BackgroundVariant as b6,
-  useIsZoomTooSmall as b7,
-  useXYStoreApi as b8,
-  index as b9,
-  STATE_DELIMITER as bA,
-  mapValues as bB,
-  toArray as bC,
-  formatTransitions as bD,
-  toTransitionConfigArray as bE,
-  formatTransition as bF,
-  evaluateGuard as bG,
-  getCandidates as bH,
-  NULL_EVENT as bI,
-  createInvokeId as bJ,
-  getDelayedTransitions as bK,
-  formatInitialTransition as bL,
-  createErrorActorEvent as bM,
-  XSTATE_ERROR as bN,
-  cancel as bO,
-  raise as bP,
-  spawnChild as bQ,
-  stopChild as bR,
-  memo as bS,
-  createRecipe as bT,
-  mergeRecipes as bU,
-  compact as bV,
-  getSlotCompoundVariant as bW,
-  deepEqual as bX,
-  ActionIcon as bY,
-  IconZoomScan as bZ,
-  MotionDiv as b_,
-  stopPropagation as ba,
-  cx as bb,
-  roundDpr as bc,
-  useStore as bd,
-  useUpdateEffect as be,
-  XSTATE_STOP as bf,
-  cloneMachineSnapshot as bg,
-  ProcessingStatus as bh,
-  resolveReferencedActor as bi,
-  createActor as bj,
-  resolveStateValue as bk,
-  getAllStateNodes as bl,
-  getStateNodes as bm,
-  createMachineSnapshot as bn,
-  isInFinalState as bo,
-  macrostep as bp,
-  transitionNode as bq,
-  resolveActionsAndContext as br,
-  createInitEvent as bs,
-  microstep as bt,
-  getInitialStateNodes as bu,
-  toStatePath as bv,
-  isStateId as bw,
-  getStateNodeByPath as bx,
-  getPersistedSnapshot as by,
-  $$ACTOR_TYPE as bz,
+  MotionDiv as b$,
+  isBrowser as b0,
+  css as b1,
+  getPatternStyles as b2,
+  patternFns as b3,
+  splitProps as b4,
+  styled as b5,
+  Background as b6,
+  BackgroundVariant as b7,
+  useIsZoomTooSmall as b8,
+  useXYStoreApi as b9,
+  $$ACTOR_TYPE as bA,
+  STATE_DELIMITER as bB,
+  mapValues as bC,
+  toArray as bD,
+  formatTransitions as bE,
+  toTransitionConfigArray as bF,
+  formatTransition as bG,
+  evaluateGuard as bH,
+  getCandidates as bI,
+  NULL_EVENT as bJ,
+  createInvokeId as bK,
+  getDelayedTransitions as bL,
+  formatInitialTransition as bM,
+  createErrorActorEvent as bN,
+  XSTATE_ERROR as bO,
+  cancel as bP,
+  raise as bQ,
+  spawnChild as bR,
+  stopChild as bS,
+  memo as bT,
+  createRecipe as bU,
+  mergeRecipes as bV,
+  compact as bW,
+  getSlotCompoundVariant as bX,
+  deepEqual as bY,
+  ActionIcon as bZ,
+  IconZoomScan as b_,
+  index as ba,
+  stopPropagation as bb,
+  cx as bc,
+  roundDpr as bd,
+  useStore as be,
+  useUpdateEffect as bf,
+  XSTATE_STOP as bg,
+  cloneMachineSnapshot as bh,
+  ProcessingStatus as bi,
+  resolveReferencedActor as bj,
+  createActor as bk,
+  resolveStateValue as bl,
+  getAllStateNodes as bm,
+  getStateNodes as bn,
+  createMachineSnapshot as bo,
+  isInFinalState as bp,
+  macrostep as bq,
+  transitionNode as br,
+  resolveActionsAndContext as bs,
+  createInitEvent as bt,
+  microstep as bu,
+  getInitialStateNodes as bv,
+  toStatePath as bw,
+  isStateId as bx,
+  getStateNodeByPath as by,
+  getPersistedSnapshot as bz,
   useMantineStyleNonce as c,
-  CompoundNodeContainer as c$,
-  n$1 as c0,
-  EdgeLabelRenderer as c1,
-  e as c2,
-  getNodeDimensions as c3,
-  useXYFlow as c4,
-  useDiagram as c5,
-  useEnabledFeatures as c6,
-  useXYInternalNode as c7,
-  isSamePoint as c8,
-  bezierControlPoints as c9,
-  isMacOs as cA,
-  IconCheck as cB,
-  IconId as cC,
-  HStack as cD,
-  ElementTag as cE,
-  MarkdownBlock as cF,
-  cva as cG,
-  Button as cH,
-  MotionSpan as cI,
-  Portal as cJ,
-  useLikeC4ProjectsContext as cK,
-  useLikeC4ProjectId as cL,
-  Menu as cM,
-  MenuTarget as cN,
-  MenuDropdown as cO,
-  MenuItem as cP,
-  useLikeC4Model as cQ,
-  Divider as cR,
-  o$1 as cS,
-  useDiagramActorRef as cT,
-  useCurrentViewModel as cU,
-  useActorRef as cV,
-  useUpdateEffect$1 as cW,
-  Group as cX,
-  getBezierPath as cY,
-  ElementActionButtons as cZ,
-  IconTransform as c_,
-  bezierPath as ca,
-  ViewGroupNode as cb,
-  CompoundDeploymentNode as cc,
-  CompoundElementNode as cd,
-  DeploymentNode as ce,
-  ElementNode as cf,
-  useDiagramActorSnapshot as cg,
-  n as ch,
-  MotionButton as ci,
-  Tooltip$1 as cj,
-  useDiagramEventHandlers as ck,
-  useDiagramContext as cl,
-  useHover$1 as cm,
-  PopoverTarget as cn,
-  PopoverDropdown as co,
-  FloatingIndicator as cp,
-  Flex as cq,
-  clampUseMovePosition as cr,
-  useMove as cs,
-  useMantinePortalProps as ct,
-  hstack as cu,
-  TooltipGroup as cv,
-  shallowEqual as cw,
-  useSelector as cx,
-  useCurrentViewId as cy,
-  IconFileSymlink as cz,
+  IconTransform as c$,
+  Box as c0,
+  n$1 as c1,
+  EdgeLabelRenderer as c2,
+  e as c3,
+  getNodeDimensions as c4,
+  useXYFlow as c5,
+  useDiagram as c6,
+  useEnabledFeatures as c7,
+  useXYInternalNode as c8,
+  isSamePoint as c9,
+  IconFileSymlink as cA,
+  isMacOs as cB,
+  IconCheck as cC,
+  IconId as cD,
+  HStack as cE,
+  ElementTag as cF,
+  MarkdownBlock as cG,
+  cva as cH,
+  Button as cI,
+  MotionSpan as cJ,
+  Portal as cK,
+  useLikeC4ProjectsContext as cL,
+  useLikeC4ProjectId as cM,
+  Menu as cN,
+  MenuTarget as cO,
+  MenuDropdown as cP,
+  MenuItem as cQ,
+  useLikeC4Model as cR,
+  Divider as cS,
+  o$1 as cT,
+  useDiagramActorRef as cU,
+  useCurrentViewModel as cV,
+  useActorRef as cW,
+  useUpdateEffect$1 as cX,
+  Group as cY,
+  getBezierPath as cZ,
+  ElementActionButtons as c_,
+  bezierControlPoints as ca,
+  bezierPath as cb,
+  ViewGroupNode as cc,
+  CompoundDeploymentNode as cd,
+  CompoundElementNode as ce,
+  DeploymentNode as cf,
+  ElementNode as cg,
+  useDiagramActorSnapshot as ch,
+  n as ci,
+  MotionButton as cj,
+  Tooltip$1 as ck,
+  useDiagramEventHandlers as cl,
+  useDiagramContext as cm,
+  useHover$1 as cn,
+  PopoverTarget as co,
+  PopoverDropdown as cp,
+  FloatingIndicator as cq,
+  Flex as cr,
+  clampUseMovePosition as cs,
+  useMove as ct,
+  useMantinePortalProps as cu,
+  hstack as cv,
+  TooltipGroup as cw,
+  shallowEqual as cx,
+  useSelector as cy,
+  useCurrentViewId as cz,
   alpha$1 as d,
   getBoundsOfRects as d$,
-  CompoundTitle as d0,
-  CompoundDetailsButton as d1,
-  ElementNodeContainer as d2,
-  ElementShape as d3,
-  ElementTitle as d4,
-  ElementTags as d5,
-  Handle as d6,
-  Position as d7,
-  ElementDetailsButton as d8,
-  getDefaultExportFromCjs as d9,
-  IconOrShapeRenderer as dA,
-  FocusTrap as dB,
-  t$3 as dC,
-  useOnDiagramEvent as dD,
-  findDiagramEdge as dE,
-  findDiagramNode as dF,
-  autoUpdate as dG,
-  Space as dH,
+  CompoundNodeContainer as d0,
+  CompoundTitle as d1,
+  CompoundDetailsButton as d2,
+  ElementNodeContainer as d3,
+  ElementShape as d4,
+  ElementTitle as d5,
+  ElementTags as d6,
+  Handle as d7,
+  Position as d8,
+  ElementDetailsButton as d9,
+  VisuallyHidden as dA,
+  IconOrShapeRenderer as dB,
+  FocusTrap as dC,
+  t$3 as dD,
+  useOnDiagramEvent as dE,
+  findDiagramEdge as dF,
+  findDiagramNode as dG,
+  autoUpdate as dH,
   computePosition as dI,
   offset$2 as dJ,
   autoPlacement as dK,
@@ -21745,31 +21751,31 @@ export {
   getViewportForBounds as dY,
   typedSystem as dZ,
   centerXYInternalNode as d_,
-  l$1 as da,
-  IconSelector as db,
-  SegmentedControl as dc,
-  ReactFlowProvider as dd,
-  useStoreApi as de,
-  useReactFlow as df,
-  Panel as dg,
-  m as dh,
-  Stack as di,
-  u as dj,
-  useSyncedRef as dk,
-  IconRenderer as dl,
-  useTimeoutEffect as dm,
-  ReactRemoveScroll as dn,
-  ActionIconGroup as dp,
-  IfEnabled as dq,
-  DiagramFeatures as dr,
-  t$1 as ds,
-  customNode as dt,
-  useXYStore as du,
-  useReducedMotionConfig as dv,
-  Overlay as dw,
-  sva as dx,
-  t$2 as dy,
-  VisuallyHidden as dz,
+  getDefaultExportFromCjs as da,
+  l$1 as db,
+  IconSelector as dc,
+  SegmentedControl as dd,
+  ReactFlowProvider as de,
+  useStoreApi as df,
+  useReactFlow as dg,
+  Panel as dh,
+  m as di,
+  Stack as dj,
+  u as dk,
+  useSyncedRef as dl,
+  IconRenderer as dm,
+  useTimeoutEffect as dn,
+  ReactRemoveScroll as dp,
+  ActionIconGroup as dq,
+  IfEnabled as dr,
+  DiagramFeatures as ds,
+  t$1 as dt,
+  customNode as du,
+  useXYStore as dv,
+  useReducedMotionConfig as dw,
+  Overlay as dx,
+  sva as dy,
+  t$2 as dz,
   em as e,
   boxToRect as e0,
   and as e1,