@vibes.diy/prompts 14.3.58 → 14.3.64

package/llms/three-js.draft.md

@@ -1,161 +0,0 @@
-# Three.js — the first draft: one lit object turning in a viewport
-
-A Three.js app's first draft is the whole page around the scene (title, copy,
-a card holding the viewport, a control row) with one real, lit object turning
-inside it. The seeded document names the scene and holds its color, and the
-control row repaints the object live. Loading models, physics, particles,
-camera controls and textures are the next pass. What the draft owes that pass
-is the platform's own engine skeleton: the renderer, scene, camera, lights and
-loop are built once inside one effect, sized to their host, and fully disposed
-on unmount, and React talks to the running scene through a ref, so the next
-pass adds meshes and systems to this file rather than rewriting it.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef } from "react";
-import { useFireproof } from "use-fireproof";
-import * as THREE from "three";
-import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
-
-// The finishes the control row offers, named once for the buttons and the material.
-const FINISHES = [
-  { label: "Lagoon", color: "#3fa7d6" },
-  { label: "Marigold", color: "#f4b942" },
-  { label: "Orchid", color: "#c86bd8" },
-  { label: "Moss", color: "#6fae5b" },
-];
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("spinStudio");
-  const { docs: scenes } = useLiveQuery("type", { key: "scene" });
-  const scene = scenes[0];
-  const hostRef = useRef(null);
-  // The running engine reads the color from here each frame, so a change never rebuilds it.
-  const colorRef = useRef(scene?.color ?? FINISHES[0].color);
-
-  useEffect(() => {
-    if (scene?.color) colorRef.current = scene.color;
-  }, [scene?.color]);
-
-  // The engine, built once: renderer, scene, camera, lights, one mesh, loop, resize, cleanup.
-  useEffect(() => {
-    const host = hostRef.current;
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.setSize(host.clientWidth, host.clientHeight);
-    host.appendChild(renderer.domElement);
-
-    const world = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(50, host.clientWidth / host.clientHeight, 0.1, 100);
-    camera.position.set(0, 1.2, 4.2);
-    camera.lookAt(0, 0, 0);
-
-    world.add(new THREE.HemisphereLight(0xffffff, 0x445066, 0.8));
-    const sun = new THREE.DirectionalLight(0xffffff, 1.4);
-    sun.position.set(3, 5, 2);
-    world.add(sun);
-
-    const geometry = new THREE.BoxGeometry(1.4, 1.4, 1.4);
-    const material = new THREE.MeshStandardMaterial({ color: colorRef.current, roughness: 0.35, metalness: 0.15 });
-    const mesh = new THREE.Mesh(geometry, material);
-    world.add(mesh);
-
-    const onResize = () => {
-      const w = host.clientWidth;
-      const h = host.clientHeight;
-      if (w === 0 || h === 0) return;
-      renderer.setSize(w, h);
-      camera.aspect = w / h;
-      camera.updateProjectionMatrix();
-    };
-    const observer = new window.ResizeObserver(onResize); // follows the host, not just the window
-    observer.observe(host);
-
-    const clock = new THREE.Clock();
-    let raf = 0;
-    const animate = () => {
-      const dt = Math.min(clock.getDelta(), 0.05);
-      mesh.rotation.x += dt * 0.5;
-      mesh.rotation.y += dt * 0.8;
-      material.color.set(colorRef.current);
-      renderer.render(world, camera);
-      raf = requestAnimationFrame(animate);
-    };
-    animate();
-
-    return () => {
-      cancelAnimationFrame(raf);
-      observer.disconnect();
-      geometry.dispose();
-      material.dispose();
-      renderer.dispose();
-      if (renderer.domElement.parentNode === host) host.removeChild(renderer.domElement);
-    };
-  }, []);
-
-  const paint = (color) => {
-    colorRef.current = color;
-    if (scene) database.put({ ...scene, color });
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{scene?.name ?? "Spin Studio"}</h1>
-      <p className="mt-1 text-muted-foreground">A little object on a turntable. Pick a finish and watch it catch the light.</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Turntable</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div ref={hostRef} className="aspect-video w-full rounded-lg overflow-hidden bg-muted" />
-          {/* TODO(next pass): load a GLTF model, orbit controls, textures, particles and physics into this same scene */}
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            {FINISHES.map((f) => (
-              <Button key={f.label} size="sm" variant={f.color === scene?.color ? "default" : "outline"} onClick={() => paint(f.color)}>
-                {f.label}
-              </Button>
-            ))}
-            <Badge variant="secondary" className="ml-auto">{FINISHES.find((f) => f.color === scene?.color)?.label ?? "Lagoon"}</Badge>
-          </div>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "spinStudio": [
-    { "key": "turntable", "type": "scene", "name": "Spin Studio", "color": "#3fa7d6" }
-  ]
-}
-```
-
-Draft note: the next pass adds loaded models, orbit controls, textures, particles and physics to the same scene.
-
-## What stays the same in a Three.js draft
-
-- **The engine is built once** in `useEffect(() => {...}, [])`: renderer,
-  scene, camera, lights, mesh and `requestAnimationFrame` loop all inside it.
-  React never rebuilds it; values React changes reach the loop through a ref
-  (`colorRef`), never through the effect's dependency list.
-- **The cleanup is complete**: it cancels the frame, disconnects the resize
-  observer, disposes every geometry and material it made, disposes the
-  renderer, and removes the canvas from its host.
-- **The viewport sizes to its host**, not the window: a `div` with a fixed
-  aspect (`aspect-video w-full rounded-lg overflow-hidden`) inside a Card, a
-  resize handler that updates the renderer size and the camera aspect, and
-  `setPixelRatio(Math.min(window.devicePixelRatio, 2))`.
-- **The hello is one lit object**: a `BoxGeometry` with a
-  `MeshStandardMaterial` under a hemisphere light and a directional light,
-  turning on a clock delta. Standard materials need light; the draft always
-  ships both.
-- **The page is complete around it**: title, a sentence of friendly copy, the
-  Card, and a control row of Buttons whose choice saves to the seeded
-  Fireproof document and shows up in the scene on the next frame.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: models, controls, textures, particles, physics. The
-  draft draws none of it and imports nothing beyond `three` itself.

package/llms/voxel.draft.md

@@ -1,196 +0,0 @@
-# Voxel worlds — the first draft: one grass block, turning in the sky
-
-A voxel app's first draft is a full-screen 3D viewport with the HUD floating
-over it, and in that viewport ONE block: a pixel-art grass block, green on top
-and dirt on the sides, turning slowly under a blue sky. The name card, the
-hotbar, the palette, the seeded world document and the look are all finished;
-the block is real, lit and drawn through the same instanced path the whole
-world will use.
-Terrain, placing and breaking, walking, saving edits and sharing the world are
-the next pass. What the draft owes that pass is the right skeleton: the engine
-is built once inside an effect, the block is ONE `InstancedMesh` with a
-count of 1, the viewport is `fixed inset-0` with the controls on top of it,
-and the palette is named once for the HUD and the blocks, so the next pass
-raises the count and adds to this file rather than rewriting it.
-
-Unlike the page-shaped draft above, a world does not flow down the page: the
-viewport is `fixed inset-0` and the controls sit on top of it.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef, useState } from "react";
-import { useFireproof } from "use-fireproof";
-import * as THREE from "three";
-import { Button, Badge } from "@vibes.diy/look";
-
-// The block-in-hand palette (shared by block colors and HUD swatches).
-const VOXEL_PALETTE = {
-  grass: "#6fcf5b", dirt: "#8a5a3b", stone: "#9b9b9b", wood: "#b5793a", glass: "#9fe3ff", candy: "#ff6fb1",
-  neon: "#39ff9e", water: "#2f8fe0", lava: "#ff5a2f", erase: "#ff4d6d", ink: "#1a1325", light: "#ffffff",
-};
-const HOTBAR = ["grass", "dirt", "stone", "wood", "glass", "candy"];
-const SKY = 0x8ecbff;
-
-// A 16×16 pixel-art face, painted once. `fringe` rows of green sit on top of dirt for the sides.
-function blockFace(kind) {
-  const canvas = document.createElement("canvas");
-  canvas.width = 16;
-  canvas.height = 16;
-  const ctx = canvas.getContext("2d");
-  const px = (x, y, color) => { ctx.fillStyle = color; ctx.fillRect(x, y, 1, 1); };
-  let n = kind.length * 7;
-  const rand = () => { n = (n * 9301 + 49297) % 233280; return n / 233280; };
-  for (let y = 0; y < 16; y++)
-    for (let x = 0; x < 16; x++) {
-      const fringe = kind === "side" && y < 3 + (x % 3 === 0 ? 1 : 0);
-      if (kind === "top" || fringe) px(x, y, rand() < 0.18 ? "#4fa83f" : VOXEL_PALETTE.grass);
-      else px(x, y, rand() < 0.2 ? "#6e4630" : VOXEL_PALETTE.dirt);
-    }
-  const texture = new THREE.CanvasTexture(canvas);
-  texture.magFilter = THREE.NearestFilter;
-  texture.minFilter = THREE.NearestFilter;
-  texture.colorSpace = THREE.SRGBColorSpace;
-  return texture;
-}
-
-export default function App() {
-  const { useLiveQuery } = useFireproof("skyIsland");
-  const { docs: worlds } = useLiveQuery("type", { key: "world" });
-  const world = worlds[0];
-  const mountRef = useRef(null);
-  const [held, setHeld] = useState(HOTBAR[0]);
-
-  // The engine, built once: renderer, scene, lights, the instanced block, the loop. React only draws the HUD over it.
-  useEffect(() => {
-    const mount = mountRef.current;
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.setSize(mount.clientWidth, mount.clientHeight);
-    mount.appendChild(renderer.domElement);
-
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(SKY);
-    scene.fog = new THREE.Fog(SKY, 8, 30);
-    const camera = new THREE.PerspectiveCamera(60, mount.clientWidth / mount.clientHeight, 0.1, 100);
-    camera.position.set(0, 1.4, 3.2);
-    camera.lookAt(0, 0, 0);
-    scene.add(new THREE.HemisphereLight(0xffffff, 0x8a5a3b, 0.9));
-    const sun = new THREE.DirectionalLight(0xffffff, 1.2);
-    sun.position.set(4, 8, 5);
-    scene.add(sun);
-
-    // The hello: one grass block, drawn the way the whole world will be — one shared cube, six shared
-    // face materials (BoxGeometry face order is +x, -x, +y, -y, +z, -z), one InstancedMesh. The next pass
-    // raises the count and fills more matrices; it never adds a Mesh per block.
-    const textures = { top: blockFace("top"), side: blockFace("side"), bottom: blockFace("bottom") };
-    const faces = ["side", "side", "top", "bottom", "side", "side"];
-    const materials = faces.map((f) => new THREE.MeshLambertMaterial({ map: textures[f] }));
-    const cube = new THREE.BoxGeometry(1, 1, 1);
-    const blocks = new THREE.InstancedMesh(cube, materials, 1);
-    scene.add(blocks);
-    const matrix = new THREE.Matrix4();
-    const spin = new THREE.Quaternion();
-    const up = new THREE.Vector3(0, 1, 0);
-    const at = new THREE.Vector3();
-    const one = new THREE.Vector3(1, 1, 1);
-
-    const onResize = () => {
-      renderer.setSize(mount.clientWidth, mount.clientHeight);
-      camera.aspect = mount.clientWidth / mount.clientHeight;
-      camera.updateProjectionMatrix();
-    };
-    window.addEventListener("resize", onResize);
-
-    const clock = new THREE.Clock();
-    let raf;
-    const loop = () => {
-      const t = clock.getElapsedTime();
-      spin.setFromAxisAngle(up, t * 0.5);
-      at.set(0, Math.sin(t * 1.2) * 0.06, 0);
-      blocks.setMatrixAt(0, matrix.compose(at, spin, one));
-      blocks.instanceMatrix.needsUpdate = true;
-      renderer.render(scene, camera);
-      raf = requestAnimationFrame(loop);
-    };
-    loop();
-
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", onResize);
-      Object.values(textures).forEach((t) => t.dispose());
-      materials.forEach((m) => m.dispose());
-      blocks.dispose();
-      cube.dispose();
-      renderer.dispose();
-      mount.removeChild(renderer.domElement);
-    };
-  }, []);
-
-  return (
-    <div className="fixed inset-0 select-none touch-none bg-background text-foreground font-sans">
-      <div ref={mountRef} className="absolute inset-0" />
-
-      <div className="absolute left-4 top-4 rounded-lg bg-card/90 px-3 py-2 text-card-foreground shadow-md">
-        <p className="font-bold">{world?.name ?? "Sky Island"}</p>
-        <p className="text-muted-foreground">Your first block is ready. Pick what goes in your hand.</p>
-      </div>
-
-      <Badge className="absolute right-4 top-4">Holding {held}</Badge>
-
-      <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 rounded-lg bg-card/90 p-2 shadow-md">
-        {HOTBAR.map((type) => (
-          <Button key={type} size="sm" variant={type === held ? "default" : "outline"} onClick={() => setHeld(type)}
-            aria-label={type}>
-            <span className="inline-block h-4 w-4 rounded-sm" style={{ backgroundColor: VOXEL_PALETTE[type] }} />
-            {type}
-          </Button>
-        ))}
-      </div>
-      {/* TODO(next pass): the flat block map and instanced terrain, place and break the held block, walk with pointer lock, save edits as documents, share the world */}
-    </div>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "skyIsland": [
-    { "key": "island", "type": "world", "name": "Sky Island", "sky": "clear" }
-  ]
-}
-```
-
-Draft note: the next pass adds the terrain around this block, placing and breaking with the held block, walking the world, saving edits, and sharing the world with friends.
-
-## What stays the same in a voxel draft
-
-- **The viewport fills the screen**: the outer element is `fixed inset-0
-  select-none touch-none`, the renderer mounts into an `absolute inset-0` div,
-  and every control is an `absolute` layer over it. Never the page-flow `main`
-  with padding from the shape above.
-- **The engine is built once** in `useEffect(() => {...}, [])` with the
-  renderer, scene, lights, listeners and loop inside it, and a cleanup that
-  stops the loop, removes the listener and disposes every texture, material, the
-  instanced mesh, the geometry and the renderer. Per-frame values never live in React state.
-- **`setPixelRatio(Math.min(window.devicePixelRatio, 2))`**, a resize handler
-  that updates the renderer size and the camera aspect, a hemisphere plus a
-  directional light, and a `Fog` that matches the sky color.
-- **The hello is one grass block, turning, through the fast path**: one shared
-  `BoxGeometry` and an array of six shared materials, each face a 16×16
-  `THREE.CanvasTexture` painted in code with `NearestFilter` so the pixels
-  stay crisp, drawn as `new THREE.InstancedMesh(cube, materials, 1)` and
-  turned each frame with `setMatrixAt(0, …)` plus
-  `instanceMatrix.needsUpdate = true`. No texture URLs, no loaders.
-- **The palette table** is the Blocktopia voxel palette, in full, named once
-  for the block colors and the HUD swatches.
-- **The next pass keeps this skeleton**: the world becomes a flat `Map` keyed
-  `"x|y|z"`, drawn through the same ONE `InstancedMesh` of the exposed blocks
-  (the count raised, a matrix per block) with its shared geometry and
-  materials. Never a
-  `THREE.Mesh` per block, and never a geometry or material created inside the
-  block loop. Pointer lock comes from a click-to-play overlay whose visibility
-  follows the real lock state, and movement keys are the game's own set.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: terrain, placing and breaking, walking, saving edits,
-  sharing. The draft draws none of it.

