@elabs-ai/components-flow 4.0.0

package/src/canvas-shell/canvas-shell.tsx

@@ -0,0 +1,128 @@
+import { type ReactNode } from "react";
+import {
+  Background,
+  ReactFlow,
+  ReactFlowProvider,
+  type AriaLabelConfig,
+  type Edge,
+  type Node,
+  type ReactFlowProps,
+} from "@xyflow/react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { HelperLines } from "../helper-lines/helper-lines";
+import { useHelperLines } from "../helper-lines/use-helper-lines";
+
+export interface CanvasShellProps<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge,
+> extends ReactFlowProps<NodeType, EdgeType> {
+  /** Render a branded dotted background grid. Defaults to true. */
+  background?: boolean;
+  /**
+   * Enable alignment guides + snapping while a single node is dragged. Off by
+   * default; when false, CanvasShell behaves exactly as before. When true,
+   * CanvasShell wires `useHelperLines` around your `onNodesChange` and renders
+   * the `<HelperLines>` overlay internally — pass `nodes` + `onNodesChange`
+   * (the standard controlled setup, e.g. via `useNodesState`). For full control
+   * use the exported `useHelperLines` + `<HelperLines>` directly.
+   */
+  helperLines?: boolean;
+  /** Overlays rendered inside the flow (ZoomControls, Legend, Panels). */
+  children?: ReactNode;
+  className?: string;
+}
+
+type CanvasShellInnerProps<NodeType extends Node, EdgeType extends Edge> = Omit<
+  CanvasShellProps<NodeType, EdgeType>,
+  "helperLines"
+>;
+
+/**
+ * Branded defaults for React Flow's `ariaLabelConfig` (12.7+) — sentence-case
+ * labels that match the rest of brand-ui's voice (see `ZoomControls`'
+ * "Zoom in"/"Zoom out"/"Fit view"), instead of the library's Title Case
+ * defaults. Callers can override any key; unset keys keep these defaults, and
+ * React Flow itself fills in any key neither side sets.
+ */
+const DEFAULT_ARIA_LABEL_CONFIG: Partial<AriaLabelConfig> = {
+  "node.a11yDescription.default":
+    "Press Enter or Space to select this node. Press Delete to remove it, Escape to cancel.",
+  "node.a11yDescription.keyboardDisabled":
+    "Press Enter or Space to select this node. Then use the arrow keys to move it. Press Delete to remove it, Escape to cancel.",
+  "edge.a11yDescription.default":
+    "Press Enter or Space to select this edge. Press Delete to remove it, Escape to cancel.",
+  "controls.ariaLabel": "Canvas controls",
+  "controls.zoomIn.ariaLabel": "Zoom in",
+  "controls.zoomOut.ariaLabel": "Zoom out",
+  "controls.fitView.ariaLabel": "Fit view",
+  "controls.interactive.ariaLabel": "Toggle interactivity",
+  "minimap.ariaLabel": "Minimap",
+  "handle.ariaLabel": "Connection handle",
+};
+
+/**
+ * Branded React Flow canvas. Sets a token-driven background + sensible
+ * defaults; pass nodes/edges/handlers through as normal React Flow props.
+ *
+ * Consumers MUST import the React Flow stylesheet once at the app root:
+ *   import "@xyflow/react/dist/style.css";
+ *
+ * Children render inside the flow context, so <ZoomControls /> and React Flow
+ * <Panel>s work when placed here.
+ */
+export function CanvasShell<NodeType extends Node = Node, EdgeType extends Edge = Edge>({
+  helperLines = false,
+  ...props
+}: CanvasShellProps<NodeType, EdgeType>) {
+  if (helperLines) {
+    // A provider is needed so `useHelperLines` can read the live node store; the
+    // ReactFlow rendered below connects to this same provider.
+    return (
+      <ReactFlowProvider>
+        <CanvasShellWithHelperLines<NodeType, EdgeType> {...props} />
+      </ReactFlowProvider>
+    );
+  }
+  return <CanvasShellBase<NodeType, EdgeType> {...props} />;
+}
+
+function CanvasShellBase<NodeType extends Node, EdgeType extends Edge>({
+  background = true,
+  children,
+  className,
+  ariaLabelConfig,
+  ...props
+}: CanvasShellInnerProps<NodeType, EdgeType>) {
+  return (
+    <div className={cn("h-full w-full bg-canvas", className)}>
+      <ReactFlow
+        fitView
+        proOptions={{ hideAttribution: true }}
+        ariaLabelConfig={{ ...DEFAULT_ARIA_LABEL_CONFIG, ...ariaLabelConfig }}
+        {...props}
+      >
+        {background ? <Background gap={20} size={1} color="var(--canvas-grid)" /> : null}
+        {children}
+      </ReactFlow>
+    </div>
+  );
+}
+
+function CanvasShellWithHelperLines<NodeType extends Node, EdgeType extends Edge>({
+  onNodesChange,
+  children,
+  ...props
+}: CanvasShellInnerProps<NodeType, EdgeType>) {
+  const {
+    onNodesChange: wrappedOnNodesChange,
+    helperLineHorizontal,
+    helperLineVertical,
+  } = useHelperLines<NodeType>(onNodesChange);
+
+  return (
+    <CanvasShellBase<NodeType, EdgeType> {...props} onNodesChange={wrappedOnNodesChange}>
+      {children}
+      <HelperLines horizontal={helperLineHorizontal} vertical={helperLineVertical} />
+    </CanvasShellBase>
+  );
+}

