Fix R3F hooks used outside the Canvas

Move useTexture calls in the tile, token, and card viewers into child
components rendered inside the Canvas. R3F hooks must run within the
Canvas store, so calling them at the viewer's top level threw a runtime
error.

apps/web/src/components/viewers/CardViewer.tsx

@@ -12,19 +12,26 @@ export default function CardViewer({ object }: { object: TTSObject }) {
   const deck = object.CustomDeck ? Object.values(object.CustomDeck)[0] : undefined;
   const faceUrl = deck?.FaceURL;
   const backUrl = deck?.BackURL;
-  const face = faceUrl ? useTexture(assetUrl(faceUrl)) : null;
-  const back = backUrl ? useTexture(assetUrl(backUrl)) : null;
 
   return (
     <Scene>
-      <mesh>
-        <boxGeometry args={[1.4, 2, 0.06]} />
-        <meshStandardMaterial
-          color={face || back ? '#ffffff' : '#52525b'}
-          map={face ?? back ?? undefined}
-          roughness={0.6}
-        />
-      </mesh>
+      <CardMesh faceUrl={faceUrl} backUrl={backUrl} />
     </Scene>
   );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function CardMesh({ faceUrl, backUrl }: { faceUrl?: string; backUrl?: string }) {
+  const face = faceUrl ? useTexture(assetUrl(faceUrl)) : null;
+  const back = backUrl ? useTexture(assetUrl(backUrl)) : null;
+  return (
+    <mesh>
+      <boxGeometry args={[1.4, 2, 0.06]} />
+      <meshStandardMaterial
+        color={face || back ? '#ffffff' : '#52525b'}
+        map={face ?? back ?? undefined}
+        roughness={0.6}
+      />
+    </mesh>
+  );
 }