Finish slicing box and UI

app/providers/map-scene-provider.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  useState,
-} from "react";
-
-import { MapScene } from "../three/MapScene";
-
-// Declare MapScene context
-export type MapSceneContextType = {
-  mapScene: MapScene | null;
-  setMapScene: Dispatch<SetStateAction<MapScene | null>>;
-};
-
-// Context for MapScene
-export const MapSceneContext = createContext<MapSceneContextType | null>(null);
-
-// Context provider for MapScene
-export const MapSceneProvider = ({ children }: { children: ReactNode }) => {
-  const [mapScene, setMapScene] = useState<MapScene | null>(null);
-
-  return (
-    <MapSceneContext.Provider
-      value={{
-        mapScene: mapScene,
-        setMapScene: setMapScene,
-      }}
-    >
-      {children}
-    </MapSceneContext.Provider>
-  );
-};

app/providers/scene-view-provider.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from "react";
+
+import { SceneView } from "../three/SceneView";
+
+// Declare SceneView context
+export type SceneViewContextType = {
+  sceneView: SceneView | null;
+  setSceneView: Dispatch<SetStateAction<SceneView | null>>;
+};
+
+// Context for SceneView
+export const SceneViewContext = createContext<SceneViewContextType | null>(
+  null
+);
+
+// Context provider for SceneView
+export const SceneViewProvider = ({ children }: { children: ReactNode }) => {
+  const [sceneView, setSceneView] = useState<SceneView | null>(null);
+
+  return (
+    <SceneViewContext.Provider
+      value={{
+        sceneView: sceneView,
+        setSceneView: setSceneView,
+      }}
+    >
+      {children}
+    </SceneViewContext.Provider>
+  );
+};