Navigation, state management, create rule button integration

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -20,9 +20,9 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   }) => {
     const router = useRouter();
 
-    const handleExit = () => {
+    const handleExit = (options?: { saveDraft?: boolean }) => {
       if (onExit) {
-        onExit();
+        onExit(options);
       } else {
         // Default behavior: navigate to home
         router.push("/");

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts

@@ -39,9 +39,10 @@ export interface CreateFlowTopNavProps {
    */
   onEdit?: () => void;
   /**
-   * Callback when Exit/Save & Exit button is clicked
+   * Callback when Exit/Save & Exit button is clicked.
+   * When user is logged in, called with { saveDraft: true } to stub "Save & Exit".
    */
-  onExit?: () => void;
+  onExit?: (options?: { saveDraft?: boolean }) => void;
   /**
    * Palette for nav buttons (e.g. "inverse" on completed page to match teal background)
    * @default "default"

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -89,7 +89,7 @@ export function CreateFlowTopNavView({
             buttonType="outline"
             palette={buttonPalette}
             size="xsmall"
-            onClick={onExit}
+            onClick={() => onExit?.({ saveDraft: loggedIn })}
             ariaLabel={exitButtonText}
             className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
           >