@railtownai/railtracks-visualizer 0.0.53 → 0.0.55

package/dist/cjs/index.js

@@ -8071,7 +8071,7 @@ function fixedForwardRef(render) {
     return React.forwardRef(render);
 }
 // we need this hook to prevent a warning when using react-flow in SSR
-const useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect$3 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 /**
  * This hook returns a queue that can be used to batch updates.
  *
@@ -8096,7 +8096,7 @@ const useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLay
      * Layout effects are guaranteed to run before the next render which means we
      * shouldn't run into any issues with stale state or weird issues that come from
      * rendering things one frame later than expected (we used to use `setTimeout`).
-     */ useIsomorphicLayoutEffect$2(()=>{
+     */ useIsomorphicLayoutEffect$3(()=>{
         const queueItems = queue.get();
         if (queueItems.length) {
             runQueue(queueItems);
@@ -15224,7 +15224,7 @@ function requireHoistNonReactStatics_cjs() {
 
 requireHoistNonReactStatics_cjs();
 
-var isBrowser = true;
+var isBrowser$1 = true;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
     var rawClassName = '';
     classNames.split(' ').forEach(function(className) {
@@ -15246,7 +15246,7 @@ var registerStyles = function registerStyles(cache, serialized, isStringTag) {
     // in node since emotion-server relies on whether a style is in
     // the registered cache to know whether a style is global or not
     // also, note that this check will be dead code eliminated in the browser
-    isBrowser === false) && cache.registered[className] === undefined) {
+    isBrowser$1 === false) && cache.registered[className] === undefined) {
         cache.registered[className] = serialized.styles;
     }
 };
@@ -15894,6 +15894,21 @@ const ThemeProvider = ({ children, theme: propTheme })=>{
     }, [
         propTheme
     ]);
+    // Sync html.dark class for GlobalStyles and other CSS that uses html.dark
+    React.useEffect(()=>{
+        const isDark = currentTheme === darkTheme;
+        try {
+            if (isDark) {
+                document.documentElement.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+            }
+        } catch (e) {
+        // document might not be available (e.g. SSR)
+        }
+    }, [
+        currentTheme
+    ]);
     // Only listen for storage events if no theme prop is provided
     React.useEffect(()=>{
         if (propTheme) {
@@ -21001,7 +21016,7 @@ function cn(...inputs) {
 /**
  * Formats a metric value for display based on evaluator metric definitions.
  * Handles Categorical (index → option label), Continuous (decimal), and fallback.
- */ function formatMetricValue(evaluator, metricName, value) {
+ */ function formatMetricValue$1(evaluator, metricName, value) {
     if (value === undefined || value === null) return "-";
     const numericValue = typeof value === "number" ? value : Number(value);
     if (isNaN(numericValue)) return "-";
@@ -21644,7 +21659,7 @@ if (process.env.NODE_ENV !== 'production') {
         }
     };
 }
-const warning = _warning;
+const warning$1 = _warning;
 const WarningContext = /*#__PURE__*/ React__namespace.createContext({});
 /**
  * This is a hook but we not named as `useWarning`
@@ -21668,7 +21683,7 @@ const WarningContext = /*#__PURE__*/ React__namespace.createContext({});
                     console.warn('[antd] There exists deprecated usage in your code:', deprecatedWarnList);
                 }
             } else {
-                process.env.NODE_ENV !== "production" ? warning(valid, component, message) : void 0;
+                process.env.NODE_ENV !== "production" ? warning$1(valid, component, message) : void 0;
             }
         }
     };
@@ -23519,6 +23534,367 @@ const useZIndex = (componentType, customZIndex)=>{
     return result;
 };
 
+const genAlertTypeStyle = (bgColor, borderColor, iconColor, token, alertCls)=>({
+        background: bgColor,
+        border: `${cssinjs.unit(token.lineWidth)} ${token.lineType} ${borderColor}`,
+        [`${alertCls}-icon`]: {
+            color: iconColor
+        }
+    });
+const genBaseStyle$6 = (token)=>{
+    const { componentCls, motionDurationSlow: duration, marginXS, marginSM, fontSize, fontSizeLG, lineHeight, borderRadiusLG: borderRadius, motionEaseInOutCirc, withDescriptionIconSize, colorText, colorTextHeading, withDescriptionPadding, defaultPadding } = token;
+    return {
+        [componentCls]: {
+            ...resetComponent(token),
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            padding: defaultPadding,
+            wordWrap: 'break-word',
+            borderRadius,
+            [`&${componentCls}-rtl`]: {
+                direction: 'rtl'
+            },
+            [`${componentCls}-section`]: {
+                flex: 1,
+                minWidth: 0
+            },
+            [`${componentCls}-icon`]: {
+                marginInlineEnd: marginXS,
+                lineHeight: 0
+            },
+            '&-description': {
+                display: 'none',
+                fontSize,
+                lineHeight
+            },
+            '&-title': {
+                color: colorTextHeading
+            },
+            [`&${componentCls}-motion-leave`]: {
+                overflow: 'hidden',
+                opacity: 1,
+                transition: [
+                    `max-height`,
+                    `opacity`,
+                    `padding-top`,
+                    `padding-bottom`,
+                    `margin-bottom`
+                ].map((prop)=>`${prop} ${duration} ${motionEaseInOutCirc}`).join(', ')
+            },
+            [`&${componentCls}-motion-leave-active`]: {
+                maxHeight: 0,
+                marginBottom: '0 !important',
+                paddingTop: 0,
+                paddingBottom: 0,
+                opacity: 0
+            }
+        },
+        [`${componentCls}-with-description`]: {
+            alignItems: 'flex-start',
+            padding: withDescriptionPadding,
+            [`${componentCls}-icon`]: {
+                marginInlineEnd: marginSM,
+                fontSize: withDescriptionIconSize,
+                lineHeight: 0
+            },
+            [`${componentCls}-title`]: {
+                display: 'block',
+                marginBottom: marginXS,
+                color: colorTextHeading,
+                fontSize: fontSizeLG
+            },
+            [`${componentCls}-description`]: {
+                display: 'block',
+                color: colorText
+            }
+        },
+        [`${componentCls}-banner`]: {
+            marginBottom: 0,
+            border: '0 !important',
+            borderRadius: 0
+        }
+    };
+};
+const genTypeStyle = (token)=>{
+    const { componentCls, colorSuccess, colorSuccessBorder, colorSuccessBg, colorWarning, colorWarningBorder, colorWarningBg, colorError, colorErrorBorder, colorErrorBg, colorInfo, colorInfoBorder, colorInfoBg } = token;
+    return {
+        [componentCls]: {
+            '&-success': genAlertTypeStyle(colorSuccessBg, colorSuccessBorder, colorSuccess, token, componentCls),
+            '&-info': genAlertTypeStyle(colorInfoBg, colorInfoBorder, colorInfo, token, componentCls),
+            '&-warning': genAlertTypeStyle(colorWarningBg, colorWarningBorder, colorWarning, token, componentCls),
+            '&-error': {
+                ...genAlertTypeStyle(colorErrorBg, colorErrorBorder, colorError, token, componentCls),
+                [`${componentCls}-description > pre`]: {
+                    margin: 0,
+                    padding: 0
+                }
+            }
+        }
+    };
+};
+const genActionStyle = (token)=>{
+    const { componentCls, iconCls, motionDurationMid, marginXS, fontSizeIcon, colorIcon, colorIconHover } = token;
+    return {
+        [componentCls]: {
+            '&-actions': {
+                marginInlineStart: marginXS
+            },
+            [`${componentCls}-close-icon`]: {
+                marginInlineStart: marginXS,
+                padding: 0,
+                overflow: 'hidden',
+                fontSize: fontSizeIcon,
+                lineHeight: cssinjs.unit(fontSizeIcon),
+                backgroundColor: 'transparent',
+                border: 'none',
+                outline: 'none',
+                cursor: 'pointer',
+                [`${iconCls}-close`]: {
+                    color: colorIcon,
+                    transition: `color ${motionDurationMid}`,
+                    '&:hover': {
+                        color: colorIconHover
+                    }
+                }
+            },
+            '&-close-text': {
+                color: colorIcon,
+                transition: `color ${motionDurationMid}`,
+                '&:hover': {
+                    color: colorIconHover
+                }
+            }
+        }
+    };
+};
+const prepareComponentToken$n = (token)=>{
+    const paddingHorizontal = 12; // Fixed value here.
+    return {
+        withDescriptionIconSize: token.fontSizeHeading3,
+        defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
+        withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`
+    };
+};
+var useStyle$u = genStyleHooks('Alert', (token)=>[
+        genBaseStyle$6(token),
+        genTypeStyle(token),
+        genActionStyle(token)
+    ], prepareComponentToken$n);
+
+const IconNode = (props)=>{
+    const { icon, type, className, style, successIcon, infoIcon, warningIcon, errorIcon } = props;
+    const iconMapFilled = {
+        success: successIcon ?? /*#__PURE__*/ React__namespace.createElement(CheckCircleFilled, null),
+        info: infoIcon ?? /*#__PURE__*/ React__namespace.createElement(InfoCircleFilled, null),
+        error: errorIcon ?? /*#__PURE__*/ React__namespace.createElement(CloseCircleFilled, null),
+        warning: warningIcon ?? /*#__PURE__*/ React__namespace.createElement(ExclamationCircleFilled, null)
+    };
+    return /*#__PURE__*/ React__namespace.createElement("span", {
+        className: className,
+        style: style
+    }, icon ?? iconMapFilled[type]);
+};
+const CloseIconNode = (props)=>{
+    const { isClosable, prefixCls, closeIcon, handleClose, ariaProps, className, style } = props;
+    const mergedCloseIcon = closeIcon === true || closeIcon === undefined ? /*#__PURE__*/ React__namespace.createElement(CloseOutlined, null) : closeIcon;
+    return isClosable ? /*#__PURE__*/ React__namespace.createElement("button", {
+        type: "button",
+        onClick: handleClose,
+        className: clsx(`${prefixCls}-close-icon`, className),
+        tabIndex: 0,
+        style: style,
+        ...ariaProps
+    }, mergedCloseIcon) : null;
+};
+const Alert$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref$1)=>{
+    const { description, prefixCls: customizePrefixCls, message, title, banner, className, rootClassName, style, onMouseEnter, onMouseLeave, onClick, afterClose, showIcon, closable, closeText, closeIcon, action, id, styles, classNames, ...otherProps } = props;
+    const mergedTitle = title ?? message;
+    const [closed, setClosed] = React__namespace.useState(false);
+    if (process.env.NODE_ENV !== 'production') {
+        const warning = devUseWarning('Alert');
+        [
+            [
+                'closeText',
+                'closable.closeIcon'
+            ],
+            [
+                'message',
+                'title'
+            ]
+        ].forEach(([deprecatedName, newName])=>{
+            warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+        });
+    }
+    const internalRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref$1, ()=>({
+            nativeElement: internalRef.current
+        }));
+    const { getPrefixCls, direction, closable: contextClosable, closeIcon: contextCloseIcon, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, successIcon, infoIcon, warningIcon, errorIcon } = useComponentConfig('alert');
+    const prefixCls = getPrefixCls('alert', customizePrefixCls);
+    const [hashId, cssVarCls] = useStyle$u(prefixCls);
+    const { onClose: closableOnClose, afterClose: closableAfterClose } = closable && typeof closable === 'object' ? closable : {};
+    const handleClose = (e)=>{
+        setClosed(true);
+        (closableOnClose ?? props.onClose)?.(e);
+    };
+    const type = React__namespace.useMemo(()=>{
+        if (props.type !== undefined) {
+            return props.type;
+        }
+        // banner mode defaults to 'warning'
+        return banner ? 'warning' : 'info';
+    }, [
+        props.type,
+        banner
+    ]);
+    // closeable when closeText or closeIcon is assigned
+    const isClosable = React__namespace.useMemo(()=>{
+        if (typeof closable === 'object' && closable.closeIcon) {
+            return true;
+        }
+        if (closeText) {
+            return true;
+        }
+        if (typeof closable === 'boolean') {
+            return closable;
+        }
+        // should be true when closeIcon is 0 or ''
+        if (closeIcon !== false && isNonNullable(closeIcon)) {
+            return true;
+        }
+        return !!contextClosable;
+    }, [
+        closeText,
+        closeIcon,
+        closable,
+        contextClosable
+    ]);
+    // banner mode defaults to Icon
+    const isShowIcon = banner && showIcon === undefined ? true : showIcon;
+    // =========== Merged Props for Semantic ==========
+    const mergedProps = {
+        ...props,
+        prefixCls,
+        type,
+        showIcon: isShowIcon,
+        closable: isClosable
+    };
+    const [mergedClassNames, mergedStyles] = useMergeSemantic([
+        contextClassNames,
+        classNames
+    ], [
+        contextStyles,
+        styles
+    ], {
+        props: mergedProps
+    });
+    const alertCls = clsx(prefixCls, `${prefixCls}-${type}`, {
+        [`${prefixCls}-with-description`]: !!description,
+        [`${prefixCls}-no-icon`]: !isShowIcon,
+        [`${prefixCls}-banner`]: !!banner,
+        [`${prefixCls}-rtl`]: direction === 'rtl'
+    }, contextClassName, className, rootClassName, mergedClassNames.root, cssVarCls, hashId);
+    const restProps = pickAttrs(otherProps, {
+        aria: true,
+        data: true
+    });
+    const mergedCloseIcon = React__namespace.useMemo(()=>{
+        if (typeof closable === 'object' && closable.closeIcon) {
+            return closable.closeIcon;
+        }
+        if (closeText) {
+            return closeText;
+        }
+        if (closeIcon !== undefined) {
+            return closeIcon;
+        }
+        if (typeof contextClosable === 'object' && contextClosable.closeIcon) {
+            return contextClosable.closeIcon;
+        }
+        return contextCloseIcon;
+    }, [
+        closeIcon,
+        closable,
+        contextClosable,
+        closeText,
+        contextCloseIcon
+    ]);
+    const mergedAriaProps = React__namespace.useMemo(()=>{
+        const merged = closable ?? contextClosable;
+        if (typeof merged === 'object') {
+            return pickAttrs(merged, {
+                data: true,
+                aria: true
+            });
+        }
+        return {};
+    }, [
+        closable,
+        contextClosable
+    ]);
+    return /*#__PURE__*/ React__namespace.createElement(CSSMotion, {
+        visible: !closed,
+        motionName: `${prefixCls}-motion`,
+        motionAppear: false,
+        motionEnter: false,
+        onLeaveStart: (node)=>({
+                maxHeight: node.offsetHeight
+            }),
+        onLeaveEnd: closableAfterClose ?? afterClose
+    }, ({ className: motionClassName, style: motionStyle }, setRef)=>/*#__PURE__*/ React__namespace.createElement("div", {
+            id: id,
+            ref: ref.composeRef(internalRef, setRef),
+            "data-show": !closed,
+            className: clsx(alertCls, motionClassName),
+            style: {
+                ...mergedStyles.root,
+                ...contextStyle,
+                ...style,
+                ...motionStyle
+            },
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            onClick: onClick,
+            role: "alert",
+            ...restProps
+        }, isShowIcon ? /*#__PURE__*/ React__namespace.createElement(IconNode, {
+            className: clsx(`${prefixCls}-icon`, mergedClassNames.icon),
+            style: mergedStyles.icon,
+            description: description,
+            icon: props.icon,
+            prefixCls: prefixCls,
+            type: type,
+            successIcon: successIcon,
+            infoIcon: infoIcon,
+            warningIcon: warningIcon,
+            errorIcon: errorIcon
+        }) : null, /*#__PURE__*/ React__namespace.createElement("div", {
+            className: clsx(`${prefixCls}-section`, mergedClassNames.section),
+            style: mergedStyles.section
+        }, mergedTitle ? /*#__PURE__*/ React__namespace.createElement("div", {
+            className: clsx(`${prefixCls}-title`, mergedClassNames.title),
+            style: mergedStyles.title
+        }, mergedTitle) : null, description ? /*#__PURE__*/ React__namespace.createElement("div", {
+            className: clsx(`${prefixCls}-description`, mergedClassNames.description),
+            style: mergedStyles.description
+        }, description) : null), action ? /*#__PURE__*/ React__namespace.createElement("div", {
+            className: clsx(`${prefixCls}-actions`, mergedClassNames.actions),
+            style: mergedStyles.actions
+        }, action) : null, /*#__PURE__*/ React__namespace.createElement(CloseIconNode, {
+            className: mergedClassNames.close,
+            style: mergedStyles.close,
+            isClosable: isClosable,
+            prefixCls: prefixCls,
+            closeIcon: mergedCloseIcon,
+            handleClose: handleClose,
+            ariaProps: mergedAriaProps
+        })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Alert$1.displayName = 'Alert';
+}
+
 function _classCallCheck(a, n) {
     if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
@@ -23560,6 +23936,110 @@ function _createClass(e, r, t) {
     }), e;
 }
 
+function _getPrototypeOf(t) {
+    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t) {
+        return t.__proto__ || Object.getPrototypeOf(t);
+    }, _getPrototypeOf(t);
+}
+
+function _isNativeReflectConstruct() {
+    try {
+        var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (t) {}
+    return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+        return !!t;
+    })();
+}
+
+function _assertThisInitialized(e) {
+    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return e;
+}
+
+function _possibleConstructorReturn(t, e) {
+    if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
+    if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+    return _assertThisInitialized(t);
+}
+
+function _callSuper(t, o, e) {
+    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+
+function _setPrototypeOf(t, e) {
+    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t, e) {
+        return t.__proto__ = e, t;
+    }, _setPrototypeOf(t, e);
+}
+
+function _inherits(t, e) {
+    if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+    t.prototype = Object.create(e && e.prototype, {
+        constructor: {
+            value: t,
+            writable: true,
+            configurable: true
+        }
+    }), Object.defineProperty(t, "prototype", {
+        writable: false
+    }), e && _setPrototypeOf(t, e);
+}
+
+let ErrorBoundary$1 = /*#__PURE__*/ function(_React$Component) {
+    function ErrorBoundary() {
+        var _this;
+        _classCallCheck(this, ErrorBoundary);
+        _this = _callSuper(this, ErrorBoundary, arguments);
+        _this.state = {
+            error: undefined,
+            info: {
+                componentStack: ''
+            }
+        };
+        return _this;
+    }
+    _inherits(ErrorBoundary, _React$Component);
+    return _createClass(ErrorBoundary, [
+        {
+            key: "componentDidCatch",
+            value: function componentDidCatch(error, info) {
+                this.setState({
+                    error,
+                    info
+                });
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                const { message, title, description, id, children } = this.props;
+                const { error, info } = this.state;
+                const mergedTitle = title ?? message;
+                const componentStack = info?.componentStack || null;
+                const errorMessage = typeof mergedTitle === 'undefined' ? (error || '').toString() : mergedTitle;
+                const errorDescription = typeof description === 'undefined' ? componentStack : description;
+                if (error) {
+                    return /*#__PURE__*/ React__namespace.createElement(Alert$1, {
+                        id: id,
+                        type: "error",
+                        title: errorMessage,
+                        description: /*#__PURE__*/ React__namespace.createElement("pre", {
+                            style: {
+                                fontSize: '0.9em',
+                                overflowX: 'auto'
+                            }
+                        }, errorDescription)
+                    });
+                }
+                return children;
+            }
+        }
+    ]);
+}(React__namespace.Component);
+
+const Alert = Alert$1;
+Alert.ErrorBoundary = ErrorBoundary$1;
+
 function isWindow(obj) {
     return isNonNullable(obj) && obj === obj.window;
 }
@@ -23842,7 +24322,7 @@ var PropWarning = process.env.NODE_ENV !== 'production' ? PropWarning$1 : ()=>nu
  * theme register info here to help developer get warning info.
  */ let existThemeConfig = false;
 const warnContext = process.env.NODE_ENV !== 'production' ? (componentName)=>{
-    process.env.NODE_ENV !== "production" ? warning(!existThemeConfig, componentName, `Static function can not consume context like dynamic theme. Please use 'App' component instead.`) : void 0;
+    process.env.NODE_ENV !== "production" ? warning$1(!existThemeConfig, componentName, `Static function can not consume context like dynamic theme. Please use 'App' component instead.`) : void 0;
 } : /* istanbul ignore next */ null;
 // These props is used by `useContext` directly in sub component
 const PASSED_PROPS = [
@@ -24158,7 +24638,7 @@ ConfigProvider.config = setGlobalConfig;
 ConfigProvider.useConfig = useConfig;
 Object.defineProperty(ConfigProvider, 'SizeContext', {
     get: ()=>{
-        process.env.NODE_ENV !== "production" ? warning(false, 'ConfigProvider', 'ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.') : void 0;
+        process.env.NODE_ENV !== "production" ? warning$1(false, 'ConfigProvider', 'ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.') : void 0;
         return SizeContext;
     }
 });
@@ -46810,7 +47290,7 @@ const asyncCopy = async (text, isHtmlFormat)=>{
 };
 async function copy(text, config) {
     if (typeof text !== 'string') {
-        process.env.NODE_ENV !== "production" ? warning(false, 'The clipboard content must be of string type', '') : void 0;
+        process.env.NODE_ENV !== "production" ? warning$1(false, 'The clipboard content must be of string type', '') : void 0;
         return false;
     }
     const isHtmlFormat = config?.format === 'text/html';
@@ -47599,7 +48079,7 @@ const Base = /*#__PURE__*/ React__namespace.forwardRef((props, ref$1)=>{
             }, node) : node, renderEllipsis(canEllipsis)))))));
 });
 
-const Link = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
+const Link$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
     const { ellipsis, rel, children, // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622
     navigate: _navigate, ...restProps } = props;
     if (process.env.NODE_ENV !== 'production') {
@@ -47675,7 +48155,7 @@ const Title$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
 
 const Typography = Typography$1;
 Typography.Text = Text$1;
-Typography.Link = Link;
+Typography.Link = Link$1;
 Typography.Title = Title$1;
 Typography.Paragraph = Paragraph;
 
@@ -49659,7 +50139,7 @@ const Timeline = ({ stamps, currentStep, onStepChange, onToggle })=>{
 };
 
 // src/primitive.tsx
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
     return function handleEvent(event) {
         originalEventHandler?.(event);
         if (checkForDefaultPrevented === false || !event.defaultPrevented) {
@@ -50172,9 +50652,9 @@ var DismissableLayer = React__namespace.forwardRef((props, forwardedRef)=>{
             pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
             ...props.style
         },
-        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
+        onFocusCapture: composeEventHandlers$1(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers$1(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers$1(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
     });
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
@@ -50808,7 +51288,7 @@ var noScrollbarsClassName = 'with-scroll-bars-hidden';
     return ref.facade;
 }
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 var currentValues = new WeakMap();
 /**
  * Merges two or more refs together providing a single interface to set their value
@@ -50830,7 +51310,7 @@ var currentValues = new WeakMap();
         });
     });
     // handle refs changes - added or removed
-    useIsomorphicLayoutEffect$1(function() {
+    useIsomorphicLayoutEffect$2(function() {
         var oldValue = currentValues.get(callbackRef);
         if (oldValue) {
             var prevRefs_1 = new Set(oldValue);
@@ -51719,7 +52199,7 @@ var DialogTrigger = React__namespace.forwardRef((props, forwardedRef)=>{
         "data-state": getState(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
-        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+        onClick: composeEventHandlers$1(props.onClick, context.onOpenToggle)
     });
 });
 DialogTrigger.displayName = TRIGGER_NAME;
@@ -51811,17 +52291,17 @@ var DialogContentModal = React__namespace.forwardRef((props, forwardedRef)=>{
         ref: composedRefs,
         trapFocus: context.open,
         disableOutsidePointerEvents: true,
-        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event)=>{
+        onCloseAutoFocus: composeEventHandlers$1(props.onCloseAutoFocus, (event)=>{
             event.preventDefault();
             context.triggerRef.current?.focus();
         }),
-        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event)=>{
+        onPointerDownOutside: composeEventHandlers$1(props.onPointerDownOutside, (event)=>{
             const originalEvent = event.detail.originalEvent;
             const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
             const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
             if (isRightClick) event.preventDefault();
         }),
-        onFocusOutside: composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault())
+        onFocusOutside: composeEventHandlers$1(props.onFocusOutside, (event)=>event.preventDefault())
     });
 });
 var DialogContentNonModal = React__namespace.forwardRef((props, forwardedRef)=>{
@@ -51928,7 +52408,7 @@ var DialogClose = React__namespace.forwardRef((props, forwardedRef)=>{
         type: "button",
         ...closeProps,
         ref: forwardedRef,
-        onClick: composeEventHandlers(props.onClick, ()=>context.onOpenChange(false))
+        onClick: composeEventHandlers$1(props.onClick, ()=>context.onOpenChange(false))
     });
 });
 DialogClose.displayName = CLOSE_NAME;
@@ -113521,6 +114001,12 @@ function dtoMetricToMetric(def) {
                 if (idx !== undefined && idx >= 0) {
                     aggregatedResults[evaluatorId][item.metric.name] = idx;
                 }
+            } else if ((isLLMResult(item) || isToolResult(item)) && "result_name" in item && typeof item.value === "number") {
+                // Raw LLM/Tool results: aggregate by result_name (metric name) for comparison view
+                const name = item.result_name;
+                const arr = valuesByMetric.get(name) ?? [];
+                arr.push(item.value);
+                valuesByMetric.set(name, arr);
             }
         }
         // Compute mean across all values for each metric
@@ -113572,117 +114058,114 @@ function dtoMetricToMetric(def) {
     return "evaluator_results" in x && Array.isArray(x.evaluator_results);
 }
 
-const EvaluationsCompare = ({ open, onClose, sourceEvaluationId, targetEvaluationId, evaluations, onSourceChange, onTargetChange })=>{
-    const { isDarkMode } = useTheme$1();
+/** Returns set of "evaluatorId:metricName" for all metrics in the evaluation. */ function getMetricKeys(evaluation) {
+    const keys = new Set();
+    for (const evaluator of evaluation.evaluators){
+        for (const metric of evaluator.metrics){
+            keys.add(`${evaluator.evaluator_id}:${metric.name}`);
+        }
+    }
+    return keys;
+}
+/**
+ * Returns true if both evaluations have the same set of metrics
+ * (evaluator_id + metric name) across all evaluators.
+ */ function evaluationsHaveSameMetrics(a, b) {
+    if (a == null || b == null) return false;
+    const evalA = isEvaluationDto(a) ? transformEvaluation(a) : a;
+    const evalB = isEvaluationDto(b) ? transformEvaluation(b) : b;
+    const keysA = getMetricKeys(evalA);
+    const keysB = getMetricKeys(evalB);
+    if (keysA.size !== keysB.size) return false;
+    for (const key of keysA){
+        if (!keysB.has(key)) return false;
+    }
+    return true;
+}
+
+function formatMetricValue(evaluation, evaluatorId, metricName, metricType, options) {
+    const evaluatorResults = evaluation.results[evaluatorId];
+    const value = evaluatorResults?.[metricName];
+    if (value === undefined) return "-";
+    if (metricType === "Categorical" && options?.length) {
+        const index = Math.round(value);
+        return options[index] || value.toString();
+    }
+    if (metricType === "Continuous") {
+        return value.toFixed(1);
+    }
+    return value.toString();
+}
+function getMetricValue(evaluation, evaluatorId, metricName) {
+    const evaluatorResults = evaluation.results[evaluatorId];
+    return evaluatorResults?.[metricName];
+}
+const EvaluationsCompareView = ({ evaluations, evaluationId1, evaluationId2, onEvaluationId1Change, onEvaluationId2Change, loading = false, showEvaluationComparisonDropdowns = false, backHref })=>{
+    const { theme } = useTheme$1();
     const normalizedEvaluations = React.useMemo(()=>evaluations.map((e)=>isEvaluationDto(e) ? transformEvaluation(e) : e), [
         evaluations
     ]);
-    // Handler for copying evaluation IDs to clipboard
-    const handleCopyIds = async ()=>{
-        if (!sourceEvaluationId || !targetEvaluationId) {
-            staticMethods.error("No evaluation IDs available");
-            return;
-        }
-        try {
-            const idsText = `Source: ${sourceEvaluationId}\nTarget: ${targetEvaluationId}`;
-            await navigator.clipboard.writeText(idsText);
-            staticMethods.success("Evaluation IDs copied to clipboard");
-        } catch (err) {
-            staticMethods.error("Failed to copy evaluation IDs");
-        }
-    };
-    // Handler for sharing evaluation comparison
-    const handleShare = async ()=>{
-        if (!sourceEvaluationId || !targetEvaluationId) {
-            staticMethods.error("No evaluations available to share");
-            return;
-        }
-        const shareUrl = `${window.location.origin}${window.location.pathname}#/evaluations/compare?source=${sourceEvaluationId}&target=${targetEvaluationId}`;
-        // Try Web Share API if available
-        if (navigator.share) {
-            try {
-                await navigator.share({
-                    title: "Evaluation Comparison",
-                    text: `Compare evaluations: ${sourceEvaluationId} vs ${targetEvaluationId}`,
-                    url: shareUrl
+    const evaluation1 = normalizedEvaluations.find((e)=>e.evaluation_id === evaluationId1);
+    const evaluation2 = normalizedEvaluations.find((e)=>e.evaluation_id === evaluationId2);
+    const metricsMismatch = React.useMemo(()=>!evaluationsHaveSameMetrics(evaluation1, evaluation2), [
+        evaluation1,
+        evaluation2
+    ]);
+    const comparisonData = React.useMemo(()=>{
+        if (!evaluation1 || !evaluation2) return [];
+        const rows = [];
+        // Build evaluator lookup by id for evaluation2 (to match evaluators between evaluations)
+        const eval2EvaluatorsById = new Map(evaluation2.evaluators.map((e)=>[
+                e.evaluator_id,
+                e
+            ]));
+        // Iterate over ALL evaluators in evaluation1 (LLM, Tool, Judge, etc.)
+        for (const evaluator1 of evaluation1.evaluators){
+            const evaluator2 = eval2EvaluatorsById.get(evaluator1.evaluator_id);
+            if (!evaluator2) continue;
+            const allMetricNames = new Set();
+            evaluator1.metrics.forEach((m)=>allMetricNames.add(m.name));
+            evaluator2.metrics.forEach((m)=>allMetricNames.add(m.name));
+            for (const metricName of allMetricNames){
+                const metric1 = evaluator1.metrics.find((m)=>m.name === metricName);
+                const metric2 = evaluator2.metrics.find((m)=>m.name === metricName);
+                const metricType = metric1?.type || metric2?.type || "Continuous";
+                const options = metric1?.type === "Categorical" ? metric1.options : metric2?.type === "Categorical" ? metric2.options : undefined;
+                const value1 = getMetricValue(evaluation1, evaluator1.evaluator_id, metricName);
+                const value2 = getMetricValue(evaluation2, evaluator2.evaluator_id, metricName);
+                const formatted1 = formatMetricValue(evaluation1, evaluator1.evaluator_id, metricName, metricType, options);
+                const formatted2 = formatMetricValue(evaluation2, evaluator2.evaluator_id, metricName, metricType, options);
+                let difference;
+                if (metricType === "Continuous" && value1 !== undefined && value2 !== undefined) {
+                    difference = value2 - value1;
+                }
+                rows.push({
+                    metricName,
+                    evaluatorName: evaluator1.name,
+                    metricType,
+                    value1,
+                    value2,
+                    formatted1,
+                    formatted2,
+                    difference,
+                    rowKey: `${evaluator1.evaluator_id}:${metricName}`
                 });
-                return;
-            } catch (err) {
-            // User cancelled or error occurred, fall back to clipboard
             }
         }
-        // Fall back to copying URL to clipboard
-        try {
-            await navigator.clipboard.writeText(shareUrl);
-            staticMethods.success("Share link copied to clipboard");
-        } catch (err) {
-            staticMethods.error("Failed to copy share link");
-        }
-    };
-    // Find the evaluations
-    const sourceEvaluation = normalizedEvaluations.find((e)=>e.evaluation_id === sourceEvaluationId);
-    const targetEvaluation = normalizedEvaluations.find((e)=>e.evaluation_id === targetEvaluationId);
-    // Helper to format metric value (same logic as evaluations.tsx)
-    const formatMetricValue = (evaluation, metricName)=>{
-        const evaluator = evaluation.evaluators[0];
-        const metric = evaluator?.metrics.find((m)=>m.name === metricName);
-        const evaluatorId = evaluator?.evaluator_id || "";
-        const evaluatorResults = evaluation.results[evaluatorId];
-        const value = evaluatorResults?.[metricName];
-        if (value === undefined) return "-";
-        if (metric?.type === "Categorical" && metric.options) {
-            const index = Math.round(value);
-            return metric.options[index] || value.toString();
-        }
-        if (metric?.type === "Continuous") {
-            return value.toFixed(1);
-        }
-        return value.toString();
-    };
-    // Get metric value as number for comparison
-    const getMetricValue = (evaluation, metricName)=>{
-        const evaluator = evaluation.evaluators[0];
-        const evaluatorId = evaluator?.evaluator_id || "";
-        const evaluatorResults = evaluation.results[evaluatorId];
-        return evaluatorResults?.[metricName];
-    };
-    // Build comparison data
-    const comparisonData = React.useMemo(()=>{
-        if (!sourceEvaluation || !targetEvaluation) return [];
-        const sourceEvaluator = sourceEvaluation.evaluators[0];
-        const targetEvaluator = targetEvaluation.evaluators[0];
-        if (!sourceEvaluator || !targetEvaluator) return [];
-        // Get all unique metric names
-        const allMetricNames = new Set();
-        sourceEvaluator.metrics.forEach((m)=>allMetricNames.add(m.name));
-        targetEvaluator.metrics.forEach((m)=>allMetricNames.add(m.name));
-        return Array.from(allMetricNames).map((metricName)=>{
-            const sourceMetric = sourceEvaluator.metrics.find((m)=>m.name === metricName);
-            const targetMetric = targetEvaluator.metrics.find((m)=>m.name === metricName);
-            const metricType = sourceMetric?.type || targetMetric?.type || "Continuous";
-            const sourceValue = getMetricValue(sourceEvaluation, metricName);
-            const targetValue = getMetricValue(targetEvaluation, metricName);
-            const sourceFormatted = formatMetricValue(sourceEvaluation, metricName);
-            const targetFormatted = formatMetricValue(targetEvaluation, metricName);
-            let difference;
-            if (metricType === "Continuous" && sourceValue !== undefined && targetValue !== undefined) {
-                difference = targetValue - sourceValue;
-            }
-            return {
-                metricName,
-                metricType,
-                sourceValue,
-                targetValue,
-                sourceFormatted,
-                targetFormatted,
-                difference
-            };
+        return rows;
+    }, [
+        evaluation1,
+        evaluation2
+    ]);
+    const allValuesIdentical = React.useMemo(()=>{
+        if (comparisonData.length === 0) return false;
+        return comparisonData.every((r)=>{
+            if (r.metricType === "Continuous" && r.difference !== undefined) return r.difference === 0;
+            return r.formatted1 === r.formatted2;
         });
     }, [
-        sourceEvaluation,
-        targetEvaluation
+        comparisonData
     ]);
-    // Prepare options for dropdowns
     const evaluationOptions = React.useMemo(()=>{
         return normalizedEvaluations.map((evaluation)=>({
                 label: `${evaluation.name || "Unnamed Evaluation"} (${evaluation.agent_name})`,
@@ -113699,54 +114182,261 @@ const EvaluationsCompare = ({ open, onClose, sourceEvaluationId, targetEvaluatio
             width: 200,
             render: (name, record)=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
                     style: {
-                        fontWeight: 500
+                        fontWeight: theme.fontWeight.medium
                     }
                 }, name), /*#__PURE__*/ React.createElement("div", {
                     style: {
-                        fontSize: "12px",
-                        color: isDarkMode ? "#8c8c8c" : "#595959"
+                        fontSize: theme.fontSize.xs,
+                        color: theme.colors.mutedForeground
                     }
-                }, record.metricType))
+                }, record.evaluatorName, " • ", record.metricType))
         },
         {
-            title: sourceEvaluation?.name || "Source",
-            key: "source",
+            title: evaluation1?.name || "Evaluation 1",
+            key: "evaluation1",
             width: 150,
             render: (_, record)=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Tag, {
                     color: "blue"
-                }, record.sourceFormatted))
+                }, record.formatted1))
         },
         {
-            title: targetEvaluation?.name || "Target",
-            key: "target",
+            title: evaluation2?.name || "Evaluation 2",
+            key: "evaluation2",
             width: 150,
             render: (_, record)=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Tag, {
                     color: "green"
-                }, record.targetFormatted))
+                }, record.formatted2))
         },
         {
             title: "Difference",
             key: "difference",
             width: 120,
             render: (_, record)=>{
-                if (record.difference === undefined) return "-";
-                const isPositive = record.difference > 0;
-                const isNegative = record.difference < 0;
-                return /*#__PURE__*/ React.createElement(Tag, {
-                    color: isPositive ? "green" : isNegative ? "red" : "default"
-                }, isPositive ? "+" : "", record.difference.toFixed(1));
+                if (record.difference !== undefined) {
+                    const isPositive = record.difference > 0;
+                    const isNegative = record.difference < 0;
+                    return /*#__PURE__*/ React.createElement(Tag, {
+                        color: isPositive ? "green" : isNegative ? "red" : "default"
+                    }, isPositive ? "+" : "", record.difference.toFixed(1));
+                }
+                // Categorical: show "Different" when values differ
+                if (record.formatted1 !== record.formatted2) {
+                    return /*#__PURE__*/ React.createElement(Tag, {
+                        color: "orange"
+                    }, "Different");
+                }
+                return "-";
             }
         }
     ];
-    const extraButtonsIconSize = 24;
+    const evaluation1Label = evaluation1 ? `${evaluation1.name || "Unnamed Evaluation"} (${evaluation1.agent_name})` : "Select evaluation 1";
+    const evaluation2Label = evaluation2 ? `${evaluation2.name || "Unnamed Evaluation"} (${evaluation2.agent_name})` : "Select evaluation 2";
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, backHref && /*#__PURE__*/ React.createElement("a", {
+        href: backHref,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            marginBottom: 24,
+            color: theme.colors.mutedForeground,
+            textDecoration: "none",
+            fontSize: 14
+        }
+    }, /*#__PURE__*/ React.createElement(ArrowLeft, {
+        size: 16
+    }), "Back to Evaluations"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            marginBottom: theme.spacing.md,
+            color: theme.colors.mutedForeground
+        }
+    }, showEvaluationComparisonDropdowns ? "Select two evaluations to compare their metrics" : /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: theme.spacing.sm,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React.createElement("span", null, /*#__PURE__*/ React.createElement("strong", null, "Evaluation 1:"), " ", evaluation1Label), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            color: theme.colors.border
+        }
+    }, "•"), /*#__PURE__*/ React.createElement("span", null, /*#__PURE__*/ React.createElement("strong", null, "Evaluation 2:"), " ", evaluation2Label))), showEvaluationComparisonDropdowns && /*#__PURE__*/ React.createElement("div", {
+        style: {
+            marginBottom: theme.spacing.lg
+        }
+    }, /*#__PURE__*/ React.createElement(Space, {
+        size: "middle",
+        style: {
+            width: "100%"
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            flex: 1
+        }
+    }, /*#__PURE__*/ React.createElement("label", {
+        style: {
+            display: "block",
+            marginBottom: theme.spacing.sm,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.foreground
+        }
+    }, "Evaluation 1"), /*#__PURE__*/ React.createElement(Select, {
+        style: {
+            width: "100%"
+        },
+        placeholder: "Select evaluation 1",
+        value: evaluationId1,
+        onChange: (value)=>onEvaluationId1Change(value),
+        options: evaluationOptions,
+        showSearch: true,
+        loading: loading,
+        filterOption: (input, option)=>(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
+    })), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            flex: 1
+        }
+    }, /*#__PURE__*/ React.createElement("label", {
+        style: {
+            display: "block",
+            marginBottom: theme.spacing.sm,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.foreground
+        }
+    }, "Evaluation 2"), /*#__PURE__*/ React.createElement(Select, {
+        style: {
+            width: "100%"
+        },
+        placeholder: "Select evaluation 2",
+        value: evaluationId2,
+        onChange: (value)=>onEvaluationId2Change(value),
+        options: evaluationOptions,
+        showSearch: true,
+        loading: loading,
+        filterOption: (input, option)=>(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
+    })))), !evaluation1 || !evaluation2 ? /*#__PURE__*/ React.createElement("div", {
+        style: {
+            textAlign: "center",
+            padding: theme.spacing["2xl"],
+            color: theme.colors.mutedForeground
+        }
+    }, /*#__PURE__*/ React.createElement("p", null, "Please select both evaluations to compare")) : metricsMismatch ? /*#__PURE__*/ React.createElement(Alert, {
+        type: "error",
+        showIcon: true,
+        message: "Cannot compare evaluations",
+        description: "The two evaluations must have the same metrics in order to be diffed. Please select evaluations that share the same metric set."
+    }) : /*#__PURE__*/ React.createElement("div", null, allValuesIdentical && /*#__PURE__*/ React.createElement(Alert, {
+        type: "info",
+        showIcon: true,
+        message: "Evaluations are identical",
+        description: "All metric values match between the two evaluations.",
+        style: {
+            marginBottom: theme.spacing.lg
+        }
+    }), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: theme.spacing.lg,
+            marginBottom: theme.spacing.lg,
+            padding: theme.spacing.md,
+            borderRadius: theme.borderRadius.lg,
+            border: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.muted
+        }
+    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h3", {
+        style: {
+            margin: `0 0 ${theme.spacing.sm} 0`,
+            fontSize: theme.fontSize.base,
+            fontWeight: theme.fontWeight.semibold
+        }
+    }, "Evaluation 1: ", evaluation1.name || "Unnamed Evaluation"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: theme.fontSize.sm,
+            color: theme.colors.mutedForeground
+        }
+    }, /*#__PURE__*/ React.createElement("div", null, "Agent: ", evaluation1.agent_name), /*#__PURE__*/ React.createElement("div", null, "Runs: ", evaluation1.runs.length), /*#__PURE__*/ React.createElement("div", null, "Created: ", moment(evaluation1.created_at).format("YYYY-MM-DD HH:mm:ss")))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h3", {
+        style: {
+            margin: `0 0 ${theme.spacing.sm} 0`,
+            fontSize: theme.fontSize.base,
+            fontWeight: theme.fontWeight.semibold
+        }
+    }, "Evaluation 2: ", evaluation2.name || "Unnamed Evaluation"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: theme.fontSize.sm,
+            color: theme.colors.mutedForeground
+        }
+    }, /*#__PURE__*/ React.createElement("div", null, "Agent: ", evaluation2.agent_name), /*#__PURE__*/ React.createElement("div", null, "Runs: ", evaluation2.runs.length), /*#__PURE__*/ React.createElement("div", null, "Created: ", moment(evaluation2.created_at).format("YYYY-MM-DD HH:mm:ss"))))), /*#__PURE__*/ React.createElement("h3", {
+        style: {
+            margin: `0 0 ${theme.spacing.md} 0`,
+            fontSize: theme.fontSize.lg,
+            fontWeight: theme.fontWeight.semibold
+        }
+    }, "Metrics Comparison"), /*#__PURE__*/ React.createElement(ForwardTable, {
+        columns: comparisonColumns,
+        dataSource: comparisonData,
+        rowKey: "rowKey",
+        pagination: false,
+        style: {
+            background: theme.colors.card
+        },
+        rowClassName: (record)=>{
+            const hasDiff = record.metricType === "Continuous" ? record.difference !== undefined && record.difference !== 0 : record.formatted1 !== record.formatted2;
+            return hasDiff ? "evaluations-compare-diff-row" : "";
+        }
+    })));
+};
+
+const extraButtonsIconSize = 24;
+const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2, evaluations, onEvaluationId1Change, onEvaluationId2Change })=>{
+    const handleCopyIds = async ()=>{
+        if (!evaluationId1 || !evaluationId2) {
+            staticMethods.error("No evaluation IDs available");
+            return;
+        }
+        try {
+            const idsText = `Evaluation 1: ${evaluationId1}\nEvaluation 2: ${evaluationId2}`;
+            await navigator.clipboard.writeText(idsText);
+            staticMethods.success("Evaluation IDs copied to clipboard");
+        } catch (err) {
+            staticMethods.error("Failed to copy evaluation IDs");
+        }
+    };
+    const handleShare = async ()=>{
+        if (!evaluationId1 || !evaluationId2) {
+            staticMethods.error("No evaluations available to share");
+            return;
+        }
+        const shareUrl = `${window.location.origin}${window.location.pathname}#/evaluations?compare=${evaluationId1},${evaluationId2}`;
+        if (navigator.share) {
+            try {
+                await navigator.share({
+                    title: "Evaluation Comparison",
+                    text: `Compare evaluations: ${evaluationId1} vs ${evaluationId2}`,
+                    url: shareUrl
+                });
+                return;
+            } catch (err) {
+            // User cancelled or error occurred, fall back to clipboard
+            }
+        }
+        try {
+            await navigator.clipboard.writeText(shareUrl);
+            staticMethods.success("Share link copied to clipboard");
+        } catch (err) {
+            staticMethods.error("Failed to copy share link");
+        }
+    };
     return /*#__PURE__*/ React.createElement(Drawer$2, {
         title: "Compare Evaluations",
         placement: "right",
         size: "60%",
         open: open,
         onClose: onClose,
-        extra: /*#__PURE__*/ React.createElement(Space, {
-            size: "middle"
+        extra: /*#__PURE__*/ React.createElement("div", {
+            style: {
+                display: "flex",
+                gap: 8
+            }
         }, /*#__PURE__*/ React.createElement(Tooltip, {
             title: "Copy IDs to Clipboard"
         }, /*#__PURE__*/ React.createElement(Button$1, {
@@ -113755,7 +114445,7 @@ const EvaluationsCompare = ({ open, onClose, sourceEvaluationId, targetEvaluatio
                 size: extraButtonsIconSize
             }),
             onClick: handleCopyIds,
-            disabled: !sourceEvaluationId || !targetEvaluationId
+            disabled: !evaluationId1 || !evaluationId2
         })), /*#__PURE__*/ React.createElement(Tooltip, {
             title: "Share"
         }, /*#__PURE__*/ React.createElement(Button$1, {
@@ -113764,123 +114454,21 @@ const EvaluationsCompare = ({ open, onClose, sourceEvaluationId, targetEvaluatio
                 size: extraButtonsIconSize
             }),
             onClick: handleShare,
-            disabled: !sourceEvaluationId || !targetEvaluationId
+            disabled: !evaluationId1 || !evaluationId2
         }))),
         styles: {
             body: {
                 padding: "24px"
             }
         }
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            marginBottom: "16px",
-            color: isDarkMode ? "#8c8c8c" : "#595959"
-        }
-    }, "Select two evaluations to compare their metrics"), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            marginBottom: "24px"
-        }
-    }, /*#__PURE__*/ React.createElement(Space, {
-        size: "middle",
-        style: {
-            width: "100%"
-        }
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            flex: 1
-        }
-    }, /*#__PURE__*/ React.createElement("label", {
-        style: {
-            display: "block",
-            marginBottom: "8px",
-            fontWeight: 500,
-            color: isDarkMode ? "#e5e7eb" : "#1f2937"
-        }
-    }, "Source Evaluation"), /*#__PURE__*/ React.createElement(Select, {
-        style: {
-            width: "100%"
-        },
-        placeholder: "Select source evaluation",
-        value: sourceEvaluationId,
-        onChange: (value)=>onSourceChange(value),
-        options: evaluationOptions,
-        showSearch: true,
-        filterOption: (input, option)=>(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
-    })), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            flex: 1
-        }
-    }, /*#__PURE__*/ React.createElement("label", {
-        style: {
-            display: "block",
-            marginBottom: "8px",
-            fontWeight: 500,
-            color: isDarkMode ? "#e5e7eb" : "#1f2937"
-        }
-    }, "Target Evaluation"), /*#__PURE__*/ React.createElement(Select, {
-        style: {
-            width: "100%"
-        },
-        placeholder: "Select target evaluation",
-        value: targetEvaluationId,
-        onChange: (value)=>onTargetChange(value),
-        options: evaluationOptions,
-        showSearch: true,
-        filterOption: (input, option)=>(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
-    })))), !sourceEvaluation || !targetEvaluation ? /*#__PURE__*/ React.createElement("div", {
-        style: {
-            textAlign: "center",
-            padding: "48px",
-            color: isDarkMode ? "#8c8c8c" : "#595959"
-        }
-    }, /*#__PURE__*/ React.createElement("p", null, "Please select both source and target evaluations to compare")) : /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: "24px",
-            marginBottom: "24px",
-            padding: "16px",
-            borderRadius: "8px",
-            border: `1px solid ${isDarkMode ? "#2d2d2d" : "#e5e7eb"}`,
-            backgroundColor: isDarkMode ? "#1a1a1a" : "#f9fafb"
-        }
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h3", {
-        style: {
-            margin: "0 0 12px 0",
-            fontSize: "16px",
-            fontWeight: 600
-        }
-    }, "Source: ", sourceEvaluation.name || "Unnamed Evaluation"), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            fontSize: "14px",
-            color: isDarkMode ? "#a3a3a3" : "#6b7280"
-        }
-    }, /*#__PURE__*/ React.createElement("div", null, "Agent: ", sourceEvaluation.agent_name), /*#__PURE__*/ React.createElement("div", null, "Runs: ", sourceEvaluation.runs.length), /*#__PURE__*/ React.createElement("div", null, "Created: ", moment(sourceEvaluation.created_at).format("YYYY-MM-DD HH:mm:ss")))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h3", {
-        style: {
-            margin: "0 0 12px 0",
-            fontSize: "16px",
-            fontWeight: 600
-        }
-    }, "Target: ", targetEvaluation.name || "Unnamed Evaluation"), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            fontSize: "14px",
-            color: isDarkMode ? "#a3a3a3" : "#6b7280"
-        }
-    }, /*#__PURE__*/ React.createElement("div", null, "Agent: ", targetEvaluation.agent_name), /*#__PURE__*/ React.createElement("div", null, "Runs: ", targetEvaluation.runs.length), /*#__PURE__*/ React.createElement("div", null, "Created: ", moment(targetEvaluation.created_at).format("YYYY-MM-DD HH:mm:ss"))))), /*#__PURE__*/ React.createElement("h3", {
-        style: {
-            margin: "0 0 16px 0",
-            fontSize: "18px",
-            fontWeight: 600
-        }
-    }, "Metrics Comparison"), /*#__PURE__*/ React.createElement(ForwardTable, {
-        columns: comparisonColumns,
-        dataSource: comparisonData,
-        rowKey: "metricName",
-        pagination: false,
-        style: {
-            background: isDarkMode ? "#141414" : "#fff"
-        }
-    })));
+    }, /*#__PURE__*/ React.createElement(EvaluationsCompareView, {
+        evaluations: evaluations,
+        evaluationId1: evaluationId1,
+        evaluationId2: evaluationId2,
+        onEvaluationId1Change: onEvaluationId1Change,
+        onEvaluationId2Change: onEvaluationId2Change,
+        showEvaluationComparisonDropdowns: false
+    }));
 };
 
 const defaultGetEvaluatorResultsHref = (evaluationId, evaluatorId)=>`#/evaluations/${evaluationId}/results/${evaluatorId}`;
