@vibes.diy/prompts 14.3.178 → 14.3.181

package/llms/backend.js

@@ -1,7 +1,7 @@
 export const backendConfig = {
     name: "backend",
     label: "backend-js",
-    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules; reads a web page, feed or API the person names and hands it to the page through /_api; emails, notifies and reminds people through ctx.notify by handle — a weekly digest, a summary for the owner, a Monday email to the manager — and invites a recipient who is not in the app yet; and sends a record to a tool the person names (Slack, Google Sheets, a CRM, Zapier) through a Zapier Catch Hook the owner connects",
-    cues: ["email", "notify", "remind", "digest", "zapier", "catch hook", "webhook", "slack", "sheets", "crm"],
+    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules; reads a web page, feed or API the person names and hands it to the page through /_api; emails, notifies and reminds people through ctx.notify by handle — a weekly digest, a summary for the owner, a Monday email to the manager — and invites a recipient who is not in the app yet; sends a record to a tool the person names (Slack, Google Sheets, a CRM, Zapier) through a Zapier Catch Hook the owner connects; and takes records in from Zapier — a Google Forms response, a new sheet row, an email — at its /_api URL, checked against a shared secret",
+    cues: ["email", "notify", "remind", "digest", "zapier", "catch hook", "webhook", "slack", "sheets", "crm", "google forms"],
 };
 //# sourceMappingURL=backend.js.map

