git commit -m "feat(swift): implement Epic 3 - P1 Blocks (E3.S0-S6)" -m "Epic 3 compleet: Alle P1 blocks geïmplementeerd met volledige functionaliteit." -m "E3.S0 - CanvasArea block rendering" -m "- Switch/case voor block types met prefill data" -m "- AnimatePresence voor smooth transitions" -m "- PatientContextCard auto-display wanneer activePatient is gezet" -m "" -m "E3.S1 - Block Container animaties" -m "- Framer Motion animaties voor container, content en close button" -m "- Stagger effecten voor content children" -m "- Hover/tap animaties voor close button" -m "" -m "E3.S2 - DagnotatieBlock" -m "- Patient search met debounced FHIR API integratie" -m "- Category selector (medicatie, adl, gedrag, incident, observatie)" -m "- Textarea met character counter (max 500)" -m "- Opslaan naar /api/reports met validatie en error handling" -m "" -m "E3.S3 - Patient search API" -m "- GET /api/patients/search?q= met fuzzy search" -m "- Match score berekening voor resultaten" -m "- Auth check en error handling" -m "" -m "E3.S4 - ZoekenBlock" -m "- Debounced patient search met dropdown" -m "- Patient selectie → setActivePatient in store" -m "- Auto-close na selectie + recent action" -m "" -m "E3.S5 - PatientContextCard" -m "- Auto-open na patient selectie" -m "- Notities, vitals, diagnoses en risico's secties" -m "- API integratie met /api/overdracht/[patientId]" -m "" -m "E3.S6 - OverdrachtBlock" -m "- Lijst van patiënten met activiteit" -m "- Period selector (1d, 3d, 7d, 14d)" -m "- AI samenvatting generatie per patiënt" -m "- Aandachtspunten en actiepunten weergave" -m "" -m "Technische verbeteringen:" -m "- Technische debt opgelost: BlockContainer animaties, CanvasArea rendering" -m "- PatientContextCard toegevoegd aan blocks" -m "- Alle blocks gebruiken BlockContainer voor consistente styling" -m "" -m "Voortgang: 56 SP / 72 SP (78%) - Epic 3 compleet"

components/swift/command-center/canvas-area.tsx

@@ -6,19 +6,60 @@
  * Central area where blocks appear. Shows empty state when no block is active.
  */
 
+import { AnimatePresence, motion } from 'framer-motion';
 import { useSwiftStore } from '@/stores/swift-store';
+import type { BlockType } from '@/lib/swift/types';
+import type { BlockPrefillData } from '@/stores/swift-store';
+import { DagnotatieBlock } from '../blocks/dagnotitie-block';
+import { ZoekenBlock } from '../blocks/zoeken-block';
+import { OverdrachtBlock } from '../blocks/overdracht-block';
+import { PatientContextCard } from '../blocks/patient-context-card';
 
 export function CanvasArea() {
-  const { activeBlock } = useSwiftStore();
+  const { activeBlock, prefillData, activePatient } = useSwiftStore();
+
+  function renderBlock(blockType: BlockType, prefill: BlockPrefillData) {
+    switch (blockType) {
+      case 'dagnotitie':
+        return <DagnotatieBlock prefill={prefill} />;
+      case 'zoeken':
+        return <ZoekenBlock prefill={prefill} />;
+      case 'overdracht':
+        return <OverdrachtBlock prefill={prefill} />;
+      default:
+        return null;
+    }
+  }
+
+  const blockAnimations = {
+    initial: { opacity: 0, y: 20, scale: 0.95 },
+    animate: { opacity: 1, y: 0, scale: 1 },
+    exit: { opacity: 0, y: -20, scale: 0.95 },
+    transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] },
+  };
 
   return (
     <main className="flex-1 flex items-center justify-center p-4 overflow-auto">
-      {activeBlock ? (
-        // Block will be rendered here by the page component
-        <div className="text-slate-400">Block: {activeBlock}</div>
-      ) : (
-        <EmptyState />
-      )}
+      <AnimatePresence mode="wait">
+        {activeBlock ? (
+          <motion.div key={activeBlock} {...blockAnimations}>
+            {renderBlock(activeBlock, prefillData)}
+          </motion.div>
+        ) : activePatient ? (
+          <motion.div key="patient-context" {...blockAnimations}>
+            <PatientContextCard />
+          </motion.div>
+        ) : (
+          <motion.div
+            key="empty"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <EmptyState />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </main>
   );
 }