diff --git a/.gitignore b/.gitignore
index 91988cc3a5..8531cf1d17 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ coverage
 .env.test.local
 .env.production.local
 .next
+.svelte-kit
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
index f31fc04d5a..aa6447dd0f 100644
--- a/examples/svelte/basic/package.json
+++ b/examples/svelte/basic/package.json
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte
index a918729a1a..a9874d1639 100644
--- a/examples/svelte/basic/src/App.svelte
+++ b/examples/svelte/basic/src/App.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
+  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import {
     createSvelteTable,
-    flexRender,
+    FlexRender,
     getCoreRowModel,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import './index.css'
 
   type Person = {
@@ -79,17 +78,10 @@
     },
   ]
 
-  const options = writable<TableOptions<Person>>({
+  let options: TableOptions<Person> = {
     data: defaultData,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
-  })
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data: defaultData,
-    }))
   }
 
   const table = createSvelteTable(options)
@@ -98,16 +90,14 @@
 <div class="p-2">
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -116,12 +106,13 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getRowModel().rows as row}
+      {#each table.getRowModel().rows as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
@@ -129,16 +120,14 @@
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -148,5 +137,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>
diff --git a/examples/svelte/basic/src/main.ts b/examples/svelte/basic/src/main.ts
index 4a5606b9a2..1349d05c46 100644
--- a/examples/svelte/basic/src/main.ts
+++ b/examples/svelte/basic/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json
index 22b29ad425..b96cc0733a 100644
--- a/examples/svelte/column-groups/package.json
+++ b/examples/svelte/column-groups/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
+    "svelte": "5.0.0-next.153",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/column-groups/src/App.svelte b/examples/svelte/column-groups/src/App.svelte
index ac780c0da3..eb32c78439 100644
--- a/examples/svelte/column-groups/src/App.svelte
+++ b/examples/svelte/column-groups/src/App.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
+  import type { ColumnDef } from '@tanstack/svelte-table'
   import {
     createSvelteTable,
-    flexRender,
+    FlexRender,
     getCoreRowModel,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import './index.css'
 
   type Person = {
@@ -96,17 +95,10 @@
     },
   ]
 
-  const options = writable<TableOptions<Person>>({
+  const options = {
     data: defaultData,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
-  })
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data: defaultData,
-    }))
   }
 
   const table = createSvelteTable(options)
@@ -115,16 +107,14 @@
 <div class="p-2">
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -133,12 +123,13 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getRowModel().rows as row}
+      {#each table.getRowModel().rows as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
@@ -146,16 +137,14 @@
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -165,5 +154,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>
diff --git a/examples/svelte/column-groups/src/main.ts b/examples/svelte/column-groups/src/main.ts
index 4a5606b9a2..1349d05c46 100644
--- a/examples/svelte/column-groups/src/main.ts
+++ b/examples/svelte/column-groups/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json
index 3d994045c6..a4d33cde41 100644
--- a/examples/svelte/column-ordering/package.json
+++ b/examples/svelte/column-ordering/package.json
@@ -12,10 +12,10 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/column-ordering/src/App.svelte b/examples/svelte/column-ordering/src/App.svelte
index d23b8c84a0..1a0367e911 100644
--- a/examples/svelte/column-ordering/src/App.svelte
+++ b/examples/svelte/column-ordering/src/App.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import {
-    getCoreRowModel,
-    createSvelteTable,
-    getSortedRowModel,
-    flexRender,
-  } from '@tanstack/svelte-table'
+  import { faker } from '@faker-js/faker'
   import type {
     ColumnDef,
     ColumnOrderState,
@@ -13,9 +7,15 @@
     TableOptions,
     VisibilityState,
   } from '@tanstack/svelte-table'
-  import { makeData, type Person } from './makeData'
-  import { faker } from '@faker-js/faker'
+  import {
+    FlexRender,
+    createSvelteTable,
+    getCoreRowModel,
+    getSortedRowModel,
+  } from '@tanstack/svelte-table'
   import './index.css'
+  import { makeData, type Person } from './makeData'
+  import { createTableState } from './state.svelte'
 
   const columns: ColumnDef<Person>[] = [
     {
@@ -69,68 +69,38 @@
     },
   ]
 
-  const data = makeData(5000)
-
-  let columnOrder: ColumnOrderState = []
-  let columnVisibility: VisibilityState = {}
+  let data = $state(makeData(5000))
 
-  const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
-    if (updater instanceof Function) {
-      columnOrder = updater(columnOrder)
-    } else {
-      columnOrder = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnOrder,
-      },
-    }))
-  }
-
-  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
-    if (updater instanceof Function) {
-      columnVisibility = updater(columnVisibility)
-    } else {
-      columnVisibility = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnVisibility,
-      },
-    }))
-  }
+  const [columnOrder, setColumnOrder] = createTableState<ColumnOrderState>([])
+  const [columnVisibility, setColumnVisibility] =
+    createTableState<VisibilityState>({})
 