package/llms/backend.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,ylBAAylB;IAK3lB,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;CAC3G,CAAC"}
+{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,guBAAguB;IAKluB,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC;CAC3H,CAAC"}

package/llms/backend.md

@@ -21,7 +21,9 @@ create or mention `backend.js`.
 ## When to use which handler — signal words
 
 - **`fetch`** — "webhook", "OAuth", "callback", "API endpoint", "receive",
-  "form POST", "Stripe/GitHub/Sonos sends us…". Something **external → us**.
+  "form POST", "Stripe/GitHub/Sonos sends us…", "from Zapier", "when a form
+  is submitted in Google Forms", "every new row in my sheet". Something
+  **external → us**.
 - **`onChange`** — "when X is created", "after a write", "notify", "send an
   email", "aggregate", "moderate", "sync to…". An **internal write → a side
   effect**: `ctx.notify` for every person the app emails, notifies or reminds,
@@ -400,7 +402,9 @@ const routes = await ctx.github.routes(); // [{ repo, accountLogin, binderHandle
     anything else **throw** — a handler that returns normally has acknowledged
     the event, so the platform will not call it again for that write, while a
     thrown `onChange` is re-delivered with backoff (a handful of tries over a few
-    minutes) and a run that never succeeds lands in the app's logs.
+    minutes) and a run that never succeeds lands in the app's logs. Records
+    travelling the other way, from a tool into the app, arrive at `fetch`:
+    see *Records in from Zapier* below.
 
     ```js
     export async function onChange(event, ctx) {
@@ -843,6 +847,162 @@ signed in.
 Writes a handler makes with `ctx.db.put` still pass through `access.js` as the
 caller, so the app's rules hold for API writes too.
 
+### Records in from Zapier — a Zap that POSTs to `/_api`
+
+A Zap brings records into the app by POSTing to its `/_api` route.
+Reach for it when the ask says the records come *from* another tool — "from
+Zapier", "when a form is submitted in Google Forms", "every new row in my
+sheet", "each new email in my inbox". The owner makes a Zap whose trigger is
+that tool and whose action is **Webhooks by Zapier → POST** to
+`https://vibes.diy/vibe/<owner>/<slug>/_api/zapier/lead`, sending the fields as
+JSON and mapping the tool's own id for the record (the form response id, the
+row id, the message id) to `id`. The route answers the world once the app is
+published.
+
+A Zap carries no vibes.diy sign-in, so the route runs as nobody, and the
+recipe has three parts:
+
+- **A shared secret proves the sender.** The owner picks a long random value,
+  saves it as a secret (`vibes-diy secrets set ZAPIER_INBOUND_SECRET`), and
+  pastes the same value into the Zap as an `x-zapier-secret` header. The
+  handler compares the two in constant time and answers `401` when they
+  differ. The secret rides a header of the app's own naming: `Authorization`
+  and `Cookie` are removed before the handler sees the request, and
+  `x-vibes-*` belongs to the platform.
+- **The same record lands on the same document.** Zapier can deliver one
+  record twice, so its key comes from the record itself — the mapped `id`, or
+  a hash of the body — and the record the app shows is written at
+  `lead:<key>` with `ifRev: null`, so a second delivery meets a `conflict`
+  and changes nothing.
+- **The route writes a sealed arrival, and the tick turns it into the
+  record.** The route's write is anonymous, so `access.js` admits it with
+  `allowAnonymous: true` — and a type an anonymous route may write, any
+  visitor may write directly too. So the route writes an `arrival` carrying a
+  seal (an HMAC of its fields under the secret) on a channel no reader is
+  granted, and `scheduled`, which reads every channel, makes the seal again,
+  writes each matching arrival as the record the app shows (a type only
+  `scheduled` writes), and clears the arrival. An arrival with no matching
+  seal is cleared without becoming a record. The tick pages through every
+  arrival on the `next` cursor, up to ten pages a tick, so a pile of unsealed
+  arrivals never stands in front of a real one, and it handles each arrival
+  on its own — fields checked as strings, any failure logged — so one odd
+  document is cleared and the rest go through. `access.js` keeps every
+  arrival at an `arrival:` id, so none can occupy a lead's id.
+
+Gate both handlers on the secret, so the app works fully before any Zap
+exists, and say in your reply what the owner sets up: the secret, the Zap's
+POST address and header, and anonymous writes for the app (publishing from
+the editor turns them on when `access.js` declares `allowAnonymous`; after a
+CLI push, `vibes-diy app anon-write <owner>/<slug> on`).
+
+### `backend.js`
+```js
+export const config = { scheduled: { interval: "1m" } };
+
+const enc = new TextEncoder();
+
+function json(data, status) {
+  return new Response(JSON.stringify(data), { status: status ?? 200, headers: { "content-type": "application/json" } });
+}
+
+function hex(buf) {
+  return [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+// The seal: an HMAC of the record's fields under the shared secret.
+async function sealOf(secret, arrival) {
+  const key = await crypto.subtle.importKey("raw", enc.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
+  return hex(await crypto.subtle.sign("HMAC", key, enc.encode(JSON.stringify([arrival.key, arrival.name, arrival.email]))));
+}
+
+// Constant time: both sides become fixed-length digests, compared byte by byte with no early exit.
+async function sameText(a, b) {
+  const [x, y] = await Promise.all([a, b].map(async (s) => new Uint8Array(await crypto.subtle.digest("SHA-256", enc.encode(s)))));
+  let diff = 0;
+  for (let i = 0; i < x.length; i++) diff |= x[i] ^ y[i];
+  return diff === 0;
+}
+
+export async function fetch(request, ctx) {
+  const url = new URL(request.url);
+  if (url.pathname !== "/zapier/lead" || request.method !== "POST") return json({ ok: false, reason: "not found" }, 404);
+  const secret = ctx.secrets.ZAPIER_INBOUND_SECRET;
+  if (!secret) return json({ ok: false, reason: "this app is still being set up" }, 503);
+  const given = request.headers.get("x-zapier-secret") ?? "";
+  if (!(await sameText(given, secret))) return json({ ok: false, reason: "unrecognized sender" }, 401);
+  const raw = await request.text();
+  let body;
+  try {
+    body = JSON.parse(raw);
+  } catch {
+    return json({ ok: false, reason: "send the fields as JSON" }, 400);
+  }
+  if (typeof body?.name !== "string" || typeof body?.email !== "string") {
+    return json({ ok: false, reason: "name and email are needed" }, 400);
+  }
+  // The key comes from the record itself, so a second delivery of it lands on the same lead.
+  const source = typeof body.id === "string" && body.id !== "" ? body.id : raw;
+  const key = hex(await crypto.subtle.digest("SHA-256", enc.encode(source)));
+  const arrival = { type: "arrival", key, name: body.name.slice(0, 200), email: body.email.slice(0, 200) };
+  arrival.seal = await sealOf(secret, arrival);
+  await ctx.db.put(arrival, { db: "leads", id: "arrival:" + arrival.seal });
+  return json({ ok: true, key });
+}
+
+export async function scheduled(event, ctx) {
+  const secret = ctx.secrets.ZAPIER_INBOUND_SECRET;
+  let added = 0;
+  let cleared = 0;
+  let after;
+  let pages = 0;
+  // Page through every arrival (up to 10 pages a tick), so a pile of unsealed ones never hides a real one.
+  do {
+    const page = secret ? await ctx.db.query({ db: "leads", field: "type", key: "arrival", limit: 200, after }) : [];
+    for (const arrival of page) {
+      // Each arrival is handled on its own: whatever one holds, the tick clears it and moves on.
+      try {
+        const wellFormed = ["key", "name", "email", "seal"].every((f) => typeof arrival[f] === "string");
+        if (wellFormed && (await sameText(arrival.seal, await sealOf(secret, arrival)))) {
+          const lead = { type: "lead", name: arrival.name, email: arrival.email, addedAt: event.scheduledTime };
+          await ctx.db.put(lead, { db: "leads", id: "lead:" + arrival.key, ifRev: null });
+          added += 1;
+        } else {
+          cleared += 1;
+        }
+      } catch (err) {
+        // A conflict means this lead is already here; anything else is logged and the arrival cleared.
+        if (err?.code !== "conflict") ctx.log("warn", "arrival set aside", { id: arrival._id, reason: String(err?.message ?? err) });
+      }
+      await ctx.db.delete(arrival._id, { db: "leads" }).catch((err) => ctx.log("warn", "arrival kept", { id: arrival._id, reason: String(err?.message ?? err) }));
+    }
+    after = page.next;
+    pages += 1;
+  } while (after && pages < 10);
+  ctx.log("info", "zapier arrivals", { added, cleared });
+}
+```
+
+### `access.js`
+```js
+export function leads(doc, oldDoc, user, ctx) {
+  if (oldDoc && oldDoc.type !== doc.type) throw { forbidden: "a record keeps its type" }; // a delete arrives as the stored record, type and all
+  if (doc.type === "arrival") {
+    // An arrival lives at `arrival:<seal>`, so no arrival can sit at a lead's id.
+    if (typeof doc._id !== "string" || !doc._id.startsWith("arrival:")) throw { forbidden: "an arrival lives at arrival:<seal>" };
+    if (doc._deleted) ctx.requireBackend("scheduled"); // the tick clears arrivals
+    return { channels: ["arrivals"], allowAnonymous: true }; // no reader is granted this channel
+  }
+  if (doc.type === "lead") {
+    ctx.requireBackend("scheduled"); // a lead is written only after its seal matched
+    return { channels: ["leads"], grant: { users: { [user.userHandle]: ["leads"] } } };
+  }
+  throw { forbidden: "unknown type" };
+}
+```
+
+The page lists `lead` records with `useLiveQuery("type", { key: "lead" })`,
+and the owner sees each one within a minute of the Zap firing.
+
 ### Bulk transformations run as a route
 
 A change that touches many stored records is written once, as a named `/_api` route, and run

