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,11 +12,19 @@ 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>
+      <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
@@ -25,6 +33,5 @@ export default function CardViewer({ object }: { object: TTSObject }) {
         roughness={0.6}
       />
     </mesh>
-    </Scene>
   );
 }

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

@@ -9,11 +9,19 @@ import { assetUrl } from './assetUrl';
  */
 export default function TileViewer({ object }: { object: TTSObject }) {
   const url = object.CustomImage?.ImageURL ?? object.CustomImage?.ImageSecondaryURL;
-  const texture = url ? useTexture(assetUrl(url)) : null;
   const thickness = object.CustomImage?.CustomTile?.Thickness ?? 0.1;
 
   return (
     <Scene>
+      <TileMesh url={url} thickness={thickness} />
+    </Scene>
+  );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function TileMesh({ url, thickness }: { url?: string; thickness: number }) {
+  const texture = url ? useTexture(assetUrl(url)) : null;
+  return (
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <boxGeometry args={[1.6, 1.6, thickness]} />
       <meshStandardMaterial
@@ -22,6 +30,5 @@ export default function TileViewer({ object }: { object: TTSObject }) {
         roughness={0.8}
       />
     </mesh>
-    </Scene>
   );
 }

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

@@ -9,11 +9,19 @@ import { assetUrl } from './assetUrl';
  */
 export default function TokenViewer({ object }: { object: TTSObject }) {
   const url = object.CustomImage?.ImageURL ?? object.CustomImage?.ImageSecondaryURL;
-  const texture = url ? useTexture(assetUrl(url)) : null;
   const thickness = object.CustomImage?.CustomToken?.Thickness ?? 0.1;
 
   return (
     <Scene>
+      <TokenMesh url={url} thickness={thickness} />
+    </Scene>
+  );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function TokenMesh({ url, thickness }: { url?: string; thickness: number }) {
+  const texture = url ? useTexture(assetUrl(url)) : null;
+  return (
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <cylinderGeometry args={[0.9, 0.9, thickness, 48]} />
       <meshStandardMaterial
@@ -22,6 +30,5 @@ export default function TokenViewer({ object }: { object: TTSObject }) {
         roughness={0.8}
       />
     </mesh>
-    </Scene>
   );
 }