incanto 0.51.0 → 0.53.0

package/editor/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Incanto Scene Editor</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' rx='3' fill='%236ee7dc'/><text x='8' y='12' text-anchor='middle' font-size='11' font-family='monospace' fill='%230e1018'>i</text></svg>" />
-    <script type="module" crossorigin src="./assets/index-CUc1U7wm.js"></script>
+    <script type="module" crossorigin src="./assets/index-CdbsY31G.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/GameServer-C56iOUgF.js">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "incanto",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "Vibe-coding-first web game engine SDK — JSON-driven scenes on three.js",
   "keywords": [
     "game-engine",

package/schemas/scene.schema.json

@@ -352,6 +352,9 @@
         {
           "$ref": "#/$defs/UiLanguageSelect"
         },
+        {
+          "$ref": "#/$defs/UiMuteToggle"
+        },
         {
           "$ref": "#/$defs/UiPanel"
         },
@@ -373,6 +376,9 @@
         {
           "$ref": "#/$defs/UiToggle"
         },
+        {
+          "$ref": "#/$defs/UiVolumeSlider"
+        },
         {
           "$ref": "#/$defs/VoxelGrid3D"
         },
@@ -6870,6 +6876,97 @@
       },
       "required": ["name", "type"]
     },
+    "UiMuteToggle": {
+      "type": "object",
+      "x-signals": ["dragStarted", "dragCancelled", "droppedOn", "dropped", "changed"],
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "uid": {
+          "type": "string"
+        },
+        "type": {
+          "const": "UiMuteToggle"
+        },
+        "groups": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "tags": {
+          "type": "object"
+        },
+        "props": {
+          "type": "object",
+          "properties": {
+            "anchor": {
+              "type": "string",
+              "enum": [
+                "topLeft",
+                "top",
+                "topRight",
+                "left",
+                "center",
+                "right",
+                "bottomLeft",
+                "bottom",
+                "bottomRight"
+              ],
+              "default": "topLeft"
+            },
+            "visible": {
+              "type": "boolean",
+              "default": true
+            },
+            "focusable": {
+              "type": "boolean",
+              "default": true
+            },
+            "draggable": {
+              "type": "boolean",
+              "default": false
+            },
+            "dropTarget": {
+              "type": "boolean",
+              "default": false
+            },
+            "label": {
+              "type": "string",
+              "default": ""
+            },
+            "value": {
+              "type": "boolean",
+              "default": false
+            }
+          },
+          "additionalProperties": false
+        },
+        "script": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object"
+            }
+          },
+          "required": ["name"]
+        },
+        "network": {
+          "type": "object"
+        },
+        "children": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/node"
+          }
+        }
+      },
+      "required": ["name", "type"]
+    },
     "UiPanel": {
       "type": "object",
       "x-signals": ["dragStarted", "dragCancelled", "droppedOn", "dropped"],
@@ -7580,6 +7677,122 @@
       },
       "required": ["name", "type"]
     },
