packages/example/src/main.tsx

@@ -1,10 +1,14 @@
 import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { Layer } from "effect"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import "./index.css"
-import { routeTree } from './routeTree.gen'
+import { Reffuse } from "./reffuse"
+import { routeTree } from "./routeTree.gen"
 
 
+const layer = Layer.empty
+
 const router = createRouter({ routeTree })
 
 declare module "@tanstack/react-router" {
@@ -13,8 +17,11 @@ declare module "@tanstack/react-router" {
     }
 }
 
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <RouterProvider router={router} />
+        <Reffuse.Provider layer={layer}>
+            <RouterProvider router={router} />
+        </Reffuse.Provider>
     </StrictMode>
 )

packages/example/src/routes/__root.tsx

@@ -1,8 +1,5 @@
-import { Reffuse } from "@/reffuse"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
-import { Layer } from "effect"
-import { useMemo } from "react"
 
 
 export const Route = createRootRoute({
@@ -10,18 +7,14 @@ export const Route = createRootRoute({
 })
 
 function Root() {
-    const layer = useMemo(() => Layer.empty, [])
+    return <>
+        <div className="container flex-row gap-2 justify-center items-center mx-auto mb-4">
+            <Link to="/">Index</Link>
+            <Link to="/time">Time</Link>
+            <Link to="/count">Count</Link>
+        </div>
 
-    return (
+        <Outlet />
-        <Reffuse.Provider layer={layer}>
+        <TanStackRouterDevtools />
-            <div className="container flex-row gap-2 justify-center items-center mx-auto mb-4">
+    </>
-                <Link to="/">Index</Link>
-                <Link to="/time">Time</Link>
-                <Link to="/count">Count</Link>
-            </div>
-
-            <Outlet />
-            <TanStackRouterDevtools />
-        </Reffuse.Provider>
-    )
 }