From a81ab4e4d24e07e687d5bd6ca969ee3e1e56e1bc Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Tue, 29 Oct 2024 11:03:56 +0100
Subject: [PATCH 1/2] docs: intro sandpack

---
 .../{introduction.md => introduction.mdx}     | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)
 rename docs/getting-started/{introduction.md => introduction.mdx} (85%)

diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.mdx
similarity index 85%
rename from docs/getting-started/introduction.md
rename to docs/getting-started/introduction.mdx
index dcab5a24..6242c721 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.mdx
@@ -13,14 +13,25 @@ npm install three @react-three/fiber @react-three/xr@latest
 | A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing. | ![recording of interacting with the code below](./basic-example.gif) |
 |-|-|
 
-```tsx
-import { Canvas } from '@react-three/fiber'
+<Sandpack
+  template="react-ts"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest',
+      '@react-three/drei': 'latest',
+      '@react-three/xr': 'latest'
+    },
+  }}
+  files={{
+    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
+    '/App.tsx': `import { Canvas } from '@react-three/fiber'
 import { XR, createXRStore } from '@react-three/xr'
 import { useState } from 'react'
 
 const store = createXRStore()
 
-export function App() {
+export default function App() {
   const [red, setRed] = useState(false)
   return <>
     <button onClick={() => store.enterAR()}>Enter AR</button>
@@ -34,7 +45,9 @@ export function App() {
     </Canvas>
   </>
 }
-```
+    `,
+  }}
+/>
 
 ### Turn any @react-three/fiber app into an XR experience
 

From 65075f73630f454e63e27bcf1cc23df2da9fa484 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Thu, 31 Oct 2024 22:21:42 +0100
Subject: [PATCH 2/2] folder

---
 .../introduction-basic-sandpack/App.tsx       | 23 ++++++++++++
 .../introduction-basic-sandpack/package.json  |  7 ++++
 .../introduction-basic-sandpack/styles.css    |  6 +++
 docs/getting-started/introduction.mdx         | 37 ++++---------------
 4 files changed, 43 insertions(+), 30 deletions(-)
 create mode 100644 docs/getting-started/introduction-basic-sandpack/App.tsx
 create mode 100644 docs/getting-started/introduction-basic-sandpack/package.json
 create mode 100644 docs/getting-started/introduction-basic-sandpack/styles.css

diff --git a/docs/getting-started/introduction-basic-sandpack/App.tsx b/docs/getting-started/introduction-basic-sandpack/App.tsx
new file mode 100644
index 00000000..00505a2c
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/App.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { XR, createXRStore } from '@react-three/xr'
+
+const store = createXRStore()
+
+export default function App() {
+  const [red, setRed] = useState(false)
+  return (
+    <>
+      <button onClick={() => store.enterAR()}>Enter AR</button>
+      <Canvas>
+        <XR store={store}>
+          <mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
+            <boxGeometry />
+            <meshBasicMaterial color={red ? 'red' : 'blue'} />
+          </mesh>
+        </XR>
+      </Canvas>
+    </>
+  )
+}
diff --git a/docs/getting-started/introduction-basic-sandpack/package.json b/docs/getting-started/introduction-basic-sandpack/package.json
new file mode 100644
index 00000000..58d283ae
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "three": "latest",
+    "@react-three/fiber": "latest",
+    "@react-three/xr": "latest"
+  }
+}
diff --git a/docs/getting-started/introduction-basic-sandpack/styles.css b/docs/getting-started/introduction-basic-sandpack/styles.css
new file mode 100644
index 00000000..cc4a8790
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/styles.css
@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: unset;
+}
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
index 6242c721..b21579f3 100644
--- a/docs/getting-started/introduction.mdx
+++ b/docs/getting-started/introduction.mdx
@@ -15,37 +15,14 @@ npm install three @react-three/fiber @react-three/xr@latest
 
 <Sandpack
   template="react-ts"
-  customSetup={{
-    dependencies: {
-      'three': 'latest',
-      '@react-three/fiber': 'latest',
-      '@react-three/drei': 'latest',
-      '@react-three/xr': 'latest'
-    },
-  }}
+  folder="introduction-basic-sandpack"
   files={{
-    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
-    '/App.tsx': `import { Canvas } from '@react-three/fiber'
-import { XR, createXRStore } from '@react-three/xr'
-import { useState } from 'react'
-
-const store = createXRStore()
-
-export default function App() {
-  const [red, setRed] = useState(false)
-  return <>
-    <button onClick={() => store.enterAR()}>Enter AR</button>
-    <Canvas>
-      <XR store={store}>
-        <mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
-          <boxGeometry />
-          <meshBasicMaterial color={red ? 'red' : 'blue'} />
-        </mesh>
-      </XR>
-    </Canvas>
-  </>
-}
-    `,
+    '/App.tsx': {
+      active: true,
+    },
+    '/styles.css': {
+      readOnly: true
+    }
   }}
 />