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

.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}`

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 (
     <Flow>
-      <Flow.Node render={<li className="rounded-full size-4 bg-kumo-hairline" />} />
+      <Flow.Node
+        render={<li className="rounded-full size-4 bg-kumo-hairline" />}
+      />
       <Flow.Node
         render={
           <li className="bg-kumo-contrast text-kumo-inverse rounded-lg font-medium py-2 px-3">
@@ -133,7 +136,9 @@ export function FlowAnchorDemo() {
 export function FlowCenteredDemo() {
   return (
     <Flow align="center">
-      <Flow.Node render={<li className="rounded-full size-4 bg-kumo-hairline" />} />
+      <Flow.Node
+        render={<li className="rounded-full size-4 bg-kumo-hairline" />}
+      />
       <Flow.Node>my-worker</Flow.Node>
       <Flow.Node
         render={
@@ -303,6 +308,35 @@ export function FlowSequentialParallelDemo() {
   );
 }
 
+/** Flow diagram with a code block node to verify syntax highlighting works */
+export function FlowWithCodeBlockDemo() {
+  return (
+    <ShikiProvider engine="javascript" languages={["typescript", "bash"]}>
+      <Flow canvas={false}>
+        <Flow.Node>Receive Request</Flow.Node>
+        <Flow.Node
+          render={
+            <li className="rounded-lg ring ring-kumo-line bg-kumo-base overflow-hidden min-w-64">
+              <div className="px-3 py-2 text-sm font-medium text-kumo-default border-b border-kumo-line">
+                Handler
+              </div>
+              <CodeHighlighted
+                code={`export default {
+  async fetch(req: Request) {
+    return new Response("ok");
+  },
+}`}
+                lang="typescript"
+              />
+            </li>
+          }
+        />
+        <Flow.Node>Return Response</Flow.Node>
+      </Flow>
+    </ShikiProvider>
+  );
+}
+
 /** Flow diagram with expandable nodes in a parallel group */
 export function FlowExpandableDemo() {
   return (

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 {
         <FlowExpandableDemo client:visible />
       </div>
     </section>
+
+    <section class="space-y-4">
+      <h2 class="text-xl font-semibold text-kumo-default">
+        FlowWithCodeBlockDemo
+      </h2>
+      <p class="text-kumo-subtle">
+        Flow diagram with a code block node — verifies syntax highlighting works
+        inside a flow node (canvas disabled)
+      </p>
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+        <FlowWithCodeBlockDemo client:visible />
+      </div>
+    </section>
   </div>
 </BaseLayout>

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}
       >
         <motion.div
           data-testid="flow-contents"