From 02f71292efbaaa466b1517a09ccadb3fb4bfff09 Mon Sep 17 00:00:00 2001 From: nanda Date: Fri, 10 Apr 2026 10:39:18 -0700 Subject: [PATCH 1/4] feat(flow): disable panning/dragging and add code block test demo when canvas=false - Remove pan event handlers and grab cursor when canvas prop is false - Add FlowWithCodeBlockDemo to test page verifying CodeHighlighted works inside a Flow.Node --- .../src/components/demos/FlowDemo.tsx | 38 ++++++++++++++++++- .../src/pages/tests/flow.astro | 14 +++++++ packages/kumo/src/components/flow/diagram.tsx | 8 ++-- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx b/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx index a73019ba4c..7a62f7a89f 100644 --- a/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx +++ b/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx @@ -1,5 +1,6 @@ import { forwardRef, useState } from "react"; import { Flow } from "@cloudflare/kumo"; +import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code"; import { CaretDownIcon, SidebarSimpleIcon } from "@phosphor-icons/react"; const ExpandableNode = forwardRef< @@ -62,7 +63,9 @@ export function FlowParallelDemo() { export function FlowCustomContentDemo() { return ( - } /> + } + /> @@ -133,7 +136,9 @@ export function FlowAnchorDemo() { export function FlowCenteredDemo() { return ( - } /> + } + /> my-worker + + Receive Request + +
+ Handler +
+ + + } + /> + Return Response + + + ); +} + /** Flow diagram with expandable nodes in a parallel group */ export function FlowExpandableDemo() { return ( diff --git a/packages/kumo-docs-astro/src/pages/tests/flow.astro b/packages/kumo-docs-astro/src/pages/tests/flow.astro index 8f55e11005..71574ec895 100644 --- a/packages/kumo-docs-astro/src/pages/tests/flow.astro +++ b/packages/kumo-docs-astro/src/pages/tests/flow.astro @@ -13,6 +13,7 @@ import { FlowParallelNestedListDemo, FlowSequentialParallelDemo, FlowExpandableDemo, + FlowWithCodeBlockDemo, } from "../../components/demos/FlowDemo"; --- @@ -138,5 +139,18 @@ import { + +
+

+ FlowWithCodeBlockDemo +

+

+ Flow diagram with a code block node — verifies syntax highlighting works + inside a flow node (canvas disabled) +

+
+ +
+
diff --git a/packages/kumo/src/components/flow/diagram.tsx b/packages/kumo/src/components/flow/diagram.tsx index baf34de0bd..9d13753128 100644 --- a/packages/kumo/src/components/flow/diagram.tsx +++ b/packages/kumo/src/components/flow/diagram.tsx @@ -288,11 +288,11 @@ export function FlowDiagram({ paddingBottom: padding.y, paddingLeft: padding.x, paddingRight: padding.x, - cursor: canPan && !isPanning ? "grab" : undefined, + cursor: canvas && canPan && !isPanning ? "grab" : undefined, }} - onPanStart={handlePanStart} - onPan={handlePan} - onPanEnd={handlePanEnd} + onPanStart={canvas ? handlePanStart : undefined} + onPan={canvas ? handlePan : undefined} + onPanEnd={canvas ? handlePanEnd : undefined} > Date: Fri, 10 Apr 2026 10:40:28 -0700 Subject: [PATCH 2/4] chore: add changeset for flow canvas=false panning fix --- .changeset/flow-disable-canvas-panning.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/flow-disable-canvas-panning.md diff --git a/.changeset/flow-disable-canvas-panning.md b/.changeset/flow-disable-canvas-panning.md new file mode 100644 index 0000000000..1015e13ecf --- /dev/null +++ b/.changeset/flow-disable-canvas-panning.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +fix(flow): disable panning, drag cursors, and text-selection blocking when `canvas={false}` From ee30e732202e0036acca67dd1b1dcabc1b6deedd Mon Sep 17 00:00:00 2001 From: "ask-bonk[bot]" Date: Tue, 14 Apr 2026 18:38:30 +0000 Subject: [PATCH 3/4] Approved PR #390 with one minor nit. Co-authored-by: stritt --- .opencode/package-lock.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.opencode/package-lock.json b/.opencode/package-lock.json index 258c5c979c..abded7b2ac 100644 --- a/.opencode/package-lock.json +++ b/.opencode/package-lock.json @@ -5,16 +5,16 @@ "packages": { "": { "dependencies": { - "@opencode-ai/plugin": "1.4.0" + "@opencode-ai/plugin": "1.4.3" } }, "node_modules/@opencode-ai/plugin": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.0.tgz", - "integrity": "sha512-VFIff6LHp/RVaJdrK3EQ1ijx0K1tV5i1DY5YJ+pRqwC6trunPHbvqSN0GHSTZX39RdnSc+XuzCTZQCy1W2qNOg==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.3.tgz", + "integrity": "sha512-Ob/3tVSIeuMRJBr2O23RtrnC5djRe01Lglx+TwGEmjrH9yDBJ2tftegYLnNEjRoMuzITgq9LD8168p4pzv+U/A==", "license": "MIT", "dependencies": { - "@opencode-ai/sdk": "1.4.0", + "@opencode-ai/sdk": "1.4.3", "zod": "4.1.8" }, "peerDependencies": { @@ -31,9 +31,9 @@ } }, "node_modules/@opencode-ai/sdk": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.0.tgz", - "integrity": "sha512-mfa3MzhqNM+Az4bgPDDXL3NdG+aYOHClXmT6/4qLxf2ulyfPpMNHqb9Dfmo4D8UfmrDsPuJHmbune73/nUQnuw==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.3.tgz", + "integrity": "sha512-X0CAVbwoGAjTY2iecpWkx2B+GAa2jSaQKYpJ+xILopeF/OGKZUN15mjqci+L7cEuwLHV5wk3x2TStUOVCa5p0A==", "license": "MIT", "dependencies": { "cross-spawn": "7.0.6" From 659f12da45d438afd8f9b62b13d26126313ccb99 Mon Sep 17 00:00:00 2001 From: Nanda Syahrasyad Date: Tue, 14 Apr 2026 13:25:52 -0700 Subject: [PATCH 4/4] chore: Update packages/kumo-docs-astro/src/pages/tests/flow.astro Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --- packages/kumo-docs-astro/src/pages/tests/flow.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kumo-docs-astro/src/pages/tests/flow.astro b/packages/kumo-docs-astro/src/pages/tests/flow.astro index b03127eaab..1f5e91f7ec 100644 --- a/packages/kumo-docs-astro/src/pages/tests/flow.astro +++ b/packages/kumo-docs-astro/src/pages/tests/flow.astro @@ -148,7 +148,7 @@ import { Flow diagram with a code block node — verifies syntax highlighting works inside a flow node (canvas disabled)

-
+