@@ -114114,13 +114702,23 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
     })))));
 };
 
-const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, showFilters = true, showCompare = true, emptyMessage, title })=>{
+const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title })=>{
     const { theme } = useTheme$1();
     const [selectedAgents, setSelectedAgents] = React.useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
     const [compareDrawerOpen, setCompareDrawerOpen] = React.useState(false);
-    const [sourceEvaluationId, setSourceEvaluationId] = React.useState(null);
-    const [targetEvaluationId, setTargetEvaluationId] = React.useState(null);
+    const [evaluationId1, setEvaluationId1] = React.useState(null);
+    const [evaluationId2, setEvaluationId2] = React.useState(null);
+    // Sync drawer when compare param comes from URL
+    React.useEffect(()=>{
+        if (compareIdsFromUrl) {
+            setEvaluationId1(compareIdsFromUrl[0]);
+            setEvaluationId2(compareIdsFromUrl[1]);
+            setCompareDrawerOpen(true);
+        }
+    }, [
+        compareIdsFromUrl
+    ]);
     const [selectedEvaluation, setSelectedEvaluation] = React.useState(null);
     const [detailsDrawerOpen, setDetailsDrawerOpen] = React.useState(false);
     const [pageSize, setPageSize] = React.useState(50);
@@ -114184,14 +114782,23 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         if (selectedRowKeys.length === 2 && onCompare) {
             onCompare(selectedRowKeys[0], selectedRowKeys[1]);
         } else if (selectedRowKeys.length === 2 && !onCompare) {
-            setSourceEvaluationId(selectedRowKeys[0]);
-            setTargetEvaluationId(selectedRowKeys[1]);
+            setEvaluationId1(selectedRowKeys[0]);
+            setEvaluationId2(selectedRowKeys[1]);
             setCompareDrawerOpen(true);
         }
     };
     // Handle drawer close
     const handleDrawerClose = ()=>{
         setCompareDrawerOpen(false);
+        onCompareUrlChange?.(null, null);
+    };
+    const handleEvaluationId1Change = (id)=>{
+        setEvaluationId1(id);
+        onCompareUrlChange?.(id, evaluationId2);
+    };
+    const handleEvaluationId2Change = (id)=>{
+        setEvaluationId2(id);
+        onCompareUrlChange?.(evaluationId1, id);
     };
     // Handle row click to open evaluation details
     const handleRowClick = (record)=>{
@@ -114392,14 +114999,14 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
                     cursor: "pointer"
                 }
             })