package/src/canvas-shell/index.ts

@@ -0,0 +1 @@
+export { CanvasShell, type CanvasShellProps } from "./canvas-shell";

package/src/flow-button-edge/flow-button-edge.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useEffect, useRef } from "react";
+import { useEdgesState, useNodesState } from "@xyflow/react";
+import { CanvasShell } from "../canvas-shell";
+import { FlowNode, type BrandFlowNode } from "../flow-node";
+import { useFlowLayout } from "../flow-layout";
+import { ZoomControls } from "../zoom-controls";
+import { FlowButtonEdge, type BrandFlowButtonEdge } from "./flow-button-edge";
+
+const nodeTypes = { brand: FlowNode };
+const edgeTypes = { button: FlowButtonEdge };
+
+const meta = {
+  title: "Flow/FlowButtonEdge",
+  component: FlowButtonEdge,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof FlowButtonEdge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Two nodes joined by a button edge — hover/focus the "+" to see it. */
+export const Default: Story = {
+  render: () => {
+    const nodes: BrandFlowNode[] = [
+      {
+        id: "1",
+        type: "brand",
+        position: { x: 80, y: 40 },
+        data: { kind: "Source", title: "Ingest", tone: "accent" },
+      },
+      {
+        id: "2",
+        type: "brand",
+        position: { x: 80, y: 220 },
+        data: { kind: "Output", title: "Publish", tone: "success" },
+      },
+    ];
+    const edges: BrandFlowButtonEdge[] = [
+      { id: "e1-2", source: "1", target: "2", type: "button", data: {} },
+    ];
+    return (
+      <div className="h-[350px]">
+        <CanvasShell nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Pattern 3 — Insert between: split an edge into two, with a node in the middle.
+// ---------------------------------------------------------------------------
+
+const insertInitialNodes: BrandFlowNode[] = [
+  {
+    id: "ingest",
+    type: "brand",
+    position: { x: 60, y: 20 },
+    data: { kind: "Source", title: "Ingest", subtitle: "Raw data in", tone: "accent" },
+  },
+  {
+    id: "publish",
+    type: "brand",
+    position: { x: 60, y: 260 },
+    data: { kind: "Output", title: "Publish", subtitle: "Downstream sink", tone: "success" },
+  },
+];
+const insertInitialEdges: BrandFlowButtonEdge[] = [
+  { id: "e-ingest-publish", source: "ingest", target: "publish", type: "button", data: {} },
+];
+
+/**
+ * Runs the auto-layout pass once the newly inserted node has been measured.
+ * Rendered as a CanvasShell child (invisible) so `useFlowLayout` has React
+ * Flow context; `pendingRef` is flipped by `insert()` in the parent.
+ */
+function AutoLayoutOnInsert({ pendingRef }: { pendingRef: React.MutableRefObject<boolean> }) {
+  const { layout, ready } = useFlowLayout();
+  useEffect(() => {
+    if (pendingRef.current && ready) {
+      pendingRef.current = false;
+      layout("TB");
+    }
+  }, [ready, layout, pendingRef]);
+  return null;
+}
+
+/**
+ * Click a button edge's "+": a new `FlowNode` is inserted between its source
+ * and target, the original edge is replaced by two button edges (source→new,
+ * new→target), and the graph re-lays-out.
+ */
+function InsertBetweenDemo() {
+  const [nodes, setNodes, onNodesChange] = useNodesState<BrandFlowNode>(insertInitialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<BrandFlowButtonEdge>(insertInitialEdges);
+  const stepRef = useRef(0);
+  const pendingLayoutRef = useRef(false);
+
+  const insert = useCallback(
+    (edgeId: string, source: string, target: string) => {
+      const step = ++stepRef.current;
+      const newNodeId = `inserted-${step}`;
+
+      setNodes((current) =>
+        current.concat({
+          id: newNodeId,
+          type: "brand",
+          // Temporary position — the auto-layout pass below repositions it.
+          position: { x: 0, y: 0 },
+          data: { kind: "Process", title: `Step ${step}` },
+        }),
+      );
+      setEdges((current) => [
+        ...current.filter((edge) => edge.id !== edgeId),
+        { id: `e-${source}-${newNodeId}`, source, target: newNodeId, type: "button", data: {} },
+        { id: `e-${newNodeId}-${target}`, source: newNodeId, target, type: "button", data: {} },
+      ]);
+      pendingLayoutRef.current = true;
+    },
+    [setNodes, setEdges],
+  );
+
+  // Attach `onInsert` at render time (not stored in state) so the handler
+  // always closes over the edge's own id/source/target.
+  const displayEdges = edges.map((edge) => ({
+    ...edge,
+    data: { ...edge.data, onInsert: () => insert(edge.id, edge.source, edge.target) },
+  }));
+
+  return (
+    <div className="h-[520px]">
+      <CanvasShell
+        nodes={nodes}
+        edges={displayEdges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+      >
+        <ZoomControls />
+        <AutoLayoutOnInsert pendingRef={pendingLayoutRef} />
+      </CanvasShell>
+    </div>
+  );
+}
+
+/** Click the "+" on the edge between "Ingest" and "Publish" to insert a step. */
+export const InsertBetween: Story = {
+  render: () => <InsertBetweenDemo />,
+};

package/src/flow-button-edge/flow-button-edge.test.tsx

@@ -0,0 +1,99 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// @xyflow/react requires real layout/measurement — mock the engine and assert
+// the brand component's own output. Real rendering + a11y are covered by
+// Storybook interaction tests.
+vi.mock("@xyflow/react", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- a vi.mock factory is hoisted above imports; a lazy require avoids the TDZ a top-level import would hit
+  const React = require("react");
+  return {
+    BaseEdge: ({ id, path, style }: { id: string; path: string; style?: React.CSSProperties }) =>
+      React.createElement("svg", { "data-testid": "base-edge" }, [
+        React.createElement("path", { key: "p", d: path, id, style }),
+      ]),
+    // Real EdgeLabelRenderer portals into a fixed container; a passthrough is
+    // enough here since we only assert the brand component's own output.
+    EdgeLabelRenderer: ({ children }: { children: React.ReactNode }) => children,
+    getBezierPath: vi.fn(
+      ({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+      }: {
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+      }) => [
+        `M${sourceX},${sourceY} C${targetX},${targetY}`,
+        (sourceX + targetX) / 2,
+        (sourceY + targetY) / 2,
+      ],
+    ),
+    Position: { Top: "top", Bottom: "bottom", Left: "left", Right: "right" },
+  };
+});
+
+import { FlowButtonEdge, type BrandFlowButtonEdge } from "./flow-button-edge";
+import type { EdgeProps } from "@xyflow/react";
+
+afterEach(cleanup);
+
+/** Minimal EdgeProps factory for FlowButtonEdge. */
+function makeEdgeProps(
+  overrides: Partial<EdgeProps<BrandFlowButtonEdge>> = {},
+): EdgeProps<BrandFlowButtonEdge> {
+  return {
+    id: "test-edge",
+    type: "button",
+    source: "node-a",
+    target: "node-b",
+    sourceX: 0,
+    sourceY: 0,
+    targetX: 100,
+    targetY: 100,
+    sourcePosition: "bottom" as EdgeProps["sourcePosition"],
+    targetPosition: "top" as EdgeProps["targetPosition"],
+    selected: false,
+    animated: false,
+    data: {},
+    ...overrides,
+  };
+}
+
+describe("FlowButtonEdge", () => {
+  it("renders a BaseEdge element", () => {
+    render(<FlowButtonEdge {...makeEdgeProps()} />);
+    expect(screen.getByTestId("base-edge")).toBeInTheDocument();
+  });
+
+  it("renders the insert button with the default aria-label", () => {
+    render(<FlowButtonEdge {...makeEdgeProps()} />);
+    expect(screen.getByRole("button", { name: "Insert node on edge" })).toBeInTheDocument();
+  });
+
+  it("renders the insert button with a custom aria-label", () => {
+    render(<FlowButtonEdge {...makeEdgeProps({ data: { label: "Insert step" } })} />);
+    expect(screen.getByRole("button", { name: "Insert step" })).toBeInTheDocument();
+  });
+
+  it("fires onInsert on click", async () => {
+    const user = userEvent.setup();
+    const onInsert = vi.fn();
+    render(<FlowButtonEdge {...makeEdgeProps({ data: { onInsert } })} />);
+    await user.click(screen.getByRole("button", { name: "Insert node on edge" }));
+    expect(onInsert).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onInsert on keyboard Enter", async () => {
+    const user = userEvent.setup();
+    const onInsert = vi.fn();
+    render(<FlowButtonEdge {...makeEdgeProps({ data: { onInsert } })} />);
+    screen.getByRole("button", { name: "Insert node on edge" }).focus();
+    await user.keyboard("{Enter}");
+    expect(onInsert).toHaveBeenCalledTimes(1);
+  });
+});

package/src/flow-button-edge/flow-button-edge.tsx

@@ -0,0 +1,80 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath,
+  type Edge,
+  type EdgeProps,
+} from "@xyflow/react";
+import { Plus } from "lucide-react";
+
+export interface FlowButtonEdgeData extends Record<string, unknown> {
+  /** aria-label for the insert button. @default "Insert node on edge" */
+  label?: string;
+  /** Called when the edge's "+" button is activated (click, Enter, or Space). */
+  onInsert?: () => void;
+}
+
+export type BrandFlowButtonEdge = Edge<FlowButtonEdgeData, "button">;
+
+/**
+ * Branded bezier edge (matching `FlowEdge`'s `--flow-edge` token) with a
+ * centered "+" button rendered via `EdgeLabelRenderer` at the edge midpoint.
+ * Register it in `edgeTypes={{ button: FlowButtonEdge }}` and create edges
+ * with `type: "button"` and `data: FlowButtonEdgeData`.
+ *
+ * The button is a real `<button>` with an `aria-label`, keyboard-activatable
+ * via native Enter/Space. Fires `data.onInsert?.()` on activation — the
+ * typical handler splits the edge: insert a new node between source and
+ * target and rewire the two edges (see the "Insert between" story).
+ */
+export function FlowButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+  data,
+}: EdgeProps<BrandFlowButtonEdge>) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  const label = data?.label ?? "Insert node on edge";
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          }}
+          className="nodrag nopan pointer-events-auto"
+        >
+          <button
+            type="button"
+            aria-label={label}
+            onClick={() => data?.onInsert?.()}
+            className="flex size-5 items-center justify-center rounded-full border border-flow-group-border bg-flow-node text-flow-node-foreground shadow-sm transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Plus className="size-3" aria-hidden="true" />
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}

