Connection

Overview

Connection is the live preview line that follows the cursor while the user drags from a source Handle to a target. It is a ConnectionLineComponent from @xyflow/react, rendered as a bezier curve with a small target circle so users can see exactly where the edge will land.

The path uses var(--color-ring) for the stroke and a white-filled circle at the cursor tip, so the connection visually matches Gremorie focus states. The animated class on the path enables xyflow's flowing dashes (override or remove via CSS if you want a static line).

Use it by passing the component itself (not an instance) to Canvas through ReactFlow's connectionLineComponent prop.

Preview

'use client';import '@xyflow/react/dist/style.css';import { Canvas, Connection } from '@gremorie/rx-ai';import { type Node as FlowNode, ReactFlowProvider } from '@xyflow/react';const connectionNodes: FlowNode[] = [  { id: '1', position: { x: 0, y: 80 }, data: { label: 'Drag from me' } },  { id: '2', position: { x: 300, y: 0 }, data: { label: 'Drop here' } },];export function ConnectionPreview() {  return (    <div className="h-[360px] w-full">      <ReactFlowProvider>        <Canvas          connectionLineComponent={Connection}          edges={[]}          nodes={connectionNodes}        />      </ReactFlowProvider>    </div>  );}

Anatomy

Connection   provisional connection line — leaf (Canvas's connectionLineComponent)

Installation

Requires @xyflow/react.

Usage

import { Canvas, Connection } from "@gremorie/rx-ai";

export function Workflow() {
  return (
    <Canvas
      nodes={nodes}
      edges={edges}
      connectionLineComponent={Connection}
      onConnect={onConnect}
    >
      {/* ... */}
    </Canvas>
  );
}

API

<Connection>

A ConnectionLineComponent from @xyflow/react. xyflow passes the props automatically when the user starts dragging from a handle.

Renders:

• A <path> with class="animated", stroke="var(--color-ring)" and a bezier curve whose control points sit at the midpoint between source and target.
• A <circle> at the cursor (fill="#fff", stroke="var(--color-ring)", r={3}) so the tip is visible against any background.

Internal constant: HALF = 0.5 (the control-point ratio along the X axis).

Composition

1. <Canvas> declares the surface and accepts connectionLineComponent as a prop. Pass Connection itself (not JSX) - xyflow instantiates it during a drag.
2. <Handle> components on each Node define the connection points. xyflow renders Connection automatically whenever a drag starts from one of them.
3. The drag commits via onConnect, at which point you typically dispatch an action that pushes a new edge into the edges state.

Variations

Default animated line

The out-of-the-box look: animated stroke, white circle tip.

<Canvas connectionLineComponent={Connection} />

Static line via CSS override

Remove the dash animation if you prefer a calmer visual.

.react-flow__connectionline .animated {
  animation: none;
  stroke-dasharray: none;
}

Custom themed line

If you need a different stroke color (e.g. destructive while hovering a "delete edge" zone), wrap Connection in your own component.

import type { ConnectionLineComponent } from '@xyflow/react';

const DestructiveConnection: ConnectionLineComponent = (props) => (
  <g style={{ filter: 'drop-shadow(0 0 4px var(--color-destructive))' }}>
    <Connection {...props} />
  </g>
);

<Canvas connectionLineComponent={DestructiveConnection} />;

Accessibility

• Pointer-only by design: Connection rendering is bound to a mouse / touch drag. xyflow does not currently expose a keyboard-driven edge-creation mode.

• Reduced motion: The animated class adds a marching-ants effect via CSS. Honor user prefs by disabling the animation:

  @media (prefers-reduced-motion: reduce) {
    .react-flow__connectionline .animated {
      animation: none;
    }
  }

• Color contrast: var(--color-ring) against the canvas background must clear 3:1 for non-text UI components. The Gremorie token already meets that, but verify if you swap themes.

• Drop target announcement: To help screen reader users understand where a connection would land, add aria-label to each target Handle describing what kind of connection it accepts.

Related

• Canvas - the surface that consumes connectionLineComponent
• Edge - the persisted edge that replaces the in-progress connection on drop
• Node - hosts the handles where connections start and end