feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/components/DynamicForm.svelte

@@ -1,5 +1,5 @@
+<!-- [DEF:DynamicForm:Component] -->
 <!--
-[DEF:DynamicForm:Component]
 @SEMANTICS: form, schema, dynamic, json-schema
 @PURPOSE: Generates a form dynamically based on a JSON schema.
 @LAYER: UI
@@ -11,7 +11,9 @@
 - submit: Object - Dispatched when the form is submitted, containing the form data.
 -->
 <script>
+    // [SECTION: IMPORTS]
     import { createEventDispatcher } from 'svelte';
+    // [/SECTION]
 
     export let schema;
     let formData = {};
@@ -19,7 +21,9 @@
     const dispatch = createEventDispatcher();
 
     // [DEF:handleSubmit:Function]
-    // @PURPOSE: Dispatches the submit event with the form data.
+    /**
+     * @purpose Dispatches the submit event with the form data.
+     */
     function handleSubmit() {
         console.log("[DynamicForm][Action] Submitting form data.", { formData });
         dispatch('submit', formData);
@@ -27,7 +31,9 @@
     // [/DEF:handleSubmit]
 
     // [DEF:initializeForm:Function]
-    // @PURPOSE: Initialize form data with default values from the schema.
+    /**
+     * @purpose Initialize form data with default values from the schema.
+     */
     function initializeForm() {
         if (schema && schema.properties) {
             for (const key in schema.properties) {
@@ -40,6 +46,7 @@
     initializeForm();
 </script>
 
+<!-- [SECTION: TEMPLATE] -->
 <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     {#if schema && schema.properties}
         {#each Object.entries(schema.properties) as [key, prop]}
@@ -76,4 +83,6 @@
         </button>
     {/if}
 </form>
-<!-- [/DEF:DynamicForm] -->
+<!-- [/SECTION] -->
+
+<!-- [/DEF:DynamicForm] -->