feat: Use svelte 5 syntax in svelte 5 template

template_builder/templates/extras/src/lib/components/{Svelte5}NextStep.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const {
+		title,
+		learnMore,
+		children,
+	}: {
+		title: string;
+		learnMore: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<section class="flex w-1/3 flex-col gap-2 rounded-lg bg-zinc-800 p-4 shadow-lg">
+	<h1 class="mb-2 text-xl font-bold">{title}</h1>
+	{@render children()}
+	<a
+		href={learnMore}
+		target="_blank"
+		rel="noreferrer"
+		class="mt-auto pt-3 text-right text-blue-400 hover:underline"
+	>
+		Learn more
+	</a>
+</section>

template_builder/templates/extras/src/routes/{Svelte5}+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+
+	const { children } = $props();
+</script>
+
+{@render children()}

template_builder/templates/extras/src/routes/{Trpc,Svelte5}+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import '../app.css';
+	import { QueryClientProvider } from '@tanstack/svelte-query';
+	import { trpc } from '$lib/trpc';
+
+	const { data, children } = $props();
+
+	const queryClient = trpc.hydrateFromServer(data.trpc);
+</script>
+
+<QueryClientProvider client={queryClient}>
+	{@render children()}
+</QueryClientProvider>