fix(flow): render connectors in Firefox

[geoquant]

Summary

Fix Flow connector rendering in Firefox by emitting valid SVG path strings for rounded connector segments.

The previous implementation nested arrays in the command list, which serialized SVG path commands with commas between command tokens. Chromium tolerated this, but Firefox stopped rendering the curved connector paths after the invalid comma boundary.

This also sets overflow="visible" on the root connector SVG as an SVG presentation attribute, matching the existing Tailwind class in a Firefox-safe way.

Before / After

Firefox before

Firefox after

Testing

• pnpm --filter @cloudflare/kumo exec vitest run --project=unit src/components/flow/flow.test.tsx

• pnpm --filter @cloudflare/kumo exec vitest --config=vitest.browser.config.ts run src/components/flow/flow.browser.test.tsx

• pnpm --filter @cloudflare/kumo exec oxlint src/components/flow/connectors.tsx src/components/flow/flow.test.tsx

• Manual Playwright verification against http://localhost:4323/components/flow in Firefox and Chromium:

  • Firefox: pathCount: 6, commaCount: 0, curvedHeights: [64, 64, 120, 120]
  • Chromium: pathCount: 6, commaCount: 0, curvedHeights: [54, 54, 108, 108]

• Reviews

• bonk has reviewed the change

• automated review not possible because: this is a targeted browser rendering fix verified locally in Firefox and Chromium

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows: local Firefox and Chromium verification on the Flow docs page

• Additional testing not necessary because: targeted SVG path serialization change covered by unit and browser tests

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@553

commit: 42351ee

[github-actions]

Docs Preview

View docs preview

Commit: 42351ee

[github-actions]

Visual Regression Report — 0 changed, 11 unchanged

No visual changes detected.

[geoquant]

/bonk

[ask-bonk]

PR #553 Summary

Title: fix(flow): render connectors in Firefox
Author: geoquant
Status: Open

What changed

This PR fixes a bug where Flow connector SVG paths were invisible in Firefox.

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

  • Fixed invalid SVG path serialization by replacing nested array spread ([...array]) with the spread operator (...array) inside the commands array. Previously, nested arrays caused .join(" ") to insert commas into the path d attribute, which Firefox rejects.
  • Added overflow="visible" as an SVG presentation attribute on the root <svg> element (in addition to the existing Tailwind class) so Firefox correctly handles overflow.

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

  • Added a unit test asserting that createRoundedPath produces a valid SVG path string without commas.

• .changeset/fuzzy-flows-bow.md

  • Minor patch changeset for @cloudflare/kumo.

Testing

• New unit test verifies path serialization.
• Manual verification in Firefox and Chromium confirms connectors render correctly.
• Visual regression showed 11 unrelated diffs (Button, Dialog, Select), not the Flow component itself.

github run