feat: add micro-animations to TopBar, toasts, settings, and shortcut help

src/components/layout/TopBar.tsx

@@ -1,4 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { springs } from "@/lib/motion";
 import { ArrowLeft, Settings, Search, Undo2, Redo2, SlidersHorizontal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -199,11 +201,20 @@ export function TopBar() {
             </DropdownMenuContent>
           </DropdownMenu>
         )}
-        {savingStatus && (
-          <span className="mr-2 font-mono text-xs text-pylon-text-secondary">
-            {savingStatus}
-          </span>
-        )}
+        <AnimatePresence mode="wait">
+          {savingStatus && (
+            <motion.span
+              key={savingStatus}
+              className="mr-2 font-mono text-xs text-pylon-text-secondary"
+              initial={{ opacity: 0, y: -4 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 4 }}
+              transition={springs.snappy}
+            >
+              {savingStatus}
+            </motion.span>
+          )}
+        </AnimatePresence>
 
         <Tooltip>
           <TooltipTrigger asChild>