-    }), !onCompare && /*#__PURE__*/ React.createElement(EvaluationsCompare, {
+    }), compareDrawerOpen && /*#__PURE__*/ React.createElement(EvaluationsCompareDrawer, {
         open: compareDrawerOpen,
         onClose: handleDrawerClose,
-        sourceEvaluationId: sourceEvaluationId,
-        targetEvaluationId: targetEvaluationId,
+        evaluationId1: evaluationId1,
+        evaluationId2: evaluationId2,
         evaluations: normalized,
-        onSourceChange: setSourceEvaluationId,
-        onTargetChange: setTargetEvaluationId
+        onEvaluationId1Change: onCompareUrlChange ? handleEvaluationId1Change : setEvaluationId1,
+        onEvaluationId2Change: onCompareUrlChange ? handleEvaluationId2Change : setEvaluationId2
     }), !onRowClick && /*#__PURE__*/ React.createElement(EvaluationDetailsDrawer, {
         evaluation: selectedEvaluation,
         open: detailsDrawerOpen,
@@ -114407,6 +115014,1938 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
     }));
 };
 
+function invariant(value, message) {
+    if (value === false || value === null || typeof value === "undefined") {
+        throw new Error(message);
+    }
+}
+function warning(cond, message) {
+    if (!cond) {
+        if (typeof console !== "undefined") console.warn(message);
+        try {
+            throw new Error(message);
+        } catch (e) {}
+    }
+}
+function createPath({ pathname = "/", search = "", hash = "" }) {
+    if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
+    if (hash && hash !== "#") pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
+    return pathname;
+}
+function parsePath(path) {
+    let parsedPath = {};
+    if (path) {
+        let hashIndex = path.indexOf("#");
+        if (hashIndex >= 0) {
+            parsedPath.hash = path.substring(hashIndex);
+            path = path.substring(0, hashIndex);
+        }
+        let searchIndex = path.indexOf("?");
+        if (searchIndex >= 0) {
+            parsedPath.search = path.substring(searchIndex);
+            path = path.substring(0, searchIndex);
+        }
+        if (path) {
+            parsedPath.pathname = path;
+        }
+    }
+    return parsedPath;
+}
+function matchRoutes(routes, locationArg, basename = "/") {
+    return matchRoutesImpl(routes, locationArg, basename, false);
+}
+function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
+    let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+    let pathname = stripBasename(location.pathname || "/", basename);
+    if (pathname == null) {
+        return null;
+    }
+    let branches = flattenRoutes(routes);
+    rankRouteBranches(branches);
+    let matches = null;
+    for(let i = 0; matches == null && i < branches.length; ++i){
+        let decoded = decodePath(pathname);
+        matches = matchRouteBranch(branches[i], decoded, allowPartial);
+    }
+    return matches;
+}
+function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "", _hasParentOptionalSegments = false) {
+    let flattenRoute = (route, index, hasParentOptionalSegments = _hasParentOptionalSegments, relativePath)=>{
+        let meta = {
+            relativePath: relativePath === void 0 ? route.path || "" : relativePath,
+            caseSensitive: route.caseSensitive === true,
+            childrenIndex: index,
+            route
+        };
+        if (meta.relativePath.startsWith("/")) {
+            if (!meta.relativePath.startsWith(parentPath) && hasParentOptionalSegments) {
+                return;
+            }
+            invariant(meta.relativePath.startsWith(parentPath), `Absolute route path "${meta.relativePath}" nested under path "${parentPath}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`);
+            meta.relativePath = meta.relativePath.slice(parentPath.length);
+        }
+        let path = joinPaths([
+            parentPath,
+            meta.relativePath
+        ]);
+        let routesMeta = parentsMeta.concat(meta);
+        if (route.children && route.children.length > 0) {
+            invariant(// Our types know better, but runtime JS may not!
+            // @ts-expect-error
+            route.index !== true, `Index routes must not have child routes. Please remove all child routes from route path "${path}".`);
+            flattenRoutes(route.children, branches, routesMeta, path, hasParentOptionalSegments);
+        }
+        if (route.path == null && !route.index) {
+            return;
+        }
+        branches.push({
+            path,
+            score: computeScore(path, route.index),
+            routesMeta
+        });
+    };
+    routes.forEach((route, index)=>{
+        if (route.path === "" || !route.path?.includes("?")) {
+            flattenRoute(route, index);
+        } else {
+            for (let exploded of explodeOptionalSegments(route.path)){
+                flattenRoute(route, index, true, exploded);
+            }
+        }
+    });
+    return branches;
+}
+function explodeOptionalSegments(path) {
+    let segments = path.split("/");
+    if (segments.length === 0) return [];
+    let [first, ...rest] = segments;
+    let isOptional = first.endsWith("?");
+    let required = first.replace(/\?$/, "");
+    if (rest.length === 0) {
+        return isOptional ? [
+            required,
+            ""
+        ] : [
+            required
+        ];
+    }
+    let restExploded = explodeOptionalSegments(rest.join("/"));
+    let result = [];
+    result.push(...restExploded.map((subpath)=>subpath === "" ? required : [
+            required,
+            subpath
+        ].join("/")));
+    if (isOptional) {
+        result.push(...restExploded);
+    }
+    return result.map((exploded)=>path.startsWith("/") && exploded === "" ? "/" : exploded);
+}
+function rankRouteBranches(branches) {
+    branches.sort((a, b)=>a.score !== b.score ? b.score - a.score : compareIndexes(a.routesMeta.map((meta)=>meta.childrenIndex), b.routesMeta.map((meta)=>meta.childrenIndex)));
+}
+var paramRe = /^:[\w-]+$/;
+var dynamicSegmentValue = 3;
+var indexRouteValue = 2;
+var emptySegmentValue = 1;
+var staticSegmentValue = 10;
+var splatPenalty = -2;
+var isSplat = (s)=>s === "*";
+function computeScore(path, index) {
+    let segments = path.split("/");
+    let initialScore = segments.length;
+    if (segments.some(isSplat)) {
+        initialScore += splatPenalty;
+    }
+    if (index) {
+        initialScore += indexRouteValue;
+    }
+    return segments.filter((s)=>!isSplat(s)).reduce((score, segment)=>score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue), initialScore);
+}
+function compareIndexes(a, b) {
+    let siblings = a.length === b.length && a.slice(0, -1).every((n, i)=>n === b[i]);
+    return siblings ? // If two routes are siblings, we should try to match the earlier sibling
+    // first. This allows people to have fine-grained control over the matching
+    // behavior by simply putting routes with identical paths in the order they
+    // want them tried.
+    a[a.length - 1] - b[b.length - 1] : // Otherwise, it doesn't really make sense to rank non-siblings by index,
+    // so they sort equally.
+    0;
+}
+function matchRouteBranch(branch, pathname, allowPartial = false) {
+    let { routesMeta } = branch;
+    let matchedParams = {};
+    let matchedPathname = "/";
+    let matches = [];
+    for(let i = 0; i < routesMeta.length; ++i){
+        let meta = routesMeta[i];
+        let end = i === routesMeta.length - 1;
+        let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
+        let match = matchPath({
+            path: meta.relativePath,
+            caseSensitive: meta.caseSensitive,
+            end
+        }, remainingPathname);
+        let route = meta.route;
+        if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
+            match = matchPath({
+                path: meta.relativePath,
+                caseSensitive: meta.caseSensitive,
+                end: false
+            }, remainingPathname);
+        }
+        if (!match) {
+            return null;
+        }
+        Object.assign(matchedParams, match.params);
+        matches.push({
+            // TODO: Can this as be avoided?
+            params: matchedParams,
+            pathname: joinPaths([
+                matchedPathname,
+                match.pathname
+            ]),
+            pathnameBase: normalizePathname(joinPaths([
+                matchedPathname,
+                match.pathnameBase
+            ])),
+            route
+        });
+        if (match.pathnameBase !== "/") {
+            matchedPathname = joinPaths([
+                matchedPathname,
+                match.pathnameBase
+            ]);
+        }
+    }
+    return matches;
+}
+function matchPath(pattern, pathname) {
+    if (typeof pattern === "string") {
+        pattern = {
+            path: pattern,
+            caseSensitive: false,
+            end: true
+        };
+    }
+    let [matcher, compiledParams] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
+    let match = pathname.match(matcher);
+    if (!match) return null;
+    let matchedPathname = match[0];
+    let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+    let captureGroups = match.slice(1);
+    let params = compiledParams.reduce((memo2, { paramName, isOptional }, index)=>{
+        if (paramName === "*") {
+            let splatValue = captureGroups[index] || "";
+            pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
+        }
+        const value = captureGroups[index];
+        if (isOptional && !value) {
+            memo2[paramName] = void 0;
+        } else {
+            memo2[paramName] = (value || "").replace(/%2F/g, "/");
+        }
+        return memo2;
+    }, {});
+    return {
+        params,
+        pathname: matchedPathname,
+        pathnameBase,
+        pattern
+    };
+}
+function compilePath(path, caseSensitive = false, end = true) {
+    warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), `Route path "${path}" will be treated as if it were "${path.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${path.replace(/\*$/, "/*")}".`);
+    let params = [];
+    let regexpSource = "^" + path.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(/\/:([\w-]+)(\?)?/g, (match, paramName, isOptional, index, str)=>{
+        params.push({
+            paramName,
+            isOptional: isOptional != null
+        });
+        if (isOptional) {
+            let nextChar = str.charAt(index + match.length);
+            if (nextChar && nextChar !== "/") {
+                return "/([^\\/]*)";
+            }
+            return "(?:/([^\\/]*))?";
+        }
+        return "/([^\\/]+)";
+    }).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
+    if (path.endsWith("*")) {
+        params.push({
+            paramName: "*"
+        });
+        regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
+    } else if (end) {
+        regexpSource += "\\/*$";
+    } else if (path !== "" && path !== "/") {
+        regexpSource += "(?:(?=\\/|$))";
+    } else ;
+    let matcher = new RegExp(regexpSource, caseSensitive ? void 0 : "i");
+    return [
+        matcher,
+        params
+    ];
+}
+function decodePath(value) {
+    try {
+        return value.split("/").map((v)=>decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
+    } catch (error) {
+        warning(false, `The URL path "${value}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${error}).`);
+        return value;
+    }
+}
+function stripBasename(pathname, basename) {
+    if (basename === "/") return pathname;
+    if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
+        return null;
+    }
+    let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
+    let nextChar = pathname.charAt(startIndex);
+    if (nextChar && nextChar !== "/") {
+        return null;
+    }
+    return pathname.slice(startIndex) || "/";
+}
+var ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+function resolvePath(to, fromPathname = "/") {
+    let { pathname: toPathname, search = "", hash = "" } = typeof to === "string" ? parsePath(to) : to;
+    let pathname;
+    if (toPathname) {
+        toPathname = toPathname.replace(/\/\/+/g, "/");
+        if (toPathname.startsWith("/")) {
+            pathname = resolvePathname(toPathname.substring(1), "/");
+        } else {
+            pathname = resolvePathname(toPathname, fromPathname);
+        }
+    } else {
+        pathname = fromPathname;
+    }
+    return {
+        pathname,
+        search: normalizeSearch(search),
+        hash: normalizeHash(hash)
+    };
+}
+function resolvePathname(relativePath, fromPathname) {
+    let segments = fromPathname.replace(/\/+$/, "").split("/");
+    let relativeSegments = relativePath.split("/");
+    relativeSegments.forEach((segment)=>{
+        if (segment === "..") {
+            if (segments.length > 1) segments.pop();
+        } else if (segment !== ".") {
+            segments.push(segment);
+        }
+    });
+    return segments.length > 1 ? segments.join("/") : "/";
+}
+function getInvalidPathError(char, field, dest, path) {
+    return `Cannot include a '${char}' character in a manually specified \`to.${field}\` field [${JSON.stringify(path)}].  Please separate it out to the \`to.${dest}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`;
+}
+function getPathContributingMatches(matches) {
+    return matches.filter((match, index)=>index === 0 || match.route.path && match.route.path.length > 0);
+}
+function getResolveToMatches(matches) {
+    let pathMatches = getPathContributingMatches(matches);
+    return pathMatches.map((match, idx)=>idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase);
+}
+function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {
+    let to;
+    if (typeof toArg === "string") {
+        to = parsePath(toArg);
+    } else {
+        to = {
+            ...toArg
+        };
+        invariant(!to.pathname || !to.pathname.includes("?"), getInvalidPathError("?", "pathname", "search", to));
+        invariant(!to.pathname || !to.pathname.includes("#"), getInvalidPathError("#", "pathname", "hash", to));
+        invariant(!to.search || !to.search.includes("#"), getInvalidPathError("#", "search", "hash", to));
+    }
+    let isEmptyPath = toArg === "" || to.pathname === "";
+    let toPathname = isEmptyPath ? "/" : to.pathname;
+    let from;
+    if (toPathname == null) {
+        from = locationPathname;
+    } else {
+        let routePathnameIndex = routePathnames.length - 1;
+        if (!isPathRelative && toPathname.startsWith("..")) {
+            let toSegments = toPathname.split("/");
+            while(toSegments[0] === ".."){
+                toSegments.shift();
+                routePathnameIndex -= 1;
+            }
+            to.pathname = toSegments.join("/");
+        }
+        from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+    }
+    let path = resolvePath(to, from);
+    let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
+    let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
+    if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
+        path.pathname += "/";
+    }
+    return path;
+}
+var joinPaths = (paths)=>paths.join("/").replace(/\/\/+/g, "/");
+var normalizePathname = (pathname)=>pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
+var normalizeSearch = (search)=>!search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
+var normalizeHash = (hash)=>!hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
+var ErrorResponseImpl = class {
+    constructor(status, statusText, data2, internal = false){
+        this.status = status;
+        this.statusText = statusText || "";
+        this.internal = internal;
+        if (data2 instanceof Error) {
+            this.data = data2.toString();
+            this.error = data2;
+        } else {
+            this.data = data2;
+        }
+    }
+};
+function isRouteErrorResponse(error) {
+    return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
+}
+function getRoutePattern(matches) {
+    return matches.map((m)=>m.route.path).filter(Boolean).join("/").replace(/\/\/*/g, "/") || "/";
+}
+var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function parseToInfo(_to, basename) {
+    let to = _to;
+    if (typeof to !== "string" || !ABSOLUTE_URL_REGEX.test(to)) {
+        return {
+            absoluteURL: void 0,
+            isExternal: false,
+            to
+        };
+    }
+    let absoluteURL = to;
+    let isExternal = false;
+    if (isBrowser) {
+        try {
+            let currentUrl = new URL(window.location.href);
+            let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
+            let path = stripBasename(targetUrl.pathname, basename);
+            if (targetUrl.origin === currentUrl.origin && path != null) {
+                to = path + targetUrl.search + targetUrl.hash;
+            } else {
+                isExternal = true;
+            }
+        } catch (e) {
+            warning(false, `<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`);
+        }
+    }
+    return {
+        absoluteURL,
+        isExternal,
+        to
+    };
+}
+Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+// lib/router/router.ts
+var validMutationMethodsArr = [
+    "POST",
+    "PUT",
+    "PATCH",
+    "DELETE"
+];
+new Set(validMutationMethodsArr);
+var validRequestMethodsArr = [
+    "GET",
+    ...validMutationMethodsArr
+];
+new Set(validRequestMethodsArr);
+var DataRouterContext = React__namespace.createContext(null);
+DataRouterContext.displayName = "DataRouter";
+var DataRouterStateContext = React__namespace.createContext(null);
+DataRouterStateContext.displayName = "DataRouterState";
+var RSCRouterContext = React__namespace.createContext(false);
+var ViewTransitionContext = React__namespace.createContext({
+    isTransitioning: false
+});
+ViewTransitionContext.displayName = "ViewTransition";
+var FetchersContext = React__namespace.createContext(/* @__PURE__ */ new Map());
+FetchersContext.displayName = "Fetchers";
+var AwaitContext = React__namespace.createContext(null);
+AwaitContext.displayName = "Await";
+var NavigationContext = React__namespace.createContext(null);
+NavigationContext.displayName = "Navigation";
+var LocationContext = React__namespace.createContext(null);
+LocationContext.displayName = "Location";
+var RouteContext = React__namespace.createContext({
+    outlet: null,
+    matches: [],
+    isDataRoute: false
+});
+RouteContext.displayName = "Route";
+var RouteErrorContext = React__namespace.createContext(null);
+RouteErrorContext.displayName = "RouteError";
+// lib/errors.ts
+var ERROR_DIGEST_BASE = "REACT_ROUTER_ERROR";
+var ERROR_DIGEST_REDIRECT = "REDIRECT";
+var ERROR_DIGEST_ROUTE_ERROR_RESPONSE = "ROUTE_ERROR_RESPONSE";
+function decodeRedirectErrorDigest(digest) {
+    if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_REDIRECT}:{`)) {
+        try {
+            let parsed = JSON.parse(digest.slice(28));
+            if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string" && typeof parsed.location === "string" && typeof parsed.reloadDocument === "boolean" && typeof parsed.replace === "boolean") {
+                return parsed;
+            }
+        } catch  {}
+    }
+}
+function decodeRouteErrorResponseDigest(digest) {
+    if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_ROUTE_ERROR_RESPONSE}:{`)) {
+        try {
+            let parsed = JSON.parse(digest.slice(40));
+            if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string") {
+                return new ErrorResponseImpl(parsed.status, parsed.statusText, parsed.data);
+            }
+        } catch  {}
+    }
+}
+// lib/hooks.tsx
+function useHref(to, { relative } = {}) {
+    invariant(useInRouterContext(), // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useHref() may be used only in the context of a <Router> component.`);
+    let { basename, navigator } = React__namespace.useContext(NavigationContext);
+    let { hash, pathname, search } = useResolvedPath(to, {
+        relative
+    });
+    let joinedPathname = pathname;
+    if (basename !== "/") {
+        joinedPathname = pathname === "/" ? basename : joinPaths([
+            basename,
+            pathname
+        ]);
+    }
+    return navigator.createHref({
+        pathname: joinedPathname,
+        search,
+        hash
+    });
+}
+function useInRouterContext() {
+    return React__namespace.useContext(LocationContext) != null;
+}
+function useLocation() {
+    invariant(useInRouterContext(), // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useLocation() may be used only in the context of a <Router> component.`);
+    return React__namespace.useContext(LocationContext).location;
+}
+var navigateEffectWarning = `You should call navigate() in a React.useEffect(), not when your component is first rendered.`;
+function useIsomorphicLayoutEffect$1(cb) {
+    let isStatic = React__namespace.useContext(NavigationContext).static;
+    if (!isStatic) {
+        React__namespace.useLayoutEffect(cb);
+    }
+}
+function useNavigate() {
+    let { isDataRoute } = React__namespace.useContext(RouteContext);
+    return isDataRoute ? useNavigateStable() : useNavigateUnstable();
+}
+function useNavigateUnstable() {
+    invariant(useInRouterContext(), // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useNavigate() may be used only in the context of a <Router> component.`);
+    let dataRouterContext = React__namespace.useContext(DataRouterContext);
+    let { basename, navigator } = React__namespace.useContext(NavigationContext);
+    let { matches } = React__namespace.useContext(RouteContext);
+    let { pathname: locationPathname } = useLocation();
+    let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+    let activeRef = React__namespace.useRef(false);
+    useIsomorphicLayoutEffect$1(()=>{
+        activeRef.current = true;
+    });
+    let navigate = React__namespace.useCallback((to, options = {})=>{
+        warning(activeRef.current, navigateEffectWarning);
+        if (!activeRef.current) return;
+        if (typeof to === "number") {
+            navigator.go(to);
+            return;
+        }
+        let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, options.relative === "path");
+        if (dataRouterContext == null && basename !== "/") {
+            path.pathname = path.pathname === "/" ? basename : joinPaths([
+                basename,
+                path.pathname
+            ]);
+        }
+        (!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
+    }, [
+        basename,
+        navigator,
+        routePathnamesJson,
+        locationPathname,
+        dataRouterContext
+    ]);
+    return navigate;
+}
+React__namespace.createContext(null);
+function useResolvedPath(to, { relative } = {}) {
+    let { matches } = React__namespace.useContext(RouteContext);
+    let { pathname: locationPathname } = useLocation();
+    let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+    return React__namespace.useMemo(()=>resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [
+        to,
+        routePathnamesJson,
+        locationPathname,
+        relative
+    ]);
+}
+function useRoutesImpl(routes, locationArg, dataRouterOpts) {
+    invariant(useInRouterContext(), // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useRoutes() may be used only in the context of a <Router> component.`);
+    let { navigator } = React__namespace.useContext(NavigationContext);
+    let { matches: parentMatches } = React__namespace.useContext(RouteContext);
+    let routeMatch = parentMatches[parentMatches.length - 1];
+    let parentParams = routeMatch ? routeMatch.params : {};
+    let parentPathname = routeMatch ? routeMatch.pathname : "/";
+    let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
+    let parentRoute = routeMatch && routeMatch.route;
+    {
+        let parentPath = parentRoute && parentRoute.path || "";
+        warningOnce(parentPathname, !parentRoute || parentPath.endsWith("*") || parentPath.endsWith("*?"), `You rendered descendant <Routes> (or called \`useRoutes()\`) at "${parentPathname}" (under <Route path="${parentPath}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="${parentPath}"> to <Route path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`);
+    }
+    let locationFromContext = useLocation();
+    let location;
+    {
+        location = locationFromContext;
+    }
+    let pathname = location.pathname || "/";
+    let remainingPathname = pathname;
+    if (parentPathnameBase !== "/") {
+        let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+        let segments = pathname.replace(/^\//, "").split("/");
+        remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+    }
+    let matches = matchRoutes(routes, {
+        pathname: remainingPathname
+    });
+    {
+        warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `);
+        warning(matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0, `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`);
+    }
+    let renderedMatches = _renderMatches(matches && matches.map((match)=>Object.assign({}, match, {
+            params: Object.assign({}, parentParams, match.params),
+            pathname: joinPaths([
+                parentPathnameBase,
+                // Re-encode pathnames that were decoded inside matchRoutes.
+                // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+                // `new URL()` internally and we need to prevent it from treating
+                // them as separators
+                navigator.encodeLocation ? navigator.encodeLocation(match.pathname.replace(/\?/g, "%3F").replace(/#/g, "%23")).pathname : match.pathname
+            ]),
+            pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([
+                parentPathnameBase,
+                // Re-encode pathnames that were decoded inside matchRoutes
+                // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+                // `new URL()` internally and we need to prevent it from treating
+                // them as separators
+                navigator.encodeLocation ? navigator.encodeLocation(match.pathnameBase.replace(/\?/g, "%3F").replace(/#/g, "%23")).pathname : match.pathnameBase
+            ])
+        })), parentMatches, dataRouterOpts);
+    return renderedMatches;
+}
+function DefaultErrorComponent() {
+    let error = useRouteError();
+    let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);
+    let stack = error instanceof Error ? error.stack : null;
+    let lightgrey = "rgba(200,200,200, 0.5)";
+    let preStyles = {
+        padding: "0.5rem",
+        backgroundColor: lightgrey
+    };
+    let codeStyles = {
+        padding: "2px 4px",
+        backgroundColor: lightgrey
+    };
+    let devInfo = null;
+    {
+        console.error("Error handled by React Router default ErrorBoundary:", error);
+        devInfo = /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("p", null, "\u{1F4BF} Hey developer \u{1F44B}"), /* @__PURE__ */ React__namespace.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ React__namespace.createElement("code", {
+            style: codeStyles
+        }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ React__namespace.createElement("code", {
+            style: codeStyles
+        }, "errorElement"), " prop on your route."));
+    }
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ React__namespace.createElement("h3", {
+        style: {
+            fontStyle: "italic"
+        }
+    }, message), stack ? /* @__PURE__ */ React__namespace.createElement("pre", {
+        style: preStyles
+    }, stack) : null, devInfo);
+}
+var defaultErrorElement = /* @__PURE__ */ React__namespace.createElement(DefaultErrorComponent, null);
+var RenderErrorBoundary = class extends React__namespace.Component {
+    static getDerivedStateFromError(error) {
+        return {
+            error
+        };
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (state.location !== props.location || state.revalidation !== "idle" && props.revalidation === "idle") {
+            return {
+                error: props.error,
+                location: props.location,
+                revalidation: props.revalidation
+            };
+        }
+        return {
+            error: props.error !== void 0 ? props.error : state.error,
+            location: state.location,
+            revalidation: props.revalidation || state.revalidation
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        } else {
+            console.error("React Router caught the following error during render", error);
+        }
+    }
+    render() {
+        let error = this.state.error;
+        if (this.context && typeof error === "object" && error && "digest" in error && typeof error.digest === "string") {
+            const decoded = decodeRouteErrorResponseDigest(error.digest);
+            if (decoded) error = decoded;
+        }
+        let result = error !== void 0 ? /* @__PURE__ */ React__namespace.createElement(RouteContext.Provider, {
+            value: this.props.routeContext
+        }, /* @__PURE__ */ React__namespace.createElement(RouteErrorContext.Provider, {
+            value: error,
+            children: this.props.component
+        })) : this.props.children;
+        if (this.context) {
+            return /* @__PURE__ */ React__namespace.createElement(RSCErrorHandler, {
+                error
+            }, result);
+        }
+        return result;
+    }
+    constructor(props){
+        super(props);
+        this.state = {
+            location: props.location,
+            revalidation: props.revalidation,
+            error: props.error
+        };
+    }
+};
+RenderErrorBoundary.contextType = RSCRouterContext;
+var errorRedirectHandledMap = /* @__PURE__ */ new WeakMap();
+function RSCErrorHandler({ children, error }) {
+    let { basename } = React__namespace.useContext(NavigationContext);
+    if (typeof error === "object" && error && "digest" in error && typeof error.digest === "string") {
+        let redirect2 = decodeRedirectErrorDigest(error.digest);
+        if (redirect2) {
+            let existingRedirect = errorRedirectHandledMap.get(error);
+            if (existingRedirect) throw existingRedirect;
+            let parsed = parseToInfo(redirect2.location, basename);
+            if (isBrowser && !errorRedirectHandledMap.get(error)) {
+                if (parsed.isExternal || redirect2.reloadDocument) {
+                    window.location.href = parsed.absoluteURL || parsed.to;
+                } else {
+                    const redirectPromise = Promise.resolve().then(()=>window.__reactRouterDataRouter.navigate(parsed.to, {
+                            replace: redirect2.replace
+                        }));
+                    errorRedirectHandledMap.set(error, redirectPromise);
+                    throw redirectPromise;
+                }
+            }
+            return /* @__PURE__ */ React__namespace.createElement("meta", {
+                httpEquiv: "refresh",
+                content: `0;url=${parsed.absoluteURL || parsed.to}`
+            });
+        }
+    }
+    return children;
+}
+function RenderedRoute({ routeContext, match, children }) {
+    let dataRouterContext = React__namespace.useContext(DataRouterContext);
+    if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
+        dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
+    }
+    return /* @__PURE__ */ React__namespace.createElement(RouteContext.Provider, {
+        value: routeContext
+    }, children);
+}
+function _renderMatches(matches, parentMatches = [], dataRouterOpts) {
+    let dataRouterState = dataRouterOpts?.state;
+    if (matches == null) {
+        if (!dataRouterState) {
+            return null;
+        }
+        if (dataRouterState.errors) {
+            matches = dataRouterState.matches;
+        } else if (parentMatches.length === 0 && !dataRouterState.initialized && dataRouterState.matches.length > 0) {
+            matches = dataRouterState.matches;
+        } else {
+            return null;
+        }
+    }
+    let renderedMatches = matches;
+    let errors = dataRouterState?.errors;
+    if (errors != null) {
+        let errorIndex = renderedMatches.findIndex((m)=>m.route.id && errors?.[m.route.id] !== void 0);
+        invariant(errorIndex >= 0, `Could not find a matching route for errors on route IDs: ${Object.keys(errors).join(",")}`);
+        renderedMatches = renderedMatches.slice(0, Math.min(renderedMatches.length, errorIndex + 1));
+    }
+    let renderFallback = false;
+    let fallbackIndex = -1;
+    if (dataRouterOpts && dataRouterState) {
+        renderFallback = dataRouterState.renderFallback;
+        for(let i = 0; i < renderedMatches.length; i++){
+            let match = renderedMatches[i];
+            if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
+                fallbackIndex = i;
+            }
+            if (match.route.id) {
+                let { loaderData, errors: errors2 } = dataRouterState;
+                let needsToRunLoader = match.route.loader && !loaderData.hasOwnProperty(match.route.id) && (!errors2 || errors2[match.route.id] === void 0);
+                if (match.route.lazy || needsToRunLoader) {
+                    if (dataRouterOpts.isStatic) {
+                        renderFallback = true;
+                    }
+                    if (fallbackIndex >= 0) {
+                        renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+                    } else {
+                        renderedMatches = [
+                            renderedMatches[0]
+                        ];
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    let onErrorHandler = dataRouterOpts?.onError;
+    let onError = dataRouterState && onErrorHandler ? (error, errorInfo)=>{
+        onErrorHandler(error, {
+            location: dataRouterState.location,
+            params: dataRouterState.matches?.[0]?.params ?? {},
+            unstable_pattern: getRoutePattern(dataRouterState.matches),
+            errorInfo
+        });
+    } : void 0;
+    return renderedMatches.reduceRight((outlet, match, index)=>{
+        let error;
+        let shouldRenderHydrateFallback = false;
+        let errorElement = null;
+        let hydrateFallbackElement = null;
+        if (dataRouterState) {
+            error = errors && match.route.id ? errors[match.route.id] : void 0;
+            errorElement = match.route.errorElement || defaultErrorElement;
+            if (renderFallback) {
+                if (fallbackIndex < 0 && index === 0) {
+                    warningOnce("route-fallback", false, "No `HydrateFallback` element provided to render during initial hydration");
+                    shouldRenderHydrateFallback = true;
+                    hydrateFallbackElement = null;
+                } else if (fallbackIndex === index) {
+                    shouldRenderHydrateFallback = true;
+                    hydrateFallbackElement = match.route.hydrateFallbackElement || null;
+                }
+            }
+        }
+        let matches2 = parentMatches.concat(renderedMatches.slice(0, index + 1));
+        let getChildren = ()=>{
+            let children;
+            if (error) {
+                children = errorElement;
+            } else if (shouldRenderHydrateFallback) {
+                children = hydrateFallbackElement;
+            } else if (match.route.Component) {
+                children = /* @__PURE__ */ React__namespace.createElement(match.route.Component, null);
+            } else if (match.route.element) {
+                children = match.route.element;
+            } else {
+                children = outlet;
+            }
+            return /* @__PURE__ */ React__namespace.createElement(RenderedRoute, {
+                match,
+                routeContext: {
+                    outlet,
+                    matches: matches2,
+                    isDataRoute: dataRouterState != null
+                },
+                children
+            });
+        };
+        return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /* @__PURE__ */ React__namespace.createElement(RenderErrorBoundary, {
+            location: dataRouterState.location,
+            revalidation: dataRouterState.revalidation,
+            component: errorElement,
+            error,
+            children: getChildren(),
+            routeContext: {
+                outlet: null,
+                matches: matches2,
+                isDataRoute: true
+            },
+            onError
+        }) : getChildren();
+    }, null);
+}
+function getDataRouterConsoleError(hookName) {
+    return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext(hookName) {
+    let ctx = React__namespace.useContext(DataRouterContext);
+    invariant(ctx, getDataRouterConsoleError(hookName));
+    return ctx;
+}
+function useDataRouterState(hookName) {
+    let state = React__namespace.useContext(DataRouterStateContext);
+    invariant(state, getDataRouterConsoleError(hookName));
+    return state;
+}
+function useRouteContext(hookName) {
+    let route = React__namespace.useContext(RouteContext);
+    invariant(route, getDataRouterConsoleError(hookName));
+    return route;
+}
+function useCurrentRouteId(hookName) {
+    let route = useRouteContext(hookName);
+    let thisRoute = route.matches[route.matches.length - 1];
+    invariant(thisRoute.route.id, `${hookName} can only be used on routes that contain a unique "id"`);
+    return thisRoute.route.id;
+}
+function useRouteId() {
+    return useCurrentRouteId("useRouteId" /* UseRouteId */ );
+}
+function useRouteError() {
+    let error = React__namespace.useContext(RouteErrorContext);
+    let state = useDataRouterState("useRouteError" /* UseRouteError */ );
+    let routeId = useCurrentRouteId("useRouteError" /* UseRouteError */ );
+    if (error !== void 0) {
+        return error;
+    }
+    return state.errors?.[routeId];
+}
+function useNavigateStable() {
+    let { router } = useDataRouterContext("useNavigate" /* UseNavigateStable */ );
+    let id = useCurrentRouteId("useNavigate" /* UseNavigateStable */ );
+    let activeRef = React__namespace.useRef(false);
+    useIsomorphicLayoutEffect$1(()=>{
+        activeRef.current = true;
+    });
+    let navigate = React__namespace.useCallback(async (to, options = {})=>{
+        warning(activeRef.current, navigateEffectWarning);
+        if (!activeRef.current) return;
+        if (typeof to === "number") {
+            await router.navigate(to);
+        } else {
+            await router.navigate(to, {
+                fromRouteId: id,
+                ...options
+            });
+        }
+    }, [
+        router,
+        id
+    ]);
+    return navigate;
+}
+var alreadyWarned = {};
+function warningOnce(key, cond, message) {
+    if (!cond && !alreadyWarned[key]) {
+        alreadyWarned[key] = true;
+        warning(false, message);
+    }
+}
+React__namespace.memo(DataRoutes);
+function DataRoutes({ routes, future, state, isStatic, onError }) {
+    return useRoutesImpl(routes, void 0, {
+        state,
+        isStatic,
+        onError});
+}
+// lib/dom/dom.ts
+var defaultMethod = "get";
+var defaultEncType = "application/x-www-form-urlencoded";
+function isHtmlElement(object) {
+    return typeof HTMLElement !== "undefined" && object instanceof HTMLElement;
+}
+function isButtonElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+}
+function isFormElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+}
+function isInputElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+}
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function shouldProcessLinkClick(event, target) {
+    return event.button === 0 && // Ignore everything but left clicks
+    (!target || target === "_self") && // Let browser handle "target=_blank" etc.
+    !isModifiedEvent(event);
+}
+function createSearchParams(init = "") {
+    return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo2, key)=>{
+        let value = init[key];
+        return memo2.concat(Array.isArray(value) ? value.map((v)=>[
+                key,
+                v
+            ]) : [
+            [
+                key,
+                value
+            ]
+        ]);
+    }, []));
+}
+function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
+    let searchParams = createSearchParams(locationSearch);
+    if (defaultSearchParams) {
+        defaultSearchParams.forEach((_, key)=>{
+            if (!searchParams.has(key)) {
+                defaultSearchParams.getAll(key).forEach((value)=>{
+                    searchParams.append(key, value);
+                });
+            }
+        });
+    }
+    return searchParams;
+}
+var _formDataSupportsSubmitter = null;
+function isFormDataSubmitterSupported() {
+    if (_formDataSupportsSubmitter === null) {
+        try {
+            new FormData(document.createElement("form"), // @ts-expect-error if FormData supports the submitter parameter, this will throw
+            0);
+            _formDataSupportsSubmitter = false;
+        } catch (e) {
+            _formDataSupportsSubmitter = true;
+        }
+    }
+    return _formDataSupportsSubmitter;
+}
+var supportedFormEncTypes = /* @__PURE__ */ new Set([
+    "application/x-www-form-urlencoded",
+    "multipart/form-data",
+    "text/plain"
+]);
+function getFormEncType(encType) {
+    if (encType != null && !supportedFormEncTypes.has(encType)) {
+        warning(false, `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${defaultEncType}"`);
+        return null;
+    }
+    return encType;
+}
+function getFormSubmissionInfo(target, basename) {
+    let method;
+    let action;
+    let encType;
+    let formData;
+    let body;
+    if (isFormElement(target)) {
+        let attr = target.getAttribute("action");
+        action = attr ? stripBasename(attr, basename) : null;
+        method = target.getAttribute("method") || defaultMethod;
+        encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
+        formData = new FormData(target);
+    } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
+        let form = target.form;
+        if (form == null) {
+            throw new Error(`Cannot submit a <button> or <input type="submit"> without a <form>`);
+        }
+        let attr = target.getAttribute("formaction") || form.getAttribute("action");
+        action = attr ? stripBasename(attr, basename) : null;
+        method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+        encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
+        formData = new FormData(form, target);
+        if (!isFormDataSubmitterSupported()) {
+            let { name, type, value } = target;
+            if (type === "image") {
+                let prefix = name ? `${name}.` : "";
+                formData.append(`${prefix}x`, "0");
+                formData.append(`${prefix}y`, "0");
+            } else if (name) {
+                formData.append(name, value);
+            }
+        }
+    } else if (isHtmlElement(target)) {
+        throw new Error(`Cannot submit element that is not <form>, <button>, or <input type="submit|image">`);
+    } else {
+        method = defaultMethod;
+        action = null;
+        encType = defaultEncType;
+        body = target;
+    }
+    if (formData && encType === "text/plain") {
+        body = formData;
+        formData = void 0;
+    }
+    return {
+        action,
+        method: method.toLowerCase(),
+        encType,
+        formData,
+        body
+    };
+}
+Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+// lib/dom/ssr/invariant.ts
+function invariant2(value, message) {
+    if (value === false || value === null || typeof value === "undefined") {
+        throw new Error(message);
+    }
+}
+function singleFetchUrl(reqUrl, basename, trailingSlashAware, extension) {
+    let url = typeof reqUrl === "string" ? new URL(reqUrl, // This can be called during the SSR flow via PrefetchPageLinksImpl so
+    // don't assume window is available
+    typeof window === "undefined" ? "server://singlefetch/" : window.location.origin) : reqUrl;
+    if (trailingSlashAware) {
+        if (url.pathname.endsWith("/")) {
+            url.pathname = `${url.pathname}_.${extension}`;
+        } else {
+            url.pathname = `${url.pathname}.${extension}`;
+        }
+    } else {
+        if (url.pathname === "/") {
+            url.pathname = `_root.${extension}`;
+        } else if (basename && stripBasename(url.pathname, basename) === "/") {
+            url.pathname = `${basename.replace(/\/$/, "")}/_root.${extension}`;
+        } else {
+            url.pathname = `${url.pathname.replace(/\/$/, "")}.${extension}`;
+        }
+    }
+    return url;
+}
+// lib/dom/ssr/routeModules.ts
+async function loadRouteModule(route, routeModulesCache) {
+    if (route.id in routeModulesCache) {
+        return routeModulesCache[route.id];
+    }
+    try {
+        let routeModule = await import(/* @vite-ignore */ /* webpackIgnore: true */ route.module);
+        routeModulesCache[route.id] = routeModule;
+        return routeModule;
+    } catch (error) {
+        console.error(`Error loading route module \`${route.module}\`, reloading page...`);
+        console.error(error);
+        if (window.__reactRouterContext && window.__reactRouterContext.isSpaMode && // @ts-expect-error
+        undefined) {
+            throw error;
+        }
+        window.location.reload();
+        return new Promise(()=>{});
+    }
+}
+function isHtmlLinkDescriptor(object) {
+    if (object == null) {
+        return false;
+    }
+    if (object.href == null) {
+        return object.rel === "preload" && typeof object.imageSrcSet === "string" && typeof object.imageSizes === "string";
+    }
+    return typeof object.rel === "string" && typeof object.href === "string";
+}
+async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
+    let links = await Promise.all(matches.map(async (match)=>{
+        let route = manifest.routes[match.route.id];
+        if (route) {
+            let mod = await loadRouteModule(route, routeModules);
+            return mod.links ? mod.links() : [];
+        }
+        return [];
+    }));
+    return dedupeLinkDescriptors(links.flat(1).filter(isHtmlLinkDescriptor).filter((link)=>link.rel === "stylesheet" || link.rel === "preload").map((link)=>link.rel === "stylesheet" ? {
+            ...link,
+            rel: "prefetch",
+            as: "style"
+        } : {
+            ...link,
+            rel: "prefetch"
+        }));
+}
+function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, location, mode) {
+    let isNew = (match, index)=>{
+        if (!currentMatches[index]) return true;
+        return match.route.id !== currentMatches[index].route.id;
+    };
+    let matchPathChanged = (match, index)=>{
+        return(// param change, /users/123 -> /users/456
+        currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+        // e.g. /files/images/avatar.jpg -> files/finances.xls
+        currentMatches[index].route.path?.endsWith("*") && currentMatches[index].params["*"] !== match.params["*"]);
+    };
+    if (mode === "assets") {
+        return nextMatches.filter((match, index)=>isNew(match, index) || matchPathChanged(match, index));
+    }
+    if (mode === "data") {
+        return nextMatches.filter((match, index)=>{
+            let manifestRoute = manifest.routes[match.route.id];
+            if (!manifestRoute || !manifestRoute.hasLoader) {
+                return false;
+            }
+            if (isNew(match, index) || matchPathChanged(match, index)) {
+                return true;
+            }
+            if (match.route.shouldRevalidate) {
+                let routeChoice = match.route.shouldRevalidate({
+                    currentUrl: new URL(location.pathname + location.search + location.hash, window.origin),
+                    currentParams: currentMatches[0]?.params || {},
+                    nextUrl: new URL(page, window.origin),
+                    nextParams: match.params,
+                    defaultShouldRevalidate: true
+                });
+                if (typeof routeChoice === "boolean") {
+                    return routeChoice;
+                }
+            }
+            return true;
+        });
+    }
+    return [];
+}
+function getModuleLinkHrefs(matches, manifest, { includeHydrateFallback } = {}) {
+    return dedupeHrefs(matches.map((match)=>{
+        let route = manifest.routes[match.route.id];
+        if (!route) return [];
+        let hrefs = [
+            route.module
+        ];
+        if (route.clientActionModule) {
+            hrefs = hrefs.concat(route.clientActionModule);
+        }
+        if (route.clientLoaderModule) {
+            hrefs = hrefs.concat(route.clientLoaderModule);
+        }
+        if (includeHydrateFallback && route.hydrateFallbackModule) {
+            hrefs = hrefs.concat(route.hydrateFallbackModule);
+        }
+        if (route.imports) {
+            hrefs = hrefs.concat(route.imports);
+        }
+        return hrefs;
+    }).flat(1));
+}
+function dedupeHrefs(hrefs) {
+    return [
+        ...new Set(hrefs)
+    ];
+}
+function sortKeys(obj) {
+    let sorted = {};
+    let keys = Object.keys(obj).sort();
+    for (let key of keys){
+        sorted[key] = obj[key];
+    }
+    return sorted;
+}
+function dedupeLinkDescriptors(descriptors, preloads) {
+    let set = /* @__PURE__ */ new Set();
+    new Set(preloads);
+    return descriptors.reduce((deduped, descriptor)=>{
+        let key = JSON.stringify(sortKeys(descriptor));
+        if (!set.has(key)) {
+            set.add(key);
+            deduped.push({
+                key,
+                link: descriptor
+            });
+        }
+        return deduped;
+    }, []);
+}
+// lib/dom/ssr/components.tsx
+function useDataRouterContext2() {
+    let context = React__namespace.useContext(DataRouterContext);
+    invariant2(context, "You must render this element inside a <DataRouterContext.Provider> element");
+    return context;
+}
+function useDataRouterStateContext() {
+    let context = React__namespace.useContext(DataRouterStateContext);
+    invariant2(context, "You must render this element inside a <DataRouterStateContext.Provider> element");
+    return context;
+}
+var FrameworkContext = React__namespace.createContext(void 0);
+FrameworkContext.displayName = "FrameworkContext";
+function useFrameworkContext() {
+    let context = React__namespace.useContext(FrameworkContext);
+    invariant2(context, "You must render this element inside a <HydratedRouter> element");
+    return context;
+}
+function usePrefetchBehavior(prefetch, theirElementProps) {
+    let frameworkContext = React__namespace.useContext(FrameworkContext);
+    let [maybePrefetch, setMaybePrefetch] = React__namespace.useState(false);
+    let [shouldPrefetch, setShouldPrefetch] = React__namespace.useState(false);
+    let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
+    let ref = React__namespace.useRef(null);
+    React__namespace.useEffect(()=>{
+        if (prefetch === "render") {
+            setShouldPrefetch(true);
+        }
+        if (prefetch === "viewport") {
+            let callback = (entries)=>{
+                entries.forEach((entry)=>{
+                    setShouldPrefetch(entry.isIntersecting);
+                });
+            };
+            let observer = new IntersectionObserver(callback, {
+                threshold: 0.5
+            });
+            if (ref.current) observer.observe(ref.current);
+            return ()=>{
+                observer.disconnect();
+            };
+        }
+    }, [
+        prefetch
+    ]);
+    React__namespace.useEffect(()=>{
+        if (maybePrefetch) {
+            let id = setTimeout(()=>{
+                setShouldPrefetch(true);
+            }, 100);
+            return ()=>{
+                clearTimeout(id);
+            };
+        }
+    }, [
+        maybePrefetch
+    ]);
+    let setIntent = ()=>{
+        setMaybePrefetch(true);
+    };
+    let cancelIntent = ()=>{
+        setMaybePrefetch(false);
+        setShouldPrefetch(false);
+    };
+    if (!frameworkContext) {
+        return [
+            false,
+            ref,
+            {}
+        ];
+    }
+    if (prefetch !== "intent") {
+        return [
+            shouldPrefetch,
+            ref,
+            {}
+        ];
+    }
+    return [
+        shouldPrefetch,
+        ref,
+        {
+            onFocus: composeEventHandlers(onFocus, setIntent),
+            onBlur: composeEventHandlers(onBlur, cancelIntent),
+            onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+            onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+            onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+        }
+    ];
+}
+function composeEventHandlers(theirHandler, ourHandler) {
+    return (event)=>{
+        theirHandler && theirHandler(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
+function PrefetchPageLinks({ page, ...linkProps }) {
+    let { router } = useDataRouterContext2();
+    let matches = React__namespace.useMemo(()=>matchRoutes(router.routes, page, router.basename), [
+        router.routes,
+        page,
+        router.basename
+    ]);
+    if (!matches) {
+        return null;
+    }
+    return /* @__PURE__ */ React__namespace.createElement(PrefetchPageLinksImpl, {
+        page,
+        matches,
+        ...linkProps
+    });
+}
+function useKeyedPrefetchLinks(matches) {
+    let { manifest, routeModules } = useFrameworkContext();
+    let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React__namespace.useState([]);
+    React__namespace.useEffect(()=>{
+        let interrupted = false;
+        void getKeyedPrefetchLinks(matches, manifest, routeModules).then((links)=>{
+            if (!interrupted) {
+                setKeyedPrefetchLinks(links);
+            }
+        });
+        return ()=>{
+            interrupted = true;
+        };
+    }, [
+        matches,
+        manifest,
+        routeModules
+    ]);
+    return keyedPrefetchLinks;
+}
+function PrefetchPageLinksImpl({ page, matches: nextMatches, ...linkProps }) {
+    let location = useLocation();
+    let { future, manifest, routeModules } = useFrameworkContext();
+    let { basename } = useDataRouterContext2();
+    let { loaderData, matches } = useDataRouterStateContext();
+    let newMatchesForData = React__namespace.useMemo(()=>getNewMatchesForLinks(page, nextMatches, matches, manifest, location, "data"), [
+        page,
+        nextMatches,
+        matches,
+        manifest,
+        location
+    ]);
+    let newMatchesForAssets = React__namespace.useMemo(()=>getNewMatchesForLinks(page, nextMatches, matches, manifest, location, "assets"), [
+        page,
+        nextMatches,
+        matches,
+        manifest,
+        location
+    ]);
+    let dataHrefs = React__namespace.useMemo(()=>{
+        if (page === location.pathname + location.search + location.hash) {
+            return [];
+        }
+        let routesParams = /* @__PURE__ */ new Set();
+        let foundOptOutRoute = false;
+        nextMatches.forEach((m)=>{
+            let manifestRoute = manifest.routes[m.route.id];
+            if (!manifestRoute || !manifestRoute.hasLoader) {
+                return;
+            }
+            if (!newMatchesForData.some((m2)=>m2.route.id === m.route.id) && m.route.id in loaderData && routeModules[m.route.id]?.shouldRevalidate) {
+                foundOptOutRoute = true;
+            } else if (manifestRoute.hasClientLoader) {
+                foundOptOutRoute = true;
+            } else {
+                routesParams.add(m.route.id);
+            }
+        });
+        if (routesParams.size === 0) {
+            return [];
+        }
+        let url = singleFetchUrl(page, basename, future.unstable_trailingSlashAwareDataRequests, "data");
+        if (foundOptOutRoute && routesParams.size > 0) {
+            url.searchParams.set("_routes", nextMatches.filter((m)=>routesParams.has(m.route.id)).map((m)=>m.route.id).join(","));
+        }
+        return [
+            url.pathname + url.search
+        ];
+    }, [
+        basename,
+        future.unstable_trailingSlashAwareDataRequests,
+        loaderData,
+        location,
+        manifest,
+        newMatchesForData,
+        nextMatches,
+        page,
+        routeModules
+    ]);
+    let moduleHrefs = React__namespace.useMemo(()=>getModuleLinkHrefs(newMatchesForAssets, manifest), [
+        newMatchesForAssets,
+        manifest
+    ]);
+    let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, dataHrefs.map((href)=>/* @__PURE__ */ React__namespace.createElement("link", {
+            key: href,
+            rel: "prefetch",
+            as: "fetch",
+            href,
+            ...linkProps
+        })), moduleHrefs.map((href)=>/* @__PURE__ */ React__namespace.createElement("link", {
+            key: href,
+            rel: "modulepreload",
+            href,
+            ...linkProps
+        })), keyedPrefetchLinks.map(({ key, link })=>// these don't spread `linkProps` because they are full link descriptors
+        // already with their own props
+        /* @__PURE__ */ React__namespace.createElement("link", {
+            key,
+            nonce: linkProps.nonce,
+            ...link,
+            crossOrigin: link.crossOrigin ?? linkProps.crossOrigin
+        })));
+}
+function mergeRefs(...refs) {
+    return (value)=>{
+        refs.forEach((ref)=>{
+            if (typeof ref === "function") {
+                ref(value);
+            } else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+var isBrowser2 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+try {
+    if (isBrowser2) {
+        window.__reactRouterVersion = "7.13.1";
+    }
+} catch (e) {}
+var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+var Link = React__namespace.forwardRef(function LinkWithRef({ onClick, discover = "render", prefetch = "none", relative, reloadDocument, replace: replace2, unstable_mask, state, target, to, preventScrollReset, viewTransition, unstable_defaultShouldRevalidate, ...rest }, forwardedRef) {
+    let { basename, navigator, unstable_useTransitions } = React__namespace.useContext(NavigationContext);
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX2.test(to);
+    let parsed = parseToInfo(to, basename);
+    to = parsed.to;
+    let href = useHref(to, {
+        relative
+    });
+    let location = useLocation();
+    let maskedHref = null;
+    if (unstable_mask) {
+        let resolved = resolveTo(unstable_mask, [], location.unstable_mask ? location.unstable_mask.pathname : "/", true);
+        if (basename !== "/") {
+            resolved.pathname = resolved.pathname === "/" ? basename : joinPaths([
+                basename,
+                resolved.pathname
+            ]);
+        }
+        maskedHref = navigator.createHref(resolved);
+    }
+    let [shouldPrefetch, prefetchRef, prefetchHandlers] = usePrefetchBehavior(prefetch, rest);
+    let internalOnClick = useLinkClickHandler(to, {
+        replace: replace2,
+        unstable_mask,
+        state,
+        target,
+        preventScrollReset,
+        relative,
+        viewTransition,
+        unstable_defaultShouldRevalidate,
+        unstable_useTransitions
+    });
+    function handleClick(event) {
+        if (onClick) onClick(event);
+        if (!event.defaultPrevented) {
+            internalOnClick(event);
+        }
+    }
+    let isSpaLink = !(parsed.isExternal || reloadDocument);
+    let link = // eslint-disable-next-line jsx-a11y/anchor-has-content
+    /* @__PURE__ */ React__namespace.createElement("a", {
+        ...rest,
+        ...prefetchHandlers,
+        href: (isSpaLink ? maskedHref : void 0) || parsed.absoluteURL || href,
+        onClick: isSpaLink ? handleClick : onClick,
+        ref: mergeRefs(forwardedRef, prefetchRef),
+        target,
+        "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+    });
+    return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, link, /* @__PURE__ */ React__namespace.createElement(PrefetchPageLinks, {
+        page: href
+    })) : link;
+});
+Link.displayName = "Link";
+var NavLink = React__namespace.forwardRef(function NavLinkWithRef({ "aria-current": ariaCurrentProp = "page", caseSensitive = false, className: classNameProp = "", end = false, style: styleProp, to, viewTransition, children, ...rest }, ref) {
+    let path = useResolvedPath(to, {
+        relative: rest.relative
+    });
+    let location = useLocation();
+    let routerState = React__namespace.useContext(DataRouterStateContext);
+    let { navigator, basename } = React__namespace.useContext(NavigationContext);
+    let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useViewTransitionState(path) && viewTransition === true;
+    let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
+    let locationPathname = location.pathname;
+    let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
+    if (!caseSensitive) {
+        locationPathname = locationPathname.toLowerCase();
+        nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
+        toPathname = toPathname.toLowerCase();
+    }
+    if (nextLocationPathname && basename) {
+        nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+    }
+    const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+    let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
+    let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
+    let renderProps = {
+        isActive,
+        isPending,
+        isTransitioning
+    };
+    let ariaCurrent = isActive ? ariaCurrentProp : void 0;
+    let className;
+    if (typeof classNameProp === "function") {
+        className = classNameProp(renderProps);
+    } else {
+        className = [
+            classNameProp,
+            isActive ? "active" : null,
+            isPending ? "pending" : null,
+            isTransitioning ? "transitioning" : null
+        ].filter(Boolean).join(" ");
+    }
+    let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
+    return /* @__PURE__ */ React__namespace.createElement(Link, {
+        ...rest,
+        "aria-current": ariaCurrent,
+        className,
+        ref,
+        style,
+        to,
+        viewTransition
+    }, typeof children === "function" ? children(renderProps) : children);
+});
+NavLink.displayName = "NavLink";
+var Form = React__namespace.forwardRef(({ discover = "render", fetcherKey, navigate, reloadDocument, replace: replace2, state, method = defaultMethod, action, onSubmit, relative, preventScrollReset, viewTransition, unstable_defaultShouldRevalidate, ...props }, forwardedRef)=>{
+    let { unstable_useTransitions } = React__namespace.useContext(NavigationContext);
+    let submit = useSubmit();
+    let formAction = useFormAction(action, {
+        relative
+    });
+    let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX2.test(action);
+    let submitHandler = (event)=>{
+        onSubmit && onSubmit(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        let submitter = event.nativeEvent.submitter;
+        let submitMethod = submitter?.getAttribute("formmethod") || method;
+        let doSubmit = ()=>submit(submitter || event.currentTarget, {
+                fetcherKey,
+                method: submitMethod,
+                navigate,
+                replace: replace2,
+                state,
+                relative,
+                preventScrollReset,
+                viewTransition,
+                unstable_defaultShouldRevalidate
+            });
+        if (unstable_useTransitions && navigate !== false) {
+            React__namespace.startTransition(()=>doSubmit());
+        } else {
+            doSubmit();
+        }
+    };
+    return /* @__PURE__ */ React__namespace.createElement("form", {
+        ref: forwardedRef,
+        method: formMethod,
+        action: formAction,
+        onSubmit: reloadDocument ? onSubmit : submitHandler,
+        ...props,
+        "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+    });
+});
+Form.displayName = "Form";
+function getDataRouterConsoleError2(hookName) {
+    return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext3(hookName) {
+    let ctx = React__namespace.useContext(DataRouterContext);
+    invariant(ctx, getDataRouterConsoleError2(hookName));
+    return ctx;
+}
+function useLinkClickHandler(to, { target, replace: replaceProp, unstable_mask, state, preventScrollReset, relative, viewTransition, unstable_defaultShouldRevalidate, unstable_useTransitions } = {}) {
+    let navigate = useNavigate();
+    let location = useLocation();
+    let path = useResolvedPath(to, {
+        relative
+    });
+    return React__namespace.useCallback((event)=>{
+        if (shouldProcessLinkClick(event, target)) {
+            event.preventDefault();
+            let replace2 = replaceProp !== void 0 ? replaceProp : createPath(location) === createPath(path);
+            let doNavigate = ()=>navigate(to, {
+                    replace: replace2,
+                    unstable_mask,
+                    state,
+                    preventScrollReset,
+                    relative,
+                    viewTransition,
+                    unstable_defaultShouldRevalidate
+                });
+            if (unstable_useTransitions) {
+                React__namespace.startTransition(()=>doNavigate());
+            } else {
+                doNavigate();
+            }
+        }
+    }, [
+        location,
+        navigate,
+        path,
+        replaceProp,
+        unstable_mask,
+        state,
+        target,
+        to,
+        preventScrollReset,
+        relative,
+        viewTransition,
+        unstable_defaultShouldRevalidate,
+        unstable_useTransitions
+    ]);
+}
+function useSearchParams(defaultInit) {
+    warning(typeof URLSearchParams !== "undefined", `You cannot use the \`useSearchParams\` hook in a browser that does not support the URLSearchParams API. If you need to support Internet Explorer 11, we recommend you load a polyfill such as https://github.com/ungap/url-search-params.`);
+    let defaultSearchParamsRef = React__namespace.useRef(createSearchParams(defaultInit));
+    let hasSetSearchParamsRef = React__namespace.useRef(false);
+    let location = useLocation();
+    let searchParams = React__namespace.useMemo(()=>// Only merge in the defaults if we haven't yet called setSearchParams.
+        // Once we call that we want those to take precedence, otherwise you can't
+        // remove a param with setSearchParams({}) if it has an initial value
+        getSearchParamsForLocation(location.search, hasSetSearchParamsRef.current ? null : defaultSearchParamsRef.current), [
+        location.search
+    ]);
+    let navigate = useNavigate();
+    let setSearchParams = React__namespace.useCallback((nextInit, navigateOptions)=>{
+        const newSearchParams = createSearchParams(typeof nextInit === "function" ? nextInit(new URLSearchParams(searchParams)) : nextInit);
+        hasSetSearchParamsRef.current = true;
+        navigate("?" + newSearchParams, navigateOptions);
+    }, [
+        navigate,
+        searchParams
+    ]);
+    return [
+        searchParams,
+        setSearchParams
+    ];
+}
+var fetcherId = 0;
+var getUniqueFetcherId = ()=>`__${String(++fetcherId)}__`;
+function useSubmit() {
+    let { router } = useDataRouterContext3("useSubmit" /* UseSubmit */ );
+    let { basename } = React__namespace.useContext(NavigationContext);
+    let currentRouteId = useRouteId();
+    let routerFetch = router.fetch;
+    let routerNavigate = router.navigate;
+    return React__namespace.useCallback(async (target, options = {})=>{
+        let { action, method, encType, formData, body } = getFormSubmissionInfo(target, basename);
+        if (options.navigate === false) {
+            let key = options.fetcherKey || getUniqueFetcherId();
+            await routerFetch(key, currentRouteId, options.action || action, {
+                unstable_defaultShouldRevalidate: options.unstable_defaultShouldRevalidate,
+                preventScrollReset: options.preventScrollReset,
+                formData,
+                body,
+                formMethod: options.method || method,
+                formEncType: options.encType || encType,
+                flushSync: options.flushSync
+            });
+        } else {
+            await routerNavigate(options.action || action, {
+                unstable_defaultShouldRevalidate: options.unstable_defaultShouldRevalidate,
+                preventScrollReset: options.preventScrollReset,
+                formData,
+                body,
+                formMethod: options.method || method,
+                formEncType: options.encType || encType,
+                replace: options.replace,
+                state: options.state,
+                fromRouteId: currentRouteId,
+                flushSync: options.flushSync,
+                viewTransition: options.viewTransition
+            });
+        }
+    }, [
+        routerFetch,
+        routerNavigate,
+        basename,
+        currentRouteId
+    ]);
+}
+function useFormAction(action, { relative } = {}) {
+    let { basename } = React__namespace.useContext(NavigationContext);
+    let routeContext = React__namespace.useContext(RouteContext);
+    invariant(routeContext, "useFormAction must be used inside a RouteContext");
+    let [match] = routeContext.matches.slice(-1);
+    let path = {
+        ...useResolvedPath(action ? action : ".", {
+            relative
+        })
+    };
+    let location = useLocation();
+    if (action == null) {
+        path.search = location.search;
+        let params = new URLSearchParams(path.search);
+        let indexValues = params.getAll("index");
+        let hasNakedIndexParam = indexValues.some((v)=>v === "");
+        if (hasNakedIndexParam) {
+            params.delete("index");
+            indexValues.filter((v)=>v).forEach((v)=>params.append("index", v));
+            let qs = params.toString();
+            path.search = qs ? `?${qs}` : "";
+        }
+    }
+    if ((!action || action === ".") && match.route.index) {
+        path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
+    }
+    if (basename !== "/") {
+        path.pathname = path.pathname === "/" ? basename : joinPaths([
+            basename,
+            path.pathname
+        ]);
+    }
+    return createPath(path);
+}
+function useViewTransitionState(to, { relative } = {}) {
+    let vtContext = React__namespace.useContext(ViewTransitionContext);
+    invariant(vtContext != null, "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?");
+    let { basename } = useDataRouterContext3("useViewTransitionState" /* useViewTransitionState */ );
+    let path = useResolvedPath(to, {
+        relative
+    });
+    if (!vtContext.isTransitioning) {
+        return false;
+    }
+    let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
+    let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
+    return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
+}
+
+const EvaluationsMockContext = /*#__PURE__*/ React.createContext(undefined);
+const useEvaluationsMock = ()=>{
+    return React.useContext(EvaluationsMockContext);
+};
+
+const API_BASE = "/api";
+const useEvaluations = ()=>{
+    const mockContext = useEvaluationsMock();
+    const [evaluations, setEvaluations] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const fetchEvaluations = React.useCallback(async ()=>{
+        setLoading(true);
+        setError(null);
+        try {
+            // Check for mock data first
+            if (mockContext?.mockEvaluations) {
+                setEvaluations(mockContext.mockEvaluations);
+                setLoading(false);
+                return;
+            }
+            // Otherwise fetch from API (returns raw DTO)
+            const response = await fetch(`${API_BASE}/evaluations`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            // Handle edge cases: null/undefined or not an array
+            if (!data || !Array.isArray(data)) {
+                setEvaluations([]);
+                return;
+            }
+            setEvaluations(data);
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+            setError(errorMessage);
+            setEvaluations([]);
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        mockContext
+    ]);
+    React.useEffect(()=>{
+        fetchEvaluations();
+    }, [
+        fetchEvaluations
+    ]);
+    return {
+        evaluations,
+        loading,
+        error,
+        refetch: fetchEvaluations
+    };
+};
+
+const EvaluationsComparePage = ({ backHref = "#/evaluations" })=>{
+    const { evaluations, loading, error } = useEvaluations();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const normalizedEvaluations = React.useMemo(()=>evaluations.map((e)=>isEvaluationDto(e) ? transformEvaluation(e) : e), [
+        evaluations
+    ]);
+    // Support compare=id1,id2 (primary) and legacy evaluationId1/evaluationId2, source/target
+    const [evaluationId1, evaluationId2] = React.useMemo(()=>{
+        const compareParam = searchParams.get("compare");
+        if (compareParam) {
+            const [id1, id2] = compareParam.split(",").map((s)=>s.trim()).filter(Boolean);
+            return [
+                id1 ?? null,
+                id2 ?? null
+            ];
+        }
+        const id1 = searchParams.get("evaluationId1") ?? searchParams.get("source");
+        const id2 = searchParams.get("evaluationId2") ?? searchParams.get("target");
+        return [
+            id1,
+            id2
+        ];
+    }, [
+        searchParams
+    ]);
+    const updateCompareParam = React.useCallback((id1, id2)=>{
+        const newParams = new URLSearchParams(searchParams);
+        newParams.delete("evaluationId1");
+        newParams.delete("evaluationId2");
+        newParams.delete("source");
+        newParams.delete("target");
+        if (id1 && id2) {
+            newParams.set("compare", `${id1},${id2}`);
+        } else {
+            newParams.delete("compare");
+        }
+        setSearchParams(newParams, {
+            replace: true
+        });
+    }, [
+        searchParams,
+        setSearchParams
+    ]);
+    const handleEvaluationId1Change = (id)=>{
+        updateCompareParam(id, evaluationId2);
+    };
+    const handleEvaluationId2Change = (id)=>{
+        updateCompareParam(evaluationId1, id);
+    };
+    if (error) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                padding: "24px",
+                textAlign: "center"
+            }
+        }, /*#__PURE__*/ React.createElement("p", {
+            style: {
+                color: "red"
+            }
+        }, "Error loading evaluations: ", error));
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: "24px"
+        }
+    }, /*#__PURE__*/ React.createElement("h1", {
+        style: {
+            margin: "0 0 24px 0",
+            fontSize: "24px",
+            fontWeight: 600
+        }
+    }, "Compare Evaluations"), /*#__PURE__*/ React.createElement(EvaluationsCompareView, {
+        evaluations: normalizedEvaluations,
+        evaluationId1: evaluationId1,
+        evaluationId2: evaluationId2,
+        onEvaluationId1Change: handleEvaluationId1Change,
+        onEvaluationId2Change: handleEvaluationId2Change,
+        loading: loading,
+        showEvaluationComparisonDropdowns: true,
+        backHref: backHref
+    }));
+};
+
 function isLLMNode(n) {
     return isLLMResult(n);
 }
@@ -114503,7 +117042,7 @@ function isLLMAggregateNode(n) {
                     const primaryMetric = sortedMetrics[0];
                     nodeChildren.push({
                         key: `${callKey}-${nodeId}`,
-                        name: `agent_node_id_${idx + 1}`,
+                        name: nodeId,
                         level: 3,
                         metrics,
                         value: metrics[primaryMetric],
@@ -114637,11 +117176,19 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
         }
         const children = [];
         for (const [aid, group] of agentGroups){
-            const totalRuntimeMs = group.latencies.reduce((s, l)=>s + l.value * 1000, 0);
-            const cnt = group.latencies.length;
+            // Deduplicate by tool_node_id (or key) so each tool invocation appears once
+            const seenIds = new Set();
+            const uniqueLatencies = group.latencies.filter((l)=>{
+                const id = l.toolNodeId ?? l.key;
+                if (seenIds.has(id)) return false;
+                seenIds.add(id);
+                return true;
+            });
+            const totalRuntimeMs = uniqueLatencies.reduce((s, l)=>s + l.value * 1000, 0);
+            const cnt = uniqueLatencies.length;
             let failed = 0;
             const failList = failureByToolAgentIndex.get(`${toolName}|${aid}`) ?? [];
-            const leaves = group.latencies.map((l, idx)=>{
+            const leaves = uniqueLatencies.map((l, idx)=>{
                 const failVal = failureByKey.get(l.key);
                 const failValByIndex = failList[idx];
                 const resolvedFail = failVal ?? (failValByIndex !== undefined ? failValByIndex : undefined);
@@ -114910,6 +117457,42 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                 }
             ];
             const headerIconColor = theme.colors.foreground;
+            const LLM_LABEL_BY_LEVEL = {
+                1: "Agent",
+                2: "LLM Call",
+                3: "Agent Node"
+            };
+            const LLMTagForLevel = ({ level })=>{
+                const label = LLM_LABEL_BY_LEVEL[level];
+                const Icon = level === 3 ? Bot : Cpu;
+                const tagStyle = level === 1 ? {
+                    background: theme.colors.tagToolLevel1?.bg ?? theme.colors.success,
+                    color: theme.colors.tagToolLevel1?.color ?? theme.colors.successForeground,
+                    border: "none"
+                } : level === 2 ? {
+                    background: theme.colors.tagLlminference?.bg ?? theme.colors.muted,
+                    color: theme.colors.tagLlminference?.color ?? theme.colors.foreground,
+                    border: "none"
+                } : {
+                    background: theme.colors.tagToolLevel2?.bg ?? theme.colors.primary,
+                    color: theme.colors.tagToolLevel2?.color ?? theme.colors.primaryForeground,
+                    border: "none"
+                };
+                return /*#__PURE__*/ React.createElement(Tag, {
+                    style: {
+                        marginRight: 8,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        ...tagStyle
+                    }
+                }, /*#__PURE__*/ React.createElement(Icon, {
+                    size: 12,
+                    style: {
+                        flexShrink: 0
+                    }
+                }), label);
+            };
             const llmColumns = [
                 {
                     title: /*#__PURE__*/ React.createElement("span", {
@@ -114928,16 +117511,14 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     key: "name",
                     render: (name, row)=>/*#__PURE__*/ React.createElement("span", {
                             style: {
+                                display: "inline-flex",
+                                alignItems: "center",
+                                gap: 8,
                                 fontFamily: "monospace",
                                 fontSize: 13
                             }
-                        }, /*#__PURE__*/ React.createElement(Cpu, {
-                            size: 14,
-                            style: {
-                                marginRight: 8,
-                                verticalAlign: "middle",
-                                color: agentIconColor
-                            }
+                        }, /*#__PURE__*/ React.createElement(LLMTagForLevel, {
+                            level: row.level
                         }), name)
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
@@ -117527,6 +120108,15 @@ const GlobalStyles = ()=>{
           border-bottom-right-radius: 0.5rem !important;
         }
 
+        /* Evaluations compare: highlight rows with differing values */
+        .ant-table-tbody > tr.evaluations-compare-diff-row > td {
+          background-color: #fef9c3 !important;
+        }
+
+        html.dark .ant-table-tbody > tr.evaluations-compare-diff-row > td {
+          background-color: #334155 !important;
+        }
+
         /* CSS Variables for backward compatibility */
         :root {
           --background: #ffffff;
@@ -117721,7 +120311,9 @@ exports.Badge = Badge;
 exports.Drawer = Drawer;
 exports.Edge = Edge;
 exports.EvaluationDetailsDrawer = EvaluationDetailsDrawer;
-exports.EvaluationsCompare = EvaluationsCompare;
+exports.EvaluationsCompareDrawer = EvaluationsCompareDrawer;
+exports.EvaluationsComparePage = EvaluationsComparePage;
+exports.EvaluationsCompareView = EvaluationsCompareView;
 exports.EvaluationsTable = EvaluationsTable;
 exports.EvaluatorResult = EvaluatorResult;
 exports.GlobalStyles = GlobalStyles;
@@ -117743,13 +120335,14 @@ exports.createSafeTheme = createSafeTheme;
 exports.darkTheme = darkTheme;
 exports.defaultTheme = defaultTheme$1;
 exports.detectContentType = detectContentType;
+exports.evaluationsHaveSameMetrics = evaluationsHaveSameMetrics;
 exports.formatCurrency = formatCurrency;
 exports.formatDateFriendly = formatDateFriendly;
 exports.formatDateRelative = formatDateRelative;
 exports.formatDateShort = formatDateShort;
 exports.formatDuration = formatDuration;
 exports.formatLatency = formatLatency;
-exports.formatMetricValue = formatMetricValue;
+exports.formatMetricValue = formatMetricValue$1;
 exports.formatNumberWithCommas = formatNumberWithCommas;
 exports.formatToolCalls = formatToolCalls;
 exports.getColor = getColor;