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/packages/render-graph.md

@@ -0,0 +1,78 @@
+# Render graph frontends
+
+Every frontend ends at `@yawn/render-graph-ast`. Choose the authoring style that fits your tooling; the worker receives the same S-expression either way.
+
+## Plain-object authoring
+
+`graphFromObject` validates and freezes ordinary JavaScript data. Pipeline declarations, compute dispatches, nodes, and DAG references all become canonical AST fields.
+
+```js
+import { graphFromObject } from "@yawn/render-graph-js";
+
+const graph = graphFromObject({
+  id: "main",
+  revision: 1,
+  pipelines: { render: [scenePipeline], compute: [preparePipeline] },
+  nodes: [
+    {
+      id: "mesh",
+      state: "enabled",
+      executor: { key: "mesh", version: 2 },
+      parameters: {},
+      inputs: {},
+    },
+  ],
+});
+```
+
+<Playground
+  id="jso-graph"
+  title="A complete JSO graph"
+  description="The playground compiles a plain object through AST serialization and activates the returned loadout."
+/>
+
+## Fluent authoring
+
+Use `RenderGraph` when a small mutable builder makes generated graphs easier to read. Calling `ast()` is the immutable boundary.
+
+```js
+import { RenderGraph, ref } from "@yawn/render-graph-js";
+
+const graph = new RenderGraph("generated", 1)
+  .renderPipeline(scenePipeline)
+  .node("source", "mesh", { version: 2 })
+  .node("draw", "scene", {
+    version: 2,
+    inputs: { mesh: [ref("source", "mesh")] },
+  });
+
+const compiled = await graph.load(core);
+```
+
+## FXNode export
+
+`@yawn/render-graph-fxnode` translates editor snapshots into the same AST. It owns editor catalog versions and diagnostic mapping; no FXNode shape crosses into core.
+
+```js
+import { adaptFxNodeSnapshot } from "@yawn/render-graph-fxnode";
+
+const ast = adaptFxNodeSnapshot(snapshot, revision, {
+  pipelines: myPipelines,
+});
+```
+
+Open the <a href="/render-graph-studio/">Render Graph Studio</a> to edit an FXNode graph, compile it beside the JSO preset, and switch prepared loadouts.
+
+## DAG references
+
+A reference is data, not a nested expression. Point several consumers at one output to represent fan-out without repeating the source node.
+
+```js
+import { reference } from "@yawn/render-graph-ast";
+
+const shared = reference("sceneColor", "texture");
+left.inputs.color = [shared];
+right.inputs.color = [shared];
+```
+
+The serializer emits `(ref "sceneColor" "texture")` wherever that edge is consumed.