-  const options = writable<TableOptions<Person>>({
-    data,
+  const options: TableOptions<Person> = {
+    get data() {
+      return data
+    },
     columns,
     state: {
-      columnOrder,
-      columnVisibility,
+      get columnOrder() {
+        return columnOrder()
+      },
+      get columnVisibility() {
+        return columnVisibility()
+      },
     },
     onColumnOrderChange: setColumnOrder,
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: true,
-  })
+  }
 
   const randomizeColumns = () => {
-    $table.setColumnOrder(_updater =>
-      faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
+    table.setColumnOrder(_updater =>
+      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
     )
   }
 
-  const regenerate = () => {
-    options.update(options => ({
-      ...options,
-      data: makeData(5000),
-    }))
-  }
-
   const table = createSvelteTable(options)
 </script>
 
@@ -139,16 +109,16 @@
     <div class="px-1 border-b border-black">
       <label>
         <input
-          checked={$table.getIsAllColumnsVisible()}
+          checked={table.getIsAllColumnsVisible()}
           on:change={e => {
-            console.info($table.getToggleAllColumnsVisibilityHandler()(e))
+            console.info(table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
         />{' '}
         Toggle All
       </label>
     </div>
-    {#each $table.getAllLeafColumns() as column}
+    {#each table.getAllLeafColumns() as column}
       <div class="px-1">
         <label>
           <input
@@ -163,8 +133,13 @@
   </div>
   <div class="h-4" />
   <div class="flex flex-wrap gap-2">
-    <button on:click={() => regenerate()} class="border p-1">
-      Regenerate
+    <button
+      on:click={() => {
+        data = makeData(5000)
+      }}
+      class="border p-1"
+    >
+      Refresh Data
     </button>
     <button on:click={() => randomizeColumns()} class="border p-1">
       Shuffle Columns
@@ -173,16 +148,14 @@
   <div class="h-4" />
   <table class="border-2 border-black">
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -191,12 +164,13 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getCoreRowModel().rows.slice(0, 20) as row}
+      {#each table.getCoreRowModel().rows.slice(0, 20) as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
@@ -204,5 +178,5 @@
       {/each}
     </tbody>
   </table>
-  <pre>{JSON.stringify($table.getState().columnOrder, null, 2)}</pre>
+  <pre>{JSON.stringify(table.getState().columnOrder, null, 2)}</pre>
 </div>
diff --git a/examples/svelte/column-ordering/src/main.ts b/examples/svelte/column-ordering/src/main.ts
index 4a5606b9a2..1349d05c46 100644
--- a/examples/svelte/column-ordering/src/main.ts
+++ b/examples/svelte/column-ordering/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/column-ordering/src/state.svelte.ts b/examples/svelte/column-ordering/src/state.svelte.ts
new file mode 100644
index 0000000000..2b2bc872ee
--- /dev/null
+++ b/examples/svelte/column-ordering/src/state.svelte.ts
@@ -0,0 +1,15 @@
+import type { Updater } from '@tanstack/svelte-table'
+
+export function createTableState<T>(
+  initialValue: T
+): [() => T, (updater: Updater<T>) => void] {
+  let value = $state(initialValue)
+
+  return [
+    () => value,
+    (updater: Updater<T>) => {
+      if (updater instanceof Function) value = updater(value)
+      else value = updater
+    },
+  ]
+}
diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json
index 1b14edc67b..89c8ecaaab 100644
--- a/examples/svelte/column-pinning/package.json
+++ b/examples/svelte/column-pinning/package.json
@@ -12,10 +12,10 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte
index ad1314ee32..97c9f1adf3 100644
--- a/examples/svelte/column-pinning/src/App.svelte
+++ b/examples/svelte/column-pinning/src/App.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import {
-    createSvelteTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    flexRender,
-  } from '@tanstack/svelte-table'
+  import { faker } from '@faker-js/faker'
   import type {
     ColumnDef,
     ColumnOrderState,
     ColumnPinningState,
-    OnChangeFn,
     TableOptions,
     VisibilityState,
   } from '@tanstack/svelte-table'
-  import { makeData, type Person } from './makeData'
-  import { faker } from '@faker-js/faker'
+  import {
+    FlexRender,
+    createSvelteTable,
+    getCoreRowModel,
+    getSortedRowModel,
+  } from '@tanstack/svelte-table'
   import './index.css'
+  import { makeData, type Person } from './makeData'
+  import { createTableState } from './state.svelte'
 
   const columns: ColumnDef<Person>[] = [
     {
@@ -70,66 +69,30 @@
     },
   ]
 
-  const data = makeData(5000)
-
-  let isSplit = false
+  let data = $state(makeData(5000))
+  let isSplit = $state(false)
 
-  let columnOrder: ColumnOrderState = []
-  let columnPinning: ColumnPinningState = {}
-  let columnVisibility: VisibilityState = {}
+  const [columnOrder, setColumnOrder] = createTableState<ColumnOrderState>([])
+  const [columnPinning, setColumnPinning] =
+    createTableState<ColumnPinningState>({})
+  const [columnVisibility, setColumnVisibility] =
+    createTableState<VisibilityState>({})
 
-  const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
-    if (updater instanceof Function) {
-      columnOrder = updater(columnOrder)
-    } else {
-      columnOrder = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnOrder,
+  const options: TableOptions<Person> = {
+    get data() {
+      return data
+    },
+    columns,
+    state: {
+      get columnOrder() {
+        return columnOrder()
       },
-    }))
-  }
-
-  const setColumnPinning: OnChangeFn<ColumnPinningState> = updater => {
-    if (updater instanceof Function) {
-      columnPinning = updater(columnPinning)
-    } else {
-      columnPinning = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnPinning,
+      get columnPinning() {
+        return columnPinning()
       },
-    }))
-  }
-
-  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
-    if (updater instanceof Function) {
-      columnVisibility = updater(columnVisibility)
-    } else {
-      columnVisibility = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnVisibility,
+      get columnVisibility() {
+        return columnVisibility()
       },
-    }))
-  }
-
-  const options = writable<TableOptions<Person>>({
-    data,
-    columns,
-    state: {
-      columnOrder,
-      columnPinning,
-      columnVisibility,
     },
     onColumnOrderChange: setColumnOrder,
     onColumnPinningChange: setColumnPinning,
@@ -137,21 +100,14 @@
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: true,
-  })
+  }
 
   const randomizeColumns = () => {
-    $table.setColumnOrder(_updater =>
-      faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
+    table.setColumnOrder(_updater =>
+      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
     )
   }
 
-  const regenerate = () => {
-    options.update(options => ({
-      ...options,
-      data: makeData(5000),
-    }))
-  }
-
   const table = createSvelteTable(options)
 </script>
 
@@ -160,16 +116,16 @@
     <div class="px-1 border-b border-black">
       <label>
         <input
-          checked={$table.getIsAllColumnsVisible()}
+          checked={table.getIsAllColumnsVisible()}
           on:change={e => {
-            console.info($table.getToggleAllColumnsVisibilityHandler()(e))
+            console.info(table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
         />{' '}
         Toggle All
       </label>
     </div>
-    {#each $table.getAllLeafColumns() as column}
+    {#each table.getAllLeafColumns() as column}
       <div class="px-1">
         <label>
           <input
@@ -184,8 +140,13 @@
   </div>
   <div class="h-4" />
   <div class="flex flex-wrap gap-2">
-    <button on:click={() => regenerate()} class="border p-1">
-      Regenerate
+    <button
+      on:click={() => {
+        data = makeData(5000)
+      }}
+      class="border p-1"
+    >
+      Refresh Data
     </button>
     <button on:click={() => randomizeColumns()} class="border p-1">
       Shuffle Columns
@@ -206,17 +167,15 @@
     {#if isSplit}
       <table class="border-2 border-black">
         <thead>
-          {#each $table.getLeftHeaderGroups() as headerGroup}
+          {#each table.getLeftHeaderGroups() as headerGroup}
             <tr>
               {#each headerGroup.headers as header}
                 <th colSpan={header.colSpan}>
                   <div class="whitespace-nowrap">
                     {#if !header.isPlaceholder}
-                      <svelte:component
-                        this={flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      <FlexRender
+                        content={header.column.columnDef.header}
+                        context={header.getContext()}
                       />
                     {/if}
                   </div>
@@ -260,15 +219,13 @@
           {/each}
         </thead>
         <tbody>
-          {#each $table.getCoreRowModel().rows.slice(0, 20) as row}
+          {#each table.getCoreRowModel().rows.slice(0, 20) as row}
             <tr>
               {#each row.getLeftVisibleCells() as cell}
                 <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                  <FlexRender
+                    content={cell.column.columnDef.cell}
+                    context={cell.getContext()}
                   />
                 </td>
               {/each}
@@ -279,17 +236,15 @@
     {/if}
     <table class="border-2 border-black">
       <thead>
-        {#each isSplit ? $table.getCenterHeaderGroups() : $table.getHeaderGroups() as headerGroup}
+        {#each isSplit ? table.getCenterHeaderGroups() : table.getHeaderGroups() as headerGroup}
           <tr>
             {#each headerGroup.headers as header}
               <th colSpan={header.colSpan}>
                 <div class="whitespace-nowrap">
                   {#if !header.isPlaceholder}
-                    <svelte:component
-                      this={flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    <FlexRender
+                      content={header.column.columnDef.header}
+                      context={header.getContext()}
                     />
                   {/if}
                 </div>
@@ -333,15 +288,13 @@
         {/each}
       </thead>
       <tbody>
-        {#each $table.getCoreRowModel().rows.slice(0, 20) as row}
+        {#each table.getCoreRowModel().rows.slice(0, 20) as row}
           <tr>
             {#each isSplit ? row.getCenterVisibleCells() : row.getVisibleCells() as cell}
               <td>
-                <svelte:component
-                  this={flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext()
-                  )}
+                <FlexRender
+                  content={cell.column.columnDef.cell}
+                  context={cell.getContext()}
                 />
               </td>
             {/each}
@@ -352,17 +305,15 @@
     {#if isSplit}
       <table class="border-2 border-black">
         <thead>
-          {#each $table.getRightHeaderGroups() as headerGroup}
+          {#each table.getRightHeaderGroups() as headerGroup}
             <tr>
               {#each headerGroup.headers as header}
                 <th colSpan={header.colSpan}>
                   <div class="whitespace-nowrap">
                     {#if !header.isPlaceholder}
-                      <svelte:component
-                        this={flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      <FlexRender
+                        content={header.column.columnDef.header}
+                        context={header.getContext()}
                       />
                     {/if}
                   </div>
@@ -406,15 +357,13 @@
           {/each}
         </thead>
         <tbody>
-          {#each $table.getRowModel().rows.slice(0, 20) as row}
+          {#each table.getRowModel().rows.slice(0, 20) as row}
             <tr>
               {#each row.getRightVisibleCells() as cell}
                 <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                  <FlexRender
+                    content={cell.column.columnDef.cell}
+                    context={cell.getContext()}
                   />
                 </td>
               {/each}
@@ -424,5 +373,5 @@
       </table>
     {/if}
   </div>
-  <pre>{JSON.stringify($table.getState().columnPinning, null, 2)}</pre>
+  <pre>{JSON.stringify(table.getState().columnPinning, null, 2)}</pre>
 </div>
diff --git a/examples/svelte/column-pinning/src/main.ts b/examples/svelte/column-pinning/src/main.ts
index 4a5606b9a2..1349d05c46 100644
--- a/examples/svelte/column-pinning/src/main.ts
+++ b/examples/svelte/column-pinning/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/column-pinning/src/state.svelte.ts b/examples/svelte/column-pinning/src/state.svelte.ts
new file mode 100644
index 0000000000..2b2bc872ee
--- /dev/null
+++ b/examples/svelte/column-pinning/src/state.svelte.ts
@@ -0,0 +1,15 @@
+import type { Updater } from '@tanstack/svelte-table'
+
+export function createTableState<T>(
+  initialValue: T
+): [() => T, (updater: Updater<T>) => void] {
+  let value = $state(initialValue)
+
+  return [
+    () => value,
+    (updater: Updater<T>) => {
+      if (updater instanceof Function) value = updater(value)
+      else value = updater
+    },
+  ]
+}
diff --git a/examples/svelte/column-visibility/package.json b/examples/svelte/column-visibility/package.json
index 38f3f64e1b..1127f986a2 100644
--- a/examples/svelte/column-visibility/package.json
+++ b/examples/svelte/column-visibility/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
+    "svelte": "5.0.0-next.153",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte
index 476bada33a..c71909b36b 100644
--- a/examples/svelte/column-visibility/src/App.svelte
+++ b/examples/svelte/column-visibility/src/App.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import {
-    createSvelteTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    flexRender,
-  } from '@tanstack/svelte-table'
   import type {
     ColumnDef,
-    OnChangeFn,
     TableOptions,
     VisibilityState,
+    Updater,
+  } from '@tanstack/svelte-table'
+  import {
+    FlexRender,
+    createSvelteTable,
+    getCoreRowModel,
+    getSortedRowModel,
   } from '@tanstack/svelte-table'
   import './index.css'
 
@@ -102,41 +101,28 @@
     },
   ]
 
-  let columnVisibility: VisibilityState = {}
+  let columnVisibility = $state<VisibilityState>({})
 
-  const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
+  function setColumnVisibility(updater: Updater<VisibilityState>) {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
-    } else {
-      columnVisibility = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        columnVisibility,
-      },
-    }))
+    } else columnVisibility = updater
   }
 
-  const options = writable<TableOptions<Person>>({
+  const options: TableOptions<Person> = {
     data: defaultData,
     columns,
     state: {
-      columnVisibility,
+      get columnVisibility() {
+        return columnVisibility
+      },
     },
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: true,
-  })
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data: defaultData,
-    }))
   }
+
   const table = createSvelteTable(options)
 </script>
 
@@ -145,16 +131,16 @@
     <div class="px-1 border-b border-black">
       <label>
         <input
-          checked={$table.getIsAllColumnsVisible()}
+          checked={table.getIsAllColumnsVisible()}
           on:change={e => {
-            console.info($table.getToggleAllColumnsVisibilityHandler()(e))
+            console.info(table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
         />{' '}
         Toggle All
       </label>
     </div>
-    {#each $table.getAllLeafColumns() as column}
+    {#each table.getAllLeafColumns() as column}
       <div class="px-1">
         <label>
           <input
@@ -170,16 +156,14 @@
   <div class="h-4" />
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -188,12 +172,13 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getCoreRowModel().rows.slice(0, 20) as row}
+      {#each table.getCoreRowModel().rows.slice(0, 20) as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
@@ -201,16 +186,14 @@
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -220,7 +203,5 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
-  <div class="h-4" />
-  <pre>{JSON.stringify($table.getState().columnVisibility, null, 2)}</pre>
+  <pre>{JSON.stringify(table.getState().columnVisibility, null, 2)}</pre>
 </div>
diff --git a/examples/svelte/column-visibility/src/main.ts b/examples/svelte/column-visibility/src/main.ts
index 4a5606b9a2..1349d05c46 100644
--- a/examples/svelte/column-visibility/src/main.ts
+++ b/examples/svelte/column-visibility/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/filtering/package.json b/examples/svelte/filtering/package.json
index 5ae4ea6141..5c931a0e4b 100644
--- a/examples/svelte/filtering/package.json
+++ b/examples/svelte/filtering/package.json
@@ -11,12 +11,12 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
+    "svelte": "5.0.0-next.153",
     "@rollup/plugin-replace": "^5.0.5",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/match-sorter-utils": "^9.0.0-alpha.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte
index 9a7f5de097..a01f5b9635 100644
--- a/examples/svelte/filtering/src/App.svelte
+++ b/examples/svelte/filtering/src/App.svelte
@@ -1,28 +1,22 @@
 <script lang="ts">
-  import './index.css'
-  import { writable } from 'svelte/store'
-
-  import './index.css'
-
+  import { rankItem } from '@tanstack/match-sorter-utils'
+  import type {
+    ColumnDef,
+    FilterFn,
+    TableOptions,
+  } from '@tanstack/svelte-table'
   import {
+    FlexRender,
     createSvelteTable,
-    flexRender,
     getCoreRowModel,
     getFilteredRowModel,
     getPaginationRowModel,
   } from '@tanstack/svelte-table'
-
-  import type {
-    ColumnDef,
-    TableOptions,
-    FilterFn,
-  } from '@tanstack/svelte-table'
-
-  import { rankItem } from '@tanstack/match-sorter-utils'
-
+  import { type Updater } from 'svelte/store'
+  import './index.css'
   import { makeData, type Person } from './makeData'
 
-  let globalFilter = ''
+  let globalFilter = $state('')
 
   const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
     // Rank the item
@@ -46,24 +40,36 @@
     },
   ]
 
-  const options = writable<TableOptions<any>>({
+  function setGlobalFilter(updater: Updater<string>) {
+    if (updater instanceof Function) {
+      globalFilter = updater(globalFilter)
+    } else globalFilter = updater
+  }
+
+  const options: TableOptions<Person> = {
     data: makeData(25),
     columns,
+    state: {
+      get globalFilter() {
+        return globalFilter
+      },
+    },
     filterFns: {
       fuzzy: fuzzyFilter,
     },
-    enableMultiRowSelection: true,
+    onGlobalFilterChange: setGlobalFilter,
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
     globalFilterFn: fuzzyFilter,
     getFilteredRowModel: getFilteredRowModel(),
-  })
+    enableMultiRowSelection: true,
+  }
 
   const table = createSvelteTable(options)
 
-  const handleKeyUp = (e: any) => {
-    $table.setGlobalFilter(String(e?.target?.value))
-  }
+  $effect(() => {
+    table.setGlobalFilter(globalFilter)
+  })
 </script>
 
 <input
@@ -71,21 +77,18 @@
   placeholder="Global filter"
   class="border w-full p-1"
   bind:value={globalFilter}
-  on:keyup={handleKeyUp}
 />
 <div class="h-2" />
 <table class="w-full">
   <thead>
-    {#each $table.getHeaderGroups() as headerGroup}
+    {#each table.getHeaderGroups() as headerGroup}
       <tr>
         {#each headerGroup.headers as header, idx}
           <th scope="col">
             {#if !header.isPlaceholder}
-              <svelte:component
-                this={flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )}
+              <FlexRender
+                content={header.column.columnDef.header}
+                context={header.getContext()}
               />
             {/if}
           </th>
@@ -94,12 +97,13 @@
     {/each}
   </thead>
   <tbody>
-    {#each $table.getRowModel().rows as row}
+    {#each table.getRowModel().rows as row}
       <tr>
         {#each row.getVisibleCells() as cell}
           <td>
-            <svelte:component
-              this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+            <FlexRender
+              content={cell.column.columnDef.cell}
+              context={cell.getContext()}
             />
           </td>
         {/each}
@@ -108,4 +112,4 @@
   </tbody>
 </table>
 <div class="h-2" />
-<pre>"globalFilter": "{$table.getState().globalFilter}"</pre>
+<pre>"globalFilter": "{table.getState().globalFilter}"</pre>
diff --git a/examples/svelte/filtering/src/main.ts b/examples/svelte/filtering/src/main.ts
index 61bf4ae49f..29b5b4e2cb 100644
--- a/examples/svelte/filtering/src/main.ts
+++ b/examples/svelte/filtering/src/main.ts
@@ -1,5 +1,6 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
 import type { FilterFn } from '@tanstack/svelte-table'
 
@@ -14,7 +15,7 @@ declare module '@tanstack/svelte-table' {
   }
 }
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/examples/svelte/sorting/package.json b/examples/svelte/sorting/package.json
index b0b9b6e2ff..eca0ace4cb 100644
--- a/examples/svelte/sorting/package.json
+++ b/examples/svelte/sorting/package.json
@@ -15,7 +15,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
+    "svelte": "5.0.0-next.153",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"
diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte
index c48ea9df32..b890d5b9f1 100644
--- a/examples/svelte/sorting/src/App.svelte
+++ b/examples/svelte/sorting/src/App.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import {
-    createSvelteTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    flexRender,
-  } from '@tanstack/svelte-table'
   import type {
     ColumnDef,
-    OnChangeFn,
     SortingState,
     TableOptions,
+    Updater,
   } from '@tanstack/svelte-table'
-  import { makeData, type Person } from './makeData'
+  import {
+    FlexRender,
+    createSvelteTable,
+    getCoreRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from '@tanstack/svelte-table'
+  import Header from './Header.svelte'
   import './index.css'
+  import { makeData, type Person } from './makeData'
 
   const columns: ColumnDef<Person>[] = [
     {
@@ -22,6 +23,7 @@
       columns: [
         {
           accessorKey: 'firstName',
+          header: ({ header }) => renderComponent(Header, { header }),
           cell: info => info.getValue(),
           footer: props => props.column.id,
         },
@@ -29,7 +31,8 @@
           accessorFn: row => row.lastName,
           id: 'lastName',
           cell: info => info.getValue(),
-          header: () => 'Last Name',
+          header: ({ header }) =>
+            renderComponent(Header, { label: 'Last Name', header }),
           footer: props => props.column.id,
         },
       ],
@@ -40,7 +43,8 @@
       columns: [
         {
           accessorKey: 'age',
-          header: () => 'Age',
+          header: ({ header }) =>
+            renderComponent(Header, { label: 'Age', header }),
           footer: props => props.column.id,
         },
         {
@@ -48,17 +52,20 @@
           columns: [
             {
               accessorKey: 'visits',
-              header: () => 'Visits',
+              header: ({ header }) =>
+                renderComponent(Header, { label: 'Visits', header }),
               footer: props => props.column.id,
             },
             {
               accessorKey: 'status',
-              header: 'Status',
+              header: ({ header }) =>
+                renderComponent(Header, { label: 'Status', header }),
               footer: props => props.column.id,
             },
             {
               accessorKey: 'progress',
-              header: 'Profile Progress',
+              header: ({ header }) =>
+                renderComponent(Header, { label: 'Progress', header }),
               footer: props => props.column.id,
             },
           ],
@@ -67,50 +74,35 @@
     },
   ]
 
-  const data = makeData(100_000)
+  let data = $state(makeData(100_000))
 
-  let sorting: SortingState = []
+  let sorting = $state<SortingState>([])
 
-  const setSorting: OnChangeFn<SortingState> = updater => {
+  function setSorting(updater: Updater<SortingState>) {
     if (updater instanceof Function) {
       sorting = updater(sorting)
-    } else {
-      sorting = updater
-    }
-    options.update(old => ({
-      ...old,
-      state: {
-        ...old.state,
-        sorting,
-      },
-    }))
+    } else sorting = updater
   }
 
-  const options = writable<TableOptions<Person>>({
-    data,
+  const options: TableOptions<Person> = {
+    get data() {
+      return data
+    },
     columns,
     state: {
-      sorting,
+      get sorting() {
+        return sorting
+      },
     },
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: true,
-  })
+  }
 
   const refreshData = () => {
     console.info('refresh')
-    options.update(prev => ({
-      ...prev,
-      data: makeData(100_000),
-    }))
-  }
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data,
-    }))
+    data = makeData(100_000)
   }
 
   const table = createSvelteTable(options)
@@ -120,28 +112,15 @@
   <div class="h-2" />
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <div
-                  class:cursor-pointer={header.column.getCanSort()}
-                  class:select-none={header.column.getCanSort()}
-                  on:click={header.column.getToggleSortingHandler()}
-                >
-                  <svelte:component
-                    this={flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  />
-                  {#if header.column.getIsSorted().toString() === 'asc'}
-                    🔼
-                  {:else if header.column.getIsSorted().toString() === 'desc'}
-                    🔽
-                  {/if}
-                </div>
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
+                />
               {/if}
             </th>
           {/each}
@@ -149,12 +128,13 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getRowModel().rows.slice(0, 10) as row}
+      {#each table.getRowModel().rows.slice(0, 10) as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
@@ -162,16 +142,14 @@
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -180,12 +158,9 @@
       {/each}
     </tfoot>
   </table>
-  <div>{$table.getRowModel().rows.length} Rows</div>
-  <div>
-    <button on:click={() => rerender()}>Force Rerender</button>
-  </div>
+  <div>{table.getRowModel().rows.length} Rows</div>
   <div>
     <button on:click={() => refreshData()}>Refresh Data</button>
   </div>
-  <pre>{JSON.stringify($table.getState().sorting, null, 2)}</pre>
+  <pre>{JSON.stringify(table.getState().sorting, null, 2)}</pre>
 </div>
diff --git a/examples/svelte/sorting/src/Header.svelte b/examples/svelte/sorting/src/Header.svelte
new file mode 100644
index 0000000000..f1a79012af
--- /dev/null
+++ b/examples/svelte/sorting/src/Header.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Header } from '@tanstack/svelte-table'
+  import type { Person } from './makeData'
+
+  type Props = {
+    label?: string
+    header: Header<Person, unknown>
+  }
+
+  const { label, header }: Props = $props()
+</script>
+
+<button
+  class:cursor-pointer={header.column.getCanSort()}
+  class:select-none={header.column.getCanSort()}
+  on:click={header.column.getToggleSortingHandler()}
+>
+  {label ?? header.column.id}
+  {#if header.column.getIsSorted().toString() === 'asc'}
+    🔼
+  {:else if header.column.getIsSorted().toString() === 'desc'}
+    🔽
+  {/if}
+</button>
+
+<style>
+  button {
+    padding-left: 4px;
+    padding-right: 4px;
+    font-weight: bold;
+  }
+</style>
diff --git a/examples/svelte/sorting/src/main.ts b/examples/svelte/sorting/src/main.ts
index 4a5606b9a2..2f4dd54dc3 100644
--- a/examples/svelte/sorting/src/main.ts
+++ b/examples/svelte/sorting/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
+import { mount } from 'svelte'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 
diff --git a/knip.json b/knip.json
index aa7a5d44da..3a6c3bd466 100644
--- a/knip.json
+++ b/knip.json
@@ -1,6 +1,10 @@
 {
   "$schema": "https://unpkg.com/knip@4/schema.json",
-  "ignoreDependencies": ["@size-limit/preset-small-lib", "@builder.io/qwik"],
+  "ignoreDependencies": [
+    "@size-limit/preset-small-lib",
+    "@builder.io/qwik",
+    "svelte-check"
+  ],
   "ignoreWorkspaces": ["examples/**"],
   "workspaces": {
     "packages/match-sorter-utils": {
diff --git a/package.json b/package.json
index d8da3475c0..6e1bb85aef 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,10 @@
     "clean": "pnpm --filter \"./packages/**\" run clean",
     "preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm",
     "test": "pnpm run test:ci",
-    "test:pr": "nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,test:build,build",
-    "test:ci": "nx run-many --targets=test:format,test:sherif,test:knip,test:lib,test:types,test:build,build",
+    "test:pr": "nx affected --targets=test:format,test:sherif,test:lib,test:types,test:build,build",
+    "test:ci": "nx run-many --targets=test:format,test:sherif,test:lib,test:types,test:build,build",
     "test:format": "pnpm run prettier --check",
-    "test:sherif": "sherif -i svelte",
+    "test:sherif": "sherif",
     "test:lib": "nx affected --targets=test:lib --exclude=examples/**",
     "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
     "test:build": "nx affected --target=test:build --exclude=examples/**",
@@ -24,6 +24,7 @@
     "dev": "pnpm run watch",
     "prettier": "prettier --ignore-unknown '**/*'",
     "prettier:write": "pnpm run prettier --write",
+    "format": "pnpm run prettier:write",
     "cipublish": "node scripts/publish.js"
   },
   "nx": {
@@ -64,6 +65,7 @@
     "rimraf": "^5.0.5",
     "sherif": "^0.8.4",
     "size-limit": "^11.1.2",
+    "svelte": "5.0.0-next.153",
     "typescript": "5.4.5",
     "vite": "^5.2.10",
     "vitest": "^1.5.2"
diff --git a/packages/svelte-table/package.json b/packages/svelte-table/package.json
index bed7e941ce..7d3af60fe5 100644
--- a/packages/svelte-table/package.json
+++ b/packages/svelte-table/package.json
@@ -41,7 +41,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "test:types": "tsc",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:build": "publint --strict",
     "build": "svelte-package --input ./src --output ./dist"
   },
@@ -49,11 +49,12 @@
     "@tanstack/table-core": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "svelte": "^3.59.2"
+    "@sveltejs/package": "^2.3.1"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^3.49.0"
+    "svelte": "^5.0.0-next",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "svelte-check": "^3.6.8",
+    "svelte-eslint-parser": "^0.33.1"
   }
 }
diff --git a/packages/svelte-table/src/flex-render.svelte b/packages/svelte-table/src/flex-render.svelte
new file mode 100644
index 0000000000..2dc599b556
--- /dev/null
+++ b/packages/svelte-table/src/flex-render.svelte
@@ -0,0 +1,35 @@
+<script
+  lang="ts"
+  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+  import type {
+    CellContext,
+    ColumnDefTemplate,
+    HeaderContext,
+  } from '@tanstack/table-core'
+  import { RenderComponentConfig } from './render-component'
+
+  type Props = {
+    /** The cell or header field of the current cell's column definition. */
+    content?: TContext extends HeaderContext<TData, TValue>
+      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
+      : TContext extends CellContext<TData, TValue>
+        ? ColumnDefTemplate<CellContext<TData, TValue>>
+        : never
+    /** The result of the `getContext()` function of the header or cell */
+    context: TContext
+  }
+
+  let { content, context }: Props = $props()
+</script>
+
+{#if typeof content === 'string'}
+  {content}
+{:else if content instanceof Function}
+  {@const     result = content(context as any)}
+  {#if result instanceof RenderComponentConfig}
+    <svelte:component this={result.component} {...result.props} />
+  {:else}
+    {result}
+  {/if}
+{/if}
diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts
old mode 100755
new mode 100644
index 0a7dd157cf..3881252fda
--- a/packages/svelte-table/src/index.ts
+++ b/packages/svelte-table/src/index.ts
@@ -1,125 +1,4 @@
-import {
-  RowData,
-  createTable,
-  TableOptions,
-  TableOptionsResolved,
-} from '@tanstack/table-core'
-import Placeholder from './placeholder'
-import type { ComponentType } from 'svelte'
-import { SvelteComponent } from 'svelte/internal'
-import { readable, writable, derived, Readable, get } from 'svelte/store'
-import { renderComponent } from './render-component'
-
-export { renderComponent } from './render-component'
-
 export * from '@tanstack/table-core'
-
-function isSvelteServerComponent(component: any) {
-  return (
-    typeof component === 'object' &&
-    typeof component.$$render === 'function' &&
-    typeof component.render === 'function'
-  )
-}
-
-function isSvelteClientComponent(component: any) {
-  let isHMR = '__SVELTE_HMR' in window
-
-  return (
-    component.prototype instanceof SvelteComponent ||
-    (isHMR &&
-      component.name?.startsWith('Proxy<') &&
-      component.name?.endsWith('>'))
-  )
-}
-
-function isSvelteComponent(component: any) {
-  if (typeof document === 'undefined') {
-    return isSvelteServerComponent(component)
-  } else {
-    return isSvelteClientComponent(component)
-  }
-}
-
-function wrapInPlaceholder(content: any) {
-  return renderComponent(Placeholder, { content })
-}
-
-export function flexRender(component: any, props: any): ComponentType | null {
-  if (!component) return null
-
-  if (isSvelteComponent(component)) {
-    return renderComponent(component, props)
-  }
-
-  if (typeof component === 'function') {
-    const result = component(props)
-    if (result === null || result === undefined) return null
-
-    if (isSvelteComponent(result)) {
-      return renderComponent(result, props)
-    }
-
-    return wrapInPlaceholder(result)
-  }
-
-  return wrapInPlaceholder(component)
-}
-
-type ReadableOrVal<T> = T | Readable<T>
-
-export function createSvelteTable<TData extends RowData>(
-  options: ReadableOrVal<TableOptions<TData>>
-) {
-  let optionsStore: Readable<TableOptions<TData>>
-
-  if ('subscribe' in options) {
-    optionsStore = options
-  } else {
-    optionsStore = readable(options)
-  }
-
-  let resolvedOptions: TableOptionsResolved<TData> = {
-    state: {}, // Dummy state
-    onStateChange: () => {}, // noop
-    renderFallbackValue: null,
-    ...get(optionsStore),
-  }
-
-  let table = createTable(resolvedOptions)
-
-  let stateStore = writable(/** @type {number} */ table.initialState)
-  // combine stores
-  let stateOptionsStore = derived([stateStore, optionsStore], s => s)
-  const tableReadable = readable(table, function start(set) {
-    const unsubscribe = stateOptionsStore.subscribe(([state, options]) => {
-      table.setOptions(prev => {
-        return {
-          ...prev,
-          ...options,
-          state: { ...state, ...options.state },
-          // Similarly, we'll maintain both our internal state and any user-provided
-          // state.
-          onStateChange: updater => {
-            if (updater instanceof Function) {
-              stateStore.update(updater)
-            } else {
-              stateStore.set(updater)
-            }
-
-            resolvedOptions.onStateChange?.(updater)
-          },
-        }
-      })
-
-      // it didn't seem to rerender without setting the table
-      set(table)
-    })
-
-    return function stop() {
-      unsubscribe()
-    }
-  })
-
-  return tableReadable
-}
+export { default as FlexRender } from './flex-render.svelte'
+export { renderComponent } from './render-component'
+export { createSvelteTable } from './table.svelte'
diff --git a/packages/svelte-table/src/placeholder.svelte b/packages/svelte-table/src/placeholder.svelte
deleted file mode 100644
index 3d7611c714..0000000000
--- a/packages/svelte-table/src/placeholder.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  export let content
-</script>
-
-{content}
diff --git a/packages/svelte-table/src/placeholder.ts b/packages/svelte-table/src/placeholder.ts
deleted file mode 100644
index b99a4c69b8..0000000000
--- a/packages/svelte-table/src/placeholder.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { SvelteComponentDev } from 'svelte/internal'
-import { create_ssr_component, escape } from 'svelte/internal'
-import PlaceholderClient from './placeholder.svelte'
-
-type X = typeof PlaceholderClient
-
-const PlaceholderServer = create_ssr_component(
-  ($$result: any, $$props: any, $$bindings: any, slots: any) => {
-    return `${escape($$props.content)}`
-  }
-) as any as typeof SvelteComponentDev
-
-export default typeof document === 'undefined'
-  ? PlaceholderServer
-  : PlaceholderClient
diff --git a/packages/svelte-table/src/render-component.ts b/packages/svelte-table/src/render-component.ts
index 08f4fb1a65..c74b6c98b1 100644
--- a/packages/svelte-table/src/render-component.ts
+++ b/packages/svelte-table/src/render-component.ts
@@ -1,89 +1,41 @@
-import type { ComponentType, ComponentProps } from 'svelte'
-import {
-  SvelteComponent,
-  claim_component,
-  create_component,
-  destroy_component,
-  init,
-  mount_component,
-  noop,
-  safe_not_equal,
-  transition_in,
-  transition_out,
-  create_ssr_component,
-  validate_component,
-} from 'svelte/internal'
+import type { SvelteComponent, ComponentType, ComponentProps } from 'svelte'
 
-function create_fragment(ctx: any, Comp: any, props: any) {
-  let c: any
-  let current: any
-  c = new Comp({ props, $$inline: true })
-
-  return {
-    c() {
-      create_component(c.$$.fragment)
-    },
-    l(nodes: any) {
-      claim_component(c.$$.fragment, nodes)
-    },
-    m(target: any, anchor: any) {
-      // @ts-ignore
-      mount_component(c, target, anchor)
-      current = true
-    },
-    p: noop,
-    i(local: any) {
-      if (current) return
-      transition_in(c.$$.fragment, local)
-      current = true
-    },
-    o(local: any) {
-      transition_out(c.$$.fragment, local)
-      current = false
-    },
-    d(detaching: any) {
-      destroy_component(c, detaching)
-    },
-  }
-}
-
-function renderClient<T>(
-  Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
-) {
-  return class WrapperComp extends SvelteComponent {
-    constructor(options: any) {
-      super()
-      init(
-        this,
-        options,
-        null,
-        (ctx: any) => create_fragment(ctx, Comp, props),
-        safe_not_equal,
-        {},
-        undefined
-      )
-    }
-  } as ComponentType
-}
-
-function renderServer<T>(
-  Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
-) {
-  const WrapperComp = create_ssr_component(
-    ($$result: any, $$props: any, $$bindings: any, slots: any) => {
-      return `${validate_component(Comp, 'TableComponent').$$render(
-        $$result,
-        props,
-        {},
-        {}
-      )}`
-    }
-  )
-
-  return WrapperComp as unknown as ComponentType
+/**
+ * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * @example
+ * ```svelte
+ * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
+ *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {/if}
+ * ```
+ * */
+export class RenderComponentConfig<TComponent extends SvelteComponent> {
+  constructor(
+    public component: ComponentType<TComponent>,
+    public props: ComponentProps<TComponent> | Record<string, never> = {}
+  ) {}
 }
 
-export const renderComponent =
-  typeof window === 'undefined' ? renderServer : renderClient
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderComponent = <TComponent extends SvelteComponent>(
+  component: ComponentType<TComponent>,
+  props: ComponentProps<TComponent>
+) => new RenderComponentConfig(component, props)
diff --git a/packages/svelte-table/src/table.svelte.ts b/packages/svelte-table/src/table.svelte.ts
new file mode 100644
index 0000000000..5b90054ab0
--- /dev/null
+++ b/packages/svelte-table/src/table.svelte.ts
@@ -0,0 +1,121 @@
+import {
+  createTable,
+  type RowData,
+  type TableOptions,
+  type TableOptionsResolved,
+  type TableState,
+} from '@tanstack/table-core'
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable<TData extends RowData>(
+  options: TableOptions<TData>
+) {
+  const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+    {
+      state: {},
+      onStateChange() {},
+      renderFallbackValue: null,
+      mergeOptions: (
+        defaultOptions: TableOptions<TData>,
+        options: Partial<TableOptions<TData>>
+      ) => {
+        return mergeObjects(defaultOptions, options)
+      },
+    },
+    options
+  )
+
+  const table = createTable(resolvedOptions)
+  let state = $state<Partial<TableState>>(table.initialState)
+
+  function updateOptions() {
+    table.setOptions(prev => {
+      return mergeObjects(prev, options, {
+        state: mergeObjects(state, options.state || {}),
+        onStateChange: (updater: any) => {
+          if (updater instanceof Function) state = updater(state)
+          else state = mergeObjects(state, updater)
+
+          options.onStateChange?.(updater)
+        },
+      })
+    })
+  }
+
+  updateOptions()
+
+  $effect.pre(() => {
+    updateOptions()
+  })
+
+  return table
+}
+
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ * */
+export function mergeObjects<T>(source: T): T
+export function mergeObjects<T, U>(source: T, source1: U): T & U
+export function mergeObjects<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V
+): T & U & V
+export function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W
+): T & U & V & W
+export function mergeObjects(...sources: any): any {
+  const target = {}
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i]
+    if (typeof source === 'function') source = source()
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source)
+      for (const key in descriptors) {
+        if (key in target) continue
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let v,
+                s = sources[i]
+              if (typeof s === 'function') s = s()
+              v = (s || {})[key]
+              if (v !== undefined) return v
+            }
+          },
+        })
+      }
+    }
+  }
+  return target
+}
diff --git a/packages/svelte-table/svelte.config.js b/packages/svelte-table/svelte.config.js
new file mode 100644
index 0000000000..94ca454ac7
--- /dev/null
+++ b/packages/svelte-table/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+export default config
diff --git a/packages/svelte-table/vite.config.js b/packages/svelte-table/vite.config.js
new file mode 100644
index 0000000000..3d696d6ec5
--- /dev/null
+++ b/packages/svelte-table/vite.config.js
@@ -0,0 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [svelte()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f6c460cc7..1174113eeb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,7 +55,7 @@ importers:
         version: 4.0.0-alpha.8
       prettier-plugin-svelte:
         specifier: ^3.2.3
-        version: 3.2.3(prettier@4.0.0-alpha.8)(svelte@4.2.15)
+        version: 3.2.3(prettier@4.0.0-alpha.8)(svelte@5.0.0-next.153)
       publint:
         specifier: ^0.2.8
         version: 0.2.8
@@ -68,6 +68,9 @@ importers:
       size-limit:
         specifier: ^11.1.2
         version: 11.1.2
+      svelte:
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2257,7 +2260,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2265,11 +2268,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2284,7 +2287,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2292,11 +2295,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2314,7 +2317,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2322,11 +2325,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2344,7 +2347,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2352,11 +2355,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2371,7 +2374,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2379,11 +2382,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2401,7 +2404,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/match-sorter-utils':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/match-sorter-utils
@@ -2412,11 +2415,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2434,7 +2437,7 @@ importers:
         version: 5.0.5(rollup@4.16.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+        version: 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/svelte-table':
         specifier: ^9.0.0-alpha.0
         version: link:../../../packages/svelte-table
@@ -2442,11 +2445,11 @@ importers:
         specifier: ^5.0.4
         version: 5.0.4
       svelte:
-        specifier: ^4.2.15
-        version: 4.2.15
+        specifier: 5.0.0-next.153
+        version: 5.0.0-next.153
       svelte-check:
         specifier: ^3.7.0
-        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -2754,19 +2757,25 @@ importers:
 
   packages/svelte-table:
     dependencies:
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^3.0.2
+        version: 3.1.0(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       '@tanstack/table-core':
         specifier: workspace:*
         version: link:../table-core
+      svelte:
+        specifier: ^5.0.0-next
+        version: 5.0.0-next.78
+      svelte-check:
+        specifier: ^3.6.8
+        version: 3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.78)
+      svelte-eslint-parser:
+        specifier: ^0.33.1
+        version: 0.33.1(svelte@5.0.0-next.78)
     devDependencies:
       '@sveltejs/package':
         specifier: ^2.3.1
-        version: 2.3.1(svelte@3.59.2)(typescript@5.4.5)
-      '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.0
-        version: 3.1.0(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
-      svelte:
-        specifier: ^3.59.2
-        version: 3.59.2
+        version: 2.3.1(svelte@5.0.0-next.78)(typescript@5.4.5)
 
   packages/table-core: {}
 
@@ -5203,6 +5212,16 @@ packages:
     peerDependencies:
       acorn: ^8
 
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn-walk@8.3.2:
     resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
     engines: {node: '>=0.4.0'}
@@ -5627,9 +5646,6 @@ packages:
   code-block-writer@12.0.0:
     resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -5794,10 +5810,6 @@ packages:
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -6115,11 +6127,29 @@ packages:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esm-env@1.0.0:
+    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -6419,6 +6449,7 @@ packages:
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   global-modules@1.0.0:
     resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
@@ -7164,9 +7195,6 @@ packages:
     resolution: {integrity: sha512-TzQSV2DiMYgoF5RycneKVUzIa9bQsj/B3tTgsE3dOGqlzHnGIDaC7XBE7grnA+8kZPnfqSGFe95VHc2oc0VFUQ==}
     engines: {node: '>=4'}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -7721,9 +7749,6 @@ packages:
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -7799,6 +7824,12 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
   postcss-selector-parser@6.0.16:
     resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
     engines: {node: '>=4'}
@@ -8619,6 +8650,15 @@ packages:
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
 
+  svelte-eslint-parser@0.33.1:
+    resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      svelte: ^3.37.0 || ^4.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+
   svelte-hmr@0.16.0:
     resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -8662,19 +8702,19 @@ packages:
       typescript:
         optional: true
 
-  svelte2tsx@0.7.8:
-    resolution: {integrity: sha512-ABK3RDFcy59AqAiU1N5Kxu1RnKrb1GDMrQjLgNgJfE8Q+coCKpjCAPtUVKQM2HnmuqeNWcT3NqfXbE+ZmN5Pow==}
+  svelte2tsx@0.7.9:
+    resolution: {integrity: sha512-Rm+0LAwg9wT4H2IsR8EaM9EWErTzi9LmuZKxkH5b1ua94XjQmwHstBP4VabLgA9AE6XmwBg+xK7Cjzwfm6ustQ==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@3.59.2:
-    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
-    engines: {node: '>= 8'}
+  svelte@5.0.0-next.153:
+    resolution: {integrity: sha512-ZbRnvO0UWXhE71Va5Rjg+nY4tbCUnqJFQC0VXHdqkHT/i5nqW8DPtw0rBlsFg4mq2uDQ8iOO/P7tR3OVXaSI7g==}
+    engines: {node: '>=18'}
 
-  svelte@4.2.15:
-    resolution: {integrity: sha512-j9KJSccHgLeRERPlhMKrCXpk2TqL2m5Z+k+OBTQhZOhIdCCd3WfqV+ylPWeipEwq17P/ekiSFWwrVQv93i3bsg==}
-    engines: {node: '>=16'}
+  svelte@5.0.0-next.78:
+    resolution: {integrity: sha512-wS/FWyyqWX9iazm/ZfTDqtarpHEap4Jodj0dDeErvvvjBKC1Jt3HTQQ7pUnyJYzSCtBVz2x9OTrLgoJf8nUWHQ==}
+    engines: {node: '>=18'}
 
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
@@ -9392,6 +9432,9 @@ packages:
   zeptomatch@1.2.2:
     resolution: {integrity: sha512-0ETdzEO0hdYmT8aXHHf5aMjpX+FHFE61sG4qKFAoJD2Umt3TWdCmH7ADxn2oUiWTlqBGC+SGr8sYMfr+37J8pQ==}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
   zod-validation-error@3.0.3:
     resolution: {integrity: sha512-cETTrcMq3Ze58vhdR0zD37uJm/694I6mAxcf/ei5bl89cC++fBNxrC2z8lkFze/8hVMPwrbtrwXHR2LB50fpHw==}
     engines: {node: '>=18.0.0'}
@@ -12032,58 +12075,58 @@ snapshots:
     dependencies:
       solid-js: 1.8.17
 
-  '@sveltejs/package@2.3.1(svelte@3.59.2)(typescript@5.4.5)':
+  '@sveltejs/package@2.3.1(svelte@5.0.0-next.78)(typescript@5.4.5)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.2
-      svelte: 3.59.2
-      svelte2tsx: 0.7.8(svelte@3.59.2)(typescript@5.4.5)
+      svelte: 5.0.0-next.78
+      svelte2tsx: 0.7.9(svelte@5.0.0-next.78)(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       debug: 4.3.4
-      svelte: 3.59.2
+      svelte: 5.0.0-next.153
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       debug: 4.3.4
-      svelte: 4.2.15
+      svelte: 5.0.0-next.78
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.0(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@3.59.2)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@5.0.0-next.153)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.10
-      svelte: 3.59.2
-      svelte-hmr: 0.16.0(svelte@3.59.2)
+      svelte: 5.0.0-next.153
+      svelte-hmr: 0.16.0(svelte@5.0.0-next.153)
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)
       vitefu: 0.2.5(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@4.2.15)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)))(svelte@5.0.0-next.78)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.10
-      svelte: 4.2.15
-      svelte-hmr: 0.16.0(svelte@4.2.15)
+      svelte: 5.0.0-next.78
+      svelte-hmr: 0.16.0(svelte@5.0.0-next.78)
       vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2)
       vitefu: 0.2.5(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.77.1)(terser@5.29.2))
     transitivePeerDependencies:
@@ -12675,6 +12718,14 @@ snapshots:
     dependencies:
       acorn: 8.11.3
 
+  acorn-jsx@5.3.2(acorn@8.11.3):
+    dependencies:
+      acorn: 8.11.3
+
+  acorn-typescript@1.4.13(acorn@8.11.3):
+    dependencies:
+      acorn: 8.11.3
+
   acorn-walk@8.3.2: {}
 
   acorn@8.11.3: {}
@@ -13142,14 +13193,6 @@ snapshots:
 
   code-block-writer@12.0.0: {}
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@types/estree': 1.0.5
-      acorn: 8.11.3
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -13335,11 +13378,6 @@ snapshots:
       domutils: 3.1.0
       nth-check: 2.1.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.0
-
   css-what@6.1.0: {}
 
   css.escape@1.5.1: {}
@@ -13674,8 +13712,28 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  esm-env@1.0.0: {}
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
+      eslint-visitor-keys: 3.4.3
+
   esprima@4.0.1: {}
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@types/estree': 1.0.5
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -14834,8 +14892,6 @@ snapshots:
 
   map-obj@2.0.0: {}
 
-  mdn-data@2.0.30: {}
-
   media-typer@0.3.0: {}
 
   memfs@3.5.3:
@@ -15431,12 +15487,6 @@ snapshots:
 
   pathval@1.1.1: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.0.0: {}
 
   picocolors@1.0.1: {}
@@ -15505,6 +15555,10 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.4.38)
       postcss: 8.4.38
 
+  postcss-scss@4.0.9(postcss@8.4.38):
+    dependencies:
+      postcss: 8.4.38
+
   postcss-selector-parser@6.0.16:
     dependencies:
       cssesc: 3.0.0
@@ -15524,10 +15578,10 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
-  prettier-plugin-svelte@3.2.3(prettier@4.0.0-alpha.8)(svelte@4.2.15):
+  prettier-plugin-svelte@3.2.3(prettier@4.0.0-alpha.8)(svelte@5.0.0-next.153):
     dependencies:
       prettier: 4.0.0-alpha.8
-      svelte: 4.2.15
+      svelte: 5.0.0-next.153
 
   prettier@4.0.0-alpha.8:
     dependencies:
@@ -16399,7 +16453,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15):
+  svelte-check@3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
@@ -16407,8 +16461,8 @@ snapshots:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 4.2.15
-      svelte-preprocess: 5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)(typescript@5.4.5)
+      svelte: 5.0.0-next.153
+      svelte-preprocess: 5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -16421,22 +16475,54 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-hmr@0.16.0(svelte@3.59.2):
+  svelte-check@3.7.0(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.78):
     dependencies:
-      svelte: 3.59.2
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 3.6.0
+      fast-glob: 3.3.2
+      import-fresh: 3.3.0
+      picocolors: 1.0.0
+      sade: 1.8.1
+      svelte: 5.0.0-next.78
+      svelte-preprocess: 5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.78)(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
 
-  svelte-hmr@0.16.0(svelte@4.2.15):
+  svelte-eslint-parser@0.33.1(svelte@5.0.0-next.78):
     dependencies:
-      svelte: 4.2.15
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      postcss: 8.4.38
+      postcss-scss: 4.0.9(postcss@8.4.38)
+    optionalDependencies:
+      svelte: 5.0.0-next.78
 
-  svelte-preprocess@5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@4.2.15)(typescript@5.4.5):
+  svelte-hmr@0.16.0(svelte@5.0.0-next.153):
+    dependencies:
+      svelte: 5.0.0-next.153
+
+  svelte-hmr@0.16.0(svelte@5.0.0-next.78):
+    dependencies:
+      svelte: 5.0.0-next.78
+
+  svelte-preprocess@5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.153)(typescript@5.4.5):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.10
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.15
+      svelte: 5.0.0-next.153
     optionalDependencies:
       '@babel/core': 7.24.4
       less: 4.2.0
@@ -16444,31 +16530,59 @@ snapshots:
       sass: 1.77.1
       typescript: 5.4.5
 
-  svelte2tsx@0.7.8(svelte@3.59.2)(typescript@5.4.5):
+  svelte-preprocess@5.1.3(@babel/core@7.24.4)(less@4.2.0)(postcss@8.4.38)(sass@1.77.1)(svelte@5.0.0-next.78)(typescript@5.4.5):
+    dependencies:
+      '@types/pug': 2.0.10
+      detect-indent: 6.1.0
+      magic-string: 0.30.10
+      sorcery: 0.11.0
+      strip-indent: 3.0.0
+      svelte: 5.0.0-next.78
+    optionalDependencies:
+      '@babel/core': 7.24.4
+      less: 4.2.0
+      postcss: 8.4.38
+      sass: 1.77.1
+      typescript: 5.4.5
+
+  svelte2tsx@0.7.9(svelte@5.0.0-next.78)(typescript@5.4.5):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 3.59.2
+      svelte: 5.0.0-next.78
       typescript: 5.4.5
 
-  svelte@3.59.2: {}
+  svelte@5.0.0-next.153:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@types/estree': 1.0.5
+      acorn: 8.11.3
+      acorn-typescript: 1.4.13(acorn@8.11.3)
+      aria-query: 5.3.0
+      axobject-query: 4.0.0
+      esm-env: 1.0.0
+      esrap: 1.2.2
+      is-reference: 3.0.2
+      locate-character: 3.0.0
+      magic-string: 0.30.10
+      zimmerframe: 1.1.2
 
-  svelte@4.2.15:
+  svelte@5.0.0-next.78:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.5
       acorn: 8.11.3
+      acorn-typescript: 1.4.13(acorn@8.11.3)
       aria-query: 5.3.0
       axobject-query: 4.0.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
       magic-string: 0.30.10
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
   svg-tags@1.0.0: {}
 
@@ -17187,6 +17301,8 @@ snapshots:
     dependencies:
       grammex: 3.1.3
 
+  zimmerframe@1.1.2: {}
+
   zod-validation-error@3.0.3(zod@3.22.4):
     dependencies:
       zod: 3.22.4