Route kebab Customize through the prefilled policy wizard so existing methods and values can be renamed, reordered, and kept in that field order on the card after Finalize.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.container.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useState, type DragEvent } from "react";
+import { memo, useCallback, useRef, useState, type DragEvent } from "react";
 import { reorderCustomMethodCardFieldBlocks } from "../../../../../lib/create/reorderCustomMethodCardFieldBlocks";
 import { CustomMethodCardWizardBlocksListView } from "./CustomMethodCardWizardBlocksList.view";
 import type { CustomMethodCardWizardBlocksListProps } from "./CustomMethodCardWizardBlocksList.types";
@@ -11,19 +11,33 @@ function CustomMethodCardWizardBlocksListContainerComponent({
   dragHandleAriaLabel,
   listLabel,
   onBlocksReorder,
+  onEditBlock,
 }: CustomMethodCardWizardBlocksListProps) {
   const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
   const [overIndex, setOverIndex] = useState<number | null>(null);
+  const draggingIndexRef = useRef<number | null>(null);
+  const dragFromHandleRef = useRef(false);
 
   const clearDragUi = useCallback(() => {
+    draggingIndexRef.current = null;
+    dragFromHandleRef.current = false;
     setDraggingIndex(null);
     setOverIndex(null);
   }, []);
 
+  const handleHandlePointerDown = useCallback(() => {
+    dragFromHandleRef.current = true;
+  }, []);
+
   const handleDragStart = useCallback(
     (index: number) => (e: DragEvent) => {
+      if (!dragFromHandleRef.current) {
+        e.preventDefault();
+        return;
+      }
       e.dataTransfer.effectAllowed = "move";
       e.dataTransfer.setData("text/plain", String(index));
+      draggingIndexRef.current = index;
       setDraggingIndex(index);
     },
     [],
@@ -40,8 +54,11 @@ function CustomMethodCardWizardBlocksListContainerComponent({
   const handleDrop = useCallback(
     (index: number) => (e: DragEvent) => {
       e.preventDefault();
-      const from = Number.parseInt(e.dataTransfer.getData("text/plain"), 10);
-      if (Number.isNaN(from)) {
+      const fromData = Number.parseInt(e.dataTransfer.getData("text/plain"), 10);
+      const from = Number.isNaN(fromData)
+        ? draggingIndexRef.current
+        : fromData;
+      if (from == null || Number.isNaN(from)) {
         clearDragUi();
         return;
       }
@@ -66,6 +83,8 @@ function CustomMethodCardWizardBlocksListContainerComponent({
       onDragOver={handleDragOver}
       onDrop={handleDrop}
       onDragEnd={clearDragUi}
+      onHandlePointerDown={handleHandlePointerDown}
+      onEditBlock={onEditBlock}
     />
   );
 }