examples: move to react-datocms 8.x, and stop demoing a deprecated name

The one breaking change in 8.0.0 is that `@mux/mux-player-react` stopped being
a dependency of react-datocms and became an optional peer, so a consumer that
renders `<VideoPlayer />` now has to install it. This app does, in
`VideoExamples`, so it declares the player itself.

8.0.3 renamed `SRCImage` to `RSCImage` — the component only ever made sense in a
React Server Component, and the old name said "source". The alias is still
exported, so nothing here was broken; it is just the wrong thing for the SDK's
own examples app to be showing. The example directory, the component and the
two labels in the nav follow the new name. The `#native-image` anchor id does
not: it is a URL, and it was already unrelated to either name.

Claude-Session: https://claude.ai/code/session_01444im4mKBxoXucpSBdYP5W

Author: stefanoverna

examples/package-lock.json

@@ -8,8 +8,9 @@
   "type": "module",
   "dependencies": {
     "@datocms/cma-client-browser": "^6.1.0",
+    "@mux/mux-player-react": "^3.13.2",
     "react": "^19.2.3",
-    "react-datocms": "^7.2.4",
+    "react-datocms": "^8.1.1",
     "react-dom": "^19.2.3",
     "react-paginate": "^8.3.0"
   },

examples/package.json

@@ -1,6 +1,6 @@
 import ImageExamples from '../ImageExamples';
 import QuerySubscriptionExample from '../QuerySubscriptionExample';
-import SRCImageExamples from '../SRCImageExample';
+import RSCImageExamples from '../RSCImageExample';
 import SiteSearchExamples from '../SiteSearchExamples';
 import VideoExamples from '../VideoExamples';
 import './style.css';
@@ -9,16 +9,16 @@ export default function App() {
   return (
     <>
       <nav>
-        <a href="#native-image">SRCImage</a>
+        <a href="#native-image">RSCImage</a>
         <a href="#image">Image</a>
         <a href="#subscriptions">Query Subscription</a>
         <a href="#site-search">Site Search</a>
         <a href="#video">Video</a>
       </nav>
 
       <a id="native-image" />
-      <h1>SRCImage examples</h1>
-      <SRCImageExamples />
+      <h1>RSCImage examples</h1>
+      <RSCImageExamples />
 
       <a id="image" />
       <h1>Image examples</h1>

examples/src/App/index.jsx

@@ -1,4 +1,4 @@
-import { SRCImage } from 'react-datocms';
+import { RSCImage } from 'react-datocms';
 
 const data = {
   srcSet:
@@ -34,25 +34,25 @@ const dataWithAlpha = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAC4ElEQVR42n2UXXbTQAyFpbHTtCmhFNgsO2ANbBAeOCVpEzuJ4xGfNGM75YGe3Moez9yrv1H77fsP8T8VkwRUsjSWeQZaLGuqmlvAJruamlgqyEkkNxJ2BKa+222QSsveIJ8QIrEGzBpVe2TtgW9teGI28Nyb2RG5HHt5wANJ2YWcg20VbYu3YksEBXkNnnh+SmYf+LZBaEUEfmwggh7/DxDtsxiQExZyj1+WCEJgzMXbkp57CD9C/gl8rvaJVD3y7Y6Q2JYH0YjgFcd34E8F73bAmqfJBSKCu3F0IbTtAY+3yfIz1sm/gi/gGc+3Lo5NniIi6BDYm8kWwg24B+ucQdIDeTvNNVixSq6Jytw9hSEhskoejeQN2HoUpOiBZDeS7Uqh15bN5UZwBj04Qt7mTOlrihw1gihwR3pcpHViOqnDnnkfSNFIBETuxSIHPEYH+c8QMbmQ6RMCnSXpSg201iCPNzWwHu9/JY/EcoOAR9J6ZOoiFBqBEfojxG/48wb5Hr0dOaYOXpcp/xYirfd8IZe4A0QxQPoTm7Au4mkjrfkEuRfaD3SI7OiYFw3YCx7sSmsv6YkUlYtkU9+XC1ZEfke7mpU9ahfKtOaY93XP4R3HHHt82HOo9qbVG+VXxqQtvS1THWYLDgi+Qrxh7S7WNQQ4Jic2HqHrQM9ealX6Umt7Ts+tpfoWiiWKGAVh5Yx1sg40cFxjm6+reCteODJE35d5s7ipZaHNjc03ORQWPbcD/0/o4aUwNmaBC/A00aJ69a6JW1znUK4XLbpoTFKHXeG3yRac8ejorct3WlVW4UoRoNBygLj/v0BTHtK/5E5k5inYMyHGmu9VLMc80p70vkF4DeIbgWmiVgEteRctLVarX4Q8cXZG/Fy9b2KzKAKSC7FU4kmkCEx1aH3BR63WMR1fohUmNY388Rt8kk4vpjKnYxGa0nMz7KZciSz1De7wwua5/u5vvkh6c6n0/buUtb8z6leFffMsMwAAAABJRU5ErkJggg==',
 };
 
-export default function SRCImageExamples() {
+export default function RSCImageExamples() {
   return (
     <>
       <div
         className="example"
         data-title="Standard behaviour: scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports"
       >
-        <SRCImage data={data} />
+        <RSCImage data={data} />
       </div>
 
       <div className="example" data-title="Image with transparency">
-        <SRCImage data={dataWithAlpha} />
+        <RSCImage data={dataWithAlpha} />
       </div>
 
       <div
         className="example"
         data-title="Always take full width (scale up for larger viewports)"
       >
-        <SRCImage data={data} style={{ maxWidth: 'none' }} />
+        <RSCImage data={data} style={{ maxWidth: 'none' }} />
       </div>
 
       <div
@@ -62,7 +62,7 @@ export default function SRCImageExamples() {
         <div
           style={{ position: 'relative', maxWidth: 500, aspectRatio: '1 / 1' }}
         >
-          <SRCImage
+          <RSCImage
             data={data}
             style={{
               zIndex: -1,