feat: update some more components to svelte 5

app/src/lib/grid/Cell.svelte

@@ -8,7 +8,7 @@
     index = getContext<() => number>("registerCell")();
   }
 
-  const sizes = getContext<string[]>("sizes");
+  const sizes = getContext<{ value: string[] }>("sizes");
 
   let downSizes: string[] = [];
   let downWidth = 0;
@@ -16,7 +16,7 @@
   let startX = 0;
 
   function handleMouseDown(event: MouseEvent) {
-    downSizes = [...sizes];
+    downSizes = [...sizes.value];
     mouseDown = true;
     startX = event.clientX;
     downWidth = wrapper.getBoundingClientRect().width;
@@ -25,7 +25,7 @@
   function handleMouseMove(event: MouseEvent) {
     if (mouseDown) {
       const width = downWidth + startX - event.clientX;
-      sizes[index] = `${width}px`;
+      sizes.value[index] = `${width}px`;
     }
   }
 </script>

app/src/lib/grid/Row.svelte

@@ -11,8 +11,8 @@
   setContext("registerCell", function () {
     let index = registerIndex;
     registerIndex++;
-    if (registerIndex > sizes.length) {
-      sizes = [...sizes, "1fr"];
+    if (registerIndex > sizes.value.length) {
+      sizes.value = [...sizes.value, "1fr"];
     }
     return index;
   });
@@ -20,7 +20,7 @@
   setContext("sizes", sizes);
 
   const cols = $derived(
-    sizes.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" "),
+    sizes.value.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" "),
   );
 </script>