refactor(test-app): use $props in Svelte components

Refactor OptionalProps.svelte and MatchPropsOnKey.svelte to use the $props() helper for prop destructuring. This improves consistency with Svelte 5 conventions and prepares for future enhancements.

Author: brodienguyen

packages/svelte5/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte

@@ -8,9 +8,11 @@
     remember: boolean
   }
 
-  export let user: {
-    username?: string | null
-  } | null = null
+  const { user = null }: {
+    user?: {
+      username?: string | null;
+    } | null;
+  } = $props()
 
   useForm<LoginData>({
     username: user?.username ?? '',

packages/svelte5/test-app/Pages/MatchPropsOnKey.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte5'
 
-  export let foo: {
-    page: number
-    data: Array<{ name: string }>
-    companies: Array<{ name: string }>
-    teams: Array<{ name: string }>
-    per_page: number
-    meta: { label: string }
-  }
-  export let bar: number[]
-  export let baz: number[]
+  const { foo, bar, baz }: {
+    foo: {
+      page: number;
+      data: Array<{ name: string }>;
+      companies: Array<{ name: string }>;
+      teams: Array<{ name: string }>;
+      per_page: number;
+      meta: { label: string };
+    };
+    bar: number[];
+    baz: number[];
+  } = $props()
 
-  let page = foo.page
+  let page = $state(foo.page)
 
   const reloadIt = () => {
     router.reload({