package/src/flow-button-edge/index.ts

@@ -0,0 +1,5 @@
+export {
+  FlowButtonEdge,
+  type FlowButtonEdgeData,
+  type BrandFlowButtonEdge,
+} from "./flow-button-edge";

package/src/flow-edge/flow-edge.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import "@xyflow/react/dist/style.css";
+import { type Edge } from "@xyflow/react";
+import { CanvasShell } from "../canvas-shell";
+import { FlowNode, type BrandFlowNode } from "../flow-node";
+import { FlowEdge } from "./flow-edge";
+
+const nodeTypes = { brand: FlowNode };
+const edgeTypes = { brand: FlowEdge };
+
+const meta = {
+  title: "Flow/FlowEdge",
+  component: FlowEdge,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof FlowEdge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Two nodes connected by a single branded bezier edge. */
+export const Default: Story = {
+  render: () => {
+    const nodes: BrandFlowNode[] = [
+      {
+        id: "1",
+        type: "brand",
+        position: { x: 80, y: 40 },
+        data: { kind: "Source", title: "Postgres", tone: "accent" },
+      },
+      {
+        id: "2",
+        type: "brand",
+        position: { x: 80, y: 220 },
+        data: { kind: "Transform", title: "Clean & join", tone: "default" },
+      },
+    ];
+    const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2", type: "brand" }];
+    return (
+      <div className="h-[400px]">
+        <CanvasShell nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+      </div>
+    );
+  },
+};
+
+/** A small pipeline with multiple branded edges. */
+export const Pipeline: Story = {
+  render: () => {
+    const nodes: BrandFlowNode[] = [
+      {
+        id: "1",
+        type: "brand",
+        position: { x: 0, y: 0 },
+        data: { kind: "Source", title: "Postgres", tone: "accent" },
+      },
+      {
+        id: "2",
+        type: "brand",
+        position: { x: 220, y: 120 },
+        data: { kind: "Transform", title: "Clean & join", tone: "default" },
+      },
+      {
+        id: "3",
+        type: "brand",
+        position: { x: 440, y: 0 },
+        data: { kind: "Output", title: "Dashboard", tone: "success" },
+      },
+    ];
+    const edges: Edge[] = [
+      { id: "e1-2", source: "1", target: "2", type: "brand" },
+      { id: "e2-3", source: "2", target: "3", type: "brand" },
+    ];
+    return (
+      <div className="h-[400px]">
+        <CanvasShell nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+      </div>
+    );
+  },
+};

package/src/flow-edge/flow-edge.test.tsx

@@ -0,0 +1,76 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// @xyflow/react requires real layout/measurement — mock the engine and assert
+// the brand component's own output. Real rendering + a11y are covered by
+// Storybook interaction tests.
+vi.mock("@xyflow/react", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- a vi.mock factory is hoisted above imports; a lazy require avoids the TDZ a top-level import would hit
+  const React = require("react");
+  return {
+    BaseEdge: ({ id, path, style }: { id: string; path: string; style?: React.CSSProperties }) =>
+      React.createElement("svg", { "data-testid": "base-edge" }, [
+        React.createElement("path", { key: "p", d: path, id, style }),
+      ]),
+    getBezierPath: vi.fn(
+      ({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+      }: {
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+      }) => [`M${sourceX},${sourceY} C${targetX},${targetY}`, 0, 0],
+    ),
+    Position: { Top: "top", Bottom: "bottom", Left: "left", Right: "right" },
+  };
+});
+
+import { FlowEdge } from "./flow-edge";
+import type { EdgeProps } from "@xyflow/react";
+
+afterEach(cleanup);
+
+/** Minimal EdgeProps factory for FlowEdge. */
+function makeEdgeProps(overrides: Partial<EdgeProps> = {}): EdgeProps {
+  return {
+    id: "test-edge",
+    source: "node-a",
+    target: "node-b",
+    sourceX: 0,
+    sourceY: 0,
+    targetX: 100,
+    targetY: 100,
+    sourcePosition: "bottom" as EdgeProps["sourcePosition"],
+    targetPosition: "top" as EdgeProps["targetPosition"],
+    selected: false,
+    animated: false,
+    data: {},
+    ...overrides,
+  };
+}
+
+describe("FlowEdge", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<FlowEdge {...makeEdgeProps()} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it("renders a BaseEdge element", () => {
+    const { getByTestId } = render(<FlowEdge {...makeEdgeProps()} />);
+    expect(getByTestId("base-edge")).toBeInTheDocument();
+  });
+
+  it("calls getBezierPath with the correct coordinates", async () => {
+    const { getBezierPath } = await import("@xyflow/react");
+    render(
+      <FlowEdge {...makeEdgeProps({ sourceX: 10, sourceY: 20, targetX: 110, targetY: 120 })} />,
+    );
+    expect(getBezierPath).toHaveBeenCalledWith(
+      expect.objectContaining({ sourceX: 10, sourceY: 20, targetX: 110, targetY: 120 }),
+    );
+  });
+});

package/src/flow-edge/flow-edge.tsx

@@ -0,0 +1,34 @@
+import { BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
+
+/**
+ * Branded bezier edge using the `--flow-edge` token. Register it in
+ * `edgeTypes={{ brand: FlowEdge }}` and create edges with `type: "brand"`.
+ */
+export function FlowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+}: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+  return (
+    <BaseEdge
+      id={id}
+      path={edgePath}
+      markerEnd={markerEnd}
+      style={{ stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }}
+    />
+  );
+}

package/src/flow-edge/index.ts

@@ -0,0 +1 @@
+export { FlowEdge } from "./flow-edge";