feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/components/Toast.svelte

@@ -1,5 +1,5 @@
+<!-- [DEF:Toast:Component] -->
 <!--
-[DEF:Toast:Component]
 @SEMANTICS: toast, notification, feedback, ui
 @PURPOSE: Displays transient notifications (toasts) in the bottom-right corner.
 @LAYER: UI
@@ -9,9 +9,12 @@
 @EVENTS: None
 -->
 <script>
+    // [SECTION: IMPORTS]
     import { toasts } from '../lib/toasts.js';
+    // [/SECTION]
 </script>
 
+<!-- [SECTION: TEMPLATE] -->
 <div class="fixed bottom-0 right-0 p-4 space-y-2">
     {#each $toasts as toast (toast.id)}
         <div class="p-4 rounded-md shadow-lg text-white
@@ -23,4 +26,6 @@
         </div>
     {/each}
 </div>
-<!-- [/DEF:Toast] -->
+<!-- [/SECTION] -->
+
+<!-- [/DEF:Toast] -->