From e94e492aa4798e44c15dd75eb6d2a92676b89da6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Jan 2026 19:26:22 +0000
Subject: [PATCH 1/3] fix: Convert sveltekit-helper components to Svelte 5
 runes mode

- Updated PayloadForm.svelte to use $props() instead of export let
- Updated Row.svelte to use $props() instead of export let
- Exported component prop types using module script blocks
- Added changeset for patch release
---
 .changeset/fix-svelte-runes-mode.md           |  5 +++
 .../src/components/Grid/Row.svelte            |  8 +++-
 .../src/components/payload/PayloadForm.svelte | 40 +++++++++++--------
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/fix-svelte-runes-mode.md

diff --git a/.changeset/fix-svelte-runes-mode.md b/.changeset/fix-svelte-runes-mode.md
new file mode 100644
index 00000000..f8bcd0f3
--- /dev/null
+++ b/.changeset/fix-svelte-runes-mode.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+Fixed Svelte components to use Svelte 5 runes mode instead of legacy export let syntax
diff --git a/packages/sveltekit-helper/src/components/Grid/Row.svelte b/packages/sveltekit-helper/src/components/Grid/Row.svelte
index a082a756..66a8582b 100644
--- a/packages/sveltekit-helper/src/components/Grid/Row.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Row.svelte
@@ -1,5 +1,11 @@
+<script lang="ts" module>
+export type RowProps = {
+	noGaps?: boolean;
+};
+</script>
+
 <script lang="ts">
-let noGaps = false;
+const { noGaps = false }: RowProps = $props();
 </script>
 
 <!--
diff --git a/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte b/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte
index d30e9c7d..c53504cc 100644
--- a/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte
+++ b/packages/sveltekit-helper/src/components/payload/PayloadForm.svelte
@@ -1,25 +1,31 @@
-<script lang="ts">
+<script lang="ts" module>
 import type { PayloadFormField } from '../../utils/forms/schema';
 
-/**
- * Payload form configuration
- */
-export let form: {
-	id: number | string;
-	fields?: PayloadFormField[] | null;
-	confirmationMessage?: string | null;
-	submitButtonLabel?: string | null;
+export type PayloadFormProps = {
+	/**
+	 * Payload form configuration
+	 */
+	form: {
+		id: number | string;
+		fields?: PayloadFormField[] | null;
+		confirmationMessage?: string | null;
+		submitButtonLabel?: string | null;
+	};
+	/**
+	 * API endpoint to submit form data to (defaults to '/api/forms')
+	 */
+	apiEndpoint?: string;
+	/**
+	 * Custom submit handler (overrides default API submission)
+	 */
+	onSubmit?: ((data: Record<string, unknown>) => Promise<void>) | undefined;
 };
+</script>
 
-/**
- * API endpoint to submit form data to (defaults to '/api/forms')
- */
-export let apiEndpoint = '/api/forms';
+<script lang="ts">
+import type { PayloadFormField } from '../../utils/forms/schema';
 
-/**
- * Custom submit handler (overrides default API submission)
- */
-export let onSubmit: ((data: Record<string, unknown>) => Promise<void>) | undefined = undefined;
+const { form, apiEndpoint = '/api/forms', onSubmit = undefined }: PayloadFormProps = $props();
 
 let formData = $state<Record<string, unknown>>({});
 let errors: Record<string, string> = $state({});

From dfa19a390ea2d7b733e1d5a7fee4ec71e3893208 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Jan 2026 19:29:59 +0000
Subject: [PATCH 2/3] fix: Replace $$restProps with $props() in Grid components

- Updated Column.svelte to use $props() instead of $$restProps
- Updated Container.svelte to use $props() instead of $$restProps
- Ensures full Svelte 5 runes mode compatibility
---
 packages/sveltekit-helper/src/components/Grid/Column.svelte | 6 +++++-
 .../sveltekit-helper/src/components/Grid/Container.svelte   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/Grid/Column.svelte b/packages/sveltekit-helper/src/components/Grid/Column.svelte
index 031ef6dd..a4f76e05 100644
--- a/packages/sveltekit-helper/src/components/Grid/Column.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Column.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+let props: Record<string, unknown> = $props();
+</script>
+
 <!--
 	@component
 
@@ -12,7 +16,7 @@
 	</Column>
 	```
 -->
-<div class="col" {...$$restProps}>
+<div class="col" {...props}>
 	<slot />
 </div>
 
diff --git a/packages/sveltekit-helper/src/components/Grid/Container.svelte b/packages/sveltekit-helper/src/components/Grid/Container.svelte
index 5f65c258..ca98dd06 100644
--- a/packages/sveltekit-helper/src/components/Grid/Container.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Container.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+let props: Record<string, unknown> = $props();
+</script>
+
 <!--
 	@component
 
@@ -19,7 +23,7 @@
 	</Container>
 	```
 -->
-<div class="container" {...$$restProps}>
+<div class="container" {...props}>
 	<slot />
 </div>
 

From 071f7f7aaded36c5ac5f80605b301876b3bdd6a2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Jan 2026 19:34:04 +0000
Subject: [PATCH 3/3] fix: Revert Column and Container to use $$restProps

- $$restProps is still valid in Svelte 5 for simple pass-through components
- Only components with defined props need $props()
---
 packages/sveltekit-helper/src/components/Grid/Column.svelte | 6 +-----
 .../sveltekit-helper/src/components/Grid/Container.svelte   | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/Grid/Column.svelte b/packages/sveltekit-helper/src/components/Grid/Column.svelte
index a4f76e05..031ef6dd 100644
--- a/packages/sveltekit-helper/src/components/Grid/Column.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Column.svelte
@@ -1,7 +1,3 @@
-<script lang="ts">
-let props: Record<string, unknown> = $props();
-</script>
-
 <!--
 	@component
 
@@ -16,7 +12,7 @@ let props: Record<string, unknown> = $props();
 	</Column>
 	```
 -->
-<div class="col" {...props}>
+<div class="col" {...$$restProps}>
 	<slot />
 </div>
 
diff --git a/packages/sveltekit-helper/src/components/Grid/Container.svelte b/packages/sveltekit-helper/src/components/Grid/Container.svelte
index ca98dd06..5f65c258 100644
--- a/packages/sveltekit-helper/src/components/Grid/Container.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Container.svelte
@@ -1,7 +1,3 @@
-<script lang="ts">
-let props: Record<string, unknown> = $props();
-</script>
-
 <!--
 	@component
 
@@ -23,7 +19,7 @@ let props: Record<string, unknown> = $props();
 	</Container>
 	```
 -->
-<div class="container" {...props}>
+<div class="container" {...$$restProps}>
 	<slot />
 </div>