likec4 1.0.1 → 1.1.0

package/dist/__app__/src/{main-DocCFjZN.js → main-Ccc7-VWf.js}

@@ -10643,13 +10643,13 @@ function resolveStyle({ style: style2, theme: theme2 }) {
     {}
   ) : typeof style2 == "function" ? style2(theme2) : style2 ?? {};
 }
-function mergeVars(vars2) {
-  return vars2.reduce((acc, current) => (current && Object.keys(current).forEach((key) => {
+function mergeVars(vars) {
+  return vars.reduce((acc, current) => (current && Object.keys(current).forEach((key) => {
     acc[key] = { ...acc[key], ...filterProps$1(current[key]) };
   }), acc), {});
 }
 function resolveVars({
-  vars: vars2,
+  vars,
   varsResolver: varsResolver2,
   theme: theme2,
   props,
@@ -10661,7 +10661,7 @@ function resolveVars({
   return mergeVars([
     headless ? {} : varsResolver2?.(theme2, props, stylesCtx),
     ...themeName.map((name) => theme2.components?.[name]?.vars?.(theme2, props, stylesCtx)),
-    vars2?.(theme2, props, stylesCtx)
+    vars?.(theme2, props, stylesCtx)
   ])?.[selector2];
 }
 function getStyle({
@@ -10674,7 +10674,7 @@ function getStyle({
   rootSelector,
   styles,
   style: style2,
-  vars: vars2,
+  vars,
   varsResolver: varsResolver2,
   headless,
   withStylesTransform
@@ -10683,13 +10683,13 @@ function getStyle({
     ...!withStylesTransform && getThemeStyles({ theme: theme2, themeName, props, stylesCtx, selector: selector2 }),
     ...!withStylesTransform && resolveStyles({ theme: theme2, styles, props, stylesCtx })[selector2],
     ...!withStylesTransform && resolveStyles({ theme: theme2, styles: options?.styles, props: options?.props || props, stylesCtx })[selector2],
-    ...resolveVars({ theme: theme2, props, stylesCtx, vars: vars2, varsResolver: varsResolver2, selector: selector2, themeName, headless }),
+    ...resolveVars({ theme: theme2, props, stylesCtx, vars, varsResolver: varsResolver2, selector: selector2, themeName, headless }),
     ...rootSelector === selector2 ? resolveStyle({ style: style2, theme: theme2 }) : null,
     ...resolveStyle({ style: options?.style, theme: theme2 })
   };
 }
 function useStylesTransform({ props, stylesCtx, themeName }) {
-  const theme2 = useMantineTheme(), stylesTransform = useMantineStylesTransform();
+  const theme2 = useMantineTheme(), stylesTransform = useMantineStylesTransform()?.();
   return {
     getTransformedStyles: (styles) => stylesTransform ? [
       ...styles.map(
@@ -10713,7 +10713,7 @@ function useStyles({
   unstyled,
   classNames,
   styles,
-  vars: vars2,
+  vars,
   varsResolver: varsResolver2
 }) {
   const theme2 = useMantineTheme(), classNamesPrefix = useMantineClassNamesPrefix(), withStaticClasses = useMantineWithStaticClasses(), headless = useMantineIsHeadless(), themeName = (Array.isArray(name) ? name : [name]).filter((n2) => n2), { withStylesTransform, getTransformedStyles } = useStylesTransform({
@@ -10749,7 +10749,7 @@ function useStyles({
       rootSelector,
       styles,
       style: style2,
-      vars: vars2,
+      vars,
       varsResolver: varsResolver2,
       headless,
       withStylesTransform
@@ -10759,22 +10759,22 @@ function useStyles({
 function getAutoContrastValue(autoContrast, theme2) {
   return typeof autoContrast == "boolean" ? autoContrast : theme2.autoContrast;
 }
-function disableTransition() {
+function disableTransition(nonce) {
   const style2 = document.createElement("style");
-  return style2.innerHTML = "*, *::before, *::after {transition: none !important;}", style2.setAttribute("data-mantine-disable-transition", "true"), document.head.appendChild(style2), () => document.querySelectorAll("[data-mantine-disable-transition]").forEach((element) => element.remove());
+  return style2.setAttribute("data-mantine-styles", "inline"), style2.innerHTML = "*, *::before, *::after {transition: none !important;}", style2.setAttribute("data-mantine-disable-transition", "true"), nonce && style2.setAttribute("nonce", nonce), document.head.appendChild(style2), () => document.querySelectorAll("[data-mantine-disable-transition]").forEach((element) => element.remove());
 }
 function useMantineColorScheme({ keepTransitions } = {}) {
-  const clearStylesRef = reactExports.useRef(), timeoutRef = reactExports.useRef(), ctx = reactExports.useContext(MantineContext);
+  const clearStylesRef = reactExports.useRef(), timeoutRef = reactExports.useRef(), ctx = reactExports.useContext(MantineContext), nonce = useMantineStyleNonce(), nonceValue = reactExports.useRef(nonce?.());
   if (!ctx)
     throw new Error("[@mantine/core] MantineProvider was not found in tree");
   const setColorScheme = (value) => {
     ctx.setColorScheme(value), clearStylesRef.current = keepTransitions ? () => {
-    } : disableTransition(), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
+    } : disableTransition(nonceValue.current), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
       clearStylesRef.current?.();
     }, 10);
   }, clearColorScheme = () => {
     ctx.clearColorScheme(), clearStylesRef.current = keepTransitions ? () => {
-    } : disableTransition(), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
+    } : disableTransition(nonceValue.current), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
       clearStylesRef.current?.();
     }, 10);
   }, osColorScheme = useColorScheme("light", { getInitialValueInEffect: !1 }), computedColorScheme = ctx.colorScheme === "auto" ? osColorScheme : ctx.colorScheme, toggleColorScheme = reactExports.useCallback(
@@ -11136,10 +11136,10 @@ function mergeStyles(styles, theme2) {
 function getBoxStyle({
   theme: theme2,
   style: style2,
-  vars: vars2,
+  vars,
   styleProps
 }) {
-  const _style = mergeStyles(style2, theme2), _vars = mergeStyles(vars2, theme2);
+  const _style = mergeStyles(style2, theme2), _vars = mergeStyles(vars, theme2);
   return { ..._style, ..._vars, ...styleProps };
 }
 const _Box = reactExports.forwardRef(
@@ -11158,7 +11158,7 @@ const _Box = reactExports.forwardRef(
     renderRoot,
     ...others
   }, ref) => {
-    const theme2 = useMantineTheme(), Element2 = component || "div", { styleProps, rest } = extractStyleProps(others), transformedSx = useMantineSxTransform()?.(styleProps.sx), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
+    const theme2 = useMantineTheme(), Element2 = component || "div", { styleProps, rest } = extractStyleProps(others), transformedSx = useMantineSxTransform()?.()?.(styleProps.sx), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
       styleProps,
       theme: theme2,
       data: STYlE_PROPS_DATA
@@ -11676,7 +11676,7 @@ const classes$u = __default__$w, defaultProps$1g = {
     styles,
     unstyled,
     scrollbarSize,
-    vars: vars2,
+    vars,
     type,
     scrollHideDelay,
     viewportProps,
@@ -11695,7 +11695,7 @@ const classes$u = __default__$w, defaultProps$1g = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$x
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -11776,7 +11776,7 @@ const ScrollAreaAutosize = factory((props, ref) => {
     viewportProps,
     scrollbars,
     style: style2,
-    vars: vars2,
+    vars,
     ...others
   } = useProps("ScrollAreaAutosize", defaultProps$1g, props);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ...others, ref, style: [{ display: "flex", overflow: "auto" }, style2], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { style: { display: "flex", flexDirection: "column", flex: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -11794,7 +11794,7 @@ const ScrollAreaAutosize = factory((props, ref) => {
       unstyled,
       variant,
       viewportProps,
-      vars: vars2,
+      vars,
       scrollbars,
       children: children2
     }
@@ -11844,7 +11844,7 @@ UnstyledButton.classes = classes$t;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
 var __default__$u = { root: "m_515a97f8" };
 const classes$s = __default__$u, defaultProps$1e = {}, VisuallyHidden = factory((_props, ref) => {
-  const props = useProps("VisuallyHidden", defaultProps$1e, _props), { classNames, className, style: style2, styles, unstyled, vars: vars2, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("VisuallyHidden", defaultProps$1e, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
     name: "VisuallyHidden",
     classes: classes$s,
     props,
@@ -11872,7 +11872,7 @@ const classes$r = __default__$t, defaultProps$1d = {}, varsResolver$w = (_2, { r
     styles,
     unstyled,
     withBorder,
-    vars: vars2,
+    vars,
     radius,
     shadow,
     variant,
@@ -11887,7 +11887,7 @@ const classes$r = __default__$t, defaultProps$1d = {}, varsResolver$w = (_2, { r
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$w
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -14317,7 +14317,7 @@ const classes$q = __default__$s, defaultProps$1b = {}, PopoverDropdown = factory
   const props = useProps("PopoverDropdown", defaultProps$1b, _props), {
     className,
     style: style2,
-    vars: vars2,
+    vars,
     children: children2,
     onKeyDownCapture,
     variant,
@@ -14583,7 +14583,7 @@ function Popover(_props) {
     returnFocus,
     variant,
     keepMounted,
-    vars: vars2,
+    vars,
     floatingStrategy,
     ...others
   } = props, getStyles2 = useStyles({
@@ -14594,7 +14594,7 @@ function Popover(_props) {
     styles,
     unstyled,
     rootSelector: "dropdown",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$v
   }), arrowRef = reactExports.useRef(null), [targetNode, setTargetNode] = reactExports.useState(null), [dropdownNode, setDropdownNode] = reactExports.useState(null), { dir } = useDirection(), uid = useId$1(id2), popover = usePopover({
     middlewares,
@@ -14705,7 +14705,7 @@ const classes$p = __default__$r, Bars = reactExports.forwardRef(({ className, ..
     size: size2,
     color: color2,
     type,
-    vars: vars2,
+    vars,
     className,
     style: style2,
     classNames,
@@ -14724,7 +14724,7 @@ const classes$p = __default__$r, Bars = reactExports.forwardRef(({ className, ..
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$u
   });
   return children2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ...getStyles2("root"), ref, ...others, children: children2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -14755,7 +14755,7 @@ const classes$o = __default__$q, defaultProps$17 = {
     styles,
     unstyled,
     orientation,
-    vars: vars2,
+    vars,
     borderWidth,
     variant,
     mod,
@@ -14769,7 +14769,7 @@ const classes$o = __default__$q, defaultProps$17 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$t,
     rootSelector: "group"
   });
@@ -14821,7 +14821,7 @@ const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, var
     radius,
     __staticSelector,
     gradient,
-    vars: vars2,
+    vars,
     children: children2,
     disabled,
     "data-disabled": dataDisabled,
@@ -14837,7 +14837,7 @@ const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, var
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$s
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -14897,7 +14897,7 @@ const classes$n = __default__$p, defaultProps$15 = {
   const props = useProps("CloseButton", defaultProps$15, _props), {
     iconSize,
     children: children2,
-    vars: vars2,
+    vars,
     radius,
     className,
     classNames,
@@ -14919,7 +14919,7 @@ const classes$n = __default__$p, defaultProps$15 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$r
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -14973,7 +14973,7 @@ const classes$m = __default__$o, defaultProps$14 = {
     wrap,
     grow,
     preventGrowOverflow,
-    vars: vars2,
+    vars,
     variant,
     __size,
     mod,
@@ -14988,7 +14988,7 @@ const classes$m = __default__$o, defaultProps$14 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$q
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15023,7 +15023,7 @@ const classes$l = __default__$n, defaultProps$13 = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     fixed,
     center,
     children: children2,
@@ -15044,7 +15044,7 @@ const classes$l = __default__$n, defaultProps$13 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$p
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, ...getStyles2("root"), mod: [{ center, fixed }, mod], ...others, children: children2 });
@@ -15071,7 +15071,7 @@ function useModal({
   return useWindowEvent(
     "keydown",
     (event) => {
-      event.key === "Escape" && closeOnEscape2 && event.target?.getAttribute("data-mantine-stop-propagation") !== "true" && onClose();
+      event.key === "Escape" && closeOnEscape2 && opened && event.target?.getAttribute("data-mantine-stop-propagation") !== "true" && onClose();
     },
     { capture: !0 }
   ), useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus }), {
@@ -15306,7 +15306,7 @@ const classes$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { s
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     size: size2,
     __staticSelector,
     __inheritStyles = !0,
@@ -15322,7 +15322,7 @@ const classes$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { s
     styles,
     unstyled,
     rootSelector: "description",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$o
   }), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15350,7 +15350,7 @@ const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     size: size2,
     __staticSelector,
     __inheritStyles = !0,
@@ -15366,7 +15366,7 @@ const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
     styles,
     unstyled,
     rootSelector: "error",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$n
   }), ctx = useInputWrapperContext(), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15397,7 +15397,7 @@ const defaultProps$10 = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     labelElement,
     size: size2,
     required,
@@ -15418,7 +15418,7 @@ const defaultProps$10 = {
     styles,
     unstyled,
     rootSelector: "label",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$m
   }), ctx = useInputWrapperContext(), getStyles2 = ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -15451,7 +15451,7 @@ const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     __staticSelector,
     variant,
     error,
@@ -15483,8 +15483,8 @@ const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
 InputPlaceholder.classes = classes$k;
 InputPlaceholder.displayName = "@mantine/core/InputPlaceholder";
 function getInputOffsets(inputWrapperOrder, { hasDescription, hasError }) {
-  const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder[inputIndex - 1], belowInput = inputWrapperOrder[inputIndex + 1];
-  return { offsetBottom: hasDescription && belowInput === "description" || hasError && belowInput === "error", offsetTop: hasDescription && aboveInput === "description" || hasError && aboveInput === "error" };
+  const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder.slice(0, inputIndex), belowInput = inputWrapperOrder.slice(inputIndex + 1), offsetTop = hasDescription && aboveInput.includes("description") || hasError && aboveInput.includes("error");
+  return { offsetBottom: hasDescription && belowInput.includes("description") || hasError && belowInput.includes("error"), offsetTop };
 }
 const defaultProps$_ = {
   labelElement: "label",
@@ -15508,7 +15508,7 @@ const defaultProps$_ = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     size: size2,
     variant,
     __staticSelector,
@@ -15537,7 +15537,7 @@ const defaultProps$_ = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$l
   }), sharedProps = {
     size: size2,
@@ -15658,7 +15658,7 @@ const defaultProps$Z = {
     rightSectionPointerEvents,
     leftSectionPointerEvents,
     variant,
-    vars: vars2,
+    vars,
     pointer: pointer2,
     multiline,
     radius,
@@ -15678,7 +15678,7 @@ const defaultProps$Z = {
     unstyled,
     stylesCtx,
     rootSelector: "wrapper",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$k
   }), ariaAttributes = withAria ? {
     required,
@@ -15778,7 +15778,7 @@ function useInputProps(component, defaultProps2, _props) {
     inputWrapperOrder,
     withAsterisk,
     variant,
-    vars: vars2,
+    vars,
     mod,
     ...others
   } = props, { styleProps, rest } = extractStyleProps(others), wrapperProps = {
@@ -15851,7 +15851,7 @@ const classes$j = __default__$k, defaultProps$X = {}, Flex$1 = polymorphicFactor
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     gap,
     rowGap,
     columnGap,
@@ -15869,7 +15869,7 @@ const classes$j = __default__$k, defaultProps$X = {}, Flex$1 = polymorphicFactor
     classNames,
     styles,
     unstyled,
-    vars: vars2
+    vars
   }), theme2 = useMantineTheme(), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
     styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },
     theme: theme2,
@@ -15922,7 +15922,7 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     radius,
     color: color2,
     title: title2,
@@ -15944,7 +15944,7 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$j
   }), rootId = useId$1(id2), titleId = title2 && `${rootId}-title` || void 0, bodyId = `${rootId}-body`;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16009,7 +16009,7 @@ const defaultProps$V = {
     gradient,
     span,
     __staticSelector,
-    vars: vars2,
+    vars,
     className,
     style: style2,
     classNames,
@@ -16028,7 +16028,7 @@ const defaultProps$V = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$i
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16098,7 +16098,7 @@ const classes$g = __default__$g, defaultProps$T = {
     "--combobox-chevron-size": getSize(size2, "combobox-chevron-size")
   }
 }), ComboboxChevron = factory((_props, ref) => {
-  const props = useProps("ComboboxChevron", defaultProps$T, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars: vars2, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("ComboboxChevron", defaultProps$T, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars, mod, ...others } = props, getStyles2 = useStyles({
     name: "ComboboxChevron",
     classes: classes$g,
     props,
@@ -16107,7 +16107,7 @@ const classes$g = __default__$g, defaultProps$T = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$h,
     rootSelector: "chevron"
   });
@@ -16190,7 +16190,7 @@ const defaultProps$R = {
 });
 ComboboxDropdownTarget.displayName = "@mantine/core/ComboboxDropdownTarget";
 const defaultProps$Q = {}, ComboboxEmpty = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxEmpty",
     defaultProps$Q,
     props
@@ -16278,7 +16278,7 @@ const defaultProps$P = {
 });
 ComboboxEventsTarget.displayName = "@mantine/core/ComboboxEventsTarget";
 const defaultProps$O = {}, ComboboxFooter = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxFooter",
     defaultProps$O,
     props
@@ -16295,7 +16295,7 @@ const defaultProps$O = {}, ComboboxFooter = factory((props, ref) => {
 ComboboxFooter.classes = classes$g;
 ComboboxFooter.displayName = "@mantine/core/ComboboxFooter";
 const defaultProps$N = {}, ComboboxGroup = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, children: children2, label, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, children: children2, label, ...others } = useProps(
     "ComboboxGroup",
     defaultProps$N,
     props
@@ -16316,7 +16316,7 @@ const defaultProps$N = {}, ComboboxGroup = factory((props, ref) => {
 ComboboxGroup.classes = classes$g;
 ComboboxGroup.displayName = "@mantine/core/ComboboxGroup";
 const defaultProps$M = {}, ComboboxHeader = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxHeader",
     defaultProps$M,
     props
@@ -16353,7 +16353,7 @@ const defaultProps$L = {}, ComboboxOption = factory((_props, ref) => {
     className,
     style: style2,
     styles,
-    vars: vars2,
+    vars,
     onClick,
     id: id2,
     active,
@@ -16420,7 +16420,7 @@ const defaultProps$J = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     withAriaAttributes,
     onKeyDown,
     withKeyboardNavigation,
@@ -16667,7 +16667,7 @@ function Combobox(_props) {
     unstyled,
     children: children2,
     store: controlledStore,
-    vars: vars2,
+    vars,
     onOptionSubmit,
     onClose,
     size: size2,
@@ -16683,7 +16683,7 @@ function Combobox(_props) {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$g
   }), onDropdownClose = () => {
     onClose?.(), store.closeDropdown();
@@ -16867,7 +16867,8 @@ function OptionsDropdown({
   unstyled,
   labelId,
   renderOption,
-  scrollAreaProps
+  scrollAreaProps,
+  "aria-label": ariaLabel
 }) {
   validateOptions(data);
   const filteredData = typeof search == "string" ? (filter2 || defaultOptionsFilter)({
@@ -16886,7 +16887,7 @@ function OptionsDropdown({
     },
     isOptionsGroup(item) ? item.group : item.value
   ));
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Dropdown, { hidden: hidden2 || hiddenWhenEmpty && isEmpty2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox.Options, { labelledBy: labelId, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Dropdown, { hidden: hidden2 || hiddenWhenEmpty && isEmpty2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox.Options, { labelledBy: labelId, "aria-label": ariaLabel, children: [
     withScrollArea ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       ScrollArea.Autosize,
       {
@@ -16929,7 +16930,7 @@ const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2,
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     radius,
     color: color2,
     gradient,
@@ -16951,7 +16952,7 @@ const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2,
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$f
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -16987,7 +16988,7 @@ const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2,
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     opened,
     children: children2,
     transitionDuration,
@@ -17002,7 +17003,7 @@ const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2,
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$e
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(UnstyledButton, { ...getStyles2("root"), ref, ...others, children: [
@@ -17025,7 +17026,7 @@ const classes$d = __default__$d, defaultProps$E = {
     styles,
     unstyled,
     orientation,
-    vars: vars2,
+    vars,
     borderWidth,
     variant,
     mod,
@@ -17039,7 +17040,7 @@ const classes$d = __default__$d, defaultProps$E = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$d,
     rootSelector: "group"
   });
@@ -17087,7 +17088,7 @@ const loaderTransition = {
 }, Button = polymorphicFactory((_props, ref) => {
   const props = useProps("Button", defaultProps$D, _props), {
     style: style2,
-    vars: vars2,
+    vars,
     className,
     color: color2,
     disabled,
@@ -17116,7 +17117,7 @@ const loaderTransition = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$c
   }), hasLeftSection = !!leftSection, hasRightSection = !!rightSection;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -17164,7 +17165,7 @@ const [CardProvider, useCardContext] = createSafeContext(
 );
 var __default__$c = { root: "m_e615b15f", section: "m_599a2148" };
 const classes$c = __default__$c, defaultProps$C = {}, CardSection = polymorphicFactory((_props, ref) => {
-  const props = useProps("CardSection", defaultProps$C, _props), { classNames, className, style: style2, styles, vars: vars2, withBorder, inheritPadding, mod, ...others } = props, ctx = useCardContext();
+  const props = useProps("CardSection", defaultProps$C, _props), { classNames, className, style: style2, styles, vars, withBorder, inheritPadding, mod, ...others } = props, ctx = useCardContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
     {
@@ -17182,7 +17183,7 @@ const defaultProps$B = {}, varsResolver$b = (_2, { padding }) => ({
     "--card-padding": getSpacing(padding)
   }
 }), Card$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Card", defaultProps$B, _props), { classNames, className, style: style2, styles, unstyled, vars: vars2, children: children2, padding, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("Card", defaultProps$B, _props), { classNames, className, style: style2, styles, unstyled, vars, children: children2, padding, ...others } = props, getStyles2 = useStyles({
     name: "Card",
     props,
     classes: classes$c,
@@ -17191,7 +17192,7 @@ const defaultProps$B = {}, varsResolver$b = (_2, { padding }) => ({
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$b
   }), _children = reactExports.Children.toArray(children2), content2 = _children.map((child, index2) => typeof child == "object" && child && "type" in child && child.type === CardSection ? reactExports.cloneElement(child, {
     "data-first-section": index2 === 0 || void 0,
@@ -17204,7 +17205,7 @@ Card$1.displayName = "@mantine/core/Card";
 Card$1.Section = CardSection;
 var __default__$b = { root: "m_4451eb3a" };
 const classes$b = __default__$b, defaultProps$A = {}, Center = polymorphicFactory((_props, ref) => {
-  const props = useProps("Center", defaultProps$A, _props), { classNames, className, style: style2, styles, unstyled, vars: vars2, inline: inline2, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("Center", defaultProps$A, _props), { classNames, className, style: style2, styles, unstyled, vars, inline: inline2, mod, ...others } = props, getStyles2 = useStyles({
     name: "Center",
     props,
     classes: classes$b,
@@ -17213,7 +17214,7 @@ const classes$b = __default__$b, defaultProps$A = {}, Center = polymorphicFactor
     classNames,
     styles,
     unstyled,
-    vars: vars2
+    vars
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, mod: [{ inline: inline2 }, mod], ...getStyles2("root"), ...others });
 });
@@ -17231,7 +17232,7 @@ const classes$a = __default__$a, defaultProps$z = {}, varsResolver$a = (theme2,
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     color: color2,
     block,
     variant,
@@ -17246,7 +17247,7 @@ const classes$a = __default__$a, defaultProps$z = {}, varsResolver$a = (theme2,
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$a
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17279,7 +17280,7 @@ const classes$9 = __default__$9, defaultProps$y = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     color: color2,
     size: size2,
     radius,
@@ -17296,7 +17297,7 @@ const classes$9 = __default__$9, defaultProps$y = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$9
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -17324,7 +17325,7 @@ const classes$8 = __default__$8, defaultProps$x = {}, varsResolver$8 = (_2, { si
     "--container-size": fluid ? void 0 : getSize(size2, "container-size")
   }
 }), Container$1 = factory((_props, ref) => {
-  const props = useProps("Container", defaultProps$x, _props), { classNames, className, style: style2, styles, unstyled, vars: vars2, fluid, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("Container", defaultProps$x, _props), { classNames, className, style: style2, styles, unstyled, vars, fluid, mod, ...others } = props, getStyles2 = useStyles({
     name: "Container",
     classes: classes$8,
     props,
@@ -17333,7 +17334,7 @@ const classes$8 = __default__$8, defaultProps$x = {}, varsResolver$8 = (_2, { si
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$8
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, mod: [{ fluid }, mod], ...getStyles2("root"), ...others });
@@ -17364,7 +17365,7 @@ const classes$7 = __default__$7, defaultProps$v = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     color: color2,
     orientation,
     label,
@@ -17380,7 +17381,7 @@ const classes$7 = __default__$7, defaultProps$v = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$7
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17402,7 +17403,7 @@ const [DrawerProvider, useDrawerContext] = createSafeContext(
 );
 var __default__$6 = { root: "m_f11b401e", header: "m_5a7c2c9", content: "m_b8a05bbd", inner: "m_31cd769a" };
 const classes$6 = __default__$6, defaultProps$u = {}, DrawerBody = factory((_props, ref) => {
-  const props = useProps("DrawerBody", defaultProps$u, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useDrawerContext();
+  const props = useProps("DrawerBody", defaultProps$u, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseBody,
     {
@@ -17415,7 +17416,7 @@ const classes$6 = __default__$6, defaultProps$u = {}, DrawerBody = factory((_pro
 DrawerBody.classes = classes$6;
 DrawerBody.displayName = "@mantine/core/DrawerBody";
 const defaultProps$t = {}, DrawerCloseButton = factory((_props, ref) => {
-  const props = useProps("DrawerCloseButton", defaultProps$t, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useDrawerContext();
+  const props = useProps("DrawerCloseButton", defaultProps$t, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseCloseButton,
     {
@@ -17428,7 +17429,7 @@ const defaultProps$t = {}, DrawerCloseButton = factory((_props, ref) => {
 DrawerCloseButton.classes = classes$6;
 DrawerCloseButton.displayName = "@mantine/core/DrawerCloseButton";
 const defaultProps$s = {}, DrawerContent = factory((_props, ref) => {
-  const props = useProps("DrawerContent", defaultProps$s, _props), { classNames, className, style: style2, styles, vars: vars2, children: children2, radius, ...others } = props, ctx = useDrawerContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
+  const props = useProps("DrawerContent", defaultProps$s, _props), { classNames, className, style: style2, styles, vars, children: children2, radius, ...others } = props, ctx = useDrawerContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
     {
@@ -17444,7 +17445,7 @@ const defaultProps$s = {}, DrawerContent = factory((_props, ref) => {
 DrawerContent.classes = classes$6;
 DrawerContent.displayName = "@mantine/core/DrawerContent";
 const defaultProps$r = {}, DrawerHeader = factory((_props, ref) => {
-  const props = useProps("DrawerHeader", defaultProps$r, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useDrawerContext();
+  const props = useProps("DrawerHeader", defaultProps$r, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseHeader,
     {
@@ -17457,7 +17458,7 @@ const defaultProps$r = {}, DrawerHeader = factory((_props, ref) => {
 DrawerHeader.classes = classes$6;
 DrawerHeader.displayName = "@mantine/core/DrawerHeader";
 const defaultProps$q = {}, DrawerOverlay = factory((_props, ref) => {
-  const props = useProps("DrawerOverlay", defaultProps$q, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useDrawerContext();
+  const props = useProps("DrawerOverlay", defaultProps$q, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseOverlay,
     {
@@ -17519,7 +17520,7 @@ const transitions = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     scrollAreaComponent,
     position,
     transitionProps,
@@ -17534,7 +17535,7 @@ const transitions = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$6
   }), drawerTransition = (dir === "rtl" ? rtlTransitions : transitions)[position];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerProvider, { value: { scrollAreaComponent, getStyles: getStyles2, radius }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17551,7 +17552,7 @@ const transitions = {
 DrawerRoot.classes = classes$6;
 DrawerRoot.displayName = "@mantine/core/DrawerRoot";
 const defaultProps$o = {}, DrawerTitle = factory((_props, ref) => {
-  const props = useProps("DrawerTitle", defaultProps$o, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useDrawerContext();
+  const props = useProps("DrawerTitle", defaultProps$o, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseTitle,
     {
@@ -17677,7 +17678,7 @@ const [MenuContextProvider, useMenuContext] = createSafeContext(
 );
 var __default__$5 = { dropdown: "m_dc9b7c9f", label: "m_9bfac126", divider: "m_efdf90cb", item: "m_99ac2aa1", itemLabel: "m_5476e0d3", itemSection: "m_8b75e504" };
 const classes$5 = __default__$5, defaultProps$j = {}, MenuDivider = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuDivider",
     defaultProps$j,
     props
@@ -17699,7 +17700,7 @@ const defaultProps$i = {}, MenuDropdown = factory((props, ref) => {
     className,
     style: style2,
     styles,
-    vars: vars2,
+    vars,
     onMouseEnter,
     onMouseLeave,
     children: children2,
@@ -17747,7 +17748,7 @@ const defaultProps$h = {}, MenuItem = polymorphicFactory((props, ref) => {
     className,
     style: style2,
     styles,
-    vars: vars2,
+    vars,
     color: color2,
     closeMenuOnClick,
     leftSection,
@@ -17805,7 +17806,7 @@ const defaultProps$h = {}, MenuItem = polymorphicFactory((props, ref) => {
 MenuItem.classes = classes$5;
 MenuItem.displayName = "@mantine/core/MenuItem";
 const defaultProps$g = {}, MenuLabel = factory((props, ref) => {
-  const { classNames, className, style: style2, styles, vars: vars2, ...others } = useProps(
+  const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuLabel",
     defaultProps$g,
     props
@@ -17874,7 +17875,7 @@ function Menu(_props) {
     styles,
     unstyled,
     variant,
-    vars: vars2,
+    vars,
     menuItemTabIndex,
     keepMounted,
     ...others
@@ -17958,7 +17959,7 @@ const [ModalProvider, useModalContext] = createSafeContext(
 );
 var __default__$4 = { root: "m_9df02822", content: "m_54c44539", inner: "m_1f958f16", header: "m_d0e2b9cd" };
 const classes$4 = __default__$4, defaultProps$d = {}, ModalBody = factory((_props, ref) => {
-  const props = useProps("ModalBody", defaultProps$d, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useModalContext();
+  const props = useProps("ModalBody", defaultProps$d, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseBody,
     {
@@ -17971,7 +17972,7 @@ const classes$4 = __default__$4, defaultProps$d = {}, ModalBody = factory((_prop
 ModalBody.classes = classes$4;
 ModalBody.displayName = "@mantine/core/ModalBody";
 const defaultProps$c = {}, ModalContent = factory((_props, ref) => {
-  const props = useProps("ModalContent", defaultProps$c, _props), { classNames, className, style: style2, styles, vars: vars2, children: children2, ...others } = props, ctx = useModalContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
+  const props = useProps("ModalContent", defaultProps$c, _props), { classNames, className, style: style2, styles, vars, children: children2, ...others } = props, ctx = useModalContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
     {
@@ -17996,7 +17997,7 @@ const defaultProps$c = {}, ModalContent = factory((_props, ref) => {
 ModalContent.classes = classes$4;
 ModalContent.displayName = "@mantine/core/ModalContent";
 const defaultProps$b = {}, ModalOverlay = factory((_props, ref) => {
-  const props = useProps("ModalOverlay", defaultProps$b, _props), { classNames, className, style: style2, styles, vars: vars2, ...others } = props, ctx = useModalContext();
+  const props = useProps("ModalOverlay", defaultProps$b, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseOverlay,
     {
@@ -18034,7 +18035,7 @@ const defaultProps$a = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     yOffset,
     scrollAreaComponent,
     radius,
@@ -18052,7 +18053,7 @@ const defaultProps$a = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$5
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalProvider, { value: { yOffset, scrollAreaComponent, getStyles: getStyles2, fullScreen }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18155,7 +18156,7 @@ const classes$3 = __default__$3, defaultProps$9 = {
     zIndex,
     disabled,
     variant,
-    vars: vars2,
+    vars,
     portalProps,
     ...others
   } = props, theme2 = useMantineTheme(), getStyles2 = useStyles({
@@ -18168,7 +18169,7 @@ const classes$3 = __default__$3, defaultProps$9 = {
     styles,
     unstyled,
     rootSelector: "tooltip",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$4
   }), { handleMouseMove, x: x2, y: y2, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({
     offset: offset2,
@@ -18339,7 +18340,7 @@ const defaultProps$7 = {
     inline: inline2,
     variant,
     keepMounted,
-    vars: vars2,
+    vars,
     portalProps,
     mod,
     floatingStrategy,
@@ -18367,7 +18368,7 @@ const defaultProps$7 = {
     styles,
     unstyled,
     rootSelector: "tooltip",
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$3
   });
   if (!isElement$1(children2))
@@ -18452,7 +18453,7 @@ const defaultProps$6 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     dropdownOpened,
     defaultDropdownOpened,
     onDropdownClose,
@@ -18602,7 +18603,8 @@ const defaultProps$6 = {
               withCheckIcon,
               nothingFoundMessage,
               unstyled,
-              labelId: `${_id}-label`,
+              labelId: others.label ? `${_id}-label` : void 0,
+              "aria-label": others.label ? void 0 : others["aria-label"],
               renderOption,
               scrollAreaProps
             }
@@ -18642,7 +18644,7 @@ const classes$2 = __default__$2, defaultProps$5 = {
     style: style2,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     align,
     justify,
     gap,
@@ -18657,7 +18659,7 @@ const classes$2 = __default__$2, defaultProps$5 = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$2
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, ...getStyles2("root"), variant, ...others });
@@ -18740,7 +18742,7 @@ const defaultProps$2 = {}, TabsTab = factory((_props, ref) => {
     style: style2,
     classNames,
     styles,
-    vars: vars2,
+    vars,
     mod,
     ...others
   } = props, theme2 = useMantineTheme(), { dir } = useDirection(), ctx = useTabsContext(), active = value === ctx.value, activateTab = (event) => {
@@ -18829,7 +18831,7 @@ const VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid
     unstyled,
     className,
     style: style2,
-    vars: vars2,
+    vars,
     autoContrast,
     mod,
     ...others
@@ -18847,7 +18849,7 @@ const VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver: varsResolver$1
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18934,7 +18936,7 @@ const classes = __default__, defaultProps = {
     styles,
     unstyled,
     order,
-    vars: vars2,
+    vars,
     size: size2,
     variant,
     lineClamp,
@@ -18950,7 +18952,7 @@ const classes = __default__, defaultProps = {
     classNames,
     styles,
     unstyled,
-    vars: vars2,
+    vars,
     varsResolver
   });
   return [1, 2, 3, 4, 5, 6].includes(order) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18968,7 +18970,7 @@ const classes = __default__, defaultProps = {
 });
 Title.classes = classes;
 Title.displayName = "@mantine/core/Title";
-var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$1 = "_1u4wf804", title$1 = "_1u4wf805";
+var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$1 = "_1u4wf804", title$2 = "_1u4wf805";
 function NotFound() {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { className: root$1, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18979,7 +18981,7 @@ function NotFound() {
       }
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: content, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: title$1, children: "Nothing to see here" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: title$2, children: "Nothing to see here" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { c: "dimmed", size: "lg", ta: "center", className: description$1, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { justify: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { component: Link$1, to: "/", search: !0, startTransition: !0, size: "md", children: "Take me back to home page" }) })
     ] })
@@ -20639,7 +20641,7 @@ function extend(parent, definition) {
     prototype[key] = definition[key];
   return prototype;
 }
-function Color$1() {
+function Color() {
 }
 var darker = 0.7, brighter = 1 / darker, reI = "\\s*([+-]?\\d+)\\s*", reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*", reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*", reHex = /^#([0-9a-f]{3,8})$/, reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`), reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`), reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`), reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`), reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`), reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`), named = {
   aliceblue: 15792383,
@@ -20791,9 +20793,9 @@ var darker = 0.7, brighter = 1 / darker, reI = "\\s*([+-]?\\d+)\\s*", reN = "\\s
   yellow: 16776960,
   yellowgreen: 10145074
 };
-define(Color$1, color$1, {
-  copy(channels2) {
-    return Object.assign(new this.constructor(), this, channels2);
+define(Color, color$1, {
+  copy(channels) {
+    return Object.assign(new this.constructor(), this, channels);
   },
   displayable() {
     return this.rgb().displayable();
@@ -20829,7 +20831,7 @@ function rgba$1(r2, g2, b2, a) {
   return a <= 0 && (r2 = g2 = b2 = NaN), new Rgb(r2, g2, b2, a);
 }
 function rgbConvert(o2) {
-  return o2 instanceof Color$1 || (o2 = color$1(o2)), o2 ? (o2 = o2.rgb(), new Rgb(o2.r, o2.g, o2.b, o2.opacity)) : new Rgb();
+  return o2 instanceof Color || (o2 = color$1(o2)), o2 ? (o2 = o2.rgb(), new Rgb(o2.r, o2.g, o2.b, o2.opacity)) : new Rgb();
 }
 function rgb(r2, g2, b2, opacity) {
   return arguments.length === 1 ? rgbConvert(r2) : new Rgb(r2, g2, b2, opacity ?? 1);
@@ -20837,7 +20839,7 @@ function rgb(r2, g2, b2, opacity) {
 function Rgb(r2, g2, b2, opacity) {
   this.r = +r2, this.g = +g2, this.b = +b2, this.opacity = +opacity;
 }
-define(Rgb, rgb, extend(Color$1, {
+define(Rgb, rgb, extend(Color, {
   brighter(k2) {
     return k2 = k2 == null ? brighter : Math.pow(brighter, k2), new Rgb(this.r * k2, this.g * k2, this.b * k2, this.opacity);
   },
@@ -20885,7 +20887,7 @@ function hsla$1(h2, s2, l2, a) {
 function hslConvert(o2) {
   if (o2 instanceof Hsl)
     return new Hsl(o2.h, o2.s, o2.l, o2.opacity);
-  if (o2 instanceof Color$1 || (o2 = color$1(o2)), !o2)
+  if (o2 instanceof Color || (o2 = color$1(o2)), !o2)
     return new Hsl();
   if (o2 instanceof Hsl)
     return o2;
@@ -20899,7 +20901,7 @@ function hsl(h2, s2, l2, opacity) {
 function Hsl(h2, s2, l2, opacity) {
   this.h = +h2, this.s = +s2, this.l = +l2, this.opacity = +opacity;
 }
-define(Hsl, hsl, extend(Color$1, {
+define(Hsl, hsl, extend(Color, {
   brighter(k2) {
     return k2 = k2 == null ? brighter : Math.pow(brighter, k2), new Hsl(this.h, this.s, this.l * k2, this.opacity);
   },
@@ -23362,10 +23364,10 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), childChanges = [];
       if (!node)
         return;
-      const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change2 = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x: x2, y: y2 } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x2 !== prevX && isWidthChange, isYPosChange = y2 !== prevY && isHeightChange;
+      const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x: x2, y: y2 } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x2 !== prevX && isWidthChange, isYPosChange = y2 !== prevY && isHeightChange;
       if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange)
         return;
-      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) && (change2.x = isXPosChange ? x2 : prevValues.x, change2.y = isYPosChange ? y2 : prevValues.y, prevValues.x = change2.x, prevValues.y = change2.y, parentNode && node.expandParent && (change2.x && change2.x < 0 && (prevValues.x = 0, startValues.x = startValues.x - change2.x), change2.y && change2.y < 0 && (prevValues.y = 0, startValues.y = startValues.y - change2.y)), childNodes.length > 0)) {
+      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) && (change.x = isXPosChange ? x2 : prevValues.x, change.y = isYPosChange ? y2 : prevValues.y, prevValues.x = change.x, prevValues.y = change.y, parentNode && node.expandParent && (change.x && change.x < 0 && (prevValues.x = 0, startValues.x = startValues.x - change.x), change.y && change.y < 0 && (prevValues.y = 0, startValues.y = startValues.y - change.y)), childNodes.length > 0)) {
         const xChange = x2 - prevX, yChange = y2 - prevY;
         for (const childNode of childNodes)
           childNode.position = {
@@ -23373,7 +23375,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight)
           }, childChanges.push(childNode);
       }
-      (isWidthChange || isHeightChange) && (change2.width = isWidthChange ? width : prevValues.width, change2.height = isHeightChange ? height : prevValues.height, prevValues.width = change2.width, prevValues.height = change2.height);
+      (isWidthChange || isHeightChange) && (change.width = isWidthChange ? width : prevValues.width, change.height = isHeightChange ? height : prevValues.height, prevValues.width = change.width, prevValues.height = change.height);
       const direction = getResizeDirection({
         width: prevValues.width,
         prevWidth,
@@ -23382,7 +23384,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         affectsX: controlDirection.affectsX,
         affectsY: controlDirection.affectsY
       }), nextValues = { ...prevValues, direction };
-      shouldResize?.(event, nextValues) !== !1 && (onResize?.(event, nextValues), onChange(change2, childChanges));
+      shouldResize?.(event, nextValues) !== !1 && (onResize?.(event, nextValues), onChange(change, childChanges));
     }).on("end", (event) => {
       onResizeEnd?.(event, { ...prevValues }), onEnd?.();
     });
@@ -23734,15 +23736,15 @@ const useViewportHelper = () => {
 };
 function applyChanges(changes, elements) {
   const updatedElements = [], changesMap = /* @__PURE__ */ new Map();
-  for (const change2 of changes)
-    if (change2.type === "add") {
-      updatedElements.push(change2.item);
+  for (const change of changes)
+    if (change.type === "add") {
+      updatedElements.push(change.item);
       continue;
-    } else if (change2.type === "remove" || change2.type === "replace")
-      changesMap.set(change2.id, [change2]);
+    } else if (change.type === "remove" || change.type === "replace")
+      changesMap.set(change.id, [change]);
     else {
-      const elementChanges = changesMap.get(change2.id);
-      elementChanges ? elementChanges.push(change2) : changesMap.set(change2.id, [change2]);
+      const elementChanges = changesMap.get(change.id);
+      elementChanges ? elementChanges.push(change) : changesMap.set(change.id, [change]);
     }
   for (const element of elements) {
     const changes2 = changesMap.get(element.id);
@@ -23757,24 +23759,24 @@ function applyChanges(changes, elements) {
       continue;
     }
     const updatedElement = { ...element };
-    for (const change2 of changes2)
-      applyChange(change2, updatedElement);
+    for (const change of changes2)
+      applyChange(change, updatedElement);
     updatedElements.push(updatedElement);
   }
   return updatedElements;
 }
-function applyChange(change2, element) {
-  switch (change2.type) {
+function applyChange(change, element) {
+  switch (change.type) {
     case "select": {
-      element.selected = change2.selected;
+      element.selected = change.selected;
       break;
     }
     case "position": {
-      typeof change2.position < "u" && (element.position = change2.position), typeof change2.dragging < "u" && (element.dragging = change2.dragging);
+      typeof change.position < "u" && (element.position = change.position), typeof change.dragging < "u" && (element.dragging = change.dragging);
       break;
     }
     case "dimensions": {
-      typeof change2.dimensions < "u" && (element.measured ??= {}, element.measured.width = change2.dimensions.width, element.measured.height = change2.dimensions.height, change2.setAttributes && (element.width = change2.dimensions.width, element.height = change2.dimensions.height)), typeof change2.resizing == "boolean" && (element.resizing = change2.resizing);
+      typeof change.dimensions < "u" && (element.measured ??= {}, element.measured.width = change.dimensions.width, element.measured.height = change.dimensions.height, change.setAttributes && (element.width = change.dimensions.width, element.height = change.dimensions.height)), typeof change.resizing == "boolean" && (element.resizing = change.resizing);
       break;
     }
   }
@@ -25071,13 +25073,13 @@ const GraphView = reactExports.memo(GraphViewComponent), getInitialState = ({ no
   updateNodePositions: (nodeDragItems, dragging = !1) => {
     const parentExpandChildren = [], changes = [];
     for (const [id2, dragItem] of nodeDragItems) {
-      const change2 = {
+      const change = {
         id: id2,
         type: "position",
         position: dragItem.position,
         dragging
       };
-      dragItem?.expandParent && dragItem?.parentId && change2.position && (parentExpandChildren.push({
+      dragItem?.expandParent && dragItem?.parentId && change.position && (parentExpandChildren.push({
         id: id2,
         parentId: dragItem.parentId,
         rect: {
@@ -25085,7 +25087,7 @@ const GraphView = reactExports.memo(GraphViewComponent), getInitialState = ({ no
           width: dragItem.measured.width,
           height: dragItem.measured.height
         }
-      }), change2.position.x = Math.max(0, change2.position.x), change2.position.y = Math.max(0, change2.position.y)), changes.push(change2);
+      }), change.position.x = Math.max(0, change.position.x), change.position.y = Math.max(0, change.position.y)), changes.push(change);
     }
     if (parentExpandChildren.length > 0) {
       const { nodeLookup, parentLookup } = get2(), parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
@@ -25495,22 +25497,22 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
             nodeOrigin
           };
         },
-        onChange: (change2, childChanges) => {
-          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState(), changes = [], nextPosition = { x: change2.x, y: change2.y }, node = nodeLookup.get(id2);
+        onChange: (change, childChanges) => {
+          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState(), changes = [], nextPosition = { x: change.x, y: change.y }, node = nodeLookup.get(id2);
           if (node && node.expandParent && node.parentId) {
             const child = {
               id: node.id,
               parentId: node.parentId,
               rect: {
-                width: change2.width ?? node.measured.width,
-                height: change2.height ?? node.measured.height,
+                width: change.width ?? node.measured.width,
+                height: change.height ?? node.measured.height,
                 ...evaluateAbsolutePosition({
-                  x: change2.x ?? node.position.x,
-                  y: change2.y ?? node.position.y
+                  x: change.x ?? node.position.x,
+                  y: change.y ?? node.position.y
                 }, node.parentId, nodeLookup, node.origin ?? nodeOrigin)
               }
             }, parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
-            changes.push(...parentExpandChanges), nextPosition.x = change2.x ? Math.max(0, change2.x) : void 0, nextPosition.y = change2.y ? Math.max(0, change2.y) : void 0;
+            changes.push(...parentExpandChanges), nextPosition.x = change.x ? Math.max(0, change.x) : void 0, nextPosition.y = change.y ? Math.max(0, change.y) : void 0;
           }
           if (nextPosition.x !== void 0 && nextPosition.y !== void 0) {
             const positionChange = {
@@ -25520,15 +25522,15 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
             };
             changes.push(positionChange);
           }
-          if (change2.width !== void 0 && change2.height !== void 0) {
+          if (change.width !== void 0 && change.height !== void 0) {
             const dimensionChange = {
               id: id2,
               type: "dimensions",
               resizing: !0,
               setAttributes: !0,
               dimensions: {
-                width: change2.width,
-                height: change2.height
+                width: change.width,
+                height: change.height
               }
             };
             changes.push(dimensionChange);
@@ -25601,7 +25603,30 @@ function clsx() {
     (e2 = arguments[f2]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
   return n2;
 }
-var cssReactFlow = "_17jps3v0", cssDisablePan = "_17jps3v1", cssTransparentBg = "_17jps3v2", cssNoControls = "_17jps3v3";
+var keepAspectRatioContainer = "_17jps3v0", cssReactFlow = "_17jps3v1", cssDisablePan = "_17jps3v2", cssTransparentBg = "_17jps3v3", cssNoControls = "_17jps3v4";
+function KeepAspectRatioContainer({
+  children: children2,
+  width,
+  height,
+  enabled,
+  className,
+  style: style2,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box$1,
+    {
+      ...rest,
+      className: clsx(keepAspectRatioContainer, className),
+      style: enabled ? {
+        ...style2,
+        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
+        maxHeight: Math.ceil(height)
+      } : style2,
+      children: children2
+    }
+  );
+}
 function EnsureMantine({ children: children2 }) {
   if (!reactExports.useContext(MantineContext))
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
@@ -25916,10 +25941,6 @@ function useUpdateEffect$1(effect, deps) {
   const isFirstMount = useFirstMountState();
   reactExports.useEffect(isFirstMount ? noop$2 : effect, deps);
 }
-function useDebouncedState(initialState2, delay2, maxWait = 0) {
-  const [state, setState] = reactExports.useState(initialState2);
-  return [state, useDebouncedCallback(setState, [], delay2, maxWait)];
-}
 const noop$1 = () => {
 };
 function useUpdateEffect(callback, deps, equalityFn, effectHook) {
@@ -26067,396 +26088,6 @@ const blue$1 = {
   font: "Helvetica",
   shadow: "#0a0a0a"
 };
-var safeStableStringify = { exports: {} };
-(function(module, exports) {
-  const { hasOwnProperty: hasOwnProperty2 } = Object.prototype, stringify = configure();
-  stringify.configure = configure, stringify.stringify = stringify, stringify.default = stringify, exports.stringify = stringify, exports.configure = configure, module.exports = stringify;
-  const strEscapeSequencesRegExp = /[\u0000-\u001f\u0022\u005c\ud800-\udfff]|[\ud800-\udbff](?![\udc00-\udfff])|(?:[^\ud800-\udbff]|^)[\udc00-\udfff]/;
-  function strEscape(str) {
-    return str.length < 5e3 && !strEscapeSequencesRegExp.test(str) ? `"${str}"` : JSON.stringify(str);
-  }
-  function insertSort(array2) {
-    if (array2.length > 200)
-      return array2.sort();
-    for (let i2 = 1; i2 < array2.length; i2++) {
-      const currentValue = array2[i2];
-      let position = i2;
-      for (; position !== 0 && array2[position - 1] > currentValue; )
-        array2[position] = array2[position - 1], position--;
-      array2[position] = currentValue;
-    }
-    return array2;
-  }
-  const typedArrayPrototypeGetSymbolToStringTag = Object.getOwnPropertyDescriptor(
-    Object.getPrototypeOf(
-      Object.getPrototypeOf(
-        new Int8Array()
-      )
-    ),
-    Symbol.toStringTag
-  ).get;
-  function isTypedArrayWithEntries(value) {
-    return typedArrayPrototypeGetSymbolToStringTag.call(value) !== void 0 && value.length !== 0;
-  }
-  function stringifyTypedArray(array2, separator, maximumBreadth) {
-    array2.length < maximumBreadth && (maximumBreadth = array2.length);
-    const whitespace = separator === "," ? "" : " ";
-    let res = `"0":${whitespace}${array2[0]}`;
-    for (let i2 = 1; i2 < maximumBreadth; i2++)
-      res += `${separator}"${i2}":${whitespace}${array2[i2]}`;
-    return res;
-  }
-  function getCircularValueOption(options) {
-    if (hasOwnProperty2.call(options, "circularValue")) {
-      const circularValue = options.circularValue;
-      if (typeof circularValue == "string")
-        return `"${circularValue}"`;
-      if (circularValue == null)
-        return circularValue;
-      if (circularValue === Error || circularValue === TypeError)
-        return {
-          toString() {
-            throw new TypeError("Converting circular structure to JSON");
-          }
-        };
-      throw new TypeError('The "circularValue" argument must be of type string or the value null or undefined');
-    }
-    return '"[Circular]"';
-  }
-  function getBooleanOption(options, key) {
-    let value;
-    if (hasOwnProperty2.call(options, key) && (value = options[key], typeof value != "boolean"))
-      throw new TypeError(`The "${key}" argument must be of type boolean`);
-    return value === void 0 ? !0 : value;
-  }
-  function getPositiveIntegerOption(options, key) {
-    let value;
-    if (hasOwnProperty2.call(options, key)) {
-      if (value = options[key], typeof value != "number")
-        throw new TypeError(`The "${key}" argument must be of type number`);
-      if (!Number.isInteger(value))
-        throw new TypeError(`The "${key}" argument must be an integer`);
-      if (value < 1)
-        throw new RangeError(`The "${key}" argument must be >= 1`);
-    }
-    return value === void 0 ? 1 / 0 : value;
-  }
-  function getItemCount(number2) {
-    return number2 === 1 ? "1 item" : `${number2} items`;
-  }
-  function getUniqueReplacerSet(replacerArray) {
-    const replacerSet = /* @__PURE__ */ new Set();
-    for (const value of replacerArray)
-      (typeof value == "string" || typeof value == "number") && replacerSet.add(String(value));
-    return replacerSet;
-  }
-  function getStrictOption(options) {
-    if (hasOwnProperty2.call(options, "strict")) {
-      const value = options.strict;
-      if (typeof value != "boolean")
-        throw new TypeError('The "strict" argument must be of type boolean');
-      if (value)
-        return (value2) => {
-          let message = `Object can not safely be stringified. Received type ${typeof value2}`;
-          throw typeof value2 != "function" && (message += ` (${value2.toString()})`), new Error(message);
-        };
-    }
-  }
-  function configure(options) {
-    options = { ...options };
-    const fail = getStrictOption(options);
-    fail && (options.bigint === void 0 && (options.bigint = !1), "circularValue" in options || (options.circularValue = Error));
-    const circularValue = getCircularValueOption(options), bigint = getBooleanOption(options, "bigint"), deterministic = getBooleanOption(options, "deterministic"), maximumDepth = getPositiveIntegerOption(options, "maximumDepth"), maximumBreadth = getPositiveIntegerOption(options, "maximumBreadth");
-    function stringifyFnReplacer(key, parent, stack, replacer, spacer, indentation) {
-      let value = parent[key];
-      switch (typeof value == "object" && value !== null && typeof value.toJSON == "function" && (value = value.toJSON(key)), value = replacer.call(parent, key, value), typeof value) {
-        case "string":
-          return strEscape(value);
-        case "object": {
-          if (value === null)
-            return "null";
-          if (stack.indexOf(value) !== -1)
-            return circularValue;
-          let res = "", join = ",";
-          const originalIndentation = indentation;
-          if (Array.isArray(value)) {
-            if (value.length === 0)
-              return "[]";
-            if (maximumDepth < stack.length + 1)
-              return '"[Array]"';
-            stack.push(value), spacer !== "" && (indentation += spacer, res += `
-${indentation}`, join = `,
-${indentation}`);
-            const maximumValuesToStringify = Math.min(value.length, maximumBreadth);
-            let i2 = 0;
-            for (; i2 < maximumValuesToStringify - 1; i2++) {
-              const tmp2 = stringifyFnReplacer(String(i2), value, stack, replacer, spacer, indentation);
-              res += tmp2 !== void 0 ? tmp2 : "null", res += join;
-            }
-            const tmp = stringifyFnReplacer(String(i2), value, stack, replacer, spacer, indentation);
-            if (res += tmp !== void 0 ? tmp : "null", value.length - 1 > maximumBreadth) {
-              const removedKeys = value.length - maximumBreadth - 1;
-              res += `${join}"... ${getItemCount(removedKeys)} not stringified"`;
-            }
-            return spacer !== "" && (res += `
-${originalIndentation}`), stack.pop(), `[${res}]`;
-          }
-          let keys2 = Object.keys(value);
-          const keyLength = keys2.length;
-          if (keyLength === 0)
-            return "{}";
-          if (maximumDepth < stack.length + 1)
-            return '"[Object]"';
-          let whitespace = "", separator = "";
-          spacer !== "" && (indentation += spacer, join = `,
-${indentation}`, whitespace = " ");
-          const maximumPropertiesToStringify = Math.min(keyLength, maximumBreadth);
-          deterministic && !isTypedArrayWithEntries(value) && (keys2 = insertSort(keys2)), stack.push(value);
-          for (let i2 = 0; i2 < maximumPropertiesToStringify; i2++) {
-            const key2 = keys2[i2], tmp = stringifyFnReplacer(key2, value, stack, replacer, spacer, indentation);
-            tmp !== void 0 && (res += `${separator}${strEscape(key2)}:${whitespace}${tmp}`, separator = join);
-          }
-          if (keyLength > maximumBreadth) {
-            const removedKeys = keyLength - maximumBreadth;
-            res += `${separator}"...":${whitespace}"${getItemCount(removedKeys)} not stringified"`, separator = join;
-          }
-          return spacer !== "" && separator.length > 1 && (res = `
-${indentation}${res}
-${originalIndentation}`), stack.pop(), `{${res}}`;
-        }
-        case "number":
-          return isFinite(value) ? String(value) : fail ? fail(value) : "null";
-        case "boolean":
-          return value === !0 ? "true" : "false";
-        case "undefined":
-          return;
-        case "bigint":
-          if (bigint)
-            return String(value);
-        default:
-          return fail ? fail(value) : void 0;
-      }
-    }
-    function stringifyArrayReplacer(key, value, stack, replacer, spacer, indentation) {
-      switch (typeof value == "object" && value !== null && typeof value.toJSON == "function" && (value = value.toJSON(key)), typeof value) {
-        case "string":
-          return strEscape(value);
-        case "object": {
-          if (value === null)
-            return "null";
-          if (stack.indexOf(value) !== -1)
-            return circularValue;
-          const originalIndentation = indentation;
-          let res = "", join = ",";
-          if (Array.isArray(value)) {
-            if (value.length === 0)
-              return "[]";
-            if (maximumDepth < stack.length + 1)
-              return '"[Array]"';
-            stack.push(value), spacer !== "" && (indentation += spacer, res += `
-${indentation}`, join = `,
-${indentation}`);
-            const maximumValuesToStringify = Math.min(value.length, maximumBreadth);
-            let i2 = 0;
-            for (; i2 < maximumValuesToStringify - 1; i2++) {
-              const tmp2 = stringifyArrayReplacer(String(i2), value[i2], stack, replacer, spacer, indentation);
-              res += tmp2 !== void 0 ? tmp2 : "null", res += join;
-            }
-            const tmp = stringifyArrayReplacer(String(i2), value[i2], stack, replacer, spacer, indentation);
-            if (res += tmp !== void 0 ? tmp : "null", value.length - 1 > maximumBreadth) {
-              const removedKeys = value.length - maximumBreadth - 1;
-              res += `${join}"... ${getItemCount(removedKeys)} not stringified"`;
-            }
-            return spacer !== "" && (res += `
-${originalIndentation}`), stack.pop(), `[${res}]`;
-          }
-          stack.push(value);
-          let whitespace = "";
-          spacer !== "" && (indentation += spacer, join = `,
-${indentation}`, whitespace = " ");
-          let separator = "";
-          for (const key2 of replacer) {
-            const tmp = stringifyArrayReplacer(key2, value[key2], stack, replacer, spacer, indentation);
-            tmp !== void 0 && (res += `${separator}${strEscape(key2)}:${whitespace}${tmp}`, separator = join);
-          }
-          return spacer !== "" && separator.length > 1 && (res = `
-${indentation}${res}
-${originalIndentation}`), stack.pop(), `{${res}}`;
-        }
-        case "number":
-          return isFinite(value) ? String(value) : fail ? fail(value) : "null";
-        case "boolean":
-          return value === !0 ? "true" : "false";
-        case "undefined":
-          return;
-        case "bigint":
-          if (bigint)
-            return String(value);
-        default:
-          return fail ? fail(value) : void 0;
-      }
-    }
-    function stringifyIndent(key, value, stack, spacer, indentation) {
-      switch (typeof value) {
-        case "string":
-          return strEscape(value);
-        case "object": {
-          if (value === null)
-            return "null";
-          if (typeof value.toJSON == "function") {
-            if (value = value.toJSON(key), typeof value != "object")
-              return stringifyIndent(key, value, stack, spacer, indentation);
-            if (value === null)
-              return "null";
-          }
-          if (stack.indexOf(value) !== -1)
-            return circularValue;
-          const originalIndentation = indentation;
-          if (Array.isArray(value)) {
-            if (value.length === 0)
-              return "[]";
-            if (maximumDepth < stack.length + 1)
-              return '"[Array]"';
-            stack.push(value), indentation += spacer;
-            let res2 = `
-${indentation}`;
-            const join2 = `,
-${indentation}`, maximumValuesToStringify = Math.min(value.length, maximumBreadth);
-            let i2 = 0;
-            for (; i2 < maximumValuesToStringify - 1; i2++) {
-              const tmp2 = stringifyIndent(String(i2), value[i2], stack, spacer, indentation);
-              res2 += tmp2 !== void 0 ? tmp2 : "null", res2 += join2;
-            }
-            const tmp = stringifyIndent(String(i2), value[i2], stack, spacer, indentation);
-            if (res2 += tmp !== void 0 ? tmp : "null", value.length - 1 > maximumBreadth) {
-              const removedKeys = value.length - maximumBreadth - 1;
-              res2 += `${join2}"... ${getItemCount(removedKeys)} not stringified"`;
-            }
-            return res2 += `
-${originalIndentation}`, stack.pop(), `[${res2}]`;
-          }
-          let keys2 = Object.keys(value);
-          const keyLength = keys2.length;
-          if (keyLength === 0)
-            return "{}";
-          if (maximumDepth < stack.length + 1)
-            return '"[Object]"';
-          indentation += spacer;
-          const join = `,
-${indentation}`;
-          let res = "", separator = "", maximumPropertiesToStringify = Math.min(keyLength, maximumBreadth);
-          isTypedArrayWithEntries(value) && (res += stringifyTypedArray(value, join, maximumBreadth), keys2 = keys2.slice(value.length), maximumPropertiesToStringify -= value.length, separator = join), deterministic && (keys2 = insertSort(keys2)), stack.push(value);
-          for (let i2 = 0; i2 < maximumPropertiesToStringify; i2++) {
-            const key2 = keys2[i2], tmp = stringifyIndent(key2, value[key2], stack, spacer, indentation);
-            tmp !== void 0 && (res += `${separator}${strEscape(key2)}: ${tmp}`, separator = join);
-          }
-          if (keyLength > maximumBreadth) {
-            const removedKeys = keyLength - maximumBreadth;
-            res += `${separator}"...": "${getItemCount(removedKeys)} not stringified"`, separator = join;
-          }
-          return separator !== "" && (res = `
-${indentation}${res}
-${originalIndentation}`), stack.pop(), `{${res}}`;
-        }
-        case "number":
-          return isFinite(value) ? String(value) : fail ? fail(value) : "null";
-        case "boolean":
-          return value === !0 ? "true" : "false";
-        case "undefined":
-          return;
-        case "bigint":
-          if (bigint)
-            return String(value);
-        default:
-          return fail ? fail(value) : void 0;
-      }
-    }
-    function stringifySimple(key, value, stack) {
-      switch (typeof value) {
-        case "string":
-          return strEscape(value);
-        case "object": {
-          if (value === null)
-            return "null";
-          if (typeof value.toJSON == "function") {
-            if (value = value.toJSON(key), typeof value != "object")
-              return stringifySimple(key, value, stack);
-            if (value === null)
-              return "null";
-          }
-          if (stack.indexOf(value) !== -1)
-            return circularValue;
-          let res = "";
-          if (Array.isArray(value)) {
-            if (value.length === 0)
-              return "[]";
-            if (maximumDepth < stack.length + 1)
-              return '"[Array]"';
-            stack.push(value);
-            const maximumValuesToStringify = Math.min(value.length, maximumBreadth);
-            let i2 = 0;
-            for (; i2 < maximumValuesToStringify - 1; i2++) {
-              const tmp2 = stringifySimple(String(i2), value[i2], stack);
-              res += tmp2 !== void 0 ? tmp2 : "null", res += ",";
-            }
-            const tmp = stringifySimple(String(i2), value[i2], stack);
-            if (res += tmp !== void 0 ? tmp : "null", value.length - 1 > maximumBreadth) {
-              const removedKeys = value.length - maximumBreadth - 1;
-              res += `,"... ${getItemCount(removedKeys)} not stringified"`;
-            }
-            return stack.pop(), `[${res}]`;
-          }
-          let keys2 = Object.keys(value);
-          const keyLength = keys2.length;
-          if (keyLength === 0)
-            return "{}";
-          if (maximumDepth < stack.length + 1)
-            return '"[Object]"';
-          let separator = "", maximumPropertiesToStringify = Math.min(keyLength, maximumBreadth);
-          isTypedArrayWithEntries(value) && (res += stringifyTypedArray(value, ",", maximumBreadth), keys2 = keys2.slice(value.length), maximumPropertiesToStringify -= value.length, separator = ","), deterministic && (keys2 = insertSort(keys2)), stack.push(value);
-          for (let i2 = 0; i2 < maximumPropertiesToStringify; i2++) {
-            const key2 = keys2[i2], tmp = stringifySimple(key2, value[key2], stack);
-            tmp !== void 0 && (res += `${separator}${strEscape(key2)}:${tmp}`, separator = ",");
-          }
-          if (keyLength > maximumBreadth) {
-            const removedKeys = keyLength - maximumBreadth;
-            res += `${separator}"...":"${getItemCount(removedKeys)} not stringified"`;
-          }
-          return stack.pop(), `{${res}}`;
-        }
-        case "number":
-          return isFinite(value) ? String(value) : fail ? fail(value) : "null";
-        case "boolean":
-          return value === !0 ? "true" : "false";
-        case "undefined":
-          return;
-        case "bigint":
-          if (bigint)
-            return String(value);
-        default:
-          return fail ? fail(value) : void 0;
-      }
-    }
-    function stringify2(value, replacer, space) {
-      if (arguments.length > 1) {
-        let spacer = "";
-        if (typeof space == "number" ? spacer = " ".repeat(Math.min(space, 10)) : typeof space == "string" && (spacer = space.slice(0, 10)), replacer != null) {
-          if (typeof replacer == "function")
-            return stringifyFnReplacer("", { "": value }, [], replacer, spacer, "");
-          if (Array.isArray(replacer))
-            return stringifyArrayReplacer("", value, [], getUniqueReplacerSet(replacer), spacer, "");
-        }
-        if (spacer.length !== 0)
-          return stringifyIndent("", value, [], spacer, "");
-      }
-      return stringifySimple("", value, []);
-    }
-    return stringify2;
-  }
-})(safeStableStringify, safeStableStringify.exports);
-var safeStableStringifyExports = safeStableStringify.exports;
-const cjsModule = /* @__PURE__ */ getDefaultExportFromCjs(safeStableStringifyExports);
-cjsModule.configure;
 function fixProto(target, prototype) {
   var setPrototypeOf = Object.setPrototypeOf;
   setPrototypeOf ? setPrototypeOf(target, prototype) : target.__proto__ = prototype;
@@ -26665,8 +26296,7 @@ class NonExhaustiveError extends BaseError {
   }
 }
 function nonexhaustive(value) {
-  const val = typeof value == "string" ? value : cjsModule(value);
-  throw new NonExhaustiveError(`NonExhaustive value: ${val}`);
+  throw new NonExhaustiveError(`NonExhaustive value: ${value}`);
 }
 const ElementShapes = [
   "rectangle",
@@ -27266,9 +26896,9 @@ class Solver {
    * Update the values of the variables.
    */
   updateVariables() {
-    let vars2 = this._varMap, rows = this._rowMap;
-    for (let i2 = 0, n2 = vars2.size(); i2 < n2; ++i2) {
-      let pair = vars2.itemAt(i2), rowPair = rows.find(pair.second);
+    let vars = this._varMap, rows = this._rowMap;
+    for (let i2 = 0, n2 = vars.size(); i2 < n2; ++i2) {
+      let pair = vars.itemAt(i2), rowPair = rows.find(pair.second);
       rowPair !== void 0 ? pair.first.setValue(rowPair.second.constant()) : pair.first.setValue(0);
     }
   }
@@ -28165,6 +27795,7 @@ const trackedConnections = /* @__PURE__ */ new Map(), getTrackedConnectionState
   initialized: !1,
   previousViews: [],
   viewportChanged: !1,
+  focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
@@ -28194,6 +27825,7 @@ function createDiagramStore(props) {
               view: currentView,
               lastOnNavigate,
               previousViews,
+              focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               hoveredEdgeId,
@@ -28201,7 +27833,7 @@ function createDiagramStore(props) {
             } = get2();
             if (shallowEqual(currentView, view))
               return;
-            lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id && (lastOnNavigate = null), currentView.id === view.id ? (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId) && (hoveredNodeId = null), lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId) && (hoveredEdgeId = null)) : (lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, previousViews = [
+            lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id && (lastOnNavigate = null), currentView.id === view.id ? (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !containsWithId(view.nodes, focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId) && (hoveredEdgeId = null)) : (lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, previousViews = [
               currentView,
               ...previousViews.filter((v2) => v2.id !== view.id && v2.id !== currentView.id)
             ]), set2(
@@ -28211,6 +27843,7 @@ function createDiagramStore(props) {
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
+                focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId
               },
@@ -28236,18 +27869,18 @@ function createDiagramStore(props) {
           },
           triggerOnChange: (changes) => {
             const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map();
-            for (const change2 of changes) {
-              if (change2.op === "change-shape") {
-                for (const target of change2.targets)
-                  newShapes.set(target, change2.shape);
+            for (const change of changes) {
+              if (change.op === "change-shape") {
+                for (const target of change.targets)
+                  newShapes.set(target, change.shape);
                 continue;
               }
-              if (change2.op === "change-color") {
-                for (const target of change2.targets)
-                  newColor.set(target, change2.color);
+              if (change.op === "change-color") {
+                for (const target of change.targets)
+                  newColor.set(target, change.color);
                 continue;
               }
-              nonexhaustive(change2);
+              nonexhaustive(change);
             }
             get2().xyflow.setNodes(
               (nodes) => nodes.map((node) => {
@@ -28304,15 +27937,16 @@ function createDiagramStore(props) {
               xynode.internals.userNode
             );
           },
-          fitDiagram: () => {
-            const { fitViewPadding, xyflow } = get2();
+          fitDiagram: (centerNode) => {
+            const { fitViewPadding, xyflow, focusedNodeId } = get2();
             xyflow.fitView({
               includeHiddenNodes: !0,
-              duration: 400,
-              padding: fitViewPadding,
+              duration: centerNode && focusedNodeId ? 300 : 400,
+              padding: centerNode ? 0 : fitViewPadding,
               minZoom: MinZoom,
-              maxZoom: 1
-            });
+              maxZoom: 1,
+              ...centerNode && { nodes: [centerNode] }
+            }), centerNode && focusedNodeId !== centerNode.id && set2({ focusedNodeId: centerNode.id }, noReplace, "focus node"), !centerNode && focusedNodeId && set2({ focusedNodeId: null }, noReplace, "unfocus");
           }
         }),
         {
@@ -28343,30 +27977,6 @@ function DiagramContextProvider({ children: children2, view, ...props }) {
     [props]
   ), /* @__PURE__ */ jsxRuntimeExports.jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
-var wrapper = "fe2aoi0";
-function KeepAspectRatio({
-  children: children2,
-  width,
-  height,
-  enabled,
-  className,
-  style: style2,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Box$1,
-    {
-      ...rest,
-      className: clsx(wrapper, className),
-      style: enabled ? {
-        ...style2,
-        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-        maxHeight: Math.ceil(height)
-      } : style2,
-      children: children2
-    }
-  );
-}
 const MotionConfigContext = reactExports.createContext({
   transformPagePoint: (p2) => p2,
   isStatic: !1,
@@ -28708,17 +28318,17 @@ const checkStringStartsWith = (token) => (key) => typeof key == "string" && key.
 }, alpha = {
   ...number,
   transform: (v2) => clamp(0, 1, v2)
-}, scale$2 = {
+}, scale = {
   ...number,
   default: 1
 }, sanitize = (v2) => Math.round(v2 * 1e5) / 1e5, floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu, colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu, singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
 function isString(v2) {
   return typeof v2 == "string";
 }
-const createUnitType = (unit2) => ({
-  test: (v2) => isString(v2) && v2.endsWith(unit2) && v2.split(" ").length === 1,
+const createUnitType = (unit) => ({
+  test: (v2) => isString(v2) && v2.endsWith(unit) && v2.split(" ").length === 1,
   parse: parseFloat,
-  transform: (v2) => `${v2}${unit2}`
+  transform: (v2) => `${v2}${unit}`
 }), degrees = createUnitType("deg"), percent = createUnitType("%"), px = createUnitType("px"), vh = createUnitType("vh"), vw = createUnitType("vw"), progressPercentage = {
   ...percent,
   parse: (v2) => percent.parse(v2) / 100,
@@ -28765,10 +28375,10 @@ const createUnitType = (unit2) => ({
   rotateX: degrees,
   rotateY: degrees,
   rotateZ: degrees,
-  scale: scale$2,
-  scaleX: scale$2,
-  scaleY: scale$2,
-  scaleZ: scale$2,
+  scale,
+  scaleX: scale,
+  scaleY: scale,
+  scaleZ: scale,
   skew: degrees,
   skewX: degrees,
   skewY: degrees,
@@ -28795,12 +28405,12 @@ const createUnitType = (unit2) => ({
   numOctaves: int
 };
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-  const { style: style2, vars: vars2, transform: transform2, transformOrigin } = state;
+  const { style: style2, vars, transform: transform2, transformOrigin } = state;
   let hasTransform2 = !1, hasTransformOrigin = !1, transformIsNone = !0;
   for (const key in latestValues) {
     const value = latestValues[key];
     if (isCSSVariableName(key)) {
-      vars2[key] = value;
+      vars[key] = value;
       continue;
     }
     const valueType = numberValueTypes[key], valueAsType = getValueAsType(value, valueType);
@@ -28958,10 +28568,10 @@ function createUseRender(forwardMotionProps = !1) {
     });
   };
 }
-function renderHTML(element, { style: style2, vars: vars2 }, styleProp, projection) {
+function renderHTML(element, { style: style2, vars }, styleProp, projection) {
   Object.assign(element.style, style2, projection && projection.getProjectionStyles(styleProp));
-  for (const key in vars2)
-    element.style.setProperty(key, vars2[key]);
+  for (const key in vars)
+    element.style.setProperty(key, vars[key]);
 }
 const camelCaseAttributes = /* @__PURE__ */ new Set([
   "baseFrequency",
@@ -29009,8 +28619,22 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     }
   return newValues;
 }
-function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
-  return typeof definition == "function" && (definition = definition(custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)), typeof definition == "string" && (definition = props.variants && props.variants[definition]), typeof definition == "function" && (definition = definition(custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)), definition;
+function getValueState(visualElement) {
+  const state = [{}, {}];
+  return visualElement?.values.forEach((value, key) => {
+    state[0][key] = value.get(), state[1][key] = value.getVelocity();
+  }), state;
+}
+function resolveVariantFromProps(props, definition, custom, visualElement) {
+  if (typeof definition == "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  if (typeof definition == "string" && (definition = props.variants && props.variants[definition]), typeof definition == "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  return definition;
 }
 function useConstant(init2) {
   const ref = reactExports.useRef(null);
@@ -29154,7 +28778,7 @@ function addHoverEvent(node, isActive) {
     const props = node.getProps();
     node.animationState && props.whileHover && node.animationState.setActive("whileHover", isActive);
     const callback = props[callbackName];
-    callback && callback(event, info);
+    callback && frame.postRender(() => callback(event, info));
   };
   return addPointerEvent(node.current, eventName, handleEvent, {
     passive: !node.getProps()[callbackName]
@@ -29205,8 +28829,8 @@ class PressGesture extends Feature {
       const props = this.node.getProps(), removePointerUpListener = addPointerEvent(window, "pointerup", (endEvent, endInfo) => {
         if (!this.checkPressEnd())
           return;
-        const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();
-        !globalTapTarget && !isNodeOrChild(this.node.current, endEvent.target) ? onTapCancel && onTapCancel(endEvent, endInfo) : onTap && onTap(endEvent, endInfo);
+        const { onTap, onTapCancel, globalTapTarget } = this.node.getProps(), handler = !globalTapTarget && !isNodeOrChild(this.node.current, endEvent.target) ? onTapCancel : onTap;
+        handler && frame.update(() => handler(endEvent, endInfo));
       }, {
         passive: !(props.onTap || props.onPointerUp)
       }), removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {
@@ -29220,7 +28844,7 @@ class PressGesture extends Feature {
         const handleKeyup = (keyupEvent) => {
           keyupEvent.key !== "Enter" || !this.checkPressEnd() || fireSyntheticPointerEvent("up", (event, info) => {
             const { onTap } = this.node.getProps();
-            onTap && onTap(event, info);
+            onTap && frame.postRender(() => onTap(event, info));
           });
         };
         this.removeEndListeners(), this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup), fireSyntheticPointerEvent("down", (event, info) => {
@@ -29235,7 +28859,7 @@ class PressGesture extends Feature {
   startPress(event, info) {
     this.isPressing = !0;
     const { onTapStart, whileTap } = this.node.getProps();
-    whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !0), onTapStart && onTapStart(event, info);
+    whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !0), onTapStart && frame.postRender(() => onTapStart(event, info));
   }
   checkPressEnd() {
     return this.removeEndListeners(), this.isPressing = !1, this.node.getProps().whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !1), !isDragActive();
@@ -29244,7 +28868,7 @@ class PressGesture extends Feature {
     if (!this.checkPressEnd())
       return;
     const { onTapCancel } = this.node.getProps();
-    onTapCancel && onTapCancel(event, info);
+    onTapCancel && frame.postRender(() => onTapCancel(event, info));
   }
   mount() {
     const props = this.node.getProps(), removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, {
@@ -29338,17 +28962,9 @@ function shallowCompare(next, prev) {
       return !1;
   return !0;
 }
-function getCurrent(visualElement) {
-  const current = {};
-  return visualElement.values.forEach((value, key) => current[key] = value.get()), current;
-}
-function getVelocity$1(visualElement) {
-  const velocity = {};
-  return visualElement.values.forEach((value, key) => velocity[key] = value.getVelocity()), velocity;
-}
 function resolveVariant(visualElement, definition, custom) {
   const props = visualElement.getProps();
-  return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+  return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
 }
 const secondsToMilliseconds = (seconds) => seconds * 1e3, millisecondsToSeconds = (milliseconds) => milliseconds / 1e3, underDampedSpring = {
   type: "spring",
@@ -29619,9 +29235,9 @@ function applyDefaultFilter(v2) {
   const [number2] = value.match(floatRegex) || [];
   if (!number2)
     return v2;
-  const unit2 = value.replace(number2, "");
+  const unit = value.replace(number2, "");
   let defaultValue = maxDefaults.has(name) ? 1 : 0;
-  return number2 !== value && (defaultValue *= 100), name + "(" + defaultValue + unit2 + ")";
+  return number2 !== value && (defaultValue *= 100), name + "(" + defaultValue + unit + ")";
 }
 const functionRegex = /\b([a-z-]*)\(.*?\)/gu, filter = {
   ...complex,
@@ -29650,10 +29266,13 @@ function getAnimatableNone(key, value) {
   let defaultValueType = getDefaultValueType(key);
   return defaultValueType !== filter && (defaultValueType = complex), defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
 }
+const invalidTemplates = /* @__PURE__ */ new Set(["auto", "none", "0"]);
 function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
   let i2 = 0, animatableTemplate;
-  for (; i2 < unresolvedKeyframes.length && !animatableTemplate; )
-    typeof unresolvedKeyframes[i2] == "string" && unresolvedKeyframes[i2] !== "none" && unresolvedKeyframes[i2] !== "0" && (animatableTemplate = unresolvedKeyframes[i2]), i2++;
+  for (; i2 < unresolvedKeyframes.length && !animatableTemplate; ) {
+    const keyframe = unresolvedKeyframes[i2];
+    typeof keyframe == "string" && !invalidTemplates.has(keyframe) && analyseComplexValue(keyframe).values.length && (animatableTemplate = unresolvedKeyframes[i2]), i2++;
+  }
   if (animatableTemplate && name)
     for (const noneIndex of noneKeyframeIndexes)
       unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
@@ -29674,8 +29293,8 @@ class DOMKeyframesResolver extends KeyframeResolver {
         resolved !== void 0 && (unresolvedKeyframes[i2] = resolved), i2 === unresolvedKeyframes.length - 1 && (this.finalKeyframe = keyframe);
       }
     }
-    if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2)
-      return this.resolveNoneKeyframes();
+    if (this.resolveNoneKeyframes(), !positionalKeys.has(name) || unresolvedKeyframes.length !== 2)
+      return;
     const [origin, target] = unresolvedKeyframes, originType = findDimensionValueType(origin), targetType = findDimensionValueType(target);
     if (originType !== targetType)
       if (isNumOrPxType(originType) && isNumOrPxType(targetType))
@@ -29732,6 +29351,8 @@ function canAnimate(keyframes2, name, type, velocity) {
   const originKeyframe = keyframes2[0];
   if (originKeyframe === null)
     return !1;
+  if (name === "display" || name === "visibility")
+    return !0;
   const targetKeyframe = keyframes2[keyframes2.length - 1], isOriginAnimatable = isAnimatable(originKeyframe, name), isTargetAnimatable = isAnimatable(targetKeyframe, name);
   return !isOriginAnimatable || !isTargetAnimatable ? !1 : hasKeyframesChanged(keyframes2) || type === "spring" && velocity;
 }
@@ -30005,7 +29626,10 @@ function asRGBA(color2) {
 const mixColor = (from, to) => {
   const fromRGBA = asRGBA(from), toRGBA = asRGBA(to), blended = { ...fromRGBA };
   return (v2) => (blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v2), blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v2), blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v2), blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v2), rgba.transform(blended));
-};
+}, invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
+function mixVisibility(origin, target) {
+  return invisibleValues.has(origin) ? (p2) => p2 <= 0 ? origin : target : (p2) => p2 >= 1 ? target : origin;
+}
 function mixImmediate(a, b2) {
   return (p2) => p2 > 0 ? b2 : a;
 }
@@ -30044,7 +29668,7 @@ function matchOrder(origin, target) {
 }
 const mixComplex = (origin, target) => {
   const template = complex.createTransformer(target), originStats = analyseComplexValue(origin), targetStats = analyseComplexValue(target);
-  return originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length ? pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template) : mixImmediate(origin, target);
+  return originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length ? invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length ? mixVisibility(origin, target) : pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template) : mixImmediate(origin, target);
 };
 function mix(from, to, p2) {
   return typeof from == "number" && typeof to == "number" && typeof p2 == "number" ? mixNumber$1(from, to, p2) : getMixer(from)(from, to);
@@ -30550,13 +30174,13 @@ class MotionValue {
    * @internal
    */
   constructor(init2, options = {}) {
-    this.version = "11.1.7", this.canTrackVelocity = !1, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
+    this.version = "11.2.4", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v2), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
-    }, this.hasAnimated = !1, this.setCurrent(init2), this.canTrackVelocity = isFloat(this.current), this.owner = options.owner;
+    }, this.hasAnimated = !1, this.setCurrent(init2), this.owner = options.owner;
   }
   setCurrent(current) {
-    this.current = current, this.updatedAt = time.now();
+    this.current = current, this.updatedAt = time.now(), this.canTrackVelocity === null && current !== void 0 && (this.canTrackVelocity = isFloat(this.current));
   }
   setPrevFrameValue(prevFrameValue = this.current) {
     this.prevFrameValue = prevFrameValue, this.prevUpdatedAt = this.updatedAt;
@@ -30772,7 +30396,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     if (window.HandoffAppearAnimations) {
       const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
       if (appearId) {
-        const elapsed = window.HandoffAppearAnimations(appearId, key);
+        const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
         elapsed !== null && (valueTransition.elapsed = elapsed, isHandoff = !0);
       }
     }
@@ -31274,7 +30898,7 @@ class VisualElementDragControls {
           }
         }
         this.originPoint[axis] = current;
-      }), onDragStart && onDragStart(event, info);
+      }), onDragStart && frame.postRender(() => onDragStart(event, info));
       const { animationState } = this.visualElement;
       animationState && animationState.setActive("whileDrag", !0);
     }, onMove = (event, info) => {
@@ -31310,7 +30934,7 @@ class VisualElementDragControls {
     const { velocity } = info;
     this.startAnimation(velocity);
     const { onDragEnd } = this.getProps();
-    onDragEnd && onDragEnd(event, info);
+    onDragEnd && frame.postRender(() => onDragEnd(event, info));
   }
   cancel() {
     this.isDragging = !1;
@@ -31492,7 +31116,7 @@ class DragGesture extends Feature {
   }
 }
 const asyncHandler = (handler) => (event, info) => {
-  handler && handler(event, info);
+  handler && frame.postRender(() => handler(event, info));
 };
 class PanGesture extends Feature {
   constructor() {
@@ -31511,7 +31135,7 @@ class PanGesture extends Feature {
       onStart: asyncHandler(onPanStart),
       onMove: onPan,
       onEnd: (event, info) => {
-        delete this.session, onPanEnd && onPanEnd(event, info);
+        delete this.session, onPanEnd && frame.postRender(() => onPanEnd(event, info));
       }
     };
   }
@@ -32652,8 +32276,8 @@ class DOMVisualElement extends VisualElement {
   getBaseTargetFromProps(props, key) {
     return props.style ? props.style[key] : void 0;
   }
-  removeValueFromRenderState(key, { vars: vars2, style: style2 }) {
-    delete vars2[key], delete style2[key];
+  removeValueFromRenderState(key, { vars, style: style2 }) {
+    delete vars[key], delete style2[key];
   }
 }
 function getComputedStyle$1(element) {
@@ -33131,10 +32755,10 @@ function diagramViewToXYFlowData(view, opts) {
       initialHeight: node.height, */
       width: node.width,
       height: node.height,
-      measured: {
-        width: node.width,
-        height: node.height
-      },
+      // measured: {
+      //   width: node.width,
+      //   height: node.height
+      // },
       ...parent && {
         parentId: ns + parent.id
       }
@@ -33206,21 +32830,25 @@ function FitViewOnViewportResize({ diagramApi }) {
 }
 const diagramChangeId = (s2) => s2.view.id + "_" + s2.view.autoLayout + "_" + s2.fitViewPadding;
 function FitViewOnDiagramChanges() {
-  const diagramApi = useDiagramStoreApi(), [viewportMoved, setViewportMoved] = reactExports.useState(diagramApi.getState().viewportChanged), [processedChangeId, setProcessed] = reactExports.useState(diagramChangeId(diagramApi.getState())), [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100), isReady = useNodesInitialized({
+  const diagramApi = useDiagramStoreApi(), [viewportMoved, setViewportMoved] = reactExports.useState(diagramApi.getState().viewportChanged), [processedChangeId, setProcessed] = reactExports.useState(diagramChangeId(diagramApi.getState())), [pendingChangeId, setPending] = reactExports.useState(processedChangeId), isReady = useNodesInitialized({
     includeHiddenNodes: !0
-  });
+  }), schedulePending = useDebouncedCallback(
+    (pendingChangeId2) => {
+      setPending(pendingChangeId2);
+    },
+    [setPending],
+    75
+  );
   return reactExports.useEffect(
     () => diagramApi.subscribe(
-      (s2) => ({
-        viewportMoved: s2.viewportChanged,
-        changeid: diagramChangeId(s2)
-      }),
-      ({ viewportMoved: viewportMoved2, changeid }) => {
-        setPending(changeid), setViewportMoved(viewportMoved2);
-      },
-      {
-        equalityFn: shallowEqual
-      }
+      (s2) => diagramChangeId(s2),
+      schedulePending
+    ),
+    [diagramApi, schedulePending]
+  ), reactExports.useEffect(
+    () => diagramApi.subscribe(
+      (s2) => s2.viewportChanged,
+      setViewportMoved
     ),
     [diagramApi]
   ), useRafEffect(
@@ -33235,7 +32863,9 @@ function toDomPrecision(v2) {
   return v2 === null ? 0.01 : Math.round(v2 * 100) / 100;
 }
 const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object.is(a.parentId, b2.parentId), SyncWithDiagram = reactExports.memo(() => {
-  const xyflow = useXYFlow(), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
+  const _xyflow = useXYFlow(), xyflowRef = reactExports.useRef(_xyflow);
+  xyflowRef.current = _xyflow;
+  const xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
   return reactExports.useEffect(() => diagramStoreApi.subscribe(
     // selector
     (state) => ({
@@ -33248,7 +32878,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
     // listener
     ({ viewId, nodes, edges, ...opts }) => {
       const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
-      if (xyflow.setNodes(
+      if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
           return existing ? deepEqual(existing.data.element, update.data.element) ? existing : {
@@ -33256,7 +32886,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
             ...update
           } : update;
         })
-      ), xyflow.setEdges(
+      ), xyflowRef.current.setEdges(
         (prev) => updates.edges.map((update) => {
           const existing = prev.find((e2) => e2.id === update.id);
           return existing ? deepEqual(existing.data, update.data) ? existing : {
@@ -33264,19 +32894,20 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
             ...update
           } : update;
         })
-      ), lastOnNavigate?.toView === viewId && !lastOnNavigate.positionCorrected) {
+      ), lastOnNavigate?.toView === viewId && lastOnNavigate.positionCorrected !== !0) {
         const elFrom = lastOnNavigate.element, elTo = nodes.find((n2) => n2.id === elFrom.id);
         if (elTo) {
-          const centerFrom = lastOnNavigate.elementCenterScreenPosition, nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
+          const centerFrom = lastOnNavigate.elementCenterScreenPosition;
+          let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              const v2 = xyflow.getViewport();
-              nextZoom < v2.zoom && xyflow.setViewport({
+              const v2 = xyflowRef.current.getViewport();
+              nextZoom < v2.zoom && (nextZoom = Math.max(nextZoom, v2.zoom * 0.5), xyflowRef.current.setViewport({
                 x: v2.x,
                 y: v2.y,
                 zoom: nextZoom
-              });
-              const centerTo = xyflow.flowToScreenPosition({
+              }));
+              const centerTo = xyflowRef.current.flowToScreenPosition({
                 x: elTo.position[0] + elTo.width / 2,
                 y: elTo.position[1] + elTo.height / 2
               }), diff = {
@@ -33302,7 +32933,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
     {
       equalityFn: shallowEqual
     }
-  ), [xyflow, xyflowApi, diagramStoreApi]), null;
+  ), [xyflowApi, diagramStoreApi]), null;
 });
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
@@ -33349,7 +32980,7 @@ function assignInlineVars(varsOrContract, tokens) {
     writable: !1
   }), styles;
 }
-var container$1 = "yi2p6v0", edgePathBg = "yi2p6v1", fillStrokeCtx = "yi2p6v2", cssEdgePath = "yi2p6v3", varLabelX = "var(--yi2p6v4)", varLabelY = "var(--yi2p6v5)", edgeLabel = "yi2p6v7", edgeLabelBody = "yi2p6v8";
+var container$2 = "yi2p6v0", edgePathBg = "yi2p6v1", fillStrokeCtx = "yi2p6v2", cssEdgePath = "yi2p6v3", varLabelX = "var(--yi2p6v4)", varLabelY = "var(--yi2p6v5)", edgeLabel = "yi2p6v7", edgeLabelBody = "yi2p6v8";
 function getNodeIntersection(intersectionNode, targetNode) {
   const {
     width: intersectionNodeWidth,
@@ -33443,7 +33074,7 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
     });
     edgePath = _edgePath, labelX = _labelX, labelY = _labelY;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: clsx(container$1), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: clsx(container$2), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("g", { className: clsx(fillStrokeCtx), children: /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "marker",
       {
@@ -33473,7 +33104,7 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
     data.label && /* @__PURE__ */ jsxRuntimeExports.jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Box$1,
       {
-        className: clsx(container$1, edgeLabel),
+        className: clsx(container$2, edgeLabel),
         "data-likec4-color": color2,
         style: {
           ...assignInlineVars({
@@ -33529,475 +33160,7 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
       strokeWidth: interactionWidth
     }
   )
-] })), 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: (r2) => r2 >= 255 ? 255 : r2 < 0 ? 0 : r2,
-    g: (g2) => g2 >= 255 ? 255 : g2 < 0 ? 0 : g2,
-    b: (b2) => b2 >= 255 ? 255 : b2 < 0 ? 0 : b2,
-    h: (h2) => h2 % 360,
-    s: (s2) => s2 >= 100 ? 100 : s2 < 0 ? 0 : s2,
-    l: (l2) => l2 >= 100 ? 100 : l2 < 0 ? 0 : l2,
-    a: (a) => a >= 1 ? 1 : a < 0 ? 0 : a
-  },
-  /* CONVERSION */
-  //SOURCE: https://planetcalc.com/7779
-  toLinear: (c2) => {
-    const n2 = c2 / 255;
-    return c2 > 0.03928 ? Math.pow((n2 + 0.055) / 1.055, 2.4) : n2 / 12.92;
-  },
-  //SOURCE: https://gist.github.com/mjackson/5311256
-  hue2rgb: (p2, q2, t2) => (t2 < 0 && (t2 += 1), t2 > 1 && (t2 -= 1), t2 < 1 / 6 ? p2 + (q2 - p2) * 6 * t2 : t2 < 1 / 2 ? q2 : t2 < 2 / 3 ? p2 + (q2 - p2) * (2 / 3 - t2) * 6 : p2),
-  hsl2rgb: ({ h: h2, s: s2, l: l2 }, channel) => {
-    if (!s2)
-      return l2 * 2.55;
-    h2 /= 360, s2 /= 100, l2 /= 100;
-    const q2 = l2 < 0.5 ? l2 * (1 + s2) : l2 + s2 - l2 * s2, p2 = 2 * l2 - q2;
-    switch (channel) {
-      case "r":
-        return Channel.hue2rgb(p2, q2, h2 + 1 / 3) * 255;
-      case "g":
-        return Channel.hue2rgb(p2, q2, h2) * 255;
-      case "b":
-        return Channel.hue2rgb(p2, q2, h2 - 1 / 3) * 255;
-    }
-  },
-  rgb2hsl: ({ r: r2, g: g2, b: b2 }, channel) => {
-    r2 /= 255, g2 /= 255, b2 /= 255;
-    const max2 = Math.max(r2, g2, b2), min2 = Math.min(r2, g2, b2), l2 = (max2 + min2) / 2;
-    if (channel === "l")
-      return l2 * 100;
-    if (max2 === min2)
-      return 0;
-    const d2 = max2 - min2, s2 = l2 > 0.5 ? d2 / (2 - max2 - min2) : d2 / (max2 + min2);
-    if (channel === "s")
-      return s2 * 100;
-    switch (max2) {
-      case r2:
-        return ((g2 - b2) / d2 + (g2 < b2 ? 6 : 0)) * 60;
-      case g2:
-        return ((b2 - r2) / d2 + 2) * 60;
-      case b2:
-        return ((r2 - g2) / d2 + 4) * 60;
-      default:
-        return -1;
-    }
-  }
-}, Lang = {
-  /* API */
-  clamp: (number2, lower2, upper) => lower2 > upper ? Math.min(lower2, Math.max(upper, number2)) : Math.min(upper, Math.max(lower2, number2)),
-  round: (number2) => Math.round(number2 * 1e10) / 1e10
-}, lang = Lang, Unit = {
-  /* API */
-  dec2hex: (dec) => {
-    const hex2 = Math.round(dec).toString(16);
-    return hex2.length > 1 ? hex2 : `0${hex2}`;
-  }
-}, unit = Unit, Utils = {
-  channel: Channel,
-  lang,
-  unit
-}, DEC2HEX = {};
-for (let i2 = 0; i2 <= 255; i2++)
-  DEC2HEX[i2] = Utils.unit.dec2hex(i2);
-const TYPE = {
-  ALL: 0,
-  RGB: 1,
-  HSL: 2
-};
-class Type {
-  constructor() {
-    this.type = TYPE.ALL;
-  }
-  /* API */
-  get() {
-    return this.type;
-  }
-  set(type) {
-    if (this.type && this.type !== type)
-      throw new Error("Cannot change both RGB and HSL channels at the same time");
-    this.type = type;
-  }
-  reset() {
-    this.type = TYPE.ALL;
-  }
-  is(type) {
-    return this.type === type;
-  }
-}
-class Channels {
-  /* CONSTRUCTOR */
-  constructor(data, color2) {
-    this.color = color2, this.changed = !1, this.data = data, this.type = new Type();
-  }
-  /* API */
-  set(data, color2) {
-    return this.color = color2, this.changed = !1, this.data = data, this.type.type = TYPE.ALL, this;
-  }
-  /* HELPERS */
-  _ensureHSL() {
-    const data = this.data, { h: h2, s: s2, l: l2 } = data;
-    h2 === void 0 && (data.h = Utils.channel.rgb2hsl(data, "h")), s2 === void 0 && (data.s = Utils.channel.rgb2hsl(data, "s")), l2 === void 0 && (data.l = Utils.channel.rgb2hsl(data, "l"));
-  }
-  _ensureRGB() {
-    const data = this.data, { r: r2, g: g2, b: b2 } = data;
-    r2 === void 0 && (data.r = Utils.channel.hsl2rgb(data, "r")), g2 === void 0 && (data.g = Utils.channel.hsl2rgb(data, "g")), b2 === void 0 && (data.b = Utils.channel.hsl2rgb(data, "b"));
-  }
-  /* GETTERS */
-  get r() {
-    const data = this.data, r2 = data.r;
-    return !this.type.is(TYPE.HSL) && r2 !== void 0 ? r2 : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "r"));
-  }
-  get g() {
-    const data = this.data, g2 = data.g;
-    return !this.type.is(TYPE.HSL) && g2 !== void 0 ? g2 : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "g"));
-  }
-  get b() {
-    const data = this.data, b2 = data.b;
-    return !this.type.is(TYPE.HSL) && b2 !== void 0 ? b2 : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "b"));
-  }
-  get h() {
-    const data = this.data, h2 = data.h;
-    return !this.type.is(TYPE.RGB) && h2 !== void 0 ? h2 : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "h"));
-  }
-  get s() {
-    const data = this.data, s2 = data.s;
-    return !this.type.is(TYPE.RGB) && s2 !== void 0 ? s2 : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "s"));
-  }
-  get l() {
-    const data = this.data, l2 = data.l;
-    return !this.type.is(TYPE.RGB) && l2 !== void 0 ? l2 : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "l"));
-  }
-  get a() {
-    return this.data.a;
-  }
-  /* SETTERS */
-  set r(r2) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.r = r2;
-  }
-  set g(g2) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.g = g2;
-  }
-  set b(b2) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.b = b2;
-  }
-  set h(h2) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.h = h2;
-  }
-  set s(s2) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.s = s2;
-  }
-  set l(l2) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.l = l2;
-  }
-  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: (color2) => {
-    if (color2.charCodeAt(0) !== 35)
-      return;
-    const match = color2.match(Hex.re);
-    if (!match)
-      return;
-    const hex2 = match[1], dec = parseInt(hex2, 16), length = hex2.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
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { r: r2, g: g2, b: b2, a } = channels2;
-    return a < 1 ? `#${DEC2HEX[Math.round(r2)]}${DEC2HEX[Math.round(g2)]}${DEC2HEX[Math.round(b2)]}${DEC2HEX[Math.round(a * 255)]}` : `#${DEC2HEX[Math.round(r2)]}${DEC2HEX[Math.round(g2)]}${DEC2HEX[Math.round(b2)]}`;
-  }
-}, 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 [, number2, unit2] = match;
-      switch (unit2) {
-        case "grad":
-          return Utils.channel.clamp.h(parseFloat(number2) * 0.9);
-        case "rad":
-          return Utils.channel.clamp.h(parseFloat(number2) * 180 / Math.PI);
-        case "turn":
-          return Utils.channel.clamp.h(parseFloat(number2) * 360);
-      }
-    }
-    return Utils.channel.clamp.h(parseFloat(hue));
-  },
-  /* API */
-  parse: (color2) => {
-    const charCode = color2.charCodeAt(0);
-    if (charCode !== 104 && charCode !== 72)
-      return;
-    const match = color2.match(HSL.re);
-    if (!match)
-      return;
-    const [, h2, s2, l2, a, isAlphaPercentage] = match;
-    return channels.set({
-      h: HSL._hue2deg(h2),
-      s: Utils.channel.clamp.s(parseFloat(s2)),
-      l: Utils.channel.clamp.l(parseFloat(l2)),
-      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { h: h2, s: s2, l: l2, a } = channels2;
-    return a < 1 ? `hsla(${Utils.lang.round(h2)}, ${Utils.lang.round(s2)}%, ${Utils.lang.round(l2)}%, ${a})` : `hsl(${Utils.lang.round(h2)}, ${Utils.lang.round(s2)}%, ${Utils.lang.round(l2)}%)`;
-  }
-}, 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: (color2) => {
-    color2 = color2.toLowerCase();
-    const hex2 = Keyword.colors[color2];
-    if (hex2)
-      return Hex.parse(hex2);
-  },
-  stringify: (channels2) => {
-    const hex2 = Hex.stringify(channels2);
-    for (const name in Keyword.colors)
-      if (Keyword.colors[name] === hex2)
-        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: (color2) => {
-    const charCode = color2.charCodeAt(0);
-    if (charCode !== 114 && charCode !== 82)
-      return;
-    const match = color2.match(RGB.re);
-    if (!match)
-      return;
-    const [, r2, isRedPercentage, g2, isGreenPercentage, b2, isBluePercentage, a, isAlphaPercentage] = match;
-    return channels.set({
-      r: Utils.channel.clamp.r(isRedPercentage ? parseFloat(r2) * 2.55 : parseFloat(r2)),
-      g: Utils.channel.clamp.g(isGreenPercentage ? parseFloat(g2) * 2.55 : parseFloat(g2)),
-      b: Utils.channel.clamp.b(isBluePercentage ? parseFloat(b2) * 2.55 : parseFloat(b2)),
-      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { r: r2, g: g2, b: b2, a } = channels2;
-    return a < 1 ? `rgba(${Utils.lang.round(r2)}, ${Utils.lang.round(g2)}, ${Utils.lang.round(b2)}, ${Utils.lang.round(a)})` : `rgb(${Utils.lang.round(r2)}, ${Utils.lang.round(g2)}, ${Utils.lang.round(b2)})`;
-  }
-}, Color = {
-  /* VARIABLES */
-  format: {
-    keyword: Keyword,
-    hex: Hex,
-    rgb: RGB,
-    rgba: RGB,
-    hsl: HSL,
-    hsla: HSL
-  },
-  /* API */
-  parse: (color2) => {
-    if (typeof color2 != "string")
-      return color2;
-    const channels2 = Hex.parse(color2) || RGB.parse(color2) || HSL.parse(color2) || Keyword.parse(color2);
-    if (channels2)
-      return channels2;
-    throw new Error(`Unsupported color format: "${color2}"`);
-  },
-  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 = (color2, channels2) => {
-  const ch2 = Color.parse(color2);
-  for (const c2 in channels2)
-    ch2[c2] = Utils.channel.clamp[c2](channels2[c2]);
-  return Color.stringify(ch2);
-}, change$1 = change, toHex = (color2) => Color.format.hex.stringify(Color.parse(color2)), adjust = (color2, channels2) => {
-  const ch2 = Color.parse(color2), changes = {};
-  for (const c2 in channels2)
-    channels2[c2] && (changes[c2] = ch2[c2] + channels2[c2]);
-  return change$1(color2, changes);
-}, adjust$1 = adjust, scale = (color2, channels2) => {
-  const ch2 = Color.parse(color2), adjustments = {}, delta = (amount, weight, max2) => weight > 0 ? (max2 - amount) * weight / 100 : amount * weight / 100;
-  for (const c2 in channels2)
-    adjustments[c2] = delta(ch2[c2], channels2[c2], Utils.channel.max[c2]);
-  return adjust$1(color2, adjustments);
-}, scale$1 = scale;
-var vars = { default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" } };
-const Link = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+] })), Link = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "svg",
   {
     ref,
@@ -34051,48 +33214,45 @@ function NavigateToBtn({ xynodeId, className }) {
       className: clsx("nodrag nopan", className),
       radius: "xl",
       onClick: (event) => {
-        diagramApi.getState().triggerOnNavigateTo(xynodeId, event), event.stopPropagation();
+        event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
+      onDoubleClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(ZoomIn, {})
     }
   );
 }
-var cssContainer = "c3cfh00", cssCompound = "c3cfh02", cssTitle = "c3cfh04", cssIndicator = "c3cfh06", cssNavigateBtn$1 = "c3cfh07";
-const compoundColor = (color2, depth) => toHex(
-  scale$1(color2, {
-    l: -35 - 5 * depth,
-    s: -15 - 5 * depth
-  })
-), CompoundNodeMemo = /* @__PURE__ */ reactExports.memo(function({
+var container$1 = "c3cfh00", varTransparency = "var(--c3cfh01)", compoundBody = "c3cfh02", transparent = "c3cfh05", title$1 = "c3cfh06", indicator$1 = "c3cfh0a", navigateBtn = "c3cfh0c";
+const CompoundNodeMemo = /* @__PURE__ */ reactExports.memo(function({
   id: id2,
   data: {
     element
   }
 }) {
-  const { color: color2, depth = 0, ...compound } = element, colors2 = reactExports.useMemo(() => {
-    const colors22 = defaultTheme.elements[color2];
-    return {
-      fill: compoundColor(colors22.fill, depth),
-      stroke: compoundColor(colors22.stroke, depth)
-    };
-  }, [color2, depth]), { isHovered, hasOnNavigateTo } = useDiagramState((s2) => ({
+  const { color: color2, style: style2, depth = 1, ...compound } = element, opacity = style2.opacity ?? 100, { isHovered, hasOnNavigateTo } = useDiagramState((s2) => ({
     isHovered: s2.hoveredNodeId === id2,
     hasOnNavigateTo: !!s2.onNavigateTo
-  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo;
+  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo, transparency = clamp$1(100 - opacity, {
+    min: 0,
+    max: 98
+  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Box$1,
     {
-      className: clsx(cssContainer, "likec4-compound-node"),
-      style: assignInlineVars({ fill: vars.element.fill, stroke: vars.element.stroke }, {
-        fill: colors2.fill,
-        stroke: colors2.stroke
-      }),
+      className: clsx(
+        container$1,
+        "likec4-compound-node",
+        opacity < 100 && "likec4-compound-transparent"
+      ),
       mod: {
+        "compound-depth": depth,
         "likec4-color": color2,
         "likec4-shape": compound.shape,
         "likec4-navigable": isnavigable,
         hovered: isHovered
       },
+      style: assignInlineVars({
+        [varTransparency]: transparency + "%"
+      }),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Handle,
@@ -34102,7 +33262,7 @@ const compoundColor = (color2, depth) => toHex(
             style: { visibility: "hidden" }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: cssIndicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: indicator$1, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "rect",
           {
             x: 0,
@@ -34112,15 +33272,24 @@ const compoundColor = (color2, depth) => toHex(
             rx: 6
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(cssCompound, "likec4-compound"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Text$1,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
           {
-            component: "div",
-            className: clsx(cssTitle, "likec4-compound-title"),
-            children: compound.title
+            className: clsx(compoundBody, opacity < 100 && transparent, "likec4-compound"),
+            style: {
+              borderStyle: opacity < 100 ? style2.border : void 0
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text$1,
+              {
+                component: "div",
+                className: clsx(title$1, "likec4-compound-title"),
+                children: compound.title
+              }
+            )
           }
-        ) }),
-        isnavigable && /* @__PURE__ */ jsxRuntimeExports.jsx(NavigateToBtn, { xynodeId: id2, className: cssNavigateBtn$1 }),
+        ),
+        isnavigable && /* @__PURE__ */ jsxRuntimeExports.jsx(NavigateToBtn, { xynodeId: id2, className: navigateBtn }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Handle,
           {
@@ -34409,7 +33578,7 @@ function ElementNode({
 }) {
   const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s2) => ({
     isHovered: s2.hoveredNodeId === id2,
-    isInteractive: s2.nodesDraggable || s2.nodesSelectable,
+    isInteractive: s2.nodesDraggable || s2.nodesSelectable || !!s2.onNavigateTo,
     isHovercards: s2.showElementLinks,
     hasOnNavigateTo: !!s2.onNavigateTo
   })), isNavigable = hasOnNavigateTo && !!element.navigateTo, w2 = toDomPrecision(width ?? element.width), h2 = toDomPrecision(height ?? element.height);
@@ -34421,7 +33590,7 @@ function ElementNode({
     case dragging:
       animate = "idle";
       break;
-    case ((isInteractive || hasOnNavigateTo) && isHovered):
+    case (isInteractive && isHovered):
       animate = "hovered";
       break;
     case selected2:
@@ -34537,29 +33706,32 @@ const XYFlowBackground = reactExports.memo(({ background }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { variant: literalToEnum(variant), ...rest });
 }, deepEqual);
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = reactExports.useRef();
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = reactExports.useRef(), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+    dblclickTimeout.current = void 0;
+  }, 250), !1);
   return reactExports.useMemo(() => ({
-    onPaneClick: (event) => {
-      diagramApi.setState(
-        {
-          lastClickedNodeId: null,
-          lastClickedEdgeId: null
-        },
-        !1,
-        "onPaneClick"
-      );
+    onDoubleClick: (event) => {
+      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
       const diagramState = diagramApi.getState();
-      if (dblclickTimeout.current) {
-        if (window.clearTimeout(dblclickTimeout.current), dblclickTimeout.current = void 0, diagramState.onCanvasDblClick) {
-          diagramState.onCanvasDblClick(event);
-          return;
-        }
-        diagramState.onCanvasClick?.(event), diagramState.fitViewEnabled && diagramState.viewportChanged && diagramState.fitDiagram();
+      if (diagramState.onCanvasDblClick) {
+        diagramState.onCanvasDblClick(event);
+        return;
+      }
+      if (diagramState.fitViewEnabled && diagramState.zoomable) {
+        diagramState.fitDiagram(), event.stopPropagation();
+        return;
+      }
+    },
+    onPaneClick: (event) => {
+      if (dbclickGuarg())
+        return;
+      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
+      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState();
+      if (onCanvasClick) {
+        onCanvasClick(event);
         return;
       }
-      dblclickTimeout.current = window.setTimeout(() => {
-        dblclickTimeout.current = void 0, diagramApi.getState().onCanvasClick?.(event);
-      }, 300);
+      focusedNodeId && (fitDiagram(), event.stopPropagation());
     },
     onNodeContextMenu: (event, xynode) => {
       diagramApi.getState().setLastClickedNode(xynode.id), diagramApi.getState().onNodeContextMenu?.({
@@ -34579,11 +33751,21 @@ function useXYFlowEvents() {
       });
     },
     onNodeClick: (event, xynode) => {
-      diagramApi.getState().setLastClickedNode(xynode.id), diagramApi.getState().onNodeClick?.({
-        element: xynode.data.element,
-        xynode,
-        event
-      });
+      diagramApi.getState().setLastClickedNode(xynode.id);
+      const { focusedNodeId, fitDiagram, onNodeClick } = diagramApi.getState();
+      if (onNodeClick) {
+        onNodeClick({
+          element: xynode.data.element,
+          xynode,
+          event
+        });
+        return;
+      }
+      focusedNodeId && focusedNodeId !== xynode.id && (fitDiagram(xynode), event.stopPropagation());
+    },
+    onNodeDoubleClick: (event, xynode) => {
+      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState();
+      onNodeClick || zoomable && (fitDiagram(xynode), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
       diagramApi.getState().setLastClickedEdge(xyedge.id), diagramApi.getState().onEdgeClick?.({
@@ -34595,6 +33777,18 @@ function useXYFlowEvents() {
     onMoveEnd: (event, _viewport) => {
       const viewportChanged = !!event;
       viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
+    },
+    onNodeMouseEnter: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(xynode.id);
+    },
+    onNodeMouseLeave: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(null);
+    },
+    onEdgeMouseEnter: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(xyedge.id);
+    },
+    onEdgeMouseLeave: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(null);
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -34614,15 +33808,14 @@ const nodeTypes = {
   hasOnCanvasContextMenu: !!s2.onCanvasContextMenu,
   hasOnEdgeContextMenu: !!s2.onEdgeContextMenu,
   hasOnEdgeClick: !!s2.onEdgeClick,
-  hasOnCanvasClick: !!s2.onCanvasClick || !!s2.onCanvasDblClick
+  zoomable: s2.zoomable,
+  pannable: s2.pannable
 });
 function XYFlowWrapper({
   className,
   children: children2,
   defaultNodes,
   defaultEdges,
-  pannable,
-  zoomable,
   controls,
   background,
   style: style2
@@ -34632,6 +33825,8 @@ function XYFlowWrapper({
     nodesDraggable,
     fitView: fitView2,
     fitViewPadding,
+    pannable,
+    zoomable,
     ...editor
   } = useDiagramState(selector), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents(), isBgWithPattern = background !== "transparent" && background !== "solid", { colorScheme } = useMantineColorScheme(), colorMode = colorScheme !== "auto" ? colorScheme : void 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -34671,33 +33866,27 @@ function XYFlowWrapper({
         selectionKeyCode: null
       },
       nodesDraggable,
-      ...nodesDraggable && layoutConstraints,
+      ...nodesDraggable && {
+        onNodeDragStart: layoutConstraints.onNodeDragStart,
+        onNodeDrag: layoutConstraints.onNodeDrag,
+        onNodeDragStop: layoutConstraints.onNodeDragStop
+      },
       zoomOnDoubleClick: !1,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
+      onDoubleClick: handlers.onDoubleClick,
       onPaneClick: handlers.onPaneClick,
-      ...editor.hasOnNodeClick && {
-        onNodeClick: handlers.onNodeClick
-      },
-      ...editor.hasOnEdgeClick && {
-        onEdgeClick: handlers.onEdgeClick
-      },
       onMoveEnd: handlers.onMoveEnd,
+      onNodeMouseEnter: handlers.onNodeMouseEnter,
+      onNodeMouseLeave: handlers.onNodeMouseLeave,
+      onEdgeMouseEnter: handlers.onEdgeMouseEnter,
+      onEdgeMouseLeave: handlers.onEdgeMouseLeave,
+      onNodeClick: handlers.onNodeClick,
+      onNodeDoubleClick: handlers.onNodeDoubleClick,
+      onEdgeClick: handlers.onEdgeClick,
       onInit: () => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
       },
-      onNodeMouseEnter: (_event, node) => {
-        diagramApi.getState().setHoveredNode(node.id);
-      },
-      onNodeMouseLeave: () => {
-        diagramApi.getState().setHoveredNode(null);
-      },
-      onEdgeMouseEnter: (_event, edge) => {
-        diagramApi.getState().setHoveredEdge(edge.id);
-      },
-      onEdgeMouseLeave: () => {
-        diagramApi.getState().setHoveredEdge(null);
-      },
       ...editor.hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       },
@@ -34765,6 +33954,8 @@ function LikeC4Diagram({
         {
           view,
           readonly,
+          pannable,
+          zoomable,
           fitViewEnabled: fitView2,
           fitViewPadding,
           showElementLinks,
@@ -34781,7 +33972,7 @@ function LikeC4Diagram({
           onCanvasDblClick,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              KeepAspectRatio,
+              KeepAspectRatioContainer,
               {
                 className: clsx(rootClassName, className),
                 enabled: keepAspectRatio,
@@ -34801,8 +33992,6 @@ function LikeC4Diagram({
                     controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    pannable,
-                    zoomable,
                     children: readonly !== !0 && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsPanel2, {})
                   }
                 )
@@ -37037,22 +36226,22 @@ const ViewViewIdReactLegacyLazyImport = createFileRoute(
   path: "/react-legacy",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.react-legacy.lazy-Cr471Itv.js").then((d2) => d2.Route)
+  () => import("./view._viewId.react-legacy.lazy-DvQqUilU.js").then((d2) => d2.Route)
 ), ViewViewIdMmdLazyRoute = ViewViewIdMmdLazyImport.update({
   path: "/mmd",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.mmd.lazy-AyTROblc.js").then((d2) => d2.Route)
+  () => import("./view._viewId.mmd.lazy-o20hkhat.js").then((d2) => d2.Route)
 ), ViewViewIdDotLazyRoute = ViewViewIdDotLazyImport.update({
   path: "/dot",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.dot.lazy-DDXp1Pjx.js").then((d2) => d2.Route)
+  () => import("./view._viewId.dot.lazy-_gnghLVA.js").then((d2) => d2.Route)
 ), ViewViewIdD2LazyRoute = ViewViewIdD2LazyImport.update({
   path: "/d2",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.d2.lazy-D9gktAvw.js").then((d2) => d2.Route)
+  () => import("./view._viewId.d2.lazy-BX8VfXLS.js").then((d2) => d2.Route)
 ), ViewViewIdEditorRoute = Route2.update({
   path: "/editor",
   getParentRoute: () => ViewViewIdRoute
@@ -37103,41 +36292,35 @@ client.createRoot(document.getElementById("like4-root")).render(
   /* @__PURE__ */ jsxRuntimeExports.jsx(Routes, {})
 );
 export {
-  CopyButton as A,
+  ActionIcon as A,
   Box$1 as B,
-  Color as C,
-  ActionIcon as D,
-  rem as E,
-  IconCopy as F,
+  Code as C,
   IconCheck as I,
   React as R,
   ScrollArea as S,
   Tooltip as T,
-  Utils as U,
   useUnmountEffect$1 as a,
   useSyncedRef as b,
   useFirstMountState as c,
-  change$1 as d,
-  channels as e,
-  commonjsGlobal as f,
+  commonjsGlobal as d,
+  invariant$1 as e,
+  useUpdateEffect$1 as f,
   getDefaultExportFromCjs as g,
-  scale$1 as h,
+  nonNullable as h,
   isBrowser$1 as i,
   jsxRuntimeExports as j,
-  invariant$1 as k,
-  useUpdateEffect$1 as l,
-  nonNullable as m,
+  defaultTheme as k,
+  createLazyFileRoute as l,
+  useRouter as m,
   nonexhaustive as n,
-  defaultTheme as o,
-  createLazyFileRoute as p,
-  useRouter as q,
+  useLikeC4View as o,
+  notFound as p,
+  svgContainer as q,
   reactExports as r,
   schedulerExports as s,
-  toHex as t,
+  React$1 as t,
   useRafCallback as u,
-  useLikeC4View as v,
-  notFound as w,
-  Code as x,
-  svgContainer as y,
-  React$1 as z
+  CopyButton as v,
+  rem as w,
+  IconCopy as x
 };