+    "UiVolumeSlider": {
+      "type": "object",
+      "x-signals": ["dragStarted", "dragCancelled", "droppedOn", "dropped", "changed"],
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "uid": {
+          "type": "string"
+        },
+        "type": {
+          "const": "UiVolumeSlider"
+        },
+        "groups": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "tags": {
+          "type": "object"
+        },
+        "props": {
+          "type": "object",
+          "properties": {
+            "anchor": {
+              "type": "string",
+              "enum": [
+                "topLeft",
+                "top",
+                "topRight",
+                "left",
+                "center",
+                "right",
+                "bottomLeft",
+                "bottom",
+                "bottomRight"
+              ],
+              "default": "topLeft"
+            },
+            "visible": {
+              "type": "boolean",
+              "default": true
+            },
+            "focusable": {
+              "type": "boolean",
+              "default": true
+            },
+            "draggable": {
+              "type": "boolean",
+              "default": false
+            },
+            "dropTarget": {
+              "type": "boolean",
+              "default": false
+            },
+            "label": {
+              "type": "string",
+              "default": ""
+            },
+            "value": {
+              "type": "number",
+              "default": 0.5
+            },
+            "min": {
+              "type": "number",
+              "default": 0
+            },
+            "max": {
+              "type": "number",
+              "default": 1
+            },
+            "step": {
+              "type": "number",
+              "default": 0.01
+            },
+            "width": {
+              "type": "number",
+              "default": 180
+            },
+            "color": {
+              "type": "string",
+              "default": "#6ee7dc"
+            },
+            "bus": {
+              "type": "string",
+              "enum": ["master", "sfx", "music"],
+              "default": "master"
+            }
+          },
+          "additionalProperties": false
+        },
+        "script": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object"
+            }
+          },
+          "required": ["name"]
+        },
+        "network": {
+          "type": "object"
+        },
+        "children": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/node"
+          }
+        }
+      },
+      "required": ["name", "type"]
+    },
     "VoxelGrid3D": {
       "type": "object",
       "x-signals": ["blocksChanged"],

package/skills/incanto-assets.md

@@ -164,4 +164,7 @@ Two consequences worth knowing:
 
 A texture that 404s now shows up in `game.assetErrors()` alongside models, by the
 URL you wrote — so "why is my sprite invisible" is answerable without opening the
-network tab.
+network tab. In **2D** the same question is `renderer.assets.errors()`
+(`$ref`, url and reason per failed entry), and the scene EDITOR reads it: a
+failed asset is red in the explorer with the url in its tooltip and the
+consequence in its inspector.

package/skills/incanto-audio.md

@@ -33,7 +33,9 @@ Set `preset` to one of the names below and call `play()`. No files, no loading.
 ```
 
 ```ts
-const coin = scene.tree.root.getNode('Coin'); // an AudioPlayer
+import type { AudioPlayer } from 'incanto';
+// from a Behavior — `getNode` returns a `Node`, so name the type you asked for
+const coin = this.node.getNode('Coin') as AudioPlayer;
 coin.play();   // synthesizes + plays instantly; rapid calls OVERLAP (no cutoff)
 ```
 
@@ -145,8 +147,20 @@ presets are fire-and-forget one-shots: they do not emit `finished`.
 Browsers block audio before the first user gesture. `autoplay: true` (or any
 early `play()`) that gets blocked is marked pending; **`createGame2D` /
 `createGame3D` automatically retry every pending player AND resume the WebAudio
-SFX context on the first pointerdown/keydown** — you don't wire anything. A
-blocked play is not an error; it just waits for the gesture.
+SFX context on the first gesture anywhere on the page** — you don't wire
+anything, and a tap on the on-screen touch controls counts (they sit above the
+canvas, not on it). A blocked play is not an error; it just waits.
+
+**A file the browser CANNOT play is a different thing, and it says so.** A 404 or
+an undecodable clip used to be filed as "waiting for a gesture" too, so it
+retried forever in silence — and a quiet game looks exactly like a game with no
+sound in it. Now it lands in the engine log and in
+**`game.assetErrors()`** (which 2D games can also ask now), beside the textures
+and models that 404'd:
+
+```
+[incanto] AudioPlayer 'Boom' could not load '/audio/explosion.mp3' — it is silent.
+```
 
 ### Music: loop a `src` clip on the music bus
 
@@ -227,7 +241,26 @@ the node declares (default `sfx`); music-ish loops typically set `bus: "music"`.
 Changes apply to currently-playing `src` clips on the next frame and to every new
 sound immediately.
 
-A settings slider just writes these numbers — no per-node bookkeeping.
+A settings slider just writes these numbers — no per-node bookkeeping. And
+**the slider is a node**, so an audio menu is scene JSON like everything else:
+
+```json
+{ "name": "Options", "type": "UiPanel", "props": { "anchor": "center" }, "children": [
+  { "name": "Music", "type": "UiVolumeSlider", "props": { "bus": "music" } },
+  { "name": "Sound", "type": "UiVolumeSlider", "props": { "bus": "sfx" } },
+  { "name": "Mute",  "type": "UiMuteToggle" }
+] }
+```
+
+| node | prop | writes |
+|---|---|---|
+| `UiVolumeSlider` | `bus`: `master` (default) / `sfx` / `music` | `engine.audio[bus]` |
+| `UiMuteToggle` | — | `engine.audio.muted` (checked = silent) |
+
+No behavior, no `connections`, nothing to save: the buses persist themselves
+(below), and each control follows a change made anywhere else, so two menus can
+never disagree. Left unlabelled a slider names its own bus (`Volume` / `Sound` /
+`Music`, translated when the scene declares `settings.volume.*`).
 
 ---
 
@@ -312,15 +345,44 @@ clean fit; the looping-`src` `AudioPlayer` (§2) stays the right tool for a *fix
 background loop authored in scene JSON. Wire `crossfadeTo` from gameplay:
 
 ```ts
-// e.g. in a behavior when the boss spawns:
-this.tree.engine.music.crossfadeTo('incanto/assets/audio/boss.mp3', 3);
+// e.g. in a behavior when the boss spawns (`this.engine` is the accessor a
+// Behavior has — there is no `this.tree`):
+this.engine.music.crossfadeTo('/audio/boss.mp3', 3);
 ```
 
-> Large music files are NOT bundled — reference them by URL (see §4). Headless:
-> the manager's state machine still runs (`current` updates) but plays nothing.
+> Large music files are NOT bundled — reference them by URL (see §4).
+
+**Headless the state machine still runs and `current` still updates** — nothing
+plays, but the question a test has is answerable:
+
+```ts
+session.engine.music.crossfadeTo('/audio/boss.wav', 2);
+session.step(100);
+session.engine.music.current;            // '/audio/boss.wav'
+session.engine.audio.countOf('/audio/boss.wav');  // 1
+```
 
 ---
 
+## Sound stops when the thing making it goes away
+
+Teardown is SILENCE, and you do not wire it:
+
+- **A freed node stops its clip.** Swap to level 2 and level 1's looping
+  background `AudioPlayer` stops with it — it used to play on over the new level
+  forever, with its node freed and no handle left to stop it. Being *moved* is
+  not this: a reparented node keeps playing, because reparenting is not
+  destroying.
+- **`game.dispose()` stops the music and every continuous voice**, and hands the
+  AudioContexts back. An SPA that mounts the game a few times would otherwise
+  run out of them (browsers allow only a handful per page).
+
+So the one thing you still own is a voice you want to outlive a node — and the
+one thing you must NOT rely on is a sound stopping itself because the scene
+changed under it. `engine.music` deliberately survives a scene swap (it belongs
+to the engine, not the scene): call `engine.music.stop(1)` or `crossfadeTo` when
+the music should change.
+
 ## Decision guide
 
 - **Need a quick game sound (coin/jump/hit/explosion/…)** → set `preset`. Done.
@@ -332,8 +394,33 @@ this.tree.engine.music.crossfadeTo('incanto/assets/audio/boss.mp3', 3);
 - **3D sound that pans + fades with distance** → `spatial:true` on an
   `AudioPlayer` in a 3D scene (§2b); listener = the active `Camera3D`.
 - **Global volume / mute / settings** → `engine.audio.master/sfx/music/muted`.
-- **Verifying headlessly** → audio is a no-op in the VM; assert `play()` doesn't
-  throw and check your gameplay/score logic instead (see incanto-verifying).
+- **Verifying headlessly** → read the AUDIO RECORD (below). Audio makes no sound
+  in the VM, but the calls still happen, so "did the coin sound fire when the
+  coin was collected?" is answerable there.
+
+## Verifying sound without hearing it
+
+```ts
+const session = await createPlaySession(gameJson, {});
+session.engine.audio.clearLog();
+collectACoin();
+session.step(200);
+
+session.engine.audio.countOf('coin');   // 1
+session.engine.audio.recent();
+// [{ kind: 'preset', name: 'coin', from: '/Game/Player/Coin', bus: 'sfx', at: 1.2 }]
+```
+
+`recent()` is the last 200 sounds, oldest first — `kind` is `preset` | `src` |
+`music` | `voice`, `name` is the preset name, the clip url or the track,
+`from` is the node path (or `engine.music` / `engine.sfx`), and `bus` is where
+its volume comes from. `countOf(name)` is the assertion you usually want;
+`clearLog()` resets between steps.
+
+This covers every path: `AudioPlayer.play()` on both the procedural and the
+`src` route, `engine.music.play`/`crossfadeTo`, and `engine.sfx.startVoice`. It
+records the INTENT to play — that the wiring fired — not that a speaker moved;
+for "the file is broken" see `assetErrors()` above.
 
 ## Settings that survive a reload (`engine.settings`)
 

package/skills/incanto-building-2d-games.md

@@ -200,9 +200,26 @@ listing the valid set. With a viewport design, UI coordinates are design px.
   **incanto-audio.md**.
 - Reference example: [examples/2d-phaser-sprite-character-gravity](https://github.com/rareboe/Incanto/tree/main/examples/2d-phaser-sprite-character-gravity) —
   spritesheet character with a walk/jump/attack behavior state machine.
-- Pointer→world mapping (the InputMap covers keyboard actions; pointer projection is
-  this one-liner):
-  `world = camera.clampedCenter(w,h) + (pointer - viewport/2) / camera.zoom`.
+- **Tap / drag / click**: `createGame2D({ pointer: true })` attaches pointer
+  input — MOUSE, FINGER and pen alike — and then
+
+  ```ts
+  game.engine.updated.connect(() => {
+    if (!game.engine.input.mouseJustPressed()) return;
+    const at = game.engine.input.pointerPosition();   // canvas px, null until
+    if (!at) return;                                  // a pointer has been seen
+    const world = game.renderer.worldFromScreen(at.x, at.y);   // world px
+    popAt(world);
+  });
+  ```
+
+  Use `renderer.worldFromScreen` — do NOT hand-roll the projection. It already
+  accounts for the design `viewport`, the letterbox bars and the camera's
+  clamped centre; a formula written against the DESIGN rect is off by
+  `(design − canvas) / 2 / zoom`, which on a 390 px-wide phone showing a 480 px
+  design measured **62 world px** — a finger-and-a-half from what the player
+  touched. Its inverse, `renderer.screenFromWorld(wx, wy)`, pins DOM to the
+  world (see incanto-web-integration).
 
 ## Game flow recipes
 

package/skills/incanto-editor.md

@@ -39,13 +39,17 @@ The `scenes` button opens the project as a tree, not a list of paths:
 - **The scene you are editing** is marked and revealed, and the cursor starts on it.
 - **A filter box** — type any part of a path; matches show wherever they are hiding.
   Keyboard from that box: `↑↓` move · `→` open a folder · `←` close it · `⏎` load ·
-  `Esc` close (backdrop and ✕ work too).
+  `Esc` close (backdrop and ✕ work too). The cursor always sits on a SCENE —
+  the first match while you filter, the scene you are editing when you open the
+  panel — so `⏎` loads something without arrowing first.
 - Each row carries **when it was last written and how big it is**, which is usually
   how you recognise the file you were just in.
 - **create** makes a new scene at the path in the box — left empty it uses the
   placeholder, which tracks the folder you are standing in, so a scene lands beside
   its siblings rather than at the project root. Parent dirs are created.
-- Loading another scene while you have unsaved EDITS asks first.
+- Loading another scene while you have unsaved EDITS asks first, and the answer
+  is not only *discard*: **save & open** writes the scene you are leaving and
+  then opens the other one.
 
 **The same browser opens inside a running game.** When the game's dev server serves
 the project's scenes, `☰ debug ▸ ✎ edit this scene` gives you the whole project: the
@@ -66,7 +70,12 @@ is not there. The editor still edits the scene the game booted with meanwhile.
 Opens a local page (default `http://127.0.0.1:5179/`) with three panes:
 
 - **Explorer** — two collapsible sections: **ASSETS** on top (icon rows by
-  type; keys with a `group/` prefix nest under collapsible folders (any depth),
+  type; **an asset the renderer could not FETCH turns red**, with the url in its
+  tooltip and the consequence spelled out when you select it — *"failed to
+  load — every node using $fx/coin draws nothing"* — plus a banner naming all of
+  them. A 404'd texture is otherwise the one failure with no symptom: the scene
+  is structurally perfect, the tree is full, and the viewport draws nothing where
+  the art should be; keys with a `group/` prefix nest under collapsible folders (any depth),
   each showing its recursive asset count — refs are `$group/key`; click the
   icon for a blurb, the row to edit in the inspector; DRAG asset rows onto a
   folder (or the section background = root) to move them — references rewrite
@@ -79,7 +88,14 @@ Opens a local page (default `http://127.0.0.1:5179/`) with three panes:
   to reorder before/after. Dragging a selected row moves the whole selection.
   Illegal drops (engine rules — e.g. a CharacterController2D outside a
   CharacterBody2D) are ROLLED BACK entirely with the error in the banner; the
-  tree never shows a state the engine would reject. Right-click for
+  tree never shows a state the engine would reject.
+  **A reparent does not MOVE anything**: the node keeps its world transform and
+  the editor rewrites the local `position`/`rotation`/`scale` to match (drop a
+  ball at `[3, 0.6, 0]` onto a crate at `[-3, 0.5, 0]` and the ball stays put,
+  holding `[6, 0.1, 0]`). Rotated and scaled parents are handled the same way,
+  and the values that are no longer needed disappear rather than being written
+  as defaults. This is the Godot/Unity/Blender behaviour, and it is what keeps a
+  tree edit from changing the picture. Right-click for
   duplicate / rename (or double-click the name) / cut / copy / paste-as-child /
   delete — all act on the multi-selection. **Rename REPAIRS references**: every
   `connections[].from/to` and every node-path prop pointing at the node (or into
@@ -121,6 +137,12 @@ Opens a local page (default `http://127.0.0.1:5179/`) with three panes:
   scales to 0.25 steps (the readout shows the snapped value).
   2D additionally supports click-pick, body drag, wheel zoom-at-cursor,
   right/middle/Shift-drag pan, Alt+wheel scale, and collider wireframes.
+  **HUD nodes are editable like anything else**: a `UILayer` subtree is posed in
+  screen space rather than world space, and the viewport now picks, outlines and
+  drags it there — click the widget where you SEE it, and its position moves 1:1
+  with the cursor whatever the world zoom is. (Picking used to look only at the
+  world pass, so a HUD could not be selected in the viewport at all, and its
+  outline was drawn wherever the game camera happened to be looking.)
   **`F` frames the SELECTED node** (its whole subtree; a light or empty node has
   no bounds, so the camera goes to it at a readable distance) — and the whole
   scene when nothing is selected, which is the Maya/Unity/Unreal meaning of the
@@ -136,9 +158,25 @@ Opens a local page (default `http://127.0.0.1:5179/`) with three panes:
 - **Inspector** — schema-driven from the node registry, with STRUCTURED editors for
   the hard parts: `collider` (shape dropdown + per-shape dimensions, mirrored by
   the wireframe), `network` (mode dropdown + sync-key chips + throttle),
-  `script` (attach/detach + name + props, with copy-paste Behavior boilerplate in
-  its help), `groups` (tag chips). Every one has a `?` help popover with examples.
-  Values equal to the default are removed (delta-only, like the serializer).
+  `script` — **the behaviors the engine SHIPS are a dropdown**, and picking one
+  builds a form from its own prop schema (a `Health` gets `max`/`regenPerSec`/
+  `invulnerableFor`/`freeOnDeath` with their defaults; a `Patrol`'s `mode` is a
+  `loop`/`pingpong` menu), delta-only like every other field. A name that is NOT
+  built in is your game's TypeScript: it keeps the raw-JSON props box and says
+  so, with copy-paste Behavior boilerplate in its help — and `groups` (tag
+  chips). Every one has a `?` help popover with examples. Values equal to the
+  default are removed (delta-only, like the serializer).
+  **A prop that holds a NODE PATH** (`Chase.target`, `Camera2D.follow`,
+  `Spawner.prefab`, `Joint3D.target`, `skinPath`, `terrain`…) offers every node
+  in the scene as a list — `%Name` where the name is unique, the absolute path
+  where it repeats — and free text still works for the forms a list cannot
+  enumerate (`../Skin`, a path into a subtree). A value that resolves to NOTHING
+  is marked red with the reason: `'%Playerr' matches no node in this scene. The
+  scene still loads — the prop just does nothing.` That last sentence is the
+  point: unlike a connection, a dangling path prop is not a load error, so
+  nothing else would ever have told you. A behavior's path props are checked
+  exactly like the node's own, and `incanto-check` reports the same thing from
+  the file.
 
 **3D scenes** get full camera navigation: drag orbits, right/middle/Shift-drag pans,
 wheel zooms, `F` frames the contents, and **`0` / the `game cam` button** returns to the
@@ -353,8 +391,7 @@ get normal click-select back.
 The **✦ button** beside the add-node controls opens the Generate dialog — the
 `incanto/env` generators inside the editor, driven by the same `GENERATORS`
 catalog as the `incanto-env` CLI and filtered to the open scene's dimension
-(3D: arena, terrain, meadow, forest, maze, rocks, clouds, island; 2D:
-platforms2d, maze2d, dungeon2d). The param form is built from the catalog
+(3D: arena, terrain, maze; 2D: platforms2d, maze2d, dungeon2d). The param form is built from the catalog
 metadata — numbers clamp to their min/max, option lists become dropdowns — so
 a new generator needs zero editor changes. The seed starts random (↻ rerolls);
 the same seed always generates the same level. **insert** runs the generator
@@ -395,7 +432,7 @@ trusts the surrounding network — use it only inside containers.
 The EDIT view freezes game time — nothing falls or fires until you press play;
 only ambient visuals (model animations, particles, water, foliage sway) keep
 moving. The PLAY view simulates everything engine-native but cannot execute the
-game's TypeScript behaviors. 3D scenes render and edit via the inspector; direct
-viewport manipulation is 2D-only for now. Runtime-injected textures (asset URLs
+game's TypeScript behaviors. Both dimensions have the W/E/R gizmos in the
+viewport; 2D additionally has click-pick, body drag and wheel zoom-at-cursor. Runtime-injected textures (asset URLs
 like `"GENERATED_AT_RUNTIME"`) render as a magenta checkerboard — position/size
 stay visible; the real art appears in the running game.

package/skills/incanto-gameplay-behaviors.md

@@ -58,11 +58,20 @@ Two kinds of node path resolve from DIFFERENT origins — mixing them up is the
   enemy (a child of the Spawner) reaches the player with the ABSOLUTE
   `/root/Player`, never a bare `Player` (which would look under the enemy).
 
-Renaming a node in the editor now REWRITES both kinds for you (and reports what
-it changed), so the paths above stay valid across a rename. Hand-edited JSON
-still has to be kept in sync yourself — `bunx incanto-check` catches the
-connections, but a behavior prop pointing at a name that no longer exists
-resolves to null in silence.
+Renaming a node in the editor REWRITES both kinds for you (behavior props
+included) and reports what it changed, and deleting a node lists every reference
+that still points at it before it goes. Hand-edited JSON is covered too:
+**`bunx incanto-check` now reports a node-path prop that leads nowhere** —
+
+```
+warn: World/Enemy: Chase.target — '%Playerr' matches no node in this scene.
+      The scene loads and the prop does nothing.
+```
+
+— which is the one failure that used to be completely silent (a prop path
+resolves with `getNodeOrNull`, so the scene opens and the enemy just never
+chases). `Chase.target` and `FollowCamera.target` are `required`: an EMPTY one
+is a load error naming the node, not a surprise in the browser.
 
 **Never write `/root/<RootName>/...`.** If your root node is named `Game`, the
 path is `/root/Player` — NOT `/root/Game/Player`: `/root/` already *is* the

package/skills/incanto-hud.md

@@ -151,6 +151,13 @@ so structure in the tree becomes structure on screen. Panels nest.
 | `UiSlider` | `label`, `value`, `min`, `max`, `step`, `width`, `color` | `changed(value)` |
 | `UiToggle` | `label`, `value` | `changed(bool)` |
 | `UiSelect` | `label`, `options` (`"low,medium,high"`), `value` | `changed(value)` |
+| `UiVolumeSlider` | `bus` (`master`/`sfx`/`music`), plus every `UiSlider` prop | `changed(value)` |
+| `UiMuteToggle` | `label` | `changed(bool)` |
+
+The last two are **already wired**: they read and write `engine.audio`, which
+persists itself. An audio menu is three nodes and no TypeScript — see
+`incanto-audio.md`. The graphics ones (`UiQualitySelect`, `UiFrameCapSelect`,
+`UiRenderScaleSelect`) and `UiLanguageSelect` work the same way.
 
 **An inventory is a grid panel**: `"layout": "grid", "columns": 5`, one child per
 slot, each a small `UiPanel` holding a `UiImage` (`tint` greys out what you