feat(canvas): implement edge insertion reflow and enhance connection validation

- Introduced a new CSS transition for edge insertion reflowing to improve visual feedback during node adjustments.
- Enhanced the connection validation logic to include options for optimistic edges, ensuring better handling of edge creation scenarios.
- Updated the canvas connection drop menu to support additional templates and improved edge insertion handling.
- Refactored edge insertion logic to accommodate local node position adjustments during reflow operations.
- Added tests for new edge insertion features and connection validation improvements.

components/canvas/canvas-node-template-picker.tsx

@@ -62,6 +62,7 @@ const NODE_SEARCH_KEYWORDS: Partial<
 export type CanvasNodeTemplatePickerProps = {
   onPick: (template: CanvasNodeTemplate) => void;
   groupHeading?: string;
+  templates?: readonly CanvasNodeTemplate[];
 };
 
 /**
@@ -70,10 +71,11 @@ export type CanvasNodeTemplatePickerProps = {
 export function CanvasNodeTemplatePicker({
   onPick,
   groupHeading = "Knoten",
+  templates = CANVAS_NODE_TEMPLATES,
 }: CanvasNodeTemplatePickerProps) {
   return (
     <CommandGroup heading={groupHeading}>
-      {CANVAS_NODE_TEMPLATES.map((template) => {
+      {templates.map((template) => {
         const Icon = NODE_ICONS[template.type];
         return (
           <CommandItem