feat(deps): sprinkle @formkit/auto-animate on rail lists

Adds smooth fade+slide animations when list items enter/leave on the
three highest-visibility realtime surfaces:

- alert-rail.tsx — socket-driven alerts appearing / dismissed.
- my-reminders-rail.tsx — reminders completed / arriving via realtime.
- notes-list.tsx — notes added / edited / deleted.

One-line `useAutoAnimate()` hook per site, no CSS, ~2kb gzip. Replaces
the jarring "row just appears/disappears" pattern with a per-item
transition.

Skipped on pipeline-board (kanban) — combining auto-animate with
@dnd-kit's SortableContext causes double-animation glitches because
both libraries fight to animate the same layout shift.

Verified: tsc clean, vitest 1293/1293 pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package.json

@@ -31,6 +31,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@formkit/auto-animate": "^0.9.0",
     "@hookform/resolvers": "^5.2.2",
     "@pdfme/common": "^6.1.2",
     "@pdfme/generator": "^6.1.2",

pnpm-lock.yaml

@@ -22,6 +22,9 @@ importers:
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.6)
+      '@formkit/auto-animate':
+        specifier: ^0.9.0
+        version: 0.9.0
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.75.0(react@19.2.6))
@@ -786,6 +789,9 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@formkit/auto-animate@0.9.0':
+    resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}
+
   '@hookform/devtools@4.4.0':
     resolution: {integrity: sha512-Mtlic+uigoYBPXlfvPBfiYYUZuyMrD3pTjDpVIhL6eCZTvQkHsKBSKeZCvXWUZr8fqrkzDg27N+ZuazLKq6Vmg==}
     peerDependencies:
@@ -5890,6 +5896,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@formkit/auto-animate@0.9.0': {}
+
   '@hookform/devtools@4.4.0(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.6)

src/components/alerts/alert-rail.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import { ArrowRight } from 'lucide-react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 
 import { useUIStore } from '@/stores/ui-store';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -18,6 +19,11 @@ export function AlertRail() {
   const visible = alerts.slice(0, 5);
   const overflow = Math.max(alerts.length - visible.length, 0);
 
+  // Smooth enter/leave for alerts as new ones arrive via socket realtime
+  // and stale ones get dismissed — replaces the jarring "card just
+  // appears/disappears" with a subtle fade+slide.
+  const [animateRef] = useAutoAnimate<HTMLDivElement>();
+
   return (
     <section
       data-testid="alert-rail"
@@ -47,7 +53,7 @@ export function AlertRail() {
       ) : visible.length === 0 ? (
         <AlertCardEmpty />
       ) : (
-        <div className="space-y-2">
+        <div ref={animateRef} className="space-y-2">
           {visible.map((a) => (
             <AlertCard key={a.id} alert={a} />
           ))}

src/components/dashboard/my-reminders-rail.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { formatDistanceToNowStrict, isAfter, isBefore } from 'date-fns';
 import { AlarmClock, ChevronRight } from 'lucide-react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -58,6 +59,10 @@ export function MyRemindersRail() {
     .slice(0, 6);
   const overdueCount = items.filter((r) => isBefore(new Date(r.dueAt), now)).length;
 
+  // Smooth animation when reminders complete / get dismissed / arrive
+  // via socket realtime.
+  const [animateRef] = useAutoAnimate<HTMLUListElement>();
+
   function hrefFor(r: ReminderRow): string {
     if (r.interestId) return `/${portSlug}/interests/${r.interestId}`;
     if (r.clientId) return `/${portSlug}/clients/${r.clientId}`;
@@ -105,7 +110,7 @@ export function MyRemindersRail() {
             All caught up - no reminders.
           </p>
         ) : (
-          <ul className="space-y-1">
+          <ul ref={animateRef} className="space-y-1">
             {sorted.map((r) => {
               const due = new Date(r.dueAt);
               const isOverdue = isBefore(due, now);

src/components/shared/notes-list.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNow } from 'date-fns';
 import { Lock, Pencil, Trash2, Send, Loader2 } from 'lucide-react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
@@ -133,6 +134,10 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
   const listEndpoint = aggregateOn ? `${baseEndpoint}?aggregate=true` : baseEndpoint;
   const queryKey = [entityType, entityId, 'notes', aggregateOn ? 'aggregated' : 'own'];
 
+  // Smooth animation when notes are added / edited / deleted — replaces
+  // the abrupt re-render with a per-row fade/slide.
+  const [animateRef] = useAutoAnimate<HTMLDivElement>();
+
   const { data: notes = [], isLoading } = useQuery<Note[]>({
     queryKey,
     queryFn: () => apiFetch<{ data: Note[] }>(listEndpoint).then((r) => r.data),
@@ -241,7 +246,7 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
       ) : notes.length === 0 ? (
         <div className="text-center py-8 text-muted-foreground">No notes yet</div>
       ) : (
-        <div className="space-y-3">
+        <div ref={animateRef} className="space-y-3">
           {(groupBySource ? sortByGroup(notes) : notes).map((note) => (
             <div key={note.id} className="flex gap-3 p-3 rounded-lg border bg-card">
               <Avatar className="h-8 w-8 shrink-0">