@elabs-ai/components-flow 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-flow",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@xyflow/react": "^12.11.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0"
+    "@elabs-ai/components-tokens": "4.2.0",
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -52,10 +52,10 @@
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
     "@elabs-ai/components-eslint-config": "0.1.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0",
-    "@elabs-ai/components-icons": "4.0.0",
-    "@elabs-ai/components-typescript-config": "0.1.0"
+    "@elabs-ai/components-icons": "4.2.0",
+    "@elabs-ai/components-tokens": "4.2.0",
+    "@elabs-ai/components-typescript-config": "0.1.0",
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "scripts": {
     "build": "tsup",

package/src/__contract__/inspector-panel.contract.test.tsx

@@ -0,0 +1,49 @@
+// GENERATED by scripts/gen-contract-tests.mjs — do not edit; re-run the generator instead.
+/**
+ * Contract probe for InspectorPanel (`packages/flow/src/inspector-panel/inspector-panel.tsx`), derived from its
+ * `Default` story (packages/flow/src/inspector-panel/inspector-panel.stories.tsx). See scripts/gen-contract-tests.mjs.
+ */
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { createRef } from "react";
+import * as stories from "../inspector-panel/inspector-panel.stories";
+import knownFailuresJson from "../../../../scripts/check/contract-known-failures.json";
+
+afterEach(cleanup);
+
+// Every component here has its own prop/ref/element shape; a generated probe
+// stays generic on purpose (loosely typed, not untyped — see
+// scripts/gen-contract-tests.mjs) rather than re-deriving each one.
+const KNOWN_FAILURES: Record<string, string> = knownFailuresJson;
+const meta = stories.default as { component?: unknown; args?: Record<string, unknown> };
+const Default = (stories as { Default?: { args?: Record<string, unknown> } }).Default;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- probe target; see comment above
+const Component = meta.component as any;
+const args = { ...(meta.args ?? {}), ...(Default?.args ?? {}) };
+const isForwardRefComponent = Component?.["$$typeof"] === Symbol.for("react.forward_ref");
+
+/** Wrap a known, tracked failure in `it.fails` so fixing it forces the key's removal. */
+function contractIt(assertion: string, name: string, fn: () => void) {
+  const key = `flow-inspectorpanel--default|jsdom|jsdom|${assertion}`;
+  const reason = KNOWN_FAILURES[key];
+  if (reason) return it.fails(`${name} (known failure: ${reason})`, fn);
+  return it(name, fn);
+}
+
+describe("InspectorPanel contract", () => {
+  it.skipIf(!isForwardRefComponent)("forwards a ref to a DOM element", () => {
+    const ref = createRef<Element>();
+    render(<Component {...args} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(Element);
+  });
+
+  contractIt("className", "merges a caller className onto the root", () => {
+    const { container } = render(<Component {...args} className="contract-probe" />);
+    expect(container.querySelector(".contract-probe")).not.toBeNull();
+  });
+
+  contractIt("data-slot", 'exposes data-slot="inspector-panel" on its root', () => {
+    const { container } = render(<Component {...args} />);
+    expect(container.querySelector('[data-slot="inspector-panel"]')).not.toBeNull();
+  });
+});

package/src/__contract__/legend.contract.test.tsx

@@ -0,0 +1,49 @@
+// GENERATED by scripts/gen-contract-tests.mjs — do not edit; re-run the generator instead.
+/**
+ * Contract probe for Legend (`packages/flow/src/legend/legend.tsx`), derived from its
+ * `Default` story (packages/flow/src/legend/legend.stories.tsx). See scripts/gen-contract-tests.mjs.
+ */
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { createRef } from "react";
+import * as stories from "../legend/legend.stories";
+import knownFailuresJson from "../../../../scripts/check/contract-known-failures.json";
+
+afterEach(cleanup);
+
+// Every component here has its own prop/ref/element shape; a generated probe
+// stays generic on purpose (loosely typed, not untyped — see
+// scripts/gen-contract-tests.mjs) rather than re-deriving each one.
+const KNOWN_FAILURES: Record<string, string> = knownFailuresJson;
+const meta = stories.default as { component?: unknown; args?: Record<string, unknown> };
+const Default = (stories as { Default?: { args?: Record<string, unknown> } }).Default;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- probe target; see comment above
+const Component = meta.component as any;
+const args = { ...(meta.args ?? {}), ...(Default?.args ?? {}) };
+const isForwardRefComponent = Component?.["$$typeof"] === Symbol.for("react.forward_ref");
+
+/** Wrap a known, tracked failure in `it.fails` so fixing it forces the key's removal. */
+function contractIt(assertion: string, name: string, fn: () => void) {
+  const key = `flow-legend--default|jsdom|jsdom|${assertion}`;
+  const reason = KNOWN_FAILURES[key];
+  if (reason) return it.fails(`${name} (known failure: ${reason})`, fn);
+  return it(name, fn);
+}
+
+describe("Legend contract", () => {
+  it.skipIf(!isForwardRefComponent)("forwards a ref to a DOM element", () => {
+    const ref = createRef<Element>();
+    render(<Component {...args} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(Element);
+  });
+
+  contractIt("className", "merges a caller className onto the root", () => {
+    const { container } = render(<Component {...args} className="contract-probe" />);
+    expect(container.querySelector(".contract-probe")).not.toBeNull();
+  });
+
+  contractIt("data-slot", 'exposes data-slot="legend" on its root', () => {
+    const { container } = render(<Component {...args} />);
+    expect(container.querySelector('[data-slot="legend"]')).not.toBeNull();
+  });
+});

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

@@ -1,16 +1,21 @@
-import { type ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import {
   Background,
   ReactFlow,
   ReactFlowProvider,
+  useNodesInitialized,
+  useReactFlow,
+  useStoreApi,
   type AriaLabelConfig,
   type Edge,
+  type FitViewOptions,
   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";
+import { useMeasuredNodes } from "./use-measured-nodes";
 
 export interface CanvasShellProps<
   NodeType extends Node = Node,
@@ -27,6 +32,26 @@ export interface CanvasShellProps<
    * use the exported `useHelperLines` + `<HelperLines>` directly.
    */
   helperLines?: boolean;
+  /**
+   * Re-fit the viewport whenever this value changes.
+   *
+   * React Flow's own `fitView` prop fits ONCE, as soon as the nodes are first measured,
+   * and then never again. A canvas whose positions arrive AFTER that first paint —
+   * anything laid out asynchronously, e.g. a debounced `layoutFlow` pass — therefore gets
+   * fitted to the pre-layout positions (typically every node still stacked at the origin)
+   * and stays there. Measured on the process map: the viewport pinned at React Flow's
+   * `maxZoom` of 2 with 2 of 11 nodes on screen, while the layout underneath was correct
+   * the whole time.
+   *
+   * Pass the key the layout is cached on (structure + direction), NOT something that
+   * changes on every render and not a metric: a re-fit is a viewport jump, so it must
+   * happen when the picture genuinely moved and never while the reader is reading. The
+   * fit waits for `useNodesInitialized`, so it measures real node boxes rather than
+   * fitting a degenerate bounding box a second time.
+   */
+  fitViewKey?: string | number;
+  /** Options for the {@link fitViewKey} re-fit. Ignored without one. */
+  fitViewKeyOptions?: FitViewOptions;
   /** Overlays rendered inside the flow (ZoomControls, Legend, Panels). */
   children?: ReactNode;
   className?: string;
@@ -91,23 +116,113 @@ function CanvasShellBase<NodeType extends Node, EdgeType extends Edge>({
   children,
   className,
   ariaLabelConfig,
+  nodes,
+  onNodesChange,
+  fitViewKey,
+  fitViewKeyOptions,
   ...props
 }: CanvasShellInnerProps<NodeType, EdgeType>) {
+  const measured = useMeasuredNodes<NodeType>(nodes, onNodesChange);
   return (
     <div className={cn("h-full w-full bg-canvas", className)}>
       <ReactFlow
         fitView
         proOptions={{ hideAttribution: true }}
         ariaLabelConfig={{ ...DEFAULT_ARIA_LABEL_CONFIG, ...ariaLabelConfig }}
+        nodes={measured.nodes}
+        onNodesChange={measured.onNodesChange}
         {...props}
       >
         {background ? <Background gap={20} size={1} color="var(--canvas-grid)" /> : null}
+        {fitViewKey === undefined ? null : (
+          <FitViewOnKey fitViewKey={fitViewKey} options={fitViewKeyOptions} />
+        )}
         {children}
       </ReactFlow>
     </div>
   );
 }
 
+/**
+ * Re-fits the viewport when `fitViewKey` changes and the nodes have been measured.
+ *
+ * Rendered as a CHILD of `<ReactFlow>` because `useReactFlow`/`useNodesInitialized` need
+ * the flow context, which only exists below it. It renders nothing.
+ */
+function FitViewOnKey({
+  fitViewKey,
+  options,
+}: {
+  fitViewKey: string | number;
+  options?: FitViewOptions;
+}) {
+  const { fitView, getNodes, getNodesBounds, setViewport } = useReactFlow();
+  const store = useStoreApi();
+  const nodesInitialized = useNodesInitialized();
+  useEffect(() => {
+    if (!nodesInitialized) return;
+    void fitView(options).then(() =>
+      anchorToStartWhenClamped(store, setViewport, getNodesBounds, getNodes(), options),
+    );
+    // `options` is deliberately absent: an inline object literal would re-fit on every
+    // render, which is a viewport jump under the reader's cursor. The key is the trigger.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fitViewKey, nodesInitialized, fitView, getNodes, getNodesBounds, setViewport, store]);
+  return null;
+}
+
+/**
+ * After a fit that could NOT show everything, show the BEGINNING rather than the middle.
+ *
+ * `fitView` always centres. That is right when the content fits — and wrong the moment a
+ * `minZoom` floor stops it from shrinking far enough, because centring a graph that
+ * overflows puts its first rank off the top of the pane and opens the canvas on the
+ * middle of a process nobody has read the start of yet. Every layout this shell is used
+ * with runs from an origin (top for `TB`, left for `LR`), so the content's own top-left
+ * corner IS the beginning, in both.
+ *
+ * Applied PER AXIS, and only to an axis that actually overflows: a tall graph in a wide
+ * pane is pinned to the top and stays horizontally centred, which is what a reader
+ * expects. A canvas whose content fits is left exactly as `fitView` left it.
+ */
+function anchorToStartWhenClamped(
+  store: ReturnType<typeof useStoreApi>,
+  setViewport: ReturnType<typeof useReactFlow>["setViewport"],
+  // The HOOK's `getNodesBounds`, never the top-level export: the standalone one warns in
+  // development when it is handed no `nodeLookup` ("Please use `getNodesBounds` from
+  // `useReactFlow`…") and measures a parent's own `position` instead of resolving a
+  // nested node's absolute one, so a keyed re-fit on a canvas with sub-flows anchors to
+  // the wrong corner.
+  getNodesBounds: ReturnType<typeof useReactFlow>["getNodesBounds"],
+  nodes: Node[],
+  options: FitViewOptions | undefined,
+): void {
+  if (nodes.length === 0) return;
+  const { width, height, transform, panZoom } = store.getState();
+  const [x, y, zoom] = transform;
+  if (!width || !height || !zoom) return;
+
+  const bounds = getNodesBounds(nodes);
+  // The same fraction-of-the-pane padding `fitView` itself applies, so the anchored
+  // corner sits exactly where a fitted one would.
+  const padding = typeof options?.padding === "number" ? options.padding : 0.1;
+  const padX = width * padding;
+  const padY = height * padding;
+
+  const overflowsX = bounds.width * zoom > width - padX * 2 + 1;
+  const overflowsY = bounds.height * zoom > height - padY * 2 + 1;
+  if (!overflowsX && !overflowsY) return;
+
+  const next = {
+    x: overflowsX ? padX - bounds.x * zoom : x,
+    y: overflowsY ? padY - bounds.y * zoom : y,
+    zoom,
+  };
+  // `setViewport` is a no-op before the pan/zoom instance exists (the very first commit).
+  if (!panZoom) return;
+  void setViewport(next);
+}
+
 function CanvasShellWithHelperLines<NodeType extends Node, EdgeType extends Edge>({
   onNodesChange,
   children,

package/src/canvas-shell/use-measured-nodes.ts

@@ -0,0 +1,101 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { Node, NodeChange, OnNodesChange } from "@xyflow/react";
+
+/**
+ * Feed React Flow's own measurements back onto the node objects a CONTROLLED canvas
+ * renders.
+ *
+ * React Flow measures every node in the DOM and keeps the result on its INTERNAL node
+ * record; the objects the consumer passed in `nodes` are never touched. That is fine for
+ * the renderer — edges and the viewport read the internal record — but three shipped
+ * surfaces read `node.measured` off the USER object instead, and each of them silently
+ * degrades when it is absent:
+ *
+ * - **`<MiniMap>`** bails out per node in `nodeHasDimensions(internals.userNode)` and
+ *   renders NOTHING. Measured: a `CanvasShell` with 11 nodes drew 0 minimap rects while
+ *   the minimap's own `viewBox` (computed from the internal records) was correct — a
+ *   blank white panel, in the flow package's own `FlowMiniMap` story as much as in a
+ *   composing package's.
+ * - **`layoutFlow`** falls back to `DEFAULT_NODE_WIDTH`/`DEFAULT_NODE_HEIGHT`
+ *   (172×40) and hands dagre a node half the height of the real card, so ranks are laid
+ *   out too close together and edge labels collide with the nodes below them.
+ * - Any consumer arithmetic over `node.measured` — the same trap, one layer out.
+ *
+ * React Flow's own examples never hit this because they drive the canvas with
+ * `useNodesState`, whose `onNodesChange` applies the `dimensions` change back into the
+ * array. A canvas driven from derived data (a discovered process graph, a layout hook)
+ * legitimately has no such setter, and gets a half-working canvas with no error. This
+ * hook closes that gap centrally so no consumer has to know about it: it remembers the
+ * dimensions React Flow reports and merges them into the nodes on the way past.
+ *
+ * It is deliberately a NO-OP in the two cases where React Flow already does the right
+ * thing: an UNCONTROLLED canvas (`defaultNodes`, where `hasDefaultNodes` makes React Flow
+ * apply the changes itself) never reaches here because `nodes` is undefined, and a
+ * controlled canvas whose consumer already applies dimension changes finds `measured`
+ * equal to the cached value and returns the very same array identity.
+ */
+export interface MeasuredNodesResult<NodeType extends Node> {
+  /** `nodes`, with React Flow's measured dimensions merged in. Same identity when nothing changed. */
+  nodes: NodeType[] | undefined;
+  /** The handler to give React Flow — records dimensions, then calls the consumer's own. */
+  onNodesChange: OnNodesChange<NodeType> | undefined;
+}
+
+export function useMeasuredNodes<NodeType extends Node>(
+  nodes: NodeType[] | undefined,
+  onNodesChange: OnNodesChange<NodeType> | undefined,
+): MeasuredNodesResult<NodeType> {
+  const measured = useRef(new Map<string, { width: number; height: number }>());
+  // A version counter, not the map itself: the map is a ref so the change handler stays
+  // stable, and this is what tells the memo below that its contents moved.
+  const [version, setVersion] = useState(0);
+
+  const handleNodesChange = useCallback<OnNodesChange<NodeType>>(
+    (changes: NodeChange<NodeType>[]) => {
+      let touched = false;
+      for (const change of changes) {
+        if (change.type !== "dimensions" || !change.dimensions) continue;
+        const previous = measured.current.get(change.id);
+        if (
+          previous?.width === change.dimensions.width &&
+          previous.height === change.dimensions.height
+        ) {
+          continue;
+        }
+        measured.current.set(change.id, { ...change.dimensions });
+        touched = true;
+      }
+      onNodesChange?.(changes);
+      if (touched) setVersion((n) => n + 1);
+    },
+    [onNodesChange],
+  );
+
+  const mergedNodes = useMemo(() => {
+    if (!nodes) return nodes;
+    // `version` is read so this recomputes when the ref's contents move; the map itself
+    // is intentionally not a dependency (a ref never changes identity).
+    void version;
+    let changed = false;
+    const next = nodes.map((node) => {
+      const dimensions = measured.current.get(node.id);
+      if (!dimensions) return node;
+      if (
+        node.measured?.width === dimensions.width &&
+        node.measured?.height === dimensions.height
+      ) {
+        return node;
+      }
+      changed = true;
+      return { ...node, measured: dimensions };
+    });
+    return changed ? next : nodes;
+  }, [nodes, version]);
+
+  return {
+    nodes: mergedNodes,
+    // Only take the handler over when there is something to measure INTO. An uncontrolled
+    // canvas is left exactly as it was.
+    onNodesChange: nodes ? handleNodesChange : onNodesChange,
+  };
+}

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

@@ -2,10 +2,12 @@ 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 { expect, waitFor } from "storybook/test";
 import { CanvasShell } from "../canvas-shell";
 import { FlowNode, type BrandFlowNode } from "../flow-node";
 import { useFlowLayout } from "../flow-layout";
 import { ZoomControls } from "../zoom-controls";
+import { edgePaths, endpointsOffHandles } from "../testing/edge-anchors";
 import { FlowButtonEdge, type BrandFlowButtonEdge } from "./flow-button-edge";
 
 const nodeTypes = { brand: FlowNode };
@@ -20,6 +22,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** Every edge must terminate ON a handle dot — see `testing/edge-anchors`. */
+async function expectAnchoredToHandles(canvasElement: HTMLElement, edgeCount: number) {
+  await waitFor(() => {
+    expect(edgePaths(canvasElement, "flow-button-edge")).toHaveLength(edgeCount);
+    expect(endpointsOffHandles(canvasElement, "flow-button-edge")).toEqual([]);
+  });
+}
+
 /** Two nodes joined by a button edge — hover/focus the "+" to see it. */
 export const Default: Story = {
   render: () => {
@@ -46,6 +56,9 @@ export const Default: Story = {
       </div>
     );
   },
+  play: async ({ canvasElement }) => {
+    await expectAnchoredToHandles(canvasElement, 1);
+  },
 };
 
 // ---------------------------------------------------------------------------

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

@@ -1,11 +1,6 @@
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  getBezierPath,
-  type Edge,
-  type EdgeProps,
-} from "@xyflow/react";
+import { EdgeLabelRenderer, getBezierPath, type Edge, type EdgeProps } from "@xyflow/react";
 import { Plus } from "lucide-react";
+import { FlowEdgePath } from "../flow-edge-path";
 
 export interface FlowButtonEdgeData extends Record<string, unknown> {
   /** aria-label for the insert button. @default "Insert node on edge" */
@@ -51,11 +46,14 @@ export function FlowButtonEdge({
 
   return (
     <>
-      <BaseEdge
+      <FlowEdgePath
         id={id}
         path={edgePath}
         markerEnd={markerEnd}
-        style={{ stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }}
+        data-slot="flow-button-edge"
+        stroke="var(--flow-edge)"
+        strokeWidth={1.5}
+        style={style}
       />
       <EdgeLabelRenderer>
         <div
@@ -69,7 +67,7 @@ export function FlowButtonEdge({
             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"
+            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-ring"
           >
             <Plus className="size-3" aria-hidden="true" />
           </button>

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import "@xyflow/react/dist/style.css";
 import { type Edge } from "@xyflow/react";
+import { expect, waitFor } from "storybook/test";
 import { CanvasShell } from "../canvas-shell";
 import { FlowNode, type BrandFlowNode } from "../flow-node";
+import { edgePaths, endpointsOffHandles } from "../testing/edge-anchors";
 import { FlowEdge } from "./flow-edge";
 
 const nodeTypes = { brand: FlowNode };
@@ -17,6 +19,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Every edge must terminate ON a handle dot — see `testing/edge-anchors`. React
+ * Flow's native anchors land on the dot's outer rim; the assertion allows
+ * anywhere on the dot, and fails on a line that meets a bare stretch of border.
+ */
+async function expectAnchoredToHandles(canvasElement: HTMLElement, edgeCount: number) {
+  await waitFor(() => {
+    expect(edgePaths(canvasElement, "flow-edge")).toHaveLength(edgeCount);
+    expect(endpointsOffHandles(canvasElement, "flow-edge")).toEqual([]);
+  });
+}
+
 /** Two nodes connected by a single branded bezier edge. */
 export const Default: Story = {
   render: () => {
@@ -41,6 +55,9 @@ export const Default: Story = {
       </div>
     );
   },
+  play: async ({ canvasElement }) => {
+    await expectAnchoredToHandles(canvasElement, 1);
+  },
 };
 
 /** A small pipeline with multiple branded edges. */
@@ -76,4 +93,7 @@ export const Pipeline: Story = {
       </div>
     );
   },
+  play: async ({ canvasElement }) => {
+    await expectAnchoredToHandles(canvasElement, 2);
+  },
 };

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

@@ -1,8 +1,12 @@
-import { BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
+import { getBezierPath, type EdgeProps } from "@xyflow/react";
+import { FlowEdgePath } from "../flow-edge-path";
 
 /**
  * Branded bezier edge using the `--flow-edge` token. Register it in
  * `edgeTypes={{ brand: FlowEdge }}` and create edges with `type: "brand"`.
+ *
+ * Drawn through `FlowEdgePath`, so it carries the shared keyboard focus
+ * indicator (#286) — never reach for React Flow's `BaseEdge` directly.
  */
 export function FlowEdge({
   id,
@@ -24,11 +28,14 @@ export function FlowEdge({
     targetPosition,
   });
   return (
-    <BaseEdge
+    <FlowEdgePath
       id={id}
       path={edgePath}
       markerEnd={markerEnd}
-      style={{ stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }}
+      data-slot="flow-edge"
+      stroke="var(--flow-edge)"
+      strokeWidth={1.5}
+      style={style}
     />
   );
 }