diff --git a/.github/workflows/playwright-chromium.yml b/.github/workflows/playwright-chromium.yml
index 62e32d901..aaed89c9d 100644
--- a/.github/workflows/playwright-chromium.yml
+++ b/.github/workflows/playwright-chromium.yml
@@ -28,7 +28,7 @@ jobs:
         run: pnpm install
 
       - name: Build Inertia
-        run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build
+        run: pnpm -r --filter ./packages/core --filter "@inertiajs/${{ matrix.adapter == 'vue' && 'vue3' || matrix.adapter }}" build
 
       - name: Install Playwright Browsers
         run: pnpm playwright install chromium
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 521e7202b..d7df02076 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -44,21 +44,21 @@
     "package": "svelte-kit sync && svelte-package --input src"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.48.5",
     "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "axios": "^1.13.2",
     "es-check": "^9.4.5",
-    "publint": "^0.2.12",
-    "svelte": "^4.2.20",
+    "publint": "^0.3.15",
+    "svelte": "^5.43.2",
     "svelte-check": "^4.3.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^5.4.21"
+    "vite": "^7.1.12"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
diff --git a/packages/svelte/src/components/App.svelte b/packages/svelte/src/components/App.svelte
index 24ad23044..73036ea49 100644
--- a/packages/svelte/src/components/App.svelte
+++ b/packages/svelte/src/components/App.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { ComponentResolver, ResolvedComponent } from '../types'
   import { type Page, type PageProps } from '@inertiajs/core'
 
@@ -13,32 +13,40 @@
   import type { LayoutType, LayoutResolver } from '../types'
   import { router } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
-  import { setPage } from '../page'
+  import { setPage } from '../page.svelte'
 
-  export let initialComponent: InertiaAppProps['initialComponent']
-  export let initialPage: InertiaAppProps['initialPage']
-  export let resolveComponent: InertiaAppProps['resolveComponent']
+  interface Props {
+    initialComponent: InertiaAppProps['initialComponent']
+    initialPage: InertiaAppProps['initialPage']
+    resolveComponent: InertiaAppProps['resolveComponent']
+  }
+
+  const { initialComponent, initialPage, resolveComponent }: Props = $props()
 
-  let component = initialComponent
-  let key: number | null = null
-  let page = initialPage
-  let renderProps = resolveRenderProps(component, page, key)
+  // svelte-ignore state_referenced_locally
+  let component = $state(initialComponent)
+  let key = $state<number | null>(null)
+  // svelte-ignore state_referenced_locally
+  let page = $state(initialPage)
+  let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
 
-  setPage(page)
+  // Reactively update the global page state when local page state changes
+  $effect.pre(() => {
+    setPage(page)
+  })
 
   const isServer = typeof window === 'undefined'
 
   if (!isServer) {
+    // svelte-ignore state_referenced_locally
     router.init<ResolvedComponent>({
       initialPage,
       resolveComponent,
       swapComponent: async (args) => {
         component = args.component
         page = args.page
-        key = args.preserveState ? key : Date.now()
 
-        renderProps = resolveRenderProps(component, page, key)
-        setPage(page)
+        key = args.preserveState ? key : Date.now()
       },
     })
   }
@@ -47,6 +55,7 @@
    * Resolves the render props for the current page component, including layouts.
    */
   function resolveRenderProps(component: ResolvedComponent, page: Page, key: number | null = null): RenderProps {
+    // If the component does not exists, it will throw on component.default and component.layout here
     const child = h(component.default, page.props, [], key)
     const layout = component.layout
 
diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
index ab940cde9..d6ac1061f 100644
--- a/packages/svelte/src/components/Deferred.svelte
+++ b/packages/svelte/src/components/Deferred.svelte
@@ -1,34 +1,43 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { page } from '../index'
-  import { onDestroy } from 'svelte'
 
-  export let data: string | string[]
+  interface Props {
+    data: string | string[]
+    fallback?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+  }
 
-  const keys = Array.isArray(data) ? data : [data]
-  let loaded = false
+  let { data, fallback, children }: Props = $props()
 
-  const isServer = typeof window === 'undefined'
+  const keys = $derived(Array.isArray(data) ? data : [data])
+  let loaded = $state(false)
 
+  const isServer = typeof window === 'undefined'
   if (!isServer) {
-    const unsubscribe = page.subscribe(({ props }) => {
-      // Ensures the slot isn't loaded before the deferred props are available
-      window.queueMicrotask(() => {
-        loaded = keys.every((key) => typeof props[key] !== 'undefined')
-      })
-    })
+    // Use $effect to watch for changes in pageState.props
+    $effect(() => {
+      // Access pageState.props to make this effect reactive
+      const props = page.props
 
-    onDestroy(() => {
-      unsubscribe()
+      // Wrap this up into untrack, to make sure it doesn't gets picked as a depedency to retrigger the $effect
+      untrack(() => {
+        // Ensures the content isn't loaded before the deferred props are available
+        window.queueMicrotask(() => {
+          loaded = keys.every((key) => typeof props[key] !== 'undefined')
+        })
+      })
     })
   }
 
-  if (!$$slots.fallback) {
-    throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot')
+  // svelte-ignore state_referenced_locally
+  if (!fallback) {
+    throw new Error('`<Deferred>` requires a `fallback` snippet')
   }
 </script>
 
 {#if loaded}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
index 0206a8630..1f00af903 100644
--- a/packages/svelte/src/components/Form.svelte
+++ b/packages/svelte/src/components/Form.svelte
@@ -12,42 +12,73 @@
   } from '@inertiajs/core'
   import { isEqual } from 'lodash-es'
   import { onMount } from 'svelte'
-  import useForm from '../useForm'
+  import useForm from '../useForm.svelte'
 
   const noop = () => undefined
 
-  export let action: FormComponentProps['action'] = ''
-  export let method: FormComponentProps['method'] = 'get'
-  export let headers: FormComponentProps['headers'] = {}
-  export let queryStringArrayFormat: FormComponentProps['queryStringArrayFormat'] = 'brackets'
-  export let errorBag: FormComponentProps['errorBag'] = null
-  export let showProgress: FormComponentProps['showProgress'] = true
-  export let transform: FormComponentProps['transform'] = (data) => data
-  export let options: FormComponentProps['options'] = {}
-  export let onCancelToken: FormComponentProps['onCancelToken'] = noop
-  export let onBefore: FormComponentProps['onBefore'] = noop
-  export let onStart: FormComponentProps['onStart'] = noop
-  export let onProgress: FormComponentProps['onProgress'] = noop
-  export let onFinish: FormComponentProps['onFinish'] = noop
-  export let onCancel: FormComponentProps['onCancel'] = noop
-  export let onSuccess: FormComponentProps['onSuccess'] = noop
-  export let onError: FormComponentProps['onError'] = noop
-  export let onSubmitComplete: FormComponentProps['onSubmitComplete'] = noop
-  export let disableWhileProcessing: boolean = false
-  export let invalidateCacheTags: FormComponentProps['invalidateCacheTags'] = []
-  export let resetOnError: FormComponentProps['resetOnError'] = false
-  export let resetOnSuccess: FormComponentProps['resetOnSuccess'] = false
-  export let setDefaultsOnSuccess: FormComponentProps['setDefaultsOnSuccess'] = false
+  interface Props {
+    action?: FormComponentProps['action']
+    method?: FormComponentProps['method']
+    headers?: FormComponentProps['headers']
+    queryStringArrayFormat?: FormComponentProps['queryStringArrayFormat']
+    errorBag?: FormComponentProps['errorBag']
+    showProgress?: FormComponentProps['showProgress']
+    transform?: FormComponentProps['transform']
+    options?: FormComponentProps['options']
+    onCancelToken?: FormComponentProps['onCancelToken']
+    onBefore?: FormComponentProps['onBefore']
+    onStart?: FormComponentProps['onStart']
+    onProgress?: FormComponentProps['onProgress']
+    onFinish?: FormComponentProps['onFinish']
+    onCancel?: FormComponentProps['onCancel']
+    onSuccess?: FormComponentProps['onSuccess']
+    onError?: FormComponentProps['onError']
+    onSubmitComplete?: FormComponentProps['onSubmitComplete']
+    disableWhileProcessing?: boolean
+    invalidateCacheTags?: FormComponentProps['invalidateCacheTags']
+    resetOnError?: FormComponentProps['resetOnError']
+    resetOnSuccess?: FormComponentProps['resetOnSuccess']
+    setDefaultsOnSuccess?: FormComponentProps['setDefaultsOnSuccess']
+    children?: import('svelte').Snippet<[any]>
+    [key: string]: any
+  }
+
+  let {
+    action = $bindable(''),
+    method = 'get',
+    headers = {},
+    queryStringArrayFormat = 'brackets',
+    errorBag = null,
+    showProgress = true,
+    transform = (data) => data,
+    options = {},
+    onCancelToken = noop,
+    onBefore = noop,
+    onStart = noop,
+    onProgress = noop,
+    onFinish = noop,
+    onCancel = noop,
+    onSuccess = noop,
+    onError = noop,
+    onSubmitComplete = noop,
+    disableWhileProcessing = false,
+    invalidateCacheTags = [],
+    resetOnError = false,
+    resetOnSuccess = false,
+    setDefaultsOnSuccess = false,
+    children,
+    ...rest
+  }: Props = $props()
 
   type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
 
   const form = useForm({})
-  let formElement: HTMLFormElement
-  let isDirty = false
+  let formElement: HTMLFormElement = $state(null!)
+  let isDirty = $state(false)
   let defaultData: FormData = new FormData()
 
-  $: _method = isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method)
-  $: _action = isUrlMethodPair(action) ? action.url : (action as string)
+  const _method = $derived(isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method))
+  const _action = $derived(isUrlMethodPair(action) ? action.url : (action as string))
 
   export function getFormData(): FormData {
     return new FormData(formElement)
@@ -119,7 +150,7 @@
       ...options,
     }
 
-    $form.transform(() => transform!(_data)).submit(_method, url, submitOptions)
+    form.transform(() => transform!(_data)).submit(_method, url, submitOptions)
   }
 
   function handleSubmit(event: Event) {
@@ -141,21 +172,21 @@
 
   export function clearErrors(...fields: string[]) {
     // @ts-expect-error
-    $form.clearErrors(...fields)
+    form.clearErrors(...fields)
   }
 
   export function resetAndClearErrors(...fields: string[]) {
     // @ts-expect-error
-    $form.clearErrors(...fields)
+    form.clearErrors(...fields)
     reset(...fields)
   }
 
   export function setError(field: string | object, value?: string) {
     if (typeof field === 'string') {
       // @ts-expect-error
-      $form.setError(field, value)
+      form.setError(field, value)
     } else {
-      $form.setError(field)
+      form.setError(field)
     }
   }
 
@@ -174,32 +205,33 @@
       formEvents.forEach((e) => formElement?.removeEventListener(e, updateDirtyState))
     }
   })
-  $: slotErrors = $form.errors as Errors
+  const slotErrors = $derived(form.errors as Errors)
 </script>
 
+{/* @ts-expect-error method type does not match here*/ null}
 <form
   bind:this={formElement}
   action={_action}
   method={_method}
-  on:submit={handleSubmit}
-  on:reset={handleReset}
-  {...$$restProps}
-  inert={disableWhileProcessing && $form.processing ? true : undefined}
+  onsubmit={handleSubmit}
+  onreset={handleReset}
+  {...rest}
+  inert={disableWhileProcessing && form.processing ? true : undefined}
 >
-  <slot
-    errors={slotErrors}
-    hasErrors={$form.hasErrors}
-    processing={$form.processing}
-    progress={$form.progress}
-    wasSuccessful={$form.wasSuccessful}
-    recentlySuccessful={$form.recentlySuccessful}
-    {clearErrors}
-    {resetAndClearErrors}
-    {setError}
-    {isDirty}
-    {submit}
-    {defaults}
-    {getData}
-    {getFormData}
-  />
+  {@render children?.({
+    errors: slotErrors,
+    hasErrors: form.hasErrors,
+    processing: form.processing,
+    progress: form.progress,
+    wasSuccessful: form.wasSuccessful,
+    recentlySuccessful: form.recentlySuccessful,
+    clearErrors,
+    resetAndClearErrors,
+    setError,
+    isDirty,
+    submit,
+    defaults,
+    getData,
+    getFormData,
+  })}
 </form>
diff --git a/packages/svelte/src/components/InfiniteScroll.svelte b/packages/svelte/src/components/InfiniteScroll.svelte
index f9a5e4c7d..743d35a69 100644
--- a/packages/svelte/src/components/InfiniteScroll.svelte
+++ b/packages/svelte/src/components/InfiniteScroll.svelte
@@ -9,62 +9,56 @@
   } from '@inertiajs/core'
   import { onDestroy, onMount } from 'svelte'
 
-  export let data: InfiniteScrollComponentBaseProps['data']
-  export let buffer: InfiniteScrollComponentBaseProps['buffer'] = 0
-  export let as: InfiniteScrollComponentBaseProps['as'] = 'div'
-  export let manual: InfiniteScrollComponentBaseProps['manual'] = false
-  export let manualAfter: InfiniteScrollComponentBaseProps['manualAfter'] = 0
-  export let preserveUrl: InfiniteScrollComponentBaseProps['preserveUrl'] = false
-  export let reverse: InfiniteScrollComponentBaseProps['reverse'] = false
-  export let autoScroll: InfiniteScrollComponentBaseProps['autoScroll'] = undefined
-  export let startElement: string | (() => HTMLElement | null) | null = null
-  export let endElement: string | (() => HTMLElement | null) | null = null
-  export let itemsElement: string | (() => HTMLElement | null) | null = null
-  export let onlyNext = false
-  export let onlyPrevious = false
-
-  let itemsElementRef: HTMLElement
-  let startElementRef: HTMLElement
-  let endElementRef: HTMLElement
-  let loadingPrevious = false
-  let loadingNext = false
-  let requestCount = 0
-
-  $: resolvedItemsElement = resolveHTMLElement(itemsElement, itemsElementRef)
-  $: scrollableParent = resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null
-
-  $: sharedExposed = {
-    loadingPrevious,
-    loadingNext,
-    hasPrevious: infiniteScrollInstance?.dataManager.hasPrevious() || false,
-    hasNext: infiniteScrollInstance?.dataManager.hasNext() || false,
-  } satisfies Pick<InfiniteScrollActionSlotProps, 'loadingPrevious' | 'loadingNext' | 'hasPrevious' | 'hasNext'>
-
-  $: exposedPrevious = {
-    loading: loadingPrevious,
-    fetch: fetchPrevious,
-    autoMode: headerAutoMode,
-    manualMode: !headerAutoMode,
-    hasMore: infiniteScrollInstance?.dataManager.hasPrevious() || false,
-    ...sharedExposed,
-  } satisfies InfiniteScrollActionSlotProps
-
-  $: exposedNext = {
-    loading: loadingNext,
-    fetch: fetchNext,
-    autoMode: footerAutoMode,
-    manualMode: !footerAutoMode,
-    hasMore: infiniteScrollInstance?.dataManager.hasNext() || false,
-    ...sharedExposed,
-  } satisfies InfiniteScrollActionSlotProps
-
-  $: exposedSlot = {
-    loading: loadingPrevious || loadingNext,
-    loadingPrevious,
-    loadingNext,
-  } satisfies InfiniteScrollSlotProps
+  interface Props {
+    data: InfiniteScrollComponentBaseProps['data']
+    buffer?: InfiniteScrollComponentBaseProps['buffer']
+    as?: InfiniteScrollComponentBaseProps['as']
+    manual?: InfiniteScrollComponentBaseProps['manual']
+    manualAfter?: InfiniteScrollComponentBaseProps['manualAfter']
+    preserveUrl?: InfiniteScrollComponentBaseProps['preserveUrl']
+    reverse?: InfiniteScrollComponentBaseProps['reverse']
+    autoScroll?: InfiniteScrollComponentBaseProps['autoScroll']
+    startElement?: string | (() => HTMLElement | null) | null
+    endElement?: string | (() => HTMLElement | null) | null
+    itemsElement?: string | (() => HTMLElement | null) | null
+    onlyNext?: boolean
+    onlyPrevious?: boolean
+    previous?: import('svelte').Snippet<[any]>
+    loading?: import('svelte').Snippet<[any]>
+    next?: import('svelte').Snippet<[any]>
+    children?: import('svelte').Snippet<[any]>
+    [key: string]: any
+  }
 
-  let infiniteScrollInstance: UseInfiniteScrollProps | null = null
+  let {
+    data,
+    buffer = 0,
+    as = 'div',
+    manual = false,
+    manualAfter = 0,
+    preserveUrl = false,
+    reverse = false,
+    autoScroll = undefined,
+    startElement = null,
+    endElement = null,
+    itemsElement = null,
+    onlyNext = false,
+    onlyPrevious = false,
+    previous,
+    loading,
+    next,
+    children,
+    ...rest
+  }: Props = $props()
+
+  let itemsElementRef: HTMLElement = $state(null!)
+  let startElementRef: HTMLElement = $state(null!)
+  let endElementRef: HTMLElement = $state(null!)
+  let loadingPrevious = $state(false)
+  let loadingNext = $state(false)
+  let requestCount = $state(0)
+
+  let infiniteScrollInstance: UseInfiniteScrollProps = $state(null!)
 
   function resolveHTMLElement(
     value: string | (() => HTMLElement | null) | null,
@@ -167,64 +161,82 @@
     }
   }
 
-  $: manualMode = manual || (manualAfter !== undefined && manualAfter > 0 && requestCount >= manualAfter)
-  $: autoLoad = !manualMode
-
-  $: headerAutoMode = autoLoad && !onlyNext
-  $: footerAutoMode = autoLoad && !onlyPrevious
-
-  $: {
+  onDestroy(() => infiniteScrollInstance?.flush())
+  let resolvedItemsElement = $derived(resolveHTMLElement(itemsElement, itemsElementRef))
+  let scrollableParent = $derived(resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null)
+  let sharedExposed = $derived({
+    loadingPrevious,
+    loadingNext,
+    hasPrevious: infiniteScrollInstance?.dataManager.hasPrevious() || false,
+    hasNext: infiniteScrollInstance?.dataManager.hasNext() || false,
+  } satisfies Pick<InfiniteScrollActionSlotProps, 'loadingPrevious' | 'loadingNext' | 'hasPrevious' | 'hasNext'>)
+  let manualMode = $derived(manual || (manualAfter !== undefined && manualAfter > 0 && requestCount >= manualAfter))
+  let autoLoad = $derived(!manualMode)
+  let headerAutoMode = $derived(autoLoad && !onlyNext)
+  let exposedPrevious = $derived({
+    loading: loadingPrevious,
+    fetch: fetchPrevious,
+    autoMode: headerAutoMode,
+    manualMode: !headerAutoMode,
+    hasMore: infiniteScrollInstance?.dataManager.hasPrevious() || false,
+    ...sharedExposed,
+  } satisfies InfiniteScrollActionSlotProps)
+  let footerAutoMode = $derived(autoLoad && !onlyPrevious)
+  let exposedNext = $derived({
+    loading: loadingNext,
+    fetch: fetchNext,
+    autoMode: footerAutoMode,
+    manualMode: !footerAutoMode,
+    hasMore: infiniteScrollInstance?.dataManager.hasNext() || false,
+    ...sharedExposed,
+  } satisfies InfiniteScrollActionSlotProps)
+  let exposedSlot = $derived({
+    loading: loadingPrevious || loadingNext,
+    loadingPrevious,
+    loadingNext,
+  } satisfies InfiniteScrollSlotProps)
+  $effect(() => {
     // Make this block run whenever these change
     ;[autoLoad, onlyNext, onlyPrevious, reverse]
 
     autoLoad
       ? infiniteScrollInstance?.elementManager.enableTriggers()
       : infiniteScrollInstance?.elementManager.disableTriggers()
-  }
-
-  onDestroy(() => infiniteScrollInstance?.flush())
+  })
 </script>
 
 {#if !startElement && !reverse}
   <div bind:this={startElementRef}>
-    <slot name="previous" {exposedPrevious} {...exposedPrevious}>
-      {#if loadingPrevious}
-        <slot name="loading" {exposedPrevious} {...exposedPrevious} />
-      {/if}
-    </slot>
+    {#if previous}{@render previous({ exposedPrevious, ...exposedPrevious })}{:else if loadingPrevious}
+      {@render loading?.({ exposedPrevious, ...exposedPrevious })}
+    {/if}
   </div>
 {/if}
 
 {#if !endElement && reverse}
   <div bind:this={endElementRef}>
-    <slot name="next" {exposedNext} {...exposedNext}>
-      {#if loadingNext}
-        <slot name="loading" {exposedNext} {...exposedNext} />
-      {/if}
-    </slot>
+    {#if next}{@render next({ exposedNext, ...exposedNext })}{:else if loadingNext}
+      {@render loading?.({ exposedNext, ...exposedNext })}
+    {/if}
   </div>
 {/if}
 
-<svelte:element this={as} bind:this={itemsElementRef} {...$$restProps}>
-  <slot {exposedSlot} {...exposedSlot} />
+<svelte:element this={as} bind:this={itemsElementRef} {...rest}>
+  {@render children?.({ exposedSlot, ...exposedSlot })}
 </svelte:element>
 
 {#if !startElement && reverse}
   <div bind:this={startElementRef}>
-    <slot name="previous" {exposedPrevious} {...exposedPrevious}>
-      {#if loadingPrevious}
-        <slot name="loading" {exposedPrevious} {...exposedPrevious} />
-      {/if}
-    </slot>
+    {#if previous}{@render previous({ exposedPrevious, ...exposedPrevious })}{:else if loadingPrevious}
+      {@render loading?.({ exposedPrevious, ...exposedPrevious })}
+    {/if}
   </div>
 {/if}
 
 {#if !endElement && !reverse}
   <div bind:this={endElementRef}>
-    <slot name="next" {exposedNext} {...exposedNext}>
-      {#if loadingNext}
-        <slot name="loading" {exposedNext} {...exposedNext} />
-      {/if}
-    </slot>
+    {#if next}{@render next({ exposedNext, ...exposedNext })}{:else if loadingNext}
+      {@render loading?.({ exposedNext, ...exposedNext })}
+    {/if}
   </div>
 {/if}
diff --git a/packages/svelte/src/components/Link.svelte b/packages/svelte/src/components/Link.svelte
index 4f3efc06f..3c7b3e48a 100644
--- a/packages/svelte/src/components/Link.svelte
+++ b/packages/svelte/src/components/Link.svelte
@@ -3,36 +3,86 @@
   import type { LinkComponentBaseProps } from '@inertiajs/core'
   import { inertia } from '../index'
 
-  export let href: LinkComponentBaseProps['href'] = ''
-  export let as: keyof HTMLElementTagNameMap = 'a'
-  export let data: LinkComponentBaseProps['data'] = {}
-  export let method: LinkComponentBaseProps['method'] = 'get'
-  export let replace: LinkComponentBaseProps['replace'] = false
-  export let preserveScroll: LinkComponentBaseProps['preserveScroll'] = false
-  export let preserveState: LinkComponentBaseProps['preserveState'] | null = null
-  export let preserveUrl: LinkComponentBaseProps['preserveUrl'] = false
-  export let only: LinkComponentBaseProps['only'] = []
-  export let except: LinkComponentBaseProps['except'] = []
-  export let headers: LinkComponentBaseProps['headers'] = {}
-  export let queryStringArrayFormat: LinkComponentBaseProps['queryStringArrayFormat'] = 'brackets'
-  export let async: LinkComponentBaseProps['async'] = false
-  export let prefetch: LinkComponentBaseProps['prefetch'] = false
-  export let cacheFor: LinkComponentBaseProps['cacheFor'] = 0
-  export let cacheTags: LinkComponentBaseProps['cacheTags'] = []
-  export let viewTransition: LinkComponentBaseProps['viewTransition'] = false
+  interface Props {
+    href?: LinkComponentBaseProps['href']
+    as?: keyof HTMLElementTagNameMap
+    data?: LinkComponentBaseProps['data']
+    method?: LinkComponentBaseProps['method']
+    replace?: LinkComponentBaseProps['replace']
+    preserveScroll?: LinkComponentBaseProps['preserveScroll']
+    preserveState?: LinkComponentBaseProps['preserveState'] | null
+    preserveUrl?: LinkComponentBaseProps['preserveUrl']
+    only?: LinkComponentBaseProps['only']
+    except?: LinkComponentBaseProps['except']
+    headers?: LinkComponentBaseProps['headers']
+    queryStringArrayFormat?: LinkComponentBaseProps['queryStringArrayFormat']
+    async?: LinkComponentBaseProps['async']
+    prefetch?: LinkComponentBaseProps['prefetch']
+    cacheFor?: LinkComponentBaseProps['cacheFor']
+    cacheTags?: LinkComponentBaseProps['cacheTags']
+    viewTransition?: LinkComponentBaseProps['viewTransition']
+    children?: import('svelte').Snippet
+    [key: string]: any
+  }
 
-  $: _method = isUrlMethodPair(href) ? href.method : method
-  $: _href = isUrlMethodPair(href) ? href.url : href
+  // Are these defined anywhere else?
+  type Callbacks = {
+    onfocus?: () => void
+    onblur?: () => void
+    onclick?: () => void
+    ondblclick?: () => void
+    onmousedown?: () => void
+    onmousemove?: () => void
+    onmouseout?: () => void
+    onmouseover?: () => void
+    onmouseup?: () => void
+    'oncancel-token'?: () => void
+    onbefore?: () => void
+    onstart?: () => void
+    onprogress?: () => void
+    onfinish?: () => void
+    oncancel?: () => void
+    onsuccess?: () => void
+    onerror?: () => void
+    onprefetching?: () => void
+    onprefetched?: () => void
+  }
 
-  $: asProp = _method !== 'get' ? 'button' : as.toLowerCase()
-  $: elProps =
+  let {
+    href = '',
+    as = 'a',
+    data = {},
+    method = 'get',
+    replace = false,
+    preserveScroll = false,
+    preserveState = null,
+    preserveUrl = false,
+    only = [],
+    except = [],
+    headers = {},
+    queryStringArrayFormat = 'brackets',
+    async = false,
+    prefetch = false,
+    cacheFor = 0,
+    cacheTags = [],
+    viewTransition = false,
+    children,
+    ...rest
+  }: Props & Callbacks = $props()
+
+  let _method = $derived(isUrlMethodPair(href) ? href.method : method)
+  let _href = $derived(isUrlMethodPair(href) ? href.url : href)
+
+  let asProp = $derived(_method !== 'get' ? 'button' : as.toLowerCase())
+  let elProps = $derived(
     {
       a: { href: _href },
       button: { type: 'button' },
-    }[asProp] || {}
+    }[asProp] || {},
+  )
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
   this={asProp}
   use:inertia={{
@@ -53,27 +103,8 @@
     cacheTags,
     viewTransition,
   }}
-  {...$$restProps}
+  {...rest}
   {...elProps}
-  on:focus
-  on:blur
-  on:click
-  on:dblclick
-  on:mousedown
-  on:mousemove
-  on:mouseout
-  on:mouseover
-  on:mouseup
-  on:cancel-token
-  on:before
-  on:start
-  on:progress
-  on:finish
-  on:cancel
-  on:success
-  on:error
-  on:prefetching
-  on:prefetched
 >
-  <slot />
+  {@render children?.()}
 </svelte:element>
diff --git a/packages/svelte/src/components/Render.svelte b/packages/svelte/src/components/Render.svelte
index 895dec332..dcb228322 100644
--- a/packages/svelte/src/components/Render.svelte
+++ b/packages/svelte/src/components/Render.svelte
@@ -1,17 +1,17 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { PageProps } from '@inertiajs/core'
-  import type { ComponentType } from 'svelte'
+  import type { Component } from 'svelte'
 
   export type RenderProps = {
-    component: ComponentType
+    component: Component
     props?: PageProps
     children?: RenderProps[]
     key?: number | null
   }
 
   export type RenderFunction = {
-    (component: ComponentType, props?: PageProps, children?: RenderProps[], key?: number | null): RenderProps
-    (component: ComponentType, children?: RenderProps[], key?: number | null): RenderProps
+    (component: Component, props?: PageProps, children?: RenderProps[], key?: number | null): RenderProps
+    (component: Component, children?: RenderProps[], key?: number | null): RenderProps
   }
 
   export const h: RenderFunction = (component, propsOrChildren, childrenOrKey, key: number | null = null) => {
@@ -37,10 +37,9 @@
 </script>
 
 <script lang="ts">
-  export let component: ComponentType
-  export let props: PageProps = {}
-  export let children: RenderProps[] = []
-  export let key: number | null = null
+  import Render from './Render.svelte'
+
+  const { component, props = {}, children = [], key = null }: RenderProps = $props()
 </script>
 
 {#if component}
@@ -50,13 +49,15 @@
   while the layout components are persisted across page changes. -->
   {#key children?.length === 0 ? key : null}
     {#if children.length > 0}
-      <svelte:component this={component} {...props}>
+      {@const SvelteComponent = component}
+      <SvelteComponent {...props}>
         {#each children as child}
-          <svelte:self {...child} />
+          <Render {...child} />
         {/each}
-      </svelte:component>
+      </SvelteComponent>
     {:else}
-      <svelte:component this={component} {...props} />
+      {@const SvelteComponent_1 = component}
+      <SvelteComponent_1 {...props} />
     {/if}
   {/key}
 {/if}
diff --git a/packages/svelte/src/components/WhenVisible.svelte b/packages/svelte/src/components/WhenVisible.svelte
index a1e9cb20f..a33b0ffce 100644
--- a/packages/svelte/src/components/WhenVisible.svelte
+++ b/packages/svelte/src/components/WhenVisible.svelte
@@ -1,40 +1,38 @@
 <script lang="ts">
   import { router, type ReloadOptions } from '@inertiajs/core'
-  import { onDestroy } from 'svelte'
-  import { usePage } from '../page'
+  import { usePage } from '../page.svelte'
+
+  interface Props {
+    data?: string | string[]
+    params?: ReloadOptions
+    buffer?: number
+    as?: keyof HTMLElementTagNameMap
+    always?: boolean
+    children?: import('svelte').Snippet
+    fallback?: import('svelte').Snippet
+  }
 
-  export let data: string | string[] = ''
-  export let params: ReloadOptions = {}
-  export let buffer: number = 0
-  export let as: keyof HTMLElementTagNameMap = 'div'
-  export let always: boolean = false
+  let { data = '', params = {}, buffer = 0, as = 'div', always = false, children, fallback }: Props = $props()
 
-  let loaded = false
+  let loaded = $state(false)
   let fetching = false
-  let el: HTMLElement
   let observer: IntersectionObserver | null = null
 
   const page = usePage()
 
   // Watch for page prop changes and reset loaded state when data becomes undefined
-  $: {
+  $effect(() => {
     if (Array.isArray(data)) {
       // For arrays, reset loaded if any prop becomes undefined
-      if (data.some((key) => $page.props[key] === undefined)) {
+      if (data.some((key) => page.props[key] === undefined)) {
         loaded = false
       }
-    } else if ($page.props[data as string] === undefined) {
+    } else if (page.props[data as string] === undefined) {
       loaded = false
     }
-  }
-
-  $: if (el) {
-    registerObserver()
-  }
-
-  function registerObserver() {
-    observer?.disconnect()
+  })
 
+  function attachObserver(el: HTMLElement) {
     observer = new IntersectionObserver(
       (entries) => {
         if (!entries[0].isIntersecting) {
@@ -76,11 +74,12 @@
     )
 
     observer.observe(el)
-  }
 
-  onDestroy(() => {
-    observer?.disconnect()
-  })
+    // Clean up will run like onDestroy
+    return () => {
+      observer?.disconnect()
+    }
+  }
 
   function getReloadParams(): Partial<ReloadOptions> {
     if (data !== '') {
@@ -98,11 +97,11 @@
 </script>
 
 {#if always || !loaded}
-  <svelte:element this={as} bind:this={el} />
+  <svelte:element this={as} {@attach attachObserver} />
 {/if}
 
 {#if loaded}
-  <slot />
-{:else if $$slots.fallback}
-  <slot name="fallback" />
+  {@render children?.()}
+{:else if fallback}
+  {@render fallback?.()}
 {/if}
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
index 363b57940..573bf39c3 100644
--- a/packages/svelte/src/createInertiaApp.ts
+++ b/packages/svelte/src/createInertiaApp.ts
@@ -10,7 +10,7 @@ import App, { type InertiaAppProps } from './components/App.svelte'
 import { config } from './index'
 import type { ComponentResolver, SvelteInertiaAppConfig } from './types'
 
-type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
+type SvelteRenderResult = { body: string; head: string; css?: { code: string } }
 
 type SetupOptions<SharedProps extends PageProps> = {
   el: HTMLElement | null
@@ -49,24 +49,26 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
   const resolveComponent = (name: string) => Promise.resolve(resolve(name))
 
-  const svelteApp = await Promise.all([
+  const [initialComponent] = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),
-  ]).then(([initialComponent]) => {
-    return setup({
-      el,
-      App,
-      props: { initialPage, initialComponent, resolveComponent },
-    })
+  ])
+
+  const props: InertiaAppProps<SharedProps> = { initialPage, initialComponent, resolveComponent }
+
+  const svelteApp = await setup({
+    el,
+    App,
+    props,
   })
 
   if (isServer && svelteApp) {
-    const { html, head, css } = svelteApp
+    const { body, head, css } = svelteApp
 
     return {
       body: useScriptElementForInitialPage
-        ? `<script data-page="${id}" type="application/json">${JSON.stringify(initialPage)}</script><div data-server-rendered="true" id="${id}">${html}</div>`
-        : `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${html}</div>`,
+        ? `<script data-page="${id}" type="application/json">${JSON.stringify(initialPage)}</script><div data-server-rendered="true" id="${id}">${body}</div>`
+        : `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${body}</div>`,
       head: [head, css ? `<style data-vite-css>${css.code}</style>` : ''],
     }
   }
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 57409aabf..aecff4551 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -10,11 +10,11 @@ export { default as Link } from './components/Link.svelte'
 export { default as WhenVisible } from './components/WhenVisible.svelte'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as inertia } from './link'
-export { default as page, usePage } from './page'
+export { default as page, usePage } from './page.svelte'
 export { type ResolvedComponent, type SvelteInertiaAppConfig } from './types'
-export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm'
+export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm.svelte'
 export { default as usePoll } from './usePoll'
-export { default as usePrefetch } from './usePrefetch'
-export { default as useRemember } from './useRemember'
+export { default as usePrefetch } from './usePrefetch.svelte'
+export { default as useRemember } from './useRemember.svelte'
 
 export const config = coreConfig.extend<SvelteInertiaAppConfig>({})
diff --git a/packages/svelte/src/page.ts b/packages/svelte/src/page.svelte.ts
similarity index 55%
rename from packages/svelte/src/page.ts
rename to packages/svelte/src/page.svelte.ts
index b4c2a7913..abd06c3dd 100644
--- a/packages/svelte/src/page.ts
+++ b/packages/svelte/src/page.svelte.ts
@@ -1,5 +1,4 @@
 import { type Page, type PageProps, type SharedPageProps } from '@inertiajs/core'
-import { derived, writable, type Readable } from 'svelte/store'
 
 type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps & SharedPageProps>, 'props'> & {
   props: Page<TPageProps & SharedPageProps>['props'] & {
@@ -7,12 +6,19 @@ type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps
   }
 }
 
-const { set, subscribe } = writable<SveltePage>()
+const page = $state<SveltePage>({
+  component: '',
+  props: {},
+  url: '',
+  version: null,
+} as SveltePage)
 
-export const setPage = set
-
-export default { subscribe }
+export function setPage(newPage: SveltePage) {
+  Object.assign(page, newPage)
+}
 
-export function usePage<TPageProps extends PageProps = PageProps>(): Readable<SveltePage<TPageProps>> {
-  return derived({ subscribe }, ($page) => $page as SveltePage<TPageProps>)
+export function usePage<TPageProps extends PageProps = PageProps>(): SveltePage<TPageProps> {
+  return page as SveltePage<TPageProps>
 }
+
+export default page
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index 9faee824a..e50c1914b 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -1,14 +1,14 @@
-import type { ComponentType } from 'svelte'
+import type { Component } from 'svelte'
 import type { RenderFunction, RenderProps } from './components/Render.svelte'
 
 export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
 
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps
 
-export type LayoutType = LayoutResolver | ComponentType | ComponentType[]
+export type LayoutType = LayoutResolver | Component | Component[]
 
 export type ResolvedComponent = {
-  default: ComponentType
+  default: Component
   layout?: LayoutType
 }
 
diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.svelte.ts
similarity index 76%
rename from packages/svelte/src/useForm.ts
rename to packages/svelte/src/useForm.svelte.ts
index 26f09e893..c3882ec4b 100644
--- a/packages/svelte/src/useForm.ts
+++ b/packages/svelte/src/useForm.svelte.ts
@@ -18,10 +18,9 @@ import type {
 import { router } from '@inertiajs/core'
 import type { AxiosProgressEvent } from 'axios'
 import { cloneDeep, get, has, isEqual, set } from 'lodash-es'
-import { writable, type Writable } from 'svelte/store'
 import { config } from '.'
 
-type InertiaFormStore<TForm extends object> = Writable<InertiaForm<TForm>> & InertiaForm<TForm>
+type InertiaFormStore<TForm extends object> = InertiaForm<TForm>
 
 type FormOptions = Omit<VisitOptions, 'data'>
 type SubmitArgs = [Method, string, FormOptions?] | [UrlMethodPair, FormOptions?]
@@ -81,12 +80,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   // overriding user's custom defaults with automatic behavior.
   let defaultsCalledInOnSuccess = false
 
-  // Internal helper to update form state properties
-  const setFormState = <K extends keyof InertiaFormProps<TForm>>(key: K, value: InertiaFormProps<TForm>[K]) => {
-    store.update((form) => ({ ...form, [key]: value }))
-  }
-
-  const store = writable<InertiaForm<TForm>>({
+  let form = $state({
     ...(restored ? restored.data : data),
     isDirty: false,
     errors: (restored ? restored.errors : {}) as FormDataErrors<TForm>,
@@ -96,9 +90,11 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     recentlySuccessful: false,
     processing: false,
     setStore(keyOrData: keyof InertiaFormProps<TForm> | FormDataKeys<TForm> | TForm, maybeValue = undefined) {
-      store.update((store) => {
-        return typeof keyOrData === 'string' ? set(store, keyOrData, maybeValue) : Object.assign(store, keyOrData)
-      })
+      if (typeof keyOrData === 'string') {
+        set(form, keyOrData, maybeValue)
+      } else {
+        Object.assign(form, keyOrData)
+      }
     },
     data() {
       return Object.keys(data).reduce((carry, key) => {
@@ -140,24 +136,21 @@ export default function useForm<TForm extends FormDataType<TForm>>(
       return this
     },
     setError(fieldOrFields: FormDataKeys<TForm> | FormDataErrors<TForm>, maybeValue?: ErrorValue) {
-      setFormState('errors', {
+      form.errors = {
         ...this.errors,
         ...((typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields) as Errors),
-      })
+      } as FormDataErrors<TForm>
 
       return this
     },
     clearErrors(...fields: string[]) {
-      setFormState(
-        'errors',
-        Object.keys(this.errors).reduce(
-          (carry, field) => ({
-            ...carry,
-            ...(fields.length > 0 && !fields.includes(field) ? { [field]: (this.errors as Errors)[field] } : {}),
-          }),
-          {},
-        ) as FormDataErrors<TForm>,
-      )
+      form.errors = Object.keys(this.errors).reduce(
+        (carry, field) => ({
+          ...carry,
+          ...(fields.length > 0 && !fields.includes(field) ? { [field]: (this.errors as Errors)[field] } : {}),
+        }),
+        {},
+      ) as FormDataErrors<TForm>
       return this
     },
     resetAndClearErrors(...fields: Array<FormDataKeys<TForm>>) {
@@ -174,7 +167,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
 
       defaultsCalledInOnSuccess = false
 
-      const data = transform(this.data()) as RequestPayload
+      const transformedData = transform(this.data()) as RequestPayload
 
       const _options: Omit<VisitOptions, 'method'> = {
         ...options,
@@ -186,8 +179,8 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           }
         },
         onBefore: (visit: PendingVisit) => {
-          setFormState('wasSuccessful', false)
-          setFormState('recentlySuccessful', false)
+          form.wasSuccessful = false
+          form.recentlySuccessful = false
           if (recentlySuccessfulTimeoutId) {
             clearTimeout(recentlySuccessfulTimeoutId)
           }
@@ -197,44 +190,41 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           }
         },
         onStart: (visit: PendingVisit) => {
-          setFormState('processing', true)
+          form.processing = true
 
           if (options.onStart) {
             return options.onStart(visit)
           }
         },
         onProgress: (event?: AxiosProgressEvent) => {
-          setFormState('progress', event || null)
+          form.progress = event || null
 
           if (options.onProgress) {
             return options.onProgress(event)
           }
         },
         onSuccess: async (page: Page) => {
-          setFormState('processing', false)
-          setFormState('progress', null)
+          form.processing = false
+          form.progress = null
           this.clearErrors()
-          setFormState('wasSuccessful', true)
-          setFormState('recentlySuccessful', true)
+          form.wasSuccessful = true
+          form.recentlySuccessful = true
           recentlySuccessfulTimeoutId = setTimeout(
-            () => setFormState('recentlySuccessful', false),
+            () => (form.recentlySuccessful = false),
             config.get('form.recentlySuccessfulDuration'),
           )
 
           const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
 
           if (!defaultsCalledInOnSuccess) {
-            store.update((form) => {
-              this.defaults(cloneDeep(form.data()))
-              return form
-            })
+            this.defaults(cloneDeep(this.data()))
           }
 
           return onSuccess
         },
         onError: (errors: Errors) => {
-          setFormState('processing', false)
-          setFormState('progress', null)
+          form.processing = false
+          form.progress = null
           this.clearErrors().setError(errors as FormDataErrors<TForm>)
 
           if (options.onError) {
@@ -242,16 +232,16 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           }
         },
         onCancel: () => {
-          setFormState('processing', false)
-          setFormState('progress', null)
+          form.processing = false
+          form.progress = null
 
           if (options.onCancel) {
             return options.onCancel()
           }
         },
         onFinish: (visit: ActiveVisit) => {
-          setFormState('processing', false)
-          setFormState('progress', null)
+          form.processing = false
+          form.progress = null
           cancelToken = null
 
           if (options.onFinish) {
@@ -261,24 +251,24 @@ export default function useForm<TForm extends FormDataType<TForm>>(
       }
 
       if (method === 'delete') {
-        router.delete(url, { ..._options, data })
+        router.delete(url, { ..._options, data: transformedData })
       } else {
-        router[method](url, data, _options)
+        router[method](url, transformedData, _options)
       }
     },
-    get(url: string, options: VisitOptions) {
+    get(url: string, options?: VisitOptions) {
       this.submit('get', url, options)
     },
-    post(url: string, options: VisitOptions) {
+    post(url: string, options?: VisitOptions) {
       this.submit('post', url, options)
     },
-    put(url: string, options: VisitOptions) {
+    put(url: string, options?: VisitOptions) {
       this.submit('put', url, options)
     },
-    patch(url: string, options: VisitOptions) {
+    patch(url: string, options?: VisitOptions) {
       this.submit('patch', url, options)
     },
-    delete(url: string, options: VisitOptions) {
+    delete(url: string, options?: VisitOptions) {
       this.submit('delete', url, options)
     },
     cancel() {
@@ -286,20 +276,20 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     },
   } as InertiaForm<TForm>)
 
-  store.subscribe((form) => {
+  $effect(() => {
     if (form.isDirty === isEqual(form.data(), defaults)) {
-      setFormState('isDirty', !form.isDirty)
+      form.isDirty = !form.isDirty
     }
 
     const hasErrors = Object.keys(form.errors).length > 0
     if (form.hasErrors !== hasErrors) {
-      setFormState('hasErrors', !form.hasErrors)
+      form.hasErrors = !form.hasErrors
     }
 
     if (rememberKey) {
-      router.remember({ data: form.data(), errors: form.errors }, rememberKey)
+      router.remember({ data: form.data(), errors: $state.snapshot(form.errors) }, rememberKey)
     }
   })
 
-  return store as InertiaFormStore<TForm>
+  return form as InertiaFormStore<TForm>
 }
diff --git a/packages/svelte/src/usePrefetch.ts b/packages/svelte/src/usePrefetch.svelte.ts
similarity index 67%
rename from packages/svelte/src/usePrefetch.ts
rename to packages/svelte/src/usePrefetch.svelte.ts
index cc02f644b..792448ded 100644
--- a/packages/svelte/src/usePrefetch.ts
+++ b/packages/svelte/src/usePrefetch.svelte.ts
@@ -1,18 +1,17 @@
 import { router, type VisitOptions } from '@inertiajs/core'
 import { onDestroy, onMount } from 'svelte'
-import { readonly, writable } from 'svelte/store'
 
 export default function usePrefetch(options: VisitOptions = {}) {
-  const isPrefetched = writable(false)
-  const isPrefetching = writable(false)
-  const lastUpdatedAt = writable<number | null>(null)
+  let isPrefetched = $state(false)
+  let isPrefetching = $state(false)
+  let lastUpdatedAt = $state<number | null>(null)
 
   const cached = typeof window === 'undefined' ? null : router.getCached(window.location.pathname, options)
   const inFlight = typeof window === 'undefined' ? null : router.getPrefetching(window.location.pathname, options)
 
-  isPrefetched.set(cached !== null)
-  isPrefetching.set(inFlight !== null)
-  lastUpdatedAt.set(cached?.staleTimestamp || null)
+  isPrefetched = cached !== null
+  isPrefetching = inFlight !== null
+  lastUpdatedAt = cached?.staleTimestamp || null
 
   let removePrefetchedListener: () => void
   let removePrefetchingListener: () => void
@@ -20,14 +19,14 @@ export default function usePrefetch(options: VisitOptions = {}) {
   onMount(() => {
     removePrefetchingListener = router.on('prefetching', ({ detail }) => {
       if (detail.visit.url.pathname === window.location.pathname) {
-        isPrefetching.set(true)
+        isPrefetching = true
       }
     })
 
     removePrefetchedListener = router.on('prefetched', ({ detail }) => {
       if (detail.visit.url.pathname === window.location.pathname) {
-        isPrefetched.set(true)
-        isPrefetching.set(false)
+        isPrefetched = true
+        isPrefetching = false
       }
     })
   })
@@ -43,9 +42,15 @@ export default function usePrefetch(options: VisitOptions = {}) {
   })
 
   return {
-    isPrefetched: readonly(isPrefetched),
-    isPrefetching: readonly(isPrefetching),
-    lastUpdatedAt: readonly(lastUpdatedAt),
+    get isPrefetched() {
+      return isPrefetched
+    },
+    get isPrefetching() {
+      return isPrefetching
+    },
+    get lastUpdatedAt() {
+      return lastUpdatedAt
+    },
     flush() {
       router.flush(window.location.pathname, options)
     },
diff --git a/packages/svelte/src/useRemember.svelte.ts b/packages/svelte/src/useRemember.svelte.ts
new file mode 100644
index 000000000..bf6000152
--- /dev/null
+++ b/packages/svelte/src/useRemember.svelte.ts
@@ -0,0 +1,12 @@
+import { router } from '@inertiajs/core'
+
+export default function useRemember<State extends object>(initialState: State, key?: string): State {
+  const restored = router.restore(key) as State | undefined
+  const state = $state(restored !== undefined ? restored : initialState)
+
+  $effect(() => {
+    router.remember($state.snapshot(state), key)
+  })
+
+  return state
+}
diff --git a/packages/svelte/src/useRemember.ts b/packages/svelte/src/useRemember.ts
deleted file mode 100644
index de6b6e034..000000000
--- a/packages/svelte/src/useRemember.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { router } from '@inertiajs/core'
-import { onDestroy } from 'svelte'
-import { writable } from 'svelte/store'
-
-export default function useRemember<State>(initialState: State, key?: string) {
-  const restored = router.restore(key) as State | undefined
-  const store = writable(restored !== undefined ? restored : initialState)
-  const unsubscribe = store.subscribe((state) => router.remember(state, key))
-
-  onDestroy(unsubscribe)
-
-  return store
-}
diff --git a/packages/svelte/test-app/Layouts/NestedLayout.svelte b/packages/svelte/test-app/Layouts/NestedLayout.svelte
index fed03ab31..5721b8aa1 100644
--- a/packages/svelte/test-app/Layouts/NestedLayout.svelte
+++ b/packages/svelte/test-app/Layouts/NestedLayout.svelte
@@ -1,20 +1,30 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { page } from '@inertiajs/svelte'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
 
-  let createdAt: number | null = null
+  let { children }: Props = $props()
+  let createdAt = $state<number | null>(null)
 
   onMount(() => {
     window._inertia_nested_layout_id = crypto.randomUUID()
-    window._inertia_nested_layout_props = $page.props
     createdAt = Date.now()
   })
+
+  // Update props reactively when page changes
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      window._inertia_nested_layout_props = page.props
+    }
+  })
 </script>
 
 <div>
   <span>Nested Layout</span>
   <span>{createdAt}</span>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
diff --git a/packages/svelte/test-app/Layouts/Prefetch.svelte b/packages/svelte/test-app/Layouts/Prefetch.svelte
index edd473c98..94380109a 100644
--- a/packages/svelte/test-app/Layouts/Prefetch.svelte
+++ b/packages/svelte/test-app/Layouts/Prefetch.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
+
+  let { children }: Props = $props()
 </script>
 
 <div>
@@ -11,6 +16,6 @@
   <a href="/prefetch/6" use:inertia={{ prefetch: 'click' }}>On Enter</a>
   <button use:inertia={{ href: '/prefetch/7', prefetch: 'click' }}>On Spacebar</button>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
diff --git a/packages/svelte/test-app/Layouts/SWR.svelte b/packages/svelte/test-app/Layouts/SWR.svelte
index cee0bd331..73300ca63 100644
--- a/packages/svelte/test-app/Layouts/SWR.svelte
+++ b/packages/svelte/test-app/Layouts/SWR.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
+
+  let { children }: Props = $props()
 </script>
 
 <div>
@@ -10,6 +15,6 @@
   </a>
   <a href="/prefetch/swr/5" use:inertia={{ prefetch: true, cacheFor: [1000, 3000] }}> 1s Stale, 2s Expired (Number) </a>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
diff --git a/packages/svelte/test-app/Layouts/SiteLayout.svelte b/packages/svelte/test-app/Layouts/SiteLayout.svelte
index 734e59089..0c2602113 100644
--- a/packages/svelte/test-app/Layouts/SiteLayout.svelte
+++ b/packages/svelte/test-app/Layouts/SiteLayout.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { page } from '@inertiajs/svelte'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
 
-  let createdAt: number | null = null
+  let { children }: Props = $props()
+
+  let createdAt: number | null = $state(null)
 
   onMount(() => {
     window._inertia_layout_id = crypto.randomUUID()
-    window._inertia_site_layout_props = $page.props
+    window._inertia_site_layout_props = page.props
     createdAt = Date.now()
   })
 </script>
@@ -15,6 +20,6 @@
   <span>Site Layout</span>
   <span>{createdAt}</span>
   <div>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
diff --git a/packages/svelte/test-app/Layouts/WithScrollRegion.svelte b/packages/svelte/test-app/Layouts/WithScrollRegion.svelte
index d199c42cb..8483f636e 100644
--- a/packages/svelte/test-app/Layouts/WithScrollRegion.svelte
+++ b/packages/svelte/test-app/Layouts/WithScrollRegion.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-  let slot: HTMLDivElement
-  let documentScrollTop = 0
-  let documentScrollLeft = 0
-  let slotScrollTop = 0
-  let slotScrollLeft = 0
+  interface Props {
+    children?: import('svelte').Snippet
+  }
+
+  let { children }: Props = $props()
+  let slot: HTMLDivElement = $state(null!)
+  let documentScrollTop = $state(0)
+  let documentScrollLeft = $state(0)
+  let slotScrollTop = $state(0)
+  let slotScrollLeft = $state(0)
 
   const handleScrollEvent = () => {
     documentScrollTop = document.documentElement.scrollTop
@@ -13,11 +18,11 @@
   }
 </script>
 
-<svelte:document on:scroll={handleScrollEvent} />
+<svelte:document onscroll={handleScrollEvent} />
 
 <div style="width: 200vw">
   <span class="layout-text">With scroll regions</span>
-  <button on:click={handleScrollEvent}>Update scroll positions</button>
+  <button onclick={handleScrollEvent}>Update scroll positions</button>
   <div class="document-position">Document scroll position is {documentScrollLeft} & {documentScrollTop}</div>
   <div style="height: 200vh">
     <span class="slot-position">Slot scroll position is {slotScrollLeft} & {slotScrollTop}</span>
@@ -26,9 +31,9 @@
       id="slot"
       scroll-region
       style="height: 100px; width: 500px; overflow: scroll"
-      on:scroll={handleScrollEvent}
+      onscroll={handleScrollEvent}
     >
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 </div>
diff --git a/packages/svelte/test-app/Layouts/WithoutScrollRegion.svelte b/packages/svelte/test-app/Layouts/WithoutScrollRegion.svelte
index 2e716afce..d5ba7c613 100644
--- a/packages/svelte/test-app/Layouts/WithoutScrollRegion.svelte
+++ b/packages/svelte/test-app/Layouts/WithoutScrollRegion.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-  let slot: HTMLDivElement
-  let documentScrollTop = 0
-  let documentScrollLeft = 0
-  let slotScrollTop = 0
-  let slotScrollLeft = 0
+  interface Props {
+    children?: import('svelte').Snippet
+  }
+
+  let { children }: Props = $props()
+  let slot: HTMLDivElement = $state(null!)
+  let documentScrollTop = $state(0)
+  let documentScrollLeft = $state(0)
+  let slotScrollTop = $state(0)
+  let slotScrollLeft = $state(0)
 
   const handleScrollEvent = () => {
     documentScrollTop = document.documentElement.scrollTop
@@ -13,16 +18,16 @@
   }
 </script>
 
-<svelte:document on:scroll={handleScrollEvent} />
+<svelte:document onscroll={handleScrollEvent} />
 
 <div style="width: 200vw">
   <span class="layout-text">Without scroll regions</span>
-  <button on:click={handleScrollEvent}>Update scroll positions</button>
+  <button onclick={handleScrollEvent}>Update scroll positions</button>
   <div class="document-position">Document scroll position is {documentScrollLeft} & {documentScrollTop}</div>
   <div style="height: 200vh">
     <span class="slot-position">Slot scroll position is {slotScrollLeft} & {slotScrollTop}</span>
-    <div bind:this={slot} id="slot" style="height: 100px; width: 500px; overflow: scroll" on:scroll={handleScrollEvent}>
-      <slot />
+    <div bind:this={slot} id="slot" style="height: 100px; width: 500px; overflow: scroll" onscroll={handleScrollEvent}>
+      {@render children?.()}
     </div>
   </div>
 </div>
diff --git a/packages/svelte/test-app/Pages/Article.svelte b/packages/svelte/test-app/Pages/Article.svelte
index 6b6b2afca..d94a1e29b 100644
--- a/packages/svelte/test-app/Pages/Article.svelte
+++ b/packages/svelte/test-app/Pages/Article.svelte
@@ -6,7 +6,11 @@
     document.documentElement.style.scrollBehavior = 'smooth'
   }
 
-  export let scrollLog: number[] = []
+  interface Props {
+    scrollLog?: number[]
+  }
+
+  let { scrollLog = $bindable([]) }: Props = $props()
 
   const handleScrollEvent = () => {
     scrollLog = [...scrollLog, document.documentElement.scrollTop]
@@ -89,8 +93,8 @@
 
 <Link id="article-far-down" data-testid="article-far-down" href="/article#far-down">Article Far Down</Link>
 
-<button id="enable-smooth-scroll" data-testid="enable-smooth-scroll" on:click={enableSmoothScroll}>
+<button id="enable-smooth-scroll" data-testid="enable-smooth-scroll" onclick={enableSmoothScroll}>
   Enable Smooth Scroll
 </button>
 
-<button id="clear-scroll-log" data-testid="clear-scroll-log" on:click={() => (scrollLog = [])}>Clear Scroll Log</button>
+<button id="clear-scroll-log" data-testid="clear-scroll-log" onclick={() => (scrollLog = [])}>Clear Scroll Log</button>
diff --git a/packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte b/packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte
index 855af86df..5bebc79e9 100644
--- a/packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte
+++ b/packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte
@@ -7,12 +7,16 @@
     bar: string
   }
 
-  export let foo: string
-  export let bar: string
+  interface Props {
+    foo: string
+    bar: string
+  }
+
+  let { foo, bar }: Props = $props()
 
-  let errors = 0
-  let finished = 0
-  let success = 0
+  let errors = $state(0)
+  let finished = $state(0)
+  let success = $state(0)
   let random = Math.random()
 
   const bagErrors = () => {
@@ -68,14 +72,14 @@
 <div>
   <div>{foo}</div>
   <div>{bar}</div>
-  <button on:click={replace}>Replace</button>
-  <button on:click={() => replaceAndPreserveStateWithErrors({ name: 'Field is required' })}>
+  <button onclick={replace}>Replace</button>
+  <button onclick={() => replaceAndPreserveStateWithErrors({ name: 'Field is required' })}>
     Replace with errors
   </button>
-  <button on:click={() => replaceAndPreserveStateWithErrors()}>Replace without errors</button>
-  <button on:click={push}>Push</button>
-  <button on:click={defaultErrors}>Errors (default)</button>
-  <button on:click={bagErrors}>Errors (bag)</button>
+  <button onclick={() => replaceAndPreserveStateWithErrors()}>Replace without errors</button>
+  <button onclick={push}>Push</button>
+  <button onclick={defaultErrors}>Errors (default)</button>
+  <button onclick={bagErrors}>Errors (bag)</button>
   <div>Errors: {errors}</div>
   <div>Finished: {finished}</div>
   <div>Success: {success}</div>
diff --git a/packages/svelte/test-app/Pages/ClientSideVisit/Page2.svelte b/packages/svelte/test-app/Pages/ClientSideVisit/Page2.svelte
index 6e8277280..acb8470b0 100644
--- a/packages/svelte/test-app/Pages/ClientSideVisit/Page2.svelte
+++ b/packages/svelte/test-app/Pages/ClientSideVisit/Page2.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let baz: string
+  interface Props {
+    baz: string
+  }
+
+  let { baz }: Props = $props()
 </script>
 
 <div>{baz}</div>
diff --git a/packages/svelte/test-app/Pages/ClientSideVisit/Props.svelte b/packages/svelte/test-app/Pages/ClientSideVisit/Props.svelte
index 126c61112..412c85453 100644
--- a/packages/svelte/test-app/Pages/ClientSideVisit/Props.svelte
+++ b/packages/svelte/test-app/Pages/ClientSideVisit/Props.svelte
@@ -11,12 +11,23 @@
     age: number
   }
 
-  export let items: string[] = []
-  export let tags: Tag[] = []
-  export let user: User | undefined = undefined
-  export let count = 0
-  export let singleValue: string | string[] | undefined = undefined
-  export let undefinedValue: string | string[] | undefined = undefined
+  interface Props_1 {
+    items?: string[]
+    tags?: Tag[]
+    user?: User | undefined
+    count?: number
+    singleValue?: string | string[] | undefined
+    undefinedValue?: string | string[] | undefined
+  }
+
+  let {
+    items = [],
+    tags = [],
+    user = undefined,
+    count = 0,
+    singleValue = undefined,
+    undefinedValue = undefined,
+  }: Props_1 = $props()
 
   const replacePropString = () => {
     router.replaceProp('user.name', 'Jane Smith')
@@ -101,26 +112,26 @@
   <hr />
 
   <h2>Replace Prop Tests</h2>
-  <button on:click={replacePropString}>Replace user.name</button>
-  <button on:click={replacePropNumber}>Replace count</button>
-  <button on:click={replacePropFunction}>Replace count (function)</button>
+  <button onclick={replacePropString}>Replace user.name</button>
+  <button onclick={replacePropNumber}>Replace count</button>
+  <button onclick={replacePropFunction}>Replace count (function)</button>
 
   <h2>Append To Prop Tests</h2>
-  <button on:click={appendToPropArray}>Append to items (single)</button>
-  <button on:click={appendToPropMultiple}>Append to items (multiple)</button>
-  <button on:click={appendToPropFunction}>Append to tags (function)</button>
-  <button on:click={appendArrayToArray}>Append array to array (objects)</button>
+  <button onclick={appendToPropArray}>Append to items (single)</button>
+  <button onclick={appendToPropMultiple}>Append to items (multiple)</button>
+  <button onclick={appendToPropFunction}>Append to tags (function)</button>
+  <button onclick={appendArrayToArray}>Append array to array (objects)</button>
 
   <h2>Prepend To Prop Tests</h2>
-  <button on:click={prependToPropArray}>Prepend to items (single)</button>
-  <button on:click={prependToPropMultiple}>Prepend to items (multiple)</button>
-  <button on:click={prependToPropFunction}>Prepend to tags (function)</button>
+  <button onclick={prependToPropArray}>Prepend to items (single)</button>
+  <button onclick={prependToPropMultiple}>Prepend to items (multiple)</button>
+  <button onclick={prependToPropFunction}>Prepend to tags (function)</button>
 
   <h2>Edge Case Tests (mergeArrays behavior)</h2>
-  <button on:click={appendToNonArray}>Append to non-array (single + single)</button>
-  <button on:click={prependToNonArray}>Prepend to non-array (single + single)</button>
-  <button on:click={appendArrayToNonArray}>Append array to non-array (single + array)</button>
-  <button on:click={prependArrayToNonArray}>Prepend array to non-array (array + single)</button>
-  <button on:click={appendToUndefined}>Append to undefined</button>
-  <button on:click={prependToUndefined}>Prepend to undefined</button>
+  <button onclick={appendToNonArray}>Append to non-array (single + single)</button>
+  <button onclick={prependToNonArray}>Prepend to non-array (single + single)</button>
+  <button onclick={appendArrayToNonArray}>Append array to non-array (single + array)</button>
+  <button onclick={prependArrayToNonArray}>Prepend array to non-array (array + single)</button>
+  <button onclick={appendToUndefined}>Append to undefined</button>
+  <button onclick={prependToUndefined}>Prepend to undefined</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/ComplexMergeSelective.svelte b/packages/svelte/test-app/Pages/ComplexMergeSelective.svelte
index 352c9f3da..bf4130e1c 100644
--- a/packages/svelte/test-app/Pages/ComplexMergeSelective.svelte
+++ b/packages/svelte/test-app/Pages/ComplexMergeSelective.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let mixed: {
-    name: string
-    users: string[]
-    chat: { data: number[] }
-    post: { id: number; comments: { allowed: boolean; data: string[] } }
+  interface Props {
+    mixed: {
+      name: string
+      users: string[]
+      chat: { data: number[] }
+      post: { id: number; comments: { allowed: boolean; data: string[] } }
+    }
   }
 
+  let { mixed }: Props = $props()
+
   const reload = () => {
     router.reload({
       only: ['mixed'],
@@ -21,4 +25,4 @@
 <div>post.id: {mixed.post.id}</div>
 <div>post.comments.allowed: {mixed.post.comments.allowed ? 'true' : 'false'}</div>
 <div>post.comments.data: {mixed.post.comments.data.join(', ')}</div>
-<button on:click={reload}>Reload</button>
+<button onclick={reload}>Reload</button>
diff --git a/packages/svelte/test-app/Pages/CustomConfig.svelte b/packages/svelte/test-app/Pages/CustomConfig.svelte
index 7dc0b1a6e..77457cdf0 100644
--- a/packages/svelte/test-app/Pages/CustomConfig.svelte
+++ b/packages/svelte/test-app/Pages/CustomConfig.svelte
@@ -5,7 +5,7 @@
   const form = useForm({})
 
   const submit = () => {
-    $form.post($page.url)
+    form.post(page.url)
   }
 
   config.set({
@@ -24,7 +24,7 @@
 
 <Link prefetch href="/dump/get">Prefetch Link</Link>
 <Link method="post" headers={{ 'X-From-Link': 'foo' }} href="/dump/post">Post Dump</Link>
-<button on:click={submit}>Submit Form</button>
-{#if $form.recentlySuccessful}
+<button onclick={submit}>Submit Form</button>
+{#if form.recentlySuccessful}
   <p>Form was recently successful!</p>
 {/if}
diff --git a/packages/svelte/test-app/Pages/DeepMergeProps.svelte b/packages/svelte/test-app/Pages/DeepMergeProps.svelte
index 465d99902..aae009145 100644
--- a/packages/svelte/test-app/Pages/DeepMergeProps.svelte
+++ b/packages/svelte/test-app/Pages/DeepMergeProps.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let foo: { page: number; data: number[]; per_page: number; meta: { label: string } }
-  export let bar: number[]
-  export let baz: number[]
+  interface Props {
+    foo: { page: number; data: number[]; per_page: number; meta: { label: string } }
+    bar: number[]
+    baz: number[]
+  }
+
+  let { foo, bar, baz }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   let page = foo.page
 
   const reloadIt = () => {
@@ -33,5 +38,5 @@
 <div>foo.page is {foo.page}</div>
 <div>foo.per_page is {foo.per_page}</div>
 <div>foo.meta.label is {foo.meta.label}</div>
-<button on:click={reloadIt}>Reload</button>
-<button on:click={getFresh}>Get Fresh</button>
+<button onclick={reloadIt}>Reload</button>
+<button onclick={getFresh}>Get Fresh</button>
diff --git a/packages/svelte/test-app/Pages/DeferredProps/InstantReload.svelte b/packages/svelte/test-app/Pages/DeferredProps/InstantReload.svelte
index 03296516d..b846342aa 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/InstantReload.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/InstantReload.svelte
@@ -2,8 +2,12 @@
   import { Deferred, router } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
-  export let foo: { text: string } | undefined
-  export let bar: { text: string } | undefined
+  interface Props {
+    foo: { text: string } | undefined
+    bar: { text: string } | undefined
+  }
+
+  let { foo, bar }: Props = $props()
 
   onMount(() => {
     router.reload({
@@ -13,15 +17,15 @@
 </script>
 
 <Deferred data="foo">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading foo...</div>
-  </svelte:fragment>
+  {/snippet}
   <div>{foo?.text}</div>
 </Deferred>
 
 <Deferred data="bar">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading bar...</div>
-  </svelte:fragment>
+  {/snippet}
   <div>{bar?.text}</div>
 </Deferred>
diff --git a/packages/svelte/test-app/Pages/DeferredProps/ManyGroups.svelte b/packages/svelte/test-app/Pages/DeferredProps/ManyGroups.svelte
index d718139e3..49a882127 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/ManyGroups.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/ManyGroups.svelte
@@ -1,45 +1,49 @@
 <script lang="ts">
   import { Deferred, inertia } from '@inertiajs/svelte'
 
-  export let foo: { text: string } | undefined
-  export let bar: { text: string } | undefined
-  export let baz: { text: string } | undefined
-  export let qux: { text: string } | undefined
-  export let quux: { text: string } | undefined
+  interface Props {
+    foo: { text: string } | undefined
+    bar: { text: string } | undefined
+    baz: { text: string } | undefined
+    qux: { text: string } | undefined
+    quux: { text: string } | undefined
+  }
+
+  let { foo, bar, baz, qux, quux }: Props = $props()
 </script>
 
 <Deferred data="foo">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading foo...</div>
-  </svelte:fragment>
+  {/snippet}
   {foo?.text}
 </Deferred>
 
 <Deferred data="bar">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading bar...</div>
-  </svelte:fragment>
+  {/snippet}
   {bar?.text}
 </Deferred>
 
 <Deferred data="baz">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading baz...</div>
-  </svelte:fragment>
+  {/snippet}
   {baz?.text}
 </Deferred>
 
 <Deferred data="qux">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading qux...</div>
-  </svelte:fragment>
+  {/snippet}
   {qux?.text}
 </Deferred>
 
 <Deferred data="quux">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading quux...</div>
-  </svelte:fragment>
+  {/snippet}
   {quux?.text}
 </Deferred>
 
diff --git a/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte b/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
index b032ace51..b9d9721a1 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/Page1.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
   import { Deferred, inertia } from '@inertiajs/svelte'
 
-  export let foo: { text: string } | undefined
-  export let bar: { text: string } | undefined
+  interface Props {
+    foo: { text: string } | undefined
+    bar: { text: string } | undefined
+  }
+
+  let { foo, bar }: Props = $props()
 </script>
 
 <Deferred data="foo">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading foo...</div>
-  </svelte:fragment>
+  {/snippet}
   {foo?.text}
 </Deferred>
 
 <Deferred data="bar">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading bar...</div>
-  </svelte:fragment>
+  {/snippet}
   {bar?.text}
 </Deferred>
 
diff --git a/packages/svelte/test-app/Pages/DeferredProps/Page2.svelte b/packages/svelte/test-app/Pages/DeferredProps/Page2.svelte
index b2e87c632..d85e4894c 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/Page2.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/Page2.svelte
@@ -1,21 +1,31 @@
 <script lang="ts">
   import { Deferred } from '@inertiajs/svelte'
 
-  export let baz: string | undefined
-  export let qux: string | undefined
+  interface Props {
+    baz: string | undefined
+    qux: string | undefined
+  }
+
+  let { baz, qux }: Props = $props()
 </script>
 
 <Deferred data="baz">
-  <div slot="fallback">Loading baz...</div>
+  {#snippet fallback()}
+    <div>Loading baz...</div>
+  {/snippet}
   {baz}
 </Deferred>
 
 <Deferred data="qux">
-  <div slot="fallback">Loading qux...</div>
+  {#snippet fallback()}
+    <div>Loading qux...</div>
+  {/snippet}
   {qux}
 </Deferred>
 
 <Deferred data={['baz', 'qux']}>
-  <div slot="fallback">Loading baz and qux...</div>
+  {#snippet fallback()}
+    <div>Loading baz and qux...</div>
+  {/snippet}
   both {baz} and {qux}
 </Deferred>
diff --git a/packages/svelte/test-app/Pages/DeferredProps/Page3.svelte b/packages/svelte/test-app/Pages/DeferredProps/Page3.svelte
index 81330305e..a93d1ebc9 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/Page3.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/Page3.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
   import { Deferred } from '@inertiajs/svelte'
 
-  export let alpha: string | undefined
-  export let beta: string | undefined
+  interface Props {
+    alpha: string | undefined
+    beta: string | undefined
+  }
+
+  let { alpha, beta }: Props = $props()
 </script>
 
 <Deferred data="alpha">
-  <div slot="fallback">Loading alpha...</div>
+  {#snippet fallback()}
+    <div>Loading alpha...</div>
+  {/snippet}
   {alpha}
 </Deferred>
 
 <Deferred data="beta">
-  <div slot="fallback">Loading beta...</div>
+  {#snippet fallback()}
+    <div>Loading beta...</div>
+  {/snippet}
   {beta}
 </Deferred>
diff --git a/packages/svelte/test-app/Pages/DeferredProps/PartialReloads.svelte b/packages/svelte/test-app/Pages/DeferredProps/PartialReloads.svelte
index c467432f3..9fed54773 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/PartialReloads.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/PartialReloads.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { Deferred, router } from '@inertiajs/svelte'
 
-  export let foo: { timestamp: string } | undefined
-  export let bar: { timestamp: string } | undefined
+  interface Props {
+    foo: { timestamp: string } | undefined
+    bar: { timestamp: string } | undefined
+  }
+
+  let { foo, bar }: Props = $props()
 
   const reloadOnlyFoo = () => {
     router.reload({
@@ -24,19 +28,19 @@
 </script>
 
 <Deferred data="foo">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading foo...</div>
-  </svelte:fragment>
+  {/snippet}
   <div id="foo-timestamp">{foo?.timestamp}</div>
 </Deferred>
 
 <Deferred data="bar">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading bar...</div>
-  </svelte:fragment>
+  {/snippet}
   <div id="bar-timestamp">{bar?.timestamp}</div>
 </Deferred>
 
-<button on:click={reloadOnlyFoo}>Reload foo only</button>
-<button on:click={reloadOnlyBar}>Reload bar only</button>
-<button on:click={reloadBoth}>Reload both</button>
+<button onclick={reloadOnlyFoo}>Reload foo only</button>
+<button onclick={reloadOnlyBar}>Reload bar only</button>
+<button onclick={reloadBoth}>Reload both</button>
diff --git a/packages/svelte/test-app/Pages/DeferredProps/WithErrors.svelte b/packages/svelte/test-app/Pages/DeferredProps/WithErrors.svelte
index 1c42c7746..da5d37b4b 100644
--- a/packages/svelte/test-app/Pages/DeferredProps/WithErrors.svelte
+++ b/packages/svelte/test-app/Pages/DeferredProps/WithErrors.svelte
@@ -1,30 +1,34 @@
 <script lang="ts">
   import { Deferred, page, useForm } from '@inertiajs/svelte'
 
-  export let foo: { text: string } | undefined
+  interface Props {
+    foo: { text: string } | undefined
+  }
+
+  let { foo }: Props = $props()
 
   const form = useForm({
     name: '',
   })
 
   const submit = () => {
-    $form.post('/deferred-props/with-errors')
+    form.post('/deferred-props/with-errors')
   }
 </script>
 
 <Deferred data="foo">
-  <svelte:fragment slot="fallback">
+  {#snippet fallback()}
     <div>Loading foo...</div>
-  </svelte:fragment>
+  {/snippet}
 
   <div id="foo">{foo?.text}</div>
 </Deferred>
 
-{#if $page.props.errors?.name}
-  <p id="page-error">{$page.props.errors.name}</p>
+{#if page.props.errors?.name}
+  <p id="page-error">{page.props.errors.name}</p>
 {/if}
-{#if $form.errors.name}
-  <p id="form-error">{$form.errors.name}</p>
+{#if form.errors.name}
+  <p id="form-error">{form.errors.name}</p>
 {/if}
 
-<button type="button" on:click={submit}>Submit</button>
+<button type="button" onclick={submit}>Submit</button>
diff --git a/packages/svelte/test-app/Pages/Dump.svelte b/packages/svelte/test-app/Pages/Dump.svelte
index 7f378d11e..95eb44e45 100644
--- a/packages/svelte/test-app/Pages/Dump.svelte
+++ b/packages/svelte/test-app/Pages/Dump.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
-  import { beforeUpdate } from 'svelte'
   import { page } from '@inertiajs/svelte'
   import type { Method } from '@inertiajs/core'
   import type { MulterFile } from '../types'
 
-  export let headers: Record<string, string>
-  export let method: Method
-  export let form: Record<string, unknown>
-  export let files: MulterFile[] | object = {}
-  export let url: string
-  export let query: Record<string, unknown>
+  interface Props {
+    headers: Record<string, string>
+    method: Method
+    form: Record<string, unknown>
+    files: MulterFile[] | object
+    url: string
+    query: Record<string, unknown>
+  }
+
+  let { headers, method, form, files = {}, url, query }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   const dump = {
     headers,
     method,
@@ -18,10 +22,10 @@
     files,
     query,
     url,
-    $page: $page,
+    page: page,
   }
 
-  beforeUpdate(() => {
+  $effect(() => {
     window._inertia_request_dump = dump
   })
 </script>
diff --git a/packages/svelte/test-app/Pages/ErrorModal.svelte b/packages/svelte/test-app/Pages/ErrorModal.svelte
index 1ca579353..a77ffd559 100644
--- a/packages/svelte/test-app/Pages/ErrorModal.svelte
+++ b/packages/svelte/test-app/Pages/ErrorModal.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { config, router } from '@inertiajs/svelte'
 
-  export let dialog: boolean = false
+  interface Props {
+    dialog?: boolean
+  }
+
+  let { dialog = false }: Props = $props()
 
   const invalidVisit = () => {
     router.post('/non-inertia')
@@ -11,22 +15,24 @@
     router.post('/json')
   }
 
-  if (dialog) {
-    config.set('future.useDialogForErrorModal', true)
-  }
+  $effect(() => {
+    if (dialog) {
+      config.set('future.useDialogForErrorModal', true)
+    }
+  })
 </script>
 
 <div>
   <span
-    on:click={invalidVisit}
-    on:keydown={(e) => e.key === 'Enter' && invalidVisit()}
+    onclick={invalidVisit}
+    onkeydown={(e) => e.key === 'Enter' && invalidVisit()}
     role="button"
     tabindex="0"
     class="invalid-visit">Invalid Visit</span
   >
   <span
-    on:click={invalidVisitJson}
-    on:keydown={(e) => e.key === 'Enter' && invalidVisitJson()}
+    onclick={invalidVisitJson}
+    onkeydown={(e) => e.key === 'Enter' && invalidVisitJson()}
     role="button"
     tabindex="0"
     class="invalid-visit-json">Invalid Visit (JSON response)</span
diff --git a/packages/svelte/test-app/Pages/Events.svelte b/packages/svelte/test-app/Pages/Events.svelte
index 9a59e8b56..b3ed4f328 100644
--- a/packages/svelte/test-app/Pages/Events.svelte
+++ b/packages/svelte/test-app/Pages/Events.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   declare global {
     interface Window {
       messages: unknown[]
@@ -19,18 +19,22 @@
     window.messages.push(...args)
   }
 
-  const withoutEventListeners = () => {
-    router.post($page.url, {})
+  const withoutEventListeners = (e: Event) => {
+    e.preventDefault()
+
+    router.post(page.url, {})
   }
 
-  const removeInertiaListener = () => {
+  const removeInertiaListener = (e: Event) => {
+    e.preventDefault()
+
     const removeEventListener = router.on('before', () => internalAlert('Inertia.on(before)'))
 
     internalAlert('Removing Inertia.on Listener')
     removeEventListener()
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: () => internalAlert('onBefore'),
@@ -39,7 +43,9 @@
     )
   }
 
-  const beforeVisit = () => {
+  const beforeVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('before', (event) => {
       internalAlert('Inertia.on(before)')
       internalAlert(event)
@@ -51,7 +57,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: (event) => {
@@ -63,12 +69,14 @@
     )
   }
 
-  const beforeVisitPreventLocal = () => {
+  const beforeVisitPreventLocal = (e: Event) => {
+    e.preventDefault()
+
     document.addEventListener('inertia:before', () => internalAlert('addEventListener(inertia:before)'))
     router.on('before', () => internalAlert('Inertia.on(before)'))
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: () => {
@@ -80,7 +88,8 @@
     )
   }
 
-  const beforeVisitPreventGlobalInertia = () => {
+  const beforeVisitPreventGlobalInertia = (e: Event) => {
+    e.preventDefault()
     document.addEventListener('inertia:before', () => internalAlert('addEventListener(inertia:before)'))
     router.on('before', () => {
       internalAlert('Inertia.on(before)')
@@ -88,7 +97,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: () => internalAlert('onBefore'),
@@ -97,7 +106,9 @@
     )
   }
 
-  const beforeVisitPreventGlobalNative = () => {
+  const beforeVisitPreventGlobalNative = (e: Event) => {
+    e.preventDefault()
+
     router.on('before', () => internalAlert('Inertia.on(before)'))
     document.addEventListener('inertia:before', (event) => {
       internalAlert('addEventListener(inertia:before)')
@@ -105,7 +116,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: () => internalAlert('onBefore'),
@@ -114,13 +125,15 @@
     )
   }
 
-  const cancelTokenVisit = () => {
+  const cancelTokenVisit = (e: Event) => {
+    e.preventDefault()
+
     // @ts-expect-error - We're testing that the router doesn't have an onCancelToken listener
     router.on('cancelToken', () => internalAlert('This listener should not have been called.'))
     document.addEventListener('inertia:cancelToken', () => internalAlert('This listener should not have been called.'))
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onCancelToken: (event) => {
@@ -131,7 +144,9 @@
     )
   }
 
-  const startVisit = () => {
+  const startVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('start', (event) => {
       internalAlert('Inertia.on(start)')
       internalAlert(event)
@@ -143,7 +158,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onStart: (event) => {
@@ -154,7 +169,9 @@
     )
   }
 
-  const progressVisit = () => {
+  const progressVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('progress', (event) => {
       internalAlert('Inertia.on(progress)')
       internalAlert(event)
@@ -165,7 +182,7 @@
       internalAlert(event)
     })
 
-    router.post($page.url, payloadWithFile, {
+    router.post(page.url, payloadWithFile, {
       onProgress: (event) => {
         internalAlert('onProgress')
         internalAlert(event)
@@ -173,7 +190,9 @@
     })
   }
 
-  const progressNoFilesVisit = () => {
+  const progressNoFilesVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('progress', (event) => {
       internalAlert('Inertia.on(progress)')
       internalAlert(event)
@@ -185,7 +204,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onBefore: () => internalAlert('progressNoFilesOnBefore'),
@@ -197,7 +216,9 @@
     )
   }
 
-  const cancelVisit = () => {
+  const cancelVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('cancel', (event) => {
       internalAlert('Inertia.on(cancel)')
       internalAlert(event)
@@ -209,7 +230,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onCancelToken: (token) => {
@@ -224,7 +245,9 @@
     )
   }
 
-  const errorVisit = () => {
+  const errorVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('error', (event) => {
       internalAlert('Inertia.on(error)')
       internalAlert(event)
@@ -247,7 +270,9 @@
     )
   }
 
-  const errorPromiseVisit = () => {
+  const errorPromiseVisit = (e: Event) => {
+    e.preventDefault()
+
     router.post(
       '/events/errors',
       {},
@@ -259,7 +284,9 @@
     )
   }
 
-  const successVisit = () => {
+  const successVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('success', (event) => {
       internalAlert('Inertia.on(success)')
       internalAlert(event)
@@ -271,7 +298,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onError: () => internalAlert('This listener should not have been called'),
@@ -283,9 +310,11 @@
     )
   }
 
-  const successPromiseVisit = () => {
+  const successPromiseVisit = (e: Event) => {
+    e.preventDefault()
+
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onSuccess: () => callbackSuccessErrorPromise('onSuccess'),
@@ -295,7 +324,9 @@
     )
   }
 
-  const finishVisit = () => {
+  const finishVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('finish', (event) => {
       internalAlert('Inertia.on(finish)')
       internalAlert(event)
@@ -307,7 +338,7 @@
     })
 
     router.post(
-      $page.url,
+      page.url,
       {},
       {
         onFinish: (event) => {
@@ -318,7 +349,9 @@
     )
   }
 
-  const invalidVisit = () => {
+  const invalidVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('invalid', (event) => {
       internalAlert('Inertia.on(invalid)')
       internalAlert(event)
@@ -339,7 +372,9 @@
     )
   }
 
-  const exceptionVisit = () => {
+  const exceptionVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('exception', (event) => {
       internalAlert('Inertia.on(exception)')
       internalAlert(event)
@@ -360,7 +395,9 @@
     )
   }
 
-  const navigateVisit = () => {
+  const navigateVisit = (e: Event) => {
+    e.preventDefault()
+
     router.on('navigate', (event) => {
       internalAlert('Inertia.on(navigate)')
       internalAlert(event)
@@ -421,15 +458,21 @@
     }
   }
 
-  const lifecycleSuccess = () => {
-    router.post($page.url, payloadWithFile, registerAllListeners())
+  const lifecycleSuccess = (e: Event) => {
+    e.preventDefault()
+
+    router.post(page.url, payloadWithFile, registerAllListeners())
   }
 
-  const lifecycleError = () => {
+  const lifecycleError = (e: Event) => {
+    e.preventDefault()
+
     router.post('/events/errors', payloadWithFile, registerAllListeners())
   }
 
-  const lifecycleCancel = () => {
+  const lifecycleCancel = (e: Event) => {
+    e.preventDefault()
+
     router.post('/sleep', payloadWithFile, {
       ...registerAllListeners(),
       onCancelToken: (token) => {
@@ -443,10 +486,12 @@
     })
   }
 
-  const lifecycleCancelAfterFinish = () => {
+  const lifecycleCancelAfterFinish = (e: Event) => {
+    e.preventDefault()
+
     let cancelToken: { cancel: () => void } | null = null
 
-    router.post($page.url, payloadWithFile, {
+    router.post(page.url, payloadWithFile, {
       ...registerAllListeners(),
       onCancelToken: (token) => {
         internalAlert('onCancelToken')
@@ -488,151 +533,142 @@
 
 <div>
   <!-- Listeners -->
-  <a href={'#'} on:click|preventDefault={withoutEventListeners} class="without-listeners">Basic Visit</a>
-  <a href={'#'} on:click|preventDefault={removeInertiaListener} class="remove-inertia-listener"
-    >Remove Inertia Listener</a
-  >
+  <a href={'#'} onclick={withoutEventListeners} class="without-listeners">Basic Visit</a>
+  <a href={'#'} onclick={removeInertiaListener} class="remove-inertia-listener">Remove Inertia Listener</a>
 
   <!-- Events: Before -->
-  <a href={'#'} on:click|preventDefault={beforeVisit} class="before">Before Event</a>
-  <a href={'#'} on:click|preventDefault={beforeVisitPreventLocal} class="before-prevent-local">Before Event (Prevent)</a
-  >
+  <a href={'#'} onclick={beforeVisit} class="before">Before Event</a>
+  <a href={'#'} onclick={beforeVisitPreventLocal} class="before-prevent-local">Before Event (Prevent)</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:before={(event) => internalAlert('linkOnBefore', event.detail.visit)}
-    on:start={() => internalAlert('linkOnStart')}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onbefore={(event) => internalAlert('linkOnBefore', event.detail.visit)}
+    onstart={() => internalAlert('linkOnStart')}
     class="link-before">Before Event Link</button
   >
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:before={(event) => {
+    use:inertia={{ href: page.url, method: 'post' }}
+    onbefore={(event) => {
       event.preventDefault()
       internalAlert('linkOnBefore')
     }}
-    on:start={() => {
+    onstart={() => {
       internalAlert('This listener should not have been called.')
     }}
     class="link-before-prevent-local">Before Event Link (Prevent)</button
   >
-  <a href={'#'} on:click|preventDefault={beforeVisitPreventGlobalInertia} class="before-prevent-global-inertia"
+  <a href={'#'} onclick={beforeVisitPreventGlobalInertia} class="before-prevent-global-inertia"
     >Before Event - Prevent globally using Inertia Event Listener</a
   >
-  <a href={'#'} on:click|preventDefault={beforeVisitPreventGlobalNative} class="before-prevent-global-native"
+  <a href={'#'} onclick={beforeVisitPreventGlobalNative} class="before-prevent-global-native"
     >Before Event - Prevent globally using Native Event Listeners</a
   >
 
   <!-- Events: CancelToken -->
-  <a href={'#'} on:click|preventDefault={cancelTokenVisit} class="canceltoken">Cancel Token Event</a>
+  <a href={'#'} onclick={cancelTokenVisit} class="canceltoken">Cancel Token Event</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:cancel-token={(event) => internalAlert('linkOnCancelToken', event.detail)}
+    use:inertia={{ href: page.url, method: 'post' }}
+    oncancel-token={(event) => internalAlert('linkOnCancelToken', event.detail)}
     class="link-canceltoken">Cancel Token Event Link</button
   >
 
   <!-- Events: Cancel -->
-  <a href={'#'} on:click|preventDefault={cancelVisit} class="cancel">Cancel Event</a>
+  <a href={'#'} onclick={cancelVisit} class="cancel">Cancel Event</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:cancel-token={handleCancelToken}
-    on:cancel={handleCancel}
+    use:inertia={{ href: page.url, method: 'post' }}
+    oncancel-token={handleCancelToken}
+    oncancel={handleCancel}
     class="link-cancel">Cancel Event Link</button
   >
 
   <!-- Events: Start -->
-  <a href={'#'} on:click|preventDefault={startVisit} class="start">Start Event</a>
+  <a href={'#'} onclick={startVisit} class="start">Start Event</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:start={(event) => internalAlert('linkOnStart', event.detail.visit)}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onstart={(event) => internalAlert('linkOnStart', event.detail.visit)}
     class="link-start">Start Event Link</button
   >
 
   <!-- Events: Progress -->
-  <a href={'#'} on:click|preventDefault={progressVisit} class="progress">Progress Event</a>
-  <a href={'#'} on:click|preventDefault={progressNoFilesVisit} class="progress-no-files"
-    >Missing Progress Event (no files)</a
-  >
+  <a href={'#'} onclick={progressVisit} class="progress">Progress Event</a>
+  <a href={'#'} onclick={progressNoFilesVisit} class="progress-no-files">Missing Progress Event (no files)</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post', data: payloadWithFile }}
-    on:progress={handleProgress}
+    use:inertia={{ href: page.url, method: 'post', data: payloadWithFile }}
+    onprogress={handleProgress}
     class="link-progress">Progress Event Link</button
   >
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:before={() => internalAlert('linkProgressNoFilesOnBefore')}
-    on:progress={handleProgress}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onbefore={() => internalAlert('linkProgressNoFilesOnBefore')}
+    onprogress={handleProgress}
     class="link-progress-no-files">Progress Event Link (no files)</button
   >
 
   <!-- Events: Error -->
-  <a href={'#'} on:click|preventDefault={errorVisit} class="error">Error Event</a>
-  <a href={'#'} on:click|preventDefault={errorPromiseVisit} class="error-promise"
-    >Error Event (delaying onFinish w/ Promise)</a
-  >
+  <a href={'#'} onclick={errorVisit} class="error">Error Event</a>
+  <a href={'#'} onclick={errorPromiseVisit} class="error-promise">Error Event (delaying onFinish w/ Promise)</a>
   <button
     use:inertia={{ href: '/events/errors', method: 'post' }}
-    on:error={handleError}
-    on:success={() => internalAlert('This listener should not have been called')}
+    onerror={handleError}
+    onsuccess={() => internalAlert('This listener should not have been called')}
     class="link-error">Error Event Link</button
   >
   <button
     use:inertia={{ href: '/events/errors', method: 'post' }}
-    on:error={() => callbackSuccessErrorPromise('linkOnError')}
-    on:success={() => internalAlert('This listener should not have been called')}
-    on:finish={() => internalAlert('linkOnFinish')}
+    onerror={() => callbackSuccessErrorPromise('linkOnError')}
+    onsuccess={() => internalAlert('This listener should not have been called')}
+    onfinish={() => internalAlert('linkOnFinish')}
     class="link-error-promise">Error Event Link (delaying onFinish w/ Promise)</button
   >
 
   <!-- Events: Success -->
-  <a href={'#'} on:click|preventDefault={successVisit} class="success">Success Event</a>
-  <a href={'#'} on:click|preventDefault={successPromiseVisit} class="success-promise"
-    >Success Event (delaying onFinish w/ Promise)</a
-  >
+  <a href={'#'} onclick={successVisit} class="success">Success Event</a>
+  <a href={'#'} onclick={successPromiseVisit} class="success-promise">Success Event (delaying onFinish w/ Promise)</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:error={() => internalAlert('This listener should not have been called')}
-    on:success={(event) => internalAlert('linkOnSuccess', event.detail.page)}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onerror={() => internalAlert('This listener should not have been called')}
+    onsuccess={(event) => internalAlert('linkOnSuccess', event.detail.page)}
     class="link-success">Success Event Link</button
   >
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:error={() => internalAlert('This listener should not have been called')}
-    on:success={() => callbackSuccessErrorPromise('linkOnSuccess')}
-    on:finish={() => internalAlert('linkOnFinish')}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onerror={() => internalAlert('This listener should not have been called')}
+    onsuccess={() => callbackSuccessErrorPromise('linkOnSuccess')}
+    onfinish={() => internalAlert('linkOnFinish')}
     class="link-success-promise">Success Event Link (delaying onFinish w/ Promise)</button
   >
 
   <!-- Events: Invalid -->
-  <a href={'#'} on:click|preventDefault={invalidVisit} class="invalid">Invalid Event</a>
+  <a href={'#'} onclick={invalidVisit} class="invalid">Invalid Event</a>
 
   <!-- Events: Exception -->
-  <a href={'#'} on:click|preventDefault={exceptionVisit} class="exception">Exception Event</a>
+  <a href={'#'} onclick={exceptionVisit} class="exception">Exception Event</a>
 
   <!-- Events: Finish -->
-  <a href={'#'} on:click|preventDefault={finishVisit} class="finish">Finish Event</a>
+  <a href={'#'} onclick={finishVisit} class="finish">Finish Event</a>
   <button
-    use:inertia={{ href: $page.url, method: 'post' }}
-    on:finish={(event) => internalAlert('linkOnFinish', event.detail.visit)}
+    use:inertia={{ href: page.url, method: 'post' }}
+    onfinish={(event) => internalAlert('linkOnFinish', event.detail.visit)}
     class="link-finish">Finish Event Link</button
   >
 
   <!-- Events: Navigate -->
-  <a href={'#'} on:click|preventDefault={navigateVisit} class="navigate">Navigate Event</a>
+  <a href={'#'} onclick={navigateVisit} class="navigate">Navigate Event</a>
 
   <!-- Events: Prefetch -->
   <button
     use:inertia={{ href: '/prefetch/2', prefetch: 'hover' }}
-    on:prefetching={(event) => internalAlert('linkOnPrefetching', event.detail.visit)}
-    on:prefetched={(event) => internalAlert('linkOnPrefetched', event.detail.response, event.detail.visit)}
+    onprefetching={(event) => internalAlert('linkOnPrefetching', event.detail.visit)}
+    onprefetched={(event) => internalAlert('linkOnPrefetched', event.detail.response, event.detail.visit)}
     class="link-prefetch-hover"
   >
     Prefetch Event Link (Hover)
   </button>
 
   <!-- Lifecycles -->
-  <a href={'#'} on:click|preventDefault={lifecycleSuccess} class="lifecycle-success">Lifecycle Success</a>
-  <a href={'#'} on:click|preventDefault={lifecycleError} class="lifecycle-error">Lifecycle Error</a>
-  <a href={'#'} on:click|preventDefault={lifecycleCancel} class="lifecycle-cancel">Lifecycle Cancel</a>
-  <a href={'#'} on:click|preventDefault={lifecycleCancelAfterFinish} class="lifecycle-cancel-after-finish"
+  <a href={'#'} onclick={lifecycleSuccess} class="lifecycle-success">Lifecycle Success</a>
+  <a href={'#'} onclick={lifecycleError} class="lifecycle-error">Lifecycle Error</a>
+  <a href={'#'} onclick={lifecycleCancel} class="lifecycle-cancel">Lifecycle Cancel</a>
+  <a href={'#'} onclick={lifecycleCancelAfterFinish} class="lifecycle-cancel-after-finish"
     >Lifecycle Cancel - After Finish</a
   >
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte b/packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte
index 1ed2b1536..510611932 100644
--- a/packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte
@@ -17,11 +17,13 @@
 <div>
   <h1>Test getData() and getFormData() Methods</h1>
 
-  <Form let:getData let:getFormData>
-    <input type="text" id="name" name="name" />
+  <Form>
+    {#snippet children({ getData, getFormData })}
+      <input type="text" id="name" name="name" />
 
-    <button type="button" on:click={() => testGetData(getData)}> Test getData() </button>
+      <button type="button" onclick={() => testGetData(getData)}> Test getData() </button>
 
-    <button type="button" on:click={() => testGetFormData(getFormData)}> Test getFormData() </button>
+      <button type="button" onclick={() => testGetFormData(getFormData)}> Test getFormData() </button>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/DefaultValue.svelte b/packages/svelte/test-app/Pages/FormComponent/DefaultValue.svelte
index 0b2cda80b..4322d1158 100644
--- a/packages/svelte/test-app/Pages/FormComponent/DefaultValue.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/DefaultValue.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
 
-  export let user: {
-    name: string
+  interface Props {
+    user: {
+      name: string
+    }
   }
+
+  let { user }: Props = $props()
 </script>
 
-<Form action="/form-component/default-value" method="patch" let:errors>
-  <h1>Form Default Values</h1>
+<Form action="/form-component/default-value" method="patch">
+  {#snippet children({ errors })}
+    <h1>Form Default Values</h1>
 
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value={user.name} />
-    <div id="error_name">{errors['user.name']}</div>
-  </div>
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value={user.name} />
+      <div id="error_name">{errors['user.name']}</div>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/DisableWhileProcessing.svelte b/packages/svelte/test-app/Pages/FormComponent/DisableWhileProcessing.svelte
index ef1ef38ba..42b90f8b1 100644
--- a/packages/svelte/test-app/Pages/FormComponent/DisableWhileProcessing.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/DisableWhileProcessing.svelte
@@ -1,22 +1,30 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
-  export let disable: boolean = false
-  let url = `/form-component/disable-while-processing/${disable ? 'yes' : 'no'}/submit`
+  interface Props {
+    disable?: boolean
+  }
+
+  let { disable = false }: Props = $props()
+
+  // svelte-ignore state_referenced_locally
+  let url = $state(`/form-component/disable-while-processing/${disable ? 'yes' : 'no'}/submit`)
 </script>
 
 <div>
   <h1>Form Disable While Processing Test</h1>
 
-  <Form method="post" let:errors bind:action={url} disableWhileProcessing={disable}>
-    <div>
-      <input type="text" name="name" placeholder="Name" value="John Doe" />
-      {#if errors.name}
-        <p id="error_name">{errors.name}</p>
-      {/if}
-    </div>
+  <Form method="post" bind:action={url} disableWhileProcessing={disable}>
+    {#snippet children({ errors })}
+      <div>
+        <input type="text" name="name" placeholder="Name" value="John Doe" />
+        {#if errors.name}
+          <p id="error_name">{errors.name}</p>
+        {/if}
+      </div>
 
-    <div>
-      <button type="submit">Submit</button>
-    </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Elements.svelte b/packages/svelte/test-app/Pages/FormComponent/Elements.svelte
index 7986a54b4..0b17f4740 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Elements.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Elements.svelte
@@ -2,118 +2,126 @@
   import { config, Form } from '@inertiajs/svelte'
   import type { QueryStringArrayFormatOption } from '@inertiajs/core'
 
-  export let queryStringArrayFormat: QueryStringArrayFormatOption | 'force-brackets'
+  interface Props {
+    queryStringArrayFormat: QueryStringArrayFormatOption | 'force-brackets'
+  }
 
-  const format = queryStringArrayFormat === 'force-brackets' ? 'brackets' : queryStringArrayFormat
+  let { queryStringArrayFormat }: Props = $props()
 
-  if (queryStringArrayFormat === 'force-brackets') {
-    config.set('form.forceIndicesArrayFormatInFormData', false)
-  }
+  const format = $derived(queryStringArrayFormat === 'force-brackets' ? 'brackets' : queryStringArrayFormat)
+
+  $effect(() => {
+    if (queryStringArrayFormat === 'force-brackets') {
+      config.set('form.forceIndicesArrayFormatInFormData', false)
+    }
+  })
 </script>
 
-<Form action="/dump/post" method="post" let:isDirty queryStringArrayFormat={format}>
-  <h1>Form Elements</h1>
-
-  <div>
-    Form is <span>{isDirty ? 'dirty' : 'clean'}</span>
-  </div>
-
-  <!-- Text input -->
-  <div>
-    <input type="text" name="name" id="name" placeholder="Name" />
-  </div>
-
-  <!-- Select with default selected option -->
-  <div>
-    <select name="country" id="country" value="uk">
-      <option value="us">United States</option>
-      <option value="ca">Canada</option>
-      <option value="uk">United Kingdom</option>
-    </select>
-  </div>
-
-  <!-- Select with default disabled option -->
-  <div>
-    <select name="role" id="role" value="">
-      <option value="" disabled>Role</option>
-      <option value="User">User</option>
-      <option value="Admin">Admin</option>
-      <option value="Super">Super</option>
-    </select>
-  </div>
-
-  <!-- Radio buttons -->
-  <div>
-    <label><input type="radio" name="plan" value="free" /> Free</label>
-    <label><input type="radio" name="plan" value="pro" /> Pro</label>
-    <label><input type="radio" name="plan" value="enterprise" /> Enterprise</label>
-  </div>
-
-  <!-- Checkbox (single) -->
-  <div>
-    <input type="checkbox" name="subscribe" value="yes" id="subscribe" />
-    <label for="subscribe">Subscribe to newsletter</label>
-  </div>
-
-  <!-- Checkbox (multiple) -->
-  <div>
-    <label><input type="checkbox" name="interests[]" value="sports" /> Sports</label>
-    <label><input type="checkbox" name="interests[]" value="music" /> Music</label>
-    <label><input type="checkbox" name="interests[]" value="tech" /> Tech</label>
-  </div>
-
-  <!-- Multiple select -->
-  <div>
-    <select name="skills[]" id="skills" multiple value="">
-      <option disabled value="">Skills</option>
-      <option value="vue">Vue</option>
-      <option value="react">React</option>
-      <option value="angular">Angular</option>
-      <option value="svelte">Svelte</option>
-    </select>
-  </div>
-
-  <!-- File input (single) -->
-  <div>
-    <input type="file" name="avatar" id="avatar" placeholder="Avatar" />
-  </div>
-
-  <!-- File input (multiple) -->
-  <div>
-    <input type="file" name="documents[]" id="documents" multiple placeholder="Documents" />
-  </div>
-
-  <!-- Textarea -->
-  <div>
-    <textarea name="bio" id="bio" rows="3" placeholder="Bio"></textarea>
-  </div>
-
-  <!-- Hidden input -->
-  <div>
-    <input type="hidden" name="token" id="token" value="abc123" />
-  </div>
-
-  <!-- Number input -->
-  <div>
-    <input type="number" name="age" id="age" placeholder="Age" />
-  </div>
-
-  <!-- Deep nested input -->
-  <div>
-    <input type="text" name="user[address][street]" id="nested_street" placeholder="Street" />
-  </div>
-
-  <!-- Indexed array of objects -->
-  <div>
-    <input type="text" name="items[0][name]" value="Item A" id="item_a" />
-    <input type="text" name="items[1][name]" value="Item B" id="item_b" />
-  </div>
-
-  <!-- Disabled input (should be ignored) -->
-  <div>
-    <input type="text" name="disabled_field" value="Ignore me" disabled />
-  </div>
-
-  <button type="submit">Submit</button>
-  <button type="reset">Reset</button>
+<Form action="/dump/post" method="post" queryStringArrayFormat={format}>
+  {#snippet children({ isDirty })}
+    <h1>Form Elements</h1>
+
+    <div>
+      Form is <span>{isDirty ? 'dirty' : 'clean'}</span>
+    </div>
+
+    <!-- Text input -->
+    <div>
+      <input type="text" name="name" id="name" placeholder="Name" />
+    </div>
+
+    <!-- Select with default selected option -->
+    <div>
+      <select name="country" id="country" value="uk">
+        <option value="us">United States</option>
+        <option value="ca">Canada</option>
+        <option value="uk">United Kingdom</option>
+      </select>
+    </div>
+
+    <!-- Select with default disabled option -->
+    <div>
+      <select name="role" id="role" value="">
+        <option value="" disabled>Role</option>
+        <option value="User">User</option>
+        <option value="Admin">Admin</option>
+        <option value="Super">Super</option>
+      </select>
+    </div>
+
+    <!-- Radio buttons -->
+    <div>
+      <label><input type="radio" name="plan" value="free" /> Free</label>
+      <label><input type="radio" name="plan" value="pro" /> Pro</label>
+      <label><input type="radio" name="plan" value="enterprise" /> Enterprise</label>
+    </div>
+
+    <!-- Checkbox (single) -->
+    <div>
+      <input type="checkbox" name="subscribe" value="yes" id="subscribe" />
+      <label for="subscribe">Subscribe to newsletter</label>
+    </div>
+
+    <!-- Checkbox (multiple) -->
+    <div>
+      <label><input type="checkbox" name="interests[]" value="sports" /> Sports</label>
+      <label><input type="checkbox" name="interests[]" value="music" /> Music</label>
+      <label><input type="checkbox" name="interests[]" value="tech" /> Tech</label>
+    </div>
+
+    <!-- Multiple select -->
+    <div>
+      <select name="skills[]" id="skills" multiple value="">
+        <option disabled value="">Skills</option>
+        <option value="vue">Vue</option>
+        <option value="react">React</option>
+        <option value="angular">Angular</option>
+        <option value="svelte">Svelte</option>
+      </select>
+    </div>
+
+    <!-- File input (single) -->
+    <div>
+      <input type="file" name="avatar" id="avatar" placeholder="Avatar" />
+    </div>
+
+    <!-- File input (multiple) -->
+    <div>
+      <input type="file" name="documents[]" id="documents" multiple placeholder="Documents" />
+    </div>
+
+    <!-- Textarea -->
+    <div>
+      <textarea name="bio" id="bio" rows="3" placeholder="Bio"></textarea>
+    </div>
+
+    <!-- Hidden input -->
+    <div>
+      <input type="hidden" name="token" id="token" value="abc123" />
+    </div>
+
+    <!-- Number input -->
+    <div>
+      <input type="number" name="age" id="age" placeholder="Age" />
+    </div>
+
+    <!-- Deep nested input -->
+    <div>
+      <input type="text" name="user[address][street]" id="nested_street" placeholder="Street" />
+    </div>
+
+    <!-- Indexed array of objects -->
+    <div>
+      <input type="text" name="items[0][name]" value="Item A" id="item_a" />
+      <input type="text" name="items[1][name]" value="Item B" id="item_b" />
+    </div>
+
+    <!-- Disabled input (should be ignored) -->
+    <div>
+      <input type="text" name="disabled_field" value="Ignore me" disabled />
+    </div>
+
+    <button type="submit">Submit</button>
+    <button type="reset">Reset</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/EmptyAction.svelte b/packages/svelte/test-app/Pages/FormComponent/EmptyAction.svelte
index b971d6f2e..f61f56b24 100644
--- a/packages/svelte/test-app/Pages/FormComponent/EmptyAction.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/EmptyAction.svelte
@@ -5,16 +5,18 @@
 <div>
   <h1>Form Empty Action Test</h1>
 
-  <Form method="post" let:errors>
-    <div>
-      <input type="text" name="name" placeholder="Name" value="John Doe" />
-      {#if errors.name}
-        <p id="error_name">{errors.name}</p>
-      {/if}
-    </div>
+  <Form method="post">
+    {#snippet children({ errors })}
+      <div>
+        <input type="text" name="name" placeholder="Name" value="John Doe" />
+        {#if errors.name}
+          <p id="error_name">{errors.name}</p>
+        {/if}
+      </div>
 
-    <div>
-      <button type="submit">Submit</button>
-    </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Errors.svelte b/packages/svelte/test-app/Pages/FormComponent/Errors.svelte
index fc65a6526..5b617b897 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Errors.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Errors.svelte
@@ -1,53 +1,47 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
 
-  let errorBag: string | null = null
+  let errorBag: string | null = $state(null)
 </script>
 
-<Form
-  action={errorBag ? '/form-component/errors/bag' : '/form-component/errors'}
-  method="post"
-  {errorBag}
-  let:errors
-  let:hasErrors
-  let:setError
-  let:clearErrors
->
-  <h1>Form Errors</h1>
+<Form action={errorBag ? '/form-component/errors/bag' : '/form-component/errors'} method="post" {errorBag}>
+  {#snippet children({ errors, hasErrors, setError, clearErrors })}
+    <h1>Form Errors</h1>
 
-  {#if hasErrors}
-    <div>Form has errors</div>
-  {:else}
-    <div>No errors</div>
-  {/if}
+    {#if hasErrors}
+      <div>Form has errors</div>
+    {:else}
+      <div>No errors</div>
+    {/if}
 
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" />
-    <div id="error_name">{errors.name || ''}</div>
-  </div>
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" />
+      <div id="error_name">{errors.name || ''}</div>
+    </div>
 
-  <div>
-    <label for="handle">Handle</label>
-    <input type="text" name="handle" id="handle" />
-    <div id="error_handle">{errors.handle || ''}</div>
-  </div>
+    <div>
+      <label for="handle">Handle</label>
+      <input type="text" name="handle" id="handle" />
+      <div id="error_handle">{errors.handle || ''}</div>
+    </div>
 
-  <div>
-    <button
-      type="button"
-      on:click={() =>
-        setError({
-          name: 'The name field is required.',
-          handle: 'The handle field is invalid.',
-        })}
-    >
-      Set Errors
-    </button>
-    <button type="button" on:click={() => clearErrors()}>Clear Errors</button>
-    <button type="button" on:click={() => clearErrors('name')}>Clear Name Error</button>
-    <button type="button" on:click={() => (errorBag = 'bag')}>Use Error Bag</button>
-  </div>
+    <div>
+      <button
+        type="button"
+        onclick={() =>
+          setError({
+            name: 'The name field is required.',
+            handle: 'The handle field is invalid.',
+          })}
+      >
+        Set Errors
+      </button>
+      <button type="button" onclick={() => clearErrors()}>Clear Errors</button>
+      <button type="button" onclick={() => clearErrors('name')}>Clear Name Error</button>
+      <button type="button" onclick={() => (errorBag = 'bag')}>Use Error Bag</button>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Events.svelte b/packages/svelte/test-app/Pages/FormComponent/Events.svelte
index 7b78899b9..f8025bb50 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Events.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Events.svelte
@@ -1,27 +1,29 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
 
-  let events: string[] = []
-  let cancelInOnBefore = false
-  let shouldFail = false
-  let shouldDelay = false
+  let events: string[] = $state([])
+  let cancelInOnBefore = $state(false)
+  let shouldFail = $state(false)
+  let shouldDelay = $state(false)
   let cancelToken: { cancel: () => void } | null = null
 
   function log(eventName: string) {
     events = [...events, eventName]
   }
 
-  $: action = (() => {
-    if (shouldFail) {
-      return '/form-component/events/errors'
-    }
+  let action = $derived(
+    (() => {
+      if (shouldFail) {
+        return '/form-component/events/errors'
+      }
 
-    if (shouldDelay) {
-      return '/form-component/events/delay'
-    }
+      if (shouldDelay) {
+        return '/form-component/events/delay'
+      }
 
-    return '/form-component/events/success'
-  })()
+      return '/form-component/events/success'
+    })(),
+  )
 
   function onBefore() {
     log('onBefore')
@@ -80,44 +82,42 @@
   {onSuccess}
   {onError}
   {onCancelToken}
-  let:processing
-  let:progress
-  let:wasSuccessful
-  let:recentlySuccessful
 >
-  <h1>Form Events & State</h1>
-
-  <div>
-    Events: <span id="events">{events.join(',')}</span>
-  </div>
-
-  <div>
-    Processing: <span id="processing">{String(processing)}</span>
-  </div>
-
-  <div>
-    Progress: <span id="progress" class={progress?.percentage ? 'uploading' : ''}>
-      {progress?.percentage || 0}
-    </span>
-  </div>
-
-  <div>
-    Was successful: <span id="was-successful">{String(wasSuccessful)}</span>
-  </div>
-
-  <div>
-    Recently successful: <span id="recently-successful">{String(recentlySuccessful)}</span>
-  </div>
-
-  <div>
-    <input type="file" name="avatar" id="avatar" />
-  </div>
-
-  <div>
-    <button type="button" on:click={() => (cancelInOnBefore = true)}>Cancel in onBefore</button>
-    <button type="button" on:click={() => (shouldFail = true)}>Fail Request</button>
-    <button type="button" on:click={() => (shouldDelay = true)}>Should Delay</button>
-    <button type="button" on:click={cancelVisit}>Cancel Visit</button>
-    <button type="submit">Submit</button>
-  </div>
+  {#snippet children({ processing, progress, wasSuccessful, recentlySuccessful })}
+    <h1>Form Events & State</h1>
+
+    <div>
+      Events: <span id="events">{events.join(',')}</span>
+    </div>
+
+    <div>
+      Processing: <span id="processing">{String(processing)}</span>
+    </div>
+
+    <div>
+      Progress: <span id="progress" class={progress?.percentage ? 'uploading' : ''}>
+        {progress?.percentage || 0}
+      </span>
+    </div>
+
+    <div>
+      Was successful: <span id="was-successful">{String(wasSuccessful)}</span>
+    </div>
+
+    <div>
+      Recently successful: <span id="recently-successful">{String(recentlySuccessful)}</span>
+    </div>
+
+    <div>
+      <input type="file" name="avatar" id="avatar" />
+    </div>
+
+    <div>
+      <button type="button" onclick={() => (cancelInOnBefore = true)}>Cancel in onBefore</button>
+      <button type="button" onclick={() => (shouldFail = true)}>Fail Request</button>
+      <button type="button" onclick={() => (shouldDelay = true)}>Should Delay</button>
+      <button type="button" onclick={cancelVisit}>Cancel Visit</button>
+      <button type="submit">Submit</button>
+    </div>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Headers.svelte b/packages/svelte/test-app/Pages/FormComponent/Headers.svelte
index 2e66307ff..fc5f4e527 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Headers.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Headers.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
 
-  let headers: Record<string, string> = {
+  let headers: Record<string, string> = $state({
     'X-Foo': 'Bar',
-  }
+  })
 
   function addCustomHeader() {
     headers = {
@@ -17,7 +17,7 @@
   <h1>Form Headers</h1>
 
   <div>
-    <button type="button" on:click={addCustomHeader}>Add Custom Header</button>
+    <button type="button" onclick={addCustomHeader}>Add Custom Header</button>
   </div>
 
   <button type="submit">Submit</button>
diff --git a/packages/svelte/test-app/Pages/FormComponent/InvalidateTags.svelte b/packages/svelte/test-app/Pages/FormComponent/InvalidateTags.svelte
index 9075536dc..2015cd5e9 100644
--- a/packages/svelte/test-app/Pages/FormComponent/InvalidateTags.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/InvalidateTags.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import { Link, Form } from '@inertiajs/svelte'
 
-  export let lastLoaded
-  export let propType
+  let { lastLoaded, propType } = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Methods.svelte b/packages/svelte/test-app/Pages/FormComponent/Methods.svelte
index 8eb599abb..a89780aa9 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Methods.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Methods.svelte
@@ -2,18 +2,18 @@
   import { Form } from '@inertiajs/svelte'
   import type { Method } from '@inertiajs/core'
 
-  let method: Method = 'get'
+  let method: Method = $state('get')
 </script>
 
 <div>
   <h1>HTTP Methods</h1>
 
   <div>
-    <button on:click={() => (method = 'get')}>GET</button>
-    <button on:click={() => (method = 'post')}>POST</button>
-    <button on:click={() => (method = 'put')}>PUT</button>
-    <button on:click={() => (method = 'patch')}>PATCH</button>
-    <button on:click={() => (method = 'delete')}>DELETE</button>
+    <button onclick={() => (method = 'get')}>GET</button>
+    <button onclick={() => (method = 'post')}>POST</button>
+    <button onclick={() => (method = 'put')}>PUT</button>
+    <button onclick={() => (method = 'patch')}>PATCH</button>
+    <button onclick={() => (method = 'delete')}>DELETE</button>
   </div>
 
   <div>Current method: {method}</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Options.svelte b/packages/svelte/test-app/Pages/FormComponent/Options.svelte
index 0c36e5c3c..88d71be78 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Options.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Options.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `let only: string[] = []` to `$state` because there's a variable named state.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
   import type { Method, QueryStringArrayFormatOption } from '@inertiajs/core'
diff --git a/packages/svelte/test-app/Pages/FormComponent/Progress.svelte b/packages/svelte/test-app/Pages/FormComponent/Progress.svelte
index 26e0f9340..e5adb0a38 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Progress.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Progress.svelte
@@ -2,9 +2,9 @@
   import { Form } from '@inertiajs/svelte'
   import { onMount, onDestroy } from 'svelte'
 
-  let showProgress: boolean | undefined = undefined
+  let showProgress: boolean | undefined = $state(undefined)
   let nprogressVisible = false
-  let nprogressAppearances = 0
+  let nprogressAppearances = $state(0)
   let observer: MutationObserver | null = null
 
   function disableProgress() {
@@ -44,7 +44,7 @@
   </div>
 
   <div>
-    <button type="button" on:click={disableProgress}>Disable Progress</button>
+    <button type="button" onclick={disableProgress}>Disable Progress</button>
     <button type="submit">Submit</button>
   </div>
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Ref.svelte b/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
index 301946794..25f97e75e 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
@@ -3,7 +3,7 @@
   import { Form } from '@inertiajs/svelte'
 
   // Svelte Form component ref exposes only methods via bind:this
-  let formRef: FormComponentMethods | null = null
+  let formRef: FormComponentMethods = $state(null!)
 
   function submitProgrammatically() {
     formRef?.submit()
@@ -33,35 +33,37 @@
 <div>
   <h1>Form Ref Test</h1>
 
-  <Form bind:this={formRef} action="/dump/post" method="post" let:isDirty let:errors let:hasErrors>
-    <!-- State display for testing -->
-    <div>Form is {isDirty ? 'dirty' : 'clean'}</div>
-    {#if hasErrors}
-      <div>Form has errors</div>
-    {/if}
-    {#if errors.name}
-      <div id="error_name">{errors.name}</div>
-    {/if}
+  <Form bind:this={formRef} action="/dump/post" method="post">
+    {#snippet children({ isDirty, errors, hasErrors })}
+      <!-- State display for testing -->
+      <div>Form is {isDirty ? 'dirty' : 'clean'}</div>
+      {#if hasErrors}
+        <div>Form has errors</div>
+      {/if}
+      {#if errors.name}
+        <div id="error_name">{errors.name}</div>
+      {/if}
 
-    <div>
-      <input type="text" name="name" placeholder="Name" value="John Doe" />
-    </div>
+      <div>
+        <input type="text" name="name" placeholder="Name" value="John Doe" />
+      </div>
 
-    <div>
-      <input type="email" name="email" placeholder="Email" value="john@example.com" />
-    </div>
+      <div>
+        <input type="email" name="email" placeholder="Email" value="john@example.com" />
+      </div>
 
-    <div>
-      <button type="submit">Submit via Form</button>
-    </div>
+      <div>
+        <button type="submit">Submit via Form</button>
+      </div>
+    {/snippet}
   </Form>
 
   <div>
-    <button on:click={submitProgrammatically}> Submit Programmatically </button>
-    <button on:click={resetForm}> Reset Form </button>
-    <button on:click={resetNameField}> Reset Name Field </button>
-    <button on:click={clearAllErrors}> Clear Errors </button>
-    <button on:click={setTestError}> Set Test Error </button>
-    <button on:click={setCurrentAsDefaults}> Set Current as Defaults </button>
+    <button onclick={submitProgrammatically}> Submit Programmatically </button>
+    <button onclick={resetForm}> Reset Form </button>
+    <button onclick={resetNameField}> Reset Name Field </button>
+    <button onclick={clearAllErrors}> Clear Errors </button>
+    <button onclick={setTestError}> Set Test Error </button>
+    <button onclick={setCurrentAsDefaults}> Set Current as Defaults </button>
   </div>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Reset.svelte b/packages/svelte/test-app/Pages/FormComponent/Reset.svelte
index f4fe054ac..100f5026c 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Reset.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Reset.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   declare global {
     interface Window {
       resetForm: (...fields: string[]) => void
@@ -10,7 +10,7 @@
   import type { FormComponentMethods } from '@inertiajs/core'
   import { Form } from '@inertiajs/svelte'
 
-  let formRef: FormComponentMethods | null = null
+  let formRef: FormComponentMethods = $state(null!)
 
   // Expose reset function to window for testing
   window.resetForm = (...fields: string[]) => {
diff --git a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnError.svelte b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnError.svelte
index dfdca9e51..a980cc000 100644
--- a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnError.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnError.svelte
@@ -2,18 +2,20 @@
   import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form method="post" action="/form-component/reset-on-error" resetOnError let:errors>
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value="John Doe" />
-    <p id="error_name">{errors.name || ''}</p>
-  </div>
+<Form method="post" action="/form-component/reset-on-error" resetOnError>
+  {#snippet children({ errors })}
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value="John Doe" />
+      <p id="error_name">{errors.name || ''}</p>
+    </div>
 
-  <div>
-    <label for="email">Email</label>
-    <input type="email" name="email" id="email" value="john@doe.biz" />
-    <p id="error_email">{errors.email || ''}</p>
-  </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" value="john@doe.biz" />
+      <p id="error_email">{errors.email || ''}</p>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnErrorFields.svelte b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnErrorFields.svelte
index 50ef8b95d..814ea2f89 100644
--- a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnErrorFields.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnErrorFields.svelte
@@ -2,18 +2,20 @@
   import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form method="post" action="/form-component/reset-on-error-fields" resetOnError={['name']} let:errors>
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value="John Doe" />
-    <p id="error_name">{errors.name || ''}</p>
-  </div>
+<Form method="post" action="/form-component/reset-on-error-fields" resetOnError={['name']}>
+  {#snippet children({ errors })}
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value="John Doe" />
+      <p id="error_name">{errors.name || ''}</p>
+    </div>
 
-  <div>
-    <label for="email">Email</label>
-    <input type="email" name="email" id="email" value="john@doe.biz" />
-    <p id="error_email">{errors.email || ''}</p>
-  </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" value="john@doe.biz" />
+      <p id="error_email">{errors.email || ''}</p>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccess.svelte b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccess.svelte
index 87b8fd612..07dd4ac6e 100644
--- a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccess.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccess.svelte
@@ -2,18 +2,20 @@
   import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form method="post" action="/form-component/reset-on-success" resetOnSuccess let:errors>
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value="John Doe" />
-    <p id="error_name">{errors.name || ''}</p>
-  </div>
+<Form method="post" action="/form-component/reset-on-success" resetOnSuccess>
+  {#snippet children({ errors })}
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value="John Doe" />
+      <p id="error_name">{errors.name || ''}</p>
+    </div>
 
-  <div>
-    <label for="email">Email</label>
-    <input type="email" name="email" id="email" value="john@doe.biz" />
-    <p id="error_email">{errors.email || ''}</p>
-  </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" value="john@doe.biz" />
+      <p id="error_email">{errors.email || ''}</p>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccessFields.svelte b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccessFields.svelte
index f072e84d8..1d423b343 100644
--- a/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccessFields.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccessFields.svelte
@@ -2,18 +2,20 @@
   import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form method="post" action="/form-component/reset-on-success-fields" resetOnSuccess={['name']} let:errors>
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value="John Doe" />
-    <p id="error_name">{errors.name || ''}</p>
-  </div>
+<Form method="post" action="/form-component/reset-on-success-fields" resetOnSuccess={['name']}>
+  {#snippet children({ errors })}
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value="John Doe" />
+      <p id="error_name">{errors.name || ''}</p>
+    </div>
 
-  <div>
-    <label for="email">Email</label>
-    <input type="email" name="email" id="email" value="john@doe.biz" />
-    <p id="error_email">{errors.email || ''}</p>
-  </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" value="john@doe.biz" />
+      <p id="error_email">{errors.email || ''}</p>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/SetDefaultsOnSuccess.svelte b/packages/svelte/test-app/Pages/FormComponent/SetDefaultsOnSuccess.svelte
index aec47f021..4473b3c30 100644
--- a/packages/svelte/test-app/Pages/FormComponent/SetDefaultsOnSuccess.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/SetDefaultsOnSuccess.svelte
@@ -2,20 +2,22 @@
   import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form method="post" action="/form-component/set-defaults-on-success" setDefaultsOnSuccess let:isDirty let:errors>
-  <p id="dirty-status">{isDirty ? 'Form is dirty' : 'Form is clean'}</p>
+<Form method="post" action="/form-component/set-defaults-on-success" setDefaultsOnSuccess>
+  {#snippet children({ isDirty, errors })}
+    <p id="dirty-status">{isDirty ? 'Form is dirty' : 'Form is clean'}</p>
 
-  <div>
-    <label for="name">Name</label>
-    <input type="text" name="name" id="name" value="John Doe" />
-    <p id="error_name">{errors.name || ''}</p>
-  </div>
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" value="John Doe" />
+      <p id="error_name">{errors.name || ''}</p>
+    </div>
 
-  <div>
-    <label for="email">Email</label>
-    <input type="email" name="email" id="email" value="john@doe.biz" />
-    <p id="error_email">{errors.email || ''}</p>
-  </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" value="john@doe.biz" />
+      <p id="error_email">{errors.email || ''}</p>
+    </div>
 
-  <button type="submit">Submit</button>
+    <button type="submit">Submit</button>
+  {/snippet}
 </Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Defaults.svelte b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Defaults.svelte
index 11184eadd..47d7e25de 100644
--- a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Defaults.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Defaults.svelte
@@ -5,27 +5,29 @@
 <div>
   <h1>OnSubmitComplete Defaults Test</h1>
 
-  <Form method="post" let:errors let:isDirty onSubmitComplete={(props) => props.defaults()}>
-    <div>
-      <p id="dirty-status">{isDirty ? 'Form is dirty' : 'Form is clean'}</p>
-    </div>
+  <Form method="post" onSubmitComplete={(props) => props.defaults()}>
+    {#snippet children({ errors, isDirty })}
+      <div>
+        <p id="dirty-status">{isDirty ? 'Form is dirty' : 'Form is clean'}</p>
+      </div>
 
-    <div>
-      <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
-      {#if errors.name}
-        <p id="error_name">{errors.name}</p>
-      {/if}
-    </div>
+      <div>
+        <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
+        {#if errors.name}
+          <p id="error_name">{errors.name}</p>
+        {/if}
+      </div>
 
-    <div>
-      <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
-      {#if errors.email}
-        <p id="error_email">{errors.email}</p>
-      {/if}
-    </div>
+      <div>
+        <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
+        {#if errors.email}
+          <p id="error_email">{errors.email}</p>
+        {/if}
+      </div>
 
-    <div>
-      <button type="submit">Submit</button>
-    </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Redirect.svelte b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Redirect.svelte
index b63527595..593a1f74d 100644
--- a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Redirect.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Redirect.svelte
@@ -5,16 +5,18 @@
 <div>
   <h1>Form Empty Action Test</h1>
 
-  <Form method="post" let:errors onSubmitComplete={(props) => props.reset('name')}>
-    <div>
-      <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
-      {#if errors.name}
-        <p id="error_name">{errors.name}</p>
-      {/if}
-    </div>
+  <Form method="post" onSubmitComplete={(props) => props.reset('name')}>
+    {#snippet children({ errors })}
+      <div>
+        <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
+        {#if errors.name}
+          <p id="error_name">{errors.name}</p>
+        {/if}
+      </div>
 
-    <div>
-      <button type="submit">Submit</button>
-    </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Reset.svelte b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Reset.svelte
index 7665e2aca..963e2a2b2 100644
--- a/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Reset.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Reset.svelte
@@ -5,23 +5,25 @@
 <div>
   <h1>OnSubmitComplete Reset Test</h1>
 
-  <Form method="post" let:errors onSubmitComplete={(props) => props.reset('name')}>
-    <div>
-      <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
-      {#if errors.name}
-        <p id="error_name">{errors.name}</p>
-      {/if}
-    </div>
+  <Form method="post" onSubmitComplete={(props) => props.reset('name')}>
+    {#snippet children({ errors })}
+      <div>
+        <input type="text" name="name" id="name" placeholder="Name" value="John Doe" />
+        {#if errors.name}
+          <p id="error_name">{errors.name}</p>
+        {/if}
+      </div>
 
-    <div>
-      <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
-      {#if errors.email}
-        <p id="error_email">{errors.email}</p>
-      {/if}
-    </div>
+      <div>
+        <input type="email" name="email" id="email" placeholder="Email" value="john@doe.biz" />
+        {#if errors.email}
+          <p id="error_email">{errors.email}</p>
+        {/if}
+      </div>
 
-    <div>
-      <button type="submit">Submit</button>
-    </div>
+      <div>
+        <button type="submit">Submit</button>
+      </div>
+    {/snippet}
   </Form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Transform.svelte b/packages/svelte/test-app/Pages/FormComponent/Transform.svelte
index 127a53753..c7daecd41 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Transform.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Transform.svelte
@@ -2,7 +2,7 @@
   import { Form } from '@inertiajs/svelte'
   import type { FormDataConvertible } from '@inertiajs/core'
 
-  let transformType = 'none'
+  let transformType = $state('none')
 
   const getTransform = (type: string) => {
     switch (type) {
@@ -21,16 +21,16 @@
     }
   }
 
-  $: transform = getTransform(transformType)
+  let transform = $derived(getTransform(transformType))
 </script>
 
 <div>
   <h1>Transform Function</h1>
 
   <div>
-    <button on:click={() => (transformType = 'none')}>None</button>
-    <button on:click={() => (transformType = 'uppercase')}>Uppercase</button>
-    <button on:click={() => (transformType = 'format')}>Format</button>
+    <button onclick={() => (transformType = 'none')}>None</button>
+    <button onclick={() => (transformType = 'uppercase')}>Uppercase</button>
+    <button onclick={() => (transformType = 'format')}>Format</button>
   </div>
 
   <div>Current transform: {transformType}</div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Data.svelte b/packages/svelte/test-app/Pages/FormHelper/Data.svelte
index 7c3727586..c32220e94 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Data.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Data.svelte
@@ -8,71 +8,71 @@
   })
 
   const submit = () => {
-    $form.post($page.url)
+    form.post(page.url)
   }
 
   const submitAndReset = () => {
-    $form.post('/form-helper/data/redirect-back', {
-      onSuccess: () => $form.reset(),
+    form.post('/form-helper/data/redirect-back', {
+      onSuccess: () => form.reset(),
     })
   }
 
   const resetAll = () => {
-    $form.reset()
+    form.reset()
   }
 
   const resetOne = () => {
-    $form.reset('handle')
+    form.reset('handle')
   }
 
   const reassign = () => {
-    $form.defaults()
+    form.defaults()
   }
 
   const reassignObject = () => {
-    $form.defaults({
+    form.defaults({
       handle: 'updated handle',
       remember: true,
     })
   }
 
   const reassignSingle = () => {
-    $form.defaults('name', 'single value')
+    form.defaults('name', 'single value')
   }
 </script>
 
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
-  {#if $form.errors.name}
-    <span class="name_error">{$form.errors.name}</span>
+  {#if form.errors.name}
+    <span class="name_error">{form.errors.name}</span>
   {/if}
   <label>
     Handle
-    <input type="text" id="handle" name="handle" bind:value={$form.handle} />
+    <input type="text" id="handle" name="handle" bind:value={form.handle} />
   </label>
-  {#if $form.errors.handle}
-    <span class="handle_error">{$form.errors.handle}</span>
+  {#if form.errors.handle}
+    <span class="handle_error">{form.errors.handle}</span>
   {/if}
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
-  {#if $form.errors.remember}
-    <span class="remember_error">{$form.errors.remember}</span>
+  {#if form.errors.remember}
+    <span class="remember_error">{form.errors.remember}</span>
   {/if}
 
-  <button on:click={submit} class="submit">Submit form</button>
-  <button on:click={submitAndReset} class="submit">Submit form and reset</button>
+  <button onclick={submit} class="submit">Submit form</button>
+  <button onclick={submitAndReset} class="submit">Submit form and reset</button>
 
-  <button on:click={resetAll} class="reset">Reset all data</button>
-  <button on:click={resetOne} class="reset-one">Reset one field</button>
+  <button onclick={resetAll} class="reset">Reset all data</button>
+  <button onclick={resetOne} class="reset-one">Reset one field</button>
 
-  <button on:click={reassign} class="reassign">Reassign current as defaults</button>
-  <button on:click={reassignObject} class="reassign-object">Reassign default values</button>
-  <button on:click={reassignSingle} class="reassign-single">Reassign single default</button>
+  <button onclick={reassign} class="reassign">Reassign current as defaults</button>
+  <button onclick={reassignObject} class="reassign-object">Reassign default values</button>
+  <button onclick={reassignSingle} class="reassign-single">Reassign single default</button>
 
-  <span class="errors-status">Form has {$form.hasErrors ? '' : 'no '}errors</span>
+  <span class="errors-status">Form has {form.hasErrors ? '' : 'no '}errors</span>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Dirty.svelte b/packages/svelte/test-app/Pages/FormHelper/Dirty.svelte
index 61295151e..53b0f9d4a 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Dirty.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Dirty.svelte
@@ -7,15 +7,15 @@
   })
 
   const submit = () => {
-    $form.post('')
+    form.post('')
   }
 
   const defaults = () => {
-    $form.defaults()
+    form.defaults()
   }
 
   const pushValue = () => {
-    $form.foo.push('bar')
+    form.foo.push('bar')
   }
 
   const dataAndDefaults = () => {
@@ -24,35 +24,35 @@
   }
 
   const submitAndSetDefaults = () => {
-    $form.post('/form-helper/dirty/redirect-back', {
-      onSuccess: () => $form.defaults(),
+    form.post('/form-helper/dirty/redirect-back', {
+      onSuccess: () => form.defaults(),
     })
   }
 
   const submitAndSetCustomDefaults = () => {
-    $form.post('/form-helper/dirty/redirect-back', {
-      onSuccess: () => $form.defaults({ name: 'Custom Default', foo: [] }),
+    form.post('/form-helper/dirty/redirect-back', {
+      onSuccess: () => form.defaults({ name: 'Custom Default', foo: [] }),
     })
   }
 </script>
 
 <div>
   <div>
-    Form is {#if $form.isDirty}dirty{:else}clean{/if}
+    Form is {#if form.isDirty}dirty{:else}clean{/if}
   </div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
 
-  <button on:click={submit} class="submit">Submit form</button>
-  <button on:click={defaults} class="defaults">Defaults</button>
-  <button on:click={dataAndDefaults} class="data-and-defaults">Data and Defaults</button>
-  <button on:click={pushValue} class="push">Push value</button>
+  <button onclick={submit} class="submit">Submit form</button>
+  <button onclick={defaults} class="defaults">Defaults</button>
+  <button onclick={dataAndDefaults} class="data-and-defaults">Data and Defaults</button>
+  <button onclick={pushValue} class="push">Push value</button>
 
-  <button on:click={submitAndSetDefaults} class="submit-and-set-defaults"> Submit and setDefaults </button>
+  <button onclick={submitAndSetDefaults} class="submit-and-set-defaults"> Submit and setDefaults </button>
 
-  <button on:click={submitAndSetCustomDefaults} class="submit-and-set-custom-defaults">
+  <button onclick={submitAndSetCustomDefaults} class="submit-and-set-custom-defaults">
     Submit and setDefaults custom
   </button>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Errors.svelte b/packages/svelte/test-app/Pages/FormHelper/Errors.svelte
index e7865ef21..8459007d1 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Errors.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Errors.svelte
@@ -8,68 +8,68 @@
   })
 
   const submit = () => {
-    $form.post('/form-helper/errors')
+    form.post('/form-helper/errors')
   }
 
   const clearErrors = () => {
-    $form.clearErrors()
+    form.clearErrors()
   }
 
   const clearError = () => {
-    $form.clearErrors('handle')
+    form.clearErrors('handle')
   }
 
   const setErrors = () => {
-    $form.setError({
+    form.setError({
       name: 'Manually set Name error',
       handle: 'Manually set Handle error',
     })
   }
 
   const setError = () => {
-    $form.setError('handle', 'Manually set Handle error')
+    form.setError('handle', 'Manually set Handle error')
   }
 
   const resetAndClearErrors = () => {
-    $form.resetAndClearErrors()
+    form.resetAndClearErrors()
   }
 
   const resetHandle = () => {
-    $form.resetAndClearErrors('handle')
+    form.resetAndClearErrors('handle')
   }
 </script>
 
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
-  {#if $form.errors.name}
-    <span class="name_error">{$form.errors.name}</span>
+  {#if form.errors.name}
+    <span class="name_error">{form.errors.name}</span>
   {/if}
   <label>
     Handle
-    <input type="text" id="handle" name="handle" bind:value={$form.handle} />
+    <input type="text" id="handle" name="handle" bind:value={form.handle} />
   </label>
-  {#if $form.errors.handle}
-    <span class="handle_error">{$form.errors.handle}</span>
+  {#if form.errors.handle}
+    <span class="handle_error">{form.errors.handle}</span>
   {/if}
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
-  {#if $form.errors.remember}
-    <span class="remember_error">{$form.errors.remember}</span>
+  {#if form.errors.remember}
+    <span class="remember_error">{form.errors.remember}</span>
   {/if}
 
-  <button on:click={submit} class="submit">Submit form</button>
+  <button onclick={submit} class="submit">Submit form</button>
 
-  <button on:click={clearErrors} class="clear">Clear all errors</button>
-  <button on:click={clearError} class="clear-one">Clear one error</button>
-  <button on:click={setErrors} class="set">Set errors</button>
-  <button on:click={setError} class="set-one">Set one error</button>
-  <button on:click={resetAndClearErrors} class="reset-all">Reset all</button>
-  <button on:click={resetHandle} class="reset-handle">Reset handle</button>
+  <button onclick={clearErrors} class="clear">Clear all errors</button>
+  <button onclick={clearError} class="clear-one">Clear one error</button>
+  <button onclick={setErrors} class="set">Set errors</button>
+  <button onclick={setError} class="set-one">Set one error</button>
+  <button onclick={resetAndClearErrors} class="reset-all">Reset all</button>
+  <button onclick={resetHandle} class="reset-handle">Reset handle</button>
 
-  <span class="errors-status">Form has {$form.hasErrors ? '' : 'no '}errors</span>
+  <span class="errors-status">Form has {form.hasErrors ? '' : 'no '}errors</span>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Events.svelte b/packages/svelte/test-app/Pages/FormHelper/Events.svelte
index 946f7902b..4337a6d35 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Events.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Events.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   declare global {
     interface Window {
       events: string[]
@@ -8,6 +8,8 @@
 </script>
 
 <script lang="ts">
+  import { preventDefault } from 'svelte/legacy'
+
   import { page, useForm } from '@inertiajs/svelte'
   import type { ActiveVisit, Page, Progress, Errors } from '@inertiajs/core'
   import type { CancelTokenSource } from 'axios'
@@ -32,9 +34,9 @@
     })
   }
 
-  pushData(null, 'processing', $form.processing)
-  pushData(null, 'progress', $form.progress)
-  pushData(null, 'errors', $form.errors)
+  pushData(null, 'processing', form.processing)
+  pushData(null, 'progress', form.progress)
+  pushData(null, 'errors', form.errors)
 
   const callbacks = (overrides = {}) => {
     const defaults = {
@@ -55,33 +57,33 @@
   }
 
   const submit = () => {
-    $form.post($page.url)
+    form.post(page.url)
   }
 
   const successfulRequest = () => {
-    $form.post($page.url, {
+    form.post(page.url, {
       ...callbacks(),
     })
   }
 
   const onSuccessResetErrors = () => {
-    $form.post('/form-helper/events/errors', {
+    form.post('/form-helper/events/errors', {
       onError: () => {
         pushEvent('onError')
 
-        $form.post('/form-helper/events', {
+        form.post('/form-helper/events', {
           ...callbacks({
             onStart: () => {
               pushEvent('onStart')
-              pushData('onStart', 'errors', $form.errors)
+              pushData('onStart', 'errors', form.errors)
             },
             onSuccess: () => {
               pushEvent('onSuccess')
-              pushData('onSuccess', 'errors', $form.errors)
+              pushData('onSuccess', 'errors', form.errors)
             },
             onFinish: () => {
               pushEvent('onFinish')
-              pushData('onFinish', 'errors', $form.errors)
+              pushData('onFinish', 'errors', form.errors)
             },
           }),
         })
@@ -90,26 +92,26 @@
   }
 
   const errorsSetOnError = () => {
-    $form.post('/form-helper/events/errors', {
+    form.post('/form-helper/events/errors', {
       ...callbacks({
         onStart: () => {
           pushEvent('onStart')
-          pushData('onStart', 'errors', $form.errors)
+          pushData('onStart', 'errors', form.errors)
         },
         onError: () => {
           pushEvent('onError')
-          pushData('onError', 'errors', $form.errors)
+          pushData('onError', 'errors', form.errors)
         },
         onFinish: () => {
           pushEvent('onFinish')
-          pushData('onFinish', 'errors', $form.errors)
+          pushData('onFinish', 'errors', form.errors)
         },
       }),
     })
   }
 
   const onBeforeVisit = () => {
-    $form.post('/sleep', {
+    form.post('/sleep', {
       ...callbacks({
         onBefore: (visit: ActiveVisit) => {
           pushEvent('onBefore')
@@ -120,7 +122,7 @@
   }
 
   const onBeforeVisitCancelled = () => {
-    $form.post('/sleep', {
+    form.post('/sleep', {
       ...callbacks({
         onBefore: () => {
           pushEvent('onBefore')
@@ -131,7 +133,7 @@
   }
 
   const onStartVisit = () => {
-    $form.post('/form-helper/events', {
+    form.post('/form-helper/events', {
       ...callbacks({
         onStart: (visit: ActiveVisit) => {
           pushEvent('onStart')
@@ -142,7 +144,7 @@
   }
 
   const onProgressVisit = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         file: new File(['foobar'], 'example.bin'),
@@ -158,7 +160,7 @@
   }
 
   const cancelledVisit = () => {
-    $form.post('/sleep', {
+    form.post('/sleep', {
       ...callbacks({
         onCancelToken: (token: CancelTokenSource) => {
           pushEvent('onCancelToken')
@@ -173,7 +175,7 @@
   }
 
   const onSuccessVisit = () => {
-    $form.post('/dump/post', {
+    form.post('/dump/post', {
       ...callbacks({
         onSuccess: (page: Page) => {
           pushEvent('onSuccess')
@@ -184,7 +186,7 @@
   }
 
   const onSuccessPromiseVisit = () => {
-    $form.post('/dump/post', {
+    form.post('/dump/post', {
       ...callbacks({
         onSuccess: () => {
           pushEvent('onSuccess')
@@ -197,17 +199,17 @@
   }
 
   const onSuccessResetValue = () => {
-    $form.post($page.url, {
+    form.post(page.url, {
       ...callbacks({
         onSuccess: () => {
-          $form.reset()
+          form.reset()
         },
       }),
     })
   }
 
   const onErrorVisit = () => {
-    $form.post('/form-helper/events/errors', {
+    form.post('/form-helper/events/errors', {
       ...callbacks({
         onError: (errors: Errors) => {
           pushEvent('onError')
@@ -218,7 +220,7 @@
   }
 
   const onErrorPromiseVisit = () => {
-    $form.post('/form-helper/events/errors', {
+    form.post('/form-helper/events/errors', {
       ...callbacks({
         onError: () => {
           pushEvent('onError')
@@ -231,61 +233,61 @@
   }
 
   const onSuccessProcessing = () => {
-    $form.post($page.url, {
+    form.post(page.url, {
       ...callbacks({
         onBefore: () => {
           pushEvent('onBefore')
-          pushData('onBefore', 'processing', $form.processing)
+          pushData('onBefore', 'processing', form.processing)
         },
         onCancelToken: () => {
           pushEvent('onCancelToken')
-          pushData('onCancelToken', 'processing', $form.processing)
+          pushData('onCancelToken', 'processing', form.processing)
         },
         onStart: () => {
           pushEvent('onStart')
-          pushData('onStart', 'processing', $form.processing)
+          pushData('onStart', 'processing', form.processing)
         },
         onSuccess: () => {
           pushEvent('onSuccess')
-          pushData('onSuccess', 'processing', $form.processing)
+          pushData('onSuccess', 'processing', form.processing)
         },
         onFinish: () => {
           pushEvent('onFinish')
-          pushData('onFinish', 'processing', $form.processing)
+          pushData('onFinish', 'processing', form.processing)
         },
       }),
     })
   }
 
   const onErrorProcessing = () => {
-    $form.post('/form-helper/events/errors', {
+    form.post('/form-helper/events/errors', {
       ...callbacks({
         onBefore: () => {
           pushEvent('onBefore')
-          pushData('onBefore', 'processing', $form.processing)
+          pushData('onBefore', 'processing', form.processing)
         },
         onCancelToken: () => {
           pushEvent('onCancelToken')
-          pushData('onCancelToken', 'processing', $form.processing)
+          pushData('onCancelToken', 'processing', form.processing)
         },
         onStart: () => {
           pushEvent('onStart')
-          pushData('onStart', 'processing', $form.processing)
+          pushData('onStart', 'processing', form.processing)
         },
         onError: () => {
           pushEvent('onError')
-          pushData('onError', 'processing', $form.processing)
+          pushData('onError', 'processing', form.processing)
         },
         onFinish: () => {
           pushEvent('onFinish')
-          pushData('onFinish', 'processing', $form.processing)
+          pushData('onFinish', 'processing', form.processing)
         },
       }),
     })
   }
 
   const onSuccessProgress = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         file: new File(['foobar'], 'example.bin'),
@@ -294,34 +296,34 @@
         ...callbacks({
           onBefore: () => {
             pushEvent('onBefore')
-            pushData('onBefore', 'progress', $form.progress)
+            pushData('onBefore', 'progress', form.progress)
           },
           onCancelToken: () => {
             pushEvent('onCancelToken')
-            pushData('onCancelToken', 'progress', $form.progress)
+            pushData('onCancelToken', 'progress', form.progress)
           },
           onStart: () => {
             pushEvent('onStart')
-            pushData('onStart', 'progress', $form.progress)
+            pushData('onStart', 'progress', form.progress)
           },
           onProgress: () => {
             pushEvent('onProgress')
-            pushData('onProgress', 'progress', $form.progress)
+            pushData('onProgress', 'progress', form.progress)
           },
           onSuccess: () => {
             pushEvent('onSuccess')
-            pushData('onSuccess', 'progress', $form.progress)
+            pushData('onSuccess', 'progress', form.progress)
           },
           onFinish: () => {
             pushEvent('onFinish')
-            pushData('onFinish', 'progress', $form.progress)
+            pushData('onFinish', 'progress', form.progress)
           },
         }),
       })
   }
 
   const onErrorProgress = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         file: new File(['foobar'], 'example.bin'),
@@ -330,58 +332,58 @@
         ...callbacks({
           onBefore: () => {
             pushEvent('onBefore')
-            pushData('onBefore', 'progress', $form.progress)
+            pushData('onBefore', 'progress', form.progress)
           },
           onCancelToken: () => {
             pushEvent('onCancelToken')
-            pushData('onCancelToken', 'progress', $form.progress)
+            pushData('onCancelToken', 'progress', form.progress)
           },
           onStart: () => {
             pushEvent('onStart')
-            pushData('onStart', 'progress', $form.progress)
+            pushData('onStart', 'progress', form.progress)
           },
           onProgress: () => {
             pushEvent('onProgress')
-            pushData('onProgress', 'progress', $form.progress)
+            pushData('onProgress', 'progress', form.progress)
           },
           onError: () => {
             pushEvent('onError')
-            pushData('onError', 'progress', $form.progress)
+            pushData('onError', 'progress', form.progress)
           },
           onFinish: () => {
             pushEvent('onFinish')
-            pushData('onFinish', 'progress', $form.progress)
+            pushData('onFinish', 'progress', form.progress)
           },
         }),
       })
   }
 
   const progressNoFiles = () => {
-    $form.post($page.url, {
+    form.post(page.url, {
       ...callbacks({
         onBefore: () => {
           pushEvent('onBefore')
-          pushData('onBefore', 'progress', $form.progress)
+          pushData('onBefore', 'progress', form.progress)
         },
         onCancelToken: () => {
           pushEvent('onCancelToken')
-          pushData('onCancelToken', 'progress', $form.progress)
+          pushData('onCancelToken', 'progress', form.progress)
         },
         onStart: () => {
           pushEvent('onStart')
-          pushData('onStart', 'progress', $form.progress)
+          pushData('onStart', 'progress', form.progress)
         },
         onProgress: () => {
           pushEvent('onProgress')
-          pushData('onProgress', 'progress', $form.progress)
+          pushData('onProgress', 'progress', form.progress)
         },
         onSuccess: () => {
           pushEvent('onSuccess')
-          pushData('onSuccess', 'progress', $form.progress)
+          pushData('onSuccess', 'progress', form.progress)
         },
         onFinish: () => {
           pushEvent('onFinish')
-          pushData('onFinish', 'progress', $form.progress)
+          pushData('onFinish', 'progress', form.progress)
         },
       }),
     })
@@ -389,34 +391,34 @@
 </script>
 
 <div>
-  <button on:click|preventDefault={submit} class="submit">Submit form</button>
+  <button onclick={preventDefault(submit)} class="submit">Submit form</button>
 
-  <button on:click|preventDefault={successfulRequest} class="successful-request">Successful request</button>
-  <button on:click|preventDefault={cancelledVisit} class="cancel">Cancellable Visit</button>
+  <button onclick={preventDefault(successfulRequest)} class="successful-request">Successful request</button>
+  <button onclick={preventDefault(cancelledVisit)} class="cancel">Cancellable Visit</button>
 
-  <button on:click|preventDefault={onBeforeVisit} class="before">onBefore</button>
-  <button on:click|preventDefault={onBeforeVisitCancelled} class="before-cancel">onBefore cancellation</button>
-  <button on:click|preventDefault={onStartVisit} class="start">onStart</button>
-  <button on:click|preventDefault={onProgressVisit} class="progress">onProgress</button>
+  <button onclick={preventDefault(onBeforeVisit)} class="before">onBefore</button>
+  <button onclick={preventDefault(onBeforeVisitCancelled)} class="before-cancel">onBefore cancellation</button>
+  <button onclick={preventDefault(onStartVisit)} class="start">onStart</button>
+  <button onclick={preventDefault(onProgressVisit)} class="progress">onProgress</button>
 
-  <button on:click|preventDefault={onSuccessVisit} class="success">onSuccess</button>
-  <button on:click|preventDefault={onSuccessProgress} class="success-progress">onSuccess progress property</button>
-  <button on:click|preventDefault={onSuccessProcessing} class="success-processing">onSuccess resets processing</button>
-  <button on:click|preventDefault={onSuccessResetErrors} class="success-reset-errors">onSuccess resets errors</button>
-  <button on:click|preventDefault={onSuccessPromiseVisit} class="success-promise">onSuccess promise</button>
-  <button on:click|preventDefault={onSuccessResetValue} class="success-reset-value">onSuccess resets value</button>
+  <button onclick={preventDefault(onSuccessVisit)} class="success">onSuccess</button>
+  <button onclick={preventDefault(onSuccessProgress)} class="success-progress">onSuccess progress property</button>
+  <button onclick={preventDefault(onSuccessProcessing)} class="success-processing">onSuccess resets processing</button>
+  <button onclick={preventDefault(onSuccessResetErrors)} class="success-reset-errors">onSuccess resets errors</button>
+  <button onclick={preventDefault(onSuccessPromiseVisit)} class="success-promise">onSuccess promise</button>
+  <button onclick={preventDefault(onSuccessResetValue)} class="success-reset-value">onSuccess resets value</button>
 
-  <button on:click|preventDefault={onErrorVisit} class="error">onError</button>
-  <button on:click|preventDefault={onErrorProgress} class="error-progress">onError progress property</button>
-  <button on:click|preventDefault={onErrorProcessing} class="error-processing">onError resets processing</button>
-  <button on:click|preventDefault={errorsSetOnError} class="errors-set-on-error">Errors set on error</button>
-  <button on:click|preventDefault={onErrorPromiseVisit} class="error-promise">onError promise</button>
+  <button onclick={preventDefault(onErrorVisit)} class="error">onError</button>
+  <button onclick={preventDefault(onErrorProgress)} class="error-progress">onError progress property</button>
+  <button onclick={preventDefault(onErrorProcessing)} class="error-processing">onError resets processing</button>
+  <button onclick={preventDefault(errorsSetOnError)} class="errors-set-on-error">Errors set on error</button>
+  <button onclick={preventDefault(onErrorPromiseVisit)} class="error-promise">onError promise</button>
 
-  <button on:click|preventDefault={progressNoFiles} class="no-progress">progress no files</button>
+  <button onclick={preventDefault(progressNoFiles)} class="no-progress">progress no files</button>
 
-  <span class="success-status">Form was {$form.wasSuccessful ? '' : 'not '}successful</span>
-  <span class="recently-status">Form was {$form.recentlySuccessful ? '' : 'not '}recently successful</span>
+  <span class="success-status">Form was {form.wasSuccessful ? '' : 'not '}successful</span>
+  <span class="recently-status">Form was {form.recentlySuccessful ? '' : 'not '}recently successful</span>
 
-  <input type="text" class="name-input" bind:value={$form.name} />
-  <input type="checkbox" class="remember-input" bind:checked={$form.remember} />
+  <input type="text" class="name-input" bind:value={form.name} />
+  <input type="checkbox" class="remember-input" bind:checked={form.remember} />
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Methods.svelte b/packages/svelte/test-app/Pages/FormHelper/Methods.svelte
index bf5a4c1aa..fd3b1ab28 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Methods.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Methods.svelte
@@ -7,27 +7,27 @@
   })
 
   const postForm = () => {
-    $form.post('/dump/post')
+    form.post('/dump/post')
   }
 
   const putForm = () => {
-    $form.put('/dump/put')
+    form.put('/dump/put')
   }
 
   const patchForm = () => {
-    $form.patch('/dump/patch')
+    form.patch('/dump/patch')
   }
 
   const deleteForm = () => {
-    $form.delete('/dump/delete')
+    form.delete('/dump/delete')
   }
 
   const submitForm = () => {
-    $form.submit('post', '/dump/post')
+    form.submit('post', '/dump/post')
   }
 
   const submitFormObject = () => {
-    $form.submit({
+    form.submit({
       method: 'post',
       url: '/dump/post',
     })
@@ -37,17 +37,17 @@
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
 
-  <button on:click={postForm} class="post">POST form</button>
-  <button on:click={putForm} class="put">PUT form</button>
-  <button on:click={patchForm} class="patch">PATCH form</button>
-  <button on:click={deleteForm} class="delete">DELETE form</button>
-  <button on:click={submitForm} class="submit">SUBMIT form</button>
-  <button on:click={submitFormObject} class="submit-object">SUBMIT OBJECT form</button>
+  <button onclick={postForm} class="post">POST form</button>
+  <button onclick={putForm} class="put">PUT form</button>
+  <button onclick={patchForm} class="patch">PATCH form</button>
+  <button onclick={deleteForm} class="delete">DELETE form</button>
+  <button onclick={submitForm} class="submit">SUBMIT form</button>
+  <button onclick={submitFormObject} class="submit-object">SUBMIT OBJECT form</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Nested.svelte b/packages/svelte/test-app/Pages/FormHelper/Nested.svelte
index 497305581..2247a870a 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Nested.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Nested.svelte
@@ -18,55 +18,55 @@
   })
 
   const submit = () => {
-    $form.submit('post', '/dump/post')
+    form.submit('post', '/dump/post')
   }
 </script>
 
 <div>
   <label>
     Full Name
-    <input type="text" id="name" bind:value={$form.name} />
+    <input type="text" id="name" bind:value={form.name} />
   </label>
   <label>
     Street
-    <input type="text" id="street" bind:value={$form.address.street} />
+    <input type="text" id="street" bind:value={form.address.street} />
   </label>
   <label>
     City
-    <input type="text" id="city" bind:value={$form.address.city} />
+    <input type="text" id="city" bind:value={form.address.city} />
   </label>
   <label>
     Foo
-    <input type="checkbox" id="foo" value="foo" bind:group={$form.checked} />
+    <input type="checkbox" id="foo" value="foo" bind:group={form.checked} />
   </label>
   <label>
     Bar
-    <input type="checkbox" id="bar" value="bar" bind:group={$form.checked} />
+    <input type="checkbox" id="bar" value="bar" bind:group={form.checked} />
   </label>
   <label>
     Baz
-    <input type="checkbox" id="baz" value="baz" bind:group={$form.checked} />
+    <input type="checkbox" id="baz" value="baz" bind:group={form.checked} />
   </label>
   <label>
     Organization Name
-    <input type="text" id="organization-name" bind:value={$form.organization.name} />
+    <input type="text" id="organization-name" bind:value={form.organization.name} />
   </label>
   <label>
     Repository Name
-    <input type="text" id="repo-name" bind:value={$form.organization.repo.name} />
+    <input type="text" id="repo-name" bind:value={form.organization.repo.name} />
   </label>
   Repository Tags
   <label>
     v0.1
-    <input type="checkbox" id="tag-0" value="v0.1" bind:group={$form.organization.repo.tags} />
+    <input type="checkbox" id="tag-0" value="v0.1" bind:group={form.organization.repo.tags} />
   </label>
   <label>
     v0.2
-    <input type="checkbox" id="tag-1" value="v0.2" bind:group={$form.organization.repo.tags} />
+    <input type="checkbox" id="tag-1" value="v0.2" bind:group={form.organization.repo.tags} />
   </label>
   <label>
     v0.3
-    <input type="checkbox" id="tag-2" value="v0.3" bind:group={$form.organization.repo.tags} />
+    <input type="checkbox" id="tag-2" value="v0.3" bind:group={form.organization.repo.tags} />
   </label>
-  <button on:click={submit} class="submit">Submit form</button>
+  <button onclick={submit} class="submit">Submit form</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte b/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
index 5b01cc13e..0f1d66210 100644
--- a/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
@@ -7,8 +7,13 @@
     email: string
   }
 
-  export let user: User
+  interface Props {
+    user: User
+  }
+
+  let { user }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   const form = useForm('EditUserForm', {
     name: user.name,
     email: user.email,
@@ -20,11 +25,11 @@
   <form>
     <div>
       <label for="name">Name:</label>
-      <input id="name" type="text" bind:value={$form.name} />
+      <input id="name" type="text" bind:value={form.name} />
     </div>
     <div>
       <label for="email">Email:</label>
-      <input id="email" type="email" bind:value={$form.email} />
+      <input id="email" type="email" bind:value={form.email} />
     </div>
   </form>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/RememberIndex.svelte b/packages/svelte/test-app/Pages/FormHelper/RememberIndex.svelte
index d222c0aae..e2edf7374 100644
--- a/packages/svelte/test-app/Pages/FormHelper/RememberIndex.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/RememberIndex.svelte
@@ -7,7 +7,11 @@
     email: string
   }
 
-  export let users: User[]
+  interface Props {
+    users: User[]
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/Transform.svelte b/packages/svelte/test-app/Pages/FormHelper/Transform.svelte
index ecc9f3bc2..b3c329c79 100644
--- a/packages/svelte/test-app/Pages/FormHelper/Transform.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/Transform.svelte
@@ -7,7 +7,7 @@
   })
 
   const postForm = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         name: 'bar',
@@ -16,7 +16,7 @@
   }
 
   const putForm = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         name: 'baz',
@@ -25,7 +25,7 @@
   }
 
   const patchForm = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         name: 'foo',
@@ -34,7 +34,7 @@
   }
 
   const deleteForm = () => {
-    $form
+    form
       .transform((data) => ({
         ...data,
         name: 'bar',
@@ -46,15 +46,15 @@
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
 
-  <button on:click={postForm} class="post">POST form</button>
-  <button on:click={putForm} class="put">PUT form</button>
-  <button on:click={patchForm} class="patch">PATCH form</button>
-  <button on:click={deleteForm} class="delete">DELETE form</button>
+  <button onclick={postForm} class="post">POST form</button>
+  <button onclick={putForm} class="put">PUT form</button>
+  <button onclick={patchForm} class="patch">PATCH form</button>
+  <button onclick={deleteForm} class="delete">DELETE form</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Any.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Any.svelte
index e2bea15a6..c13914461 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Any.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Any.svelte
@@ -4,11 +4,11 @@
 
   const form = useForm<{ name: any }>({ name: null }) // eslint-disable-line @typescript-eslint/no-explicit-any
 
-  $form.name = 0
-  $form.name = 'test'
-  $form.name = true
-  $form.name = null
-  $form.name = {
+  form.name = 0
+  form.name = 'test'
+  form.name = true
+  form.name = null
+  form.name = {
     key: 'value',
   }
 </script>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Child.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Child.svelte
index 68b042c46..b8ca05d33 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Child.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Child.svelte
@@ -2,10 +2,14 @@
   // This component is used for checking the TypeScript implementation; there is no Playwright test depending on it.
   import type { InertiaForm } from '@inertiajs/svelte'
 
-  export let form: InertiaForm<{
-    name: string
-    email?: string
-  }>
+  interface Props {
+    form: InertiaForm<{
+      name: string
+      email?: string
+    }>
+  }
+
+  let { form }: Props = $props()
 </script>
 
 <p>Name: {form.name}</p>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/CircularReferences.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/CircularReferences.svelte
index 1af2f0817..c546b8bc1 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/CircularReferences.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/CircularReferences.svelte
@@ -15,8 +15,8 @@
     items: [],
   })
 
-  $form.items = []
-  $form.items = [
+  form.items = []
+  form.items = [
     {
       foo: 'bar',
       items: [
@@ -33,11 +33,11 @@
   ]
 
   // @ts-expect-error - items should be an array of SubData
-  $form.items = {}
+  form.items = {}
   // @ts-expect-error - foo should be a string
-  $form.items = [{ foo: 123 }]
+  form.items = [{ foo: 123 }]
   // @ts-expect-error - items should be an array of SubData
-  $form.items = [{ foo: 'bar', items: {} }]
+  form.items = [{ foo: 'bar', items: {} }]
   // @ts-expect-error - foo should be a string
-  $form.items = [{ foo: 'bar', items: [{ foo: 123 }] }]
+  form.items = [{ foo: 'bar', items: [{ foo: 123 }] }]
 </script>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Data.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Data.svelte
index 7a2393ad4..685ae22eb 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Data.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Data.svelte
@@ -15,15 +15,15 @@
   }
 
   const form = useForm<FormData>(defaultData)
-  $form.name = 'John Doe'
-  $form.company.name = 'Acme Corp'
-  $form.users = [{ name: 'Jane Doe' }]
+  form.name = 'John Doe'
+  form.company.name = 'Acme Corp'
+  form.users = [{ name: 'Jane Doe' }]
   // @ts-expect-error - A form has no email field
-  $form.email = 'john@example.com'
+  form.email = 'john@example.com'
   // @ts-expect-error - A company has no street field
-  $form.company.street = '123 Main St'
+  form.company.street = '123 Main St'
   // @ts-expect-error - A company has no street field
-  $form.company = { name: 'Acme Corp', street: '123 Main St' }
+  form.company = { name: 'Acme Corp', street: '123 Main St' }
   // @ts-expect-error - A form has no email field
-  $form.users = [{ name: 'Jane Doe', email: 'jane@example.com' }]
+  form.users = [{ name: 'Jane Doe', email: 'jane@example.com' }]
 </script>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte
index a1aaf3561..3b136af7e 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte
@@ -14,8 +14,8 @@
   const handleChange = (e: Event) => {
     const target = e.target as HTMLInputElement
     const { name, value } = target
-    $form[name] = value
+    form[name] = value
   }
 </script>
 
-<input name="name" type="text" value={$form.name} on:input={handleChange} />
+<input name="name" type="text" value={form.name} oninput={handleChange} />
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Errors.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Errors.svelte
index 96a1bf48e..9ec9181a7 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Errors.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Errors.svelte
@@ -21,36 +21,36 @@
   console.log(form.errors['company.name'])
 
   // Clear Errors
-  $form.clearErrors('name')
-  $form.clearErrors('company')
-  $form.clearErrors('company.name')
-  $form.clearErrors('users')
-  $form.clearErrors('users.0')
-  $form.clearErrors('users.0.name')
+  form.clearErrors('name')
+  form.clearErrors('company')
+  form.clearErrors('company.name')
+  form.clearErrors('users')
+  form.clearErrors('users.0')
+  form.clearErrors('users.0.name')
 
   // Reset and Clear Errors
-  $form.resetAndClearErrors('name')
-  $form.resetAndClearErrors('company')
-  $form.resetAndClearErrors('company.name')
-  $form.resetAndClearErrors('users')
-  $form.resetAndClearErrors('users.0')
-  $form.resetAndClearErrors('users.0.name')
+  form.resetAndClearErrors('name')
+  form.resetAndClearErrors('company')
+  form.resetAndClearErrors('company.name')
+  form.resetAndClearErrors('users')
+  form.resetAndClearErrors('users.0')
+  form.resetAndClearErrors('users.0.name')
 
   // Set error by key
-  $form.setError('name', 'Validation error')
-  $form.setError('company', 'Validation error')
-  $form.setError('company.name', 'Validation error')
-  $form.setError('users', 'Validation error')
-  $form.setError('users.0', 'Validation error')
-  $form.setError('users.0.name', 'Validation error')
+  form.setError('name', 'Validation error')
+  form.setError('company', 'Validation error')
+  form.setError('company.name', 'Validation error')
+  form.setError('users', 'Validation error')
+  form.setError('users.0', 'Validation error')
+  form.setError('users.0.name', 'Validation error')
 
   // Set error by object
-  $form.setError({ name: 'Validation error' })
-  $form.setError({ company: 'Validation error' })
-  $form.setError({ 'company.name': 'Validation error' })
-  $form.setError({ users: 'Validation error' })
-  $form.setError({ 'users.0': 'Validation error' })
-  $form.setError({ 'users.0.name': 'Validation error' })
+  form.setError({ name: 'Validation error' })
+  form.setError({ company: 'Validation error' })
+  form.setError({ 'company.name': 'Validation error' })
+  form.setError({ users: 'Validation error' })
+  form.setError({ 'users.0': 'Validation error' })
+  form.setError({ 'users.0.name': 'Validation error' })
 
   // @ts-expect-error - Form has no email field
   console.log(form.errors.email)
@@ -58,29 +58,29 @@
   console.log(form.errors['company.email'])
 
   // @ts-expect-error - Form has no email field
-  $form.clearErrors('email')
+  form.clearErrors('email')
   // @ts-expect-error - Form has no email field
-  $form.resetAndClearErrors('email')
+  form.resetAndClearErrors('email')
   // @ts-expect-error - Form has no email field
-  $form.setError('email', 'Validation error')
+  form.setError('email', 'Validation error')
   // @ts-expect-error - Form has no email field
-  $form.setError({ email: 'Validation error' })
+  form.setError({ email: 'Validation error' })
 
   // @ts-expect-error - Company has no email field
-  $form.clearErrors('company.email')
+  form.clearErrors('company.email')
   // @ts-expect-error - Company has no email field
-  $form.resetAndClearErrors('company.email')
+  form.resetAndClearErrors('company.email')
   // @ts-expect-error - Company has no email field
-  $form.setError('company.email', 'Validation error')
+  form.setError('company.email', 'Validation error')
   // @ts-expect-error - Company has no email field
-  $form.setError({ 'company.email': 'Validation error' })
+  form.setError({ 'company.email': 'Validation error' })
 
   // @ts-expect-error - A user has no email field
-  $form.clearErrors('users.0.email')
+  form.clearErrors('users.0.email')
   // @ts-expect-error - A user has no email field
-  $form.resetAndClearErrors('users.0.email')
+  form.resetAndClearErrors('users.0.email')
   // @ts-expect-error - A user has no email field
-  $form.setError('users.0.email', 'Validation error')
+  form.setError('users.0.email', 'Validation error')
   // @ts-expect-error - A user has no email field
-  $form.setError({ 'users.0.email': 'Validation error' })
+  form.setError({ 'users.0.email': 'Validation error' })
 </script>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Generic.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Generic.svelte
index 073f82d40..0d67d4150 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Generic.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Generic.svelte
@@ -3,7 +3,11 @@
   import type { FormDataConvertible } from '@inertiajs/core'
   import type { InertiaForm } from '@inertiajs/svelte'
 
-  export let form: InertiaForm<TFormData>
+  interface Props {
+    form: InertiaForm<TFormData>
+  }
+
+  let { form }: Props = $props()
 </script>
 
 <div>{form}</div>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/NullableNestedObject.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/NullableNestedObject.svelte
index 9db7538be..ce638d273 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/NullableNestedObject.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/NullableNestedObject.svelte
@@ -12,5 +12,5 @@
     foo: null,
   })
 
-  console.log($form.errors['foo.bar'])
+  console.log(form.errors['foo.bar'])
 </script>
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte
index 7e3c7da1a..685ac7cc6 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte
@@ -8,10 +8,15 @@
     remember: boolean
   }
 
-  export let user: {
-    username?: string | null
-  } | null = null
+  interface Props {
+    user?: {
+      username?: string | null
+    } | null
+  }
+
+  let { user = null }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   useForm<LoginData>({
     username: user?.username ?? '',
     password: '',
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Parent.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Parent.svelte
index 5aa0422d4..4258fe756 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/Parent.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/Parent.svelte
@@ -9,4 +9,4 @@
   })
 </script>
 
-<Child form={$form} />
+<Child {form} />
diff --git a/packages/svelte/test-app/Pages/FormHelper/TypeScript/ValidationKey.svelte b/packages/svelte/test-app/Pages/FormHelper/TypeScript/ValidationKey.svelte
index 547e0f66d..54e675e92 100644
--- a/packages/svelte/test-app/Pages/FormHelper/TypeScript/ValidationKey.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/TypeScript/ValidationKey.svelte
@@ -20,4 +20,4 @@
   }
 </script>
 
-<button on:click={() => validation(() => ({ name: 'Validation error' }))}> Handle </button>
+<button onclick={() => validation(() => ({ name: 'Validation error' }))}> Handle </button>
diff --git a/packages/svelte/test-app/Pages/History/Page.svelte b/packages/svelte/test-app/Pages/History/Page.svelte
index 7145e026f..56071e413 100644
--- a/packages/svelte/test-app/Pages/History/Page.svelte
+++ b/packages/svelte/test-app/Pages/History/Page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import { inertia, router } from '@inertiajs/svelte'
 
-  export let pageNumber
-  export let multiByte
+  let { pageNumber, multiByte } = $props()
 </script>
 
 <a href="/history/1" use:inertia>Page 1</a>
@@ -11,7 +10,7 @@
 <a href="/history/4" use:inertia>Page 4</a>
 <a href="/history/5" use:inertia>Page 5</a>
 
-<button on:click={() => router.clearHistory()}>Clear History</button>
+<button onclick={() => router.clearHistory()}>Clear History</button>
 
 <div>This is page {pageNumber}.</div>
 <div>Multi byte character: {multiByte}</div>
diff --git a/packages/svelte/test-app/Pages/Home.svelte b/packages/svelte/test-app/Pages/Home.svelte
index a39e8a53d..73459ffac 100644
--- a/packages/svelte/test-app/Pages/Home.svelte
+++ b/packages/svelte/test-app/Pages/Home.svelte
@@ -20,7 +20,7 @@
 
   onMount(() => {
     window._inertia_page_key = crypto.randomUUID()
-    window._inertia_props = $page.props
+    window._inertia_props = page.props
     window._plugin_global_props = {}
   })
 </script>
@@ -31,14 +31,14 @@
   <a href="/links/method" use:inertia class="links-method">Basic Links</a>
   <a href="/links/replace" use:inertia class="links-replace">'Replace' Links</a>
 
-  <a href={'#'} on:click={visitsMethod} class="visits-method">Manual basic visits</a>
-  <a href={'#'} on:click={visitsReplace} class="visits-replace">Manual 'Replace' visits</a>
+  <a href={'#'} onclick={visitsMethod} class="visits-method">Manual basic visits</a>
+  <a href={'#'} onclick={visitsReplace} class="visits-replace">Manual 'Replace' visits</a>
 
   <button use:inertia={{ href: '/redirect', method: 'post' }} class="links-redirect">Internal Redirect Link</button>
-  <a href={'#'} on:click={redirect} class="visits-redirect">Manual Redirect visit</a>
+  <a href={'#'} onclick={redirect} class="visits-redirect">Manual Redirect visit</a>
 
   <button use:inertia={{ href: '/redirect-external', method: 'post' }} class="links-redirect-external"
     >External Redirect Link</button
   >
-  <a href={'#'} on:click={redirectExternal} class="visits-redirect-external">Manual External Redirect visit</a>
+  <a href={'#'} onclick={redirectExternal} class="visits-redirect-external">Manual External Redirect visit</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/CustomElement.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/CustomElement.svelte
index 44a3ed48d..5a8848cb6 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/CustomElement.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/CustomElement.svelte
@@ -2,11 +2,17 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" as="section" data-testid="infinite-scroll-container">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRef.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRef.svelte
index adcabf873..99a7207d1 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRef.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRef.svelte
@@ -2,11 +2,15 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
 
-  let tableHeader: HTMLTableSectionElement
-  let tableFooter: HTMLTableSectionElement
-  let tableBody: HTMLTableSectionElement
+  let { users }: Props = $props()
+
+  let tableHeader: HTMLTableSectionElement = $state(null!)
+  let tableFooter: HTMLTableSectionElement = $state(null!)
+  let tableBody: HTMLTableSectionElement = $state(null!)
 </script>
 
 <div style="padding: 20px">
@@ -17,42 +21,47 @@
     startElement={() => tableHeader}
     endElement={() => tableFooter}
     itemsElement={() => tableBody}
-    let:loading
   >
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
-
-    <table style="width: 100%; border-collapse: collapse">
-      <thead bind:this={tableHeader} style="padding: 10px">
-        <tr>
-          <th style="padding: 12px; border: 1px solid #ccc">ID</th>
-          <th style="padding: 12px; border: 1px solid #ccc">Name</th>
-        </tr>
-      </thead>
-
-      <tbody bind:this={tableBody}>
-        {#each users.data as user (user.id)}
-          <tr data-user-id={user.id}>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
+    {#snippet children({ loading })}
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
+
+      <table style="width: 100%; border-collapse: collapse">
+        <thead bind:this={tableHeader} style="padding: 10px">
+          <tr>
+            <th style="padding: 12px; border: 1px solid #ccc">ID</th>
+            <th style="padding: 12px; border: 1px solid #ccc">Name</th>
           </tr>
-        {/each}
+        </thead>
 
-        {#if loading}
+        <tbody bind:this={tableBody}>
+          {#each users.data as user (user.id)}
+            <tr data-user-id={user.id}>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
+            </tr>
+          {/each}
+
+          {#if loading}
+            <tr>
+              <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            </tr>
+          {/if}
+        </tbody>
+
+        <tfoot bind:this={tableFooter} style="background: #fdf2e8; padding: 10px">
           <tr>
-            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
+              Table Footer - Triggers when this comes into view
+            </td>
           </tr>
-        {/if}
-      </tbody>
-
-      <tfoot bind:this={tableFooter} style="background: #fdf2e8; padding: 10px">
-        <tr>
-          <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
-            Table Footer - Triggers when this comes into view
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
+        </tfoot>
+      </table>
+
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
+    {/snippet}
   </InfiniteScroll>
 </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRefObject.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRefObject.svelte
index 2aa64ed8a..d395a75cb 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRefObject.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRefObject.svelte
@@ -2,11 +2,15 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
 
-  let tableHeader: HTMLTableSectionElement
-  let tableFooter: HTMLTableSectionElement
-  let tableBody: HTMLTableSectionElement
+  let { users }: Props = $props()
+
+  let tableHeader: HTMLTableSectionElement = $state(null!)
+  let tableFooter: HTMLTableSectionElement = $state(null!)
+  let tableBody: HTMLTableSectionElement = $state(null!)
 </script>
 
 <div style="padding: 20px">
@@ -17,42 +21,47 @@
     startElement={() => tableHeader}
     endElement={() => tableFooter}
     itemsElement={() => tableBody}
-    let:loading
   >
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
-
-    <table style="width: 100%; border-collapse: collapse">
-      <thead bind:this={tableHeader} style="padding: 10px">
-        <tr>
-          <th style="padding: 12px; border: 1px solid #ccc">ID</th>
-          <th style="padding: 12px; border: 1px solid #ccc">Name</th>
-        </tr>
-      </thead>
-
-      <tbody bind:this={tableBody}>
-        {#each users.data as user (user.id)}
-          <tr data-user-id={user.id}>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
+    {#snippet children({ loading })}
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
+
+      <table style="width: 100%; border-collapse: collapse">
+        <thead bind:this={tableHeader} style="padding: 10px">
+          <tr>
+            <th style="padding: 12px; border: 1px solid #ccc">ID</th>
+            <th style="padding: 12px; border: 1px solid #ccc">Name</th>
           </tr>
-        {/each}
+        </thead>
 
-        {#if loading}
+        <tbody bind:this={tableBody}>
+          {#each users.data as user (user.id)}
+            <tr data-user-id={user.id}>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
+            </tr>
+          {/each}
+
+          {#if loading}
+            <tr>
+              <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            </tr>
+          {/if}
+        </tbody>
+
+        <tfoot bind:this={tableFooter} style="background: #fdf2e8; padding: 10px">
           <tr>
-            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
+              Table Footer - Triggers when this comes into view
+            </td>
           </tr>
-        {/if}
-      </tbody>
-
-      <tfoot bind:this={tableFooter} style="background: #fdf2e8; padding: 10px">
-        <tr>
-          <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
-            Table Footer - Triggers when this comes into view
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
+        </tfoot>
+      </table>
+
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
+    {/snippet}
   </InfiniteScroll>
 </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersSelector.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersSelector.svelte
index 8d14b562b..a9533ac74 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersSelector.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersSelector.svelte
@@ -2,53 +2,57 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div style="padding: 20px">
   <h1>Custom Triggers with Selectors Test</h1>
 
-  <InfiniteScroll
-    data="users"
-    itemsElement="#table-body"
-    startElement="#table-header"
-    endElement="#table-footer"
-    let:loading
-  >
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
-
-    <table style="width: 100%; border-collapse: collapse">
-      <thead id="table-header" style="padding: 12px">
-        <tr>
-          <th style="padding: 12px; border: 1px solid #ccc">ID</th>
-          <th style="padding: 12px; border: 1px solid #ccc">Name</th>
-        </tr>
-      </thead>
-
-      <tbody id="table-body">
-        {#each users.data as user (user.id)}
-          <tr data-user-id={user.id}>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
-            <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
-          </tr>
-        {/each}
+  <InfiniteScroll data="users" itemsElement="#table-body" startElement="#table-header" endElement="#table-footer">
+    {#snippet children({ loading })}
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
 
-        {#if loading}
+      <table style="width: 100%; border-collapse: collapse">
+        <thead id="table-header" style="padding: 12px">
           <tr>
-            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            <th style="padding: 12px; border: 1px solid #ccc">ID</th>
+            <th style="padding: 12px; border: 1px solid #ccc">Name</th>
           </tr>
-        {/if}
-      </tbody>
-
-      <tfoot id="table-footer" style="padding: 12px">
-        <tr>
-          <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
-            Table Footer - Triggers when this comes into view
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-
-    <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">Spacer</div>
+        </thead>
+
+        <tbody id="table-body">
+          {#each users.data as user (user.id)}
+            <tr data-user-id={user.id}>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.id}</td>
+              <td style="padding: 80px 12px; border: 1px solid #ccc">{user.name}</td>
+            </tr>
+          {/each}
+
+          {#if loading}
+            <tr>
+              <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+            </tr>
+          {/if}
+        </tbody>
+
+        <tfoot id="table-footer" style="padding: 12px">
+          <tr>
+            <td colspan="2" style="padding: 12px; border: 1px solid #ccc; text-align: center">
+              Table Footer - Triggers when this comes into view
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div style="height: 300px; width: 100%; text-align: center; line-height: 300px; border: 1px solid #ccc">
+        Spacer
+      </div>
+    {/snippet}
   </InfiniteScroll>
 </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/DataTable.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/DataTable.svelte
index b9b3da679..d7dc4276b 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/DataTable.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/DataTable.svelte
@@ -2,33 +2,39 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
-</script>
-
-<InfiniteScroll data="users" itemsElement="tbody" let:loading>
-  <table style="width: 100%; border-collapse: collapse">
-    <thead>
-      <tr>
-        <th style="padding: 8px; border: 1px solid #ccc">ID</th>
-        <th style="padding: 8px; border: 1px solid #ccc">Name</th>
-      </tr>
-    </thead>
+  interface Props {
+    users: { data: User[] }
+  }
 
-    <tbody>
-      {#each users.data as user (user.id)}
-        <tr data-user-id={user.id}>
-          <td style="padding: 8px; border: 1px solid #ccc">{user.id}</td>
-          <td style="padding: 8px; border: 1px solid #ccc">{user.name}</td>
-        </tr>
-      {/each}
-    </tbody>
+  let { users }: Props = $props()
+</script>
 
-    <tfoot>
-      {#if loading}
+<InfiniteScroll data="users" itemsElement="tbody">
+  {#snippet children({ loading })}
+    <table style="width: 100%; border-collapse: collapse">
+      <thead>
         <tr>
-          <td colspan="2" style="padding: 8px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+          <th style="padding: 8px; border: 1px solid #ccc">ID</th>
+          <th style="padding: 8px; border: 1px solid #ccc">Name</th>
         </tr>
-      {/if}
-    </tfoot>
-  </table>
+      </thead>
+
+      <tbody>
+        {#each users.data as user (user.id)}
+          <tr data-user-id={user.id}>
+            <td style="padding: 8px; border: 1px solid #ccc">{user.id}</td>
+            <td style="padding: 8px; border: 1px solid #ccc">{user.name}</td>
+          </tr>
+        {/each}
+      </tbody>
+
+      <tfoot>
+        {#if loading}
+          <tr>
+            <td colspan="2" style="padding: 8px; border: 1px solid #ccc; text-align: center"> Loading... </td>
+          </tr>
+        {/if}
+      </tfoot>
+    </table>
+  {/snippet}
 </InfiniteScroll>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/DualContainers.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/DualContainers.svelte
index d5540e821..52770769c 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/DualContainers.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/DualContainers.svelte
@@ -2,8 +2,12 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users1: { data: User[] }
-  export let users2: { data: User[] }
+  interface Props {
+    users1: { data: User[] }
+    users2: { data: User[] }
+  }
+
+  let { users1, users2 }: Props = $props()
 </script>
 
 <div style="padding: 20px">
@@ -16,7 +20,9 @@
         style="height: 400px; width: 100%; border: 2px solid #3b82f6; overflow-y: auto; background: #f0f9ff; padding: 10px"
       >
         <InfiniteScroll data="users1" style="display: grid; gap: 10px">
-          <div slot="loading" style="text-align: center; padding: 20px; color: #3b82f6">Loading more users1...</div>
+          {#snippet loading()}
+            <div style="text-align: center; padding: 20px; color: #3b82f6">Loading more users1...</div>
+          {/snippet}
 
           {#each users1.data as user (user.id)}
             <UserCard {user} />
@@ -33,7 +39,9 @@
         style="height: 400px; width: 100%; border: 2px solid #ef4444; overflow-y: auto; background: #fef2f2; padding: 10px"
       >
         <InfiniteScroll data="users2" style="display: grid; gap: 10px">
-          <div slot="loading" style="text-align: center; padding: 20px; color: #ef4444">Loading more users2...</div>
+          {#snippet loading()}
+            <div style="text-align: center; padding: 20px; color: #ef4444">Loading more users2...</div>
+          {/snippet}
 
           {#each users2.data as user (user.id)}
             <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/DualSibling.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/DualSibling.svelte
index 2efb0af53..952d68401 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/DualSibling.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/DualSibling.svelte
@@ -2,8 +2,12 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users1: { data: User[] }
-  export let users2: { data: User[] }
+  interface Props {
+    users1: { data: User[] }
+    users2: { data: User[] }
+  }
+
+  let { users1, users2 }: Props = $props()
 </script>
 
 <div style="padding: 20px">
@@ -18,11 +22,13 @@
           <UserCard {user} />
         {/each}
 
-        <div slot="next" let:exposedNext style="text-align: center; padding: 20px">
-          <button on:click={exposedNext.fetch} disabled={exposedNext.loading}>
-            {exposedNext.loading ? 'Loading...' : 'Load More Users 1'}
-          </button>
-        </div>
+        {#snippet next({ exposedNext })}
+          <div style="text-align: center; padding: 20px">
+            <button onclick={exposedNext.fetch} disabled={exposedNext.loading}>
+              {exposedNext.loading ? 'Loading...' : 'Load More Users 1'}
+            </button>
+          </div>
+        {/snippet}
       </InfiniteScroll>
     </div>
 
@@ -33,11 +39,13 @@
           <UserCard {user} />
         {/each}
 
-        <div slot="next" let:exposedNext style="text-align: center; padding: 20px">
-          <button on:click={exposedNext.fetch} disabled={exposedNext.loading}>
-            {exposedNext.loading ? 'Loading...' : 'Load More Users 2'}
-          </button>
-        </div>
+        {#snippet next({ exposedNext })}
+          <div style="text-align: center; padding: 20px">
+            <button onclick={exposedNext.fetch} disabled={exposedNext.loading}>
+              {exposedNext.loading ? 'Loading...' : 'Load More Users 2'}
+            </button>
+          </div>
+        {/snippet}
       </InfiniteScroll>
     </div>
   </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Empty.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Empty.svelte
index 0a1082f95..64ddfd60e 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Empty.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Empty.svelte
@@ -2,13 +2,19 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div>
   <h1>Empty Dataset Test</h1>
   <InfiniteScroll data="users" style="display: grid; gap: 20px">
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Filtering.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Filtering.svelte
index 92807b596..1ac6d51ff 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Filtering.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Filtering.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
   import { InfiniteScroll, Link, useForm } from '@inertiajs/svelte'
-  import { onDestroy } from 'svelte'
+  import { onDestroy, untrack } from 'svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
-  export let preserveState: boolean
-  export let filter: string | undefined = undefined
-  export let search: string | undefined = undefined
+  interface Props {
+    users: { data: User[] }
+    preserveState: boolean
+    filter?: string | undefined
+    search?: string | undefined
+  }
+
+  let { users, preserveState, filter = undefined, search = undefined }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   const form = useForm({
     filter: undefined,
     page: undefined,
     search: search,
   })
 
-  let timeoutId: ReturnType<typeof setTimeout> | undefined
-  let previousSearch = search
+  let timeoutId: ReturnType<typeof setTimeout> | undefined = $state()
+  // svelte-ignore state_referenced_locally
+  let previousSearch = $state(search)
 
   onDestroy(() => {
     if (timeoutId) {
@@ -24,29 +30,33 @@
   })
 
   // Debounced search using manual setTimeout/clearTimeout
-  $: if ($form.search !== previousSearch) {
-    // Clear previous timeout
-    if (timeoutId) {
-      clearTimeout(timeoutId)
-    }
+  $effect(() => {
+    if (form.search !== previousSearch) {
+      untrack(() => {
+        // Clear previous timeout
+        if (timeoutId) {
+          clearTimeout(timeoutId)
+        }
 
-    // Set new timeout for debounced search
-    timeoutId = setTimeout(() => {
-      $form.get(
-        '',
-        preserveState
-          ? {
-              preserveState: true,
-              replace: true,
-              only: ['users', 'search', 'filter'],
-              reset: ['users'],
-            }
-          : { replace: true },
-      )
-      // eslint-disable-next-line svelte/infinite-reactive-loop
-      previousSearch = $form.search
-    }, 250)
-  }
+        // Set new timeout for debounced search
+        timeoutId = setTimeout(() => {
+          form.get(
+            '',
+            preserveState
+              ? {
+                  preserveState: true,
+                  replace: true,
+                  only: ['users', 'search', 'filter'],
+                  reset: ['users'],
+                }
+              : { replace: true },
+          )
+
+          previousSearch = form.search
+        }, 250)
+      })
+    }
+  })
 </script>
 
 <div>
@@ -56,11 +66,13 @@
     <Link href="?filter=n-z">N-Z</Link>
     <div>Current filter: {filter || 'none'}</div>
     <div>Current search: {search || 'none'}</div>
-    <input bind:value={$form.search} placeholder="Search..." />
+    <input bind:value={form.search} placeholder="Search..." />
   </div>
 
   <InfiniteScroll data="users" style="display: grid; gap: 20px">
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <UserCard {user} />
@@ -73,6 +85,6 @@
     <Link href="?filter=n-z">N-Z</Link>
     <div>Current filter: {filter || 'none'}</div>
     <div>Current search: {search || 'none'}</div>
-    <input bind:value={$form.search} placeholder="Search..." />
+    <input bind:value={form.search} placeholder="Search..." />
   </div>
 </div>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Grid.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Grid.svelte
index fa174c0c1..2336483f8 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Grid.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Grid.svelte
@@ -2,15 +2,23 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px">
-  <div slot="loading" style="grid-column: 1 / -1; text-align: center; padding: 20px">Loading more users...</div>
+  {#snippet loading()}
+    <div style="grid-column: 1 / -1; text-align: center; padding: 20px">Loading more users...</div>
+  {/snippet}
 
-  <svelte:fragment slot="default">
+  <!-- eslint-disable svelte/no-useless-children-snippet -->
+  {#snippet children()}
     {#each users.data as user (user.id)}
       <UserCard {user} />
     {/each}
-  </svelte:fragment>
+  {/snippet}
+  <!-- eslint-enable svelte/no-useless-children-snippet -->
 </InfiniteScroll>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/HorizontalScroll.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/HorizontalScroll.svelte
index 987303228..5fa47c541 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/HorizontalScroll.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/HorizontalScroll.svelte
@@ -2,17 +2,22 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div style="height: 120px; overflow-x: scroll; display: flex; width: 100vw">
   <InfiniteScroll data="users" style="display: flex; gap: 20px; height: 120px">
-    <div
-      slot="loading"
-      style="min-width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; margin-left: 20px; margin-right: 20px"
-    >
-      Loading...
-    </div>
+    {#snippet loading()}
+      <div
+        style="min-width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; margin-left: 20px; margin-right: 20px"
+      >
+        Loading...
+      </div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <div
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte
index cb659b407..2ebd9c53a 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte
@@ -2,13 +2,19 @@
   import { inertia, InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div>
   <a href="/infinite-scroll" use:inertia>Go back to Links</a>
   <InfiniteScroll data="users" style="display: grid; gap: 20px">
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte
index 8bf6f6586..13e201613 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte
@@ -2,14 +2,20 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div>
   <h1>Infinite Scroll with Invisible First Child</h1>
 
   <InfiniteScroll data="users" style="display: grid; gap: 20px">
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     <div style="display: none">Hidden first element</div>
 
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Manual.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Manual.svelte
index 245799d79..912f821ff 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Manual.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Manual.svelte
@@ -2,25 +2,33 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" style="display: grid; gap: 20px" manual>
-  <div slot="previous" let:hasMore let:loading let:fetch>
-    <p>Has more previous items: {hasMore}</p>
-    <button on:click={fetch}>
-      {loading ? 'Loading previous items...' : 'Load previous items'}
-    </button>
-  </div>
+  {#snippet previous({ hasMore, loading, fetch })}
+    <div>
+      <p>Has more previous items: {hasMore}</p>
+      <button onclick={fetch}>
+        {loading ? 'Loading previous items...' : 'Load previous items'}
+      </button>
+    </div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
   {/each}
 
-  <div slot="next" let:hasMore let:loading let:fetch>
-    <p>Has more next items: {hasMore}</p>
-    <button on:click={fetch}>
-      {loading ? 'Loading next items...' : 'Load next items'}
-    </button>
-  </div>
+  {#snippet next({ hasMore, loading, fetch })}
+    <div>
+      <p>Has more next items: {hasMore}</p>
+      <button onclick={fetch}>
+        {loading ? 'Loading next items...' : 'Load next items'}
+      </button>
+    </div>
+  {/snippet}
 </InfiniteScroll>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/ManualAfter.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/ManualAfter.svelte
index e6d3ff030..82c3dce3f 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/ManualAfter.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/ManualAfter.svelte
@@ -2,7 +2,11 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" style="display: grid; gap: 20px" manualAfter={2}>
@@ -10,15 +14,17 @@
     <UserCard {user} />
   {/each}
 
-  <div slot="next" let:loading let:manualMode let:fetch>
-    {#if loading}
-      <p>Loading...</p>
-    {/if}
+  {#snippet next({ loading, manualMode, fetch })}
+    <div>
+      {#if loading}
+        <p>Loading...</p>
+      {/if}
 
-    <p>Manual mode: {manualMode}</p>
+      <p>Manual mode: {manualMode}</p>
 
-    {#if manualMode}
-      <button on:click={fetch}>Load next items...</button>
-    {/if}
-  </div>
+      {#if manualMode}
+        <button onclick={fetch}>Load next items...</button>
+      {/if}
+    </div>
+  {/snippet}
 </InfiniteScroll>
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/OverflowX.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/OverflowX.svelte
index 588b27b17..c95551b70 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/OverflowX.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/OverflowX.svelte
@@ -2,7 +2,11 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import type { User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div style="overflow-x: hidden">
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/PreserveUrl.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/PreserveUrl.svelte
index f1a52e8be..01aad4d9f 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/PreserveUrl.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/PreserveUrl.svelte
@@ -2,11 +2,17 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" preserveUrl={true} style="display: grid; gap: 20px">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/ProgrammaticRef.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/ProgrammaticRef.svelte
index 961225877..df605be8a 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/ProgrammaticRef.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/ProgrammaticRef.svelte
@@ -3,12 +3,16 @@
   import { onMount } from 'svelte'
   import UserCard, { type User } from './UserCard.svelte'
   import type { InfiniteScrollRef } from '@inertiajs/core'
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 
   // Use the actual component type like Form component does
-  let infRef: InfiniteScrollRef | null = null
-  let hasPrevious = false
-  let hasNext = false
+  let infRef: InfiniteScrollRef | null = $state(null)
+  let hasPrevious = $state(false)
+  let hasNext = $state(false)
 
   function updateStates() {
     hasPrevious = infRef?.hasPrevious() || false
@@ -34,13 +38,15 @@
     <p>Has more next items: {hasNext.toString()}</p>
 
     <div style="display: flex; gap: 10px; margin: 10px 0">
-      <button on:click={fetchPrevious}>Load Previous (Ref)</button>
-      <button on:click={fetchNext}>Load Next (Ref)</button>
+      <button onclick={fetchPrevious}>Load Previous (Ref)</button>
+      <button onclick={fetchNext}>Load Next (Ref)</button>
     </div>
   </div>
 
   <InfiniteScroll data="users" style="display: grid; gap: 20px" manual bind:this={infRef}>
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/ReloadUnrelated.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/ReloadUnrelated.svelte
index f35c83bec..ce1eaefc4 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/ReloadUnrelated.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/ReloadUnrelated.svelte
@@ -2,8 +2,12 @@
   import { InfiniteScroll, router } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
-  export let time: number
+  interface Props {
+    users: { data: User[] }
+    time: number
+  }
+
+  let { users, time }: Props = $props()
 
   const reloadTime = () => {
     router.reload({ only: ['time'] })
@@ -12,7 +16,7 @@
 
 <div>
   <div>
-    <button on:click={reloadTime} id="reload-button">Reload Time</button>
+    <button onclick={reloadTime} id="reload-button">Reload Time</button>
     <span id="time-display">Current time: {time}</span>
   </div>
 
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/RememberState.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/RememberState.svelte
index 74bef06ac..8c3db97f0 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/RememberState.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/RememberState.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
+  import { preventDefault } from 'svelte/legacy'
+
   import { InfiniteScroll, Link, router } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 
   function prependUser(id: number) {
     router.prependToProp('users.data', { id, name: `User ${id}` })
@@ -11,8 +17,8 @@
 
 <div style="margin-bottom: 40px; padding: 20px; border-top: 2px solid #ccc">
   <div style="margin-bottom: 20px">
-    <button on:click={() => prependUser(0)} style="margin-right: 10px">Prepend User '0'</button>
-    <button on:click={() => prependUser(-1)} style="margin-right: 10px">Prepend User '-1'</button>
+    <button onclick={() => prependUser(0)} style="margin-right: 10px">Prepend User '0'</button>
+    <button onclick={() => prependUser(-1)} style="margin-right: 10px">Prepend User '-1'</button>
   </div>
   <Link href="/home">Go Home</Link>
 </div>
@@ -22,17 +28,19 @@
     <UserCard {user} />
   {/each}
 
-  <div slot="next" let:loading let:manualMode let:fetch>
-    {#if loading}
-      <p>Loading...</p>
-    {/if}
+  {#snippet next({ loading, manualMode, fetch })}
+    <div>
+      {#if loading}
+        <p>Loading...</p>
+      {/if}
 
-    <p>Manual mode: {manualMode}</p>
+      <p>Manual mode: {manualMode}</p>
 
-    {#if manualMode}
-      <button on:click|preventDefault={fetch}>Load next items...</button>
-    {/if}
-  </div>
+      {#if manualMode}
+        <button onclick={preventDefault(fetch)}>Load next items...</button>
+      {/if}
+    </div>
+  {/snippet}
 </InfiniteScroll>
 
 <div style="margin-top: 40px; padding: 20px; border-top: 2px solid #ccc">
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Reverse.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Reverse.svelte
index c08380deb..b109853c1 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Reverse.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Reverse.svelte
@@ -2,13 +2,19 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
 
-  $: reversedUsers = [...users.data].reverse()
+  let { users }: Props = $props()
+
+  let reversedUsers = $derived([...users.data].reverse())
 </script>
 
 <InfiniteScroll data="users" style="display: grid; gap: 20px" reverse autoScroll={false}>
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each reversedUsers as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/ScrollContainer.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/ScrollContainer.svelte
index 147e3eb82..70cecef27 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/ScrollContainer.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/ScrollContainer.svelte
@@ -2,7 +2,11 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <div style="padding: 20px">
@@ -15,7 +19,9 @@
     style="height: 400px; width: 100%; border: 2px solid #ccc; overflow-y: auto; background: #f9f9f9; padding: 10px"
   >
     <InfiniteScroll data="users" style="display: grid; gap: 10px">
-      <div slot="loading" style="text-align: center; padding: 20px; color: #666">Loading more users...</div>
+      {#snippet loading()}
+        <div style="text-align: center; padding: 20px; color: #666">Loading more users...</div>
+      {/snippet}
 
       {#each users.data as user (user.id)}
         <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/ShortContent.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/ShortContent.svelte
index e63975c96..f822dbeb7 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/ShortContent.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/ShortContent.svelte
@@ -2,7 +2,11 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" itemsElement="tbody">
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/Toggles.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/Toggles.svelte
index 89152432c..1cd015c42 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/Toggles.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/Toggles.svelte
@@ -2,11 +2,15 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
 
-  let manual = false
-  let preserveUrl = false
-  let triggerMode: 'onlyPrevious' | 'onlyNext' | 'both' = 'onlyNext'
+  let { users }: Props = $props()
+
+  let manual = $state(false)
+  let preserveUrl = $state(false)
+  let triggerMode: 'onlyPrevious' | 'onlyNext' | 'both' = $state('onlyNext')
 </script>
 
 <div>
@@ -45,7 +49,9 @@
     onlyNext={triggerMode === 'onlyNext'}
     onlyPrevious={triggerMode === 'onlyPrevious'}
   >
-    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+    {#snippet loading()}
+      <div style="text-align: center; padding: 20px">Loading...</div>
+    {/snippet}
 
     {#each users.data as user (user.id)}
       <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerBoth.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerBoth.svelte
index 2727b3264..d00267fa1 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerBoth.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerBoth.svelte
@@ -2,11 +2,17 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" style="display: grid; gap: 20px">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerEndBuffer.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerEndBuffer.svelte
index 39e8bbb79..3e7918aef 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerEndBuffer.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerEndBuffer.svelte
@@ -2,11 +2,17 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" buffer={200} onlyNext style="display: grid; gap: 20px">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerStartBuffer.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerStartBuffer.svelte
index d9941d340..6647170fe 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/TriggerStartBuffer.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/TriggerStartBuffer.svelte
@@ -2,11 +2,17 @@
   import { InfiniteScroll } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 </script>
 
 <InfiniteScroll data="users" buffer={200} onlyPrevious style="display: grid; gap: 20px">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/UpdateQueryString.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/UpdateQueryString.svelte
index 2f5eda327..9d915dc63 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/UpdateQueryString.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/UpdateQueryString.svelte
@@ -2,18 +2,24 @@
   import { InfiniteScroll, page } from '@inertiajs/svelte'
   import UserCard, { type User } from './UserCard.svelte'
 
-  export let users: { data: User[] }
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
 
   window.testing = {
     ...(window.testing || {}),
     get pageUrl() {
-      return $page.url
+      return page.url
     },
   }
 </script>
 
 <InfiniteScroll data="users" style="display: grid; gap: 20px">
-  <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+  {#snippet loading()}
+    <div style="text-align: center; padding: 20px">Loading...</div>
+  {/snippet}
 
   {#each users.data as user (user.id)}
     <UserCard {user} />
diff --git a/packages/svelte/test-app/Pages/InfiniteScroll/UserCard.svelte b/packages/svelte/test-app/Pages/InfiniteScroll/UserCard.svelte
index 23ecbef9a..004393a74 100644
--- a/packages/svelte/test-app/Pages/InfiniteScroll/UserCard.svelte
+++ b/packages/svelte/test-app/Pages/InfiniteScroll/UserCard.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface User {
     id: number
     name: string
@@ -6,7 +6,11 @@
 </script>
 
 <script lang="ts">
-  export let user: User
+  interface Props {
+    user: User
+  }
+
+  let { user }: Props = $props()
 </script>
 
 <div
diff --git a/packages/svelte/test-app/Pages/Links/AsWarning.svelte b/packages/svelte/test-app/Pages/Links/AsWarning.svelte
index dbc998c9e..464372181 100644
--- a/packages/svelte/test-app/Pages/Links/AsWarning.svelte
+++ b/packages/svelte/test-app/Pages/Links/AsWarning.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
 
-  export let method
+  let { method } = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/Links/AsWarningFalse.svelte b/packages/svelte/test-app/Pages/Links/AsWarningFalse.svelte
index 0fd8eec12..d1189990e 100644
--- a/packages/svelte/test-app/Pages/Links/AsWarningFalse.svelte
+++ b/packages/svelte/test-app/Pages/Links/AsWarningFalse.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
-  export let method
+  let { method } = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/Links/AutomaticCancellation.svelte b/packages/svelte/test-app/Pages/Links/AutomaticCancellation.svelte
index d8d2e2f45..bbbc36a05 100644
--- a/packages/svelte/test-app/Pages/Links/AutomaticCancellation.svelte
+++ b/packages/svelte/test-app/Pages/Links/AutomaticCancellation.svelte
@@ -7,8 +7,8 @@
   <a
     href="/sleep"
     use:inertia
-    on:cancel={() => console.log('cancelled')}
-    on:start={() => console.log('started')}
+    oncancel={() => console.log('cancelled')}
+    onstart={() => console.log('started')}
     class="visit"
   >
     Link
diff --git a/packages/svelte/test-app/Pages/Links/CancelSyncRequest.svelte b/packages/svelte/test-app/Pages/Links/CancelSyncRequest.svelte
index 37059c04c..9101b4ac3 100644
--- a/packages/svelte/test-app/Pages/Links/CancelSyncRequest.svelte
+++ b/packages/svelte/test-app/Pages/Links/CancelSyncRequest.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
 
-  export let page: number
+  interface Props {
+    page: number
+  }
+
+  let { page }: Props = $props()
 </script>
 
 <h1 style="font-size: 40px;">
diff --git a/packages/svelte/test-app/Pages/Links/PartialReloads.svelte b/packages/svelte/test-app/Pages/Links/PartialReloads.svelte
index 8809ba20b..75c1b9f72 100644
--- a/packages/svelte/test-app/Pages/Links/PartialReloads.svelte
+++ b/packages/svelte/test-app/Pages/Links/PartialReloads.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
-  export let foo = 0
-  export let bar
-  export let baz
-  export let headers
+  let { foo = 0, bar, baz, headers } = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/Links/PreserveScroll.svelte b/packages/svelte/test-app/Pages/Links/PreserveScroll.svelte
index 6cd928701..e7c74c137 100644
--- a/packages/svelte/test-app/Pages/Links/PreserveScroll.svelte
+++ b/packages/svelte/test-app/Pages/Links/PreserveScroll.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithScrollRegion.svelte'
 </script>
 
@@ -6,7 +6,11 @@
   import { inertia } from '@inertiajs/svelte'
   import type { Page } from '@inertiajs/core'
 
-  export let foo: string = 'default'
+  interface Props {
+    foo?: string
+  }
+
+  let { foo = 'default' }: Props = $props()
 
   const preserveCallback = (page: Page) => {
     console.log(JSON.stringify(page))
diff --git a/packages/svelte/test-app/Pages/Links/PreserveScrollFalse.svelte b/packages/svelte/test-app/Pages/Links/PreserveScrollFalse.svelte
index ad7bfc78a..c8d89d156 100644
--- a/packages/svelte/test-app/Pages/Links/PreserveScrollFalse.svelte
+++ b/packages/svelte/test-app/Pages/Links/PreserveScrollFalse.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithoutScrollRegion.svelte'
 </script>
 
@@ -6,7 +6,11 @@
   import { inertia } from '@inertiajs/svelte'
   import type { Page } from '@inertiajs/core'
 
-  export let foo: string = 'default'
+  interface Props {
+    foo?: string
+  }
+
+  let { foo = 'default' }: Props = $props()
 
   const preserveCallback = (page: Page) => {
     console.log(JSON.stringify(page))
diff --git a/packages/svelte/test-app/Pages/Links/PreserveState.svelte b/packages/svelte/test-app/Pages/Links/PreserveState.svelte
index 2906139a7..d7b254de2 100644
--- a/packages/svelte/test-app/Pages/Links/PreserveState.svelte
+++ b/packages/svelte/test-app/Pages/Links/PreserveState.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithoutScrollRegion.svelte'
 </script>
 
@@ -7,7 +7,11 @@
   import { inertia } from '@inertiajs/svelte'
   import type { Page } from '@inertiajs/core'
 
-  export let foo: string = 'default'
+  interface Props {
+    foo?: string
+  }
+
+  let { foo = 'default' }: Props = $props()
 
   const preserveCallback = (page: Page) => {
     alert(page)
diff --git a/packages/svelte/test-app/Pages/Links/PreserveUrl.svelte b/packages/svelte/test-app/Pages/Links/PreserveUrl.svelte
index 73d66f8d6..614cd41e8 100644
--- a/packages/svelte/test-app/Pages/Links/PreserveUrl.svelte
+++ b/packages/svelte/test-app/Pages/Links/PreserveUrl.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
   import { router, Link } from '@inertiajs/svelte'
 
-  export let foo: string = 'default'
-  export let items:
-    | {
-        data: string[]
-        next_page_url?: string
-      }
-    | undefined = undefined
+  interface Props {
+    foo?: string
+    items?:
+      | {
+          data: string[]
+          next_page_url?: string
+        }
+      | undefined
+  }
+
+  let { foo = 'default', items = undefined }: Props = $props()
 
   const loadMore = () => {
     if (items?.next_page_url) {
@@ -50,7 +54,7 @@
       {/if}
 
       {#if items.next_page_url}
-        <button on:click={loadMore} class="load-more-router">Load More Router</button>
+        <button onclick={loadMore} class="load-more-router">Load More Router</button>
       {/if}
     </div>
   {/if}
diff --git a/packages/svelte/test-app/Pages/Links/PropUpdate.svelte b/packages/svelte/test-app/Pages/Links/PropUpdate.svelte
index 9494cc679..746a386d5 100644
--- a/packages/svelte/test-app/Pages/Links/PropUpdate.svelte
+++ b/packages/svelte/test-app/Pages/Links/PropUpdate.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
 
-  let href = '/sleep'
+  let href = $state('/sleep')
 
   const changeUrl = () => {
     href = '/something-else'
@@ -9,6 +9,6 @@
 </script>
 
 <div>
-  <button on:click={changeUrl}>Change URL</button>
+  <button onclick={changeUrl}>Change URL</button>
   <Link {href} class="get">The Link</Link>
 </div>
diff --git a/packages/svelte/test-app/Pages/Links/Reactivity.svelte b/packages/svelte/test-app/Pages/Links/Reactivity.svelte
index b3b585ee1..38f3d8a78 100644
--- a/packages/svelte/test-app/Pages/Links/Reactivity.svelte
+++ b/packages/svelte/test-app/Pages/Links/Reactivity.svelte
@@ -2,12 +2,12 @@
   import { Link } from '@inertiajs/svelte'
   import type { CacheForOption, LinkPrefetchOption, Method } from '@inertiajs/core'
 
-  let method: Method = 'get'
-  let href = '/dump/get'
-  let data = { foo: 'bar' }
-  let headers = { 'X-Custom-Header': 'value' }
-  let prefetch: boolean | LinkPrefetchOption = false
-  let cacheFor: CacheForOption = 0
+  let method: Method = $state('get')
+  let href = $state('/dump/get')
+  let data = $state({ foo: 'bar' })
+  let headers = $state({ 'X-Custom-Header': 'value' })
+  let prefetch: boolean | LinkPrefetchOption = $state(false)
+  let cacheFor: CacheForOption = $state(0)
 
   function change() {
     method = 'post'
@@ -29,9 +29,9 @@
 
   <Link {method} {href} {data} {headers}>Submit</Link>
 
-  <button on:click={change}>Change Link Props</button>
+  <button onclick={change}>Change Link Props</button>
 
   <Link href="/dump/get" {prefetch} {cacheFor}>Prefetch Link</Link>
 
-  <button on:click={enablePrefetch}>Enable Prefetch (1s cache)</button>
+  <button onclick={enablePrefetch}>Enable Prefetch (1s cache)</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/Links/ScrollRegionList.svelte b/packages/svelte/test-app/Pages/Links/ScrollRegionList.svelte
index 3a2d10da6..489ccc6a2 100644
--- a/packages/svelte/test-app/Pages/Links/ScrollRegionList.svelte
+++ b/packages/svelte/test-app/Pages/Links/ScrollRegionList.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithScrollRegion.svelte'
 </script>
 
@@ -6,7 +6,11 @@
   import { router } from '@inertiajs/svelte'
   import type { VisitHelperOptions } from '@inertiajs/core'
 
-  export let user_id: number | undefined = undefined
+  interface Props {
+    user_id?: number | undefined
+  }
+
+  let { user_id = undefined }: Props = $props()
 
   const users = Array.from({ length: 10 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}` }))
 
@@ -22,9 +26,9 @@
   {#each users as user (user.id)}
     <div style="padding: 20px; border-bottom: 1px solid #ccc">
       <div style="margin-bottom: 10px; width: 500px">{user.name}</div>
-      <button on:click={() => navigate(user.id)}>Default</button>
-      <button on:click={() => navigate(user.id, { preserveScroll: true })}> Preserve True </button>
-      <button on:click={() => navigate(user.id, { preserveScroll: false })}> Preserve False </button>
+      <button onclick={() => navigate(user.id)}>Default</button>
+      <button onclick={() => navigate(user.id, { preserveScroll: true })}> Preserve True </button>
+      <button onclick={() => navigate(user.id, { preserveScroll: false })}> Preserve False </button>
     </div>
   {/each}
 </div>
diff --git a/packages/svelte/test-app/Pages/Links/UrlFragments.svelte b/packages/svelte/test-app/Pages/Links/UrlFragments.svelte
index d8ed516e9..0b45488ef 100644
--- a/packages/svelte/test-app/Pages/Links/UrlFragments.svelte
+++ b/packages/svelte/test-app/Pages/Links/UrlFragments.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
-  let documentScrollTop = 0
-  let documentScrollLeft = 0
+  let documentScrollTop = $state(0)
+  let documentScrollLeft = $state(0)
 
   const handleScrollEvent = () => {
     documentScrollTop = document.documentElement.scrollTop
@@ -10,13 +10,13 @@
   }
 </script>
 
-<svelte:document on:scroll={handleScrollEvent} />
+<svelte:document onscroll={handleScrollEvent} />
 
 <div>
   <span class="text">This is the links page that demonstrates url fragment behaviour</span>
   <div style="width: 200vw; height: 200vh; margin-top: 50vh">
     <!-- prettier-ignore -->
-    <button on:click={handleScrollEvent}>Update scroll positions</button>
+    <button onclick={handleScrollEvent}>Update scroll positions</button>
     <div class="document-position">Document scroll position is {documentScrollLeft} & {documentScrollTop}</div>
     <a href="/links/url-fragments#target" use:inertia class="basic">Basic link</a>
     <a href="#target" use:inertia class="fragment">Fragment link</a>
diff --git a/packages/svelte/test-app/Pages/MatchPropsOnKey.svelte b/packages/svelte/test-app/Pages/MatchPropsOnKey.svelte
index 9b0998943..475380a08 100644
--- a/packages/svelte/test-app/Pages/MatchPropsOnKey.svelte
+++ b/packages/svelte/test-app/Pages/MatchPropsOnKey.svelte
@@ -14,10 +14,15 @@
     baz: number[]
   }
 
-  export let foo: ComponentProps['foo']
-  export let bar: ComponentProps['bar']
-  export let baz: ComponentProps['baz']
+  interface Props {
+    foo: ComponentProps['foo']
+    bar: ComponentProps['bar']
+    baz: ComponentProps['baz']
+  }
+
+  let { foo, bar, baz }: Props = $props()
 
+  // svelte-ignore state_referenced_locally
   let page = foo.page
 
   const reloadIt = () => {
@@ -55,5 +60,5 @@
 <div>foo.page is {foo.page}</div>
 <div>foo.per_page is {foo.per_page}</div>
 <div>foo.meta.label is {foo.meta.label}</div>
-<button on:click={reloadIt}>Reload</button>
-<button on:click={getFresh}>Get Fresh</button>
+<button onclick={reloadIt}>Reload</button>
+<button onclick={getFresh}>Get Fresh</button>
diff --git a/packages/svelte/test-app/Pages/MergeNestedProps.svelte b/packages/svelte/test-app/Pages/MergeNestedProps.svelte
index 5b15ed6b7..e2c525d53 100644
--- a/packages/svelte/test-app/Pages/MergeNestedProps.svelte
+++ b/packages/svelte/test-app/Pages/MergeNestedProps.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let users: { data: { id: number; name: string }[]; meta: { page: number; perPage: number } } = {
-    data: [],
-    meta: { page: 1, perPage: 10 },
+  interface Props {
+    users?: { data: { id: number; name: string }[]; meta: { page: number; perPage: number } }
   }
 
+  let {
+    users = {
+      data: [],
+      meta: { page: 1, perPage: 10 },
+    },
+  }: Props = $props()
+
   const loadMore = () => {
     router.reload({
       only: ['users'],
@@ -17,5 +23,5 @@
 <div>
   <p id="users">{users.data.map((user) => user.name).join(', ')}</p>
   <p id="meta">Page: {users.meta.page}, Per Page: {users.meta.perPage}</p>
-  <button on:click={loadMore}>Load More</button>
+  <button onclick={loadMore}>Load More</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/MergeProps.svelte b/packages/svelte/test-app/Pages/MergeProps.svelte
index dd5150844..7f3f57012 100644
--- a/packages/svelte/test-app/Pages/MergeProps.svelte
+++ b/packages/svelte/test-app/Pages/MergeProps.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let foo: number[] = []
-  export let bar: number[] = []
+  interface Props {
+    foo?: number[]
+    bar?: number[]
+  }
+
+  let { foo = [], bar = [] }: Props = $props()
 
   const reloadIt = () => {
     router.reload({
@@ -19,5 +23,5 @@
 
 <div>bar count is {bar.length}</div>
 <div>foo count is {foo.length}</div>
-<button on:click={reloadIt}>Reload</button>
-<button on:click={getFresh}>Get Fresh</button>
+<button onclick={reloadIt}>Reload</button>
+<button onclick={getFresh}>Get Fresh</button>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.svelte
index 3c490629a..4297caa80 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.svelte
@@ -1,12 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import NestedLayout from '@/Layouts/NestedLayout.svelte'
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
-  import type { ComponentType } from 'svelte'
+  import type { Component } from 'svelte'
 
-  export const layout = (
-    h: (component: ComponentType, children: ComponentType[]) => ComponentType,
-    page: ComponentType,
-  ) => {
+  export const layout = (h: (component: Component, children: Component[]) => Component, page: Component) => {
     return h(SiteLayout, [h(NestedLayout, [page])])
   }
 </script>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.svelte
index bb2cc6463..3fad60ab3 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.svelte
@@ -1,12 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import NestedLayout from '@/Layouts/NestedLayout.svelte'
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
-  import type { ComponentType } from 'svelte'
+  import type { Component } from 'svelte'
 
-  export const layout = (
-    h: (component: ComponentType, children: ComponentType[]) => ComponentType,
-    page: ComponentType,
-  ) => {
+  export const layout = (h: (component: Component, children: Component[]) => Component, page: Component) => {
     return h(SiteLayout, [h(NestedLayout, [page])])
   }
 </script>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.svelte
index 045849e49..1cfc1a1d5 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.svelte
@@ -1,11 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
-  import type { ComponentType } from 'svelte'
+  import type { Component } from 'svelte'
 
-  export const layout = (
-    h: (component: ComponentType, children: ComponentType[]) => ComponentType,
-    page: ComponentType,
-  ) => h(SiteLayout, [page])
+  export const layout = (h: (component: Component, children: Component[]) => Component, page: Component) =>
+    h(SiteLayout, [page])
 </script>
 
 <script lang="ts">
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.svelte
index a676aaf7f..270ef583f 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.svelte
@@ -1,11 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
-  import type { ComponentType } from 'svelte'
+  import type { Component } from 'svelte'
 
-  export const layout = (
-    h: (component: ComponentType, children: ComponentType[]) => ComponentType,
-    page: ComponentType,
-  ) => h(SiteLayout, [page])
+  export const layout = (h: (component: Component, children: Component[]) => Component, page: Component) =>
+    h(SiteLayout, [page])
 </script>
 
 <script lang="ts">
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.svelte
index d97763b3e..e33ce82c2 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import NestedLayout from '@/Layouts/NestedLayout.svelte'
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
 
@@ -8,7 +8,7 @@
 <script lang="ts">
   import { inertia, page } from '@inertiajs/svelte'
 
-  window._inertia_page_props = $page.props
+  window._inertia_page_props = page.props
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.svelte
index 655b7035f..99d77a732 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import NestedLayout from '@/Layouts/NestedLayout.svelte'
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
 
@@ -8,7 +8,7 @@
 <script lang="ts">
   import { inertia, page } from '@inertiajs/svelte'
 
-  window._inertia_page_props = $page.props
+  window._inertia_page_props = page.props
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.svelte
index 6eb6f083b..098352baa 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
 
   export const layout = SiteLayout
@@ -7,7 +7,7 @@
 <script lang="ts">
   import { inertia, page } from '@inertiajs/svelte'
 
-  window._inertia_page_props = $page.props
+  window._inertia_page_props = page.props
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.svelte b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.svelte
index cdadd08bd..66341bf8b 100644
--- a/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.svelte
+++ b/packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import SiteLayout from '@/Layouts/SiteLayout.svelte'
 
   export const layout = SiteLayout
@@ -7,7 +7,7 @@
 <script lang="ts">
   import { inertia, page } from '@inertiajs/svelte'
 
-  window._inertia_page_props = $page.props
+  window._inertia_page_props = page.props
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/Poll/HookManual.svelte b/packages/svelte/test-app/Pages/Poll/HookManual.svelte
index 5c1923d58..7018c7f2f 100644
--- a/packages/svelte/test-app/Pages/Poll/HookManual.svelte
+++ b/packages/svelte/test-app/Pages/Poll/HookManual.svelte
@@ -15,5 +15,5 @@
   )
 </script>
 
-<button on:click={() => start()}>Start</button>
-<button on:click={() => stop()}>Stop</button>
+<button onclick={() => start()}>Start</button>
+<button onclick={() => stop()}>Stop</button>
diff --git a/packages/svelte/test-app/Pages/Poll/RouterManual.svelte b/packages/svelte/test-app/Pages/Poll/RouterManual.svelte
index 0c460e0c0..c0f7fa924 100644
--- a/packages/svelte/test-app/Pages/Poll/RouterManual.svelte
+++ b/packages/svelte/test-app/Pages/Poll/RouterManual.svelte
@@ -15,5 +15,5 @@
   )
 </script>
 
-<button on:click={() => start()}>Start</button>
-<button on:click={() => stop()}>Stop</button>
+<button onclick={() => start()}>Start</button>
+<button onclick={() => stop()}>Stop</button>
diff --git a/packages/svelte/test-app/Pages/Prefetch/AfterError.svelte b/packages/svelte/test-app/Pages/Prefetch/AfterError.svelte
index 7e90b3958..00276f06b 100644
--- a/packages/svelte/test-app/Pages/Prefetch/AfterError.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/AfterError.svelte
@@ -11,6 +11,6 @@
 </script>
 
 <div>
-  <button on:click={prefetchPage}>Prefetch Page</button>
-  <button on:click={visitPage}>Visit Page</button>
+  <button onclick={prefetchPage}>Prefetch Page</button>
+  <button onclick={visitPage}>Visit Page</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/Prefetch/Form.svelte b/packages/svelte/test-app/Pages/Prefetch/Form.svelte
index 9f552dbaf..24e26fdab 100644
--- a/packages/svelte/test-app/Pages/Prefetch/Form.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/Form.svelte
@@ -4,19 +4,19 @@
   const form = useForm({})
 
   const submitToSame = () => {
-    $form.post('/prefetch/form')
+    form.post('/prefetch/form')
   }
 
   const submitToOther = () => {
-    $form.post('/prefetch/redirect-back')
+    form.post('/prefetch/redirect-back')
   }
 </script>
 
 <div>
   <p>
-    Random Value: <span class="random-value">{$page.props.randomValue}</span>
+    Random Value: <span class="random-value">{page.props.randomValue}</span>
   </p>
-  <button on:click={submitToSame}>Submit to Same URL</button>
-  <button on:click={submitToOther}>Submit to Other URL</button>
+  <button onclick={submitToSame}>Submit to Same URL</button>
+  <button onclick={submitToOther}>Submit to Other URL</button>
   <Link href="/prefetch/test-page">Back to Test Page</Link>
 </div>
diff --git a/packages/svelte/test-app/Pages/Prefetch/Page.svelte b/packages/svelte/test-app/Pages/Prefetch/Page.svelte
index 2576f75bb..08a7c4989 100644
--- a/packages/svelte/test-app/Pages/Prefetch/Page.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/Page.svelte
@@ -1,10 +1,14 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/Prefetch.svelte'
 </script>
 
 <script lang="ts">
-  export let pageNumber: number
-  export let lastLoaded: number
+  interface Props {
+    pageNumber: number
+    lastLoaded: number
+  }
+
+  let { pageNumber, lastLoaded }: Props = $props()
 </script>
 
 <div>This is page {pageNumber}</div>
diff --git a/packages/svelte/test-app/Pages/Prefetch/PreserveState.svelte b/packages/svelte/test-app/Pages/Prefetch/PreserveState.svelte
index f5e2c4e8c..59344a21b 100644
--- a/packages/svelte/test-app/Pages/Prefetch/PreserveState.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/PreserveState.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let page: number
-  export let timestamp: number
+  interface Props {
+    page: number
+    timestamp: number
+  }
+
+  let { page, timestamp }: Props = $props()
 
   const prefetchPage2 = () => {
     router.prefetch('/prefetch/preserve-state', { method: 'get', data: { page: 2 } }, { cacheFor: '30s' })
@@ -22,9 +26,9 @@
   <div>Timestamp: {timestamp}</div>
 
   <h3>Prefetch:</h3>
-  <button on:click={prefetchPage2}>Prefetch Page 2</button>
+  <button onclick={prefetchPage2}>Prefetch Page 2</button>
 
   <h3>Load (should use cache if prefetched):</h3>
-  <button on:click={loadPage2WithoutPreserveState}>Load Page 2 (preserveState: false)</button>
-  <button on:click={loadPage2WithPreserveState}>Load Page 2 (preserveState: true)</button>
+  <button onclick={loadPage2WithoutPreserveState}>Load Page 2 (preserveState: false)</button>
+  <button onclick={loadPage2WithPreserveState}>Load Page 2 (preserveState: true)</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/Prefetch/SWR.svelte b/packages/svelte/test-app/Pages/Prefetch/SWR.svelte
index 0f42a6d2e..d5a105edc 100644
--- a/packages/svelte/test-app/Pages/Prefetch/SWR.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/SWR.svelte
@@ -1,10 +1,14 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/SWR.svelte'
 </script>
 
 <script lang="ts">
-  export let pageNumber: number
-  export let lastLoaded: number
+  interface Props {
+    pageNumber: number
+    lastLoaded: number
+  }
+
+  let { pageNumber, lastLoaded }: Props = $props()
 </script>
 
 <div>This is page {pageNumber}</div>
diff --git a/packages/svelte/test-app/Pages/Prefetch/Tags.svelte b/packages/svelte/test-app/Pages/Prefetch/Tags.svelte
index add6a0f14..9c1ab0ec7 100644
--- a/packages/svelte/test-app/Pages/Prefetch/Tags.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/Tags.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
+  import { createBubbler, preventDefault } from 'svelte/legacy'
+
+  const bubble = createBubbler()
   import { inertia, router, useForm } from '@inertiajs/svelte'
-  export let pageNumber
-  export let lastLoaded
-  export let propType: string
+  interface Props {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    pageNumber: any
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    lastLoaded: any
+    propType: string
+  }
+
+  let { pageNumber, lastLoaded, propType }: Props = $props()
 
   const form = useForm({
     name: '',
@@ -31,7 +40,7 @@
   }
 
   function submitWithUserInvalidation() {
-    $form.post('/dump/post', {
+    form.post('/dump/post', {
       invalidateCacheTags: propType === 'string' ? 'user' : ['user'],
     })
   }
@@ -56,16 +65,16 @@
     <a href="/prefetch/tags/6" use:inertia={{ prefetch: 'hover' }}> Untagged Page 6 </a>
   </div>
   <div id="controls">
-    <button id="flush-user" on:click={flushUserTags}> Flush User Tags </button>
-    <button id="flush-user-product" on:click={flushUserProductTags}> Flush User + Product Tags </button>
-    <button id="programmatic-prefetch" on:click={programmaticPrefetch}> Programmatic Prefetch </button>
+    <button id="flush-user" onclick={flushUserTags}> Flush User Tags </button>
+    <button id="flush-user-product" onclick={flushUserProductTags}> Flush User + Product Tags </button>
+    <button id="programmatic-prefetch" onclick={programmaticPrefetch}> Programmatic Prefetch </button>
   </div>
 
   <div id="form-section">
     <h3>Form Test</h3>
-    <form on:submit|preventDefault>
-      <input id="form-name" bind:value={$form.name} type="text" placeholder="Enter name" />
-      <button id="submit-invalidate-user" on:click={submitWithUserInvalidation}> Submit (Invalidate User) </button>
+    <form onsubmit={preventDefault(bubble('submit'))}>
+      <input id="form-name" bind:value={form.name} type="text" placeholder="Enter name" />
+      <button id="submit-invalidate-user" onclick={submitWithUserInvalidation}> Submit (Invalidate User) </button>
     </form>
   </div>
 
diff --git a/packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte b/packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte
index fe63f6d2c..b96f0ba29 100644
--- a/packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte
+++ b/packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte
@@ -2,8 +2,8 @@
   import { router } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
-  let isPrefetched = false
-  let isPrefetching = false
+  let isPrefetched = $state(false)
+  let isPrefetching = $state(false)
 
   const wayfinderUrl = (): {
     url: string
@@ -51,7 +51,7 @@
     Is Prefetching: <span id="is-prefetching">{isPrefetching}</span>
   </p>
 
-  <button on:click={testPrefetch} id="test-prefetch">Test prefetch</button>
-  <button on:click={testFlush} id="test-flush">Test flush</button>
-  <button on:click={flushAll} id="flush-all">Flush all</button>
+  <button onclick={testPrefetch} id="test-prefetch">Test prefetch</button>
+  <button onclick={testFlush} id="test-flush">Test flush</button>
+  <button onclick={flushAll} id="flush-all">Flush all</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/PreserveEqualProps.svelte b/packages/svelte/test-app/Pages/PreserveEqualProps.svelte
index eded338cd..911440bbc 100644
--- a/packages/svelte/test-app/Pages/PreserveEqualProps.svelte
+++ b/packages/svelte/test-app/Pages/PreserveEqualProps.svelte
@@ -1,27 +1,57 @@
 <script lang="ts">
   import { config, Link } from '@inertiajs/svelte'
+  import { untrack } from 'svelte'
 
-  export let nestedA: { count: number }
-  export let nestedB: { date: number }
+  type NestedA = { count: number }
+  type NestedB = { date: number }
 
-  let effectACount = 1
-  let effectBCount = 1
+  interface Props {
+    nestedA: NestedA
+    nestedB: NestedB
+  }
 
-  let previousNestedA: { count: number } = nestedA
-  let previousNestedB: { date: number } = nestedB
+  let { nestedA, nestedB }: Props = $props()
 
-  $: if (nestedA !== previousNestedA) {
-    effectACount = effectACount + 1
-    previousNestedA = nestedA
-  }
+  let effectACount = $state(0)
+  let effectBCount = $state(0)
 
-  $: if (nestedB !== previousNestedB) {
-    effectBCount = effectBCount + 1
-    previousNestedB = nestedB
-  }
+  // svelte-ignore state_referenced_locally
+  let previousNestedA = $state(nestedA)
+  // svelte-ignore state_referenced_locally
+  let previousNestedB = $state(nestedB)
+
+  $effect(() => {
+    const preserve = untrack(() => config.get('future.preserveEqualProps'))
+
+    // Even when `preserveEqualProps` is enabled, Svelte will wrap incoming props
+    // in a new reactive Proxy on each update. That means the reference to `nestedA`
+    // changes every time, regardless of whether the underlying object from Inertia
+    // was preserved or not. To avoid false positives, we compare by value when
+    // `preserveEqualProps` is enabled, and by reference otherwise.
+    const isDifferent = preserve
+      ? (a: NestedA, b: NestedA) => JSON.stringify(a) !== JSON.stringify(b)
+      : (a: NestedA, b: NestedA) => a !== b
+
+    if (isDifferent(nestedA, previousNestedA)) {
+      effectACount++
+      previousNestedA = preserve ? structuredClone(nestedA) : nestedA
+    }
+  })
+
+  $effect(() => {
+    if (nestedB !== previousNestedB) {
+      untrack(() => {
+        effectBCount++
+        previousNestedB = nestedB
+      })
+    }
+  })
 
   function enable() {
     config.set('future.preserveEqualProps', true)
+    setTimeout(() => {
+      console.log(config.get('future.preserveEqualProps'))
+    }, 300)
   }
 </script>
 
@@ -32,5 +62,5 @@
   <p id="effect-a">Effect A Count: {effectACount}</p>
   <p id="effect-b">Effect B Count: {effectBCount}</p>
   <Link method="post" href="/preserve-equal-props/back">Submit and redirect back</Link>
-  <button on:click={enable}>Enable</button>
+  <button onclick={enable}>Enable</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/ProgressComponent.svelte b/packages/svelte/test-app/Pages/ProgressComponent.svelte
index acbb70964..d8d9dbace 100644
--- a/packages/svelte/test-app/Pages/ProgressComponent.svelte
+++ b/packages/svelte/test-app/Pages/ProgressComponent.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   declare global {
     interface Window {
       progressTests: unknown[]
@@ -11,7 +11,7 @@
 
   window.progressTests = []
 
-  let logs: string[] = []
+  let logs: string[] = $state([])
 
   const log = (...args: unknown[]) => {
     const message = args.join(' ')
@@ -82,24 +82,24 @@
   <h1>Progress API Test</h1>
 
   <div>
-    <button on:click={testStart}>Start</button>
-    <button on:click={testSet25}>Set 25%</button>
-    <button on:click={testSet50}>Set 50%</button>
-    <button on:click={testSet75}>Set 75%</button>
-    <button on:click={testFinish}>Finish</button>
+    <button onclick={testStart}>Start</button>
+    <button onclick={testSet25}>Set 25%</button>
+    <button onclick={testSet50}>Set 50%</button>
+    <button onclick={testSet75}>Set 75%</button>
+    <button onclick={testFinish}>Finish</button>
   </div>
 
   <div>
-    <button on:click={testReset}>Reset</button>
-    <button on:click={testRemove}>Remove</button>
-    <button on:click={testHide}>Hide</button>
-    <button on:click={testReveal}>Reveal</button>
+    <button onclick={testReset}>Reset</button>
+    <button onclick={testRemove}>Remove</button>
+    <button onclick={testHide}>Hide</button>
+    <button onclick={testReveal}>Reveal</button>
   </div>
 
   <div>
-    <button on:click={testIsStarted}>Is Started</button>
-    <button on:click={testGetStatus}>Get Status</button>
-    <button on:click={clearLogs}>Clear</button>
+    <button onclick={testIsStarted}>Is Started</button>
+    <button onclick={testGetStatus}>Get Status</button>
+    <button onclick={clearLogs}>Clear</button>
   </div>
 
   <div>
diff --git a/packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte b/packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte
index c75535831..6220138f0 100644
--- a/packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte
+++ b/packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { useRemember } from '@inertiajs/svelte'
 
-  let untracked = ''
+  let { ...rest } = $props()
+
+  let untracked = $state('')
 
   const data = useRemember(
     {
@@ -12,15 +14,15 @@
   )
 </script>
 
-<div {...$$restProps}>
+<div {...rest}>
   <span>This component uses a string 'key' for the remember functionality.</span>
   <label>
     Full Name
-    <input type="text" class="a-name" name="full_name" bind:value={$data.name} />
+    <input type="text" class="a-name" name="full_name" bind:value={data.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" class="a-remember" name="remember" bind:checked={$data.remember} />
+    <input type="checkbox" class="a-remember" name="remember" bind:checked={data.remember} />
   </label>
   <label>
     Remember Me
diff --git a/packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte b/packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte
index 045c1dbcd..46449c9ce 100644
--- a/packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte
+++ b/packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { useRemember } from '@inertiajs/svelte'
 
-  let untracked = ''
+  let { ...rest } = $props()
+
+  let untracked = $state('')
 
   const data = useRemember(
     {
@@ -12,15 +14,15 @@
   )
 </script>
 
-<div {...$$restProps}>
+<div {...rest}>
   <span>This component uses a string 'key' for the remember functionality.</span>
   <label>
     Full Name
-    <input type="text" class="b-name" name="full_name" bind:value={$data.name} />
+    <input type="text" class="b-name" name="full_name" bind:value={data.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" class="b-remember" name="remember" bind:checked={$data.remember} />
+    <input type="checkbox" class="b-remember" name="remember" bind:checked={data.remember} />
   </label>
   <label>
     Remember Me
diff --git a/packages/svelte/test-app/Pages/Remember/Default.svelte b/packages/svelte/test-app/Pages/Remember/Default.svelte
index 7b75ac08f..5c166c9b6 100644
--- a/packages/svelte/test-app/Pages/Remember/Default.svelte
+++ b/packages/svelte/test-app/Pages/Remember/Default.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
-  let name = ''
-  let remember = false
-  let untracked = ''
+  let name = $state('')
+  let remember = $state(false)
+  let untracked = $state('')
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/Remember/FormHelper/Default.svelte b/packages/svelte/test-app/Pages/Remember/FormHelper/Default.svelte
index 3716d73c5..cbf8cbfb1 100644
--- a/packages/svelte/test-app/Pages/Remember/FormHelper/Default.svelte
+++ b/packages/svelte/test-app/Pages/Remember/FormHelper/Default.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { inertia, useForm } from '@inertiajs/svelte'
 
-  let untracked = ''
+  let untracked = $state('')
 
   const form = useForm({
     name: 'foo',
@@ -10,38 +10,38 @@
   })
 
   const submit = () => {
-    $form.post('/remember/form-helper/default')
+    form.post('/remember/form-helper/default')
   }
 </script>
 
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
-  {#if $form.errors.name}
-    <span class="name_error">{$form.errors.name}</span>
+  {#if form.errors.name}
+    <span class="name_error">{form.errors.name}</span>
   {/if}
   <label>
     Handle
-    <input type="text" id="handle" name="handle" bind:value={$form.handle} />
+    <input type="text" id="handle" name="handle" bind:value={form.handle} />
   </label>
-  {#if $form.errors.handle}
-    <span class="handle_error">{$form.errors.handle}</span>
+  {#if form.errors.handle}
+    <span class="handle_error">{form.errors.handle}</span>
   {/if}
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
-  {#if $form.errors.remember}
-    <span class="remember_error">{$form.errors.remember}</span>
+  {#if form.errors.remember}
+    <span class="remember_error">{form.errors.remember}</span>
   {/if}
   <label>
     Untracked
     <input type="text" id="untracked" name="untracked" bind:value={untracked} />
   </label>
 
-  <button on:click={submit} class="submit">Submit form</button>
+  <button onclick={submit} class="submit">Submit form</button>
 
   <a href="/dump/get" use:inertia class="link">Navigate away</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Remember/FormHelper/Remember.svelte b/packages/svelte/test-app/Pages/Remember/FormHelper/Remember.svelte
index 5e7f3acf4..974eef79c 100644
--- a/packages/svelte/test-app/Pages/Remember/FormHelper/Remember.svelte
+++ b/packages/svelte/test-app/Pages/Remember/FormHelper/Remember.svelte
@@ -7,46 +7,46 @@
     remember: false,
   })
 
-  let untracked = ''
+  let untracked = $state('')
 
   const submit = () => {
-    $form.post('/remember/form-helper/remember')
+    form.post('/remember/form-helper/remember')
   }
 
   const reset = () => {
-    $form.reset('handle').clearErrors('name')
+    form.reset('handle').clearErrors('name')
   }
 </script>
 
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="name" bind:value={$form.name} />
+    <input type="text" id="name" name="name" bind:value={form.name} />
   </label>
-  {#if $form.errors.name}
-    <span class="name_error">{$form.errors.name}</span>
+  {#if form.errors.name}
+    <span class="name_error">{form.errors.name}</span>
   {/if}
   <label>
     Handle
-    <input type="text" id="handle" name="handle" bind:value={$form.handle} />
+    <input type="text" id="handle" name="handle" bind:value={form.handle} />
   </label>
-  {#if $form.errors.handle}
-    <span class="handle_error">{$form.errors.handle}</span>
+  {#if form.errors.handle}
+    <span class="handle_error">{form.errors.handle}</span>
   {/if}
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
-  {#if $form.errors.remember}
-    <span class="remember_error">{$form.errors.remember}</span>
+  {#if form.errors.remember}
+    <span class="remember_error">{form.errors.remember}</span>
   {/if}
   <label>
     Untracked
     <input type="text" id="untracked" name="untracked" bind:value={untracked} />
   </label>
 
-  <button on:click={submit} class="submit">Submit form</button>
-  <button on:click={reset} class="reset-one">Reset one field & error</button>
+  <button onclick={submit} class="submit">Submit form</button>
+  <button onclick={reset} class="reset-one">Reset one field & error</button>
 
   <a href="/dump/get" use:inertia class="link">Navigate away</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte b/packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte
index 280c04624..9faa0e853 100644
--- a/packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte
+++ b/packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte
@@ -3,7 +3,7 @@
   import ComponentB from '@/Pages/Remember/Components/ComponentB.svelte'
   import { inertia, useRemember } from '@inertiajs/svelte'
 
-  let untracked = ''
+  let untracked = $state('')
 
   const form = useRemember({
     name: '',
@@ -14,11 +14,11 @@
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="full_name" bind:value={$form.name} />
+    <input type="text" id="name" name="full_name" bind:value={form.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
   <label>
     Untracked
diff --git a/packages/svelte/test-app/Pages/Remember/Object.svelte b/packages/svelte/test-app/Pages/Remember/Object.svelte
index 83c895e2a..5ca02da07 100644
--- a/packages/svelte/test-app/Pages/Remember/Object.svelte
+++ b/packages/svelte/test-app/Pages/Remember/Object.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { inertia, useRemember } from '@inertiajs/svelte'
 
-  let untracked = ''
+  let untracked = $state('')
 
   const form = useRemember({
     name: '',
@@ -12,11 +12,11 @@
 <div>
   <label>
     Full Name
-    <input type="text" id="name" name="full_name" bind:value={$form.name} />
+    <input type="text" id="name" name="full_name" bind:value={form.name} />
   </label>
   <label>
     Remember Me
-    <input type="checkbox" id="remember" name="remember" bind:checked={$form.remember} />
+    <input type="checkbox" id="remember" name="remember" bind:checked={form.remember} />
   </label>
   <label>
     Untracked
diff --git a/packages/svelte/test-app/Pages/Remember/Router.svelte b/packages/svelte/test-app/Pages/Remember/Router.svelte
index 518f2986a..2c2f61707 100644
--- a/packages/svelte/test-app/Pages/Remember/Router.svelte
+++ b/packages/svelte/test-app/Pages/Remember/Router.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  let foo = '-'
-  let bar = 0
+  let foo = $state('-')
+  let bar = $state(0)
 
   function remember() {
     router.remember('foo')
@@ -34,7 +34,7 @@
 <div>
   <p>Foo: {foo}</p>
   <p>Bar: {bar}</p>
-  <button on:click={remember}>Remember</button>
-  <button on:click={restore}>Restore</button>
-  <button on:click={restoreTyped}>Restore Typed</button>
+  <button onclick={remember}>Remember</button>
+  <button onclick={restore}>Restore</button>
+  <button onclick={restoreTyped}>Restore Typed</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/SSR/PageWithScriptElement.svelte b/packages/svelte/test-app/Pages/SSR/PageWithScriptElement.svelte
index dc5e7ec57..7d1a4708b 100644
--- a/packages/svelte/test-app/Pages/SSR/PageWithScriptElement.svelte
+++ b/packages/svelte/test-app/Pages/SSR/PageWithScriptElement.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let message: string
+  interface Props {
+    message: string
+  }
+
+  let { message }: Props = $props()
 </script>
 
 <div>
diff --git a/packages/svelte/test-app/Pages/ScrollAfterRender.svelte b/packages/svelte/test-app/Pages/ScrollAfterRender.svelte
index ae608b32a..2f7917819 100644
--- a/packages/svelte/test-app/Pages/ScrollAfterRender.svelte
+++ b/packages/svelte/test-app/Pages/ScrollAfterRender.svelte
@@ -1,11 +1,15 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let originalScrollTo: typeof window.scrollTo | null = null
 </script>
 
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
 
-  export let page: number
+  interface Props {
+    page: number
+  }
+
+  let { page }: Props = $props()
 
   // Patch scrollTo to log synchronously when it's called (not when the scroll event fires)
   if (!originalScrollTo) {
@@ -35,7 +39,7 @@
     Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id minim
     sit elit.
   </p>
-  <Link href={`/scroll-after-render/${page + 1}`} style="display: block; margin-top: 20px;" on:before={beforeNavigate}>
+  <Link href={`/scroll-after-render/${page + 1}`} style="display: block; margin-top: 20px;" onbefore={beforeNavigate}>
     Go to page {page + 1}
   </Link>
   {#each Array(500).keys() as i (i)}
diff --git a/packages/svelte/test-app/Pages/ScrollableParent.svelte b/packages/svelte/test-app/Pages/ScrollableParent.svelte
index 789171a21..adeb6b24c 100644
--- a/packages/svelte/test-app/Pages/ScrollableParent.svelte
+++ b/packages/svelte/test-app/Pages/ScrollableParent.svelte
@@ -2,30 +2,30 @@
   import { onMount } from 'svelte'
   import { getScrollableParent } from '@inertiajs/core'
 
-  let overflowXHidden: HTMLDivElement
-  let overflowXScroll: HTMLDivElement
-  let overflowYAuto: HTMLDivElement
-  let overflowYAutoNoHeight: HTMLDivElement
-  let overflowXScrollOverflowYHidden: HTMLDivElement
-  let horizontalScrollCalc: HTMLDivElement
-  let verticalScrollMaxHeight: HTMLDivElement
-  let nestedScroll: HTMLDivElement
-  let overflowAutoNoConstraints: HTMLDivElement
-  let flexHorizontalCarousel: HTMLDivElement
-  let coercedAutoNoConstraint: HTMLDivElement
-  let displayContents: HTMLDivElement
-  let overflowClip: HTMLDivElement
-  let overflowOverlay: HTMLDivElement
-  let inlineWidthStyle: HTMLDivElement
-  let bothScrollDirections: HTMLDivElement
-  let overflowYAutoOverflowXVisible: HTMLDivElement
-  let overflowYAutoOverflowXClip: HTMLDivElement
-  let overflowXAutoOverflowYVisible: HTMLDivElement
-  let overflowXAutoOverflowYClip: HTMLDivElement
-  let overflowYAutoOverflowXHidden: HTMLDivElement
-  let overflowXAutoOverflowYHidden: HTMLDivElement
+  let overflowXHidden: HTMLDivElement = $state(null!)
+  let overflowXScroll: HTMLDivElement = $state(null!)
+  let overflowYAuto: HTMLDivElement = $state(null!)
+  let overflowYAutoNoHeight: HTMLDivElement = $state(null!)
+  let overflowXScrollOverflowYHidden: HTMLDivElement = $state(null!)
+  let horizontalScrollCalc: HTMLDivElement = $state(null!)
+  let verticalScrollMaxHeight: HTMLDivElement = $state(null!)
+  let nestedScroll: HTMLDivElement = $state(null!)
+  let overflowAutoNoConstraints: HTMLDivElement = $state(null!)
+  let flexHorizontalCarousel: HTMLDivElement = $state(null!)
+  let coercedAutoNoConstraint: HTMLDivElement = $state(null!)
+  let displayContents: HTMLDivElement = $state(null!)
+  let overflowClip: HTMLDivElement = $state(null!)
+  let overflowOverlay: HTMLDivElement = $state(null!)
+  let inlineWidthStyle: HTMLDivElement = $state(null!)
+  let bothScrollDirections: HTMLDivElement = $state(null!)
+  let overflowYAutoOverflowXVisible: HTMLDivElement = $state(null!)
+  let overflowYAutoOverflowXClip: HTMLDivElement = $state(null!)
+  let overflowXAutoOverflowYVisible: HTMLDivElement = $state(null!)
+  let overflowXAutoOverflowYClip: HTMLDivElement = $state(null!)
+  let overflowYAutoOverflowXHidden: HTMLDivElement = $state(null!)
+  let overflowXAutoOverflowYHidden: HTMLDivElement = $state(null!)
 
-  let results: Record<string, HTMLElement | null> = {}
+  let results: Record<string, HTMLElement | null> = $state({})
 
   onMount(() => {
     Object.entries({
diff --git a/packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte b/packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte
index ae592ebdf..da6da38ff 100644
--- a/packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte
+++ b/packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte
@@ -6,37 +6,45 @@
     foo: string
   }
 
-  export let foo
+  let { foo } = $props()
 
+  // svelte-ignore state_referenced_locally
   const form = useForm({ foo })
 
   const pageProps: PageProps = {
-    foo: $page.props.foo,
+    foo: page.props.foo,
   }
 
   const sveltePage = usePage<PageProps>()
 
+  // svelte-ignore state_referenced_locally
   console.log('[script] foo prop is', foo)
-  console.log('[script] $page.props.foo is', $page.props.foo)
-  console.log('[script] $sveltePage.props.foo is', $sveltePage.props.foo)
+  console.log('[script] page.props.foo is', page.props.foo)
+  console.log('[script] sveltePage.props.foo is', sveltePage.props.foo)
 
-  $: console.log('[reactive expression] foo prop is', foo)
-  $: console.log('[reactive expression] $page.props.foo is', $page.props.foo)
-  $: console.log('[reactive expression] $sveltePage.props.foo is', $sveltePage.props.foo)
+  $effect(() => {
+    console.log('[reactive expression] foo prop is', foo)
+  })
+  $effect(() => {
+    console.log('[reactive expression] page.props.foo is', page.props.foo)
+  })
+  $effect(() => {
+    console.log('[reactive expression] sveltePage.props.foo is', sveltePage.props.foo)
+  })
 
   onMount(() => {
     console.log('[onMount] foo prop is', foo)
-    console.log('[onMount] $page.props.foo is', $page.props.foo)
-    console.log('[onMount] $sveltePage.props.foo is', $sveltePage.props.foo)
+    console.log('[onMount] page.props.foo is', page.props.foo)
+    console.log('[onMount] sveltePage.props.foo is', sveltePage.props.foo)
   })
 </script>
 
 <div>
-  <input id="input" type="text" bind:value={$form.foo} />
+  <input id="input" type="text" bind:value={form.foo} />
   <p>foo prop is {foo}</p>
-  <p>$page.props.foo is {$page.props.foo}</p>
+  <p>page.props.foo is {page.props.foo}</p>
   <p>pageProps.foo is {pageProps.foo}</p>
-  <p>$sveltePage.props.foo is {$sveltePage.props.foo}</p>
+  <p>sveltePage.props.foo is {sveltePage.props.foo}</p>
 
   <a href="/svelte/props-and-page-store" use:inertia={{ data: { foo: 'bar' } }}> Bar </a>
   <a href="/svelte/props-and-page-store" use:inertia={{ data: { foo: 'baz' } }}> Baz </a>
diff --git a/packages/svelte/test-app/Pages/TypeScriptProps.svelte b/packages/svelte/test-app/Pages/TypeScriptProps.svelte
index acdd894c4..f02165dd2 100644
--- a/packages/svelte/test-app/Pages/TypeScriptProps.svelte
+++ b/packages/svelte/test-app/Pages/TypeScriptProps.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   declare module '@inertiajs/core' {
     export interface InertiaConfig {
       sharedPageProps: {
@@ -18,18 +18,20 @@
 
   const page = usePage<PageProps>()
 
-  $: error = $page.props.flash.error
-  $: postTitles = $page.props.posts.map((post) => post.title)
+  let error = $derived(page.props.flash.error)
+  let postTitles = $derived(page.props.posts.map((post) => post.title))
 
   // @ts-expect-error - 'message' does not exist on flash
-  $: flashMessage = $page.props.flash.message
+  let flashMessage = $derived(page.props.flash.message)
   // @ts-expect-error - 'users' does not exist on page props
-  $: userNames = $page.props.users.map((user) => user.name)
+  let userNames = $derived(page.props.users.map((user) => user.name))
 
-  console.log({
-    error,
-    postTitles,
-    flashMessage,
-    userNames,
+  $effect.pre(() => {
+    console.log({
+      error,
+      postTitles,
+      flashMessage,
+      userNames,
+    })
   })
 </script>
diff --git a/packages/svelte/test-app/Pages/ViewTransition/FormErrors.svelte b/packages/svelte/test-app/Pages/ViewTransition/FormErrors.svelte
index 5498daa11..03e3a6268 100644
--- a/packages/svelte/test-app/Pages/ViewTransition/FormErrors.svelte
+++ b/packages/svelte/test-app/Pages/ViewTransition/FormErrors.svelte
@@ -4,7 +4,7 @@
   const form = useForm({ name: '' })
 
   const submit = () => {
-    $form.post('/view-transition/form-errors', {
+    form.post('/view-transition/form-errors', {
       viewTransition: (viewTransition) => {
         viewTransition.ready.then(() => console.log('ready'))
         viewTransition.updateCallbackDone.then(() => console.log('updateCallbackDone'))
@@ -19,12 +19,12 @@
 
   <label>
     Name
-    <input id="name" bind:value={$form.name} type="text" name="name" />
+    <input id="name" bind:value={form.name} type="text" name="name" />
   </label>
 
-  {#if $form.errors.name}
-    <p class="name_error">{$form.errors.name}</p>
+  {#if form.errors.name}
+    <p class="name_error">{form.errors.name}</p>
   {/if}
 
-  <button class="submit" on:click={submit}>Submit with View Transition</button>
+  <button class="submit" onclick={submit}>Submit with View Transition</button>
 </div>
diff --git a/packages/svelte/test-app/Pages/ViewTransition/PageA.svelte b/packages/svelte/test-app/Pages/ViewTransition/PageA.svelte
index dbc0bbdf6..d554855b2 100644
--- a/packages/svelte/test-app/Pages/ViewTransition/PageA.svelte
+++ b/packages/svelte/test-app/Pages/ViewTransition/PageA.svelte
@@ -33,9 +33,9 @@
 
 <h1>Page A - View Transition Test</h1>
 
-<button on:click={transitionWithBoolean}>Transition with boolean</button>
-<button on:click={transitionWithCallback}>Transition with callback</button>
-<button on:click={clientSideReplace}>Client-side replace</button>
+<button onclick={transitionWithBoolean}>Transition with boolean</button>
+<button onclick={transitionWithCallback}>Transition with callback</button>
+<button onclick={clientSideReplace}>Client-side replace</button>
 <Link
   href="/view-transition/page-b"
   viewTransition={(viewTransition) => {
diff --git a/packages/svelte/test-app/Pages/Visits/AfterError.svelte b/packages/svelte/test-app/Pages/Visits/AfterError.svelte
index d1df995d9..edcdaaa66 100644
--- a/packages/svelte/test-app/Pages/Visits/AfterError.svelte
+++ b/packages/svelte/test-app/Pages/Visits/AfterError.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div>
-  <a href={'#'} on:click={visitDump}> Visit dump page </a>
+  <a href={'#'} onclick={visitDump}> Visit dump page </a>
 
-  <a href={'#'} on:click={throwErrorOnSuccess}> Throw error on success </a>
+  <a href={'#'} onclick={throwErrorOnSuccess}> Throw error on success </a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/AutomaticCancellation.svelte b/packages/svelte/test-app/Pages/Visits/AutomaticCancellation.svelte
index 346b1beeb..4633c41c6 100644
--- a/packages/svelte/test-app/Pages/Visits/AutomaticCancellation.svelte
+++ b/packages/svelte/test-app/Pages/Visits/AutomaticCancellation.svelte
@@ -15,5 +15,5 @@
 
 <div>
   <span class="text">This is the page that demonstrates that only one visit can be active at a time</span>
-  <a href={'#'} on:click={visit} class="visit">Link</a>
+  <a href={'#'} onclick={visit} class="visit">Link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Data/AutoConverted.svelte b/packages/svelte/test-app/Pages/Visits/Data/AutoConverted.svelte
index eee64d7a5..0c5e4b578 100644
--- a/packages/svelte/test-app/Pages/Visits/Data/AutoConverted.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Data/AutoConverted.svelte
@@ -37,9 +37,9 @@
     This is the page that demonstrates automatic conversion of plain objects to form-data using manual visits
   </span>
 
-  <a href={'#'} on:click={visitMethod} class="visit">Visit Link</a>
-  <a href={'#'} on:click={postMethod} class="post">POST Link</a>
-  <a href={'#'} on:click={putMethod} class="put">PUT Link</a>
-  <a href={'#'} on:click={patchMethod} class="patch">PATCH Link</a>
-  <a href={'#'} on:click={deleteMethod} class="delete">DELETE Link</a>
+  <a href={'#'} onclick={visitMethod} class="visit">Visit Link</a>
+  <a href={'#'} onclick={postMethod} class="post">POST Link</a>
+  <a href={'#'} onclick={putMethod} class="put">PUT Link</a>
+  <a href={'#'} onclick={patchMethod} class="patch">PATCH Link</a>
+  <a href={'#'} onclick={deleteMethod} class="delete">DELETE Link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Data/FormData.svelte b/packages/svelte/test-app/Pages/Visits/Data/FormData.svelte
index ce6f874f9..5d061a4f4 100644
--- a/packages/svelte/test-app/Pages/Visits/Data/FormData.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Data/FormData.svelte
@@ -45,9 +45,9 @@
 <div>
   <span class="text">This is the page that demonstrates manual visit data passing through FormData objects</span>
 
-  <a href={'#'} on:click={visitMethod} class="visit">Visit Link</a>
-  <a href={'#'} on:click={postMethod} class="post">POST Link</a>
-  <a href={'#'} on:click={putMethod} class="put">PUT Link</a>
-  <a href={'#'} on:click={patchMethod} class="patch">PATCH Link</a>
-  <a href={'#'} on:click={deleteMethod} class="delete">DELETE Link</a>
+  <a href={'#'} onclick={visitMethod} class="visit">Visit Link</a>
+  <a href={'#'} onclick={postMethod} class="post">POST Link</a>
+  <a href={'#'} onclick={putMethod} class="put">PUT Link</a>
+  <a href={'#'} onclick={patchMethod} class="patch">PATCH Link</a>
+  <a href={'#'} onclick={deleteMethod} class="delete">DELETE Link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Data/Object.svelte b/packages/svelte/test-app/Pages/Visits/Data/Object.svelte
index 08864e467..4d22c8620 100644
--- a/packages/svelte/test-app/Pages/Visits/Data/Object.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Data/Object.svelte
@@ -68,15 +68,15 @@
 <div>
   <span class="text">This is the page that demonstrates manual visit data passing through plain objects</span>
 
-  <a href={'#'} on:click={visitMethod} class="visit">Visit Link</a>
-  <a href={'#'} on:click={getMethod} class="get">GET Link</a>
-  <a href={'#'} on:click={postMethod} class="post">POST Link</a>
-  <a href={'#'} on:click={putMethod} class="put">PUT Link</a>
-  <a href={'#'} on:click={patchMethod} class="patch">PATCH Link</a>
-  <a href={'#'} on:click={deleteMethod} class="delete">DELETE Link</a>
+  <a href={'#'} onclick={visitMethod} class="visit">Visit Link</a>
+  <a href={'#'} onclick={getMethod} class="get">GET Link</a>
+  <a href={'#'} onclick={postMethod} class="post">POST Link</a>
+  <a href={'#'} onclick={putMethod} class="put">PUT Link</a>
+  <a href={'#'} onclick={patchMethod} class="patch">PATCH Link</a>
+  <a href={'#'} onclick={deleteMethod} class="delete">DELETE Link</a>
 
-  <a href={'#'} on:click={qsafDefault} class="qsaf-default">QSAF Defaults</a>
-  <a href={'#'} on:click={qsafIndices} class="qsaf-indices">QSAF Indices</a>
-  <a href={'#'} on:click={qsafBrackets} class="qsaf-brackets">QSAF Brackets</a>
-  <a href={'#'} on:click={deleteQueryParam} class="delete-query-param">Delete Query Param</a>
+  <a href={'#'} onclick={qsafDefault} class="qsaf-default">QSAF Defaults</a>
+  <a href={'#'} onclick={qsafIndices} class="qsaf-indices">QSAF Indices</a>
+  <a href={'#'} onclick={qsafBrackets} class="qsaf-brackets">QSAF Brackets</a>
+  <a href={'#'} onclick={deleteQueryParam} class="delete-query-param">Delete Query Param</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/ErrorBags.svelte b/packages/svelte/test-app/Pages/Visits/ErrorBags.svelte
index 132f88c7c..deb1e56d9 100644
--- a/packages/svelte/test-app/Pages/Visits/ErrorBags.svelte
+++ b/packages/svelte/test-app/Pages/Visits/ErrorBags.svelte
@@ -28,7 +28,7 @@
 
 <div>
   <span class="text">This is the page that demonstrates error bags using manual visits</span>
-  <a href={'#'} on:click={defaultVisit} class="default">Default visit</a>
-  <a href={'#'} on:click={basicVisit} class="visit">Basic visit</a>
-  <a href={'#'} on:click={postVisit} class="get">POST visit</a>
+  <a href={'#'} onclick={defaultVisit} class="default">Default visit</a>
+  <a href={'#'} onclick={basicVisit} class="visit">Basic visit</a>
+  <a href={'#'} onclick={postVisit} class="get">POST visit</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Headers.svelte b/packages/svelte/test-app/Pages/Visits/Headers.svelte
index 2c34c287f..a80af791b 100644
--- a/packages/svelte/test-app/Pages/Visits/Headers.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Headers.svelte
@@ -86,14 +86,14 @@
 <div>
   <span class="text">This is the page that demonstrates passing custom headers through manual visits</span>
 
-  <a href={'#'} on:click={defaultHeadersMethod} class="default">Standard visit Link</a>
+  <a href={'#'} onclick={defaultHeadersMethod} class="default">Standard visit Link</a>
 
-  <a href={'#'} on:click={visitWithCustomHeaders} class="visit">Specific visit Link</a>
-  <a href={'#'} on:click={getMethod} class="get">GET Link</a>
-  <a href={'#'} on:click={postMethod} class="post">POST Link</a>
-  <a href={'#'} on:click={putMethod} class="put">PUT Link</a>
-  <a href={'#'} on:click={patchMethod} class="patch">PATCH Link</a>
-  <a href={'#'} on:click={deleteMethod} class="delete">DELETE Link</a>
+  <a href={'#'} onclick={visitWithCustomHeaders} class="visit">Specific visit Link</a>
+  <a href={'#'} onclick={getMethod} class="get">GET Link</a>
+  <a href={'#'} onclick={postMethod} class="post">POST Link</a>
+  <a href={'#'} onclick={putMethod} class="put">PUT Link</a>
+  <a href={'#'} onclick={patchMethod} class="patch">PATCH Link</a>
+  <a href={'#'} onclick={deleteMethod} class="delete">DELETE Link</a>
 
-  <a href={'#'} on:click={overridden} class="overridden">Overriden Link</a>
+  <a href={'#'} onclick={overridden} class="overridden">Overriden Link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Location.svelte b/packages/svelte/test-app/Pages/Visits/Location.svelte
index d3b024abe..73acc8285 100644
--- a/packages/svelte/test-app/Pages/Visits/Location.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Location.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  const locationVisit = () => {
+  const locationVisit = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/location')
   }
 </script>
@@ -9,5 +11,5 @@
 <div>
   <span class="text">This is the page that demonstrates location visits</span>
 
-  <a href={'#'} on:click|preventDefault={locationVisit} class="example">Location visit</a>
+  <a href={'#'} onclick={locationVisit} class="example">Location visit</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/Method.svelte b/packages/svelte/test-app/Pages/Visits/Method.svelte
index 317651fdf..efb5aaae9 100644
--- a/packages/svelte/test-app/Pages/Visits/Method.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Method.svelte
@@ -35,11 +35,11 @@
 <div>
   <span class="text">This is the page that demonstrates manual visit methods</span>
 
-  <a href={'#'} on:click={standardVisitMethod} class="visit-get">Standard visit Link</a>
-  <a href={'#'} on:click={specificVisitMethod} class="visit-specific">Specific visit Link</a>
-  <a href={'#'} on:click={getMethod} class="get">GET Link</a>
-  <a href={'#'} on:click={postMethod} class="post">POST Link</a>
-  <a href={'#'} on:click={putMethod} class="put">PUT Link</a>
-  <a href={'#'} on:click={patchMethod} class="patch">PATCH Link</a>
-  <a href={'#'} on:click={deleteMethod} class="delete">DELETE Link</a>
+  <a href={'#'} onclick={standardVisitMethod} class="visit-get">Standard visit Link</a>
+  <a href={'#'} onclick={specificVisitMethod} class="visit-specific">Specific visit Link</a>
+  <a href={'#'} onclick={getMethod} class="get">GET Link</a>
+  <a href={'#'} onclick={postMethod} class="post">POST Link</a>
+  <a href={'#'} onclick={putMethod} class="put">PUT Link</a>
+  <a href={'#'} onclick={patchMethod} class="patch">PATCH Link</a>
+  <a href={'#'} onclick={deleteMethod} class="delete">DELETE Link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/PartialReloads.svelte b/packages/svelte/test-app/Pages/Visits/PartialReloads.svelte
index d952bf344..562ec9569 100644
--- a/packages/svelte/test-app/Pages/Visits/PartialReloads.svelte
+++ b/packages/svelte/test-app/Pages/Visits/PartialReloads.svelte
@@ -2,13 +2,17 @@
   import { page, router } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
-  export let foo
-  export let bar
-  export let baz
-  export let headers
+  const { foo, bar, baz, headers } = $props()
 
   onMount(() => {
-    window._inertia_props = $page.props
+    // Other initialization if needed
+  })
+
+  // Update props reactively when page changes
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      window._inertia_props = page.props
+    }
   })
 
   const partialReloadVisit = () => {
@@ -107,15 +111,15 @@
   <span class="baz-text">Baz is now {baz}</span>
   <pre class="headers">{headers}</pre>
 
-  <a href={'#'} on:click={partialReloadVisit} class="visit">Update All (visit)</a>
-  <a href={'#'} on:click={partialReloadVisitFooBar} class="visit-foo-bar">'Only' foo + bar (visit)</a>
-  <a href={'#'} on:click={partialReloadVisitBaz} class="visit-baz">'Only' baz (visit)</a>
-  <a href={'#'} on:click={partialReloadVisitExceptFooBar} class="visit-except-foo-bar">'Except' foo + bar (visit)</a>
-  <a href={'#'} on:click={partialReloadVisitExceptBaz} class="visit-except-baz">'Except' baz (visit)</a>
-
-  <a href={'#'} on:click={partialReloadGet} class="get">Update All (GET)</a>
-  <a href={'#'} on:click={partialReloadGetFooBar} class="get-foo-bar">'Only' foo + bar (GET)</a>
-  <a href={'#'} on:click={partialReloadGetBaz} class="get-baz">'Only' baz (GET)</a>
-  <a href={'#'} on:click={partialReloadGetExceptFooBar} class="get-except-foo-bar">'Except' foo + bar (GET)</a>
-  <a href={'#'} on:click={partialReloadGetExceptBaz} class="get-except-baz">'Except' baz (GET)</a>
+  <a href={'#'} onclick={partialReloadVisit} class="visit">Update All (visit)</a>
+  <a href={'#'} onclick={partialReloadVisitFooBar} class="visit-foo-bar">'Only' foo + bar (visit)</a>
+  <a href={'#'} onclick={partialReloadVisitBaz} class="visit-baz">'Only' baz (visit)</a>
+  <a href={'#'} onclick={partialReloadVisitExceptFooBar} class="visit-except-foo-bar">'Except' foo + bar (visit)</a>
+  <a href={'#'} onclick={partialReloadVisitExceptBaz} class="visit-except-baz">'Except' baz (visit)</a>
+
+  <a href={'#'} onclick={partialReloadGet} class="get">Update All (GET)</a>
+  <a href={'#'} onclick={partialReloadGetFooBar} class="get-foo-bar">'Only' foo + bar (GET)</a>
+  <a href={'#'} onclick={partialReloadGetBaz} class="get-baz">'Only' baz (GET)</a>
+  <a href={'#'} onclick={partialReloadGetExceptFooBar} class="get-except-foo-bar">'Except' foo + bar (GET)</a>
+  <a href={'#'} onclick={partialReloadGetExceptBaz} class="get-except-baz">'Except' baz (GET)</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/PreserveScroll.svelte b/packages/svelte/test-app/Pages/Visits/PreserveScroll.svelte
index f43fe668d..fcf466e9e 100644
--- a/packages/svelte/test-app/Pages/Visits/PreserveScroll.svelte
+++ b/packages/svelte/test-app/Pages/Visits/PreserveScroll.svelte
@@ -1,26 +1,32 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithScrollRegion.svelte'
 </script>
 
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let foo: string = 'default'
+  const { foo = 'default' }: { foo?: string } = $props()
+
+  const preserve = (e: Event) => {
+    e.preventDefault()
 
-  const preserve = () => {
     router.visit('/visits/preserve-scroll-page-two', {
       data: { foo: 'foo' },
       preserveScroll: true,
     })
   }
 
-  const preserveFalse = () => {
+  const preserveFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-page-two', {
       data: { foo: 'bar' },
     })
   }
 
-  const preserveCallback = () => {
+  const preserveCallback = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-page-two', {
       data: { foo: 'baz' },
       preserveScroll: (page) => {
@@ -31,7 +37,9 @@
     })
   }
 
-  const preserveCallbackFalse = () => {
+  const preserveCallbackFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-page-two', {
       data: { foo: 'foo' },
       preserveScroll: (page) => {
@@ -42,7 +50,9 @@
     })
   }
 
-  const preserveGet = () => {
+  const preserveGet = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-scroll-page-two',
       {
@@ -54,7 +64,9 @@
     )
   }
 
-  const preserveGetFalse = () => {
+  const preserveGetFalse = (e: Event) => {
+    e.preventDefault()
+
     router.get('/visits/preserve-scroll-page-two', {
       foo: 'baz',
     })
@@ -67,13 +79,13 @@
   </span>
   <span class="foo">Foo is now {foo}</span>
 
-  <a href={'#'} on:click|preventDefault={preserve} class="preserve">Preserve Scroll</a>
-  <a href={'#'} on:click|preventDefault={preserveFalse} class="reset">Reset Scroll</a>
-  <a href={'#'} on:click|preventDefault={preserveCallback} class="preserve-callback">Preserve Scroll (Callback)</a>
+  <a href={'#'} onclick={preserve} class="preserve">Preserve Scroll</a>
+  <a href={'#'} onclick={preserveFalse} class="reset">Reset Scroll</a>
+  <a href={'#'} onclick={preserveCallback} class="preserve-callback">Preserve Scroll (Callback)</a>
   <br />
-  <a href={'#'} on:click|preventDefault={preserveCallbackFalse} class="reset-callback">Reset Scroll (Callback)</a>
-  <a href={'#'} on:click|preventDefault={preserveGet} class="preserve-get">Preserve Scroll (GET)</a>
-  <a href={'#'} on:click|preventDefault={preserveGetFalse} class="reset-get">Reset Scroll (GET)</a>
+  <a href={'#'} onclick={preserveCallbackFalse} class="reset-callback">Reset Scroll (Callback)</a>
+  <a href={'#'} onclick={preserveGet} class="preserve-get">Preserve Scroll (GET)</a>
+  <a href={'#'} onclick={preserveGetFalse} class="reset-get">Reset Scroll (GET)</a>
 
   <a href="/non-inertia" class="off-site">Off-site link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/PreserveScrollFalse.svelte b/packages/svelte/test-app/Pages/Visits/PreserveScrollFalse.svelte
index 7612a0fa4..dac4dbf7d 100644
--- a/packages/svelte/test-app/Pages/Visits/PreserveScrollFalse.svelte
+++ b/packages/svelte/test-app/Pages/Visits/PreserveScrollFalse.svelte
@@ -1,26 +1,32 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export { default as layout } from '@/Layouts/WithoutScrollRegion.svelte'
 </script>
 
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  export let foo: string = 'default'
+  const { foo = 'default' }: { foo?: string } = $props()
+
+  const preserve = (e: Event) => {
+    e.preventDefault()
 
-  const preserve = () => {
     router.visit('/visits/preserve-scroll-false-page-two', {
       data: { foo: 'foo' },
       preserveScroll: true,
     })
   }
 
-  const preserveFalse = () => {
+  const preserveFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-false-page-two', {
       data: { foo: 'bar' },
     })
   }
 
-  const preserveCallback = () => {
+  const preserveCallback = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-false-page-two', {
       data: { foo: 'baz' },
       preserveScroll: (page) => {
@@ -31,7 +37,9 @@
     })
   }
 
-  const preserveCallbackFalse = () => {
+  const preserveCallbackFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-scroll-false-page-two', {
       data: { foo: 'foo' },
       preserveScroll: (page) => {
@@ -42,7 +50,9 @@
     })
   }
 
-  const preserveGet = () => {
+  const preserveGet = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-scroll-false-page-two',
       {
@@ -54,7 +64,9 @@
     )
   }
 
-  const preserveGetFalse = () => {
+  const preserveGetFalse = (e: Event) => {
+    e.preventDefault()
+
     router.get('/visits/preserve-scroll-false-page-two', {
       foo: 'baz',
     })
@@ -67,13 +79,13 @@
   </span>
   <span class="foo">Foo is now {foo}</span>
 
-  <a href={'#'} on:click|preventDefault={preserve} class="preserve">Preserve Scroll</a>
-  <a href={'#'} on:click|preventDefault={preserveFalse} class="reset">Reset Scroll</a>
-  <a href={'#'} on:click|preventDefault={preserveCallback} class="preserve-callback">Preserve Scroll (Callback)</a>
+  <a href={'#'} onclick={preserve} class="preserve">Preserve Scroll</a>
+  <a href={'#'} onclick={preserveFalse} class="reset">Reset Scroll</a>
+  <a href={'#'} onclick={preserveCallback} class="preserve-callback">Preserve Scroll (Callback)</a>
   <br />
-  <a href={'#'} on:click|preventDefault={preserveCallbackFalse} class="reset-callback">Reset Scroll (Callback)</a>
-  <a href={'#'} on:click|preventDefault={preserveGet} class="preserve-get">Preserve Scroll (GET)</a>
-  <a href={'#'} on:click|preventDefault={preserveGetFalse} class="reset-get">Reset Scroll (GET)</a>
+  <a href={'#'} onclick={preserveCallbackFalse} class="reset-callback">Reset Scroll (Callback)</a>
+  <a href={'#'} onclick={preserveGet} class="preserve-get">Preserve Scroll (GET)</a>
+  <a href={'#'} onclick={preserveGetFalse} class="reset-get">Reset Scroll (GET)</a>
 
   <a href="/non-inertia" class="off-site">Off-site link</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/PreserveState.svelte b/packages/svelte/test-app/Pages/Visits/PreserveState.svelte
index eb2650b1e..18c7a63fe 100644
--- a/packages/svelte/test-app/Pages/Visits/PreserveState.svelte
+++ b/packages/svelte/test-app/Pages/Visits/PreserveState.svelte
@@ -2,27 +2,33 @@
   import { router } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
-  export let foo = 'default'
+  const { foo = 'default' } = $props()
 
   onMount(() => {
     window._inertia_page_key = crypto.randomUUID()
   })
 
-  const preserve = () => {
+  const preserve = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-state-page-two', {
       data: { foo: 'bar' },
       preserveState: true,
     })
   }
 
-  const preserveFalse = () => {
+  const preserveFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/visits/preserve-state-page-two', {
       data: { foo: 'baz' },
       preserveState: false,
     })
   }
 
-  const preserveCallback = () => {
+  const preserveCallback = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-state-page-two',
       {
@@ -38,7 +44,9 @@
     )
   }
 
-  const preserveCallbackFalse = () => {
+  const preserveCallbackFalse = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-state-page-two',
       {
@@ -54,7 +62,9 @@
     )
   }
 
-  const preserveGet = () => {
+  const preserveGet = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-state-page-two',
       {
@@ -66,7 +76,9 @@
     )
   }
 
-  const preserveGetFalse = () => {
+  const preserveGetFalse = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/visits/preserve-state-page-two',
       {
@@ -87,12 +99,10 @@
     <input type="text" name="example-field" class="field" />
   </label>
 
-  <a href={'#'} on:click|preventDefault={preserve} class="preserve">[State] Preserve visit: true</a>
-  <a href={'#'} on:click|preventDefault={preserveFalse} class="preserve-false">[State] Preserve visit: false</a>
-  <a href={'#'} on:click|preventDefault={preserveCallback} class="preserve-callback">[State] Preserve Callback: true</a>
-  <a href={'#'} on:click|preventDefault={preserveCallbackFalse} class="preserve-callback-false"
-    >[State] Preserve Callback: false</a
-  >
-  <a href={'#'} on:click|preventDefault={preserveGet} class="preserve-get">[State] Preserve GET: true</a>
-  <a href={'#'} on:click|preventDefault={preserveGetFalse} class="preserve-get-false">[State] Preserve GET: false</a>
+  <a href={'#'} onclick={preserve} class="preserve">[State] Preserve visit: true</a>
+  <a href={'#'} onclick={preserveFalse} class="preserve-false">[State] Preserve visit: false</a>
+  <a href={'#'} onclick={preserveCallback} class="preserve-callback">[State] Preserve Callback: true</a>
+  <a href={'#'} onclick={preserveCallbackFalse} class="preserve-callback-false">[State] Preserve Callback: false</a>
+  <a href={'#'} onclick={preserveGet} class="preserve-get">[State] Preserve GET: true</a>
+  <a href={'#'} onclick={preserveGetFalse} class="preserve-get-false">[State] Preserve GET: false</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte b/packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte
index bc31e124d..34368398a 100644
--- a/packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte
+++ b/packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte
@@ -2,7 +2,7 @@
   import { router } from '@inertiajs/svelte'
   import { onMount } from 'svelte'
 
-  export let name
+  const { name } = $props()
 
   onMount(() => {
     router.reload({ only: ['name'] })
diff --git a/packages/svelte/test-app/Pages/Visits/Replace.svelte b/packages/svelte/test-app/Pages/Visits/Replace.svelte
index cdbd9489a..b5db6faed 100644
--- a/packages/svelte/test-app/Pages/Visits/Replace.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Replace.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  const replace = () => {
+  const replace = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/dump/get', {
       replace: true,
     })
   }
 
-  const replaceFalse = () => {
+  const replaceFalse = (e: Event) => {
+    e.preventDefault()
+
     router.visit('/dump/get', {
       replace: false,
     })
   }
 
-  const replaceGet = () => {
+  const replaceGet = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/dump/get',
       {},
@@ -23,7 +29,9 @@
     )
   }
 
-  const replaceGetFalse = () => {
+  const replaceGetFalse = (e: Event) => {
+    e.preventDefault()
+
     router.get(
       '/dump/get',
       {},
@@ -37,8 +45,8 @@
 <div>
   <span class="text">This is the links page that demonstrates manual replace</span>
 
-  <a href={'#'} on:click|preventDefault={replace} class="replace">[State] Replace visit: true</a>
-  <a href={'#'} on:click|preventDefault={replaceFalse} class="replace-false">[State] Replace visit: false</a>
-  <a href={'#'} on:click|preventDefault={replaceGet} class="replace-get">[State] Replace GET: true</a>
-  <a href={'#'} on:click|preventDefault={replaceGetFalse} class="replace-get-false">[State] Replace GET: false</a>
+  <a href={'#'} onclick={replace} class="replace">[State] Replace visit: true</a>
+  <a href={'#'} onclick={replaceFalse} class="replace-false">[State] Replace visit: false</a>
+  <a href={'#'} onclick={replaceGet} class="replace-get">[State] Replace GET: true</a>
+  <a href={'#'} onclick={replaceGetFalse} class="replace-get-false">[State] Replace GET: false</a>
 </div>
diff --git a/packages/svelte/test-app/Pages/Visits/UrlFragments.svelte b/packages/svelte/test-app/Pages/Visits/UrlFragments.svelte
index a4009af1b..4f4139c19 100644
--- a/packages/svelte/test-app/Pages/Visits/UrlFragments.svelte
+++ b/packages/svelte/test-app/Pages/Visits/UrlFragments.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { router } from '@inertiajs/svelte'
 
-  let documentScrollTop = 0
-  let documentScrollLeft = 0
+  let documentScrollTop = $state(0)
+  let documentScrollLeft = $state(0)
 
   const handleScrollEvent = () => {
     documentScrollTop = document.documentElement.scrollTop
@@ -35,21 +35,21 @@
   }
 </script>
 
-<svelte:document on:scroll={handleScrollEvent} />
+<svelte:document onscroll={handleScrollEvent} />
 
 <div>
   <span class="text">This is the page that demonstrates url fragment behaviour using manual visits</span>
   <div style="width: 200vw; height: 200vh; margin-top: 50vh">
     <!-- prettier-ignore -->
-    <button on:click={handleScrollEvent}>Update scroll positions</button>
+    <button onclick={handleScrollEvent}>Update scroll positions</button>
     <div class="document-position">Document scroll position is {documentScrollLeft} & {documentScrollTop}</div>
-    <a href={'#'} on:click={basicVisit} class="basic">Basic visit</a>
-    <a href={'#'} on:click={fragmentVisit} class="fragment">Fragment visit</a>
-    <a href={'#'} on:click={nonExistentFragmentVisit} class="non-existent-fragment">Non-existent fragment visit</a>
+    <a href={'#'} onclick={basicVisit} class="basic">Basic visit</a>
+    <a href={'#'} onclick={fragmentVisit} class="fragment">Fragment visit</a>
+    <a href={'#'} onclick={nonExistentFragmentVisit} class="non-existent-fragment">Non-existent fragment visit</a>
 
-    <a href={'#'} on:click={basicGetVisit} class="basic-get">Basic GET visit</a>
-    <a href={'#'} on:click={fragmentGetVisit} class="fragment-get">Fragment GET visit</a>
-    <a href={'#'} on:click={nonExistentFragmentGetVisit} class="non-existent-fragment-get"
+    <a href={'#'} onclick={basicGetVisit} class="basic-get">Basic GET visit</a>
+    <a href={'#'} onclick={fragmentGetVisit} class="fragment-get">Fragment GET visit</a>
+    <a href={'#'} onclick={nonExistentFragmentGetVisit} class="non-existent-fragment-get"
       >Non-existent fragment GET visit</a
     >
 
diff --git a/packages/svelte/test-app/Pages/Visits/Wayfinder.svelte b/packages/svelte/test-app/Pages/Visits/Wayfinder.svelte
index 82321b7cd..33731f9fa 100644
--- a/packages/svelte/test-app/Pages/Visits/Wayfinder.svelte
+++ b/packages/svelte/test-app/Pages/Visits/Wayfinder.svelte
@@ -11,8 +11,8 @@
 </script>
 
 <div>
-  <a href={'#'} on:click={wayfinderObjectVisit} class="wayfinder-visit">Wayfinder object visit</a>
-  <a href={'#'} on:click={wayfinderObjectMethodOverride} class="wayfinder-method-override"
+  <a href={'#'} onclick={wayfinderObjectVisit} class="wayfinder-visit">Wayfinder object visit</a>
+  <a href={'#'} onclick={wayfinderObjectMethodOverride} class="wayfinder-method-override"
     >Wayfinder object method override</a
   >
 </div>
diff --git a/packages/svelte/test-app/Pages/WhenVisible.svelte b/packages/svelte/test-app/Pages/WhenVisible.svelte
index cb616a8bd..0227d40af 100644
--- a/packages/svelte/test-app/Pages/WhenVisible.svelte
+++ b/packages/svelte/test-app/Pages/WhenVisible.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
   import { WhenVisible } from '@inertiajs/svelte'
 
-  export let count = 0
+  interface Props {
+    count?: number
+  }
+
+  let { count = $bindable(0) }: Props = $props()
 </script>
 
 <div style="margin-top: 5000px">
   <WhenVisible data="foo">
-    <svelte:fragment slot="fallback">
+    {#snippet fallback()}
       <div>Loading first one...</div>
-    </svelte:fragment>
+    {/snippet}
 
     <div>First one is visible!</div>
   </WhenVisible>
@@ -16,9 +20,9 @@
 
 <div style="margin-top: 5000px">
   <WhenVisible buffer={1000} data="foo">
-    <svelte:fragment slot="fallback">
+    {#snippet fallback()}
       <div>Loading second one...</div>
-    </svelte:fragment>
+    {/snippet}
 
     <div>Second one is visible!</div>
   </WhenVisible>
@@ -26,9 +30,9 @@
 
 <div style="margin-top: 5000px">
   <WhenVisible data="foo" always>
-    <svelte:fragment slot="fallback">
+    {#snippet fallback()}
       <div>Loading third one...</div>
-    </svelte:fragment>
+    {/snippet}
 
     <div>Third one is visible!</div>
   </WhenVisible>
@@ -36,9 +40,9 @@
 
 <div style="margin-top: 5000px">
   <WhenVisible data="foo">
-    <svelte:fragment slot="fallback">
+    {#snippet fallback()}
       <div>Loading fourth one...</div>
-    </svelte:fragment>
+    {/snippet}
   </WhenVisible>
 </div>
 
@@ -54,9 +58,9 @@
       },
     }}
   >
-    <svelte:fragment slot="fallback">
+    {#snippet fallback()}
       <div>Loading fifth one...</div>
-    </svelte:fragment>
+    {/snippet}
 
     <div>Count is now {count}</div>
   </WhenVisible>
diff --git a/packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte b/packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte
index 37a9b9dad..ea027531e 100644
--- a/packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte
+++ b/packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
   import { router, WhenVisible } from '@inertiajs/svelte'
 
-  export let firstData:
-    | {
-        text: string
-      }
-    | undefined = undefined
+  interface Props {
+    firstData?:
+      | {
+          text: string
+        }
+      | undefined
+    secondData?:
+      | {
+          text: string
+        }
+      | undefined
+  }
 
-  export let secondData:
-    | {
-        text: string
-      }
-    | undefined = undefined
+  let { firstData = undefined, secondData = undefined }: Props = $props()
 
   const handleReload = () => {
     router.reload()
@@ -21,13 +24,13 @@
 <div>
   <h1>WhenVisible + Array Props + Reload</h1>
 
-  <button on:click={handleReload}>Reload Page</button>
+  <button onclick={handleReload}>Reload Page</button>
 
   <div style="margin-top: 2000px; padding: 20px; border: 1px solid #ccc">
     <WhenVisible data={['firstData', 'secondData']}>
-      <svelte:fragment slot="fallback">
+      {#snippet fallback()}
         <p>Loading array data...</p>
-      </svelte:fragment>
+      {/snippet}
 
       <div>
         <p>{firstData?.text}</p>
diff --git a/packages/svelte/test-app/Pages/WhenVisibleReload.svelte b/packages/svelte/test-app/Pages/WhenVisibleReload.svelte
index dc13b5afd..80f4ce625 100644
--- a/packages/svelte/test-app/Pages/WhenVisibleReload.svelte
+++ b/packages/svelte/test-app/Pages/WhenVisibleReload.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
   import { router, WhenVisible } from '@inertiajs/svelte'
 
-  export let lazyData:
-    | {
-        text: string
-      }
-    | undefined = undefined
+  interface Props {
+    lazyData?:
+      | {
+          text: string
+        }
+      | undefined
+  }
+
+  let { lazyData = undefined }: Props = $props()
 
   const handleReload = () => {
     router.reload()
@@ -15,13 +19,13 @@
 <div>
   <h1>WhenVisible + Reload</h1>
 
-  <button on:click={handleReload}>Reload Page</button>
+  <button onclick={handleReload}>Reload Page</button>
 
   <div style="margin-top: 2000px; padding: 20px; border: 1px solid #ccc">
     <WhenVisible data="lazyData">
-      <svelte:fragment slot="fallback">
+      {#snippet fallback()}
         <p>Loading lazy data...</p>
-      </svelte:fragment>
+      {/snippet}
 
       {lazyData?.text}
     </WhenVisible>
diff --git a/packages/svelte/test-app/app.ts b/packages/svelte/test-app/app.ts
index 5482f2b81..6be4b14f2 100644
--- a/packages/svelte/test-app/app.ts
+++ b/packages/svelte/test-app/app.ts
@@ -1,5 +1,6 @@
 import type { VisitOptions } from '@inertiajs/core'
 import { createInertiaApp, type ResolvedComponent, router } from '@inertiajs/svelte'
+import { hydrate, mount } from 'svelte'
 
 window.testing = { Inertia: router }
 
@@ -16,11 +17,16 @@ createInertiaApp({
       await new Promise((resolve) => setTimeout(resolve, 50))
     }
 
-    return pages[`./Pages/${name}.svelte`]
+    return pages[`./Pages/${name}.svelte`] as ResolvedComponent
   },
   setup({ el, App, props }) {
-    const hydrate = el?.hasAttribute('data-server-rendered')
-    new App({ target: el!, props, hydrate })
+    const isServerRendered = el?.hasAttribute('data-server-rendered')
+
+    if (isServerRendered) {
+      hydrate(App, { target: el!, props })
+    } else {
+      mount(App, { target: el!, props })
+    }
   },
   ...(withAppDefaults && {
     defaults: {
diff --git a/packages/svelte/test-app/package.json b/packages/svelte/test-app/package.json
index bb8f2e694..fae7fea83 100644
--- a/packages/svelte/test-app/package.json
+++ b/packages/svelte/test-app/package.json
@@ -10,17 +10,17 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@sveltejs/eslint-config": "^8.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tsconfig/svelte": "^5.0.6",
     "eslint": "^9.39.1",
     "eslint-plugin-svelte": "^3.13.0",
     "globals": "^16.5.0",
     "nodemon": "^3.1.11",
-    "svelte": "^4.2.20",
+    "svelte": "^5.45.5",
     "svelte-check": "^4.3.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.47.0",
-    "vite": "^5.4.21"
+    "vite": "^7.1.12"
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
diff --git a/packages/svelte/test-app/ssr.ts b/packages/svelte/test-app/ssr.ts
index edae0d7a7..dcb2bd5c9 100644
--- a/packages/svelte/test-app/ssr.ts
+++ b/packages/svelte/test-app/ssr.ts
@@ -1,5 +1,6 @@
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
+import { render } from 'svelte/server'
 
 createServer((page) =>
   createInertiaApp({
@@ -9,8 +10,7 @@ createServer((page) =>
       return pages[`./Pages/${name}.svelte`]
     },
     setup({ App, props }) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return (App as any).render(props)
+      return render(App, { props })
     },
     defaults: {
       future: {
diff --git a/packages/svelte/test-app/svelte-html.d.ts b/packages/svelte/test-app/svelte-html.d.ts
index 8c877c476..61741ce85 100644
--- a/packages/svelte/test-app/svelte-html.d.ts
+++ b/packages/svelte/test-app/svelte-html.d.ts
@@ -1,6 +1,7 @@
 declare module 'svelte/elements' {
   export interface HTMLAttributes<T extends EventTarget> {
     'scroll-region'?: boolean | '' | undefined
+    'oncancel-token'?: ((event: CustomEvent<{ token: any }>) => void) | (() => void)
   }
 }
 
diff --git a/packages/svelte/test-app/svelte.config.js b/packages/svelte/test-app/svelte.config.js
index 7bb74fd41..171e710a4 100644
--- a/packages/svelte/test-app/svelte.config.js
+++ b/packages/svelte/test-app/svelte.config.js
@@ -1,6 +1,12 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 const config = {
+  onwarn(warning, onwarn) {
+    if (/A11y/.test(warning.message)) return
+
+    onwarn(warning)
+  },
+
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
   preprocess: vitePreprocess(),
diff --git a/packages/svelte/test-app/types.d.ts b/packages/svelte/test-app/types.d.ts
index d682c2765..95cdeb28f 100644
--- a/packages/svelte/test-app/types.d.ts
+++ b/packages/svelte/test-app/types.d.ts
@@ -13,7 +13,7 @@ declare global {
       files: MulterFile[] | object
       query: Record<string, unknown>
       url: string
-      $page: Page
+      page: Page
     }
     _inertia_page_key: string | undefined
     _inertia_props: PageProps
diff --git a/packages/svelte/test-app/vite.config.js b/packages/svelte/test-app/vite.config.js
index ede2ff345..2327883bc 100644
--- a/packages/svelte/test-app/vite.config.js
+++ b/packages/svelte/test-app/vite.config.js
@@ -13,11 +13,5 @@ export default defineConfig({
       '@': __dirname,
     },
   },
-  plugins: [
-    svelte({
-      compilerOptions: {
-        hydratable: true,
-      },
-    }),
-  ],
+  plugins: [svelte()],
 })
diff --git a/packages/svelte/vite-with-deps.config.js b/packages/svelte/vite-with-deps.config.js
index c2d1a73ac..3bf6cbdb0 100644
--- a/packages/svelte/vite-with-deps.config.js
+++ b/packages/svelte/vite-with-deps.config.js
@@ -14,5 +14,6 @@ export default defineConfig({
       // Only externalize Svelte (peer dependency) - bundle everything else
       external: ['svelte', 'svelte/internal', 'svelte/store'],
     },
+    target: 'es2020',
   },
 })
diff --git a/packages/svelte/vite.config.js b/packages/svelte/vite.config.js
index 4e2e46364..949657749 100644
--- a/packages/svelte/vite.config.js
+++ b/packages/svelte/vite.config.js
@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   build: {
     minify: false,
+    target: 'es2020',
   },
   plugins: [sveltekit()],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38f636f7b..2eb9a6a0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,10 +19,10 @@ importers:
         version: 4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))
       prettier-plugin-svelte:
         specifier: ^3.4.0
-        version: 3.4.0(prettier@3.6.2)(svelte@5.43.12)
+        version: 3.4.0(prettier@3.6.2)(svelte@5.45.5)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.14
-        version: 0.6.14(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3)))(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.43.12))(prettier@3.6.2)
+        version: 0.6.14(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3)))(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.45.5))(prettier@3.6.2)
     optionalDependencies:
       '@rollup/rollup-linux-x64-gnu':
         specifier: ^4.53.3
@@ -179,17 +179,17 @@ importers:
         version: 4.17.21
     devDependencies:
       '@sveltejs/adapter-auto':
-        specifier: ^3.3.1
-        version: 3.3.1(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))
+        specifier: ^7.0.0
+        version: 7.0.0(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))
       '@sveltejs/kit':
         specifier: ^2.48.5
-        version: 2.48.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
+        version: 2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
       '@sveltejs/package':
         specifier: ^2.5.4
-        version: 2.5.4(svelte@4.2.20)(typescript@5.9.3)
+        version: 2.5.4(svelte@5.43.12)(typescript@5.9.3)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
+        specifier: ^6.2.1
+        version: 6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
       axios:
         specifier: ^1.13.2
         version: 1.13.2
@@ -197,14 +197,14 @@ importers:
         specifier: ^9.4.5
         version: 9.4.5
       publint:
-        specifier: ^0.2.12
-        version: 0.2.12
+        specifier: ^0.3.15
+        version: 0.3.15
       svelte:
-        specifier: ^4.2.20
-        version: 4.2.20
+        specifier: ^5.43.2
+        version: 5.43.12
       svelte-check:
         specifier: ^4.3.4
-        version: 4.3.4(picomatch@4.0.3)(svelte@4.2.20)(typescript@5.9.3)
+        version: 4.3.4(picomatch@4.0.3)(svelte@5.43.12)(typescript@5.9.3)
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -212,8 +212,8 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
       vite:
-        specifier: ^5.4.21
-        version: 5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)
+        specifier: ^7.1.12
+        version: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
 
   packages/svelte/test-app:
     dependencies:
@@ -229,10 +229,10 @@ importers:
         version: 9.39.1
       '@sveltejs/eslint-config':
         specifier: ^8.3.4
-        version: 8.3.4(@stylistic/eslint-plugin-js@4.4.1(eslint@9.39.1(jiti@2.6.1)))(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@4.2.20))(eslint@9.39.1(jiti@2.6.1))(typescript-eslint@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(typescript@5.9.3)
+        version: 8.3.4(@stylistic/eslint-plugin-js@4.4.1(eslint@9.39.1(jiti@2.6.1)))(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.5))(eslint@9.39.1(jiti@2.6.1))(typescript-eslint@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(typescript@5.9.3)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
+        specifier: ^6.2.1
+        version: 6.2.1(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
       '@tsconfig/svelte':
         specifier: ^5.0.6
         version: 5.0.6
@@ -241,7 +241,7 @@ importers:
         version: 9.39.1(jiti@2.6.1)
       eslint-plugin-svelte:
         specifier: ^3.13.0
-        version: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@4.2.20)
+        version: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.5)
       globals:
         specifier: ^16.5.0
         version: 16.5.0
@@ -249,11 +249,11 @@ importers:
         specifier: ^3.1.11
         version: 3.1.11
       svelte:
-        specifier: ^4.2.20
-        version: 4.2.20
+        specifier: ^5.45.5
+        version: 5.45.5
       svelte-check:
         specifier: ^4.3.4
-        version: 4.3.4(picomatch@4.0.3)(svelte@4.2.20)(typescript@5.9.3)
+        version: 4.3.4(picomatch@4.0.3)(svelte@5.45.5)(typescript@5.9.3)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -261,8 +261,8 @@ importers:
         specifier: ^8.47.0
         version: 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       vite:
-        specifier: ^5.4.21
-        version: 5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)
+        specifier: ^7.1.12
+        version: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
 
   packages/vue3:
     dependencies:
@@ -1069,6 +1069,10 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@publint/pack@0.1.2':
+    resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
+    engines: {node: '>=18'}
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -1196,8 +1200,8 @@ packages:
     peerDependencies:
       acorn: ^8.9.0
 
-  '@sveltejs/adapter-auto@3.3.1':
-    resolution: {integrity: sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==}
+  '@sveltejs/adapter-auto@7.0.0':
+    resolution: {integrity: sha512-ImDWaErTOCkRS4Gt+5gZuymKFBobnhChXUZ9lhUZLahUgvA4OOvRzi3sahzYgbxGj5nkA6OV0GAW378+dl/gyw==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
@@ -1248,6 +1252,14 @@ packages:
       svelte: ^5.0.0
       vite: ^6.0.0
 
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1':
+    resolution: {integrity: sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
   '@sveltejs/vite-plugin-svelte@3.1.2':
     resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
     engines: {node: ^18.0.0 || >=20}
@@ -1262,6 +1274,13 @@ packages:
       svelte: ^5.0.0
       vite: ^6.0.0
 
+  '@sveltejs/vite-plugin-svelte@6.2.1':
+    resolution: {integrity: sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
   '@tailwindcss/node@4.1.17':
     resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
 
@@ -2218,6 +2237,9 @@ packages:
   esrap@2.1.3:
     resolution: {integrity: sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg==}
 
+  esrap@2.2.1:
+    resolution: {integrity: sha512-GiYWG34AN/4CUyaWAgunGt0Rxvr1PTMlGC0vvEov/uOQYWne2bpN03Um+k8jT+q3op33mKouP2zeJ6OlM+qeUg==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -2403,11 +2425,6 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
-  glob@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -2501,10 +2518,6 @@ packages:
   ignore-by-default@1.0.1:
     resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
 
-  ignore-walk@5.0.1:
-    resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-
   ignore@4.0.6:
     resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
     engines: {node: '>= 4'}
@@ -2521,9 +2534,6 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-meta-resolve@4.2.0:
-    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2901,10 +2911,6 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
-    engines: {node: '>=10'}
-
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2969,19 +2975,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  npm-bundled@2.0.1:
-    resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-
-  npm-normalize-package-bin@2.0.0:
-    resolution: {integrity: sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-
-  npm-packlist@5.1.3:
-    resolution: {integrity: sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    hasBin: true
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -3036,6 +3029,9 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  package-manager-detector@1.5.0:
+    resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3263,9 +3259,9 @@ packages:
   pstree.remy@1.1.8:
     resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
 
-  publint@0.2.12:
-    resolution: {integrity: sha512-YNeUtCVeM4j9nDiTT2OPczmlyzOkIXNtdDZnSuajAxS/nZ6j3t7Vs9SUB4euQNddiltIwu7Tdd3s+hr08fAsMw==}
-    engines: {node: '>=16'}
+  publint@0.3.15:
+    resolution: {integrity: sha512-xPbRAPW+vqdiaKy5sVVY0uFAu3LaviaPO3pZ9FaRx59l9+U/RKR1OEbLhkug87cwiVKxPXyB4txsv5cad67u+A==}
+    engines: {node: '>=18'}
     hasBin: true
 
   punycode@2.3.1:
@@ -3601,6 +3597,10 @@ packages:
     resolution: {integrity: sha512-d1R+3pFa39LXoHCsxHmV//D2pSFZlEMlnxCVQ54TlrQv+4o5pewJO0/Pc5MUp+j71PJrOrPJHTvREZJHn+ymDQ==}
     engines: {node: '>=18'}
 
+  svelte@5.45.5:
+    resolution: {integrity: sha512-2074U+vObO5Zs8/qhxtBwdi6ZXNIhEBTzNmUFjiZexLxTdt9vq96D/0pnQELl6YcpLMD7pZ2dhXKByfGS8SAdg==}
+    engines: {node: '>=18'}
+
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
@@ -3835,6 +3835,46 @@ packages:
       yaml:
         optional: true
 
+  vite@7.2.4:
+    resolution: {integrity: sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vitefu@0.2.5:
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
     peerDependencies:
@@ -4351,6 +4391,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@publint/pack@0.1.2': {}
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.53.3':
@@ -4431,27 +4473,26 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))':
+  '@sveltejs/adapter-auto@7.0.0(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))':
     dependencies:
-      '@sveltejs/kit': 2.48.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
-      import-meta-resolve: 4.2.0
+      '@sveltejs/kit': 2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
 
-  '@sveltejs/eslint-config@8.3.4(@stylistic/eslint-plugin-js@4.4.1(eslint@9.39.1(jiti@2.6.1)))(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@4.2.20))(eslint@9.39.1(jiti@2.6.1))(typescript-eslint@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(typescript@5.9.3)':
+  '@sveltejs/eslint-config@8.3.4(@stylistic/eslint-plugin-js@4.4.1(eslint@9.39.1(jiti@2.6.1)))(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.5))(eslint@9.39.1(jiti@2.6.1))(typescript-eslint@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
       '@stylistic/eslint-plugin-js': 4.4.1(eslint@9.39.1(jiti@2.6.1))
       eslint: 9.39.1(jiti@2.6.1)
       eslint-config-prettier: 10.1.8(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-n: 17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
-      eslint-plugin-svelte: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@4.2.20)
+      eslint-plugin-svelte: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.5)
       globals: 15.15.0
       typescript: 5.9.3
       typescript-eslint: 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
 
-  '@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))':
+  '@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))':
     dependencies:
       '@standard-schema/spec': 1.0.0
       '@sveltejs/acorn-typescript': 1.0.7(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -4463,17 +4504,17 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
-      svelte: 4.2.20
-      vite: 5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)
+      svelte: 5.43.12
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
 
-  '@sveltejs/package@2.5.4(svelte@4.2.20)(typescript@5.9.3)':
+  '@sveltejs/package@2.5.4(svelte@5.43.12)(typescript@5.9.3)':
     dependencies:
       chokidar: 4.0.3
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.7.3
-      svelte: 4.2.20
-      svelte2tsx: 0.7.45(svelte@4.2.20)(typescript@5.9.3)
+      svelte: 5.43.12
+      svelte2tsx: 0.7.45(svelte@5.43.12)(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
 
@@ -4495,6 +4536,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+      debug: 4.4.3(supports-color@5.5.0)
+      svelte: 5.43.12
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+      debug: 4.4.3(supports-color@5.5.0)
+      svelte: 5.45.5
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@4.2.20)(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1))
@@ -4522,6 +4581,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.43.12)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+      debug: 4.4.3(supports-color@5.5.0)
+      deepmerge: 4.3.1
+      magic-string: 0.30.21
+      svelte: 5.43.12
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
+      vitefu: 1.1.1(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)))(svelte@5.45.5)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+      debug: 4.4.3(supports-color@5.5.0)
+      deepmerge: 4.3.1
+      magic-string: 0.30.21
+      svelte: 5.45.5
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
+      vitefu: 1.1.1(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))
+    transitivePeerDependencies:
+      - supports-color
+
   '@tailwindcss/node@4.1.17':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -5645,7 +5728,7 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@4.2.20):
+  eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.5):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -5657,9 +5740,9 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.6)
       postcss-safe-parser: 7.0.1(postcss@8.5.6)
       semver: 7.7.3
-      svelte-eslint-parser: 1.4.0(svelte@4.2.20)
+      svelte-eslint-parser: 1.4.0(svelte@5.45.5)
     optionalDependencies:
-      svelte: 4.2.20
+      svelte: 5.45.5
     transitivePeerDependencies:
       - ts-node
 
@@ -5808,6 +5891,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  esrap@2.2.1:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -6020,14 +6107,6 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
-  glob@8.1.0:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 5.1.6
-      once: 1.4.0
-
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
@@ -6107,10 +6186,6 @@ snapshots:
 
   ignore-by-default@1.0.1: {}
 
-  ignore-walk@5.0.1:
-    dependencies:
-      minimatch: 5.1.6
-
   ignore@4.0.6: {}
 
   ignore@5.3.2: {}
@@ -6122,8 +6197,6 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-meta-resolve@4.2.0: {}
-
   imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
@@ -6461,10 +6534,6 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.12
 
-  minimatch@5.1.6:
-    dependencies:
-      brace-expansion: 2.0.2
-
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
@@ -6522,19 +6591,6 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  npm-bundled@2.0.1:
-    dependencies:
-      npm-normalize-package-bin: 2.0.0
-
-  npm-normalize-package-bin@2.0.0: {}
-
-  npm-packlist@5.1.3:
-    dependencies:
-      glob: 8.1.0
-      ignore-walk: 5.0.1
-      npm-bundled: 2.0.1
-      npm-normalize-package-bin: 2.0.0
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -6606,6 +6662,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  package-manager-detector@1.5.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -6714,17 +6772,17 @@ snapshots:
     optionalDependencies:
       vue-tsc: 2.2.12(typescript@5.9.3)
 
-  prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.43.12):
+  prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.45.5):
     dependencies:
       prettier: 3.6.2
-      svelte: 5.43.12
+      svelte: 5.45.5
 
-  prettier-plugin-tailwindcss@0.6.14(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3)))(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.43.12))(prettier@3.6.2):
+  prettier-plugin-tailwindcss@0.6.14(prettier-plugin-organize-imports@4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3)))(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.45.5))(prettier@3.6.2):
     dependencies:
       prettier: 3.6.2
     optionalDependencies:
       prettier-plugin-organize-imports: 4.3.0(prettier@3.6.2)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))
-      prettier-plugin-svelte: 3.4.0(prettier@3.6.2)(svelte@5.43.12)
+      prettier-plugin-svelte: 3.4.0(prettier@3.6.2)(svelte@5.45.5)
 
   prettier@3.6.2: {}
 
@@ -6745,9 +6803,10 @@ snapshots:
 
   pstree.remy@1.1.8: {}
 
-  publint@0.2.12:
+  publint@0.3.15:
     dependencies:
-      npm-packlist: 5.1.3
+      '@publint/pack': 0.1.2
+      package-manager-detector: 1.5.0
       picocolors: 1.1.1
       sade: 1.8.1
 
@@ -7161,7 +7220,19 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.4.0(svelte@4.2.20):
+  svelte-check@4.3.4(picomatch@4.0.3)(svelte@5.45.5)(typescript@5.9.3):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      chokidar: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.45.5
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte-eslint-parser@1.4.0(svelte@5.45.5):
     dependencies:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -7170,17 +7241,17 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.6)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 4.2.20
+      svelte: 5.45.5
 
   svelte-hmr@0.16.0(svelte@4.2.20):
     dependencies:
       svelte: 4.2.20
 
-  svelte2tsx@0.7.45(svelte@4.2.20)(typescript@5.9.3):
+  svelte2tsx@0.7.45(svelte@5.43.12)(typescript@5.9.3):
     dependencies:
       dedent-js: 1.0.1
       scule: 1.3.0
-      svelte: 4.2.20
+      svelte: 5.43.12
       typescript: 5.9.3
 
   svelte@4.2.20:
@@ -7217,6 +7288,24 @@ snapshots:
       magic-string: 0.30.21
       zimmerframe: 1.1.4
 
+  svelte@5.45.5:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.7(acorn@8.15.0)
+      '@types/estree': 1.0.8
+      acorn: 8.15.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      devalue: 5.5.0
+      esm-env: 1.2.2
+      esrap: 2.2.1
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.21
+      zimmerframe: 1.1.4
+
   table@6.9.0:
     dependencies:
       ajv: 8.17.1
@@ -7404,6 +7493,21 @@ snapshots:
       lightningcss: 1.30.2
       terser: 5.44.1
 
+  vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.53.3
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.10.1
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      terser: 5.44.1
+
   vitefu@0.2.5(vite@5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)):
     optionalDependencies:
       vite: 5.4.21(@types/node@24.10.1)(lightningcss@1.30.2)(terser@5.44.1)
@@ -7412,6 +7516,10 @@ snapshots:
     optionalDependencies:
       vite: 6.4.1(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
 
+  vitefu@1.1.1(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)):
+    optionalDependencies:
+      vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)
+
   vscode-uri@3.1.0: {}
 
   vue-eslint-parser@10.2.0(eslint@9.39.1(jiti@2.6.1)):
diff --git a/tests/svelte.spec.ts b/tests/svelte.spec.ts
index b400fbfa6..6160573d0 100644
--- a/tests/svelte.spec.ts
+++ b/tests/svelte.spec.ts
@@ -10,64 +10,61 @@ test('props and page store are in sync', async ({ page }) => {
 
   await page.goto('/svelte/props-and-page-store')
 
-  await expect(page.getByText('foo prop is default')).toBeVisible()
-  await expect(page.getByText('$page.props.foo is default')).toBeVisible()
+  await expect(page.getByText('foo prop is default', { exact: true })).toBeVisible()
+  await expect(page.getByText('page.props.foo is default', { exact: true })).toBeVisible()
   await expect(page.getByText('pageProps.foo is default')).toBeVisible()
-  await expect(page.getByText('$sveltePage.props.foo is default')).toBeVisible()
-  await expect(consoleMessages.messages).toHaveLength(11)
+  await expect(page.getByText('sveltePage.props.foo is default')).toBeVisible()
+  await expect(consoleMessages.messages).toHaveLength(12)
   await expect(consoleMessages.messages[0]).toBe('[script] foo prop is default')
-  await expect(consoleMessages.messages[1]).toBe('[script] $page.props.foo is default')
-  await expect(consoleMessages.messages[2]).toBe('[script] $sveltePage.props.foo is default')
+  await expect(consoleMessages.messages[1]).toBe('[script] page.props.foo is default')
+  await expect(consoleMessages.messages[2]).toBe('[script] sveltePage.props.foo is default')
   await expect(consoleMessages.messages[3]).toBe('[reactive expression] foo prop is default')
-  await expect(consoleMessages.messages[4]).toBe('[reactive expression] $page.props.foo is default')
-  await expect(consoleMessages.messages[5]).toBe('[reactive expression] $sveltePage.props.foo is default')
+  await expect(consoleMessages.messages[4]).toBe('[reactive expression] page.props.foo is default')
+  await expect(consoleMessages.messages[5]).toBe('[reactive expression] sveltePage.props.foo is default')
   await expect(consoleMessages.messages[6]).toBe('[onMount] foo prop is default')
-  await expect(consoleMessages.messages[7]).toBe('[onMount] $page.props.foo is default')
-  await expect(consoleMessages.messages[8]).toBe('[onMount] $sveltePage.props.foo is default')
-  await expect(consoleMessages.messages[9]).toBe('[reactive expression] $page.props.foo is default')
-  await expect(consoleMessages.messages[10]).toBe('[reactive expression] $sveltePage.props.foo is default')
+  await expect(consoleMessages.messages[7]).toBe('[onMount] page.props.foo is default')
+  await expect(consoleMessages.messages[8]).toBe('[onMount] sveltePage.props.foo is default')
+  await expect(consoleMessages.messages[9]).toBe('[reactive expression] foo prop is default')
+  await expect(consoleMessages.messages[10]).toBe('[reactive expression] page.props.foo is default')
+  await expect(consoleMessages.messages[11]).toBe('[reactive expression] sveltePage.props.foo is default')
   await expect(await page.locator('#input').inputValue()).toEqual('default')
 
   consoleMessages.messages = []
   await page.getByRole('link', { name: 'Bar' }).click()
 
-  await expect(page.getByText('foo prop is bar')).toBeVisible()
-  await expect(page.getByText('$page.props.foo is bar')).toBeVisible()
+  await expect(page.getByText('foo prop is bar', { exact: true })).toBeVisible()
+  await expect(page.getByText('page.props.foo is bar', { exact: true })).toBeVisible()
   await expect(page.getByText('pageProps.foo is bar')).toBeVisible()
-  await expect(page.getByText('$sveltePage.props.foo is bar')).toBeVisible()
-  await expect(consoleMessages.messages).toHaveLength(11)
-  await expect(consoleMessages.messages[0]).toBe('[reactive expression] $page.props.foo is bar')
-  await expect(consoleMessages.messages[1]).toBe('[reactive expression] $sveltePage.props.foo is bar')
-  await expect(consoleMessages.messages[2]).toBe('[script] foo prop is bar')
-  await expect(consoleMessages.messages[3]).toBe('[script] $page.props.foo is bar')
-  await expect(consoleMessages.messages[4]).toBe('[script] $sveltePage.props.foo is bar')
-  await expect(consoleMessages.messages[5]).toBe('[reactive expression] foo prop is bar')
-  await expect(consoleMessages.messages[6]).toBe('[reactive expression] $page.props.foo is bar')
-  await expect(consoleMessages.messages[7]).toBe('[reactive expression] $sveltePage.props.foo is bar')
-  await expect(consoleMessages.messages[8]).toBe('[onMount] foo prop is bar')
-  await expect(consoleMessages.messages[9]).toBe('[onMount] $page.props.foo is bar')
-  await expect(consoleMessages.messages[10]).toBe('[onMount] $sveltePage.props.foo is bar')
+  await expect(page.getByText('sveltePage.props.foo is bar')).toBeVisible()
+  await expect(consoleMessages.messages).toHaveLength(9)
+  await expect(consoleMessages.messages[0]).toBe('[script] foo prop is bar')
+  await expect(consoleMessages.messages[1]).toBe('[script] page.props.foo is bar')
+  await expect(consoleMessages.messages[2]).toBe('[script] sveltePage.props.foo is bar')
+  await expect(consoleMessages.messages[3]).toBe('[reactive expression] foo prop is bar')
+  await expect(consoleMessages.messages[4]).toBe('[reactive expression] page.props.foo is bar')
+  await expect(consoleMessages.messages[5]).toBe('[reactive expression] sveltePage.props.foo is bar')
+  await expect(consoleMessages.messages[6]).toBe('[onMount] foo prop is bar')
+  await expect(consoleMessages.messages[7]).toBe('[onMount] page.props.foo is bar')
+  await expect(consoleMessages.messages[8]).toBe('[onMount] sveltePage.props.foo is bar')
   await expect(await page.locator('#input').inputValue()).toEqual('bar')
 
   consoleMessages.messages = []
   await page.getByRole('link', { name: 'Baz' }).click()
 
-  await expect(page.getByText('foo prop is baz')).toBeVisible()
-  await expect(page.getByText('$page.props.foo is baz')).toBeVisible()
+  await expect(page.getByText('foo prop is baz', { exact: true })).toBeVisible()
+  await expect(page.getByText('page.props.foo is baz', { exact: true })).toBeVisible()
   await expect(page.getByText('pageProps.foo is baz')).toBeVisible()
-  await expect(page.getByText('$sveltePage.props.foo is baz')).toBeVisible()
-  await expect(consoleMessages.messages).toHaveLength(11)
-  await expect(consoleMessages.messages[0]).toBe('[reactive expression] $page.props.foo is baz')
-  await expect(consoleMessages.messages[1]).toBe('[reactive expression] $sveltePage.props.foo is baz')
-  await expect(consoleMessages.messages[2]).toBe('[script] foo prop is baz')
-  await expect(consoleMessages.messages[3]).toBe('[script] $page.props.foo is baz')
-  await expect(consoleMessages.messages[4]).toBe('[script] $sveltePage.props.foo is baz')
-  await expect(consoleMessages.messages[5]).toBe('[reactive expression] foo prop is baz')
-  await expect(consoleMessages.messages[6]).toBe('[reactive expression] $page.props.foo is baz')
-  await expect(consoleMessages.messages[7]).toBe('[reactive expression] $sveltePage.props.foo is baz')
-  await expect(consoleMessages.messages[8]).toBe('[onMount] foo prop is baz')
-  await expect(consoleMessages.messages[9]).toBe('[onMount] $page.props.foo is baz')
-  await expect(consoleMessages.messages[10]).toBe('[onMount] $sveltePage.props.foo is baz')
+  await expect(page.getByText('sveltePage.props.foo is baz')).toBeVisible()
+  await expect(consoleMessages.messages).toHaveLength(9)
+  await expect(consoleMessages.messages[0]).toBe('[script] foo prop is baz')
+  await expect(consoleMessages.messages[1]).toBe('[script] page.props.foo is baz')
+  await expect(consoleMessages.messages[2]).toBe('[script] sveltePage.props.foo is baz')
+  await expect(consoleMessages.messages[3]).toBe('[reactive expression] foo prop is baz')
+  await expect(consoleMessages.messages[4]).toBe('[reactive expression] page.props.foo is baz')
+  await expect(consoleMessages.messages[5]).toBe('[reactive expression] sveltePage.props.foo is baz')
+  await expect(consoleMessages.messages[6]).toBe('[onMount] foo prop is baz')
+  await expect(consoleMessages.messages[7]).toBe('[onMount] page.props.foo is baz')
+  await expect(consoleMessages.messages[8]).toBe('[onMount] sveltePage.props.foo is baz')
   await expect(await page.locator('#input').inputValue()).toEqual('baz')
 
   consoleMessages.messages = []
@@ -78,20 +75,18 @@ test('props and page store are in sync', async ({ page }) => {
   await page.goBack()
   await page.waitForURL('/svelte/props-and-page-store')
 
-  await expect(page.getByText('foo prop is baz')).toBeVisible()
-  await expect(page.getByText('$page.props.foo is baz')).toBeVisible()
+  await expect(page.getByText('foo prop is baz', { exact: true })).toBeVisible()
+  await expect(page.getByText('page.props.foo is baz', { exact: true })).toBeVisible()
   await expect(page.getByText('pageProps.foo is baz')).toBeVisible()
-  await expect(page.getByText('$sveltePage.props.foo is baz')).toBeVisible()
-  await expect(consoleMessages.messages).toHaveLength(11)
-  await expect(consoleMessages.messages[0]).toBe('[reactive expression] $page.props.foo is undefined')
-  await expect(consoleMessages.messages[1]).toBe('[reactive expression] $sveltePage.props.foo is undefined')
-  await expect(consoleMessages.messages[2]).toBe('[script] foo prop is baz')
-  await expect(consoleMessages.messages[3]).toBe('[script] $page.props.foo is baz')
-  await expect(consoleMessages.messages[4]).toBe('[script] $sveltePage.props.foo is baz')
-  await expect(consoleMessages.messages[5]).toBe('[reactive expression] foo prop is baz')
-  await expect(consoleMessages.messages[6]).toBe('[reactive expression] $page.props.foo is baz')
-  await expect(consoleMessages.messages[7]).toBe('[reactive expression] $sveltePage.props.foo is baz')
-  await expect(consoleMessages.messages[8]).toBe('[onMount] foo prop is baz')
-  await expect(consoleMessages.messages[9]).toBe('[onMount] $page.props.foo is baz')
-  await expect(consoleMessages.messages[10]).toBe('[onMount] $sveltePage.props.foo is baz')
+  await expect(page.getByText('sveltePage.props.foo is baz')).toBeVisible()
+  await expect(consoleMessages.messages).toHaveLength(9)
+  await expect(consoleMessages.messages[0]).toBe('[script] foo prop is baz')
+  await expect(consoleMessages.messages[1]).toBe('[script] page.props.foo is baz')
+  await expect(consoleMessages.messages[2]).toBe('[script] sveltePage.props.foo is baz')
+  await expect(consoleMessages.messages[3]).toBe('[reactive expression] foo prop is baz')
+  await expect(consoleMessages.messages[4]).toBe('[reactive expression] page.props.foo is baz')
+  await expect(consoleMessages.messages[5]).toBe('[reactive expression] sveltePage.props.foo is baz')
+  await expect(consoleMessages.messages[6]).toBe('[onMount] foo prop is baz')
+  await expect(consoleMessages.messages[7]).toBe('[onMount] page.props.foo is baz')
+  await expect(consoleMessages.messages[8]).toBe('[onMount] sveltePage.props.foo is baz')
 })