Add tutorial docs and interactive playgrounds

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

docs/recipes/pipelines.md

@@ -0,0 +1,101 @@
+# Pipeline and loadout recipes
+
+WGSL belongs to a graph package or your application. Core contains no scene program.
+
+## 05 — Attach the default pipelines
+
+The optional package exports plain declarations, so copy only the programs your graph uses.
+
+```js
+import { defaultPipelines } from "@yawn/default-pipelines";
+import { RenderGraph } from "@yawn/render-graph-js";
+
+const graph = new RenderGraph("default_programs", 1);
+for (const pipeline of defaultPipelines.render) {
+  graph.renderPipeline(pipeline);
+}
+for (const pipeline of defaultPipelines.compute) {
+  graph.computePipeline(pipeline);
+}
+const ast = graph.ast();
+```
+
+## 06 — Supply a custom render pipeline
+
+Put source and entry points in the graph declaration. The shader must honor the scene ABI expected by the executor that uses it.
+
+```js
+const shader = /* wgsl */ `
+@group(1) @binding(0) var<uniform> view_projection: mat4x4<f32>;
+struct Input {
+  @location(0) position: vec3<f32>,
+  @location(3) model_0: vec4<f32>,
+  @location(4) model_1: vec4<f32>,
+  @location(5) model_2: vec4<f32>,
+  @location(6) model_3: vec4<f32>,
+}
+@vertex fn vertex_main(input: Input) -> @builtin(position) vec4<f32> {
+  let model = mat4x4<f32>(
+    input.model_0,
+    input.model_1,
+    input.model_2,
+    input.model_3,
+  );
+  return view_projection * model * vec4(input.position, 1.0);
+}
+@fragment fn fragment_main() -> @location(0) vec4<f32> {
+  return vec4(0.2, 0.7, 1.0, 1.0);
+}`;
+
+const ast = new RenderGraph("custom_render_program", 1)
+  .renderPipeline({
+    name: "scene",
+    shader,
+    vertexEntry: "vertex_main",
+    fragmentEntry: "fragment_main",
+    doubleSided: false,
+  })
+  .ast();
+```
+
+## 07 — Supply a compute pipeline
+
+Dispatch dimensions are graph data and are allocated with the rest of the loadout.
+
+```js
+const shader = /* wgsl */ `
+@compute @workgroup_size(8, 1, 1)
+fn initialize() {}
+`;
+
+const ast = new RenderGraph("compute_program", 1)
+  .computePipeline({
+    name: "initialize",
+    shader,
+    entry: "initialize",
+    dispatch: [4, 1, 1],
+  })
+  .ast();
+```
+
+## 08 — Compile and switch
+
+Compile first, then activate the prepared ID. Drop a candidate when your surrounding transaction fails.
+
+```js
+import { loadGraph } from "@yawn/render-graph-js";
+
+const compiled = await loadGraph(core, graph);
+try {
+  await core.switchCompiledGraph(compiled.compiledId);
+} catch (error) {
+  await core.dropCompiledGraph(compiled.compiledId).catch(() => {});
+  throw error;
+}
+```
+
+<Playground
+  id="jso-graph"
+  title="Compile and activate a pipeline loadout"
+  description="The full preset contains external render/compute declarations and a transient resource graph."
+/>