npm - @railtownai/railtracks-visualizer - Versions diffs - 0.0.38 → 0.0.40 - Mend

@railtownai/railtracks-visualizer 0.0.38 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { memo, useMemo, useState, useCallback, forwardRef, createContext, useContext, useRef, useLayoutEffect, useEffect, createElement } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import CountUp from 'react-countup';
@@ -3183,7 +3183,8 @@ const initialConnection = {
     to: null,
     toHandle: null,
     toPosition: null,
-    toNode: null
+    toNode: null,
+    pointer: null
 };
 /**
  * If you set the `connectionLineType` prop on your [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineType)
@@ -5550,7 +5551,8 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         to: position,
         toHandle: null,
         toPosition: oppositePosition[fromHandle.position],
-        toNode: null
+        toNode: null,
+        pointer: position
     };
     function startConnection() {
         connectionStarted = true;
@@ -5614,14 +5616,9 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             }, transform) : position,
             toHandle: result.toHandle,
             toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
-            toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
+            toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null,
+            pointer: position
         };
-        /*
-         * we don't want to trigger an update when the connection
-         * is snapped to the same handle as before
-         */ if (isValid && closestHandle && previousConnection.toHandle && newConnection.toHandle && previousConnection.toHandle.type === newConnection.toHandle.type && previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId && previousConnection.toHandle.id === newConnection.toHandle.id && previousConnection.to.x === newConnection.to.x && previousConnection.to.y === newConnection.to.y) {
-            return;
-        }
         updateConnection(newConnection);
         previousConnection = newConnection;
     }
