Add interactive tutorial playgrounds

Embed editable split-view examples throughout the guide, restore the full LFS-backed Sponza demo, batch glTF hydration, honor hierarchical transforms, and report transformed BVH picks with a live FPS counter.

Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

docs/guide/cameras.md

@@ -73,3 +73,9 @@ follow.start();
 ```
 
 The input and follow loops never post camera updates to core: they read and mutate the same camera, position, and quaternion rows that any other worker can use.
+
+<Playground example="cameras" />
+
+<script setup>
+import Playground from "../.vitepress/Playground.vue";
+</script>

docs/guide/core.md

@@ -42,3 +42,9 @@ values.row(id).set([1, 2, 3, 4]);
 Graph frontends serialize plain data to `(yawn-graph 1 ...)`. Named `after` edges preserve DAG fan-out; Rust sorts passes, detects cycles, culls unused declarations, plans compatible transient lifetimes, and allocates the active loadout.
 
 The `Scene` addon is one such frontend. It is replaceable and has no privileged core API.
+
+<Playground example="core" />
+
+<script setup>
+import Playground from "../.vitepress/Playground.vue";
+</script>

docs/guide/importing-and-picking.md

@@ -7,7 +7,7 @@ The shared importer worker fetches and parses glTF/GLB, then the response hydrat
 ```ts
 import { importGltf } from "@yawn/handles";
 
-const meshes = await importGltf(scene, "/models/helmet.glb");
+const meshes = await importGltf(scene, "/models/sponza.glb");
 meshes[0].position[1] = 0.5;
 ```
 
@@ -33,3 +33,11 @@ If row allocations relocated since `Picking` was created, refresh its shared des
 ```ts
 await picking.refresh();
 ```
+
+The playground below imports the repository's full LFS-backed `sponza.glb` in the importer worker, hydrates all 138 primitives, frames them with an arc camera, and sends a real ray to the BVH worker. Click the preview to pick again.
+
+<Playground example="importing" />
+
+<script setup>
+import Playground from "../.vitepress/Playground.vue";
+</script>

docs/guide/scene-and-sab.md

@@ -18,6 +18,8 @@ canvas.addEventListener("pointermove", (event) => {
 
 The pointer handler sends no messages. The typed-array view points directly into the arena shared with the render worker. The camera helpers use this same pattern; see [Cameras and controls](/guide/cameras).
 
+<Playground example="sab" />
+
 ## Add an application-specific row
 
 ```ts
@@ -42,3 +44,7 @@ info[4] = 0; // resume rendering
 ```
 
 Use messages for rare control changes (`setFps`, graph updates, allocation); use SAB writes for existing hot state.
+
+<script setup>
+import Playground from "../.vitepress/Playground.vue";
+</script>