Feature Request: form composition for Svelte

[Bladesheng]

React version has this - https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#breaking-big-forms-into-smaller-pieces

I didn't find anything similar in the svelte adapter that would allow me to define the form object in one component, and then pass the form object into another child component, without breaking type inference.
Since this library doesn't really use generics, I'm not sure what would be the best solution.

This is the only workaround I have found so far, though you are creating 2 form objects, which isn't ideal. Also it only works with simple example like this because of #1794.

formOpts.ts

import { formOptions } from '@tanstack/svelte-form';
export const formOpts = formOptions({ defaultValues: { firstName: '' } });

Parent component

<script lang="ts">
	import { createForm } from '@tanstack/svelte-form';
	import { formOpts } from './formOpts.ts';
	import ChildComponent from './ChildComponent.svelte';

	const form = createForm(() => ({ ...formOpts }));
</script>

<ChildComponent {form} />

ChildComponent.svelte

<script lang="ts">
	import { createForm } from '@tanstack/svelte-form';
	import { formOpts } from './formOpts.ts';

	const formForTypesOnly = createForm(() => ({ ...formOpts }));

	let { form }: { form: typeof formForTypesOnly } = $props();
</script>

<form.Field name="firstName">
	{#snippet children(field)}
		<div>
			<label for={field.name}>First Name</label>
			<input
				id={field.name}
				type="text"
				placeholder="First Name"
				value={field.state.value}
				oninput={(e) => field.handleChange(e.currentTarget.value)}
				onblur={() => field.handleBlur()}
			/>
		</div>
	{/snippet}
</form.Field>