@railtownai/railtracks-visualizer 0.0.73 → 0.0.75

package/dist/cjs/index.js

@@ -3308,21 +3308,21 @@ const oppositePosition = {
 function getConnectionStatus(isValid) {
     return isValid === null ? null : isValid ? 'valid' : 'invalid';
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ /**
+/**
  * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
- */ const isEdgeBase = (element)=>'id' in element && 'source' in element && 'target' in element;
+ */ const isEdgeBase = (element)=>!!element && typeof element === 'object' && 'id' in element && 'source' in element && 'target' in element;
 /**
  * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
- */ const isNodeBase = (element)=>'id' in element && 'position' in element && !('source' in element) && !('target' in element);
-const isInternalNodeBase = (element)=>'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
+ */ const isNodeBase = (element)=>!!element && typeof element === 'object' && 'id' in element && 'position' in element && !('source' in element) && !('target' in element);
+const isInternalNodeBase = (element)=>!!element && typeof element === 'object' && 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
 const getNodePositionWithOrigin = (node, nodeOrigin = [
     0,
     0
@@ -3499,7 +3499,18 @@ function getFitViewNodes(nodeLookup, options) {
     const fitViewNodes = new Map();
     const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node)=>node.id)) : null;
     nodeLookup.forEach((n)=>{
-        const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
+        let isVisible;
+        if (options?.includeHiddenNodes) {
+            /*
+             * when hidden nodes are included they were never rendered, so they have no
+             * measured size. Fall back to the declared dimensions (same fallback as
+             * nodeToBox) so a hidden node with an intrinsic size still contributes to
+             * the fit bounds instead of being dropped by a measured-only check. (#5841)
+             */ const { width, height } = getNodeDimensions(n);
+            isVisible = width > 0 && height > 0;
+        } else {
+            isVisible = Boolean(n.measured.width && n.measured.height && !n.hidden);
+        }
         if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
             fitViewNodes.set(n.id, n);
         }
@@ -5012,7 +5023,10 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
             const extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;
             let { positionAbsolute } = node.internals;
             if (node.parentId && node.extent === 'parent') {
-                positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId));
+                const parentNode = nodeLookup.get(node.parentId);
+                if (parentNode) {
+                    positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, parentNode);
+                }
             } else if (extent) {
                 positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
             }
@@ -5948,11 +5962,11 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
             onPanZoomStart?.(event, nextViewport);
         } else {
             onPanZoom?.(event, nextViewport);
-            zoomPanValues.panScrollTimeout = setTimeout(()=>{
-                onPanZoomEnd?.(event, nextViewport);
-                zoomPanValues.isPanScrolling = false;
-            }, 150);
         }
+        zoomPanValues.panScrollTimeout = setTimeout(()=>{
+            onPanZoomEnd?.(event, nextViewport);
+            zoomPanValues.isPanScrolling = false;
+        }, 150);
     };
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
@@ -6091,7 +6105,39 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
         isPanScrolling: false
     };
     const bbox = domNode.getBoundingClientRect();
-    const d3ZoomInstance = zoom().scaleExtent([
+    /*
+     * Cache the pane extent and refresh it from a ResizeObserver. Otherwise d3-zoom falls back to its
+     * defaultExtent, which reads clientWidth/clientHeight and forces a synchronous layout while panning
+     * and pinching. The observer is never disconnected on purpose: destroy() also runs to pause zooming
+     * during a user selection, so disconnecting there would leave the cache stale. It becomes unreachable
+     * and is garbage collected with the pane on unmount.
+     */ let cachedExtent = [
+        [
+            0,
+            0
+        ],
+        [
+            bbox.width,
+            bbox.height
+        ]
+    ];
+    const extentResizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver((entries)=>{
+        const entry = entries[0];
+        if (entry) {
+            cachedExtent = [
+                [
+                    0,
+                    0
+                ],
+                [
+                    entry.contentRect.width,
+                    entry.contentRect.height
+                ]
+            ];
+        }
+    }) : null;
+    extentResizeObserver?.observe(domNode);
+    const d3ZoomInstance = zoom().extent(()=>cachedExtent).scaleExtent([
         minZoom,
         maxZoom
     ]).translateExtent(translateExtent);
@@ -7288,7 +7334,7 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
         })
     });
 }
