feat(flow): add vertical orientation

[mattrothenberg]

Adds support for orientation="vertical" on the Flow component, laying nodes out top-to-bottom instead of the default left-to-right.

The connector path routing and parallel-branch geometry already accounted for the vertical axis; this is the small remaining wiring in FlowNodeList's top-level connector computation and node-list layout so the prop is fully functional. The align prop now controls cross-axis alignment in both orientations (vertical alignment when horizontal, horizontal alignment when vertical).

Also adds vertical demos to the docs, a Vertical Orientation example + orientation props-table entry on the component page, and unit tests.

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: small, self-contained UI change; requesting standard human review
• Tests
  • Tests included/updated

[pkg-pr-new]

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

commit: a20bbc4

[github-actions]

Docs Preview

View docs preview

Commit: 7df2083

[mattrothenberg]

/bonk please review and approve

[ask-bonk]

bonk review: approved

Clean, minimal change that wires up the already-existing vertical connector/branch logic. I verified all six changed files:

• Changeset – correct minor bump for a new feature
• diagram.tsx – orientation prop flows through context; connector computation correctly switches between horizontal (right edge → left edge) and vertical (bottom center → top center); FlowNodeList applies flex-col + cross-axis alignment for vertical
• flow.test.tsx – adds coverage verifying flex-col is applied when orientation="vertical"
• Demos – FlowVerticalDemo and FlowVerticalParallelDemo follow the *Demo naming convention and are registered in both the MDX page and the test Astro page
• Docs (flow.mdx) – new vertical examples are well-placed, and the manual props table is updated with orientation (consistent with the existing hand-written tables on this page)

No blockers. LGTM.

github run

[github-actions]

Visual Regression Report — 23 changed, 18 unchanged

23 screenshot(s) with visual changes:

Button / Variant: Secondary Destructive

873 px (0.86%) changed

Before	After	Diff

Button / Loading State

26 px (0.03%) changed

Before	After	Diff

Dialog / Dialog Basic

396 px (0.39%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,303 px (2.27%) changed

Before	After	Diff

Dialog / Dialog Alert

3,222 px (3.17%) changed

Before	After	Diff

Dialog / Dialog Confirmation

853 px (0.84%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

500 px (0.49%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

1,048 px (1.03%) changed

Before	After	Diff

Select / Select Sizes

2,860 px (1.54%) changed

Before	After	Diff

Select / Select Without Label

721 px (0.71%) changed

Before	After	Diff

Select / Select With Description

2,099 px (1.77%) changed

Before	After	Diff

Select / Select With Tooltip

1,115 px (1.1%) changed

Before	After	Diff

Select / Select Custom Rendering

973 px (0.96%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

1,563 px (1.54%) changed

Before	After	Diff

Select / Select Complex

1,279 px (1.08%) changed

Before	After	Diff

Select / Select Disabled Options

1,476 px (1.45%) changed

Before	After	Diff

Select / Select Disabled Items

793 px (0.78%) changed

Before	After	Diff

Select / Select Grouped

813 px (0.8%) changed

Before	After	Diff

Select / Select Grouped With Disabled

1,414 px (1.39%) changed

Before	After	Diff

Select / Select Long List

1,967 px (1.66%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

18 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Custom Max Width
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Select / Select With Error
• Select / Select Placeholder

---

Generated by Kumo Visual Regression