@likec4/diagram 1.32.2 → 1.34.0

package/bundle/{chunk-DlHyKoeo.js → chunk-Dd7et66b.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useLayoutEffect, useCallback, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, memo as memo$1, useSyncExternalStore, createRef } from "react";
+import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, memo as memo$1, useSyncExternalStore, createRef } from "react";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
@@ -1052,6 +1052,19 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
       return queryRef.current = window.matchMedia(query), setMatches(queryRef.current.matches), attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
   }, [query]), matches2 || !1;
 }
+function useDebouncedState(defaultValue, wait, options = { leading: !1 }) {
+  const [value, setValue] = useState(defaultValue), timeoutRef = useRef(null), leadingRef = useRef(!0), clearTimeout2 = () => window.clearTimeout(timeoutRef.current);
+  useEffect(() => clearTimeout2, []);
+  const debouncedSetValue = useCallback(
+    (newValue) => {
+      clearTimeout2(), leadingRef.current && options.leading ? setValue(newValue) : timeoutRef.current = window.setTimeout(() => {
+        leadingRef.current = !0, setValue(newValue);
+      }, wait), leadingRef.current = !1;
+    },
+    [options.leading]
+  );
+  return [value, debouncedSetValue];
+}
 function useDebouncedValue(value, wait, options = { leading: !1 }) {
   const [_value, setValue] = useState(value), mountedRef = useRef(!1), timeoutRef = useRef(null), cooldownRef = useRef(!1), cancel2 = () => window.clearTimeout(timeoutRef.current);
   return useEffect(() => {
@@ -1285,6 +1298,19 @@ function useShallowCompare(dependencies) {
 function useShallowEffect(cb, dependencies) {
   useEffect(cb, useShallowCompare(dependencies));
 }
+function useHover$1() {
+  const [hovered, setHovered] = useState(!1), previousNode = useRef(null), handleMouseEnter = useCallback(() => {
+    setHovered(!0);
+  }, []), handleMouseLeave = useCallback(() => {
+    setHovered(!1);
+  }, []);
+  return { ref: useCallback(
+    (node) => {
+      previousNode.current && (previousNode.current.removeEventListener("mouseenter", handleMouseEnter), previousNode.current.removeEventListener("mouseleave", handleMouseLeave)), node && (node.addEventListener("mouseenter", handleMouseEnter), node.addEventListener("mouseleave", handleMouseLeave)), previousNode.current = node;
+    },
+    [handleMouseEnter, handleMouseLeave]
+  ), hovered };
+}
 function useDisclosure(initialState = !1, options = {}) {
   const [opened, setOpened] = useState(initialState), open = useCallback(() => {
     setOpened((isOpened) => isOpened || (options.onOpen?.(), !0));
@@ -2331,6 +2357,7 @@ function extractStyleProps(others) {
     pe,
     ps,
     bd,
+    bdrs,
     bg,
     c,
     opacity,
@@ -2418,6 +2445,7 @@ function extractStyleProps(others) {
     inset: inset2,
     display,
     flex,
+    bdrs,
     hiddenFrom,
     visibleFrom,
     lightHidden,
@@ -5013,11 +5041,11 @@ function toInt(value) {
   return value ? parseInt(value, 10) : 0;
 }
 var classes$i = { root: "m_87cf2631" };
-const defaultProps$D = {
+const defaultProps$A = {
   __staticSelector: "UnstyledButton"
 }, UnstyledButton = polymorphicFactory(
   (_props, ref) => {
-    const props = useProps("UnstyledButton", defaultProps$D, _props), {
+    const props = useProps("UnstyledButton", defaultProps$A, _props), {
       className,
       component = "button",
       __staticSelector,
@@ -5051,8 +5079,8 @@ const defaultProps$D = {
 UnstyledButton.classes = classes$i;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
 var classes$h = { root: "m_515a97f8" };
-const defaultProps$C = {}, VisuallyHidden = factory((_props, ref) => {
-  const props = useProps("VisuallyHidden", defaultProps$C, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
+const defaultProps$z = {}, VisuallyHidden = factory((_props, ref) => {
+  const props = useProps("VisuallyHidden", defaultProps$z, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
     name: "VisuallyHidden",
     classes: classes$h,
     props,
@@ -5067,13 +5095,13 @@ const defaultProps$C = {}, VisuallyHidden = factory((_props, ref) => {
 VisuallyHidden.classes = classes$h;
 VisuallyHidden.displayName = "@mantine/core/VisuallyHidden";
 var classes$g = { root: "m_1b7284a3" };
-const defaultProps$B = {}, varsResolver$j = (_, { radius, shadow }) => ({
+const defaultProps$y = {}, varsResolver$j = (_, { radius, shadow }) => ({
   root: {
     "--paper-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--paper-shadow": getShadow(shadow)
   }
 }), Paper = polymorphicFactory((_props, ref) => {
-  const props = useProps("Paper", defaultProps$B, _props), {
+  const props = useProps("Paper", defaultProps$y, _props), {
     classNames,
     className,
     style: style2,
@@ -5215,7 +5243,7 @@ function getFloatingPosition(dir, position) {
   return position;
 }
 var classes$f = { root: "m_9814e45f" };
-const defaultProps$A = {
+const defaultProps$x = {
   zIndex: getDefaultZIndex("modal")
 }, varsResolver$i = (_, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
   root: {
@@ -5225,7 +5253,7 @@ const defaultProps$A = {
     "--overlay-z-index": zIndex?.toString()
   }
 }), Overlay$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Overlay", defaultProps$A, _props), {
+  const props = useProps("Overlay", defaultProps$x, _props), {
     classNames,
     className,
     style: style2,
@@ -5275,10 +5303,10 @@ function getTargetNode({ target, reuseTargetNode, ...others }) {
   }
   return createPortalNode(others);
 }
-const defaultProps$z = {
+const defaultProps$w = {
   reuseTargetNode: !0
 }, Portal = factory((props, ref) => {
-  const { children: children2, target, reuseTargetNode, ...others } = useProps("Portal", defaultProps$z, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
+  const { children: children2, target, reuseTargetNode, ...others } = useProps("Portal", defaultProps$w, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
   return useIsomorphicEffect(() => (setMounted(!0), nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others }), assignRef(ref, nodeRef.current), !target && !reuseTargetNode && nodeRef.current && document.body.appendChild(nodeRef.current), () => {
     !target && !reuseTargetNode && nodeRef.current && document.body.removeChild(nodeRef.current);
   }), [target]), !mounted || !nodeRef.current ? null : createPortal(/* @__PURE__ */ jsx(Fragment$1, { children: children2 }), nodeRef.current);
@@ -5545,8 +5573,8 @@ FocusTrap.displayName = "@mantine/core/FocusTrap";
 FocusTrapInitialFocus.displayName = "@mantine/core/FocusTrapInitialFocus";
 FocusTrap.InitialFocus = FocusTrapInitialFocus;
 var classes$e = { dropdown: "m_38a85659", arrow: "m_a31dc6c1", overlay: "m_3d7bc908" };
-const defaultProps$y = {}, PopoverDropdown = factory((_props, ref) => {
-  const props = useProps("PopoverDropdown", defaultProps$y, _props), {
+const defaultProps$v = {}, PopoverDropdown = factory((_props, ref) => {
+  const props = useProps("PopoverDropdown", defaultProps$v, _props), {
     className,
     style: style2,
     vars,
@@ -5640,13 +5668,13 @@ const defaultProps$y = {}, PopoverDropdown = factory((_props, ref) => {
 });
 PopoverDropdown.classes = classes$e;
 PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
-const defaultProps$x = {
+const defaultProps$u = {
   refProp: "ref",
   popupType: "dialog"
 }, PopoverTarget = factory((props, ref) => {
   const { children: children2, refProp, popupType, ...others } = useProps(
     "PopoverTarget",
-    defaultProps$x,
+    defaultProps$u,
     props
   );
   if (!isElement$1(children2))
@@ -5681,7 +5709,7 @@ function getDefaultMiddlewares$1(middlewares) {
 }
 function getPopoverMiddlewares(options, getFloating, env) {
   const middlewaresOptions = getDefaultMiddlewares$1(options.middlewares), middlewares = [offset$1(options.offset), hide()];
-  return options.dropdownVisible && env !== "test" && (middlewaresOptions.flip = !1, middlewaresOptions.shift = !1), middlewaresOptions.shift && middlewares.push(
+  return options.dropdownVisible && env !== "test" && options.preventPositionChangeWhenVisible && (middlewaresOptions.flip = !1, middlewaresOptions.shift = !1), middlewaresOptions.shift && middlewares.push(
     shift(
       typeof middlewaresOptions.shift == "boolean" ? { limiter: limitShift(), padding: 5 } : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }
     )
@@ -5712,13 +5740,30 @@ function usePopover(options) {
     onChange: options.onChange
   }), previouslyOpened = useRef(_opened), onClose = () => {
     _opened && !options.disabled && setOpened(!1);
-  }, onToggle = () => !options.disabled && setOpened(!_opened), floating = useFloating({
+  }, onToggle = () => {
+    options.disabled || setOpened(!_opened);
+  }, floating = useFloating({
     strategy: options.strategy,
-    placement: options.positionRef.current,
+    placement: options.preventPositionChangeWhenVisible ? options.positionRef.current : options.position,
     middleware: getPopoverMiddlewares(options, () => floating, env),
-    whileElementsMounted: autoUpdate
+    // Only use whileElementsMounted when elements are conditionally rendered (not keepMounted)
+    // When keepMounted=true, elements are hidden with CSS and we need manual autoUpdate control
+    whileElementsMounted: options.keepMounted ? void 0 : autoUpdate
   });
-  return useDidUpdate(() => {
+  return useEffect(() => {
+    if (!(!options.keepMounted || !floating.refs.reference.current || !floating.refs.floating.current) && _opened)
+      return autoUpdate(
+        floating.refs.reference.current,
+        floating.refs.floating.current,
+        floating.update
+      );
+  }, [
+    options.keepMounted,
+    _opened,
+    floating.refs.reference,
+    floating.refs.floating,
+    floating.update
+  ]), useDidUpdate(() => {
     options.onPositionChange?.(floating.placement), options.positionRef.current = floating.placement;
   }, [floating.placement]), useDidUpdate(() => {
     _opened !== previouslyOpened.current && (_opened ? options.onOpen?.() : options.onClose?.()), previouslyOpened.current = _opened;
@@ -5735,7 +5780,7 @@ function usePopover(options) {
     onToggle
   };
 }
-const defaultProps$w = {
+const defaultProps$t = {
   position: "bottom",
   offset: 8,
   positionDependencies: [],
@@ -5764,7 +5809,7 @@ const defaultProps$w = {
   }
 });
 function Popover(_props) {
-  const props = useProps("Popover", defaultProps$w, _props), {
+  const props = useProps("Popover", defaultProps$t, _props), {
     children: children2,
     position,
     offset: offset2,
@@ -5812,6 +5857,7 @@ function Popover(_props) {
     withOverlay,
     overlayProps,
     hideDetached,
+    preventPositionChangeWhenVisible,
     ...others
   } = props, getStyles2 = useStyles({
     name: __staticSelector,
@@ -5842,7 +5888,9 @@ function Popover(_props) {
     dropdownVisible,
     setDropdownVisible,
     positionRef,
-    disabled
+    disabled,
+    preventPositionChangeWhenVisible,
+    keepMounted
   });
   useClickOutside(
     () => {
@@ -5962,7 +6010,7 @@ const defaultLoaders = {
   bars: Bars,
   oval: Oval,
   dots: Dots
-}, defaultProps$v = {
+}, defaultProps$s = {
   loaders: defaultLoaders,
   type: "oval"
 }, varsResolver$g = (theme, { size: size2, color: color2 }) => ({
@@ -5971,7 +6019,7 @@ const defaultLoaders = {
     "--loader-color": color2 ? getThemeColor(color2, theme) : void 0
   }
 }), Loader = factory((_props, ref) => {
-  const props = useProps("Loader", defaultProps$v, _props), {
+  const props = useProps("Loader", defaultProps$s, _props), {
     size: size2,
     color: color2,
     type,
@@ -6013,12 +6061,12 @@ Loader.defaultLoaders = defaultLoaders;
 Loader.classes = classes$d;
 Loader.displayName = "@mantine/core/Loader";
 var classes$c = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21", groupSection: "m_437b6484" };
-const defaultProps$u = {
+const defaultProps$r = {
   orientation: "horizontal"
 }, varsResolver$f = (_, { borderWidth: borderWidth2 }) => ({
   group: { "--ai-border-width": rem(borderWidth2) }
 }), ActionIconGroup = factory((_props, ref) => {
-  const props = useProps("ActionIconGroup", defaultProps$u, _props), {
+  const props = useProps("ActionIconGroup", defaultProps$r, _props), {
     className,
     style: style2,
     classNames,
@@ -6030,7 +6078,7 @@ const defaultProps$u = {
     variant,
     mod,
     ...others
-  } = useProps("ActionIconGroup", defaultProps$u, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroup", defaultProps$r, _props), getStyles2 = useStyles({
     name: "ActionIconGroup",
     props,
     classes: classes$c,
@@ -6057,7 +6105,7 @@ const defaultProps$u = {
 });
 ActionIconGroup.classes = classes$c;
 ActionIconGroup.displayName = "@mantine/core/ActionIconGroup";
-const defaultProps$t = {}, varsResolver$e = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
+const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6077,7 +6125,7 @@ const defaultProps$t = {}, varsResolver$e = (theme, { radius, color: color2, gra
     }
   };
 }, ActionIconGroupSection = factory((_props, ref) => {
-  const props = useProps("ActionIconGroupSection", defaultProps$t, _props), {
+  const props = useProps("ActionIconGroupSection", defaultProps$q, _props), {
     className,
     style: style2,
     classNames,
@@ -6089,7 +6137,7 @@ const defaultProps$t = {}, varsResolver$e = (theme, { radius, color: color2, gra
     radius,
     autoContrast,
     ...others
-  } = useProps("ActionIconGroupSection", defaultProps$t, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroupSection", defaultProps$q, _props), getStyles2 = useStyles({
     name: "ActionIconGroupSection",
     props,
     classes: classes$c,
@@ -6106,7 +6154,7 @@ const defaultProps$t = {}, varsResolver$e = (theme, { radius, color: color2, gra
 });
 ActionIconGroupSection.classes = classes$c;
 ActionIconGroupSection.displayName = "@mantine/core/ActionIconGroupSection";
-const defaultProps$s = {}, varsResolver$d = (theme, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
+const defaultProps$p = {}, varsResolver$d = (theme, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6126,7 +6174,7 @@ const defaultProps$s = {}, varsResolver$d = (theme, { size: size2, radius, varia
     }
   };
 }, ActionIcon = polymorphicFactory((_props, ref) => {
-  const props = useProps("ActionIcon", defaultProps$s, _props), {
+  const props = useProps("ActionIcon", defaultProps$p, _props), {
     className,
     unstyled,
     variant,
@@ -6185,7 +6233,7 @@ function filterFalsyChildren(children2) {
   return Children.toArray(children2).filter(Boolean);
 }
 var classes$b = { root: "m_4081bf90" };
-const defaultProps$r = {
+const defaultProps$o = {
   preventGrowOverflow: !0,
   gap: "md",
   align: "center",
@@ -6200,7 +6248,7 @@ const defaultProps$r = {
     "--group-wrap": wrap
   }
 }), Group = factory((_props, ref) => {
-  const props = useProps("Group", defaultProps$r, _props), {
+  const props = useProps("Group", defaultProps$o, _props), {
     classNames,
     className,
     style: style2,
@@ -6256,8 +6304,8 @@ const FLEX_STYLE_PROPS_DATA = {
   direction: { type: "identity", property: "flexDirection" }
 };
 var classes$a = { root: "m_8bffd616" };
-const defaultProps$q = {}, Flex = polymorphicFactory((_props, ref) => {
-  const props = useProps("Flex", defaultProps$q, _props), {
+const defaultProps$n = {}, Flex = polymorphicFactory((_props, ref) => {
+  const props = useProps("Flex", defaultProps$n, _props), {
     classNames,
     className,
     style: style2,
@@ -6376,12 +6424,12 @@ function useFloatingIndicator({
   ), { initialized, hidden: hidden2 };
 }
 var classes$9 = { root: "m_96b553a6" };
-const defaultProps$p = {}, varsResolver$b = (_theme, { transitionDuration }) => ({
+const defaultProps$m = {}, varsResolver$b = (_theme, { transitionDuration }) => ({
   root: {
     "--transition-duration": typeof transitionDuration == "number" ? `${transitionDuration}ms` : transitionDuration
   }
 }), FloatingIndicator = factory((_props, ref) => {
-  const props = useProps("FloatingIndicator", defaultProps$p, _props), {
+  const props = useProps("FloatingIndicator", defaultProps$m, _props), {
     classNames,
     className,
     style: style2,
@@ -6444,7 +6492,7 @@ function getTextTruncate(truncate) {
   if (truncate === "end" || truncate)
     return "end";
 }
-const defaultProps$o = {
+const defaultProps$l = {
   inherit: !1
 }, varsResolver$a = /* Will be removed in 9.0 */ /* eslint-disable-next-line @typescript-eslint/no-deprecated */ (theme, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
   root: {
@@ -6455,7 +6503,7 @@ const defaultProps$o = {
     "--text-color": color2 ? getThemeColor(color2, theme) : void 0
   }
 }), Text = polymorphicFactory((_props, ref) => {
-  const props = useProps("Text", defaultProps$o, _props), {
+  const props = useProps("Text", defaultProps$l, _props), {
     lineClamp,
     truncate,
     inline: inline2,
@@ -6532,12 +6580,12 @@ function CheckIcon({ size: size2, style: style2, ...others }) {
   );
 }
 var classes$7 = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
-const defaultProps$n = {
+const defaultProps$k = {
   orientation: "horizontal"
 }, varsResolver$9 = (_, { borderWidth: borderWidth2 }) => ({
   group: { "--button-border-width": rem(borderWidth2) }
 }), ButtonGroup = factory((_props, ref) => {
-  const props = useProps("ButtonGroup", defaultProps$n, _props), {
+  const props = useProps("ButtonGroup", defaultProps$k, _props), {
     className,
     style: style2,
     classNames,
@@ -6549,7 +6597,7 @@ const defaultProps$n = {
     variant,
     mod,
     ...others
-  } = useProps("ButtonGroup", defaultProps$n, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroup", defaultProps$k, _props), getStyles2 = useStyles({
     name: "ButtonGroup",
     props,
     classes: classes$7,
@@ -6576,7 +6624,7 @@ const defaultProps$n = {
 });
 ButtonGroup.classes = classes$7;
 ButtonGroup.displayName = "@mantine/core/ButtonGroup";
-const defaultProps$m = {}, varsResolver$8 = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
+const defaultProps$j = {}, varsResolver$8 = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6596,7 +6644,7 @@ const defaultProps$m = {}, varsResolver$8 = (theme, { radius, color: color2, gra
     }
   };
 }, ButtonGroupSection = factory((_props, ref) => {
-  const props = useProps("ButtonGroupSection", defaultProps$m, _props), {
+  const props = useProps("ButtonGroupSection", defaultProps$j, _props), {
     className,
     style: style2,
     classNames,
@@ -6608,7 +6656,7 @@ const defaultProps$m = {}, varsResolver$8 = (theme, { radius, color: color2, gra
     radius,
     autoContrast,
     ...others
-  } = useProps("ButtonGroupSection", defaultProps$m, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroupSection", defaultProps$j, _props), getStyles2 = useStyles({
     name: "ButtonGroupSection",
     props,
     classes: classes$7,
@@ -6630,7 +6678,7 @@ const loaderTransition = {
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
   common: { transformOrigin: "center" },
   transitionProperty: "transform, opacity"
-}, defaultProps$l = {}, varsResolver$7 = (theme, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
+}, defaultProps$i = {}, varsResolver$7 = (theme, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6653,7 +6701,7 @@ const loaderTransition = {
     }
   };
 }, Button = polymorphicFactory((_props, ref) => {
-  const props = useProps("Button", defaultProps$l, _props), {
+  const props = useProps("Button", defaultProps$i, _props), {
     style: style2,
     vars,
     className,
@@ -6729,7 +6777,7 @@ Button.displayName = "@mantine/core/Button";
 Button.Group = ButtonGroup;
 Button.GroupSection = ButtonGroupSection;
 var classes$6 = { root: "m_de3d2490", colorOverlay: "m_862f3d1b", shadowOverlay: "m_98ae7f22", alphaOverlay: "m_95709ac0", childrenOverlay: "m_93e74e3" };
-const defaultProps$k = {
+const defaultProps$h = {
   withShadow: !0
 }, varsResolver$6 = (_, { radius, size: size2 }) => ({
   root: {
@@ -6737,7 +6785,7 @@ const defaultProps$k = {
     "--cs-size": rem(size2)
   }
 }), ColorSwatch = polymorphicFactory((_props, ref) => {
-  const props = useProps("ColorSwatch", defaultProps$k, _props), {
+  const props = useProps("ColorSwatch", defaultProps$h, _props), {
     classNames,
     className,
     style: style2,
@@ -6751,7 +6799,7 @@ const defaultProps$k = {
     children: children2,
     variant,
     ...others
-  } = useProps("ColorSwatch", defaultProps$k, props), getStyles2 = useStyles({
+  } = useProps("ColorSwatch", defaultProps$h, props), getStyles2 = useStyles({
     name: "ColorSwatch",
     props,
     classes: classes$6,
@@ -6783,7 +6831,7 @@ const defaultProps$k = {
 ColorSwatch.classes = classes$6;
 ColorSwatch.displayName = "@mantine/core/ColorSwatch";
 var classes$5 = { root: "m_3eebeb36", label: "m_9e365f20" };
-const defaultProps$j = {
+const defaultProps$g = {
   orientation: "horizontal"
 }, varsResolver$5 = (theme, { color: color2, variant, size: size2 }) => ({
   root: {
@@ -6792,7 +6840,7 @@ const defaultProps$j = {
     "--divider-size": getSize(size2, "divider-size")
   }
 }), Divider = factory((_props, ref) => {
-  const props = useProps("Divider", defaultProps$j, _props), {
+  const props = useProps("Divider", defaultProps$g, _props), {
     classNames,
     className,
     style: style2,
@@ -6841,54 +6889,6 @@ function useDelayedHover({ open, close, openDelay, closeDelay }) {
   };
   return useEffect(() => clearTimeouts, []), { openDropdown, closeDropdown };
 }
-const [HoverCardContextProvider, useHoverCardContext] = createSafeContext(
-  "HoverCard component was not found in the tree"
-), defaultProps$i = {};
-function HoverCardDropdown(props) {
-  const { children: children2, onMouseEnter, onMouseLeave, ...others } = useProps(
-    "HoverCardDropdown",
-    defaultProps$i,
-    props
-  ), ctx = useHoverCardContext(), handleMouseEnter = createEventHandler(onMouseEnter, ctx.openDropdown), handleMouseLeave = createEventHandler(onMouseLeave, ctx.closeDropdown);
-  return /* @__PURE__ */ jsx(Popover.Dropdown, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...others, children: children2 });
-}
-HoverCardDropdown.displayName = "@mantine/core/HoverCardDropdown";
-const defaultProps$h = {
-  refProp: "ref"
-}, HoverCardTarget = forwardRef((props, ref) => {
-  const { children: children2, refProp, eventPropsWrapperName, ...others } = useProps(
-    "HoverCardTarget",
-    defaultProps$h,
-    props
-  );
-  if (!isElement$1(children2))
-    throw new Error(
-      "HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
-    );
-  const ctx = useHoverCardContext(), onMouseEnter = createEventHandler(children2.props.onMouseEnter, ctx.openDropdown), onMouseLeave = createEventHandler(children2.props.onMouseLeave, ctx.closeDropdown), eventListeners = { onMouseEnter, onMouseLeave };
-  return /* @__PURE__ */ jsx(Popover.Target, { refProp, ref, ...others, children: cloneElement(
-    children2,
-    eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners
-  ) });
-});
-HoverCardTarget.displayName = "@mantine/core/HoverCardTarget";
-const defaultProps$g = {
-  openDelay: 0,
-  closeDelay: 150,
-  initiallyOpened: !1
-};
-function HoverCard(props) {
-  const { children: children2, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(
-    "HoverCard",
-    defaultProps$g,
-    props
-  ), [opened, { open, close }] = useDisclosure(initiallyOpened, { onClose, onOpen }), { openDropdown, closeDropdown } = useDelayedHover({ open, close, openDelay, closeDelay });
-  return /* @__PURE__ */ jsx(HoverCardContextProvider, { value: { openDropdown, closeDropdown }, children: /* @__PURE__ */ jsx(Popover, { ...others, opened, __staticSelector: "HoverCard", children: children2 }) });
-}
-HoverCard.displayName = "@mantine/core/HoverCard";
-HoverCard.Target = HoverCardTarget;
-HoverCard.Dropdown = HoverCardDropdown;
-HoverCard.extend = (input) => input;
 var index$1 = useLayoutEffect;
 const [MenuContextProvider, useMenuContext] = createSafeContext(
   "Menu component was not found in the tree"
@@ -15960,15 +15960,13 @@ function IfEnabled({
 }) {
   return useEnabledFeatures()[`enable${feature}`] === !0 && and2 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
 }
-function IfNotEnabled({
-  feature,
-  children: children2
-}) {
+function IfNotEnabled({ feature, children: children2 }) {
   return useEnabledFeatures()[`enable${feature}`] !== !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
 }
-function IfNotReadOnly({
-  children: children2
-}) {
+function IfReadOnly({ children: children2 }) {
+  return useEnabledFeatures().enableReadOnly === !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+}
+function IfNotReadOnly({ children: children2 }) {
   return useEnabledFeatures().enableReadOnly === !0 ? null : /* @__PURE__ */ jsx(Fragment$1, { children: children2 });
 }
 const IconRendererContext = createContext(null);
@@ -19313,6 +19311,27 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, likec4tagVariantKeys);
   },
   getVariantProps: likec4tagFn.getVariantProps
+}), markdownBlockFn = /* @__PURE__ */ createRecipe("likec4-markdown-block", {
+  uselikec4palette: !1
+}, []), markdownBlockVariantMap = {
+  uselikec4palette: [
+    "true",
+    "false"
+  ]
+}, markdownBlockVariantKeys = Object.keys(markdownBlockVariantMap), markdownBlock = /* @__PURE__ */ Object.assign(memo(markdownBlockFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "markdownBlock",
+  __getCompoundVariantCss__: markdownBlockFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: markdownBlockVariantKeys,
+  variantMap: markdownBlockVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps(props, markdownBlockVariantKeys);
+  },
+  getVariantProps: markdownBlockFn.getVariantProps
 }), MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), compoundActionBtn = cva({
   base: {
     transitionDuration: "normal",
@@ -20302,140 +20321,157 @@ const ElementTag = forwardRef(
       }
     );
   }
-), propsAreEqual = (prev, next) => prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags), ElementTags = memo$1(({ id: id2, data: { tags, width } }) => {
-  const zoom2 = useCurrentZoom(), zoomIsLargeEnough = zoom2 > 1.2, portalProps = useMantinePortalProps();
+), propsAreEqual = (prev, next) => prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags) && (prev.data.hovered ?? !1) === (next.data.hovered ?? !1), ElementTags = memo$1(({ id: id2, data: { tags, width, hovered = !1 } }) => {
+  const {
+    hovered: isTagsBarHovered,
+    ref: tagsBarRef
+  } = useHover$1(), {
+    hovered: isTagsToolbarHovered,
+    ref: tagsToolbarRef
+  } = useHover$1(), [isVisible, setVisible] = useDebouncedState(!1, hovered ? 120 : 300);
+  useEffect(() => {
+    setVisible((visibleNow) => visibleNow ? hovered || isTagsBarHovered || isTagsToolbarHovered : hovered && (isTagsBarHovered || isTagsToolbarHovered));
+  }, [isTagsBarHovered, isTagsToolbarHovered, hovered]);
+  const zoom2 = useCurrentZoom(), zoomIsLargeEnough = zoom2 > 1.2, diagram = useDiagram(), onHover = (tag) => {
+    diagram.send({ type: "tag.highlight", tag });
+  }, onLeave = useCallback(() => {
+    diagram.send({ type: "tag.unhighlight" });
+  }, []);
   if (!tags || tags.length === 0)
     return null;
   const maxWidth = Math.max(Math.round(width * zoom2) - 10, 200);
-  return /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      ...portalProps,
-      floatingStrategy: "fixed",
-      position: "bottom-start",
-      offset: {
-        alignmentAxis: Math.round(4 * zoom2),
-        mainAxis: 8
-      },
-      keepMounted: !1,
-      openDelay: 300,
-      closeDelay: 500,
-      children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tagsBarRef,
+        className: cx(
+          "likec4-element-tags",
+          hstack({
+            pointerEvents: "all",
+            gap: 4,
+            alignItems: "flex-end",
+            justifyItems: "stretch",
+            position: "absolute",
+            width: "100%",
+            bottom: 0,
+            left: 0,
+            padding: 4,
+            _shapeCylinder: {
+              bottom: 5
+            },
+            _shapeStorage: {
+              bottom: 5
+            },
+            _shapeQueue: {
+              bottom: 0,
+              paddingLeft: 14
+            }
+          })
+        ),
+        onClick: stopPropagation,
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          Box,
           {
-            className: cx(
-              "likec4-element-tags",
-              hstack({
-                pointerEvents: "all",
-                gap: 4,
-                alignItems: "flex-end",
-                justifyItems: "stretch",
-                position: "absolute",
-                width: "100%",
-                bottom: 0,
-                left: 0,
-                padding: 4,
-                _shapeCylinder: {
-                  bottom: 5
-                },
-                _shapeStorage: {
-                  bottom: 5
-                },
-                _shapeQueue: {
-                  bottom: 0,
-                  paddingLeft: 14
-                }
-              })
-            ),
-            onClick: stopPropagation,
-            children: tags.map((tag) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                "data-likec4-tag": tag,
-                className: css({
-                  layerStyle: "likec4.tag",
-                  flex: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  maxWidth: 50,
-                  height: 5,
-                  _whenHovered: {
-                    height: 12,
-                    borderRadius: 4,
-                    transitionDelay: ".08s"
-                  },
-                  transition: "fast"
-                })
+            "data-likec4-tag": tag,
+            className: css({
+              layerStyle: "likec4.tag",
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              maxWidth: 50,
+              height: 5,
+              _whenHovered: {
+                height: 12,
+                borderRadius: 4,
+                transitionDelay: ".08s"
               },
-              id2 + "#" + tag
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          HoverCard.Dropdown,
+              transition: "fast"
+            })
+          },
+          id2 + "#" + tag
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible, align: "start", position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      HStack,
+      {
+        ref: tagsToolbarRef,
+        css: {
+          gap: 4,
+          flexWrap: "wrap",
+          pb: "sm",
+          translate: "auto",
+          x: -8,
+          maxWidth
+        },
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          ElementTag,
           {
-            p: 0,
-            w: "auto",
-            maw: maxWidth,
+            tag,
             className: css({
-              background: "transparent",
-              border: "none"
+              userSelect: "none",
+              cursor: "pointer",
+              ...zoomIsLargeEnough && {
+                fontSize: "lg",
+                borderRadius: 4,
+                px: 6
+              }
             }),
-            children: /* @__PURE__ */ jsx(ElementTagsDropdown, { tags, zoomIsLargeEnough })
-          }
-        )
-      ]
-    }
-  );
+            onClick: (e2) => {
+              e2.stopPropagation(), diagram.openSearch(`#${tag}`);
+            },
+            onMouseEnter: () => onHover(tag),
+            onMouseLeave: onLeave
+          },
+          tag
+        ))
+      }
+    ) })
+  ] });
 }, propsAreEqual);
 ElementTags.displayName = "ElementTags";
-function ElementTagsDropdown({ tags, zoomIsLargeEnough }) {
-  const diagram = useDiagram(), onHover = (tag) => {
-    diagram.send({ type: "tag.highlight", tag });
-  }, onLeave = useCallback(() => {
-    diagram.send({ type: "tag.unhighlight" });
-  }, []);
+const MarkdownBlock = forwardRef(({
+  value,
+  textScale = 1,
+  uselikec4palette = !1,
+  hideIfEmpty = !1,
+  emptyText = "no content",
+  className,
+  ...props
+}, ref) => {
+  if (value.isEmpty && hideIfEmpty)
+    return null;
+  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", children: emptyText }) };
   return /* @__PURE__ */ jsx(
-    HStack,
+    Box,
     {
-      css: {
-        gap: 4,
-        flexWrap: "wrap",
-        pb: "sm"
+      ref,
+      ...props,
+      className: cx(
+        markdownBlock({
+          uselikec4palette
+        }),
+        className
+      ),
+      style: {
+        // @ts-expect-error
+        "--mantine-scale": textScale
       },
-      children: tags.map((tag) => /* @__PURE__ */ jsx(
-        ElementTag,
-        {
-          tag,
-          className: css({
-            userSelect: "none",
-            cursor: "pointer",
-            ...zoomIsLargeEnough && {
-              fontSize: "lg",
-              borderRadius: 4,
-              px: 6
-            }
-          }),
-          onClick: (e2) => {
-            e2.stopPropagation(), diagram.openSearch(`#${tag}`);
-          },
-          onMouseEnter: () => onHover(tag),
-          onMouseLeave: onLeave
-        },
-        tag
-      ))
+      ...content
     }
   );
-}
+});
+MarkdownBlock.displayName = "MarkdownBlock";
 const iconSize = "--icon-size", title = css.raw({
   textStyle: "likec4.node.primary",
   flex: "0 0 auto",
   textAlign: "center",
   color: "likec4.palette.hiContrast"
 }), description = css.raw({
-  flex: "0 1 auto",
+  flexGrow: "0",
+  flexShrink: "1",
   textStyle: "likec4.node.secondary",
   color: "likec4.palette.loContrast",
   textAlign: "center",
@@ -20505,6 +20541,8 @@ const iconSize = "--icon-size", title = css.raw({
       flex: "1",
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       margin: "0 auto",
       display: "flex",
       alignItems: "center",
@@ -20556,6 +20594,8 @@ const iconSize = "--icon-size", title = css.raw({
     textContainer: {
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       flex: "0 1 auto",
       display: "flex",
       flexDirection: "column",
@@ -20625,7 +20665,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
     className: elementIcon
   }), classes2 = elementTitle({
     hasIcon: n$1(elementIcon$1),
-    hasDescription: !n(data.description ?? ""),
+    hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !n(data.technology ?? "")
   }), size2 = nodeSizes(data.style).size, isSmOrXs = size2 === "sm" || size2 === "xs";
   return /* @__PURE__ */ jsxs(
@@ -20645,7 +20685,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
           /* @__PURE__ */ jsx(
             Text,
             {
-              component: "h3",
+              component: "div",
               className: cx(classes2.title, "likec4-element-title"),
               lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
@@ -20660,12 +20700,14 @@ function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
             }
           ),
           data.description && /* @__PURE__ */ jsx(
-            Text,
+            MarkdownBlock,
             {
-              component: "div",
               className: cx(classes2.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description
+              value: data.description,
+              uselikec4palette: !0,
+              hideIfEmpty: !0,
+              maxHeight: data.description.isMarkdown ? "8rem" : void 0,
+              lineClamp: isSmOrXs ? 3 : 5
             }
           )
         ] })
@@ -21564,7 +21606,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
 });
 Overlay.displayName = "Overlay";
 export {
-  createReactComponent as $,
+  getContrastColor as $,
   createOptionalContext as A,
   Box$1 as B,
   useResolvedStylesApi as C,
@@ -21587,272 +21629,276 @@ export {
   Text as T,
   UnstyledButton as U,
   parseThemeColor as V,
-  Loader as W,
-  createScopedKeydownHandler as X,
-  getContrastColor as Y,
-  findElementAncestor as Z,
-  useClickOutside as _,
+  createEventHandler as W,
+  useDisclosure as X,
+  useDelayedHover as Y,
+  Loader as Z,
+  createScopedKeydownHandler as _,
   useMediaQuery as a,
-  BackgroundVariant as a$,
-  C as a0,
-  s as a1,
-  u$2 as a2,
-  MotionConfigContext as a3,
-  useConstant as a4,
-  PresenceContext as a5,
-  useIsomorphicLayoutEffect$1 as a6,
-  LayoutGroupContext as a7,
-  createRenderBatcher as a8,
-  featureDefinitions as a9,
-  vh as aA,
-  numberValueTypes as aB,
-  isControllingVariants as aC,
-  isVariantNode as aD,
-  hasReducedMotionListener as aE,
-  initPrefersReducedMotion as aF,
-  prefersReducedMotion as aG,
-  isCSSVariableName as aH,
-  buildHTMLStyles as aI,
-  scrapeMotionValuesFromProps$1 as aJ,
-  camelToDash as aK,
-  scrapeMotionValuesFromProps as aL,
-  buildSVGAttrs as aM,
-  isSVGTag as aN,
-  isSVGComponent as aO,
-  useDebouncedCallback as aP,
-  isBrowser as aQ,
-  getPatternStyles as aR,
-  patternFns as aS,
-  splitProps as aT,
-  styled as aU,
-  css as aV,
-  useLikeC4Specification as aW,
-  useUpdateEffect as aX,
-  n as aY,
-  t$1 as aZ,
-  Background as a_,
-  LazyContext as aa,
-  loadExternalIsValidProp as ab,
-  resolveVariantFromProps as ac,
-  MotionGlobalConfig as ad,
-  isMotionValue as ae,
-  optimizedAppearDataAttribute as af,
-  transformProps as ag,
-  number as ah,
-  alpha as ai,
-  clamp$1 as aj,
-  percent as ak,
-  isCSSVariableToken as al,
-  px as am,
-  transformPropOrder as an,
-  isVariantLabel as ao,
-  variantProps as ap,
-  isAnimationControls as aq,
-  variantPriorityOrder as ar,
-  isRefObject as as,
-  SwitchLayoutGroupContext as at,
-  addScaleCorrector as au,
-  microtask as av,
-  resolveMotionValue as aw,
-  scaleCorrectors as ax,
-  degrees$1 as ay,
-  vw as az,
+  n as a$,
+  findElementAncestor as a0,
+  useClickOutside as a1,
+  createReactComponent as a2,
+  C as a3,
+  s as a4,
+  u$2 as a5,
+  MotionConfigContext as a6,
+  useConstant as a7,
+  PresenceContext as a8,
+  useIsomorphicLayoutEffect$1 as a9,
+  scaleCorrectors as aA,
+  degrees$1 as aB,
+  vw as aC,
+  vh as aD,
+  numberValueTypes as aE,
+  isControllingVariants as aF,
+  isVariantNode as aG,
+  hasReducedMotionListener as aH,
+  initPrefersReducedMotion as aI,
+  prefersReducedMotion as aJ,
+  isCSSVariableName as aK,
+  buildHTMLStyles as aL,
+  scrapeMotionValuesFromProps$1 as aM,
+  camelToDash as aN,
+  scrapeMotionValuesFromProps as aO,
+  buildSVGAttrs as aP,
+  isSVGTag as aQ,
+  isSVGComponent as aR,
+  useDebouncedCallback as aS,
+  isBrowser as aT,
+  getPatternStyles as aU,
+  patternFns as aV,
+  splitProps as aW,
+  styled as aX,
+  css as aY,
+  useLikeC4Specification as aZ,
+  useUpdateEffect as a_,
+  LayoutGroupContext as aa,
+  createRenderBatcher as ab,
+  featureDefinitions as ac,
+  LazyContext as ad,
+  loadExternalIsValidProp as ae,
+  resolveVariantFromProps as af,
+  MotionGlobalConfig as ag,
+  isMotionValue as ah,
+  optimizedAppearDataAttribute as ai,
+  transformProps as aj,
+  number as ak,
+  alpha as al,
+  clamp$1 as am,
+  percent as an,
+  isCSSVariableToken as ao,
+  px as ap,
+  transformPropOrder as aq,
+  isVariantLabel as ar,
+  variantProps as as,
+  isAnimationControls as at,
+  variantPriorityOrder as au,
+  isRefObject as av,
+  SwitchLayoutGroupContext as aw,
+  addScaleCorrector as ax,
+  microtask as ay,
+  resolveMotionValue as az,
   useMantineTheme as b,
-  useLikeC4Model as b$,
-  useIsZoomTooSmall as b0,
-  useXYStoreApi as b1,
-  index as b2,
-  stopPropagation as b3,
-  cx as b4,
-  useStore$1 as b5,
-  XSTATE_STOP as b6,
-  cloneMachineSnapshot as b7,
-  evaluateGuard as b8,
-  createErrorActorEvent as b9,
-  toArray as bA,
-  formatTransitions as bB,
-  toTransitionConfigArray as bC,
-  formatTransition as bD,
-  getCandidates as bE,
-  NULL_EVENT as bF,
-  createInvokeId as bG,
-  getDelayedTransitions as bH,
-  formatInitialTransition as bI,
-  deepEqual as bJ,
-  ActionIcon as bK,
-  IconZoomScan as bL,
-  sva as bM,
-  Box as bN,
-  n$1 as bO,
-  EdgeLabelRenderer as bP,
-  e as bQ,
-  useDiagramContext as bR,
-  useDiagram as bS,
-  useMantinePortalProps as bT,
-  PopoverTarget as bU,
-  PopoverDropdown as bV,
-  Stack as bW,
-  Group as bX,
-  Button as bY,
-  IconCheck as bZ,
-  cva as b_,
-  XSTATE_ERROR as ba,
+  Button as b$,
+  t$1 as b0,
+  Background as b1,
+  BackgroundVariant as b2,
+  useIsZoomTooSmall as b3,
+  useXYStoreApi as b4,
+  index as b5,
+  stopPropagation as b6,
+  cx as b7,
+  useStore$1 as b8,
+  XSTATE_STOP as b9,
+  evaluateGuard as bA,
+  getCandidates as bB,
+  NULL_EVENT as bC,
+  createInvokeId as bD,
+  getDelayedTransitions as bE,
+  formatInitialTransition as bF,
+  createErrorActorEvent as bG,
+  XSTATE_ERROR as bH,
+  cancel as bI,
+  raise as bJ,
+  spawnChild as bK,
+  stopChild as bL,
+  deepEqual as bM,
+  ActionIcon as bN,
+  IconZoomScan as bO,
+  sva as bP,
+  Box as bQ,
+  n$1 as bR,
+  EdgeLabelRenderer as bS,
+  e as bT,
+  useDiagramContext as bU,
+  useDiagram as bV,
+  useMantinePortalProps as bW,
+  PopoverTarget as bX,
+  PopoverDropdown as bY,
+  Stack as bZ,
+  Group as b_,
+  cloneMachineSnapshot as ba,
   ProcessingStatus as bb,
   resolveReferencedActor as bc,
   createActor as bd,
-  cancel as be,
-  raise as bf,
-  spawnChild as bg,
-  stopChild as bh,
-  resolveStateValue as bi,
-  getAllStateNodes as bj,
-  getStateNodes as bk,
-  createMachineSnapshot as bl,
-  isInFinalState as bm,
-  macrostep as bn,
-  transitionNode as bo,
-  resolveActionsAndContext as bp,
-  createInitEvent as bq,
-  microstep as br,
-  getInitialStateNodes as bs,
-  toStatePath as bt,
-  isStateId as bu,
-  getStateNodeByPath as bv,
-  getPersistedSnapshot as bw,
-  $$ACTOR_TYPE as bx,
-  STATE_DELIMITER as by,
-  mapValues as bz,
+  resolveStateValue as be,
+  getAllStateNodes as bf,
+  getStateNodes as bg,
+  createMachineSnapshot as bh,
+  isInFinalState as bi,
+  macrostep as bj,
+  transitionNode as bk,
+  resolveActionsAndContext as bl,
+  createInitEvent as bm,
+  microstep as bn,
+  getInitialStateNodes as bo,
+  toStatePath as bp,
+  isStateId as bq,
+  getStateNodeByPath as br,
+  getPersistedSnapshot as bs,
+  $$ACTOR_TYPE as bt,
+  STATE_DELIMITER as bu,
+  mapValues as bv,
+  toArray as bw,
+  formatTransitions as bx,
+  toTransitionConfigArray as by,
+  formatTransition as bz,
   useMantineStyleNonce as c,
-  useXYStore as c$,
-  findDiagramNode as c0,
-  findDiagramEdge as c1,
-  Menu as c2,
-  MenuTarget as c3,
-  MenuDropdown as c4,
-  MenuLabel as c5,
-  MenuDivider as c6,
-  MenuItem as c7,
-  useEnabledFeatures as c8,
-  useDiagramEventHandlers as c9,
-  CompoundTitle as cA,
-  ElementNodeContainer as cB,
-  ElementShape as cC,
-  ElementTitle as cD,
-  ElementTags as cE,
-  ElementDetailsButton as cF,
-  Handle as cG,
-  Position as cH,
-  getDefaultExportFromCjs as cI,
-  l$1 as cJ,
-  IconSelector as cK,
-  SegmentedControl as cL,
-  ReactFlowProvider as cM,
-  useStoreApi as cN,
-  useReactFlow as cO,
-  Panel as cP,
-  m as cQ,
-  u as cR,
-  useSyncedRef as cS,
-  IconRenderer as cT,
-  useTimeoutEffect as cU,
-  ReactRemoveScroll as cV,
-  Flex as cW,
-  ElementTag as cX,
-  ActionIconGroup as cY,
-  DiagramFeatures as cZ,
-  Divider as c_,
-  TooltipGroup as ca,
-  Space as cb,
-  Tooltip$1 as cc,
-  IfEnabled as cd,
-  IconFileSymlink as ce,
-  getNodeDimensions as cf,
-  useIsPanning as cg,
-  useXYFlow as ch,
-  useDiagramActorSnapshot as ci,
-  useXYInternalNode as cj,
-  isSamePoint as ck,
-  bezierControlPoints as cl,
-  bezierPath as cm,
-  ViewGroupNode as cn,
-  CompoundDeploymentNode as co,
-  CompoundElementNode as cp,
-  DeploymentNode as cq,
-  ElementNode as cr,
-  shallowEqual as cs,
-  useSelector as ct,
-  getBezierPath as cu,
-  useCurrentViewId as cv,
-  ElementActionButtons as cw,
-  IconTransform as cx,
-  customNode as cy,
-  CompoundNodeContainer as cz,
+  ActionIconGroup as c$,
+  IconCheck as c0,
+  cva as c1,
+  useLikeC4Model as c2,
+  findDiagramNode as c3,
+  findDiagramEdge as c4,
+  Menu as c5,
+  MenuTarget as c6,
+  MenuDropdown as c7,
+  MenuLabel as c8,
+  MenuDivider as c9,
+  IconTransform as cA,
+  customNode as cB,
+  CompoundNodeContainer as cC,
+  CompoundTitle as cD,
+  ElementNodeContainer as cE,
+  ElementShape as cF,
+  ElementTitle as cG,
+  ElementTags as cH,
+  ElementDetailsButton as cI,
+  Handle as cJ,
+  Position as cK,
+  getDefaultExportFromCjs as cL,
+  l$1 as cM,
+  IconSelector as cN,
+  SegmentedControl as cO,
+  ReactFlowProvider as cP,
+  useStoreApi as cQ,
+  useReactFlow as cR,
+  Panel as cS,
+  m as cT,
+  u as cU,
+  useSyncedRef as cV,
+  IconRenderer as cW,
+  useTimeoutEffect as cX,
+  ReactRemoveScroll as cY,
+  Flex as cZ,
+  ElementTag as c_,
+  MenuItem as ca,
+  useEnabledFeatures as cb,
+  useDiagramEventHandlers as cc,
+  TooltipGroup as cd,
+  Space as ce,
+  Tooltip$1 as cf,
+  IfEnabled as cg,
+  IconFileSymlink as ch,
+  getNodeDimensions as ci,
+  useIsPanning as cj,
+  useXYFlow as ck,
+  useDiagramActorSnapshot as cl,
+  useXYInternalNode as cm,
+  isSamePoint as cn,
+  bezierControlPoints as co,
+  bezierPath as cp,
+  ViewGroupNode as cq,
+  CompoundDeploymentNode as cr,
+  CompoundElementNode as cs,
+  DeploymentNode as ct,
+  ElementNode as cu,
+  shallowEqual as cv,
+  useSelector as cw,
+  getBezierPath as cx,
+  useCurrentViewId as cy,
+  ElementActionButtons as cz,
   alpha$1 as d,
-  IfNotEnabled as d$,
-  useReducedMotionConfig as d0,
-  Overlay as d1,
-  t$2 as d2,
-  VisuallyHidden as d3,
-  MotionDiv as d4,
-  IconOrShapeRenderer as d5,
-  MotionButton as d6,
-  FocusTrap as d7,
-  HStack as d8,
-  t$4 as d9,
-  nodeToRect as dA,
-  useDiagramEventHandlersRef as dB,
-  useActorRef as dC,
-  DiagramActorContextProvider as dD,
-  IconRendererProvider as dE,
-  DiagramEventHandlers as dF,
-  ReduceGraphicsContext as dG,
-  RootContainer as dH,
-  useMutationObserver as dI,
-  Portal as dJ,
-  shallowEqual$1 as dK,
-  LikeC4ModelContext as dL,
-  useLikeC4ViewModel as dM,
-  useSetState as dN,
-  CompoundActionButton as dO,
-  CompoundDetailsButton as dP,
-  DefaultHandles as dQ,
-  CompoundActions as dR,
-  CompoundDeploymentToolbar as dS,
-  CompoundDetailsButtonWithHandler as dT,
-  CompoundElementToolbar as dU,
-  DeploymentElementActions as dV,
-  DeploymentElementToolbar as dW,
-  ElementActions as dX,
-  ElementDetailsButtonWithHandler as dY,
-  ElementToolbar as dZ,
-  Toolbar as d_,
-  isMacOs as da,
-  FloatingIndicator as db,
-  clampUseMovePosition as dc,
-  useMove as dd,
-  HoverCard as de,
-  HoverCardTarget as df,
-  HoverCardDropdown as dg,
-  useDiagramSyncLayoutState as dh,
-  ButtonGroup as di,
-  useIsReducedGraphics as dj,
-  usePanningAtom as dk,
-  useTimeout as dl,
-  useCustomCompareMemo as dm,
-  applyEdgeChanges as dn,
-  applyNodeChanges as dp,
-  getViewportForBounds as dq,
-  typedSystem as dr,
-  centerXYInternalNode as ds,
-  t$3 as dt,
-  getBoundsOfRects as du,
-  boxToRect as dv,
-  and as dw,
-  AllDisabled as dx,
-  focusedBounds as dy,
-  or as dz,
+  ElementDetailsButtonWithHandler as d$,
+  MarkdownBlock as d0,
+  DiagramFeatures as d1,
+  Divider as d2,
+  useXYStore as d3,
+  useReducedMotionConfig as d4,
+  Overlay as d5,
+  t$2 as d6,
+  VisuallyHidden as d7,
+  MotionDiv as d8,
+  IconOrShapeRenderer as d9,
+  focusedBounds as dA,
+  or as dB,
+  nodeToRect as dC,
+  useDiagramEventHandlersRef as dD,
+  useActorRef as dE,
+  DiagramActorContextProvider as dF,
+  IconRendererProvider as dG,
+  DiagramEventHandlers as dH,
+  ReduceGraphicsContext as dI,
+  RootContainer as dJ,
+  useMutationObserver as dK,
+  Portal as dL,
+  shallowEqual$1 as dM,
+  LikeC4ModelContext as dN,
+  useDiagramActorRef as dO,
+  useLikeC4ViewModel as dP,
+  useSetState as dQ,
+  CompoundActionButton as dR,
+  CompoundDetailsButton as dS,
+  DefaultHandles as dT,
+  CompoundActions as dU,
+  CompoundDeploymentToolbar as dV,
+  CompoundDetailsButtonWithHandler as dW,
+  CompoundElementToolbar as dX,
+  DeploymentElementActions as dY,
+  DeploymentElementToolbar as dZ,
+  ElementActions as d_,
+  MotionButton as da,
+  FocusTrap as db,
+  HStack as dc,
+  t$4 as dd,
+  isMacOs as de,
+  useHover$1 as df,
+  FloatingIndicator as dg,
+  clampUseMovePosition as dh,
+  useMove as di,
+  useDiagramSyncLayoutState as dj,
+  ButtonGroup as dk,
+  useIsReducedGraphics as dl,
+  usePanningAtom as dm,
+  useTimeout as dn,
+  useCustomCompareMemo as dp,
+  applyEdgeChanges as dq,
+  applyNodeChanges as dr,
+  getViewportForBounds as ds,
+  typedSystem as dt,
+  centerXYInternalNode as du,
+  t$3 as dv,
+  getBoundsOfRects as dw,
+  boxToRect as dx,
+  and as dy,
+  AllDisabled as dz,
   em as e,
-  IfNotReadOnly as e0,
+  ElementToolbar as e0,
+  Toolbar as e1,
+  IfNotEnabled as e2,
+  IfNotReadOnly as e3,
+  IfReadOnly as e4,
   getPrimaryContrastColor as f,
   getPrimaryShade as g,
   deepMerge as h,