Merge branch 'feat/canvas-magnetism-20260411-082412'

tests/agent-node-runtime.test.ts

@@ -142,6 +142,7 @@ vi.mock("next-intl", () => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
 }));
 
 import AgentNode from "@/components/canvas/nodes/agent-node";

tests/agent-node.test.ts

@@ -60,6 +60,7 @@ vi.mock("@xyflow/react", () => ({
     });
   },
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
 }));
 
 const translations: Record<string, string> = {

tests/agent-output-node.test.ts

@@ -20,6 +20,7 @@ vi.mock("@xyflow/react", () => ({
     });
   },
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
 }));
 
 const translations: Record<string, string> = {

tests/ai-video-node.test.ts

@@ -54,6 +54,7 @@ vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
   useReactFlow: () => ({
     getEdges: mocks.getEdges,
     getNode: mocks.getNode,

tests/crop-node.test.ts

@@ -18,6 +18,7 @@ const mocks = vi.hoisted(() => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
 }));
 
 vi.mock("next-intl", () => ({

tests/light-adjust-node.test.ts

@@ -19,6 +19,7 @@ const parameterSliderState = vi.hoisted(() => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
 }));
 
 vi.mock("convex/react", () => ({

tests/prompt-node.test.ts

@@ -135,6 +135,7 @@ vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
   useStore: (selector: (state: { edges: typeof mocks.edges; nodes: typeof mocks.nodes }) => unknown) =>
     selector({ edges: mocks.edges, nodes: mocks.nodes }),
   useReactFlow: () => ({

tests/use-pipeline-preview.test.ts

@@ -691,6 +691,7 @@ describe("preview histogram call sites", () => {
     vi.doMock("@xyflow/react", () => ({
       Handle: () => null,
       Position: { Left: "left", Right: "right" },
+      useConnection: () => ({ inProgress: false }),
     }));
     vi.doMock("convex/react", () => ({
       useMutation: () => vi.fn(async () => undefined),
@@ -754,6 +755,8 @@ describe("preview histogram call sites", () => {
     }));
     vi.doMock("@/lib/canvas-utils", () => ({
       resolveMediaAspectRatio: () => null,
+      canvasHandleAccentColor: () => "rgb(13, 148, 136)",
+      canvasHandleAccentColorWithAlpha: () => "rgba(13, 148, 136, 0.4)",
     }));
     vi.doMock("@/lib/image-formats", () => ({
       parseAspectRatioString: () => ({ w: 1, h: 1 }),
@@ -875,6 +878,7 @@ describe("preview histogram call sites", () => {
     vi.doMock("@xyflow/react", () => ({
       Handle: () => null,
       Position: { Left: "left", Right: "right" },
+      useConnection: () => ({ inProgress: false }),
     }));
     vi.doMock("convex/react", () => ({
       useMutation: () => vi.fn(async () => undefined),
@@ -935,6 +939,8 @@ describe("preview histogram call sites", () => {
     }));
     vi.doMock("@/lib/canvas-utils", () => ({
       resolveMediaAspectRatio: () => null,
+      canvasHandleAccentColor: () => "rgb(13, 148, 136)",
+      canvasHandleAccentColorWithAlpha: () => "rgba(13, 148, 136, 0.4)",
     }));
     vi.doMock("@/lib/image-formats", () => ({
       parseAspectRatioString: () => ({ w: 1, h: 1 }),
@@ -1063,6 +1069,7 @@ describe("preview histogram call sites", () => {
     vi.doMock("@xyflow/react", () => ({
       Handle: () => null,
       Position: { Left: "left", Right: "right" },
+      useConnection: () => ({ inProgress: false }),
     }));
     vi.doMock("convex/react", () => ({
       useMutation: () => vi.fn(async () => undefined),
@@ -1126,6 +1133,8 @@ describe("preview histogram call sites", () => {
     }));
     vi.doMock("@/lib/canvas-utils", () => ({
       resolveMediaAspectRatio: () => null,
+      canvasHandleAccentColor: () => "rgb(13, 148, 136)",
+      canvasHandleAccentColorWithAlpha: () => "rgba(13, 148, 136, 0.4)",
     }));
     vi.doMock("@/lib/image-formats", () => ({
       parseAspectRatioString: () => ({ w: 1, h: 1 }),

tests/video-prompt-node.test.ts

@@ -123,6 +123,7 @@ vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
 vi.mock("@xyflow/react", () => ({
   Handle: () => null,
   Position: { Left: "left", Right: "right" },
+  useConnection: () => ({ inProgress: false }),
   useStore: (selector: (state: { edges: typeof mocks.edges; nodes: typeof mocks.nodes }) => unknown) =>
     selector({ edges: mocks.edges, nodes: mocks.nodes }),
   useReactFlow: () => ({