added format command and added trailing commas to reduce conflicts

app/src/ui/components/canvas/Canvas.tsx

@@ -10,7 +10,7 @@ import {
    addEdge,
    useEdgesState,
    useNodesState,
-   useReactFlow
+   useReactFlow,
 } from "@xyflow/react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { useBkndSystemTheme } from "ui/client/schema/system/use-bknd-system";
@@ -127,9 +127,9 @@ export function Canvas({
                data: { label: "" },
                position: screenToFlowPosition({
                   x: clientX,
-                  y: clientY
+                  y: clientY,
                }),
-               origin: [0.0, 0.0]
+               origin: [0.0, 0.0],
             });
 
             setNodes((nds) => nds.concat(newNode as any));
@@ -138,13 +138,13 @@ export function Canvas({
                   onDropNewNode({
                      id: newNode.id,
                      source: connectionState.fromNode.id,
-                     target: newNode.id
-                  })
-               )
+                     target: newNode.id,
+                  }),
+               ),
             );
          }
       },
-      [screenToFlowPosition]
+      [screenToFlowPosition],
    );
    //console.log("edges1", edges);
 
@@ -163,12 +163,12 @@ export function Canvas({
                  : ""
          }
          proOptions={{
-            hideAttribution: true
+            hideAttribution: true,
          }}
          fitView
          fitViewOptions={{
             maxZoom: 1.5,
-            ...props.fitViewOptions
+            ...props.fitViewOptions,
          }}
          nodeDragThreshold={25}
          panOnScrollSpeed={1}

app/src/ui/components/canvas/components/nodes/DefaultNode.tsx

@@ -14,7 +14,7 @@ export function DefaultNode({ selected, children, className, ...props }: TDefaul
          className={twMerge(
             "relative w-80 shadow-lg rounded-lg bg-background",
             selected && "outline outline-blue-500/25",
-            className
+            className,
          )}
       >
          {children}
@@ -31,7 +31,7 @@ const Header: React.FC<TDefaultNodeHeaderProps> = ({ className, label, children,
       {...props}
       className={twMerge(
          "flex flex-row bg-primary/15 justify-center items-center rounded-tl-lg rounded-tr-lg py-1 px-2 drag-handle",
-         className
+         className,
       )}
    >
       {children ? (

app/src/ui/components/canvas/layouts/index.ts

@@ -29,7 +29,7 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
    nodes.forEach((node) => {
       dagreGraph.setNode(node.id, {
          width: node.width,
-         height: node.height
+         height: node.height,
       });
    });
 
@@ -45,9 +45,9 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
          return {
             ...node,
             x: position.x - (node.width ?? 0) / 2,
-            y: position.y - (node.height ?? 0) / 2
+            y: position.y - (node.height ?? 0) / 2,
          };
       }),
-      edges
+      edges,
    };
 };

app/src/ui/components/canvas/panels/Panel.tsx

@@ -33,7 +33,7 @@ const Wrapper = ({ children, className, ...props }: ComponentPropsWithoutRef<"di
       {...props}
       className={twMerge(
          "flex flex-row bg-lightest border ring-2 ring-muted/5 border-muted rounded-full items-center p-1",
-         className
+         className,
       )}
    >
       {children}
@@ -70,7 +70,7 @@ const Text = forwardRef<any, ComponentPropsWithoutRef<"span"> & { mono?: boolean
       >
          {children}
       </span>
-   )
+   ),
 );
 
 Panel.Wrapper = Wrapper;