package/llms/web-audio.draft.md

@@ -1,180 +0,0 @@
-# Web Audio — the first draft: one tone, played by a tap
-
-A sound app's first draft is the whole page around the instrument: the name,
-a row of named notes, a volume slider, a big Play button, and the last few
-notes played, listed live from the database. The capability's hello is real:
-every tap plays one short, shaped tone through the speakers, on iOS too. The
-sequencer or metronome on the audio clock, the effects chain and recording are
-the next pass. What the draft owes that pass is the right skeleton: one
-`AudioContext` in a ref, created inside the first gesture and resumed on every
-one after it, and a plain `playTone` helper that takes the context and a note,
-so the next pass adds a scheduler beside it rather than rewriting it.
-
-Web Audio is a browser built-in: there is no import, the constructor is
-`window.AudioContext` with the `window.webkitAudioContext` fallback.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef, useState } from "react";
-import { useFireproof } from "use-fireproof";
-import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
-
-// Named notes of a C major pentatonic, so any order of taps sounds sweet.
-const NOTES = [
-  { name: "C4", hz: 261.63 },
-  { name: "D4", hz: 293.66 },
-  { name: "E4", hz: 329.63 },
-  { name: "G4", hz: 392.0 },
-  { name: "A4", hz: 440.0 },
-  { name: "C5", hz: 523.25 },
-];
-const hzOf = (name) => (NOTES.find((n) => n.name === name) ?? NOTES[4]).hz;
-const timeOf = (ms) => new Date(ms).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" });
-
-// The iOS-safe gate: create or resume the context and return it. Call it FIRST,
-// synchronously, inside the click handler, with no await before the sound starts.
-function unlockAudio(ctxRef) {
-  ctxRef.current ||= new (window.AudioContext || window.webkitAudioContext)();
-  const ctx = ctxRef.current;
-  if (ctx.state !== "running") ctx.resume(); // iOS suspends after lock or backgrounding
-  return ctx;
-}
-
-// One short tone: oscillator -> gain -> speakers, with an attack and a release, stopped at ~0.4 s.
-function playTone(ctx, hz, volume, wave) {
-  const t = ctx.currentTime;
-  const peak = Math.max(volume, 0.0001); // exponential ramps never touch zero
-  const osc = ctx.createOscillator();
-  const gain = ctx.createGain();
-  osc.type = wave;
-  osc.frequency.setValueAtTime(hz, t);
-  gain.gain.setValueAtTime(0.0001, t);
-  gain.gain.linearRampToValueAtTime(peak, t + 0.02); // attack
-  gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.4); // release
-  osc.connect(gain).connect(ctx.destination);
-  osc.start(t);
-  osc.stop(t + 0.42);
-  osc.onended = () => {
-    osc.disconnect();
-    gain.disconnect();
-  };
-}
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("glassHarp");
-  const { docs: instruments } = useLiveQuery("type", { key: "instrument" });
-  // Only play documents carry createdAt; newest first, a handful of them.
-  const { docs: plays } = useLiveQuery("createdAt", { descending: true, limit: 6 });
-  const instrument = instruments[0];
-  const ctxRef = useRef(null);
-  const [note, setNote] = useState("A4");
-  const [volume, setVolume] = useState(0.5);
-
-  // The context is created by the first tap and closed when the app goes away.
-  useEffect(() => {
-    return () => {
-      ctxRef.current?.close();
-      ctxRef.current = null;
-    };
-  }, []);
-
-  const play = (name) => {
-    const ctx = unlockAudio(ctxRef); // same trusted handler, before anything async
-    playTone(ctx, hzOf(name), volume, instrument?.wave ?? "triangle");
-    setNote(name);
-    // The sound is already playing; saving can take its time.
-    database.put({ type: "play", note: name, createdAt: Date.now() });
-    if (instrument) database.put({ ...instrument, lastNote: name });
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{instrument?.name ?? "Glass Harp"}</h1>
-      <p className="mt-1 text-muted-foreground">Pick a note, press Play, and let it ring.</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Play a note</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-5">
-            <div className="flex flex-wrap gap-2">
-              {NOTES.map((n) => (
-                <Button key={n.name} variant={n.name === note ? "default" : "outline"} onClick={() => play(n.name)}>
-                  {n.name}
-                </Button>
-              ))}
-            </div>
-            <label className="grid gap-2">
-              <span className="text-muted-foreground">Volume {Math.round(volume * 100)}%</span>
-              <input type="range" min={0} max={1} step={0.05} value={volume} onChange={(e) => setVolume(Number(e.target.value))} className="w-full" />
-            </label>
-            <Button size="lg" onClick={() => play(note)}>
-              Play {note}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Just played</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-wrap gap-2">
-            {plays.map((p) => (
-              <Badge key={p._id} variant="secondary">
-                {p.note} · {timeOf(p.createdAt)}
-              </Badge>
-            ))}
-          </div>
-          <p className="mt-3 text-muted-foreground">Last note: {instrument?.lastNote ?? note}</p>
-        </CardContent>
-      </Card>
-
-      {/* TODO(next pass): a step sequencer and metronome scheduled ahead on ctx.currentTime, a delay with effects in its feedback loop, and recording a take */}
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "glassHarp": [
-    { "key": "harp", "type": "instrument", "name": "Glass Harp", "wave": "triangle", "lastNote": "G4" },
-    { "key": "play-1", "type": "play", "note": "C4", "createdAt": 1758400000000 },
-    { "key": "play-2", "type": "play", "note": "E4", "createdAt": 1758400001000 },
-    { "key": "play-3", "type": "play", "note": "G4", "createdAt": 1758400002000 }
-  ]
-}
-```
-
-Draft note: the next pass adds a step sequencer and metronome on the audio clock, a delay and filter chain, and recording a take to keep.
-
-## What stays the same in a Web Audio draft
-
-- **One `AudioContext`, in a ref, made by a gesture**: `unlockAudio(ctxRef)`
-  creates it on the first tap, re-checks `ctx.state` and resumes on every tap
-  after, and the effect's cleanup closes it. Never a context at module scope,
-  in `useState`, or in a mount effect.
-- **The iOS rule holds in every handler**: the unlock and the first
-  `osc.start()` run synchronously inside the same click, before any `await`,
-  timer, promise or state-driven effect. Saving to the database comes after
-  the sound has started.
-- **The hello is one shaped tone**: an `OscillatorNode` into a `GainNode`,
-  `setValueAtTime` to a floor of `0.0001`, `linearRampToValueAtTime` for the
-  attack, `exponentialRampToValueAtTime` for the release, `osc.stop` at about
-  0.4 s, and both nodes disconnected in `onended`. Nothing plays on load.
-- **`playTone(ctx, hz, volume, wave)` is a plain function** outside the
-  component, taking the context as an argument. The next pass's engine and
-  scheduler sit beside it in the same shape.
-- **Controls are ordinary elements**: named notes as `Button`s, volume as a
-  plain `<input type="range">`, read at the moment of the tap.
-- **The data is real**: the seeded instrument document holds the name, the
-  wave and the last note; each tap writes a `play` document with `createdAt`,
-  and a `useLiveQuery` list shows the newest few.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: the sequencer or metronome with lookahead scheduling on
-  `ctx.currentTime`, effects, recording. The draft schedules nothing on the
-  clock beyond the one tone.