when multiple canvas
+ * instances need to coexist; for single-canvas pages the provider is
+ * included here.
+ */
+
+import "@xyflow/react/dist/style.css";
+import {
+ Background,
+ BackgroundVariant,
+ Controls,
+ MiniMap,
+ ReactFlow,
+ ReactFlowProvider,
+ type Edge,
+ type EdgeTypes,
+ type Node,
+ type NodeTypes,
+ type OnConnect,
+ type OnEdgesChange,
+ type OnNodesChange,
+} from "@xyflow/react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface WorkflowCanvasProps {
+ /** Current node list */
+ nodes: Node[];
+ /** Current edge list */
+ edges: Edge[];
+ /** Handler for node changes (move, select, remove) */
+ onNodesChange: OnNodesChange;
+ /** Handler for edge changes (select, remove) */
+ onEdgesChange: OnEdgesChange;
+ /** Handler for new connections drawn by the user */
+ onConnect: OnConnect;
+ /** Custom node type registry — merge with workflowNodeTypes */
+ nodeTypes?: NodeTypes;
+ /** Custom edge type registry — merge with workflowEdgeTypes */
+ edgeTypes?: EdgeTypes;
+ /** Optional CSS class applied to the outer wrapper */
+ className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function Canvas({
+ nodes,
+ edges,
+ onNodesChange,
+ onEdgesChange,
+ onConnect,
+ nodeTypes,
+ edgeTypes,
+ className = "",
+}: WorkflowCanvasProps) {
+ return (
+
+
+
+ "var(--th-accent)"}
+ maskColor="rgba(0,0,0,0.12)"
+ />
+
+
+
+ );
+}
+
+/**
+ * WorkflowCanvas wraps the inner canvas in a ReactFlowProvider so it can be
+ * dropped into any page without requiring a provider higher in the tree.
+ * If you need multiple canvases on one page, render each inside its own
+ * WorkflowCanvas (each gets its own provider context).
+ */
+export function WorkflowCanvas(props: WorkflowCanvasProps) {
+ return (
+
+
+
+ );
+}
+
+export default WorkflowCanvas;
diff --git a/ui/src/components/workflows/canvas/index.ts b/ui/src/components/workflows/canvas/index.ts
new file mode 100644
index 00000000..fe98c693
--- /dev/null
+++ b/ui/src/components/workflows/canvas/index.ts
@@ -0,0 +1,2 @@
+export type { WorkflowCanvasProps } from "./WorkflowCanvas";
+export { WorkflowCanvas } from "./WorkflowCanvas";
diff --git a/ui/src/components/workflows/index.ts b/ui/src/components/workflows/index.ts
index def29e09..9d127b52 100644
--- a/ui/src/components/workflows/index.ts
+++ b/ui/src/components/workflows/index.ts
@@ -1,3 +1,5 @@
+export type { WorkflowCanvasProps } from "./canvas";
+export { WorkflowCanvas } from "./canvas";
export type { DispatchHistoryProps } from "./DispatchHistory";
export { DispatchHistory } from "./DispatchHistory";
export type { PromptTemplateEditorProps } from "./PromptTemplateEditor";