@@ -7112,7 +7109,7 @@ const ariaLiveSelector = (s)=>s.ariaLiveMessage;
 const ariaLabelConfigSelector = (s)=>s.ariaLabelConfig;
 function AriaLiveMessage({ rfId }) {
     const ariaLiveMessage = useStore(ariaLiveSelector);
-    return jsx("div", {
+    return jsx$1("div", {
         id: `${ARIA_LIVE_MESSAGE}-${rfId}`,
         "aria-live": "assertive",
         "aria-atomic": "true",
@@ -7124,17 +7121,17 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }) {
     const ariaLabelConfig = useStore(ariaLabelConfigSelector);
     return jsxs(Fragment, {
         children: [
-            jsx("div", {
+            jsx$1("div", {
                 id: `${ARIA_NODE_DESC_KEY}-${rfId}`,
                 style: style,
                 children: disableKeyboardA11y ? ariaLabelConfig['node.a11yDescription.default'] : ariaLabelConfig['node.a11yDescription.keyboardDisabled']
             }),
-            jsx("div", {
+            jsx$1("div", {
                 id: `${ARIA_EDGE_DESC_KEY}-${rfId}`,
                 style: style,
                 children: ariaLabelConfig['edge.a11yDescription.default']
             }),
-            !disableKeyboardA11y && jsx(AriaLiveMessage, {
+            !disableKeyboardA11y && jsx$1(AriaLiveMessage, {
                 rfId: rfId
             })
         ]
@@ -7166,7 +7163,7 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }) {
  *```
  */ const Panel = forwardRef(({ position = 'top-left', children, className, style, ...rest }, ref)=>{
     const positionClasses = `${position}`.split('-');
-    return jsx("div", {
+    return jsx$1("div", {
         className: cc([
             'react-flow__panel',
             className,
@@ -7183,11 +7180,11 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     if (proOptions?.hideAttribution) {
         return null;
     }
-    return jsx(Panel, {
+    return jsx$1(Panel, {
         position: position,
         className: "react-flow__attribution",
         "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev",
-        children: jsx("a", {
+        children: jsx$1("a", {
             href: "https://reactflow.dev",
             target: "_blank",
             rel: "noopener noreferrer",
@@ -7239,7 +7236,7 @@ const changeSelector = (s)=>!!s.onSelectionChangeHandlers;
 function SelectionListener({ onSelectionChange }) {
     const storeHasSelectionChangeHandlers = useStore(changeSelector);
     if (onSelectionChange || storeHasSelectionChangeHandlers) {
-        return jsx(SelectionListenerInner, {
+        return jsx$1(SelectionListenerInner, {
             onSelectionChange: onSelectionChange
         });
     }
@@ -8071,7 +8068,7 @@ const BatchContext = createContext(null);
             nodeQueue,
             edgeQueue
         }), []);
-    return jsx(BatchContext.Provider, {
+    return jsx$1(BatchContext.Provider, {
         value: value,
         children: children
     });
@@ -8537,7 +8534,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         selectionOnDrag,
         paneClickDistance
     ]);
-    return jsx("div", {
+    return jsx$1("div", {
         className: "react-flow__renderer",
         ref: zoomPane,
         style: containerStyle,
@@ -8554,7 +8551,7 @@ function UserSelection() {
     if (!isActive) {
         return null;
     }
-    return jsx("div", {
+    return jsx$1("div", {
         className: "react-flow__selection react-flow__container",
         style: {
             width: userSelectionRect.width,
@@ -8745,7 +8742,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         style: containerStyle,
         children: [
             children,
-            jsx(UserSelection, {})
+            jsx$1(UserSelection, {})
         ]
     });
 }
@@ -9039,7 +9036,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
             connectionClickStartHandle: null
         });
     };
-    return jsx("div", {
+    return jsx$1("div", {
         "data-handleid": handleId,
         "data-nodeid": nodeId,
         "data-handlepos": position,
@@ -9103,7 +9100,7 @@ function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
     return jsxs(Fragment, {
         children: [
             data?.label,
-            jsx(Handle$1, {
+            jsx$1(Handle$1, {
                 type: "source",
                 position: sourcePosition,
                 isConnectable: isConnectable
@@ -9114,13 +9111,13 @@ function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
 function DefaultNode({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }) {
     return jsxs(Fragment, {
         children: [
-            jsx(Handle$1, {
+            jsx$1(Handle$1, {
                 type: "target",
                 position: targetPosition,
                 isConnectable: isConnectable
             }),
             data?.label,
-            jsx(Handle$1, {
+            jsx$1(Handle$1, {
                 type: "source",
                 position: sourcePosition,
                 isConnectable: isConnectable
@@ -9134,7 +9131,7 @@ function GroupNode() {
 function OutputNode({ data, isConnectable, targetPosition = Position.Top }) {
     return jsxs(Fragment, {
         children: [
-            jsx(Handle$1, {
+            jsx$1(Handle$1, {
                 type: "target",
                 position: targetPosition,
                 isConnectable: isConnectable
@@ -9223,7 +9220,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             });
         }
     };
-    return jsx("div", {
+    return jsx$1("div", {
         className: cc([
             'react-flow__nodesselection',
             'react-flow__container',
@@ -9232,7 +9229,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
         style: {
             transform: transformString
         },
-        children: jsx("div", {
+        children: jsx$1("div", {
             ref: nodeRef,
             className: "react-flow__nodesselection-rect",
             onContextMenu: onContextMenu,
@@ -9268,7 +9265,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
         deleteKeyCode,
         multiSelectionKeyCode
     });
-    return jsx(ZoomPane, {
+    return jsx$1(ZoomPane, {
         onPaneContextMenu: onPaneContextMenu,
         elementsSelectable: elementsSelectable,
         zoomOnScroll: zoomOnScroll,
@@ -9307,7 +9304,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
             selectionOnDrag: _selectionOnDrag,
             children: [
                 children,
-                nodesSelectionActive && jsx(NodesSelection, {
+                nodesSelectionActive && jsx$1(NodesSelection, {
                     onSelectionContextMenu: onSelectionContextMenu,
                     noPanClassName: noPanClassName,
                     disableKeyboardA11y: disableKeyboardA11y
@@ -9564,7 +9561,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             });
         }
     };
-    return jsx("div", {
+    return jsx$1("div", {
         className: cc([
             'react-flow__node',
             `react-flow__node-${nodeType}`,
@@ -9606,9 +9603,9 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`,
         "aria-label": node.ariaLabel,
         ...node.domAttributes,
-        children: jsx(Provider, {
+        children: jsx$1(Provider, {
             value: id,
-            children: jsx(NodeComponent, {
+            children: jsx$1(NodeComponent, {
                 id: id,
                 data: node.data,
                 type: nodeType,
@@ -9642,7 +9639,7 @@ function NodeRendererComponent(props) {
     const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$b, shallow$1);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
-    return jsx("div", {
+    return jsx$1("div", {
         className: "react-flow__nodes",
         style: containerStyle,
         children: nodeIds.map((nodeId)=>{
@@ -9670,7 +9667,7 @@ function NodeRendererComponent(props) {
              *   moved into `NodeComponentWrapper`. This ensures they are
              *   memorized – so if `NodeRenderer` *has* to rerender, it only
              *   needs to regenerate the list of nodes, nothing else.
-             */ jsx(NodeWrapper$1, {
+             */ jsx$1(NodeWrapper$1, {
                 id: nodeId,
                 nodeTypes: props.nodeTypes,
                 nodeExtent: props.nodeExtent,
@@ -9737,7 +9734,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 })=>{
             stroke: color
         }
     };
-    return jsx("polyline", {
+    return jsx$1("polyline", {
         className: "arrow",
         style: style,
         strokeLinecap: "round",
@@ -9754,7 +9751,7 @@ const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 })=>{
             fill: color
         }
     };
-    return jsx("polyline", {
+    return jsx$1("polyline", {
         className: "arrowclosed",
         style: style,
         strokeLinecap: "round",
@@ -9785,7 +9782,7 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     if (!Symbol) {
         return null;
     }
-    return jsx("marker", {
+    return jsx$1("marker", {
         className: "react-flow__arrowhead",
         id: id,
         markerWidth: `${width}`,
@@ -9795,7 +9792,7 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
         orient: orient,
         refX: "0",
         refY: "0",
-        children: jsx(Symbol, {
+        children: jsx$1(Symbol, {
             color: color,
             strokeWidth: strokeWidth
         })
@@ -9825,11 +9822,11 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     if (!markers.length) {
         return null;
     }
-    return jsx("svg", {
+    return jsx$1("svg", {
         className: "react-flow__marker",
         "aria-hidden": "true",
-        children: jsx("defs", {
-            children: markers.map((marker)=>jsx(Marker, {
+        children: jsx$1("defs", {
+            children: markers.map((marker)=>jsx$1(Marker, {
                     id: marker.id,
                     type: marker.type,
                     color: marker.color,
@@ -9881,7 +9878,7 @@ function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg = true, labelB
         visibility: edgeTextBbox.width ? 'visible' : 'hidden',
         ...rest,
         children: [
-            labelShowBg && jsx("rect", {
+            labelShowBg && jsx$1("rect", {
                 width: edgeTextBbox.width + 2 * labelBgPadding[0],
                 x: -labelBgPadding[0],
                 y: -labelBgPadding[1],
@@ -9891,7 +9888,7 @@ function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg = true, labelB
                 rx: labelBgBorderRadius,
                 ry: labelBgBorderRadius
             }),
-            jsx("text", {
+            jsx$1("text", {
                 className: "react-flow__edge-text",
                 y: edgeTextBbox.height / 2,
                 dy: "0.3em",
@@ -9959,7 +9956,7 @@ EdgeTextComponent.displayName = 'EdgeText';
  */ function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth = 20, ...props }) {
     return jsxs(Fragment, {
         children: [
-            jsx("path", {
+            jsx$1("path", {
                 ...props,
                 d: path,
                 fill: "none",
@@ -9968,14 +9965,14 @@ EdgeTextComponent.displayName = 'EdgeText';
                     props.className
                 ])
             }),
-            interactionWidth ? jsx("path", {
+            interactionWidth ? jsx$1("path", {
                 d: path,
                 fill: "none",
                 strokeOpacity: 0,
                 strokeWidth: interactionWidth,
                 className: "react-flow__edge-interaction"
             }) : null,
-            label && isNumeric(labelX) && isNumeric(labelY) ? jsx(EdgeText, {
+            label && isNumeric(labelX) && isNumeric(labelY) ? jsx$1(EdgeText, {
                 x: labelX,
                 y: labelY,
                 label: label,
@@ -10057,7 +10054,7 @@ function createSimpleBezierEdge(params) {
             targetPosition
         });
         const _id = params.isInternal ? undefined : id;
-        return jsx(BaseEdge, {
+        return jsx$1(BaseEdge, {
             id: _id,
             path: path,
             labelX: labelX,
@@ -10098,7 +10095,7 @@ function createSmoothStepEdge(params) {
             stepPosition: pathOptions?.stepPosition
         });
         const _id = params.isInternal ? undefined : id;
-        return jsx(BaseEdge, {
+        return jsx$1(BaseEdge, {
             id: _id,
             path: path,
             labelX: labelX,
@@ -10152,7 +10149,7 @@ function createStepEdge(params) {
     // eslint-disable-next-line react/display-name
     return memo(({ id, ...props })=>{
         const _id = params.isInternal ? undefined : id;
-        return jsx(SmoothStepEdge, {
+        return jsx$1(SmoothStepEdge, {
             ...props,
             id: _id,
             pathOptions: useMemo(()=>({
@@ -10206,7 +10203,7 @@ function createStraightEdge(params) {
             targetY
         });
         const _id = params.isInternal ? undefined : id;
-        return jsx(BaseEdge, {
+        return jsx$1(BaseEdge, {
             id: _id,
             path: path,
             labelX: labelX,
@@ -10267,7 +10264,7 @@ function createBezierEdge(params) {
             curvature: pathOptions?.curvature
         });
         const _id = params.isInternal ? undefined : id;
-        return jsx(BaseEdge, {
+        return jsx$1(BaseEdge, {
             id: _id,
             path: path,
             labelX: labelX,
@@ -10346,7 +10343,7 @@ const EdgeUpdaterClassName = 'react-flow__edgeupdater';
 /**
  * @internal
  */ function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type }) {
-    return jsx("circle", {
+    return jsx$1("circle", {
         onMouseDown: onMouseDown,
         onMouseEnter: onMouseEnter,
         onMouseOut: onMouseOut,
@@ -10420,7 +10417,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
     const onReconnectMouseOut = ()=>setUpdateHover(false);
     return jsxs(Fragment, {
         children: [
-            (isReconnectable === true || isReconnectable === 'source') && jsx(EdgeAnchor, {
+            (isReconnectable === true || isReconnectable === 'source') && jsx$1(EdgeAnchor, {
                 position: sourcePosition,
                 centerX: sourceX,
                 centerY: sourceY,
@@ -10430,7 +10427,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
                 onMouseOut: onReconnectMouseOut,
                 type: "source"
             }),
-            (isReconnectable === true || isReconnectable === 'target') && jsx(EdgeAnchor, {
+            (isReconnectable === true || isReconnectable === 'target') && jsx$1(EdgeAnchor, {
                 position: targetPosition,
                 centerX: targetX,
                 centerY: targetY,
@@ -10579,7 +10576,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
             }
         }
     };
-    return jsx("svg", {
+    return jsx$1("svg", {
         style: {
             zIndex
         },
@@ -10614,7 +10611,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
             ref: edgeRef,
             ...edge.domAttributes,
             children: [
-                !reconnecting && jsx(EdgeComponent, {
+                !reconnecting && jsx$1(EdgeComponent, {
                     id: id,
                     source: edge.source,
                     target: edge.target,
@@ -10644,7 +10641,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
                     pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined,
                     interactionWidth: edge.interactionWidth
                 }),
-                isReconnectable && jsx(EdgeUpdateAnchors, {
+                isReconnectable && jsx$1(EdgeUpdateAnchors, {
                     edge: edge,
                     isReconnectable: isReconnectable,
                     reconnectRadius: reconnectRadius,
@@ -10678,12 +10675,12 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
     return jsxs("div", {
         className: "react-flow__edges",
         children: [
-            jsx(MarkerDefinitions$1, {
+            jsx$1(MarkerDefinitions$1, {
                 defaultColor: defaultMarkerColor,
                 rfId: rfId
             }),
             edgeIds.map((id)=>{
-                return jsx(EdgeWrapper$1, {
+                return jsx$1(EdgeWrapper$1, {
                     id: id,
                     edgesFocusable: edgesFocusable,
                     edgesReconnectable: edgesReconnectable,
@@ -10713,7 +10710,7 @@ const EdgeRenderer = memo(EdgeRendererComponent);
 const selector$9 = (s)=>`translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport$1({ children }) {
     const transform = useStore(selector$9);
-    return jsx("div", {
+    return jsx$1("div", {
         className: "react-flow__viewport xyflow__viewport react-flow__container",
         style: {
             transform
@@ -10820,17 +10817,17 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }) {
     if (!renderConnection) {
         return null;
     }
-    return jsx("svg", {
+    return jsx$1("svg", {
         style: containerStyle,
         width: width,
         height: height,
         className: "react-flow__connectionline react-flow__container",
-        children: jsx("g", {
+        children: jsx$1("g", {
             className: cc([
                 'react-flow__connection',
                 getConnectionStatus(isValid)
             ]),
-            children: jsx(ConnectionLine, {
+            children: jsx$1(ConnectionLine, {
                 style: style,
                 type: type,
                 CustomComponent: component,
@@ -10840,12 +10837,12 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }) {
     });
 }
 const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid })=>{
-    const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+    const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer } = useConnection();
     if (!inProgress) {
         return;
     }
     if (CustomComponent) {
-        return jsx(CustomComponent, {
+        return jsx$1(CustomComponent, {
             connectionLineType: type,
             connectionLineStyle: style,
             fromNode: fromNode,
@@ -10858,7 +10855,8 @@ const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomCompone
             toPosition: toPosition,
             connectionStatus: getConnectionStatus(isValid),
             toNode: toNode,
-            toHandle: toHandle
+            toHandle: toHandle,
+            pointer: pointer
         });
     }
     let path = '';
@@ -10889,7 +10887,7 @@ const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomCompone
         default:
             [path] = getStraightPath(pathParams);
     }
-    return jsx("path", {
+    return jsx$1("path", {
         d: path,
         fill: "none",
         className: "react-flow__connection-path",
@@ -10941,7 +10939,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
     useStylesLoadedWarning();
     useOnInitHandler(onInit);
     useViewportSync(viewport);
-    return jsx(FlowRenderer, {
+    return jsx$1(FlowRenderer, {
         onPaneClick: onPaneClick,
         onPaneMouseEnter: onPaneMouseEnter,
         onPaneMouseMove: onPaneMouseMove,
@@ -10980,7 +10978,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
         isControlledViewport: !!viewport,
         children: jsxs(Viewport$1, {
             children: [
-                jsx(EdgeRenderer, {
+                jsx$1(EdgeRenderer, {
                     edgeTypes: edgeTypes,
                     onEdgeClick: onEdgeClick,
                     onEdgeDoubleClick: onEdgeDoubleClick,
@@ -10998,16 +10996,16 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
                     disableKeyboardA11y: disableKeyboardA11y,
                     rfId: rfId
                 }),
-                jsx(ConnectionLineWrapper, {
+                jsx$1(ConnectionLineWrapper, {
                     style: connectionLineStyle,
                     type: connectionLineType,
                     component: connectionLineComponent,
                     containerStyle: connectionLineContainerStyle
                 }),
-                jsx("div", {
+                jsx$1("div", {
                     className: "react-flow__edgelabel-renderer"
                 }),
-                jsx(NodeRenderer, {
+                jsx$1(NodeRenderer, {
                     nodeTypes: nodeTypes,
                     onNodeClick: onNodeClick,
                     onNodeDoubleClick: onNodeDoubleClick,
@@ -11023,7 +11021,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
                     nodeExtent: nodeExtent,
                     rfId: rfId
                 }),
-                jsx("div", {
+                jsx$1("div", {
                     className: "react-flow__viewport-portal"
                 })
             ]
@@ -11510,9 +11508,9 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             nodeOrigin,
             nodeExtent
         }));
-    return jsx(Provider$1, {
+    return jsx$1(Provider$1, {
         value: store,
-        children: jsx(BatchProvider, {
+        children: jsx$1(BatchProvider, {
             children: children
         })
     });
@@ -11523,11 +11521,11 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
         /*
          * we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
          * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-         */ return jsx(Fragment, {
+         */ return jsx$1(Fragment, {
             children: children
         });
     }
-    return jsx(ReactFlowProvider, {
+    return jsx$1(ReactFlowProvider, {
         initialNodes: nodes,
         initialEdges: edges,
         defaultNodes: defaultNodes,
@@ -11550,7 +11548,7 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
     // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
@@ -11564,7 +11562,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
     }, [
         onScroll
     ]);
-    return jsx("div", {
+    return jsx$1("div", {
         "data-testid": "rf__wrapper",
         ...rest,
         onScroll: wrapperOnScroll,
@@ -11592,7 +11590,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
             nodeOrigin: nodeOrigin,
             nodeExtent: nodeExtent,
             children: [
-                jsx(GraphView, {
+                jsx$1(GraphView, {
                     onInit: onInit,
                     onNodeClick: onNodeClick,
                     onEdgeClick: onEdgeClick,
@@ -11657,7 +11655,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
                     viewport: viewport,
                     onViewportChange: onViewportChange
                 }),
-                jsx(StoreUpdater, {
+                jsx$1(StoreUpdater, {
                     nodes: nodes,
                     edges: edges,
                     defaultNodes: defaultNodes,
@@ -11717,15 +11715,15 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
                     debug: debug,
                     ariaLabelConfig: ariaLabelConfig
                 }),
-                jsx(SelectionListener, {
+                jsx$1(SelectionListener, {
                     onSelectionChange: onSelectionChange
                 }),
                 children,
-                jsx(Attribution, {
+                jsx$1(Attribution, {
                     proOptions: proOptions,
                     position: attributionPosition
                 }),
-                jsx(A11yDescriptions, {
+                jsx$1(A11yDescriptions, {
                     rfId: rfId,
                     disableKeyboardA11y: disableKeyboardA11y
                 })
@@ -11862,7 +11860,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
     ];
 }
 function LinePattern({ dimensions, lineWidth, variant, className }) {
-    return jsx("path", {
+    return jsx$1("path", {
         strokeWidth: lineWidth,
         d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
         className: cc([
@@ -11873,7 +11871,7 @@ function LinePattern({ dimensions, lineWidth, variant, className }) {
     });
 }
 function DotPattern({ radius, className }) {
-    return jsx("circle", {
+    return jsx$1("circle", {
         cx: radius,
         cy: radius,
         r: radius,
@@ -11948,7 +11946,7 @@ size, lineWidth = 1, offset = 0, color, bgColor, style, className, patternClassN
         ref: ref,
         "data-testid": "rf__background",
         children: [
-            jsx("pattern", {
+            jsx$1("pattern", {
                 id: _patternId,
                 x: transform[0] % scaledGap[0],
                 y: transform[1] % scaledGap[1],
@@ -11956,17 +11954,17 @@ size, lineWidth = 1, offset = 0, color, bgColor, style, className, patternClassN
                 height: scaledGap[1],
                 patternUnits: "userSpaceOnUse",
                 patternTransform: `translate(-${scaledOffset[0]},-${scaledOffset[1]})`,
-                children: isDots ? jsx(DotPattern, {
+                children: isDots ? jsx$1(DotPattern, {
                     radius: scaledSize / 2,
                     className: patternClassName
-                }) : jsx(LinePattern, {
+                }) : jsx$1(LinePattern, {
                     dimensions: patternDimensions,
                     lineWidth: lineWidth,
                     variant: variant,
                     className: patternClassName
                 })
             }),
-            jsx("rect", {
+            jsx$1("rect", {
                 x: "0",
                 y: "0",
                 width: "100%",
@@ -12031,46 +12029,46 @@ BackgroundComponent.displayName = 'Background';
  *
  */ const Background = memo(BackgroundComponent);
 function PlusIcon() {
-    return jsx("svg", {
+    return jsx$1("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 32 32",
-        children: jsx("path", {
+        children: jsx$1("path", {
             d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"
         })
     });
 }
 function MinusIcon() {
-    return jsx("svg", {
+    return jsx$1("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 32 5",
-        children: jsx("path", {
+        children: jsx$1("path", {
             d: "M0 0h32v4.2H0z"
         })
     });
 }
 function FitViewIcon() {
-    return jsx("svg", {
+    return jsx$1("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 32 30",
-        children: jsx("path", {
+        children: jsx$1("path", {
             d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"
         })
     });
 }
 function LockIcon() {
-    return jsx("svg", {
+    return jsx$1("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 25 32",
-        children: jsx("path", {
+        children: jsx$1("path", {
             d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
         })
     });
 }
 function UnlockIcon() {
-    return jsx("svg", {
+    return jsx$1("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 25 32",
-        children: jsx("path", {
+        children: jsx$1("path", {
             d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
         })
     });
@@ -12098,7 +12096,7 @@ function UnlockIcon() {
  *}
  *```
  */ function ControlButton({ children, className, ...rest }) {
-    return jsx("button", {
+    return jsx$1("button", {
         type: "button",
         className: cc([
             'react-flow__controls-button',
@@ -12152,37 +12150,37 @@ function ControlsComponent({ style, showZoom = true, showFitView = true, showInt
         children: [
             showZoom && jsxs(Fragment, {
                 children: [
-                    jsx(ControlButton, {
+                    jsx$1(ControlButton, {
                         onClick: onZoomInHandler,
                         className: "react-flow__controls-zoomin",
                         title: ariaLabelConfig['controls.zoomIn.ariaLabel'],
                         "aria-label": ariaLabelConfig['controls.zoomIn.ariaLabel'],
                         disabled: maxZoomReached,
-                        children: jsx(PlusIcon, {})
+                        children: jsx$1(PlusIcon, {})
                     }),
-                    jsx(ControlButton, {
+                    jsx$1(ControlButton, {
                         onClick: onZoomOutHandler,
                         className: "react-flow__controls-zoomout",
                         title: ariaLabelConfig['controls.zoomOut.ariaLabel'],
                         "aria-label": ariaLabelConfig['controls.zoomOut.ariaLabel'],
                         disabled: minZoomReached,
-                        children: jsx(MinusIcon, {})
+                        children: jsx$1(MinusIcon, {})
                     })
                 ]
             }),
-            showFitView && jsx(ControlButton, {
+            showFitView && jsx$1(ControlButton, {
                 className: "react-flow__controls-fitview",
                 onClick: onFitViewHandler,
                 title: ariaLabelConfig['controls.fitView.ariaLabel'],
                 "aria-label": ariaLabelConfig['controls.fitView.ariaLabel'],
-                children: jsx(FitViewIcon, {})
+                children: jsx$1(FitViewIcon, {})
             }),
-            showInteractive && jsx(ControlButton, {
+            showInteractive && jsx$1(ControlButton, {
                 className: "react-flow__controls-interactive",
                 onClick: onToggleInteractivity,
                 title: ariaLabelConfig['controls.interactive.ariaLabel'],
                 "aria-label": ariaLabelConfig['controls.interactive.ariaLabel'],
-                children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {})
+                children: isInteractive ? jsx$1(UnlockIcon, {}) : jsx$1(LockIcon, {})
             }),
             children
         ]
@@ -12213,7 +12211,7 @@ ControlsComponent.displayName = 'Controls';
 function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick }) {
     const { background, backgroundColor } = style || {};
     const fill = color || background || backgroundColor;
-    return jsx("rect", {
+    return jsx$1("rect", {
         className: cc([
             'react-flow__minimap-node',
             {
@@ -12248,14 +12246,14 @@ function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBord
     const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
     const nodeClassNameFunc = getAttrFunction(nodeClassName);
     const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-    return jsx(Fragment, {
+    return jsx$1(Fragment, {
         children: nodeIds.map((nodeId)=>/*
          * The split of responsibilities between MiniMapNodes and
          * NodeComponentWrapper may appear weird. However, it’s designed to
          * minimize the cost of updates when individual nodes change.
          *
          * For more details, see a similar commit in `NodeRenderer/index.tsx`.
-         */ jsx(NodeComponentWrapper, {
+         */ jsx$1(NodeComponentWrapper, {
                 id: nodeId,
                 nodeColorFunc: nodeColorFunc,
                 nodeStrokeColorFunc: nodeStrokeColorFunc,
@@ -12285,7 +12283,7 @@ function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nod
     if (!node || node.hidden || !nodeHasDimensions(node)) {
         return null;
     }
-    return jsx(NodeComponent, {
+    return jsx$1(NodeComponent, {
         x: x,
         y: y,
         width: width,
@@ -12400,7 +12398,7 @@ function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeCl
         onNodeClick(event, node);
     }, []) : undefined;
     const _ariaLabel = ariaLabel ?? ariaLabelConfig['minimap.ariaLabel'];
-    return jsx(Panel, {
+    return jsx$1(Panel, {
         position: position,
         style: {
             ...style,
@@ -12427,11 +12425,11 @@ function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeCl
             ref: svg,
             onClick: onSvgClick,
             children: [
-                _ariaLabel && jsx("title", {
+                _ariaLabel && jsx$1("title", {
                     id: labelledBy,
                     children: _ariaLabel
                 }),
-                jsx(MiniMapNodes$1, {
+                jsx$1(MiniMapNodes$1, {
                     onClick: onSvgNodeClick,
                     nodeColor: nodeColor,
                     nodeStrokeColor: nodeStrokeColor,
@@ -12440,7 +12438,7 @@ function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeCl
                     nodeStrokeWidth: nodeStrokeWidth,
                     nodeComponent: nodeComponent
                 }),
-                jsx("path", {
+                jsx$1("path", {
                     className: "react-flow__minimap-mask",
                     d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`,
@@ -12625,7 +12623,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         shouldResize
     ]);
     const positionClassNames = controlPosition.split('-');
-    return jsx("div", {
+    return jsx$1("div", {
         className: cc([
             'react-flow__resize-control',
             'nodrag',
@@ -12679,7 +12677,7 @@ var css_248z = "/* this gets exported as style.css and can be used for the defau
 styleInject(css_248z);
 /**
- * @license lucide-react v0.553.0 - ISC
+ * @license lucide-react v0.554.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12701,7 +12699,7 @@ const hasA11yProp = (props)=>{
 };
 /**
- * @license lucide-react v0.553.0 - ISC
+ * @license lucide-react v0.554.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -13942,6 +13940,372 @@ function _extends() {
     }, _extends.apply(null, arguments);
 }
+var reactIs = {exports: {}};
+var reactIs_production_min = {};
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+    if (hasRequiredReactIs_production_min) return reactIs_production_min;
+    hasRequiredReactIs_production_min = 1;
+    var b = "function" === typeof Symbol && Symbol.for, c = b ? Symbol.for("react.element") : 60103, d = b ? Symbol.for("react.portal") : 60106, e = b ? Symbol.for("react.fragment") : 60107, f = b ? Symbol.for("react.strict_mode") : 60108, g = b ? Symbol.for("react.profiler") : 60114, h = b ? Symbol.for("react.provider") : 60109, k = b ? Symbol.for("react.context") : 60110, l = b ? Symbol.for("react.async_mode") : 60111, m = b ? Symbol.for("react.concurrent_mode") : 60111, n = b ? Symbol.for("react.forward_ref") : 60112, p = b ? Symbol.for("react.suspense") : 60113, q = b ? Symbol.for("react.suspense_list") : 60120, r = b ? Symbol.for("react.memo") : 60115, t = b ? Symbol.for("react.lazy") : 60116, v = b ? Symbol.for("react.block") : 60121, w = b ? Symbol.for("react.fundamental") : 60117, x = b ? Symbol.for("react.responder") : 60118, y = b ? Symbol.for("react.scope") : 60119;
+    function z(a) {
+        if ("object" === typeof a && null !== a) {
+            var u = a.$$typeof;
+            switch(u){
+                case c:
+                    switch(a = a.type, a){
+                        case l:
+                        case m:
+                        case e:
+                        case g:
+                        case f:
+                        case p:
+                            return a;
+                        default:
+                            switch(a = a && a.$$typeof, a){
+                                case k:
+                                case n:
+                                case t:
+                                case r:
+                                case h:
+                                    return a;
+                                default:
+                                    return u;
+                            }
+                    }
+                case d:
+                    return u;
+            }
+        }
+    }
+    function A(a) {
+        return z(a) === m;
+    }
+    reactIs_production_min.AsyncMode = l;
+    reactIs_production_min.ConcurrentMode = m;
+    reactIs_production_min.ContextConsumer = k;
+    reactIs_production_min.ContextProvider = h;
+    reactIs_production_min.Element = c;
+    reactIs_production_min.ForwardRef = n;
+    reactIs_production_min.Fragment = e;
+    reactIs_production_min.Lazy = t;
+    reactIs_production_min.Memo = r;
+    reactIs_production_min.Portal = d;
+    reactIs_production_min.Profiler = g;
+    reactIs_production_min.StrictMode = f;
+    reactIs_production_min.Suspense = p;
+    reactIs_production_min.isAsyncMode = function(a) {
+        return A(a) || z(a) === l;
+    };
+    reactIs_production_min.isConcurrentMode = A;
+    reactIs_production_min.isContextConsumer = function(a) {
+        return z(a) === k;
+    };
+    reactIs_production_min.isContextProvider = function(a) {
+        return z(a) === h;
+    };
+    reactIs_production_min.isElement = function(a) {
+        return "object" === typeof a && null !== a && a.$$typeof === c;
+    };
+    reactIs_production_min.isForwardRef = function(a) {
+        return z(a) === n;
+    };
+    reactIs_production_min.isFragment = function(a) {
+        return z(a) === e;
+    };
+    reactIs_production_min.isLazy = function(a) {
+        return z(a) === t;
+    };
+    reactIs_production_min.isMemo = function(a) {
+        return z(a) === r;
+    };
+    reactIs_production_min.isPortal = function(a) {
+        return z(a) === d;
+    };
+    reactIs_production_min.isProfiler = function(a) {
+        return z(a) === g;
+    };
+    reactIs_production_min.isStrictMode = function(a) {
+        return z(a) === f;
+    };
+    reactIs_production_min.isSuspense = function(a) {
+        return z(a) === p;
+    };
+    reactIs_production_min.isValidElementType = function(a) {
+        return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+    };
+    reactIs_production_min.typeOf = z;
+    return reactIs_production_min;
+}
+var reactIs_development = {};
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+    if (hasRequiredReactIs_development) return reactIs_development;
+    hasRequiredReactIs_development = 1;
+    if (process.env.NODE_ENV !== "production") {
+        (function() {
+            // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+            // nor polyfill, then a plain number is used for performance.
+            var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+            var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+            var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+            var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+            var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+            var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+            var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+            var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+            // (unstable) APIs that have been removed. Can we remove the symbols?
+            var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+            var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+            var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+            var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+            var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+            var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+            var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+            var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+            var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+            var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+            var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+            function isValidElementType(type) {
+                return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+                type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+            }
+            function typeOf(object) {
+                if (typeof object === 'object' && object !== null) {
+                    var $$typeof = object.$$typeof;
+                    switch($$typeof){
+                        case REACT_ELEMENT_TYPE:
+                            var type = object.type;
+                            switch(type){
+                                case REACT_ASYNC_MODE_TYPE:
+                                case REACT_CONCURRENT_MODE_TYPE:
+                                case REACT_FRAGMENT_TYPE:
+                                case REACT_PROFILER_TYPE:
+                                case REACT_STRICT_MODE_TYPE:
+                                case REACT_SUSPENSE_TYPE:
+                                    return type;
+                                default:
+                                    var $$typeofType = type && type.$$typeof;
+                                    switch($$typeofType){
+                                        case REACT_CONTEXT_TYPE:
+                                        case REACT_FORWARD_REF_TYPE:
+                                        case REACT_LAZY_TYPE:
+                                        case REACT_MEMO_TYPE:
+                                        case REACT_PROVIDER_TYPE:
+                                            return $$typeofType;
+                                        default:
+                                            return $$typeof;
+                                    }
+                            }
+                        case REACT_PORTAL_TYPE:
+                            return $$typeof;
+                    }
+                }
+                return undefined;
+            } // AsyncMode is deprecated along with isAsyncMode
+            var AsyncMode = REACT_ASYNC_MODE_TYPE;
+            var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+            var ContextConsumer = REACT_CONTEXT_TYPE;
+            var ContextProvider = REACT_PROVIDER_TYPE;
+            var Element = REACT_ELEMENT_TYPE;
+            var ForwardRef = REACT_FORWARD_REF_TYPE;
+            var Fragment = REACT_FRAGMENT_TYPE;
+            var Lazy = REACT_LAZY_TYPE;
+            var Memo = REACT_MEMO_TYPE;
+            var Portal = REACT_PORTAL_TYPE;
+            var Profiler = REACT_PROFILER_TYPE;
+            var StrictMode = REACT_STRICT_MODE_TYPE;
+            var Suspense = REACT_SUSPENSE_TYPE;
+            var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+            function isAsyncMode(object) {
+                {
+                    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+                        hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+                        console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+                    }
+                }
+                return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+            }
+            function isConcurrentMode(object) {
+                return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+            }
+            function isContextConsumer(object) {
+                return typeOf(object) === REACT_CONTEXT_TYPE;
+            }
+            function isContextProvider(object) {
+                return typeOf(object) === REACT_PROVIDER_TYPE;
+            }
+            function isElement(object) {
+                return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+            }
+            function isForwardRef(object) {
+                return typeOf(object) === REACT_FORWARD_REF_TYPE;
+            }
+            function isFragment(object) {
+                return typeOf(object) === REACT_FRAGMENT_TYPE;
+            }
+            function isLazy(object) {
+                return typeOf(object) === REACT_LAZY_TYPE;
+            }
+            function isMemo(object) {
+                return typeOf(object) === REACT_MEMO_TYPE;
+            }
+            function isPortal(object) {
+                return typeOf(object) === REACT_PORTAL_TYPE;
+            }
+            function isProfiler(object) {
+                return typeOf(object) === REACT_PROFILER_TYPE;
+            }
+            function isStrictMode(object) {
+                return typeOf(object) === REACT_STRICT_MODE_TYPE;
+            }
+            function isSuspense(object) {
+                return typeOf(object) === REACT_SUSPENSE_TYPE;
+            }
+            reactIs_development.AsyncMode = AsyncMode;
+            reactIs_development.ConcurrentMode = ConcurrentMode;
+            reactIs_development.ContextConsumer = ContextConsumer;
+            reactIs_development.ContextProvider = ContextProvider;
+            reactIs_development.Element = Element;
+            reactIs_development.ForwardRef = ForwardRef;
+            reactIs_development.Fragment = Fragment;
+            reactIs_development.Lazy = Lazy;
+            reactIs_development.Memo = Memo;
+            reactIs_development.Portal = Portal;
+            reactIs_development.Profiler = Profiler;
+            reactIs_development.StrictMode = StrictMode;
+            reactIs_development.Suspense = Suspense;
+            reactIs_development.isAsyncMode = isAsyncMode;
+            reactIs_development.isConcurrentMode = isConcurrentMode;
+            reactIs_development.isContextConsumer = isContextConsumer;
+            reactIs_development.isContextProvider = isContextProvider;
+            reactIs_development.isElement = isElement;
+            reactIs_development.isForwardRef = isForwardRef;
+            reactIs_development.isFragment = isFragment;
+            reactIs_development.isLazy = isLazy;
+            reactIs_development.isMemo = isMemo;
+            reactIs_development.isPortal = isPortal;
+            reactIs_development.isProfiler = isProfiler;
+            reactIs_development.isStrictMode = isStrictMode;
+            reactIs_development.isSuspense = isSuspense;
+            reactIs_development.isValidElementType = isValidElementType;
+            reactIs_development.typeOf = typeOf;
+        })();
+    }
+    return reactIs_development;
+}
+var hasRequiredReactIs;
+function requireReactIs() {
+    if (hasRequiredReactIs) return reactIs.exports;
+    hasRequiredReactIs = 1;
+    if (process.env.NODE_ENV === 'production') {
+        reactIs.exports = requireReactIs_production_min();
+    } else {
+        reactIs.exports = requireReactIs_development();
+    }
+    return reactIs.exports;
+}
+var hoistNonReactStatics_cjs;
+var hasRequiredHoistNonReactStatics_cjs;
+function requireHoistNonReactStatics_cjs() {
+    if (hasRequiredHoistNonReactStatics_cjs) return hoistNonReactStatics_cjs;
+    hasRequiredHoistNonReactStatics_cjs = 1;
+    var reactIs = requireReactIs();
+    /**
+	 * Copyright 2015, Yahoo! Inc.
+	 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+	 */ var REACT_STATICS = {
+        childContextTypes: true,
+        contextType: true,
+        contextTypes: true,
+        defaultProps: true,
+        displayName: true,
+        getDefaultProps: true,
+        getDerivedStateFromError: true,
+        getDerivedStateFromProps: true,
+        mixins: true,
+        propTypes: true,
+        type: true
+    };
+    var KNOWN_STATICS = {
+        name: true,
+        length: true,
+        prototype: true,
+        caller: true,
+        callee: true,
+        arguments: true,
+        arity: true
+    };
+    var FORWARD_REF_STATICS = {
+        '$$typeof': true,
+        render: true,
+        defaultProps: true,
+        displayName: true,
+        propTypes: true
+    };
+    var MEMO_STATICS = {
+        '$$typeof': true,
+        compare: true,
+        defaultProps: true,
+        displayName: true,
+        propTypes: true,
+        type: true
+    };
+    var TYPE_STATICS = {};
+    TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+    TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+    function getStatics(component) {
+        // React v16.11 and below
+        if (reactIs.isMemo(component)) {
+            return MEMO_STATICS;
+        } // React v16.12 and above
+        return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+    }
+    var defineProperty = Object.defineProperty;
+    var getOwnPropertyNames = Object.getOwnPropertyNames;
+    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+    var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+    var getPrototypeOf = Object.getPrototypeOf;
+    var objectPrototype = Object.prototype;
+    function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+        if (typeof sourceComponent !== 'string') {
+            // don't hoist over string (html) components
+            if (objectPrototype) {
+                var inheritedComponent = getPrototypeOf(sourceComponent);
+                if (inheritedComponent && inheritedComponent !== objectPrototype) {
+                    hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+                }
+            }
+            var keys = getOwnPropertyNames(sourceComponent);
+            if (getOwnPropertySymbols) {
+                keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+            }
+            var targetStatics = getStatics(targetComponent);
+            var sourceStatics = getStatics(sourceComponent);
+            for(var i = 0; i < keys.length; ++i){
+                var key = keys[i];
+                if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+                    var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+                    try {
+                        // Avoid failures from read-only properties
+                        defineProperty(targetComponent, key, descriptor);
+                    } catch (e) {}
+                }
+            }
+        }
+        return targetComponent;
+    }
+    hoistNonReactStatics_cjs = hoistNonReactStatics;
+    return hoistNonReactStatics_cjs;
+}
+requireHoistNonReactStatics_cjs();
 var isBrowser = true;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
     var rawClassName = '';
@@ -14244,6 +14608,7 @@ var syncFallback = function syncFallback(create) {
 };
 var useInsertionEffect$1 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
 var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect$1 || syncFallback;
+var useInsertionEffectWithLayoutFallback = useInsertionEffect$1 || React.useLayoutEffect;
 var EmotionCacheContext = /* #__PURE__ */ React.createContext(// because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -14283,6 +14648,153 @@ var ThemeProvider$1 = function ThemeProvider(props) {
         value: theme
     }, props.children);
 };
+var hasOwn = {}.hasOwnProperty;
+var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
+var createEmotionProps = function createEmotionProps(type, props) {
+    var newProps = {};
+    for(var _key in props){
+        if (hasOwn.call(props, _key)) {
+            newProps[_key] = props[_key];
+        }
+    }
+    newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:
+    return newProps;
+};
+var Insertion$1 = function Insertion(_ref) {
+    var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
+    registerStyles(cache, serialized, isStringTag);
+    useInsertionEffectAlwaysWithSyncFallback(function() {
+        return insertStyles(cache, serialized, isStringTag);
+    });
+    return null;
+};
+var Emotion = /* #__PURE__ */ withEmotionCache(function(props, cache, ref) {
+    var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
+    // not passing the registered cache to serializeStyles because it would
+    // make certain babel optimisations not possible
+    if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+        cssProp = cache.registered[cssProp];
+    }
+    var WrappedComponent = props[typePropName];
+    var registeredStyles = [
+        cssProp
+    ];
+    var className = '';
+    if (typeof props.className === 'string') {
+        className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+    } else if (props.className != null) {
+        className = props.className + " ";
+    }
+    var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext$1));
+    className += cache.key + "-" + serialized.name;
+    var newProps = {};
+    for(var _key2 in props){
+        if (hasOwn.call(props, _key2) && _key2 !== 'css' && _key2 !== typePropName && true) {
+            newProps[_key2] = props[_key2];
+        }
+    }
+    newProps.className = className;
+    if (ref) {
+        newProps.ref = ref;
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Insertion$1, {
+        cache: cache,
+        serialized: serialized,
+        isStringTag: typeof WrappedComponent === 'string'
+    }), /*#__PURE__*/ React.createElement(WrappedComponent, newProps));
+});
+var Emotion$1 = Emotion;
+var jsx = function jsx(type, props) {
+    // eslint-disable-next-line prefer-rest-params
+    var args = arguments;
+    if (props == null || !hasOwn.call(props, 'css')) {
+        return React.createElement.apply(undefined, args);
+    }
+    var argsLength = args.length;
+    var createElementArgArray = new Array(argsLength);
+    createElementArgArray[0] = Emotion$1;
+    createElementArgArray[1] = createEmotionProps(type, props);
+    for(var i = 2; i < argsLength; i++){
+        createElementArgArray[i] = args[i];
+    }
+    return React.createElement.apply(null, createElementArgArray);
+};
+(function(_jsx) {
+    var JSX;
+    (function(_JSX) {})(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
+})(jsx || (jsx = {}));
+// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
+// initial client-side render from SSR, use place of hydrating tag
+var Global = /* #__PURE__ */ withEmotionCache(function(props, cache) {
+    var styles = props.styles;
+    var serialized = serializeStyles([
+        styles
+    ], undefined, React.useContext(ThemeContext$1));
+    // but it is based on a constant that will never change at runtime
+    // it's effectively like having two implementations and switching them out
+    // so it's not actually breaking anything
+    var sheetRef = React.useRef();
+    useInsertionEffectWithLayoutFallback(function() {
+        var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+        var sheet = new cache.sheet.constructor({
+            key: key,
+            nonce: cache.sheet.nonce,
+            container: cache.sheet.container,
+            speedy: cache.sheet.isSpeedy
+        });
+        var rehydrating = false;
+        var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
+        if (cache.sheet.tags.length) {
+            sheet.before = cache.sheet.tags[0];
+        }
+        if (node !== null) {
+            rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
+            node.setAttribute('data-emotion', key);
+            sheet.hydrate([
+                node
+            ]);
+        }
+        sheetRef.current = [
+            sheet,
+            rehydrating
+        ];
+        return function() {
+            sheet.flush();
+        };
+    }, [
+        cache
+    ]);
+    useInsertionEffectWithLayoutFallback(function() {
+        var sheetRefCurrent = sheetRef.current;
+        var sheet = sheetRefCurrent[0], rehydrating = sheetRefCurrent[1];
+        if (rehydrating) {
+            sheetRefCurrent[1] = false;
+            return;
+        }
+        if (serialized.next !== undefined) {
+            // insert keyframes
+            insertStyles(cache, serialized.next, true);
+        }
+        if (sheet.tags.length) {
+            // if this doesn't exist then it will be null so the style element will be appended
+            var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
+            sheet.before = element;
+            sheet.flush();
+        }
+        cache.insert("", serialized, sheet, false);
+    }, [
+        cache,
+        serialized.name
+    ]);
+    return null;
+});
+function css() {
+    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+        args[_key] = arguments[_key];
+    }
+    return serializeStyles(args);
+}
 const lightTheme = {
     colors: {
@@ -14390,9 +14902,15 @@ const ThemeProvider = ({ children, theme: propTheme })=>{
             return propTheme;
         }
         // Only check localStorage if no theme prop is provided
-        const savedTheme = localStorage.getItem("theme");
-        if (savedTheme === "dark") {
-            return darkTheme;
+        // Handle cases where localStorage might not be available (e.g., test environments)
+        try {
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme === "dark") {
+                return darkTheme;
+            }
+        } catch (e) {
+        // localStorage not available, fall back to light theme
+        // This can happen in test environments or when localStorage is disabled
         }
         return lightTheme;
     });
@@ -14411,11 +14929,15 @@ const ThemeProvider = ({ children, theme: propTheme })=>{
             return;
         }
         const handleStorageChange = ()=>{
-            const savedTheme = localStorage.getItem("theme");
-            if (savedTheme === "dark") {
-                setCurrentTheme(darkTheme);
-            } else {
-                setCurrentTheme(lightTheme);
+            try {
+                const savedTheme = localStorage.getItem("theme");
+                if (savedTheme === "dark") {
+                    setCurrentTheme(darkTheme);
+                } else {
+                    setCurrentTheme(lightTheme);
+                }
+            } catch (e) {
+            // localStorage not available, ignore storage changes
             }
         };
         // Listen for storage events (when localStorage changes in other tabs)
@@ -14468,24 +14990,16 @@ const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPo
     const [isHovered, setIsHovered] = useState(false);
     const { theme } = useTheme();
     const themeColors = theme.colors;
-    // Function to determine stroke color based on edge state and theme
+    // Function to determine stroke color based on edge status and theme
     const getStrokeColor = ()=>{
-        const state = data?.details?.state;
         const status = data?.details?.status;
-        const output = data?.details?.output;
+        data?.details?.output;
         // Check for error indicators
-        const hasError = state === "Error" || status === "Error" || typeof output === "string" && output.includes("ERROR:");
+        const hasError = status === "Failed";
         if (hasError) {
             return themeColors.destructive;
         }
-        switch(state){
-            case "Open":
-                return themeColors.mutedForeground;
-            case "Completed":
-                return themeColors.mutedForeground;
-            default:
-                return themeColors.mutedForeground;
-        }
+        return themeColors.mutedForeground;
     };
     const [edgePath] = useMemo(()=>{
         return getSmoothStepPath({
@@ -17029,15 +17543,24 @@ const NodeIcon$3 = styled.div`
 `;
 // Helper function to get node icon
-const getNodeIcon = (modelProvider)=>{
+const getNodeIcon = (modelProvider, size = 16)=>{
     if (modelProvider === "OpenAI") {
-        return /*#__PURE__*/ React__default.createElement(OpenAIIcon, null);
+        return /*#__PURE__*/ React__default.createElement(OpenAIIcon, {
+            width: size,
+            height: size
+        });
     }
     if (modelProvider === "Anthropic") {
-        return /*#__PURE__*/ React__default.createElement(AnthropicIcon, null);
+        return /*#__PURE__*/ React__default.createElement(AnthropicIcon, {
+            width: size,
+            height: size
+        });
     }
     if (modelProvider === "Google" || modelProvider === "Vertex_AI") {
-        return /*#__PURE__*/ React__default.createElement(GoogleIcon, null);
+        return /*#__PURE__*/ React__default.createElement(GoogleIcon, {
+            width: size,
+            height: size
+        });
     }
     return "🤖";
 };
@@ -17719,7 +18242,7 @@ function createContext2(rootComponentName, defaultContext) {
     const Provider = (props)=>{
         const { children, ...context } = props;
         const value = React.useMemo(()=>context, Object.values(context));
-        return /* @__PURE__ */ jsx(Context.Provider, {
+        return /* @__PURE__ */ jsx$1(Context.Provider, {
             value,
             children
         });
@@ -17749,7 +18272,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
             const { scope, children, ...context } = props;
             const Context = scope?.[scopeName]?.[index] || BaseContext;
             const value = React.useMemo(()=>context, Object.values(context));
-            return /* @__PURE__ */ jsx(Context.Provider, {
+            return /* @__PURE__ */ jsx$1(Context.Provider, {
                 value,
                 children
             });
@@ -17860,7 +18383,7 @@ function useControllableState$1({ prop, defaultProp, onChange = ()=>{}, caller }
     }
     const setValue = React.useCallback((nextValue)=>{
         if (isControlled) {
-            const value2 = isFunction$1(nextValue) ? nextValue(prop) : nextValue;
+            const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
             if (value2 !== prop) {
                 onChangeRef.current?.(value2);
             }
@@ -17902,7 +18425,7 @@ function useUncontrolledState$1({ defaultProp, onChange }) {
         onChangeRef
     ];
 }
-function isFunction$1(value) {
+function isFunction(value) {
     return typeof value === "function";
 }
@@ -17924,13 +18447,13 @@ function createSlot(ownerName) {
                     return child;
                 }
             });
-            return /* @__PURE__ */ jsx(SlotClone, {
+            return /* @__PURE__ */ jsx$1(SlotClone, {
                 ...slotProps,
                 ref: forwardedRef,
                 children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null
             });
         }
-        return /* @__PURE__ */ jsx(SlotClone, {
+        return /* @__PURE__ */ jsx$1(SlotClone, {
             ...slotProps,
             ref: forwardedRef,
             children
@@ -18037,7 +18560,7 @@ var Primitive = NODES.reduce((primitive, node)=>{
         if (typeof window !== "undefined") {
             window[Symbol.for("radix-ui")] = true;
         }
-        return /* @__PURE__ */ jsx(Comp, {
+        return /* @__PURE__ */ jsx$1(Comp, {
             ...primitiveProps,
             ref: forwardedRef
         });
@@ -18174,7 +18697,7 @@ var DismissableLayer = React.forwardRef((props, forwardedRef)=>{
         document.addEventListener(CONTEXT_UPDATE, handleUpdate);
         return ()=>document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         ...layerProps,
         ref: composedRefs,
         style: {
@@ -18203,7 +18726,7 @@ var DismissableLayerBranch = React.forwardRef((props, forwardedRef)=>{
     }, [
         context.branches
     ]);
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         ...props,
         ref: composedRefs
     });
@@ -18440,7 +18963,7 @@ var FocusScope = React.forwardRef((props, forwardedRef)=>{
         trapped,
         focusScope.paused
     ]);
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         tabIndex: -1,
         ...scopeProps,
         ref: composedRefs,
@@ -18544,7 +19067,7 @@ var Portal$3 = React.forwardRef((props, forwardedRef)=>{
     const [mounted, setMounted] = React.useState(false);
     useLayoutEffect2(()=>setMounted(true), []);
     const container = containerProp || mounted && globalThis?.document?.body;
-    return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, {
+    return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx$1(Primitive.div, {
         ...portalProps,
         ref: forwardedRef
     }), container) : null;
@@ -19698,7 +20221,7 @@ var Dialog = (props)=>{
         onChange: onOpenChange,
         caller: DIALOG_NAME
     });
-    return /* @__PURE__ */ jsx(DialogProvider, {
+    return /* @__PURE__ */ jsx$1(DialogProvider, {
         scope: __scopeDialog,
         triggerRef,
         contentRef,
@@ -19715,23 +20238,23 @@ var Dialog = (props)=>{
     });
 };
 Dialog.displayName = DIALOG_NAME;
-var TRIGGER_NAME$2 = "DialogTrigger";
+var TRIGGER_NAME$1 = "DialogTrigger";
 var DialogTrigger = React.forwardRef((props, forwardedRef)=>{
     const { __scopeDialog, ...triggerProps } = props;
-    const context = useDialogContext(TRIGGER_NAME$2, __scopeDialog);
+    const context = useDialogContext(TRIGGER_NAME$1, __scopeDialog);
     const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx(Primitive.button, {
+    return /* @__PURE__ */ jsx$1(Primitive.button, {
         type: "button",
         "aria-haspopup": "dialog",
         "aria-expanded": context.open,
         "aria-controls": context.contentId,
-        "data-state": getState$1(context.open),
+        "data-state": getState(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
         onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
     });
 });
-DialogTrigger.displayName = TRIGGER_NAME$2;
+DialogTrigger.displayName = TRIGGER_NAME$1;
 var PORTAL_NAME$1 = "DialogPortal";
 var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME$1, {
     forceMount: void 0
@@ -19739,12 +20262,12 @@ var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME$1, {
 var DialogPortal = (props)=>{
     const { __scopeDialog, forceMount, children, container } = props;
     const context = useDialogContext(PORTAL_NAME$1, __scopeDialog);
-    return /* @__PURE__ */ jsx(PortalProvider, {
+    return /* @__PURE__ */ jsx$1(PortalProvider, {
         scope: __scopeDialog,
         forceMount,
-        children: React.Children.map(children, (child)=>/* @__PURE__ */ jsx(Presence, {
+        children: React.Children.map(children, (child)=>/* @__PURE__ */ jsx$1(Presence, {
                 present: forceMount || context.open,
-                children: /* @__PURE__ */ jsx(Portal$3, {
+                children: /* @__PURE__ */ jsx$1(Portal$3, {
                     asChild: true,
                     container,
                     children: child
@@ -19758,9 +20281,9 @@ var DialogOverlay = React.forwardRef((props, forwardedRef)=>{
     const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...overlayProps } = props;
     const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
-    return context.modal ? /* @__PURE__ */ jsx(Presence, {
+    return context.modal ? /* @__PURE__ */ jsx$1(Presence, {
         present: forceMount || context.open,
-        children: /* @__PURE__ */ jsx(DialogOverlayImpl, {
+        children: /* @__PURE__ */ jsx$1(DialogOverlayImpl, {
             ...overlayProps,
             ref: forwardedRef
         })
@@ -19773,14 +20296,14 @@ var DialogOverlayImpl = React.forwardRef((props, forwardedRef)=>{
     const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
     return(// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
     // ie. when `Overlay` and `Content` are siblings
-    /* @__PURE__ */ jsx(ReactRemoveScroll, {
+    /* @__PURE__ */ jsx$1(ReactRemoveScroll, {
         as: Slot$1,
         allowPinchZoom: true,
         shards: [
             context.contentRef
         ],
-        children: /* @__PURE__ */ jsx(Primitive.div, {
-            "data-state": getState$1(context.open),
+        children: /* @__PURE__ */ jsx$1(Primitive.div, {
+            "data-state": getState(context.open),
             ...overlayProps,
             ref: forwardedRef,
             style: {
@@ -19795,12 +20318,12 @@ var DialogContent = React.forwardRef((props, forwardedRef)=>{
     const portalContext = usePortalContext(CONTENT_NAME$2, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useDialogContext(CONTENT_NAME$2, props.__scopeDialog);
-    return /* @__PURE__ */ jsx(Presence, {
+    return /* @__PURE__ */ jsx$1(Presence, {
         present: forceMount || context.open,
-        children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, {
+        children: context.modal ? /* @__PURE__ */ jsx$1(DialogContentModal, {
             ...contentProps,
             ref: forwardedRef
-        }) : /* @__PURE__ */ jsx(DialogContentNonModal, {
+        }) : /* @__PURE__ */ jsx$1(DialogContentNonModal, {
             ...contentProps,
             ref: forwardedRef
         })
@@ -19815,7 +20338,7 @@ var DialogContentModal = React.forwardRef((props, forwardedRef)=>{
         const content = contentRef.current;
         if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx(DialogContentImpl, {
+    return /* @__PURE__ */ jsx$1(DialogContentImpl, {
         ...props,
         ref: composedRefs,
         trapFocus: context.open,
@@ -19837,7 +20360,7 @@ var DialogContentNonModal = React.forwardRef((props, forwardedRef)=>{
     const context = useDialogContext(CONTENT_NAME$2, props.__scopeDialog);
     const hasInteractedOutsideRef = React.useRef(false);
     const hasPointerDownOutsideRef = React.useRef(false);
-    return /* @__PURE__ */ jsx(DialogContentImpl, {
+    return /* @__PURE__ */ jsx$1(DialogContentImpl, {
         ...props,
         ref: forwardedRef,
         trapFocus: false,
@@ -19876,18 +20399,18 @@ var DialogContentImpl = React.forwardRef((props, forwardedRef)=>{
     useFocusGuards();
     return /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            /* @__PURE__ */ jsx(FocusScope, {
+            /* @__PURE__ */ jsx$1(FocusScope, {
                 asChild: true,
                 loop: true,
                 trapped: trapFocus,
                 onMountAutoFocus: onOpenAutoFocus,
                 onUnmountAutoFocus: onCloseAutoFocus,
-                children: /* @__PURE__ */ jsx(DismissableLayer, {
+                children: /* @__PURE__ */ jsx$1(DismissableLayer, {
                     role: "dialog",
                     id: context.contentId,
                     "aria-describedby": context.descriptionId,
                     "aria-labelledby": context.titleId,
-                    "data-state": getState$1(context.open),
+                    "data-state": getState(context.open),
                     ...contentProps,
                     ref: composedRefs,
                     onDismiss: ()=>context.onOpenChange(false)
@@ -19895,10 +20418,10 @@ var DialogContentImpl = React.forwardRef((props, forwardedRef)=>{
             }),
             /* @__PURE__ */ jsxs(Fragment, {
                 children: [
-                    /* @__PURE__ */ jsx(TitleWarning, {
+                    /* @__PURE__ */ jsx$1(TitleWarning, {
                         titleId: context.titleId
                     }),
-                    /* @__PURE__ */ jsx(DescriptionWarning, {
+                    /* @__PURE__ */ jsx$1(DescriptionWarning, {
                         contentRef,
                         descriptionId: context.descriptionId
                     })
@@ -19911,7 +20434,7 @@ var TITLE_NAME = "DialogTitle";
 var DialogTitle = React.forwardRef((props, forwardedRef)=>{
     const { __scopeDialog, ...titleProps } = props;
     const context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(Primitive.h2, {
+    return /* @__PURE__ */ jsx$1(Primitive.h2, {
         id: context.titleId,
         ...titleProps,
         ref: forwardedRef
@@ -19922,7 +20445,7 @@ var DESCRIPTION_NAME = "DialogDescription";
 var DialogDescription = React.forwardRef((props, forwardedRef)=>{
     const { __scopeDialog, ...descriptionProps } = props;
     const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(Primitive.p, {
+    return /* @__PURE__ */ jsx$1(Primitive.p, {
         id: context.descriptionId,
         ...descriptionProps,
         ref: forwardedRef
@@ -19933,7 +20456,7 @@ var CLOSE_NAME = "DialogClose";
 var DialogClose = React.forwardRef((props, forwardedRef)=>{
     const { __scopeDialog, ...closeProps } = props;
     const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(Primitive.button, {
+    return /* @__PURE__ */ jsx$1(Primitive.button, {
         type: "button",
         ...closeProps,
         ref: forwardedRef,
@@ -19941,7 +20464,7 @@ var DialogClose = React.forwardRef((props, forwardedRef)=>{
     });
 });
 DialogClose.displayName = CLOSE_NAME;
-function getState$1(open) {
+function getState(open) {
     return open ? "open" : "closed";
 }
 var TITLE_WARNING_NAME = "DialogTitleWarning";
@@ -20687,8 +21210,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
             minWidth: "800px",
             minHeight: "600px",
             boxSizing: "border-box",
-            border: `1px solid ${themeColors.border}`,
-            borderRadius: "8px",
             overflow: "hidden",
             position: "relative",
             background: themeColors.background
@@ -20840,6 +21361,7 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
     }, /*#__PURE__*/ React__default.createElement(Background, {
         variant: BackgroundVariant.Dots,
         color: themeColors.mutedBorder,
+        bgColor: themeColors.background,
         size: 3
     })), /*#__PURE__*/ React__default.createElement("style", null, `
           .react-flow__edge-label {
@@ -20890,7 +21412,7 @@ function createCollection(name) {
         const { scope, children } = props;
         const ref = React__default.useRef(null);
         const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
-        return /* @__PURE__ */ jsx(CollectionProviderImpl, {
+        return /* @__PURE__ */ jsx$1(CollectionProviderImpl, {
             scope,
             itemMap,
             collectionRef: ref,
@@ -20904,7 +21426,7 @@ function createCollection(name) {
         const { scope, children } = props;
         const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
         const composedRefs = useComposedRefs$1(forwardedRef, context.collectionRef);
-        return /* @__PURE__ */ jsx(CollectionSlotImpl, {
+        return /* @__PURE__ */ jsx$1(CollectionSlotImpl, {
             ref: composedRefs,
             children
         });
@@ -20925,7 +21447,7 @@ function createCollection(name) {
             });
             return ()=>void context.itemMap.delete(ref);
         });
-        return /* @__PURE__ */ jsx(CollectionItemSlotImpl, {
+        return /* @__PURE__ */ jsx$1(CollectionItemSlotImpl, {
             ...{
                 [ITEM_DATA_ATTR]: ""
             },
@@ -23028,14 +23550,14 @@ function useLatestRef(value) {
 var NAME$1 = "Arrow";
 var Arrow$1 = React.forwardRef((props, forwardedRef)=>{
     const { children, width = 10, height = 5, ...arrowProps } = props;
-    return /* @__PURE__ */ jsx(Primitive.svg, {
+    return /* @__PURE__ */ jsx$1(Primitive.svg, {
         ...arrowProps,
         ref: forwardedRef,
         width,
         height,
         viewBox: "0 0 30 10",
         preserveAspectRatio: "none",
-        children: props.asChild ? children : /* @__PURE__ */ jsx("polygon", {
+        children: props.asChild ? children : /* @__PURE__ */ jsx$1("polygon", {
             points: "0,0 30,0 15,10"
         })
     });
@@ -23095,7 +23617,7 @@ var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props)=>{
     const { __scopePopper, children } = props;
     const [anchor, setAnchor] = React.useState(null);
-    return /* @__PURE__ */ jsx(PopperProvider, {
+    return /* @__PURE__ */ jsx$1(PopperProvider, {
         scope: __scopePopper,
         anchor,
         onAnchorChange: setAnchor,
@@ -23117,7 +23639,7 @@ var PopperAnchor = React.forwardRef((props, forwardedRef)=>{
             context.onAnchorChange(anchorRef.current);
         }
     });
-    return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, {
+    return virtualRef ? null : /* @__PURE__ */ jsx$1(Primitive.div, {
         ...anchorProps,
         ref: composedRefs
     });
@@ -23223,7 +23745,7 @@ var PopperContent = React.forwardRef((props, forwardedRef)=>{
     }, [
         content
     ]);
-    return /* @__PURE__ */ jsx("div", {
+    return /* @__PURE__ */ jsx$1("div", {
         ref: refs.setFloating,
         "data-radix-popper-content-wrapper": "",
         style: {
@@ -23245,14 +23767,14 @@ var PopperContent = React.forwardRef((props, forwardedRef)=>{
             }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx(PopperContentProvider, {
+        children: /* @__PURE__ */ jsx$1(PopperContentProvider, {
             scope: __scopePopper,
             placedSide,
             onArrowChange: setArrow,
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx(Primitive.div, {
+            children: /* @__PURE__ */ jsx$1(Primitive.div, {
                 "data-side": placedSide,
                 "data-align": placedAlign,
                 ...contentProps,
@@ -23282,7 +23804,7 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
     return(// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ jsx("span", {
+    /* @__PURE__ */ jsx$1("span", {
         ref: contentContext.onArrowChange,
         style: {
             position: "absolute",
@@ -23303,7 +23825,7 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
             }[contentContext.placedSide],
             visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ jsx(Root$1, {
+        children: /* @__PURE__ */ jsx$1(Root$1, {
             ...arrowProps,
             ref: forwardedRef,
             style: {
@@ -23403,7 +23925,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
 });
 var NAME = "VisuallyHidden";
 var VisuallyHidden = React.forwardRef((props, forwardedRef)=>{
-    return /* @__PURE__ */ jsx(Primitive.span, {
+    return /* @__PURE__ */ jsx$1(Primitive.span, {
         ...props,
         ref: forwardedRef,
         style: {
@@ -23456,7 +23978,7 @@ var Select$1 = (props)=>{
     const isFormControl = trigger ? form || !!trigger.closest("form") : true;
     const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
     const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value).join(";");
-    return /* @__PURE__ */ jsx(Root2$1, {
+    return /* @__PURE__ */ jsx$1(Root2$1, {
         ...popperScope,
         children: /* @__PURE__ */ jsxs(SelectProvider, {
             required,
@@ -23476,9 +23998,9 @@ var Select$1 = (props)=>{
             triggerPointerDownPosRef,
             disabled,
             children: [
-                /* @__PURE__ */ jsx(Collection.Provider, {
+                /* @__PURE__ */ jsx$1(Collection.Provider, {
                     scope: __scopeSelect,
-                    children: /* @__PURE__ */ jsx(SelectNativeOptionsProvider, {
+                    children: /* @__PURE__ */ jsx$1(SelectNativeOptionsProvider, {
                         scope: props.__scopeSelect,
                         onNativeOptionAdd: React.useCallback((option)=>{
                             setNativeOptionsSet((prev)=>new Set(prev).add(option));
@@ -23504,7 +24026,7 @@ var Select$1 = (props)=>{
                     disabled,
                     form,
                     children: [
-                        value === void 0 ? /* @__PURE__ */ jsx("option", {
+                        value === void 0 ? /* @__PURE__ */ jsx$1("option", {
                             value: ""
                         }) : null,
                         Array.from(nativeOptionsSet)
@@ -23515,11 +24037,11 @@ var Select$1 = (props)=>{
     });
 };
 Select$1.displayName = SELECT_NAME;
-var TRIGGER_NAME$1 = "SelectTrigger";
+var TRIGGER_NAME = "SelectTrigger";
 var SelectTrigger$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME$1, __scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs$1(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
@@ -23544,10 +24066,10 @@ var SelectTrigger$1 = React.forwardRef((props, forwardedRef)=>{
             };
         }
     };
-    return /* @__PURE__ */ jsx(Anchor, {
+    return /* @__PURE__ */ jsx$1(Anchor, {
         asChild: true,
         ...popperScope,
-        children: /* @__PURE__ */ jsx(Primitive.button, {
+        children: /* @__PURE__ */ jsx$1(Primitive.button, {
             type: "button",
             role: "combobox",
             "aria-controls": context.contentId,
@@ -23591,7 +24113,7 @@ var SelectTrigger$1 = React.forwardRef((props, forwardedRef)=>{
         })
     });
 });
-SelectTrigger$1.displayName = TRIGGER_NAME$1;
+SelectTrigger$1.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
 var SelectValue$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
@@ -23605,13 +24127,13 @@ var SelectValue$1 = React.forwardRef((props, forwardedRef)=>{
         onValueNodeHasChildrenChange,
         hasChildren
     ]);
-    return /* @__PURE__ */ jsx(Primitive.span, {
+    return /* @__PURE__ */ jsx$1(Primitive.span, {
         ...valueProps,
         ref: composedRefs,
         style: {
             pointerEvents: "none"
         },
-        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx(Fragment, {
+        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx$1(Fragment, {
             children: placeholder
         }) : children
     });
@@ -23620,7 +24142,7 @@ SelectValue$1.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
 var SelectIcon$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, children, ...iconProps } = props;
-    return /* @__PURE__ */ jsx(Primitive.span, {
+    return /* @__PURE__ */ jsx$1(Primitive.span, {
         "aria-hidden": true,
         ...iconProps,
         ref: forwardedRef,
@@ -23630,7 +24152,7 @@ var SelectIcon$1 = React.forwardRef((props, forwardedRef)=>{
 SelectIcon$1.displayName = ICON_NAME;
 var PORTAL_NAME = "SelectPortal";
 var SelectPortal = (props)=>{
-    return /* @__PURE__ */ jsx(Portal$3, {
+    return /* @__PURE__ */ jsx$1(Portal$3, {
         asChild: true,
         ...props
     });
@@ -23645,17 +24167,17 @@ var SelectContent$1 = React.forwardRef((props, forwardedRef)=>{
     }, []);
     if (!context.open) {
         const frag = fragment;
-        return frag ? ReactDOM.createPortal(/* @__PURE__ */ jsx(SelectContentProvider, {
+        return frag ? ReactDOM.createPortal(/* @__PURE__ */ jsx$1(SelectContentProvider, {
             scope: props.__scopeSelect,
-            children: /* @__PURE__ */ jsx(Collection.Slot, {
+            children: /* @__PURE__ */ jsx$1(Collection.Slot, {
                 scope: props.__scopeSelect,
-                children: /* @__PURE__ */ jsx("div", {
+                children: /* @__PURE__ */ jsx$1("div", {
                     children: props.children
                 })
             })
         }), frag) : null;
     }
-    return /* @__PURE__ */ jsx(SelectContentImpl, {
+    return /* @__PURE__ */ jsx$1(SelectContentImpl, {
         ...props,
         ref: forwardedRef
     });
@@ -23816,7 +24338,7 @@ var SelectContentImpl = React.forwardRef((props, forwardedRef)=>{
         hideWhenDetached,
         avoidCollisions
     } : {};
-    return /* @__PURE__ */ jsx(SelectContentProvider, {
+    return /* @__PURE__ */ jsx$1(SelectContentProvider, {
         scope: __scopeSelect,
         content,
         viewport,
@@ -23830,10 +24352,10 @@ var SelectContentImpl = React.forwardRef((props, forwardedRef)=>{
         position,
         isPositioned,
         searchRef,
-        children: /* @__PURE__ */ jsx(ReactRemoveScroll, {
+        children: /* @__PURE__ */ jsx$1(ReactRemoveScroll, {
             as: Slot,
             allowPinchZoom: true,
-            children: /* @__PURE__ */ jsx(FocusScope, {
+            children: /* @__PURE__ */ jsx$1(FocusScope, {
                 asChild: true,
                 trapped: context.open,
                 onMountAutoFocus: (event)=>{
@@ -23845,14 +24367,14 @@ var SelectContentImpl = React.forwardRef((props, forwardedRef)=>{
                     });
                     event.preventDefault();
                 }),
-                children: /* @__PURE__ */ jsx(DismissableLayer, {
+                children: /* @__PURE__ */ jsx$1(DismissableLayer, {
                     asChild: true,
                     disableOutsidePointerEvents: true,
                     onEscapeKeyDown,
                     onPointerDownOutside,
                     onFocusOutside: (event)=>event.preventDefault(),
                     onDismiss: ()=>context.onOpenChange(false),
-                    children: /* @__PURE__ */ jsx(SelectPosition, {
+                    children: /* @__PURE__ */ jsx$1(SelectPosition, {
                         role: "listbox",
                         id: context.contentId,
                         "data-state": context.open ? "open" : "closed",
@@ -24031,12 +24553,12 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef)=>{
         position,
         focusSelectedItem
     ]);
-    return /* @__PURE__ */ jsx(SelectViewportProvider, {
+    return /* @__PURE__ */ jsx$1(SelectViewportProvider, {
         scope: __scopeSelect,
         contentWrapper,
         shouldExpandOnScrollRef,
         onScrollButtonChange: handleScrollButtonChange,
-        children: /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx$1("div", {
             ref: setContentWrapper,
             style: {
                 display: "flex",
@@ -24044,7 +24566,7 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef)=>{
                 position: "fixed",
                 zIndex: contentZIndex
             },
-            children: /* @__PURE__ */ jsx(Primitive.div, {
+            children: /* @__PURE__ */ jsx$1(Primitive.div, {
                 ...popperProps,
                 ref: composedRefs,
                 style: {
@@ -24064,7 +24586,7 @@ var POPPER_POSITION_NAME = "SelectPopperPosition";
 var SelectPopperPosition = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, align = "start", collisionPadding = CONTENT_MARGIN, ...popperProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
-    return /* @__PURE__ */ jsx(Content$1, {
+    return /* @__PURE__ */ jsx$1(Content$1, {
         ...popperScope,
         ...popperProps,
         ref: forwardedRef,
@@ -24096,15 +24618,15 @@ var SelectViewport = React.forwardRef((props, forwardedRef)=>{
     const prevScrollTopRef = React.useRef(0);
     return /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            /* @__PURE__ */ jsx("style", {
+            /* @__PURE__ */ jsx$1("style", {
                 dangerouslySetInnerHTML: {
                     __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
                 },
                 nonce
             }),
-            /* @__PURE__ */ jsx(Collection.Slot, {
+            /* @__PURE__ */ jsx$1(Collection.Slot, {
                 scope: __scopeSelect,
-                children: /* @__PURE__ */ jsx(Primitive.div, {
+                children: /* @__PURE__ */ jsx$1(Primitive.div, {
                     "data-radix-select-viewport": "",
                     role: "presentation",
                     ...viewportProps,
@@ -24157,10 +24679,10 @@ var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GR
 var SelectGroup = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, ...groupProps } = props;
     const groupId = useId();
-    return /* @__PURE__ */ jsx(SelectGroupContextProvider, {
+    return /* @__PURE__ */ jsx$1(SelectGroupContextProvider, {
         scope: __scopeSelect,
         id: groupId,
-        children: /* @__PURE__ */ jsx(Primitive.div, {
+        children: /* @__PURE__ */ jsx$1(Primitive.div, {
             role: "group",
             "aria-labelledby": groupId,
             ...groupProps,
@@ -24173,7 +24695,7 @@ var LABEL_NAME = "SelectLabel";
 var SelectLabel$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, ...labelProps } = props;
     const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         id: groupContext.id,
         ...labelProps,
         ref: forwardedRef
@@ -24201,7 +24723,7 @@ var SelectItem$1 = React.forwardRef((props, forwardedRef)=>{
     if (value === "") {
         throw new Error("A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.");
     }
-    return /* @__PURE__ */ jsx(SelectItemContextProvider, {
+    return /* @__PURE__ */ jsx$1(SelectItemContextProvider, {
         scope: __scopeSelect,
         value,
         disabled,
@@ -24210,12 +24732,12 @@ var SelectItem$1 = React.forwardRef((props, forwardedRef)=>{
         onItemTextChange: React.useCallback((node)=>{
             setTextValue((prevTextValue)=>prevTextValue || (node?.textContent ?? "").trim());
         }, []),
-        children: /* @__PURE__ */ jsx(Collection.ItemSlot, {
+        children: /* @__PURE__ */ jsx$1(Collection.ItemSlot, {
             scope: __scopeSelect,
             value,
             disabled,
             textValue,
-            children: /* @__PURE__ */ jsx(Primitive.div, {
+            children: /* @__PURE__ */ jsx$1(Primitive.div, {
                 role: "option",
                 "aria-labelledby": textId,
                 "data-highlighted": isFocused ? "" : void 0,
@@ -24273,7 +24795,7 @@ var SelectItemText = React.forwardRef((props, forwardedRef)=>{
     const [itemTextNode, setItemTextNode] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node)=>setItemTextNode(node), itemContext.onItemTextChange, (node)=>contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
     const textContent = itemTextNode?.textContent;
-    const nativeOption = React.useMemo(()=>/* @__PURE__ */ jsx("option", {
+    const nativeOption = React.useMemo(()=>/* @__PURE__ */ jsx$1("option", {
             value: itemContext.value,
             disabled: itemContext.disabled,
             children: textContent
@@ -24293,7 +24815,7 @@ var SelectItemText = React.forwardRef((props, forwardedRef)=>{
     ]);
     return /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            /* @__PURE__ */ jsx(Primitive.span, {
+            /* @__PURE__ */ jsx$1(Primitive.span, {
                 id: itemContext.textId,
                 ...itemTextProps,
                 ref: composedRefs
@@ -24307,7 +24829,7 @@ var ITEM_INDICATOR_NAME = "SelectItemIndicator";
 var SelectItemIndicator$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, ...itemIndicatorProps } = props;
     const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-    return itemContext.isSelected ? /* @__PURE__ */ jsx(Primitive.span, {
+    return itemContext.isSelected ? /* @__PURE__ */ jsx$1(Primitive.span, {
         "aria-hidden": true,
         ...itemIndicatorProps,
         ref: forwardedRef
@@ -24335,7 +24857,7 @@ var SelectScrollUpButton$1 = React.forwardRef((props, forwardedRef)=>{
         contentContext.viewport,
         contentContext.isPositioned
     ]);
-    return canScrollUp ? /* @__PURE__ */ jsx(SelectScrollButtonImpl, {
+    return canScrollUp ? /* @__PURE__ */ jsx$1(SelectScrollButtonImpl, {
         ...props,
         ref: composedRefs,
         onAutoScroll: ()=>{
@@ -24369,7 +24891,7 @@ var SelectScrollDownButton$1 = React.forwardRef((props, forwardedRef)=>{
         contentContext.viewport,
         contentContext.isPositioned
     ]);
-    return canScrollDown ? /* @__PURE__ */ jsx(SelectScrollButtonImpl, {
+    return canScrollDown ? /* @__PURE__ */ jsx$1(SelectScrollButtonImpl, {
         ...props,
         ref: composedRefs,
         onAutoScroll: ()=>{
@@ -24405,7 +24927,7 @@ var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef)=>{
     }, [
         getItems
     ]);
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         "aria-hidden": true,
         ...scrollIndicatorProps,
         ref: forwardedRef,
@@ -24432,7 +24954,7 @@ var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef)=>{
 var SEPARATOR_NAME = "SelectSeparator";
 var SelectSeparator$1 = React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx(Primitive.div, {
+    return /* @__PURE__ */ jsx$1(Primitive.div, {
         "aria-hidden": true,
         ...separatorProps,
         ref: forwardedRef
@@ -24445,14 +24967,14 @@ var SelectArrow = React.forwardRef((props, forwardedRef)=>{
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(Arrow, {
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx$1(Arrow, {
         ...popperScope,
         ...arrowProps,
         ref: forwardedRef
     }) : null;
 });
 SelectArrow.displayName = ARROW_NAME;
-var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME = "SelectBubbleInput";
 var SelectBubbleInput = React.forwardRef(({ __scopeSelect, value, ...props }, forwardedRef)=>{
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
@@ -24474,7 +24996,7 @@ var SelectBubbleInput = React.forwardRef(({ __scopeSelect, value, ...props }, fo
         prevValue,
         value
     ]);
-    return /* @__PURE__ */ jsx(Primitive.select, {
+    return /* @__PURE__ */ jsx$1(Primitive.select, {
         ...props,
         style: {
             ...VISUALLY_HIDDEN_STYLES,
@@ -24484,7 +25006,7 @@ var SelectBubbleInput = React.forwardRef(({ __scopeSelect, value, ...props }, fo
         defaultValue: value
     });
 });
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
 function shouldShowPlaceholder(value) {
     return value === "" || value === void 0;
 }
@@ -24545,7 +25067,9 @@ var ScrollDownButton = SelectScrollDownButton$1;
 var Separator = SelectSeparator$1;
 const Select = Root2;
-const SelectValue = Value;
+const SelectValue = styled(Value)`
+  font-family: inherit;
+`;
 const SelectTrigger = styled(Trigger)`
   display: flex;
   height: 2.5rem;
@@ -24575,6 +25099,7 @@ const SelectTrigger = styled(Trigger)`
   }
   &[data-placeholder] {
+    font-family: inherit;
     color: ${(props)=>props.$theme.colors.mutedForeground};
   }
 `;
@@ -24941,240 +25466,6 @@ const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = f
     }, loading ? /*#__PURE__*/ React__default.createElement(LoadingIcon, null) : /*#__PURE__*/ React__default.createElement(RefreshIcon, null)));
 };
-var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
-var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-function CheckboxProvider(props) {
-    const { __scopeCheckbox, checked: checkedProp, children, defaultChecked, disabled, form, name, onCheckedChange, required, value = "on", // @ts-expect-error
-    internal_do_not_use_render } = props;
-    const [checked, setChecked] = useControllableState$1({
-        prop: checkedProp,
-        defaultProp: defaultChecked ?? false,
-        onChange: onCheckedChange,
-        caller: CHECKBOX_NAME
-    });
-    const [control, setControl] = React.useState(null);
-    const [bubbleInput, setBubbleInput] = React.useState(null);
-    const hasConsumerStoppedPropagationRef = React.useRef(false);
-    const isFormControl = control ? !!form || !!control.closest("form") : // We set this to true by default so that events bubble to forms without JS (SSR)
-    true;
-    const context = {
-        checked,
-        disabled,
-        setChecked,
-        control,
-        setControl,
-        name,
-        form,
-        value,
-        hasConsumerStoppedPropagationRef,
-        required,
-        defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
-        isFormControl,
-        bubbleInput,
-        setBubbleInput
-    };
-    return /* @__PURE__ */ jsx(CheckboxProviderImpl, {
-        scope: __scopeCheckbox,
-        ...context,
-        children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
-    });
-}
-var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = React.forwardRef(({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef)=>{
-    const { control, value, disabled, checked, required, setControl, setChecked, hasConsumerStoppedPropagationRef, isFormControl, bubbleInput } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs$1(forwardedRef, setControl);
-    const initialCheckedStateRef = React.useRef(checked);
-    React.useEffect(()=>{
-        const form = control?.form;
-        if (form) {
-            const reset = ()=>setChecked(initialCheckedStateRef.current);
-            form.addEventListener("reset", reset);
-            return ()=>form.removeEventListener("reset", reset);
-        }
-    }, [
-        control,
-        setChecked
-    ]);
-    return /* @__PURE__ */ jsx(Primitive.button, {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        "aria-required": required,
-        "data-state": getState(checked),
-        "data-disabled": disabled ? "" : void 0,
-        disabled,
-        value,
-        ...checkboxProps,
-        ref: composedRefs,
-        onKeyDown: composeEventHandlers(onKeyDown, (event)=>{
-            if (event.key === "Enter") event.preventDefault();
-        }),
-        onClick: composeEventHandlers(onClick, (event)=>{
-            setChecked((prevChecked)=>isIndeterminate(prevChecked) ? true : !prevChecked);
-            if (bubbleInput && isFormControl) {
-                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-        })
-    });
-});
-CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox$1 = React.forwardRef((props, forwardedRef)=>{
-    const { __scopeCheckbox, name, checked, defaultChecked, required, disabled, value, onCheckedChange, form, ...checkboxProps } = props;
-    return /* @__PURE__ */ jsx(CheckboxProvider, {
-        __scopeCheckbox,
-        checked,
-        defaultChecked,
-        disabled,
-        required,
-        onCheckedChange,
-        name,
-        form,
-        value,
-        internal_do_not_use_render: ({ isFormControl })=>/* @__PURE__ */ jsxs(Fragment, {
-                children: [
-                    /* @__PURE__ */ jsx(CheckboxTrigger, {
-                        ...checkboxProps,
-                        ref: forwardedRef,
-                        __scopeCheckbox
-                    }),
-                    isFormControl && /* @__PURE__ */ jsx(CheckboxBubbleInput, {
-                        __scopeCheckbox
-                    })
-                ]
-            })
-    });
-});
-Checkbox$1.displayName = CHECKBOX_NAME;
-var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator$1 = React.forwardRef((props, forwardedRef)=>{
-    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
-    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ jsx(Presence, {
-        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ jsx(Primitive.span, {
-            "data-state": getState(context.checked),
-            "data-disabled": context.disabled ? "" : void 0,
-            ...indicatorProps,
-            ref: forwardedRef,
-            style: {
-                pointerEvents: "none",
-                ...props.style
-            }
-        })
-    });
-});
-CheckboxIndicator$1.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = React.forwardRef(({ __scopeCheckbox, ...props }, forwardedRef)=>{
-    const { control, hasConsumerStoppedPropagationRef, checked, defaultChecked, required, disabled, name, value, form, bubbleInput, setBubbleInput } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs$1(forwardedRef, setBubbleInput);
-    const prevChecked = usePrevious(checked);
-    const controlSize = useSize(control);
-    React.useEffect(()=>{
-        const input = bubbleInput;
-        if (!input) return;
-        const inputProto = window.HTMLInputElement.prototype;
-        const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-        const setChecked = descriptor.set;
-        const bubbles = !hasConsumerStoppedPropagationRef.current;
-        if (prevChecked !== checked && setChecked) {
-            const event = new Event("click", {
-                bubbles
-            });
-            input.indeterminate = isIndeterminate(checked);
-            setChecked.call(input, isIndeterminate(checked) ? false : checked);
-            input.dispatchEvent(event);
-        }
-    }, [
-        bubbleInput,
-        prevChecked,
-        checked,
-        hasConsumerStoppedPropagationRef
-    ]);
-    const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ jsx(Primitive.input, {
-        type: "checkbox",
-        "aria-hidden": true,
-        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
-        required,
-        disabled,
-        name,
-        value,
-        form,
-        ...props,
-        tabIndex: -1,
-        ref: composedRefs,
-        style: {
-            ...props.style,
-            ...controlSize,
-            position: "absolute",
-            pointerEvents: "none",
-            opacity: 0,
-            margin: 0,
-            // We transform because the input is absolutely positioned but we have
-            // rendered it **after** the button. This pulls it back to sit on top
-            // of the button.
-            transform: "translateX(-100%)"
-        }
-    });
-});
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function isFunction(value) {
-    return typeof value === "function";
-}
-function isIndeterminate(checked) {
-    return checked === "indeterminate";
-}
-function getState(checked) {
-    return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-}
-const CheckboxRoot = styled(Checkbox$1)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1rem;
-  width: 1rem;
-  flex-shrink: 0;
-  border-radius: 0.125rem;
-  border: 1px solid #6366f1;
-  background-color: transparent;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-  }
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  &[data-state="checked"] {
-    background-color: #6366f1;
-    color: white;
-  }
-`;
-const CheckboxIndicator = styled(CheckboxIndicator$1)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: currentColor;
-`;
-const CheckIcon = styled(Check)`
-  height: 1rem;
-  width: 1rem;
-`;
-const Checkbox = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ React.createElement(CheckboxRoot, {
-        ref: ref,
-        ...props
-    }, /*#__PURE__*/ React.createElement(CheckboxIndicator, null, /*#__PURE__*/ React.createElement(CheckIcon, null))));
-Checkbox.displayName = Checkbox$1.displayName;
 function __insertCSS(code) {
     if (typeof document == 'undefined') return;
     let head = document.head || document.getElementsByTagName('head')[0];
@@ -26797,7 +27088,7 @@ const DrawerOverlay = /*#__PURE__*/ React.forwardRef(({ className, ...props }, r
             bottom: 0,
             left: 0,
             zIndex: 50,
-            backgroundColor: "rgba(0, 0, 0, 0.8)"
+            backgroundColor: "rgba(0, 0, 0, 0.3)"
         },
         className: className,
         ...props
@@ -26856,7 +27147,183 @@ const DrawerDescription = /*#__PURE__*/ React.forwardRef(({ className, ...props
 DrawerDescription.displayName = Drawer$1.Description.displayName;
 const GlobalStyles = ()=>{
-    return null;
+    const systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+    return /*#__PURE__*/ React__default.createElement(Global, {
+        styles: css`
+        * {
+          box-sizing: border-box;
+          border-color: #e5e7eb;
+          font-family: ${systemFontStack};
+        }
+        html,
+        body {
+          margin: 0;
+          padding: 0;
+          background-color: #ffffff;
+          color: #1f2937;
+          font-family: ${systemFontStack};
+          line-height: 1.5;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          transition:
+            background-color 0.2s ease-in-out,
+            color 0.2s ease-in-out;
+        }
+        /* Dark theme styles */
+        html.dark,
+        html.dark body {
+          background-color: #0f172a;
+          color: #f1f5f9;
+        }
+        /* XYFlow overrides */
+        .react-flow__edge {
+          cursor: default !important;
+        }
+        .react-flow__edge-path {
+          cursor: default !important;
+        }
+        .react-flow__edge-label {
+          font-size: 10px;
+          background: white;
+          padding: 2px 4px;
+          border-radius: 4px;
+          border: 1px solid #e5e7eb;
+          max-width: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        /* Dark theme XYFlow overrides */
+        html.dark .react-flow__edge-label {
+          background: #1e293b;
+          border: 1px solid #475569;
+          color: #f1f5f9;
+        }
+        /* Radix UI Select styles */
+        [data-radix-select-trigger],
+        .shadcn-select {
+          display: flex;
+          height: 2.5rem;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          border-radius: 0.375rem;
+          border: 1px solid #e5e7eb;
+          background-color: #ffffff;
+          padding: 0.5rem 0.75rem;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          outline: none;
+          transition: all 0.2s ease-in-out;
+        }
+        /* Dark theme select styles */
+        html.dark [data-radix-select-trigger],
+        html.dark .shadcn-select {
+          border: 1px solid #475569;
+          background-color: #1e293b;
+          color: #f1f5f9;
+        }
+        [data-radix-select-trigger]:focus,
+        .shadcn-select:focus {
+          outline: none;
+          box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+        [data-radix-select-trigger]:disabled,
+        .shadcn-select:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        /* File selector refresh button styles */
+        .file-selector-refresh-btn {
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          border: 1px solid #e5e7eb;
+          background-color: #ffffff;
+          transition: all 0.2s ease-in-out;
+        }
+        .file-selector-refresh-btn:hover {
+          background-color: #f3f4f6;
+          color: #374151;
+        }
+        .file-selector-refresh-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        /* Dark theme file selector refresh button */
+        html.dark .file-selector-refresh-btn {
+          border: 1px solid #475569;
+          background-color: #1e293b;
+          color: #f1f5f9;
+        }
+        html.dark .file-selector-refresh-btn:hover {
+          background-color: #334155;
+          color: #f1f5f9;
+        }
+        /* CSS Variables for backward compatibility */
+        :root {
+          --background: #ffffff;
+          --foreground: #1f2937;
+          --card: #ffffff;
+          --card-foreground: #1f2937;
+          --popover: #ffffff;
+          --popover-foreground: #1f2937;
+          --primary: #6366f1;
+          --primary-foreground: #ffffff;
+          --secondary: #f3f4f6;
+          --secondary-foreground: #1f2937;
+          --muted: #f3f4f6;
+          --muted-foreground: #6b7280;
+          --accent: #f3f4f6;
+          --accent-foreground: #1f2937;
+          --destructive: #ef4444;
+          --destructive-foreground: #ffffff;
+          --border: #e5e7eb;
+          --input: #e5e7eb;
+          --ring: #6366f1;
+          --radius: 0.5rem;
+        }
+        /* Dark theme CSS variables */
+        html.dark {
+          --background: #0f172a;
+          --foreground: #f1f5f9;
+          --card: #1e293b;
+          --card-foreground: #f1f5f9;
+          --popover: #1e293b;
+          --popover-foreground: #f1f5f9;
+          --primary: #6366f1;
+          --primary-foreground: #ffffff;
+          --secondary: #334155;
+          --secondary-foreground: #f1f5f9;
+          --muted: #334155;
+          --muted-foreground: #94a3b8;
+          --accent: #334155;
+          --accent-foreground: #f1f5f9;
+          --destructive: #ef4444;
+          --destructive-foreground: #ffffff;
+          --border: #475569;
+          --input: #475569;
+          --ring: #6366f1;
+          --radius: 0.5rem;
+        }
+      `
+    });
 };
 /**
@@ -26995,4 +27462,4 @@ const GlobalStyles = ()=>{
         return getSafeColor(props.theme, path, fallback);
     };
-export { AgenticFlowVisualizer, AnthropicIcon, Badge, Checkbox, Drawer, Edge, FileSelector, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OpenAIIcon, SafeThemeProvider, Select, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme, detectContentType, formatCurrency, formatLatency, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, truncateText, useComponentTheme, useSafeTheme, useTheme, useThemeValue };
+export { AgenticFlowVisualizer, AnthropicIcon, Badge, Drawer, Edge, FileSelector, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OpenAIIcon, SafeThemeProvider, Select, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme, detectContentType, formatCurrency, formatLatency, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, truncateText, useComponentTheme, useSafeTheme, useTheme, useThemeValue };