fix(flow): disable panning/dragging when canvas=false

[nandanmen]

Fixes a bug where text inside a flow node is not selectable even when canvas is set to false in the parent component (therefore disabling all dragging features).

Changes

• When canvas={false}, pan event handlers (onPanStart, onPan, onPanEnd) are no longer attached to the motion wrapper, so dragging/panning is fully inert
• The grab/grabbing cursor and userSelect: none body mutations are suppressed — canvas && canPan && !isPanning guards the cursor style, and the handlers that set body styles are never called
• Adds FlowWithCodeBlockDemo to the /tests/flow test page: a canvas={false} flow where one node embeds a CodeHighlighted block, verifying syntax highlighting works inside a flow node and that text selection is not blocked

[pkg-pr-new]

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

commit: 4b3bb9d

[github-actions]

Docs Preview

View docs preview

Commit: 4b3bb9d

[github-actions]

Visual Regression Report — 21 changed, 16 unchanged

21 screenshot(s) with visual changes:

Button / Basic

288 px (0.28%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

0 px (0%) changed

Before	After	Diff

Button / With Icon

0 px (0%) changed

Before	After	Diff

Button / Icon Only

0 px (0%) changed

Before	After	Diff

Button / Loading State

2 px (0%) changed

Before	After	Diff

Button / Title

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Alert

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Confirmation

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

378,593 px (1.89%) changed

Before	After	Diff

Select / Select Basic

530 px (0.52%) changed

Before	After	Diff

Select / Select Sizes

0 px (0%) changed

Before	After	Diff

Select / Select Placeholder

0 px (0%) changed

Before	After	Diff

Select / Select With Tooltip

0 px (0%) changed

Before	After	Diff

Select / Select Custom Rendering

414 px (0.41%) changed

Before	After	Diff

Select / Select Loading

1,369 px (0.64%) changed

Before	After	Diff

Select / Select Multiple

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

0 px (0%) changed

Before	After	Diff

Select / Select Grouped

346 px (0.34%) changed

Before	After	Diff

Select / Select Long List

1,428 px (1.21%) changed

Before	After	Diff

Select (Open)

605,042 px (2.53%) changed

Before	After	Diff

16 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Sizes
• Button / Disabled State
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Select / Select Without Label
• Select / Select With Field
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk what say you?

[ask-bonk]

UnknownError: ProviderInitError

github run

[ask-bonk]

@mattrothenberg Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

[stritt]

/bigbonk review code

[ask-bonk]

Clean, minimal fix. The core change in diagram.tsx is correct — guarding the pan handlers and cursor with the canvas prop is the right approach and consistent with how the existing useEffect hooks already early-return when canvas is false.

One minor inconsistency in the test page, noted below.

[ask-bonk]

Review submitted. Here's a summary:

Approved the PR with one minor suggestion.

Core fix (diagram.tsx): The 4-line change is correct and minimal. It guards onPanStart/onPan/onPanEnd and the grab cursor behind the canvas prop. This is consistent with the existing pattern — all four useEffect hooks in the component already early-return with if (!canvas) return. The fix ensures that when canvas={false}, pan handlers are never attached to the motion wrapper, so text selection and other native interactions work as expected.

Demo + test page: The FlowWithCodeBlockDemo is a good addition that exercises the canvas={false} path with embedded code highlighting.

One nit: The new test section uses border-kumo-line while every other section on the page uses border-kumo-hairline — suggested a fix for consistency.

github run