package/llms/web-audio.js

@@ -1,7 +1,7 @@
 export const webAudioConfig = {
     name: "web-audio",
     label: "Web Audio API",
-    description: "Web Audio fundamentals; echo/delay with effects in the feedback path; mic monitoring with a metronome; audio‑clock scheduling; timing design for multi‑channel drum machines and MIDI synths with accurate voice overlap.",
+    description: "Web Audio fundamentals; echo/delay with effects in the feedback path; mic monitoring with a metronome; audio‑clock scheduling; timing design for multi‑channel drum machines and MIDI synths with accurate voice overlap; a complete synthesized drum machine (kick, snare, hats, 16‑step sequencer, tempo, swing, saturation, volume).",
     cues: [
         "audio",
         "sound",

package/llms/web-audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-audio.js","sourceRoot":"","sources":["../../jsr/llms/web-audio.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,eAAe;IACtB,WAAW,EACT,2NAA2N;IAC7N,IAAI,EAAE;QACJ,OAAO;QACP,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,aAAa;QACb,YAAY;QACZ,WAAW;QACX,cAAc;QACd,MAAM;QACN,OAAO;QACP,MAAM;QACN,QAAQ;QACR,WAAW;QACX,SAAS;QACT,SAAS;QACT,gBAAgB;QAChB,cAAc;KACf;CACF,CAAC"}
+{"version":3,"file":"web-audio.js","sourceRoot":"","sources":["../../jsr/llms/web-audio.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,eAAe;IACtB,WAAW,EACT,yUAAyU;IAC3U,IAAI,EAAE;QACJ,OAAO;QACP,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,aAAa;QACb,YAAY;QACZ,WAAW;QACX,cAAc;QACd,MAAM;QACN,OAAO;QACP,MAAM;QACN,QAAQ;QACR,WAAW;QACX,SAAS;QACT,SAAS;QACT,gBAAgB;QAChB,cAAc;KACf;CACF,CAAC"}

package/llms/web-audio.md

@@ -1,4 +1,4 @@
-# Web Audio API: Fundamentals, Echo with FX-in-Feedback, Mic Monitoring + Metronome, and Timing Architecture
+# Web Audio API: Fundamentals, Echo with FX-in-Feedback, Mic Monitoring + Metronome, Timing Architecture, and a Complete Drum Machine
 
 Authoritative source: Issue #228 research threads — comments 3192681700, 3192696052, 3192806626.
 
@@ -16,6 +16,10 @@ Authoritative source: Issue #228 research threads — comments 3192681700, 31926
 > iOS. Once the context is `running`, all of those are fine for scheduling. iOS
 > also suspends audio after backgrounding/lock, so **re-check `audioCtx.state` on
 > every gesture** and resume again if needed. See the `unlockAudio()` gate in §1.
+>
+> **A drum machine, beat maker or step sequencer starts from §9** — a complete,
+> runnable one with a synthesized kit, sixteen steps, tempo, swing, saturation
+> and volume.
 
 ## 1) Fundamentals and Core Nodes
 
@@ -355,4 +359,508 @@ function handleStop() {
 
 The Play button names what it plays ("Play the drums"), the Stop button is beside it from the first sound, and a small line credits the engine ("Sounds by Tone.js (MIT)") — the audience hears drums, not infrastructure.
 
+## 9) A complete drum machine — the shell every beat vibe starts from
+
+This is a full, runnable two-file app: a synthesized four-voice kit (kick,
+snare, closed and open hat), a sixteen-step sequencer, tempo and swing, and
+global saturation and volume on the master bus. No samples, no downloads —
+every sound is built from oscillators and noise, so it plays the moment the
+person taps. Start here for any drum machine, beat maker or groovebox and grow
+it: more voices, more steps, accents, pattern banks.
+
+Why it sounds good, in four moves:
+
+- **Kick** — a sine that sweeps 150 Hz → 55 Hz in 50 ms, then settles to 45 Hz:
+  the sweep is the punch, the tail is the boom. A few milliseconds of
+  band-passed noise on top is the beater, so the kick still reads on phone
+  speakers that cannot reproduce 45 Hz.
+- **Snare** — two tuned triangle "shell" tones under high-passed noise with a
+  presence lift at 5 kHz for the wires.
+- **Hats** — the 808 recipe: six square waves at inharmonic ratios of 40 Hz,
+  band-passed at 10 kHz and high-passed at 7 kHz. A closed hat chokes a ringing
+  open hat through the open hat's own gate gain, like the real machine.
+- **Master bus** — voices → bus (headroom) → drive gain → `tanh` WaveShaper
+  (4× oversampled, so the new harmonics do not alias into fizz) → makeup gain →
+  volume → a fast `DynamicsCompressor` as a limiter. The makeup gain falls as
+  the drive rises, so Saturation changes the colour, not the loudness; Volume
+  is squared so the slider feels even.
+
+The engine is a plain module (§6): the gate from §1, the lookahead scheduler
+from §4, and a `playhead()` the interface polls each animation frame, so the
+lit step follows what is reaching the speakers rather than the timer. The
+interface calls `getDrums()` synchronously at the top of every tap handler —
+Play, and each step — which is what unlocks sound on iOS.
+
+### `lib/drum-engine.js`
+```js
+// Everything that touches AudioContext lives here — no React, so a re-render never rebuilds the graph.
+export const STEPS = 16;
+export const TRACKS = [
+  { id: "kick", label: "Kick" },
+  { id: "snare", label: "Snare" },
+  { id: "closed", label: "Closed hat" },
+  { id: "open", label: "Open hat" },
+];
+
+let audioCtx;
+let drums;
+
+// §1's gate: synchronous, inside the tap, with one real (silent) sound.
+function unlockAudio() {
+  audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
+  if (audioCtx.state !== "running") {
+    audioCtx.resume();
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    gain.gain.value = 0.0001;
+    osc.connect(gain).connect(audioCtx.destination);
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.01);
+  }
+  return audioCtx;
+}
+
+// Call from a tap handler, synchronously: unlocks audio and builds the one engine on that context.
+export function getDrums() {
+  const ctx = unlockAudio();
+  drums ||= createDrums(ctx);
+  return drums;
+}
+
+function createDrums(ctx) {
+  const settings = { pattern: {}, bpm: 112, swing: 0, drive: 0.3, volume: 0.8 };
+
+  // Master chain: voices → bus → drive → tanh shaper → makeup → volume → limiter → speakers.
+  const bus = ctx.createGain();
+  const drive = ctx.createGain();
+  const shaper = ctx.createWaveShaper();
+  const makeup = ctx.createGain();
+  const volume = ctx.createGain();
+  const limiter = ctx.createDynamicsCompressor();
+  bus.gain.value = 0.7; // headroom: a kick and a hat on the same step stay under full scale
+  shaper.curve = tanhCurve(MAX_DRIVE);
+  shaper.oversample = "4x"; // keeps the new harmonics from folding back down as fizz
+  limiter.threshold.value = -3;
+  limiter.knee.value = 0;
+  limiter.ratio.value = 20;
+  limiter.attack.value = 0.002;
+  limiter.release.value = 0.1;
+  bus.connect(drive).connect(shaper).connect(makeup).connect(volume).connect(limiter).connect(ctx.destination);
+
+  const noise = noiseBuffer(ctx);
+  const live = new Set(); // every scheduled source and its start time, so Stop can cancel the future
+  let openChoke = null; // the ringing open hat's gate — a closed hat shuts it, like the real machine
+
+  function chokeOpen(at) {
+    openChoke?.gain.setTargetAtTime(0, at, 0.006);
+    openChoke = null;
+  }
+
+  function play(source, at, end, nodes = []) {
+    const entry = { source, at };
+    live.add(entry);
+    source.onended = () => {
+      live.delete(entry);
+      source.disconnect();
+      for (const node of nodes) node.disconnect();
+    };
+    source.start(at);
+    source.stop(end);
+  }
+
+  // A percussive envelope: 2 ms attack, exponential decay to silence.
+  function envelope(at, peak, decay, out = bus) {
+    const amp = ctx.createGain();
+    amp.gain.setValueAtTime(0.0001, at);
+    amp.gain.exponentialRampToValueAtTime(peak, at + 0.002);
+    amp.gain.exponentialRampToValueAtTime(0.0001, at + decay);
+    amp.connect(out);
+    return amp;
+  }
+
+  function filter(type, frequency, q = 0.7) {
+    const node = ctx.createBiquadFilter();
+    node.type = type;
+    node.frequency.value = frequency;
+    node.Q.value = q;
+    return node;
+  }
+
+  // 808-style metal: six square waves at inharmonic ratios, band-passed high.
+  function hat(at, decay, peak, out) {
+    const band = filter("bandpass", 10000);
+    const high = filter("highpass", 7000);
+    const amp = envelope(at, peak, decay, out);
+    band.connect(high).connect(amp);
+    [2, 3, 4.16, 5.43, 6.79, 8.21].forEach((ratio, i) => {
+      const osc = ctx.createOscillator();
+      osc.type = "square";
+      osc.frequency.value = 40 * ratio;
+      osc.connect(band);
+      play(osc, at, at + decay + 0.02, i === 0 ? [band, high, amp] : []);
+    });
+  }
+
+  const voices = {
+    kick(at) {
+      // A sine that drops from 150 Hz to 45 Hz: the pitch sweep is the punch, the tail is the boom.
+      const body = ctx.createOscillator();
+      body.frequency.setValueAtTime(150, at);
+      body.frequency.exponentialRampToValueAtTime(55, at + 0.05);
+      body.frequency.exponentialRampToValueAtTime(45, at + 0.4);
+      const amp = envelope(at, 1, 0.5);
+      body.connect(amp);
+      play(body, at, at + 0.55, [amp]);
+      // The beater: a few ms of filtered noise, so the kick still reads on phone speakers.
+      const click = ctx.createBufferSource();
+      click.buffer = noise;
+      const tone = filter("bandpass", 3500, 0.8);
+      const clickAmp = envelope(at, 0.3, 0.012);
+      click.connect(tone).connect(clickAmp);
+      play(click, at, at + 0.03, [tone, clickAmp]);
+    },
+    snare(at) {
+      // Two tuned shell tones under a bright burst of noise for the wires.
+      for (const [freq, level] of [[185, 0.45], [330, 0.25]]) {
+        const shell = ctx.createOscillator();
+        shell.type = "triangle";
+        shell.frequency.setValueAtTime(freq, at);
+        shell.frequency.exponentialRampToValueAtTime(freq * 0.85, at + 0.1);
+        const amp = envelope(at, level, 0.14);
+        shell.connect(amp);
+        play(shell, at, at + 0.16, [amp]);
+      }
+      const wires = ctx.createBufferSource();
+      wires.buffer = noise;
+      const high = filter("highpass", 1500);
+      const air = filter("peaking", 5000);
+      air.gain.value = 6;
+      const amp = envelope(at, 0.6, 0.22);
+      wires.connect(high).connect(air).connect(amp);
+      play(wires, at, at + 0.25, [high, air, amp]);
+    },
+    closed(at) {
+      chokeOpen(at);
+      hat(at, 0.06, 0.32, bus);
+    },
+    open(at) {
+      chokeOpen(at); // one open hat at a time, so the next closed hat always silences it
+      openChoke = ctx.createGain();
+      openChoke.connect(bus);
+      hat(at, 0.45, 0.24, openChoke);
+    },
+  };
+
+  // The scheduler: a 25 ms timer tops up 120 ms of sound ahead of the audio clock (§4).
+  const LOOKAHEAD = 0.12;
+  let timer = 0;
+  let step = 0;
+  let gridTime = 0;
+  let lit = -1;
+  const lights = []; // { step, at }: the playhead follows the sound, not the timer
+
+  function tick() {
+    const sixteenth = 60 / settings.bpm / 4;
+    // A throttled background tab can fall far behind the audio clock: skip the missed steps
+    // (keeping the beat's phase) instead of scheduling a burst of hits in the past.
+    if (gridTime < ctx.currentTime) {
+      const missed = Math.ceil((ctx.currentTime - gridTime) / sixteenth);
+      gridTime += missed * sixteenth;
+      step = (step + missed) % STEPS;
+    }
+    while (gridTime < ctx.currentTime + LOOKAHEAD) {
+      // Swing pushes every off-beat sixteenth late; 1 is a full triplet shuffle.
+      const at = gridTime + (step % 2 ? (settings.swing * sixteenth) / 3 : 0);
+      for (const { id } of TRACKS) if (settings.pattern[id]?.[step]) voices[id](at);
+      lights.push({ step, at });
+      gridTime += sixteenth;
+      step = (step + 1) % STEPS;
+    }
+  }
+
+  function update(next) {
+    Object.assign(settings, next);
+    const now = ctx.currentTime;
+    // Drive 0 is warm, 1 is crunchy. Makeup gain keeps loudness level as the drive rises,
+    // so the slider changes the colour, not the volume.
+    const gain = 1 + settings.drive * (MAX_DRIVE - 1);
+    drive.gain.setTargetAtTime(gain / MAX_DRIVE, now, 0.02);
+    makeup.gain.setTargetAtTime(1.3 / Math.sqrt(gain), now, 0.02);
+    volume.gain.setTargetAtTime(settings.volume ** 2, now, 0.02); // squared, so the slider feels even
+  }
+  update({});
+
+  return {
+    update,
+    start() {
+      if (timer) return;
+      step = 0;
+      gridTime = ctx.currentTime + 0.05;
+      tick();
+      timer = setInterval(tick, 25);
+    },
+    stop() {
+      clearInterval(timer);
+      timer = 0;
+      lights.length = 0;
+      lit = -1;
+      // Cancel every hit that is scheduled but not yet sounding; ringing tails finish on their own.
+      for (const entry of live) if (entry.at > ctx.currentTime) entry.source.stop();
+    },
+    // Audition one sound now — a tap on a step while stopped.
+    hit(id) {
+      voices[id](ctx.currentTime + 0.005);
+    },
+    // The newest step whose sound has reached the speakers; poll it from requestAnimationFrame.
+    playhead() {
+      // currentTime is what the engine has rendered; subtract the output latency for what is heard
+      // (it matters on Bluetooth headphones).
+      const heard = ctx.currentTime - (ctx.outputLatency || ctx.baseLatency || 0);
+      while (lights.length && lights[0].at <= heard) lit = lights.shift().step;
+      return lit;
+    },
+  };
+}
+
+const MAX_DRIVE = 10;
+
+// tanh(MAX_DRIVE·x) across the shaper's −1…1 input; the drive gain picks how far up the curve we go.
+function tanhCurve(k) {
+  const curve = new Float32Array(4096);
+  for (let i = 0; i < curve.length; i++) curve[i] = Math.tanh(k * ((i / (curve.length - 1)) * 2 - 1));
+  return curve;
+}
+
+function noiseBuffer(ctx) {
+  const buffer = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate);
+  const data = buffer.getChannelData(0);
+  for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
+  return buffer;
+}
+```
+
+A tap on a step toggles it, and while stopped it plays that sound so the
+person hears what they placed. Every slider writes through to the engine, and
+the scheduler reads the settings on its next step, so edits land in time
+without a restart. Grooves save to the database as one document each; the
+save button waits on `can.create`, the same verdict the server enforces.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useVibe, useViewer } from "use-vibes";
+import { Badge, Button, Card, Field, Heading, Icon, IconButton, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Slider } from "@vibes.diy/pouf/interactive";
+import { STEPS, TRACKS, getDrums } from "./lib/drum-engine.js";
+
+const START = {
+  kick: [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0],
+  snare: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
+  closed: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
+  open: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
+};
+
+function Knob({ label, value, min, max, step = 1, shown, onChange }) {
+  return (
+    <Stack gap={1}>
+      <Row gap={2} align="center">
+        <Text size="sm">{label}</Text>
+        <Spacer />
+        <Text size="sm" muted num>
+          {shown}
+        </Text>
+      </Row>
+      <Slider value={[value]} onChange={([v]) => onChange(v)} min={min} max={max} step={step} label={label} />
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("drumMachine");
+  const { me, can, ready } = useVibe("drumMachine");
+  const { requestLogin, ViewerTag } = useViewer();
+  const { docs: grooves } = useLiveQuery("type", { key: "groove" });
+
+  const [grid, setGrid] = useState(START);
+  const [bpm, setBpm] = useState(112);
+  const [swing, setSwing] = useState(0);
+  const [drive, setDrive] = useState(30);
+  const [volume, setVolume] = useState(80);
+  const [playing, setPlaying] = useState(false);
+  const [step, setStep] = useState(-1);
+  const [name, setName] = useState("");
+  const [saving, setSaving] = useState(false);
+  const drumsRef = useRef(null);
+
+  const settings = { pattern: grid, bpm, swing: swing / 100, drive: drive / 100, volume: volume / 100 };
+
+  // Every change reaches the engine; the scheduler reads it on its next step, so edits land in time.
+  useEffect(() => {
+    drumsRef.current?.update(settings);
+  }, [grid, bpm, swing, drive, volume]);
+
+  // Silence on leaving the page.
+  useEffect(() => () => drumsRef.current?.stop(), []);
+
+  // The lit step follows the sound: each frame asks the engine which step has reached the speakers.
+  useEffect(() => {
+    if (!playing) return;
+    let raf = 0;
+    const frame = () => {
+      setStep(drumsRef.current.playhead());
+      raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+    return () => cancelAnimationFrame(raf);
+  }, [playing]);
+
+  // Called synchronously at the top of a tap handler — that is what unlocks audio on iOS.
+  function drums() {
+    const engine = getDrums();
+    if (!drumsRef.current) engine.update(settings);
+    drumsRef.current = engine;
+    return engine;
+  }
+
+  function togglePlay() {
+    const engine = drums();
+    if (playing) {
+      engine.stop();
+      setStep(-1);
+    } else {
+      engine.start();
+    }
+    setPlaying(!playing);
+  }
+
+  function toggleStep(track, i) {
+    const engine = drums();
+    const on = !grid[track][i];
+    setGrid({ ...grid, [track]: grid[track].map((v, j) => (j === i ? (on ? 1 : 0) : v)) });
+    if (on && !playing) engine.hit(track); // hear the sound you just placed
+  }
+
+  function load(groove) {
+    setGrid(groove.grid);
+    setBpm(groove.bpm);
+    setSwing(groove.swing ?? 0);
+    setDrive(groove.drive ?? 30);
+  }
+
+  const draft = { type: "groove", name: name || "untitled", grid, bpm, swing, drive, authorHandle: me?.userHandle };
+  const verdict = can.create(draft);
+
+  // Clear the field as the save starts and hold the button until the write lands; a save that
+  // did not land hands the name back, keeping anything typed since.
+  async function save() {
+    const typed = name;
+    setSaving(true);
+    setName("");
+    try {
+      const result = await database.put({ ...draft, createdAt: Date.now() });
+      if (!result.ok) setName((now) => now || typed);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background text-foreground p-4 md:p-8">
+      <Stack gap={4}>
+        <Row gap={2} align="center" wrap>
+          <Heading level={1}>Drum machine</Heading>
+          <Spacer />
+          <Badge tone={playing ? "up" : "idle"}>{playing ? `Playing · ${bpm} bpm` : "Ready"}</Badge>
+        </Row>
+
+        <Card variant="tight">
+          <Stack gap={3}>
+            {TRACKS.map(({ id, label }) => (
+              <Stack key={id} gap={1}>
+                <Text size="sm" muted>
+                  {label}
+                </Text>
+                {/* Eight steps a line on a phone, all sixteen on a wider screen. */}
+                <div className="grid grid-cols-8 md:grid-cols-16 justify-items-center gap-1 select-none touch-manipulation">
+                  {Array.from({ length: STEPS }, (_, i) => {
+                    const on = Boolean(grid[id][i]);
+                    return (
+                      <IconButton
+                        key={i}
+                        size="sm"
+                        label={`${label} step ${i + 1}${on ? ", on" : ", off"}`}
+                        variant={on || i === step ? "solid" : "quiet"}
+                        tone={i === step ? "info" : on ? "up" : "idle"}
+                        icon={<Icon name={on ? "idle" : i % 4 === 0 ? "dots" : "off"} size="sm" />}
+                        onClick={() => toggleStep(id, i)}
+                      />
+                    );
+                  })}
+                </div>
+              </Stack>
+            ))}
+          </Stack>
+        </Card>
+
+        <Card variant="tight">
+          <Stack gap={3}>
+            <Row gap={2} align="center">
+              <Button onClick={togglePlay}>{playing ? "Stop" : "Play the drums"}</Button>
+              <Spacer />
+              <Button size="sm" variant="quiet" onClick={() => setGrid(Object.fromEntries(TRACKS.map(({ id }) => [id, Array(STEPS).fill(0)])))}>
+                Clear
+              </Button>
+            </Row>
+            <Knob label="Tempo" value={bpm} min={60} max={180} shown={`${bpm} bpm`} onChange={setBpm} />
+            <Knob label="Swing" value={swing} min={0} max={100} shown={`${swing}%`} onChange={setSwing} />
+            <Knob label="Saturation" value={drive} min={0} max={100} shown={`${drive}%`} onChange={setDrive} />
+            <Knob label="Volume" value={volume} min={0} max={100} shown={`${volume}%`} onChange={setVolume} />
+          </Stack>
+        </Card>
+
+        <Card variant="tight">
+          <Stack gap={3}>
+            <Heading level={2}>Saved grooves</Heading>
+            {!ready && (
+              <div aria-busy="true">
+                <Skeleton variant="row" />
+              </div>
+            )}
+            {ready && !me && (
+              <Row gap={2} align="center" wrap>
+                <Text muted>Sign in to save this groove.</Text>
+                <Button size="sm" variant="quiet" onClick={requestLogin}>
+                  Sign in
+                </Button>
+              </Row>
+            )}
+            {ready && me && verdict.ok && (
+              <Row gap={2} align="top" wrap>
+                <Field label="Groove name">{(id, d) => <Input id={id} describedBy={d} value={name} onChange={setName} />}</Field>
+                <Button size="sm" loading={saving} onClick={save}>
+                  Save groove
+                </Button>
+              </Row>
+            )}
+            {ready && me && !verdict.ok && <Text muted>Saving grooves is closed here. You can still play and load the saved ones.</Text>}
+            {grooves.map((g) => (
+              <Row key={g._id} gap={2} align="center" wrap>
+                <Button size="sm" variant="quiet" onClick={() => load(g)}>
+                  {g.name}
+                </Button>
+                <Text size="sm" muted num>
+                  {g.bpm} bpm
+                </Text>
+                {g.authorHandle && <ViewerTag userHandle={g.authorHandle} />}
+              </Row>
+            ))}
+          </Stack>
+        </Card>
+      </Stack>
+    </main>
+  );
+}
+```
+
 — End —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.178",
+  "version": "14.3.181",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -39,10 +39,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/api-types": "14.3.178",
-    "@vibes.diy/call-ai-v2": "14.3.178",
-    "@vibes.diy/identity": "14.3.178",
-    "@vibes.diy/use-vibes-types": "14.3.178",
+    "@vibes.diy/api-types": "14.3.181",
+    "@vibes.diy/call-ai-v2": "14.3.181",
+    "@vibes.diy/identity": "14.3.181",
+    "@vibes.diy/use-vibes-types": "14.3.181",
     "arktype": "~2.2.8",
     "json-schema-faker": "~0.6.3"
   },