fix(flow): render connectors in Firefox (#553)

Author: geoquant

.changeset/fuzzy-flows-bow.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix Flow connector rendering in Firefox by emitting valid SVG path data without array commas and setting visible overflow on the SVG element attribute.

packages/kumo/src/components/flow/connectors.tsx

@@ -98,7 +98,7 @@ export function createRoundedPath(
 
     const commands = [
       `M ${x1} ${y1}`,
-      isBottom ? [...bottomCurveCommands] : [...topCurveCommands],
+      ...(isBottom ? bottomCurveCommands : topCurveCommands),
       `L ${pathEndX} ${y2}`,
     ];
 
@@ -144,7 +144,7 @@ export function createRoundedPath(
 
   const commands = [
     `M ${x1} ${y1}`, // Move the cursor to the starting point
-    isBottom ? [...bottomCurveCommands] : [...topCurveCommands],
+    ...(isBottom ? bottomCurveCommands : topCurveCommands),
     `L ${x2} ${pathEndY}`, // Draw the final line to the end point
   ];
 
@@ -158,6 +158,7 @@ export const Connectors = forwardRef<SVGSVGElement, ConnectorsProps>(
       <svg
         width="100%"
         height="100%"
+        overflow="visible"
         aria-hidden="true"
         className="text-kumo-inactive overflow-visible"
         ref={svgRef}

packages/kumo/src/components/flow/flow.test.tsx

@@ -1,13 +1,26 @@
 import { describe, expect, it } from "vitest";
 import { act, render, screen } from "@testing-library/react";
 import { useState, useEffect } from "react";
+import { createRoundedPath } from "./connectors";
 import { Flow } from "./index";
 
 function shouldHaveIndex(element: Element, index: number) {
   expect(element.getAttribute("data-node-index")).toBe(String(index));
 }
 
 describe("Flow", () => {
+  describe("connector paths", () => {
+    it("serializes SVG path commands without array commas for Firefox", () => {
+      const path = createRoundedPath(
+        { x1: 0, y1: 17, x2: 56, y2: 71 },
+        { orientation: "horizontal", single: false },
+      );
+
+      expect(path).toBe("M 0 17 L 32 17 L 32 63 Q 32 71 40 71 L 48 71");
+      expect(path).not.toContain(",");
+    });
+  });
+
   describe("Compound component API", () => {
     it("exposes Node sub-component", () => {
       expect(Flow.Node).toBeDefined();