chore: move some more components to svelte 5

app/src/lib/grid/Cell.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
 
   let index = -1;
   let wrapper: HTMLDivElement;
@@ -9,7 +8,7 @@
     index = getContext<() => number>("registerCell")();
   }
 
-  const sizes = getContext<Writable<string[]>>("sizes");
+  const sizes = getContext<string[]>("sizes");
 
   let downSizes: string[] = [];
   let downWidth = 0;
@@ -17,7 +16,7 @@
   let startX = 0;
 
   function handleMouseDown(event: MouseEvent) {
-    downSizes = [...$sizes];
+    downSizes = [...sizes];
     mouseDown = true;
     startX = event.clientX;
     downWidth = wrapper.getBoundingClientRect().width;
@@ -26,8 +25,7 @@
   function handleMouseMove(event: MouseEvent) {
     if (mouseDown) {
       const width = downWidth + startX - event.clientX;
-      $sizes[index] = `${width}px`;
-      $sizes = $sizes;
+      sizes[index] = `${width}px`;
     }
   }
 </script>

app/src/lib/grid/Row.svelte

@@ -1,27 +1,33 @@
 <script lang="ts">
   import { setContext, getContext } from "svelte";
-  import localStore from "$lib/helpers/localStore";
+  import { localState } from "$lib/helpers/localState.svelte";
 
   const gridId = getContext<string>("grid-id") || "grid-0";
-  let sizes = localStore<string[]>(gridId, []);
+  let sizes = localState<string[]>(gridId, []);
+
+  const { children } = $props();
+
+  console.log("RowChildren", children);
 
   let registerIndex = 0;
   setContext("registerCell", function () {
     let index = registerIndex;
     registerIndex++;
-    if (registerIndex > $sizes.length) {
-      $sizes = [...$sizes, "1fr"];
+    if (registerIndex > sizes.length) {
+      sizes = [...sizes, "1fr"];
     }
     return index;
   });
 
   setContext("sizes", sizes);
 
-  $: cols = $sizes.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" ");
+  const cols = $derived(
+    sizes.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" "),
+  );
 </script>
 
 <div class="wrapper" style={`grid-template-columns: ${cols};`}>
-  <slot />
+  {@render children()}
 </div>
 
 <style>