-const selector$m = (s)=>{
+const selector$l = (s)=>{
     const selectedNodes = [];
     const selectedEdges = [];
     for (const [, node] of s.nodeLookup){
@@ -7307,12 +7353,12 @@ const selector$m = (s)=>{
     };
 };
 const selectId = (obj)=>obj.id;
-function areEqual(a, b) {
+function areEqual$1(a, b) {
     return shallow$1(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && shallow$1(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange }) {
     const store = useStoreApi();
-    const { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$l, areEqual$1);
     React.useEffect(()=>{
         const params = {
             nodes: selectedNodes,
@@ -7416,7 +7462,7 @@ const fieldsToTrack = [
     ...reactFlowFieldsToTrack,
     'rfId'
 ];
-const selector$l = (s)=>({
+const selector$k = (s)=>({
         setNodes: s.setNodes,
         setEdges: s.setEdges,
         setMinZoom: s.setMinZoom,
@@ -7440,7 +7486,7 @@ const initPrevValues = {
     rfId: '1'
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$l, shallow$1);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$k, shallow$1);
     const store = useStoreApi();
     React.useEffect(()=>{
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -8179,7 +8225,7 @@ function useBatchContext() {
     }
     return batchContext;
 }
-const selector$k = (s)=>!!s.panZoom;
+const selector$j = (s)=>!!s.panZoom;
 /**
  * This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.
  *
@@ -8210,7 +8256,7 @@ const selector$k = (s)=>!!s.panZoom;
     const viewportHelper = useViewportHelper();
     const store = useStoreApi();
     const batchContext = useBatchContext();
-    const viewportInitialized = useStore(selector$k);
+    const viewportInitialized = useStore(selector$j);
     const generalHelper = React.useMemo(()=>{
         const getInternalNode = (id)=>store.getState().nodeLookup.get(id);
         const setNodes = (payload)=>{
@@ -8523,7 +8569,7 @@ const containerStyle = {
     top: 0,
     left: 0
 };
-const selector$j = (s)=>({
+const selector$i = (s)=>({
         userSelectionActive: s.userSelectionActive,
         lib: s.lib,
         connectionInProgress: s.connection.inProgress
@@ -8531,7 +8577,7 @@ const selector$j = (s)=>({
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag }) {
     const store = useStoreApi();
     const zoomPane = React.useRef(null);
-    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow$1);
+    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$i, shallow$1);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = React.useRef();
     useResizeHandler(zoomPane);
@@ -8640,12 +8686,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         children: children
     });
 }
-const selector$i = (s)=>({
+const selector$h = (s)=>({
         userSelectionActive: s.userSelectionActive,
         userSelectionRect: s.userSelectionRect
     });
 function UserSelection() {
-    const { userSelectionActive, userSelectionRect } = useStore(selector$i, shallow$1);
+    const { userSelectionActive, userSelectionRect } = useStore(selector$h, shallow$1);
     const isActive = userSelectionActive && userSelectionRect;
     if (!isActive) {
         return null;
@@ -8667,7 +8713,7 @@ const wrapHandler = (handler, containerRef)=>{
         handler?.(event);
     };
 };
-const selector$h = (s)=>({
+const selector$g = (s)=>({
         userSelectionActive: s.userSelectionActive,
         elementsSelectable: s.elementsSelectable,
         dragging: s.paneDragging,
@@ -8677,7 +8723,7 @@ const selector$h = (s)=>({
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children }) {
     const autoPanId = React.useRef(0);
     const store = useStoreApi();
-    const { userSelectionActive, elementsSelectable, dragging, panBy, autoPanSpeed } = useStore(selector$h, shallow$1);
+    const { userSelectionActive, elementsSelectable, dragging, panBy, autoPanSpeed } = useStore(selector$g, shallow$1);
     const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
     const container = React.useRef(null);
     const containerBounds = React.useRef();
@@ -8963,6 +9009,9 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     const [dragging, setDragging] = React.useState(false);
     const xyDrag = React.useRef();
     React.useEffect(()=>{
+        if (disabled) {
+            return;
+        }
         xyDrag.current = XYDrag({
             getStoreItems: ()=>store.getState(),
             onNodeMouseDown: (id)=>{
@@ -8979,7 +9028,15 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
                 setDragging(false);
             }
         });
-    }, []);
+        return ()=>{
+            xyDrag.current?.destroy();
+            xyDrag.current = undefined;
+        };
+    }, [
+        disabled,
+        store,
+        nodeRef
+    ]);
     React.useEffect(()=>{
         if (disabled || !nodeRef.current || !xyDrag.current) {
             return;
@@ -8992,9 +9049,6 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
             nodeId,
             nodeClickDistance
         });
-        return ()=>{
-            xyDrag.current?.destroy();
-        };
     }, [
         noDragClassName,
         handleSelector,
@@ -9086,7 +9140,7 @@ NodeIdContext.Consumer;
     const nodeId = React.useContext(NodeIdContext);
     return nodeId;
 };
-const selector$g = (s)=>({
+const selector$f = (s)=>({
         connectOnClick: s.connectOnClick,
         noPanClassName: s.noPanClassName,
         rfId: s.rfId
@@ -9096,7 +9150,7 @@ const HandleConfigContext = React.createContext(null);
  * `connectOnClick`, `noPanClassName` and `rfId` are the same for every handle, so they are
  * shared through context from a single store subscription.
  */ function HandleConfigProvider({ children }) {
-    const config = useStore(selector$g, shallow$1);
+    const config = useStore(selector$f, shallow$1);
     return jsxRuntime.jsx(HandleConfigContext.Provider, {
         value: config,
         children: children
@@ -9391,7 +9445,7 @@ function getNodeInlineStyleDimensions(node) {
         height: node.height ?? node.style?.height
     };
 }
-const selector$f = (s)=>{
+const selector$e = (s)=>{
     const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
         filter: (node)=>!!node.selected
     });
@@ -9404,7 +9458,7 @@ const selector$f = (s)=>{
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
     const store = useStoreApi();
-    const { width, height, transformString, userSelectionActive } = useStore(selector$f, shallow$1);
+    const { width, height, transformString, userSelectionActive } = useStore(selector$e, shallow$1);
     const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = React.useRef(null);
     React.useEffect(()=>{
@@ -9460,14 +9514,14 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     });
 }
 const win = typeof window !== 'undefined' ? window : undefined;
-const selector$e = (s)=>{
+const selector$d = (s)=>{
     return {
         nodesSelectionActive: s.nodesSelectionActive,
         userSelectionActive: s.userSelectionActive
     };
 };
 function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, autoPanOnSelection, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
-    const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow$1);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$d, shallow$1);
     const selectionKeyPressed = useKeyPress(selectionKeyCode, {
         target: win
     });
@@ -9533,7 +9587,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
 }
 FlowRendererComponent.displayName = 'FlowRenderer';
 const FlowRenderer = React.memo(FlowRendererComponent);
-const selector$d = (onlyRenderVisible)=>(s)=>{
+const selector$c = (onlyRenderVisible)=>(s)=>{
         return onlyRenderVisible ? getNodesInside(s.nodeLookup, {
             x: 0,
             y: 0,
@@ -9548,14 +9602,14 @@ const selector$d = (onlyRenderVisible)=>(s)=>{
  * @param onlyRenderVisible
  * @returns array with visible node ids
  */ function useVisibleNodeIds(onlyRenderVisible) {
-    const nodeIds = useStore(React.useCallback(selector$d(onlyRenderVisible), [
+    const nodeIds = useStore(React.useCallback(selector$c(onlyRenderVisible), [
         onlyRenderVisible
     ]), shallow$1);
     return nodeIds;
 }
-const selector$c = (s)=>s.updateNodeInternals;
+const selector$b = (s)=>s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeInternals = useStore(selector$c);
+    const updateNodeInternals = useStore(selector$b);
     const [resizeObserver] = React.useState(()=>{
         if (typeof ResizeObserver === 'undefined') {
             return null;
@@ -9846,15 +9900,14 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     });
 }
 var NodeWrapper$1 = React.memo(NodeWrapper);
-const selector$b = (s)=>({
-        nodesDraggable: s.nodesDraggable,
+const selector$a = (s)=>({
         nodesConnectable: s.nodesConnectable,
         nodesFocusable: s.nodesFocusable,
         elementsSelectable: s.elementsSelectable,
         onError: s.onError
     });
 function NodeRendererComponent(props) {
-    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$b, shallow$1);
+    const { nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$a, shallow$1);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
     return jsxRuntime.jsx("div", {
@@ -9900,7 +9953,7 @@ function NodeRendererComponent(props) {
                 rfId: props.rfId,
                 disableKeyboardA11y: props.disableKeyboardA11y,
                 resizeObserver: resizeObserver,
-                nodesDraggable: nodesDraggable,
+                nodesDraggable: props.nodesDraggable ?? true,
                 nodesConnectable: nodesConnectable,
                 nodesFocusable: nodesFocusable,
                 elementsSelectable: elementsSelectable,
@@ -10879,7 +10932,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
     });
 }
 var EdgeWrapper$1 = React.memo(EdgeWrapper);
-const selector$a = (s)=>({
+const selector$9 = (s)=>({
         edgesFocusable: s.edgesFocusable,
         edgesReconnectable: s.edgesReconnectable,
         elementsSelectable: s.elementsSelectable,
@@ -10887,7 +10940,7 @@ const selector$a = (s)=>({
         onError: s.onError
     });
 function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y }) {
-    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$a, shallow$1);
+    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$9, shallow$1);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return jsxRuntime.jsxs("div", {
         className: "react-flow__edges",
@@ -10924,13 +10977,36 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
 }
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 const EdgeRenderer = React.memo(EdgeRendererComponent);
-const selector$9 = (s)=>`translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const toTransformString = (transform)=>`translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`;
 function Viewport({ children }) {
-    const transform = useStore(selector$9);
+    const store = useStoreApi();
+    const viewportRef = React.useRef(null);
+    // seed the transform for first paint and SSR without subscribing, so we don't re-render on pan/zoom
+    const [initialTransform] = React.useState(()=>store.getState().transform);
+    // transform changes every pan/zoom frame, so write it to the DOM directly to keep React out of the hot path
+    useIsomorphicLayoutEffect$3(()=>{
+        let prevTransform = null;
+        const applyTransform = ()=>{
+            const transform = store.getState().transform;
+            // store.subscribe fires on every update, so only touch the DOM when x, y or zoom actually changed
+            if (prevTransform && transform[0] === prevTransform[0] && transform[1] === prevTransform[1] && transform[2] === prevTransform[2]) {
+                return;
+            }
+            prevTransform = transform;
+            if (viewportRef.current) {
+                viewportRef.current.style.transform = toTransformString(transform);
+            }
+        };
+        applyTransform();
+        return store.subscribe(applyTransform);
+    }, [
+        store
+    ]);
     return jsxRuntime.jsx("div", {
+        ref: viewportRef,
         className: "react-flow__viewport xyflow__viewport react-flow__container",
         style: {
-            transform
+            transform: toTransformString(initialTransform)
         },
         children: children
     });
@@ -11150,7 +11226,7 @@ function useStylesLoadedWarning() {
         }
     }, []);
 }
-function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
+function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, nodesDraggable }) {
     useNodeOrEdgeTypesWarning(nodeTypes);
     useNodeOrEdgeTypesWarning(edgeTypes);
     useStylesLoadedWarning();
@@ -11237,7 +11313,8 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
                     noDragClassName: noDragClassName,
                     disableKeyboardA11y: disableKeyboardA11y,
                     nodeExtent: nodeExtent,
-                    rfId: rfId
+                    rfId: rfId,
+                    nodesDraggable: nodesDraggable
                 }),
                 jsxRuntime.jsx("div", {
                     className: "react-flow__viewport-portal"
@@ -11969,7 +12046,8 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
                     disableKeyboardA11y: disableKeyboardA11y,
                     nodeExtent: nodeExtent,
                     viewport: viewport,
-                    onViewportChange: onViewportChange
+                    onViewportChange: onViewportChange,
+                    nodesDraggable: nodesDraggable
                 }),
                 jsxRuntime.jsx(SelectionListener, {
                     onSelectionChange: onSelectionChange
@@ -12590,6 +12668,10 @@ const selector$1 = (s)=>{
         ariaLabelConfig: s.ariaLabelConfig
     };
 };
+const rectEqual = (a, b)=>a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+// the selector builds new viewBB/boundingRect objects every call, so the default shallow equality always
+// treats them as changed; comparing the rects by value lets the minimap skip re-renders when nothing moved
+const areEqual = (a, b)=>rectEqual(a.viewBB, b.viewBB) && rectEqual(a.boundingRect, b.boundingRect) && a.rfId === b.rfId && a.panZoom === b.panZoom && a.translateExtent === b.translateExtent && a.flowWidth === b.flowWidth && a.flowHeight === b.flowHeight && a.ariaLabelConfig === b.ariaLabelConfig;
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, /*
  * We need to rename the prop to be `CapitalCase` so that JSX will render it as
@@ -12597,7 +12679,7 @@ function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeCl
  */ nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel, inversePan, zoomStep = 1, offsetScale = 5 }) {
     const store = useStoreApi();
     const svg = React.useRef(null);
-    const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, ariaLabelConfig } = useStore(selector$1, shallow$1);
+    const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, ariaLabelConfig } = useStore(selector$1, areEqual);
     const elementWidth = style?.width ?? defaultWidth;
     const elementHeight = style?.height ?? defaultHeight;
     const scaledWidth = boundingRect.width / elementWidth;
@@ -12938,11 +13020,11 @@ function styleInject(css, ref) {
     }
 }
 
-var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #555;\n  --xy-background-pattern-lines-color-default: #333;\n  --xy-background-pattern-cross-color-default: #333;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
 styleInject(css_248z);
 
 /**
- * @license lucide-react v1.21.0 - ISC
+ * @license lucide-react v1.23.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12951,14 +13033,14 @@ styleInject(css_248z);
     }).join(" ").trim();
 
 /**
- * @license lucide-react v1.21.0 - ISC
+ * @license lucide-react v1.23.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */ const toKebabCase = (string)=>string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v1.21.0 - ISC
+ * @license lucide-react v1.23.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12970,7 +13052,7 @@ const toPascalCase = (string)=>{
 };
 
 /**
- * @license lucide-react v1.21.0 - ISC
+ * @license lucide-react v1.23.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12987,7 +13069,7 @@ const toPascalCase = (string)=>{
 };
 
 /**
- * @license lucide-react v1.21.0 - ISC
+ * @license lucide-react v1.23.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -13037,7 +13119,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$D = [
+const __iconNode$G = [
     [
         "path",
         {
@@ -13053,9 +13135,9 @@ const __iconNode$D = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$D);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$G);
 
-const __iconNode$C = [
+const __iconNode$F = [
     [
         "path",
         {
@@ -13071,9 +13153,31 @@ const __iconNode$C = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$C);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$F);
 
-const __iconNode$B = [
+const __iconNode$E = [
+    [
+        "circle",
+        {
+            cx: "9",
+            cy: "9",
+            r: "7",
+            key: "p2h5vp"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "15",
+            cy: "15",
+            r: "7",
+            key: "19ennj"
+        }
+    ]
+];
+const Blend = createLucideIcon("blend", __iconNode$E);
+
+const __iconNode$D = [
     [
         "path",
         {
@@ -13121,9 +13225,9 @@ const __iconNode$B = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$B);
+const Bot = createLucideIcon("bot", __iconNode$D);
 
-const __iconNode$A = [
+const __iconNode$C = [
     [
         "path",
         {
@@ -13157,9 +13261,9 @@ const __iconNode$A = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$A);
+const Calendar = createLucideIcon("calendar", __iconNode$C);
 
-const __iconNode$z = [
+const __iconNode$B = [
     [
         "path",
         {
@@ -13216,9 +13320,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$z);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$B);
 
-const __iconNode$y = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -13227,9 +13331,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$y);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$A);
 
-const __iconNode$x = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -13238,9 +13342,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$x);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$z);
 
-const __iconNode$w = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13256,9 +13360,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$w);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$y);
 
-const __iconNode$v = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13274,9 +13378,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$v);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$x);
 
-const __iconNode$u = [
+const __iconNode$w = [
     [
         "circle",
         {
@@ -13307,9 +13411,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$u);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$w);
 
-const __iconNode$t = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13325,9 +13429,29 @@ const __iconNode$t = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$t);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$v);
 
-const __iconNode$s = [
+const __iconNode$u = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 12 2 2 4-4",
+            key: "dzmm74"
+        }
+    ]
+];
+const CircleCheck = createLucideIcon("circle-check", __iconNode$u);
+
+const __iconNode$t = [
     [
         "circle",
         {
@@ -13352,7 +13476,34 @@ const __iconNode$s = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$s);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$t);
+
+const __iconNode$s = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m15 9-6 6",
+            key: "1uzhvr"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 9 6 6",
+            key: "z0biqf"
+        }
+    ]
+];
+const CircleX = createLucideIcon("circle-x", __iconNode$s);
 
 const __iconNode$r = [
     [
@@ -16196,6 +16347,21 @@ const lightTheme = {
             border: "#fca5a5",
             color: "#b91c1c"
         },
+        tagPass: {
+            bg: "#dcfce7",
+            border: "#86efac",
+            color: "#15803d"
+        },
+        tagFail: {
+            bg: "#fee2e2",
+            border: "#fca5a5",
+            color: "#b91c1c"
+        },
+        tagPartial: {
+            bg: "#fef3c7",
+            border: "#fcd34d",
+            color: "#b45309"
+        },
         tagToolLevel1: {
             bg: "#dcfce7",
             color: "#166534"
@@ -16287,6 +16453,21 @@ const lightTheme = {
             border: "hsla(0 84% 55% / 0.35)",
             color: "hsl(0 72% 40%)"
         },
+        tagPass: {
+            bg: "hsla(142 70% 42% / 0.15)",
+            border: "hsla(142 70% 38% / 0.35)",
+            color: "hsl(142 71% 28%)"
+        },
+        tagFail: {
+            bg: "hsla(0 84% 60% / 0.12)",
+            border: "hsla(0 84% 55% / 0.35)",
+            color: "hsl(0 72% 40%)"
+        },
+        tagPartial: {
+            bg: "hsla(38 92% 50% / 0.15)",
+            border: "hsla(38 92% 45% / 0.35)",
+            color: "hsl(32 81% 33%)"
+        },
         tagToolLevel1: {
             bg: "hsla(142 70% 42% / 0.15)",
             color: "hsl(142 71% 28%)"
@@ -16355,6 +16536,21 @@ const lightTheme = {
             border: "hsla(0 72% 42% / 0.35)",
             color: "hsl(0 84% 72%)"
         },
+        tagPass: {
+            bg: "hsla(142 70% 42% / 0.22)",
+            border: "hsla(142 70% 36% / 0.35)",
+            color: "hsl(142 70% 72%)"
+        },
+        tagFail: {
+            bg: "hsla(0 72% 48% / 0.18)",
+            border: "hsla(0 72% 42% / 0.35)",
+            color: "hsl(0 84% 72%)"
+        },
+        tagPartial: {
+            bg: "hsla(38 92% 50% / 0.2)",
+            border: "hsla(38 92% 44% / 0.35)",
+            color: "hsl(43 96% 70%)"
+        },
         tagToolLevel1: {
             bg: "hsla(142 70% 42% / 0.22)",
             color: "hsl(142 70% 72%)"
@@ -16418,6 +16614,21 @@ const darkTheme = {
             border: "hsl(0 72% 35%)",
             color: "hsl(0 84% 60%)"
         },
+        tagPass: {
+            bg: "hsl(142 70% 15%)",
+            border: "hsl(142 70% 35%)",
+            color: "hsl(142 70% 65%)"
+        },
+        tagFail: {
+            bg: "hsl(0 72% 15%)",
+            border: "hsl(0 72% 35%)",
+            color: "hsl(0 84% 60%)"
+        },
+        tagPartial: {
+            bg: "hsl(38 92% 15%)",
+            border: "hsl(38 92% 35%)",
+            color: "hsl(43 96% 62%)"
+        },
         tagToolLevel1: {
             bg: "hsl(142 70% 18%)",
             color: "hsl(142 70% 65%)"
@@ -21986,7 +22197,7 @@ function getFontSizes(base) {
         }));
 }
 
-var version = '6.4.5';
+var version = '6.5.0';
 
 const defaultPresetColors = {
     blue: '#1677FF',
@@ -22937,11 +23148,157 @@ const useResetIconStyle = (iconPrefixCls, csp)=>{
 
 const IconContext = /*#__PURE__*/ React.createContext({});
 
+const APPEND_ORDER = 'data-rc-order';
+const APPEND_PRIORITY = 'data-rc-priority';
+const MARK_KEY = 'rc-util-key';
+const containerCache = new Map();
+function canUseDom() {
+    return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function contains(root, node) {
+    if (!root || !node) {
+        return false;
+    }
+    if (root.contains) {
+        return root.contains(node);
+    }
+    let current = node;
+    while(current){
+        if (current === root) {
+            return true;
+        }
+        current = current.parentNode;
+    }
+    return false;
+}
+function getMark({ mark } = {}) {
+    if (mark) {
+        return mark.startsWith('data-') ? mark : `data-${mark}`;
+    }
+    return MARK_KEY;
+}
+function getContainer(option) {
+    if (option.attachTo) {
+        return option.attachTo;
+    }
+    const head = document.querySelector('head');
+    return head || document.body;
+}
+function getOrder(prepend) {
+    if (prepend === 'queue') {
+        return 'prependQueue';
+    }
+    return prepend ? 'prepend' : 'append';
+}
+function findStyles(container) {
+    return Array.from((containerCache.get(container) || container).children).filter((node)=>node.tagName === 'STYLE');
+}
+function injectCSS(css, option = {}) {
+    if (!canUseDom()) {
+        return null;
+    }
+    const { csp, prepend, priority = 0 } = option;
+    const mergedOrder = getOrder(prepend);
+    const isPrependQueue = mergedOrder === 'prependQueue';
+    const styleNode = document.createElement('style');
+    styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+    if (isPrependQueue && priority) {
+        styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
+    }
+    if (csp?.nonce) {
+        styleNode.nonce = csp.nonce;
+    }
+    styleNode.innerHTML = css;
+    const container = getContainer(option);
+    const { firstChild } = container;
+    if (prepend) {
+        if (isPrependQueue) {
+            const existStyle = (option.styles || findStyles(container)).filter((node)=>{
+                if (![
+                    'prepend',
+                    'prependQueue'
+                ].includes(node.getAttribute(APPEND_ORDER))) {
+                    return false;
+                }
+                const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+                return priority >= nodePriority;
+            });
+            if (existStyle.length) {
+                container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
+                return styleNode;
+            }
+        }
+        container.insertBefore(styleNode, firstChild);
+    } else {
+        container.appendChild(styleNode);
+    }
+    return styleNode;
+}
+function findExistNode(key, option = {}) {
+    let { styles } = option;
+    styles || (styles = findStyles(getContainer(option)));
+    return styles.find((node)=>node.getAttribute(getMark(option)) === key);
+}
+function syncRealContainer(container, option) {
+    const cachedRealContainer = containerCache.get(container);
+    if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+        const placeholderStyle = injectCSS('', option);
+        if (!placeholderStyle) {
+            return;
+        }
+        const { parentNode } = placeholderStyle;
+        containerCache.set(container, parentNode);
+        container.removeChild(placeholderStyle);
+    }
+}
+function updateCSS(css, key, originOption = {}) {
+    if (!canUseDom()) {
+        return null;
+    }
+    const container = getContainer(originOption);
+    const styles = findStyles(container);
+    const option = {
+        ...originOption,
+        styles
+    };
+    syncRealContainer(container, option);
+    const existNode = findExistNode(key, option);
+    if (existNode) {
+        if (option.csp?.nonce && existNode.nonce !== option.csp.nonce) {
+            existNode.nonce = option.csp.nonce;
+        }
+        if (existNode.innerHTML !== css) {
+            existNode.innerHTML = css;
+        }
+        return existNode;
+    }
+    const newNode = injectCSS(css, option);
+    newNode?.setAttribute(getMark(option), key);
+    return newNode;
+}
+function getRoot(ele) {
+    return ele?.getRootNode?.();
+}
+function getShadowRoot(ele) {
+    const root = getRoot(ele);
+    return typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root : null;
+}
+const warned = {};
+function warningOnce$1(valid, message) {
+    if (valid || warned[message]) {
+        return;
+    }
+    if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+        console.error(`Warning: ${message}`);
+    }
+    warned[message] = true;
+}
+
 function camelCase(input) {
     return input.replace(/-(.)/g, (match, g)=>g.toUpperCase());
 }
 function warning$1(valid, message) {
-    util.warning(valid, `[@ant-design/icons] ${message}`);
+    warningOnce$1(valid, `[@ant-design/icons] ${message}`);
 }
 function isIconDefinition(target) {
     return typeof target === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (typeof target.icon === 'object' || typeof target.icon === 'function');
@@ -22974,18 +23331,6 @@ function generate(node, key, rootProps) {
         ...rootProps
     }, (node.children || []).map((child, index)=>generate(child, `${key}-${node.tag}-${index}`)));
 }
-function getSecondaryColor(primaryColor) {
-    // choose the second color
-    return colors.generate(primaryColor)[0];
-}
-function normalizeTwoToneColors(twoToneColor) {
-    if (!twoToneColor) {
-        return [];
-    }
-    return Array.isArray(twoToneColor) ? twoToneColor : [
-        twoToneColor
-    ];
-}
 const iconStyles = `
 .anticon {
   display: inline-flex;
@@ -23042,7 +23387,7 @@ const iconStyles = `
 }
 `;
 const useInsertStyles = (eleRef)=>{
-    const { csp, prefixCls, layer } = React.useContext(IconContext);
+    const { csp, prefixCls, layer, zeroRuntime } = React.useContext(IconContext);
     let mergedStyleStr = iconStyles;
     if (prefixCls) {
         mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
@@ -23051,9 +23396,12 @@ const useInsertStyles = (eleRef)=>{
         mergedStyleStr = `@layer ${layer} {\n${mergedStyleStr}\n}`;
     }
     React.useEffect(()=>{
+        if (zeroRuntime) {
+            return;
+        }
         const ele = eleRef.current;
-        const shadowRoot = util.getShadowRoot(ele);
-        util.updateCSS(mergedStyleStr, '@ant-design-icons', {
+        const shadowRoot = getShadowRoot(ele);
+        updateCSS(mergedStyleStr, '@ant-design-icons', {
             prepend: !layer,
             csp,
             attachTo: shadowRoot
@@ -23061,43 +23409,15 @@ const useInsertStyles = (eleRef)=>{
     }, []);
 };
 
-const twoToneColorPalette = {
-    primaryColor: '#333',
-    secondaryColor: '#E6E6E6',
-    calculated: false
-};
-function setTwoToneColors({ primaryColor, secondaryColor }) {
-    twoToneColorPalette.primaryColor = primaryColor;
-    twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
-    twoToneColorPalette.calculated = !!secondaryColor;
-}
-function getTwoToneColors() {
-    return {
-        ...twoToneColorPalette
-    };
-}
 const IconBase = (props)=>{
-    const { icon, className, onClick, style, primaryColor, secondaryColor, ...restProps } = props;
+    const { icon, className, onClick, style, primaryColor: _primaryColor, secondaryColor: _secondaryColor, ...restProps } = props;
     const svgRef = React__namespace.useRef(null);
-    let colors = twoToneColorPalette;
-    if (primaryColor) {
-        colors = {
-            primaryColor,
-            secondaryColor: secondaryColor || getSecondaryColor(primaryColor)
-        };
-    }
     useInsertStyles(svgRef);
     warning$1(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`);
     if (!isIconDefinition(icon)) {
         return null;
     }
-    let target = icon;
-    if (target && typeof target.icon === 'function') {
-        target = {
-            ...target,
-            icon: target.icon(colors.primaryColor, colors.secondaryColor)
-        };
-    }
+    const target = icon;
     return generate(target.icon, `svg-${target.name}`, {
         className,
         onClick,
@@ -23112,26 +23432,6 @@ const IconBase = (props)=>{
     });
 };
 IconBase.displayName = 'IconReact';
-IconBase.getTwoToneColors = getTwoToneColors;
-IconBase.setTwoToneColors = setTwoToneColors;
-
-function setTwoToneColor(twoToneColor) {
-    const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
-    return IconBase.setTwoToneColors({
-        primaryColor,
-        secondaryColor
-    });
-}
-function getTwoToneColor() {
-    const colors = IconBase.getTwoToneColors();
-    if (!colors.calculated) {
-        return colors.primaryColor;
-    }
-    return [
-        colors.primaryColor,
-        colors.secondaryColor
-    ];
-}
 
 function _extends$v() {
     _extends$v = Object.assign ? Object.assign.bind() : function(target) {
@@ -23147,15 +23447,11 @@ function _extends$v() {
     };
     return _extends$v.apply(this, arguments);
 }
-// Initial setting
-// should move it to antd main repo?
-setTwoToneColor(colors.blue.primary);
-// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720
 const Icon = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
     const { // affect outter <i>...</i>
     className, // affect inner <svg>...</svg>
-    icon, spin, rotate, tabIndex, onClick, // other
-    twoToneColor, ...restProps } = props;
+    icon, spin, rotate, tabIndex, onClick, twoToneColor: _twoToneColor, // other
+    ...restProps } = props;
     const { prefixCls = 'anticon', rootClassName } = React__namespace.useContext(IconContext);
     const classString = clsx(rootClassName, prefixCls, {
         [`${prefixCls}-${icon.name}`]: !!icon.name,
@@ -23169,7 +23465,6 @@ const Icon = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         msTransform: `rotate(${rotate}deg)`,
         transform: `rotate(${rotate}deg)`
     } : undefined;
-    const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
     return /*#__PURE__*/ React__namespace.createElement("span", _extends$v({
         role: "img",
         "aria-label": icon.name
@@ -23180,13 +23475,9 @@ const Icon = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         className: classString
     }), /*#__PURE__*/ React__namespace.createElement(IconBase, {
         icon: icon,
-        primaryColor: primaryColor,
-        secondaryColor: secondaryColor,
         style: svgStyle
     }));
 });
-Icon.getTwoToneColor = getTwoToneColor;
-Icon.setTwoToneColor = setTwoToneColor;
 if (process.env.NODE_ENV !== 'production') {
     Icon.displayName = 'AntdIcon';
 }
@@ -23396,6 +23687,13 @@ const mergeStyles = (...styles)=>{
 const useSemanticStyles = (...styles)=>{
     return React__namespace.useMemo(()=>mergeStyles.apply(void 0, styles), [].concat(styles));
 };
+const useSemanticRootStyle = (style)=>{
+    return React__namespace.useMemo(()=>style ? {
+            root: style
+        } : undefined, [
+        style
+    ]);
+};
 // =========================== Export ===========================
 const resolveStyleOrClass = (value, info)=>{
     return isFunction$1(value) ? value(info) : value;
@@ -23498,31 +23796,31 @@ const genBaseStyle$7 = (token)=>{
                 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}-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}-description`]: {
-                display: 'block',
-                color: colorText
+            [`&${componentCls}-banner`]: {
+                marginBottom: 0,
+                border: '0 !important',
+                borderRadius: 0
             }
-        },
-        [`${componentCls}-banner`]: {
-            marginBottom: 0,
-            border: '0 !important',
-            borderRadius: 0
         }
     };
 };
@@ -23692,12 +23990,16 @@ const Alert$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         showIcon: isShowIcon,
         closable: isClosable
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -23761,8 +24063,6 @@ const Alert$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
             className: clsx(alertCls, motionClassName),
             style: {
                 ...mergedStyles.root,
-                ...contextStyle,
-                ...style,
                 ...motionStyle
             },
             onMouseEnter: onMouseEnter,
@@ -23811,21 +24111,21 @@ function _classCallCheck(a, n) {
     if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
 
-function _typeof$1(o) {
+function _typeof(o) {
     "@babel/helpers - typeof";
-    return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
         return typeof o;
     } : function(o) {
         return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-    }, _typeof$1(o);
+    }, _typeof(o);
 }
 
 function toPrimitive(t, r) {
-    if ("object" != _typeof$1(t) || !t) return t;
+    if ("object" != _typeof(t) || !t) return t;
     var e = t[Symbol.toPrimitive];
     if (void 0 !== e) {
         var i = e.call(t, r);
-        if ("object" != _typeof$1(i)) return i;
+        if ("object" != _typeof(i)) return i;
         throw new TypeError("@@toPrimitive must return a primitive value.");
     }
     return (String )(t);
@@ -23833,7 +24133,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
     var i = toPrimitive(t, "string");
-    return "symbol" == _typeof$1(i) ? i : i + "";
+    return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperties(e, r) {
@@ -23869,7 +24169,7 @@ function _assertThisInitialized(e) {
 }
 
 function _possibleConstructorReturn(t, e) {
-    if (e && ("object" == _typeof$1(e) || "function" == typeof e)) return 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);
 }
@@ -24044,71 +24344,15 @@ const locale$4 = {
     page_size: 'Page Size'
 };
 
-var commonLocale = {
+const commonLocale = {
     yearFormat: 'YYYY',
     dayFormat: 'D',
     cellMeridiemFormat: 'A',
     monthBeforeYear: true
 };
 
-function _typeof(o) {
-    "@babel/helpers - typeof";
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-        return typeof o;
-    } : function(o) {
-        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-    }, _typeof(o);
-}
-function ownKeys(e, r) {
-    var t = Object.keys(e);
-    if (Object.getOwnPropertySymbols) {
-        var o = Object.getOwnPropertySymbols(e);
-        r && (o = o.filter(function(r) {
-            return Object.getOwnPropertyDescriptor(e, r).enumerable;
-        })), t.push.apply(t, o);
-    }
-    return t;
-}
-function _objectSpread(e) {
-    for(var r = 1; r < arguments.length; r++){
-        var t = null != arguments[r] ? arguments[r] : {};
-        r % 2 ? ownKeys(Object(t), true).forEach(function(r) {
-            _defineProperty(e, r, t[r]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
-            Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-        });
-    }
-    return e;
-}
-function _defineProperty(obj, key, value) {
-    key = _toPropertyKey(key);
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _toPropertyKey(t) {
-    var i = _toPrimitive(t, "string");
-    return "symbol" == _typeof(i) ? i : String(i);
-}
-function _toPrimitive(t, r) {
-    if ("object" != _typeof(t) || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-        var i = e.call(t, r);
-        if ("object" != _typeof(i)) return i;
-        throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return ("string" === r ? String : Number)(t);
-}
-var locale$3 = _objectSpread(_objectSpread({}, commonLocale), {}, {
+const locale$3 = {
+    ...commonLocale,
     locale: 'en_US',
     today: 'Today',
     now: 'Now',
@@ -24132,7 +24376,7 @@ var locale$3 = _objectSpread(_objectSpread({}, commonLocale), {}, {
     nextDecade: 'Next decade',
     previousCentury: 'Last century',
     nextCentury: 'Next century'
-});
+};
 
 const locale$2 = {
     placeholder: 'Select time',
@@ -24824,11 +25068,13 @@ const ProviderChildren = (props)=>{
     const memoIconContextValue = React__namespace.useMemo(()=>({
             prefixCls: iconPrefixCls,
             csp,
-            layer: layer ? 'antd' : undefined
+            layer: layer ? 'antd' : undefined,
+            zeroRuntime: mergedTheme?.zeroRuntime
         }), [
         iconPrefixCls,
         csp,
-        layer
+        layer,
+        mergedTheme?.zeroRuntime
     ]);
     let childNode = /*#__PURE__*/ React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/ React__namespace.createElement(IconStyle, {
         iconPrefixCls: iconPrefixCls,
@@ -27701,7 +27947,7 @@ const CollapsePanel = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
 });
 
 const genBaseStyle$6 = (token)=>{
-    const { componentCls, contentBg, padding, headerBg, headerPadding, collapseHeaderPaddingSM, collapseHeaderPaddingLG, collapsePanelBorderRadius, lineWidth, lineType, colorBorder, colorText, colorTextHeading, colorTextDisabled, fontSizeLG, lineHeight, lineHeightLG, marginSM, paddingSM, paddingLG, paddingXS, motionDurationSlow, fontSizeIcon, contentPadding, fontHeight, fontHeightLG } = token;
+    const { componentCls, contentBg, padding, headerBg, headerPadding, headerPaddingSM, headerPaddingLG, collapsePanelBorderRadius, lineWidth, lineType, colorBorder, colorText, colorTextHeading, colorTextDisabled, fontSizeLG, lineHeight, lineHeightLG, marginSM, paddingSM, paddingLG, paddingXS, motionDurationSlow, fontSizeIcon, contentPadding, contentPaddingSM, contentPaddingLG, fontHeight, fontHeightLG } = token;
     const borderBase = `${cssinjs.unit(lineWidth)} ${lineType} ${colorBorder}`;
     return {
         [componentCls]: {
@@ -27796,15 +28042,14 @@ const genBaseStyle$6 = (token)=>{
             '&-small': {
                 [`> ${componentCls}-item`]: {
                     [`> ${componentCls}-header`]: {
-                        padding: collapseHeaderPaddingSM,
-                        paddingInlineStart: paddingXS,
+                        padding: headerPaddingSM,
                         [`> ${componentCls}-expand-icon`]: {
                             // Arrow offset
                             marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal()
                         }
                     },
                     [`> ${componentCls}-panel > ${componentCls}-body`]: {
-                        padding: paddingSM
+                        padding: contentPaddingSM
                     }
                 }
             },
@@ -27813,8 +28058,7 @@ const genBaseStyle$6 = (token)=>{
                     fontSize: fontSizeLG,
                     lineHeight: lineHeightLG,
                     [`> ${componentCls}-header`]: {
-                        padding: collapseHeaderPaddingLG,
-                        paddingInlineStart: padding,
+                        padding: headerPaddingLG,
                         [`> ${componentCls}-expand-icon`]: {
                             height: fontHeightLG,
                             // Arrow offset
@@ -27822,7 +28066,7 @@ const genBaseStyle$6 = (token)=>{
                         }
                     },
                     [`> ${componentCls}-panel > ${componentCls}-body`]: {
-                        padding: paddingLG
+                        padding: contentPaddingLG
                     }
                 }
             },
@@ -27911,19 +28155,24 @@ const genGhostStyle = (token)=>{
         }
     };
 };
-const prepareComponentToken$l = (token)=>({
-        headerPadding: `${token.paddingSM}px ${token.padding}px`,
+const prepareComponentToken$l = (token)=>{
+    const componentToken = {
+        headerPadding: `${cssinjs.unit(token.paddingSM)} ${cssinjs.unit(token.padding)}`,
+        headerPaddingSM: `${cssinjs.unit(token.paddingXS)} ${cssinjs.unit(token.paddingSM)} ${cssinjs.unit(token.paddingXS)} ${cssinjs.unit(token.paddingXS)}`,
+        headerPaddingLG: `${cssinjs.unit(token.padding)} ${cssinjs.unit(token.paddingLG)} ${cssinjs.unit(token.padding)} ${cssinjs.unit(token.padding)}`,
         headerBg: token.colorFillAlter,
-        contentPadding: `${token.padding}px 16px`,
+        contentPadding: `${cssinjs.unit(token.padding)} ${cssinjs.unit(16)}`,
         // Fixed Value
+        contentPaddingSM: token.paddingSM,
+        contentPaddingLG: token.paddingLG,
         contentBg: token.colorBgContainer,
-        borderlessContentPadding: `${token.paddingXXS}px 16px ${token.padding}px`,
+        borderlessContentPadding: `${cssinjs.unit(token.paddingXXS)} ${cssinjs.unit(16)} ${cssinjs.unit(token.padding)}`,
         borderlessContentBg: 'transparent'
-    });
+    };
+    return componentToken;
+};
 var useStyle$q = genStyleHooks('Collapse', (token)=>{
     const collapseToken = cssinjsUtils.mergeToken(token, {
-        collapseHeaderPaddingSM: `${cssinjs.unit(token.paddingXS)} ${cssinjs.unit(token.paddingSM)}`,
-        collapseHeaderPaddingLG: `${cssinjs.unit(token.padding)} ${cssinjs.unit(token.paddingLG)}`,
         collapsePanelBorderRadius: token.borderRadiusLG
     });
     return [
@@ -27950,12 +28199,16 @@ const Collapse$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         bordered,
         expandIconPlacement: mergedPlacement
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -28020,11 +28273,7 @@ const Collapse$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         expandIcon: renderExpandIcon,
         prefixCls: prefixCls,
         className: collapseClassName,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         classNames: mergedClassNames,
         styles: mergedStyles,
         destroyOnHidden: destroyOnHidden ?? destroyInactivePanel
@@ -28429,12 +28678,6 @@ const genSharedButtonStyle = (token)=>{
             },
             // https://github.com/ant-design/ant-design/issues/51380
             [`${componentCls}-icon > svg`]: resetIcon(),
-            // https://github.com/ant-design/ant-design/issues/57727
-            [`${componentCls}-icon`]: {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
             '> a': {
                 color: 'currentColor'
             },
@@ -29020,12 +29263,16 @@ const InternalCompoundedButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         iconPlacement: mergedIconPlacement
     };
     // ========================= Style ==========================
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         _skipSemantic ? undefined : contextClassNames,
         classNames
     ], [
         _skipSemantic ? undefined : contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -29047,11 +29294,6 @@ const InternalCompoundedButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         [`${prefixCls}-rtl`]: direction === 'rtl',
         [`${prefixCls}-icon-end`]: mergedIconPlacement === 'end'
     }, compactItemClassnames, className, rootClassName, contextClassName, mergedClassNames.root);
-    const fullStyle = {
-        ...mergedStyles.root,
-        ...contextStyle,
-        ...style
-    };
     const iconSharedProps = {
         className: mergedClassNames.icon,
         style: mergedStyles.icon
@@ -29089,7 +29331,7 @@ const InternalCompoundedButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 [`${prefixCls}-disabled`]: mergedDisabled
             }),
             href: mergedDisabled ? undefined : linkButtonRestProps.href,
-            style: fullStyle,
+            style: mergedStyles.root,
             onClick: handleClick,
             ref: mergedRef,
             tabIndex: mergedDisabled ? -1 : 0,
@@ -29100,7 +29342,7 @@ const InternalCompoundedButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         ...rest,
         type: htmlType,
         className: classes,
-        style: fullStyle,
+        style: mergedStyles.root,
         onClick: handleClick,
         disabled: mergedDisabled,
         ref: mergedRef
@@ -29728,12 +29970,16 @@ const Skeleton = (props)=>{
         title,
         paragraph
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -29802,11 +30048,7 @@ const Skeleton = (props)=>{
         }, mergedClassNames.root, contextClassName, className, rootClassName, hashId, cssVarCls);
         return /*#__PURE__*/ React__namespace.createElement("div", {
             className: cls,
-            style: {
-                ...mergedStyles.root,
-                ...contextStyle,
-                ...style
-            }
+            style: mergedStyles.root
         }, avatarNode, contentNode);
     }
     return children ?? null;
@@ -30292,12 +30534,16 @@ const Empty = (props)=>{
     const { getPrefixCls, direction, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles, image: contextImage } = useComponentConfig('empty');
     const prefixCls = getPrefixCls('empty', customizePrefixCls);
     const [hashId, cssVarCls] = useStyle$n(prefixCls);
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props
     });
@@ -30332,11 +30578,7 @@ const Empty = (props)=>{
             [`${prefixCls}-normal`]: mergedImage === simpleEmptyImg,
             [`${prefixCls}-rtl`]: direction === 'rtl'
         }, className, rootClassName, mergedClassNames.root),
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         ...restProps
     }, /*#__PURE__*/ React__namespace.createElement("div", {
         className: clsx(`${prefixCls}-image`, mergedClassNames.image),
@@ -30807,7 +31049,7 @@ const genSelectInputMultipleStyle = (token)=>{
         }
     };
 };
-/** Generate variant-scoped variable styles and status overrides for a Select input */ const genSelectInputVariantStyle = (token, variant, colors, errorColors = {}, warningColors = {}, patchStyle)=>{
+/** Generate variant-scoped variable styles and status overrides for a Select input */ const genSelectInputVariantStyle = (token, variant, colors, errorColors, warningColors, patchStyle)=>{
     const { componentCls } = token;
     return {
         [`&${componentCls}-${variant}`]: [
@@ -30826,6 +31068,14 @@ const genSelectInputMultipleStyle = (token)=>{
         ]
     };
 };
+const genSelectInputFocusVisibleStyle = (token, outlineColor)=>({
+        outline: `${cssinjs.unit(token.lineWidth)} ${token.lineType} ${outlineColor}`,
+        outlineOffset: cssinjs.unit(token.calc(token.lineWidth).mul(-1).equal()),
+        transition: [
+            `outline-offset`,
+            `outline`
+        ].map((prop)=>`${prop} 0s`).join(', ')
+    });
 const genSelectInputStyle = (token)=>{
     const { componentCls, fontHeight, controlHeight, fontSizeIcon, showArrowPaddingInlineEnd, iconCls, antCls, max, calc } = token;
     const [varName, varRef] = genCssVar(antCls, 'select');
@@ -31001,20 +31251,31 @@ const genSelectInputStyle = (token)=>{
                         },
                         '&-has-search-value': {
                             color: 'transparent',
-                            [`> :not(${componentCls}-input)`]: {
+                            [`> *:not(${componentCls}-input)`]: {
                                 opacity: 0
                             }
                         },
                         // >>> Value
                         '&-value': {
                             transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
-                            zIndex: 1
+                            zIndex: 1,
+                            opacity: 1
                         }
                     },
+                    // Dim the selected content while the dropdown is open. Shared by all select-like
+                    // components (Select / Cascader / TreeSelect) since they render through the same
+                    // `content` structure.
                     [`&${componentCls}-open ${componentCls}-content`]: {
-                        color: token.colorTextPlaceholder,
+                        '&-has-value': {
+                            opacity: 0.25
+                        },
                         '&-has-search-value': {
-                            color: 'transparent'
+                            opacity: 1,
+                            transition: `opacity ${token.motionDurationMid} ${token.motionEaseInOut}`,
+                            color: 'transparent',
+                            [`> *:not(${componentCls}-input)`]: {
+                                opacity: 0
+                            }
                         }
                     }
                 }
@@ -31081,6 +31342,10 @@ const genSelectInputStyle = (token)=>{
                 borderActive: 'transparent',
                 borderOutline: 'transparent',
                 background: 'transparent'
+            }, {}, {}, {
+                [`&:not(${componentCls}-disabled):has(input:focus-visible), &:not(${componentCls}-disabled):has(textarea:focus-visible)`]: genSelectInputFocusVisibleStyle(token, token.activeBorderColor),
+                [`&${componentCls}-status-error:not(${componentCls}-disabled):has(input:focus-visible), &${componentCls}-status-error:not(${componentCls}-disabled):has(textarea:focus-visible)`]: genSelectInputFocusVisibleStyle(token, token.colorError),
+                [`&${componentCls}-status-warning:not(${componentCls}-disabled):has(input:focus-visible), &${componentCls}-status-warning:not(${componentCls}-disabled):has(textarea:focus-visible)`]: genSelectInputFocusVisibleStyle(token, token.colorWarning)
             }),
             // Underlined
             genSelectInputVariantStyle(token, 'underlined', {
@@ -31524,12 +31789,16 @@ const InternalSelect = (props, ref)=>{
         disabled: mergedDisabled,
         size: mergedSize
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     }, {
@@ -31589,11 +31858,7 @@ const InternalSelect = (props, ref)=>{
         styles: mergedStyles,
         showSearch: mergedShowSearch,
         ...selectProps,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         popupMatchSelectWidth: mergedPopupMatchSelectWidth,
         transitionName: getTransitionName(rootPrefixCls, 'slide-up', transitionName),
         builtinPlacements: mergedBuiltinPlacements(builtinPlacements, popupOverflow),
@@ -31855,21 +32120,10 @@ function getArrowOffsetToken(options) {
         arrowOffsetVertical
     };
 }
-function isInject(valid, code) {
-    if (!valid) {
-        return {};
-    }
-    return code;
-}
 const getArrowStyle = (token, colorBg, options)=>{
     const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal, antCls } = token;
     const [varName] = genCssVar(antCls, 'tooltip');
-    const { arrowDistance = 0, arrowPlacement = {
-        left: true,
-        right: true,
-        top: true,
-        bottom: true
-    }, arrowShadow = true } = options || {};
+    const { arrowDistance = 0, arrowShadow = true } = options || {};
     return {
         [componentCls]: {
             // ============================ Basic ============================
@@ -31888,131 +32142,123 @@ const getArrowStyle = (token, colorBg, options)=>{
             // ========================== Placement ==========================
             // Here handle the arrow position and rotate stuff
             // >>>>> Top
-            ...isInject(!!arrowPlacement.top, {
-                [[
-                    `&-placement-top > ${componentCls}-arrow`,
-                    `&-placement-topLeft > ${componentCls}-arrow`,
-                    `&-placement-topRight > ${componentCls}-arrow`
-                ].join(',')]: {
-                    bottom: arrowDistance,
-                    transform: 'translateY(100%) rotate(180deg)'
+            [[
+                `&-placement-top > ${componentCls}-arrow`,
+                `&-placement-topLeft > ${componentCls}-arrow`,
+                `&-placement-topRight > ${componentCls}-arrow`
+            ].join(',')]: {
+                bottom: arrowDistance,
+                transform: 'translateY(100%) rotate(180deg)'
+            },
+            [`&-placement-top > ${componentCls}-arrow`]: {
+                left: {
+                    _skip_check_: true,
+                    value: '50%'
                 },
-                [`&-placement-top > ${componentCls}-arrow`]: {
+                transform: 'translateX(-50%) translateY(100%) rotate(180deg)'
+            },
+            '&-placement-topLeft': {
+                [varName('arrow-offset-x')]: arrowOffsetHorizontal,
+                [`> ${componentCls}-arrow`]: {
                     left: {
                         _skip_check_: true,
-                        value: '50%'
-                    },
-                    transform: 'translateX(-50%) translateY(100%) rotate(180deg)'
-                },
-                '&-placement-topLeft': {
-                    [varName('arrow-offset-x')]: arrowOffsetHorizontal,
-                    [`> ${componentCls}-arrow`]: {
-                        left: {
-                            _skip_check_: true,
-                            value: arrowOffsetHorizontal
-                        }
+                        value: arrowOffsetHorizontal
                     }
-                },
-                '&-placement-topRight': {
-                    [varName('arrow-offset-x')]: `calc(100% - ${cssinjs.unit(arrowOffsetHorizontal)})`,
-                    [`> ${componentCls}-arrow`]: {
-                        right: {
-                            _skip_check_: true,
-                            value: arrowOffsetHorizontal
-                        }
+                }
+            },
+            '&-placement-topRight': {
+                [varName('arrow-offset-x')]: `calc(100% - ${cssinjs.unit(arrowOffsetHorizontal)})`,
+                [`> ${componentCls}-arrow`]: {
+                    right: {
+                        _skip_check_: true,
+                        value: arrowOffsetHorizontal
                     }
                 }
-            }),
+            },
             // >>>>> Bottom
-            ...isInject(!!arrowPlacement.bottom, {
-                [[
-                    `&-placement-bottom > ${componentCls}-arrow`,
-                    `&-placement-bottomLeft > ${componentCls}-arrow`,
-                    `&-placement-bottomRight > ${componentCls}-arrow`
-                ].join(',')]: {
-                    top: arrowDistance,
-                    transform: `translateY(-100%)`
+            [[
+                `&-placement-bottom > ${componentCls}-arrow`,
+                `&-placement-bottomLeft > ${componentCls}-arrow`,
+                `&-placement-bottomRight > ${componentCls}-arrow`
+            ].join(',')]: {
+                top: arrowDistance,
+                transform: `translateY(-100%)`
+            },
+            [`&-placement-bottom > ${componentCls}-arrow`]: {
+                left: {
+                    _skip_check_: true,
+                    value: '50%'
                 },
-                [`&-placement-bottom > ${componentCls}-arrow`]: {
+                transform: `translateX(-50%) translateY(-100%)`
+            },
+            '&-placement-bottomLeft': {
+                [varName('arrow-offset-x')]: arrowOffsetHorizontal,
+                [`> ${componentCls}-arrow`]: {
                     left: {
                         _skip_check_: true,
-                        value: '50%'
-                    },
-                    transform: `translateX(-50%) translateY(-100%)`
-                },
-                '&-placement-bottomLeft': {
-                    [varName('arrow-offset-x')]: arrowOffsetHorizontal,
-                    [`> ${componentCls}-arrow`]: {
-                        left: {
-                            _skip_check_: true,
-                            value: arrowOffsetHorizontal
-                        }
-                    }
-                },
-                '&-placement-bottomRight': {
-                    [varName('arrow-offset-x')]: `calc(100% - ${cssinjs.unit(arrowOffsetHorizontal)})`,
-                    [`> ${componentCls}-arrow`]: {
-                        right: {
-                            _skip_check_: true,
-                            value: arrowOffsetHorizontal
-                        }
+                        value: arrowOffsetHorizontal
                     }
                 }
-            }),
-            // >>>>> Left
-            ...isInject(!!arrowPlacement.left, {
-                [[
-                    `&-placement-left > ${componentCls}-arrow`,
-                    `&-placement-leftTop > ${componentCls}-arrow`,
-                    `&-placement-leftBottom > ${componentCls}-arrow`
-                ].join(',')]: {
+            },
+            '&-placement-bottomRight': {
+                [varName('arrow-offset-x')]: `calc(100% - ${cssinjs.unit(arrowOffsetHorizontal)})`,
+                [`> ${componentCls}-arrow`]: {
                     right: {
                         _skip_check_: true,
-                        value: arrowDistance
-                    },
-                    transform: 'translateX(100%) rotate(90deg)'
-                },
-                [`&-placement-left > ${componentCls}-arrow`]: {
-                    top: {
-                        _skip_check_: true,
-                        value: '50%'
-                    },
-                    transform: 'translateY(-50%) translateX(100%) rotate(90deg)'
+                        value: arrowOffsetHorizontal
+                    }
+                }
+            },
+            // >>>>> Left
+            [[
+                `&-placement-left > ${componentCls}-arrow`,
+                `&-placement-leftTop > ${componentCls}-arrow`,
+                `&-placement-leftBottom > ${componentCls}-arrow`
+            ].join(',')]: {
+                right: {
+                    _skip_check_: true,
+                    value: arrowDistance
                 },
-                [`&-placement-leftTop > ${componentCls}-arrow`]: {
-                    top: arrowOffsetVertical
+                transform: 'translateX(100%) rotate(90deg)'
+            },
+            [`&-placement-left > ${componentCls}-arrow`]: {
+                top: {
+                    _skip_check_: true,
+                    value: '50%'
                 },
-                [`&-placement-leftBottom > ${componentCls}-arrow`]: {
-                    bottom: arrowOffsetVertical
-                }
-            }),
+                transform: 'translateY(-50%) translateX(100%) rotate(90deg)'
+            },
+            [`&-placement-leftTop > ${componentCls}-arrow`]: {
+                top: arrowOffsetVertical
+            },
+            [`&-placement-leftBottom > ${componentCls}-arrow`]: {
+                bottom: arrowOffsetVertical
+            },
             // >>>>> Right
-            ...isInject(!!arrowPlacement.right, {
-                [[
-                    `&-placement-right > ${componentCls}-arrow`,
-                    `&-placement-rightTop > ${componentCls}-arrow`,
-                    `&-placement-rightBottom > ${componentCls}-arrow`
-                ].join(',')]: {
-                    left: {
-                        _skip_check_: true,
-                        value: arrowDistance
-                    },
-                    transform: 'translateX(-100%) rotate(-90deg)'
-                },
-                [`&-placement-right > ${componentCls}-arrow`]: {
-                    top: {
-                        _skip_check_: true,
-                        value: '50%'
-                    },
-                    transform: 'translateY(-50%) translateX(-100%) rotate(-90deg)'
+            [[
+                `&-placement-right > ${componentCls}-arrow`,
+                `&-placement-rightTop > ${componentCls}-arrow`,
+                `&-placement-rightBottom > ${componentCls}-arrow`
+            ].join(',')]: {
+                left: {
+                    _skip_check_: true,
+                    value: arrowDistance
                 },
-                [`&-placement-rightTop > ${componentCls}-arrow`]: {
-                    top: arrowOffsetVertical
+                transform: 'translateX(-100%) rotate(-90deg)'
+            },
+            [`&-placement-right > ${componentCls}-arrow`]: {
+                top: {
+                    _skip_check_: true,
+                    value: '50%'
                 },
-                [`&-placement-rightBottom > ${componentCls}-arrow`]: {
-                    bottom: arrowOffsetVertical
-                }
-            })
+                transform: 'translateY(-50%) translateX(-100%) rotate(-90deg)'
+            },
+            [`&-placement-rightTop > ${componentCls}-arrow`]: {
+                top: arrowOffsetVertical
+            },
+            [`&-placement-rightBottom > ${componentCls}-arrow`]: {
+                bottom: arrowOffsetVertical
+            }
         }
     };
 };
@@ -33290,7 +33536,7 @@ const generateId = (()=>{
     };
 })();
 const Sider = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
-    const { prefixCls: customizePrefixCls, className, trigger, children, defaultCollapsed = false, theme = 'dark', style = {}, collapsible = false, reverseArrow = false, width = 200, collapsedWidth = 80, zeroWidthTriggerStyle, breakpoint, onCollapse, onBreakpoint, ...otherProps } = props;
+    const { prefixCls: customizePrefixCls, className, trigger, children, defaultCollapsed = false, theme = 'dark', style = {}, collapsible = false, reverseArrow = false, width = 200, collapsedWidth = 80, zeroWidthTriggerStyle, breakpoint, onCollapse, onBreakpoint, classNames, styles, ...otherProps } = props;
     const { siderHook } = React.useContext(LayoutContext);
     const [collapsed, setCollapsed] = React.useState('collapsed' in props ? props.collapsed : defaultCollapsed);
     const [below, setBelow] = React.useState(false);
@@ -33307,6 +33553,28 @@ const Sider = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         }
         onCollapse?.(value, type);
     };
+    const semanticProps = {
+        ...props,
+        collapsed,
+        defaultCollapsed,
+        theme,
+        style,
+        collapsible,
+        reverseArrow,
+        width,
+        collapsedWidth,
+        zeroWidthTriggerStyle,
+        breakpoint,
+        onCollapse,
+        onBreakpoint
+    };
+    const [mergedClassNames, mergedStyles] = useMergeSemantic([
+        classNames
+    ], [
+        styles
+    ], {
+        props: semanticProps
+    });
     // =========================== Prefix ===========================
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
@@ -33388,7 +33656,7 @@ const Sider = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
         [`${prefixCls}-below`]: !!below,
         [`${prefixCls}-zero-width`]: Number.parseFloat(siderWidth) === 0
-    }, className, hashId, cssVarCls);
+    }, className, mergedClassNames.root, hashId, cssVarCls);
     const contextValue = React__namespace.useMemo(()=>({
             siderCollapsed: collapsed
         }), [
@@ -33399,10 +33667,14 @@ const Sider = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
     }, /*#__PURE__*/ React__namespace.createElement("aside", {
         className: siderCls,
         ...divProps,
-        style: divStyle,
+        style: {
+            ...mergedStyles.root,
+            ...divStyle
+        },
         ref: ref
     }, /*#__PURE__*/ React__namespace.createElement("div", {
-        className: `${prefixCls}-children`
+        className: clsx(`${prefixCls}-children`, mergedClassNames.body),
+        style: mergedStyles.body
     }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null));
 });
 if (process.env.NODE_ENV !== 'production') {
@@ -33509,7 +33781,11 @@ const MenuItem = (props)=>{
             ...firstLevel ? styles?.item : styles?.subMenu?.item,
             ...props.style
         },
-        title: typeof title === 'string' ? title : undefined
+        title: typeof title === 'string' ? title : undefined,
+        itemData: props?.itemData ?? {
+            ...props,
+            key: props.eventKey
+        }
     }, cloneElement(icon, (oriProps)=>({
             className: clsx(`${prefixCls}-item-icon`, firstLevel ? classNames?.itemIcon : classNames?.subMenu?.itemIcon, oriProps.className),
             style: {
@@ -34701,12 +34977,16 @@ const InternalMenu = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         selectable: mergedSelectable,
         theme
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     }, {
@@ -34796,11 +35076,7 @@ const InternalMenu = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onClick: onItemClick,
         ...passedProps,
         inlineCollapsed: mergedInlineCollapsed,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         className: menuClassName,
         prefixCls: prefixCls,
         direction: direction,
@@ -34935,18 +35211,39 @@ const genBaseStyle$2 = (token)=>{
           &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
           &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]: {
                     animationName: slideDownOut
+                },
+                [`&${antCls}-slide-right-enter${antCls}-slide-right-enter-active${componentCls}-placement-right,
+          &${antCls}-slide-right-appear${antCls}-slide-right-appear-active${componentCls}-placement-right,
+          &${antCls}-slide-right-enter${antCls}-slide-right-enter-active${componentCls}-placement-rightTop,
+          &${antCls}-slide-right-appear${antCls}-slide-right-appear-active${componentCls}-placement-rightTop,
+          &${antCls}-slide-right-enter${antCls}-slide-right-enter-active${componentCls}-placement-rightBottom,
+          &${antCls}-slide-right-appear${antCls}-slide-right-appear-active${componentCls}-placement-rightBottom`]: {
+                    animationName: slideLeftIn
+                },
+                [`&${antCls}-slide-left-enter${antCls}-slide-left-enter-active${componentCls}-placement-left,
+          &${antCls}-slide-left-appear${antCls}-slide-left-appear-active${componentCls}-placement-left,
+          &${antCls}-slide-left-enter${antCls}-slide-left-enter-active${componentCls}-placement-leftTop,
+          &${antCls}-slide-left-appear${antCls}-slide-left-appear-active${componentCls}-placement-leftTop,
+          &${antCls}-slide-left-enter${antCls}-slide-left-enter-active${componentCls}-placement-leftBottom,
+          &${antCls}-slide-left-appear${antCls}-slide-left-appear-active${componentCls}-placement-leftBottom`]: {
+                    animationName: slideRightIn
+                },
+                [`&${antCls}-slide-right-leave${antCls}-slide-right-leave-active${componentCls}-placement-right,
+          &${antCls}-slide-right-leave${antCls}-slide-right-leave-active${componentCls}-placement-rightTop,
+          &${antCls}-slide-right-leave${antCls}-slide-right-leave-active${componentCls}-placement-rightBottom`]: {
+                    animationName: slideLeftOut
+                },
+                [`&${antCls}-slide-left-leave${antCls}-slide-left-leave-active${componentCls}-placement-left,
+          &${antCls}-slide-left-leave${antCls}-slide-left-leave-active${componentCls}-placement-leftTop,
+          &${antCls}-slide-left-leave${antCls}-slide-left-leave-active${componentCls}-placement-leftBottom`]: {
+                    animationName: slideRightOut
                 }
             }
         },
         // =============================================================
         // ==                        Arrow style                      ==
         // =============================================================
-        getArrowStyle(token, colorBgElevated, {
-            arrowPlacement: {
-                top: true,
-                bottom: true
-            }
-        }),
+        getArrowStyle(token, colorBgElevated),
         {
             // =============================================================
             // ==                          Menu                           ==
@@ -35106,6 +35403,8 @@ const genBaseStyle$2 = (token)=>{
         [
             initSlideMotion(token, 'slide-up'),
             initSlideMotion(token, 'slide-down'),
+            initSlideMotion(token, 'slide-left'),
+            initSlideMotion(token, 'slide-right'),
             initMoveMotion(token, 'move-up'),
             initMoveMotion(token, 'move-down'),
             initZoomMotion(token, 'zoom-big')
@@ -35182,9 +35481,15 @@ const Dropdown$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         if (transitionName !== undefined) {
             return transitionName;
         }
-        if (placement.includes('top')) {
+        if (placement.startsWith('top')) {
             return `${rootPrefixCls}-slide-down`;
         }
+        if (placement.startsWith('left')) {
+            return `${rootPrefixCls}-slide-right`;
+        }
+        if (placement.startsWith('right')) {
+            return `${rootPrefixCls}-slide-left`;
+        }
         return `${rootPrefixCls}-slide-up`;
     }, [
         getPrefixCls,
@@ -35956,12 +36261,16 @@ const InternalRadio = (props, ref)=>{
         ...radioProps,
         checked: mergedChecked
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -35980,11 +36289,7 @@ const InternalRadio = (props, ref)=>{
         disabled: radioProps.disabled
     }, /*#__PURE__*/ React__namespace.createElement("label", {
         className: wrapperClassString,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave,
         title: title,
@@ -36279,7 +36584,25 @@ const genOutlinedGroupStyle = (token)=>({
             }
         }
     });
-/* ============ Borderless ============ */ const genBorderlessStyle = (token, extraStyles)=>{
+/* ============ Borderless ============ */ const borderlessFocusVisibleSelector = '&:focus-visible, &:has(input:focus-visible), &:has(textarea:focus-visible)';
+const genBorderlessFocusVisibleStyle = (token, outlineColor)=>({
+        outline: `${cssinjs.unit(token.lineWidth)} ${token.lineType} ${outlineColor}`,
+        outlineOffset: cssinjs.unit(token.calc(token.lineWidth).mul(-1).equal()),
+        transition: [
+            `outline-offset`,
+            `outline`
+        ].map((prop)=>`${prop} 0s`).join(', ')
+    });
+const genBorderlessStatusStyle = (token, options)=>({
+        '&, & input, & textarea': {
+            color: options.color
+        },
+        [borderlessFocusVisibleSelector]: genBorderlessFocusVisibleStyle(token, options.color),
+        [`${token.componentCls}-prefix, ${token.componentCls}-suffix`]: {
+            color: options.affixColor
+        }
+    });
+const genBorderlessStyle = (token, extraStyles)=>{
     const { componentCls } = token;
     return {
         '&-borderless': {
@@ -36297,28 +36620,21 @@ const genOutlinedGroupStyle = (token)=>({
             '&:focus, &:focus-within': {
                 outline: 'none'
             },
+            [borderlessFocusVisibleSelector]: genBorderlessFocusVisibleStyle(token, token.activeBorderColor),
             // >>>>> Disabled
             [`&${componentCls}-disabled, &[disabled]`]: {
                 color: token.colorTextDisabled,
                 cursor: 'not-allowed'
             },
             // >>>>> Status
-            [`&${componentCls}-status-error`]: {
-                '&, & input, & textarea': {
-                    color: token.colorError
-                },
-                [`${componentCls}-prefix, ${componentCls}-suffix`]: {
-                    color: token.colorErrorAffix
-                }
-            },
-            [`&${componentCls}-status-warning`]: {
-                '&, & input, & textarea': {
-                    color: token.colorWarning
-                },
-                [`${componentCls}-prefix, ${componentCls}-suffix`]: {
-                    color: token.colorWarningAffix
-                }
-            },
+            [`&${componentCls}-status-error`]: genBorderlessStatusStyle(token, {
+                color: token.colorError,
+                affixColor: token.colorErrorAffix
+            }),
+            [`&${componentCls}-status-warning`]: genBorderlessStatusStyle(token, {
+                color: token.colorWarning,
+                affixColor: token.colorWarningAffix
+            }),
             ...extraStyles
         }
     };
@@ -37445,7 +37761,7 @@ const genPositionStyle = (token)=>{
                     top: 0
                 }
             },
-            [`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
+            [`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: {
                 order: 0
             }
         },
@@ -37517,7 +37833,7 @@ const genPositionStyle = (token)=>{
                     }
                 }
             },
-            [`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
+            [`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: {
                 marginLeft: {
                     _skip_check_: true,
                     value: cssinjs.unit(calc(token.lineWidth).mul(-1).equal())
@@ -37526,7 +37842,7 @@ const genPositionStyle = (token)=>{
                     _skip_check_: true,
                     value: `${cssinjs.unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
                 },
-                [`> ${componentCls}-content > ${componentCls}-tabpane`]: {
+                [`> ${componentCls}-body > ${componentCls}-content`]: {
                     paddingLeft: {
                         _skip_check_: true,
                         value: token.paddingLG
@@ -37544,7 +37860,7 @@ const genPositionStyle = (token)=>{
                     }
                 }
             },
-            [`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
+            [`> ${componentCls}-body-holder, > div > ${componentCls}-body-holder`]: {
                 order: 0,
                 marginRight: {
                     _skip_check_: true,
@@ -37554,7 +37870,7 @@ const genPositionStyle = (token)=>{
                     _skip_check_: true,
                     value: `${cssinjs.unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
                 },
-                [`> ${componentCls}-content > ${componentCls}-tabpane`]: {
+                [`> ${componentCls}-body > ${componentCls}-content`]: {
                     paddingRight: {
                         _skip_check_: true,
                         value: token.paddingLG
@@ -37776,7 +38092,7 @@ const genRtlStyle = (token)=>{
                 [`> ${componentCls}-nav`]: {
                     order: 1
                 },
-                [`> ${componentCls}-content-holder`]: {
+                [`> ${componentCls}-body-holder`]: {
                     order: 0
                 }
             },
@@ -37784,7 +38100,7 @@ const genRtlStyle = (token)=>{
                 [`> ${componentCls}-nav`]: {
                     order: 0
                 },
-                [`> ${componentCls}-content-holder`]: {
+                [`> ${componentCls}-body-holder`]: {
                     order: 1
                 }
             },
@@ -37920,16 +38236,16 @@ const genTabsStyle = (token)=>{
             // ============================= Tabs =============================
             ...genTabStyle(token),
             // =========================== TabPanes ===========================
-            [`${componentCls}-content`]: {
+            [`${componentCls}-body`]: {
                 position: 'relative',
                 width: '100%'
             },
-            [`${componentCls}-content-holder`]: {
+            [`${componentCls}-body-holder`]: {
                 flex: 'auto',
                 minWidth: 0,
                 minHeight: 0
             },
-            [`${componentCls}-tabpane`]: {
+            [`${componentCls}-content`]: {
                 ...genFocusStyle(token),
                 '&-hidden': {
                     display: 'none'
@@ -38087,12 +38403,16 @@ const InternalTabs = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         items: mergedItems
     };
     // ========================= Style ==========================
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     }, {
@@ -38121,11 +38441,7 @@ const InternalTabs = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
             popup: clsx(popupClassName, hashId, cssVarCls, rootCls, mergedClassNames.popup?.root)
         },
         styles: mergedStyles,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         editable: editable,
         more: {
             icon: tabs?.more?.icon ?? tabs?.moreIcon ?? moreIcon ?? /*#__PURE__*/ React__namespace.createElement(RefIcon$g, null),
@@ -38519,12 +38835,16 @@ const Card$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         size: mergedSize,
         variant: variant
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -38640,9 +38960,7 @@ const Card$1 = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         [`${prefixCls}-rtl`]: direction === 'rtl'
     }, className, rootClassName, hashId, cssVarCls, mergedClassNames.root);
     const mergedStyle = {
-        ...mergedStyles.root,
-        ...contextStyle,
-        ...style
+        ...mergedStyles.root
     };
     return /*#__PURE__*/ React__namespace.createElement("div", {
         ref: ref,
@@ -38660,20 +38978,22 @@ const CardMeta = (props)=>{
     const { getPrefixCls, className: contextClassName, style: contextStyle, classNames: contextClassNames, styles: contextStyles } = useComponentConfig('cardMeta');
     const prefixCls = getPrefixCls('card', customizePrefixCls);
     const metaPrefixCls = `${prefixCls}-meta`;
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         cardMetaClassNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props
     });
     const rootClassNames = clsx(metaPrefixCls, className, contextClassName, mergedClassNames.root);
     const rootStyles = {
-        ...contextStyle,
-        ...mergedStyles.root,
-        ...style
+        ...mergedStyles.root
     };
     const avatarClassNames = clsx(`${metaPrefixCls}-avatar`, mergedClassNames.avatar);
     const titleClassNames = clsx(`${metaPrefixCls}-title`, mergedClassNames.title);
@@ -38990,12 +39310,16 @@ const InternalCheckbox = (props, ref)=>{
         disabled: mergedDisabled,
         checked: mergedChecked
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -39016,11 +39340,7 @@ const InternalCheckbox = (props, ref)=>{
         disabled: mergedDisabled
     }, /*#__PURE__*/ React__namespace.createElement("label", {
         className: classString,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onClick: onLabelClick
@@ -39860,12 +40180,16 @@ const Input = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         size: mergedSize,
         disabled: mergedDisabled
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -39915,11 +40239,7 @@ const Input = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         disabled: mergedDisabled,
         onBlur: handleBlur,
         onFocus: handleFocus,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         styles: mergedStyles,
         suffix: suffixNode,
         allowClear: mergedAllowClear,
@@ -41039,12 +41359,16 @@ const TextArea = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     // ==================== Status ====================
     const { status: contextStatus, hasFeedback, feedbackIcon } = React__namespace.useContext(FormItemInputContext);
     const mergedStatus = getMergedStatus(contextStatus, customStatus);
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props
     });
@@ -41101,11 +41425,7 @@ const TextArea = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     return /*#__PURE__*/ React__namespace.createElement(RcInput.TextArea, {
         autoComplete: contextAutoComplete,
         ...rest,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         styles: mergedStyles,
         disabled: mergedDisabled,
         allowClear: mergedAllowClear,
@@ -41649,6 +41969,14 @@ const Pagination$1 = (props)=>{
         if (allPages - current <= pageBufferSize) {
             left = allPages - pageBufferSize * 2;
         }
+        const hasJumpPrev = !!jumpPrev && current - 1 >= pageBufferSize * 2 && current !== 1 + 2;
+        const hasJumpNext = !!jumpNext && allPages - current >= pageBufferSize * 2 && current !== allPages - 2;
+        if (!showLessItems && hasJumpPrev && right !== allPages) {
+            left += 1;
+        }
+        if (!showLessItems && hasJumpNext && left !== 1) {
+            right -= 1;
+        }
         for(let i = left; i <= right; i += 1){
             pagerList.push(/*#__PURE__*/ React.createElement(Pager, _extends$d({}, pagerProps, {
                 key: i,
@@ -41656,13 +41984,13 @@ const Pagination$1 = (props)=>{
                 active: current === i
             })));
         }
-        if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
+        if (hasJumpPrev) {
             pagerList[0] = /*#__PURE__*/ React.cloneElement(pagerList[0], {
                 className: clsx(`${prefixCls}-item-after-jump-prev`, pagerList[0].props.className)
             });
             pagerList.unshift(jumpPrev);
         }
-        if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
+        if (hasJumpNext) {
             const lastOne = pagerList[pagerList.length - 1];
             pagerList[pagerList.length - 1] = /*#__PURE__*/ React.cloneElement(lastOne, {
                 className: clsx(`${prefixCls}-item-before-jump-next`, lastOne.props.className)
@@ -41982,7 +42310,7 @@ const genPaginationInputVariantStyle = (token)=>{
     };
 };
 const genPaginationJumpStyle = (token)=>{
-    const { componentCls, antCls } = token;
+    const { componentCls, iconCls, sizeLG, antCls } = token;
     const [, varRef] = genCssVar(antCls, 'pagination');
     return {
         [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
@@ -42004,18 +42332,19 @@ const genPaginationJumpStyle = (token)=>{
                 },
                 [`${componentCls}-item-ellipsis`]: {
                     position: 'absolute',
-                    top: 0,
-                    insetInlineEnd: 0,
-                    bottom: 0,
-                    insetInlineStart: 0,
-                    display: 'block',
+                    inset: 0,
+                    display: 'inline-flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                     margin: 'auto',
                     color: token.colorTextDisabled,
-                    letterSpacing: token.paginationEllipsisLetterSpacing,
                     textAlign: 'center',
-                    textIndent: token.paginationEllipsisTextIndent,
                     opacity: 1,
-                    transition: `all ${token.motionDurationMid}`
+                    transition: `all ${token.motionDurationMid}`,
+                    [`${iconCls}-ellipsis > svg`]: {
+                        width: sizeLG,
+                        height: sizeLG
+                    }
                 }
             },
             '&:hover': {
@@ -42445,12 +42774,16 @@ const Pagination = (props)=>{
         size: mergedSize
     };
     // ========================= Style ==========================
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -42506,7 +42839,7 @@ const Pagination = (props)=>{
     const iconsProps = React__namespace.useMemo(()=>{
         const ellipsis = /*#__PURE__*/ React__namespace.createElement("span", {
             className: `${prefixCls}-item-ellipsis`
-        }, "\u2022\u2022\u2022");
+        }, /*#__PURE__*/ React__namespace.createElement(RefIcon$g, null));
         const prevIcon = /*#__PURE__*/ React__namespace.createElement("button", {
             className: `${prefixCls}-item-link`,
             type: "button",
@@ -42555,9 +42888,7 @@ const Pagination = (props)=>{
         [`${prefixCls}-bordered`]: token.wireframe
     }, contextClassName, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
     const mergedStyle = {
-        ...mergedStyles.root,
-        ...contextStyle,
-        ...style
+        ...mergedStyles.root
     };
     return /*#__PURE__*/ React__namespace.createElement(React__namespace.Fragment, null, token.wireframe && /*#__PURE__*/ React__namespace.createElement(BorderedStyle, {
         prefixCls: prefixCls
@@ -43604,12 +43935,16 @@ const Statistic = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         loading,
         value
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -43655,11 +43990,7 @@ const Statistic = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
     return /*#__PURE__*/ React__namespace.createElement("div", {
         ...restProps,
         className: rootClassNames,
-        style: {
-            ...mergedStyles.root,
-            ...contextStyle,
-            ...style
-        },
+        style: mergedStyles.root,
         ref: internalRef,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave
@@ -44150,12 +44481,16 @@ const InternalSwitch = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         size: mergedSize,
         disabled: mergedDisabled
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     });
@@ -44170,11 +44505,6 @@ const InternalSwitch = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         [`${prefixCls}-loading`]: loading,
         [`${prefixCls}-rtl`]: direction === 'rtl'
     }, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
-    const mergedStyle = {
-        ...mergedStyles.root,
-        ...contextStyle,
-        ...style
-    };
     const changeHandler = (...args)=>{
         setChecked(args[0]);
         onChange?.(...args);
@@ -44190,7 +44520,7 @@ const InternalSwitch = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
         onChange: changeHandler,
         prefixCls: prefixCls,
         className: classes,
-        style: mergedStyle,
+        style: mergedStyles.root,
         disabled: mergedDisabled,
         ref: ref,
         loadingIcon: loadingIcon
@@ -44590,8 +44920,10 @@ const useSelection = (config, rowSelection)=>{
                 const key = getRowKey(record, index);
                 const checked = keySet.has(key);
                 const checkboxProps = checkboxPropsMap.get(key);
+                const defaultAriaLabel = `Select row ${index + 1}`;
                 return {
                     node: /*#__PURE__*/ React__namespace.createElement(Radio, {
+                        "aria-label": defaultAriaLabel,
                         ...checkboxProps,
                         checked: checked,
                         onClick: (e)=>{
@@ -44623,9 +44955,11 @@ const useSelection = (config, rowSelection)=>{
                 } else {
                     mergedIndeterminate = checkboxProps?.indeterminate ?? indeterminate;
                 }
+                const defaultAriaLabel = checked ? `Row ${index + 1} selected` : `Select row ${index + 1}`;
                 // Record checked
                 return {
                     node: /*#__PURE__*/ React__namespace.createElement(Checkbox, {
+                        "aria-label": defaultAriaLabel,
                         ...checkboxProps,
                         indeterminate: mergedIndeterminate,
                         checked: checked,
@@ -46895,8 +47229,13 @@ const getSortData = (data, sortStates, childrenColumnName)=>{
     });
 };
 const useFilterSorter = (props)=>{
-    const { prefixCls, mergedColumns, sortDirections, tableLocale, showSorterTooltip, onSorterChange, globalLocale } = props;
-    const [sortStates, setSortStates] = React__namespace.useState(()=>collectSortStates(mergedColumns, true));
+    const { prefixCls, mergedColumns, baseColumns, sortDirections, tableLocale, showSorterTooltip, onSorterChange, globalLocale } = props;
+    // Use base (pre-responsive) columns to seed sort states so that
+    // `defaultSortOrder` on a `responsive` column is honored even when the
+    // column is not visible at the current breakpoint.
+    // See: https://github.com/ant-design/ant-design/issues/32847
+    const collectColumns = baseColumns ?? mergedColumns;
+    const [sortStates, setSortStates] = React__namespace.useState(()=>collectSortStates(collectColumns, true));
     const getColumnKeys = (columns, pos)=>{
         const newKeys = [];
         columns.forEach((item, index)=>{
@@ -46911,11 +47250,14 @@ const useFilterSorter = (props)=>{
     };
     const mergedSorterStates = React__namespace.useMemo(()=>{
         let validate = true;
-        const collectedStates = collectSortStates(mergedColumns, false);
+        // Collect controlled `sortOrder` from the full (pre-responsive) column
+        // set so that a controlled `sortOrder` on a hidden responsive column
+        // still applies to the sorted data.
+        const collectedStates = collectSortStates(collectColumns, false);
         // Return if not controlled
         if (!collectedStates.length) {
-            const mergedColumnsKeys = getColumnKeys(mergedColumns);
-            return sortStates.filter(({ key })=>mergedColumnsKeys.includes(key));
+            const collectColumnsKeys = getColumnKeys(collectColumns);
+            return sortStates.filter(({ key })=>collectColumnsKeys.includes(key));
         }
         const validateStates = [];
         function patchStates(state) {
@@ -46948,7 +47290,7 @@ const useFilterSorter = (props)=>{
         });
         return validateStates;
     }, [
-        mergedColumns,
+        collectColumns,
         sortStates
     ]);
     // Get render columns title required props
@@ -47057,6 +47399,10 @@ const genBorderedStyle = (token)=>{
                 [`> ${componentCls}-container`]: {
                     borderInlineStart: tableBorder,
                     borderTop: tableBorder,
+                    [`> ${componentCls}-header${componentCls}-sticky-holder`]: {
+                        marginTop: calc(lineWidth).mul(-1).equal(),
+                        borderTop: tableBorder
+                    },
                     [`> ${componentCls}-content, > ${componentCls}-header, > ${componentCls}-body, > ${componentCls}-summary`]: {
                         '> table': {
                             // ============================= Cell =============================
@@ -47073,8 +47419,12 @@ const genBorderedStyle = (token)=>{
                                 }
                             },
                             // Fixed right should provides additional border
+                            // Only add separator border when there are multiple fixed-right columns
+                            // (i.e. fix-right-first is not also fix-right-last), otherwise the
+                            // ::after border doubles up with the cell's own borderInlineEnd and
+                            // creates a spurious extra vertical line. See #56287.
                             '> thead > tr, > tbody > tr, > tfoot > tr': {
-                                [`> ${componentCls}-cell-fix-right-first::after`]: {
+                                [`> ${componentCls}-cell-fix-right-first:not(${componentCls}-cell-fix-right-last)::after`]: {
                                     borderInlineEnd: tableBorder
                                 }
                             },
@@ -48265,12 +48615,16 @@ const InternalTable$1 = (props, ref)=>{
         size: mergedSize,
         bordered
     };
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props: mergedProps
     }, {
@@ -48394,6 +48748,11 @@ const InternalTable$1 = (props, ref)=>{
     const [transformSorterColumns, sortStates, sorterTitleProps, getSorters] = useFilterSorter({
         prefixCls,
         mergedColumns,
+        // Pass `baseColumns` (pre-responsive) so `defaultSortOrder` and controlled
+        // `sortOrder` on a `responsive` column are still honored when the column
+        // is hidden at the current breakpoint.
+        // See: https://github.com/ant-design/ant-design/issues/32847
+        baseColumns,
         onSorterChange,
         sortDirections: sortDirections || [
             'ascend',
@@ -48587,11 +48946,6 @@ const InternalTable$1 = (props, ref)=>{
     const wrappercls = clsx(cssVarCls, rootCls, `${prefixCls}-wrapper`, contextClassName, {
         [`${prefixCls}-wrapper-rtl`]: direction === 'rtl'
     }, className, rootClassName, mergedClassNames.root, hashId);
-    const mergedStyle = {
-        ...mergedStyles.root,
-        ...contextStyle,
-        ...style
-    };
     // ========== empty ==========
     const mergedEmptyNode = React__namespace.useMemo(()=>{
         // When dataSource is null/undefined (detected by reference equality with EMPTY_LIST),
@@ -48638,7 +48992,7 @@ const InternalTable$1 = (props, ref)=>{
     return /*#__PURE__*/ React__namespace.createElement("div", {
         ref: rootRef,
         className: wrappercls,
-        style: mergedStyle
+        style: mergedStyles.root
     }, /*#__PURE__*/ React__namespace.createElement(Spin, {
         spinning: false,
         ...spinProps
@@ -48925,12 +49279,16 @@ const CheckableTagGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const rootCls = useCSSVarCls(prefixCls);
     const [hashId, cssVarCls] = useStyle$1(prefixCls, rootCls);
     // ====================== Styles ======================
+    const contextStyleRoot = useSemanticRootStyle(contextStyle);
+    const styleRoot = useSemanticRootStyle(style);
     const [mergedClassNames, mergedStyles] = useMergeSemantic([
         contextClassNames,
         classNames
     ], [
         contextStyles,
-        styles
+        contextStyleRoot,
+        styles,
+        styleRoot
     ], {
         props
     });
@@ -48983,11 +49341,7 @@ const CheckableTagGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
             [`${groupPrefixCls}-disabled`]: disabled,
             [`${groupPrefixCls}-rtl`]: direction === 'rtl'
         }, hashId, cssVarCls, className, mergedClassNames.root),
-        style: {
-            ...contextStyle,
-            ...mergedStyles.root,
-            ...style
-        },
+        style: mergedStyles.root,
         id: id,
         ref: divRef
     }, parsedOptions.map((option)=>/*#__PURE__*/ React.createElement(CheckableTag, {
@@ -53153,6 +53507,28 @@ function useId(deterministicId) {
     return deterministicId || (id ? `radix-${id}` : "");
 }
 
+// src/use-effect-event.tsx
+var useReactEffectEvent = React__namespace[" useEffectEvent ".trim().toString()];
+var useReactInsertionEffect = React__namespace[" useInsertionEffect ".trim().toString()];
+function useEffectEvent(callback) {
+    if (typeof useReactEffectEvent === "function") {
+        return useReactEffectEvent(callback);
+    }
+    const ref = React__namespace.useRef(()=>{
+        throw new Error("Cannot call an event handler while rendering.");
+    });
+    if (typeof useReactInsertionEffect === "function") {
+        useReactInsertionEffect(()=>{
+            ref.current = callback;
+        });
+    } else {
+        useLayoutEffect2(()=>{
+            ref.current = callback;
+        });
+    }
+    return React__namespace.useMemo(()=>(...args)=>ref.current?.(...args), []);
+}
+
 // src/use-controllable-state.tsx
 var useInsertionEffect = React__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState$1({ prop, defaultProp, onChange = ()=>{}, caller }) {
@@ -53403,27 +53779,6 @@ function useCallbackRef$2(callback) {
     return React__namespace.useMemo(()=>(...args)=>callbackRef.current?.(...args), []);
 }
 
-// src/use-escape-keydown.tsx
-function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
-    const onEscapeKeyDown = useCallbackRef$2(onEscapeKeyDownProp);
-    React__namespace.useEffect(()=>{
-        const handleKeyDown = (event)=>{
-            if (event.key === "Escape") {
-                onEscapeKeyDown(event);
-            }
-        };
-        ownerDocument.addEventListener("keydown", handleKeyDown, {
-            capture: true
-        });
-        return ()=>ownerDocument.removeEventListener("keydown", handleKeyDown, {
-                capture: true
-            });
-    }, [
-        onEscapeKeyDown,
-        ownerDocument
-    ]);
-}
-
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -53446,7 +53801,7 @@ var DismissableLayer = React__namespace.forwardRef((props, forwardedRef)=>{
     const [node, setNode] = React__namespace.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
     const [, force] = React__namespace.useState({});
-    const composedRefs = useComposedRefs$1(forwardedRef, (node2)=>setNode(node2));
+    const composedRefs = useComposedRefs$1(forwardedRef, setNode);
     const layers = Array.from(context.layers);
     const [highestLayerWithOutsidePointerEventsDisabled] = [
         ...context.layersWithOutsidePointerEventsDisabled
@@ -53487,15 +53842,31 @@ var DismissableLayer = React__namespace.forwardRef((props, forwardedRef)=>{
         onInteractOutside?.(event);
         if (!event.defaultPrevented) onDismiss?.();
     }, ownerDocument);
-    useEscapeKeydown((event)=>{
-        const isHighestLayer = index === context.layers.size - 1;
-        if (!isHighestLayer) return;
+    const isHighestLayer = node ? index === layers.length - 1 : false;
+    const handleKeyDown = useEffectEvent((event)=>{
+        if (event.key !== "Escape") {
+            return;
+        }
         onEscapeKeyDown?.(event);
         if (!event.defaultPrevented && onDismiss) {
             event.preventDefault();
             onDismiss();
         }
-    }, ownerDocument);
+    });
+    React__namespace.useEffect(()=>{
+        if (!isHighestLayer) {
+            return;
+        }
+        ownerDocument.addEventListener("keydown", handleKeyDown, {
+            capture: true
+        });
+        return ()=>ownerDocument.removeEventListener("keydown", handleKeyDown, {
+                capture: true
+            });
+    }, [
+        ownerDocument,
+        isHighestLayer
+    ]);
     React__namespace.useEffect(()=>{
         if (!node) return;
         if (disableOutsidePointerEvents) {
@@ -53757,7 +54128,7 @@ var FocusScope = React__namespace.forwardRef((props, forwardedRef)=>{
     const onMountAutoFocus = useCallbackRef$2(onMountAutoFocusProp);
     const onUnmountAutoFocus = useCallbackRef$2(onUnmountAutoFocusProp);
     const lastFocusedElementRef = React__namespace.useRef(null);
-    const composedRefs = useComposedRefs$1(forwardedRef, (node)=>setContainer(node));
+    const composedRefs = useComposedRefs$1(forwardedRef, setContainer);
     const focusScope = React__namespace.useRef({
         paused: false,
         pause () {
@@ -119561,7 +119932,7 @@ function mergeRefs(...refs) {
 var isBrowser2 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 try {
     if (isBrowser2) {
-        window.__reactRouterVersion = "7.18.0";
+        window.__reactRouterVersion = "7.18.1";
     }
 } catch (e) {}
 var Link = React__namespace.forwardRef(function LinkWithRef({ onClick, discover = "render", prefetch = "none", relative, reloadDocument, replace: replace2, mask, state, target, to, preventScrollReset, viewTransition, defaultShouldRevalidate, ...rest }, forwardedRef) {
@@ -120430,6 +120801,25 @@ const JUDGE_REASONING_PREFIX = "JudgeReasoning/";
 function metricNameOf$1(agg) {
     return agg.metric?.name ?? agg.name?.replace(/^Aggregate\//, "") ?? "Unknown";
 }
+/** Category labels are human-authored, so match them case-insensitively and drop blank entries. */ function normalizeCategoryList(list) {
+    return (list ?? []).map((category)=>category.trim().toLowerCase()).filter((category)=>category.length > 0);
+}
+/**
+ * Resolve each category the metric declares to a status. Resolution order is fail -> pass -> partial:
+ * a category named in more than one list is a malformed definition, and taking fail first means the
+ * safe reading wins rather than a silent pass. Categories in none of the lists stay unclassified.
+ */ function buildStatusByCategory(metric) {
+    const byCategory = new Map();
+    const assign = (list, status)=>{
+        for (const category of normalizeCategoryList(list)){
+            if (!byCategory.has(category)) byCategory.set(category, status);
+        }
+    };
+    assign(metric?.fail_categories, "fail");
+    assign(metric?.pass_categories, "pass");
+    assign(metric?.partial_categories, "partial");
+    return byCategory;
+}
 /** Collect the leaf nodes (label + node id) grouped by label. */ function groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey) {
     const byLabel = new Map();
     const seen = new Set();
@@ -120480,6 +120870,8 @@ function metricNameOf$1(agg) {
         const counts = agg.counts ?? {};
         const categories = agg.categories ?? agg.metric?.categories ?? Object.keys(counts);
         const byLabel = groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey);
+        const statusByCategory = buildStatusByCategory(agg.metric);
+        const declaresFailCategories = normalizeCategoryList(agg.metric?.fail_categories).length > 0;
         // Order labels by the metric's category order, then any extras found in the data.
         const orderedLabels = [
             ...categories
@@ -120492,10 +120884,13 @@ function metricNameOf$1(agg) {
             return {
                 labelName,
                 count: counts[labelName] ?? nodesForLabel.length,
+                status: statusByCategory.get(labelName.trim().toLowerCase()) ?? "unclassified",
                 nodes: nodesForLabel
             };
         });
         const total = labels.reduce((sum, l)=>sum + l.count, 0);
+        const failureCount = labels.reduce((sum, l)=>l.status === "fail" ? sum + l.count : sum, 0);
+        const verdict = !declaresFailCategories ? "notGated" : failureCount > 0 ? "failed" : "passed";
         return {
             key: agg.identifier ?? `${metricName}-${index}`,
             metricName,
@@ -120503,6 +120898,10 @@ function metricNameOf$1(agg) {
             mostCommon: agg.most_common_label ?? undefined,
             leastCommon: agg.least_common_label ?? undefined,
             total,
+            scoredCount: total,
+            failureCount,
+            declaresFailCategories,
+            verdict,
             labels
         };
     });
@@ -120638,6 +121037,82 @@ const NodeActions = ({ sessionId, nodeId, onAgentNodeClick, onOpenVisualizer })=
     }), "Visualizer")));
 };
 
+const STATUS_ICON_SIZE = 12;
+/**
+ * Icon prefixed to a category's tag. Mirrors the status mapping `SessionStatusIcon` already uses
+ * in sessions.tsx, so the two screens read the same. Unclassified carries none, by design: an
+ * unclassified category has no verdict to state, and a neutral icon would imply one.
+ */ const STATUS_ICON = {
+    pass: CircleCheck,
+    fail: CircleX,
+    partial: Blend,
+    unclassified: null
+};
+/**
+ * Short word shown on the collapsed accordion row. Unclassified carries none, for the same reason
+ * it carries no icon: the chip would state a verdict the category does not have.
+ */ const STATUS_CHIP_LABEL = {
+    pass: "Pass",
+    fail: "Fail",
+    partial: "Partial",
+    unclassified: null
+};
+/** The neutral outlined treatment: unclassified categories, not-gated metrics, and zero counts. */ function outlinedPalette(theme) {
+    return {
+        bg: "transparent",
+        border: theme.colors.border,
+        color: theme.colors.mutedForeground
+    };
+}
+function statusPalette(theme, status) {
+    const outlined = outlinedPalette(theme);
+    switch(status){
+        case "pass":
+            return {
+                bg: theme.colors.tagPass?.bg ?? theme.colors.muted,
+                border: theme.colors.tagPass?.border ?? theme.colors.border,
+                color: theme.colors.tagPass?.color ?? theme.colors.success
+            };
+        case "fail":
+            return {
+                bg: theme.colors.tagFail?.bg ?? theme.colors.muted,
+                border: theme.colors.tagFail?.border ?? theme.colors.border,
+                color: theme.colors.tagFail?.color ?? theme.colors.destructive
+            };
+        case "partial":
+            return {
+                bg: theme.colors.tagPartial?.bg ?? theme.colors.muted,
+                border: theme.colors.tagPartial?.border ?? theme.colors.border,
+                color: theme.colors.tagPartial?.color ?? theme.colors.foreground
+            };
+        default:
+            return outlined;
+    }
+}
+/**
+ * Pass rate — the share of scored runs that did *not* fail, so it reads with the ratio beside it
+ * rather than against it. An exact 0%/100% only when exact, so a single failure out of two hundred
+ * does not round up to a clean "100% passed".
+ */ function formatPassRate(failureCount, scoredCount) {
+    const exact = (scoredCount - failureCount) * 100 / scoredCount;
+    const rounded = Math.round(exact);
+    if (rounded === 0 && exact > 0) return "<1%";
+    if (rounded === 100 && exact < 100) return ">99%";
+    return `${rounded}%`;
+}
+/**
+ * Whether the most/least common read-outs still say something the verdict pill has not.
+ *
+ * They do not when the result is total — every scored run failed, or none did — nor when every run
+ * landed in one category, which makes "most" and "least" the same label. The ratio half of that
+ * applies only to gated metrics: a not-gated metric has no failures *by definition*, so applying it
+ * there would strip the read-outs from every not-gated card, which is the common case in production.
+ */ function showsDistribution(metric) {
+    const { scoredCount, failureCount, declaresFailCategories, labels } = metric;
+    if (scoredCount === 0) return false;
+    if (declaresFailCategories && (failureCount === 0 || failureCount === scoredCount)) return false;
+    return labels.filter((label)=>label.count > 0).length > 1;
+}
 const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [showReasoning, setShowReasoning] = React.useState(false);
@@ -120710,14 +121185,63 @@ const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
         }
     }, "Reasoning · ", metricName), node.reasoning));
 };
+/**
+ * The metric's verdict, beside its name: the status icon, then the pass ratio and rate. The ratio's
+ * leading number is what did *not* fail, which folds partials in with the passes, and the percentage
+ * is that same number as a share — the complement of the failure rate the notification prints.
+ *
+ * The verdict is carried by the icon and its colour alone; spelling it out beside a ratio that
+ * already says the same thing only crowded the header. It stays in the tooltip and the accessible
+ * name so nothing is lost to a reader who cannot resolve the icon.
+ *
+ * Renders nothing for a metric that is not gated, or that has nothing scored yet. Neither has a
+ * ratio to state, and a placeholder pill standing in for the absent verdict only invited the
+ * definitional zero failures of a not-gated metric to be read as an earned pass.
+ */ const VerdictPill = ({ metric })=>{
+    const { theme } = useTheme$1();
+    const { verdict, scoredCount, failureCount } = metric;
+    if (verdict === "notGated" || scoredCount === 0) return null;
+    const failed = verdict === "failed";
+    const palette = statusPalette(theme, failed ? "fail" : "pass");
+    const VerdictIcon = failed ? CircleX : CircleCheck;
+    const verdictLabel = failed ? "Failed" : "Passed";
+    const rate = `${scoredCount - failureCount}/${scoredCount} · ${formatPassRate(failureCount, scoredCount)}`;
+    return /*#__PURE__*/ React.createElement("span", {
+        title: verdictLabel,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "3px 9px",
+            borderRadius: 6,
+            fontSize: 11.5,
+            letterSpacing: 0.2,
+            background: palette.bg,
+            color: palette.color,
+            border: `1px solid ${palette.border}`
+        }
+    }, /*#__PURE__*/ React.createElement(VerdictIcon, {
+        size: STATUS_ICON_SIZE,
+        role: "img",
+        "aria-label": verdictLabel,
+        style: {
+            flexShrink: 0
+        }
+    }), rate);
+};
 const LabelPanelHeader = ({ label })=>{
     const { theme } = useTheme$1();
     const isEmpty = label.count === 0;
+    const palette = statusPalette(theme, label.status);
+    const chipLabel = STATUS_CHIP_LABEL[label.status];
+    // A zero-count row keeps its status colour but reads as inactive, matching its disabled state.
+    const dotColor = label.status === "unclassified" ? theme.colors.mutedForeground : palette.color;
     return /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
             alignItems: "center",
-            gap: 10
+            gap: 10,
+            opacity: isEmpty ? 0.55 : undefined
         }
     }, /*#__PURE__*/ React.createElement("span", {
         style: {
@@ -120725,15 +121249,27 @@ const LabelPanelHeader = ({ label })=>{
             height: 7,
             borderRadius: "50%",
             flexShrink: 0,
-            background: isEmpty ? theme.colors.border : theme.colors.primary
+            background: dotColor
         }
     }), /*#__PURE__*/ React.createElement("span", {
         style: {
             fontSize: 13,
             fontWeight: 600,
-            color: isEmpty ? theme.colors.mutedForeground : undefined
+            color: palette.color
+        }
+    }, label.labelName), chipLabel && /*#__PURE__*/ React.createElement("span", {
+        style: {
+            fontSize: 10,
+            letterSpacing: 0.8,
+            textTransform: "uppercase",
+            padding: "1px 6px",
+            borderRadius: 4,
+            flexShrink: 0,
+            background: palette.bg,
+            color: palette.color,
+            border: `1px solid ${palette.border}`
         }
-    }, label.labelName), /*#__PURE__*/ React.createElement("span", {
+    }, chipLabel), /*#__PURE__*/ React.createElement("span", {
         style: {
             marginLeft: "auto",
             fontSize: 12,
@@ -120800,43 +121336,22 @@ const MetricCard$1 = ({ metric, icon: Icon, onAgentNodeClick, onOpenVisualizer }
             fontSize: 15,
             fontWeight: 600
         }
-    }, metric.metricName), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: 6,
-            marginLeft: 4
-        }
-    }, metric.labels.map((label)=>/*#__PURE__*/ React.createElement(Tag, {
-            key: label.labelName,
-            style: {
-                margin: 0,
-                borderRadius: 12,
-                fontSize: 12,
-                ...label.count > 0 ? {
-                    background: theme.colors.tagLlminference?.bg ?? theme.colors.muted,
-                    color: theme.colors.tagLlminference?.color ?? theme.colors.foreground,
-                    border: `1px solid ${theme.colors.tagLlminference?.border ?? theme.colors.border}`
-                } : {
-                    background: "transparent",
-                    color: theme.colors.mutedForeground,
-                    border: `1px solid ${theme.colors.border}`
-                }
-            }
-        }, label.labelName, " ", /*#__PURE__*/ React.createElement("strong", null, label.count)))), /*#__PURE__*/ React.createElement("div", {
+    }, metric.metricName), /*#__PURE__*/ React.createElement(VerdictPill, {
+        metric: metric
+    }), /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
             gap: 20,
             marginLeft: "auto",
             flexShrink: 0
         }
-    }, /*#__PURE__*/ React.createElement(Meta$1, {
+    }, showsDistribution(metric) && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Most common",
         value: metric.mostCommon
     }), /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Least common",
         value: metric.leastCommon
-    }), /*#__PURE__*/ React.createElement(Meta$1, {
+    })), /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Evaluations",
         value: String(metric.total)
     }))), metric.description && /*#__PURE__*/ React.createElement("div", {
@@ -120845,7 +121360,39 @@ const MetricCard$1 = ({ metric, icon: Icon, onAgentNodeClick, onOpenVisualizer }
             fontSize: 12,
             color: theme.colors.mutedForeground
         }
-    }, metric.description)), /*#__PURE__*/ React.createElement(Collapse, {
+    }, metric.description), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 6,
+            marginTop: 12
+        }
+    }, metric.labels.map((label)=>{
+        const palette = statusPalette(theme, label.status);
+        const StatusIcon = STATUS_ICON[label.status];
+        // "Declared but never scored" stays outlined, but keeps its icon so the row still reads.
+        const filled = label.count > 0 && label.status !== "unclassified";
+        return /*#__PURE__*/ React.createElement(Tag, {
+            key: label.labelName,
+            style: {
+                margin: 0,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 5,
+                borderRadius: 12,
+                fontSize: 12,
+                background: filled ? palette.bg : "transparent",
+                color: filled ? palette.color : theme.colors.mutedForeground,
+                border: `1px solid ${filled ? palette.border : theme.colors.border}`
+            }
+        }, StatusIcon && /*#__PURE__*/ React.createElement(StatusIcon, {
+            size: STATUS_ICON_SIZE,
+            "aria-hidden": true,
+            style: {
+                flexShrink: 0
+            }
+        }), /*#__PURE__*/ React.createElement("span", null, label.labelName, " ", /*#__PURE__*/ React.createElement("strong", null, label.count)));
+    }))), /*#__PURE__*/ React.createElement(Collapse, {
         items: items,
         bordered: false,
         style: {