@vibes.diy/prompts 14.3.178 → 14.3.184

package/llms/use-vibe.md

@@ -85,13 +85,14 @@ Don't gate management UI on a display flag directly. Encode the rule in `access.
 
 Most apps work the moment they open. Some need their owner to do one thing first — paste a key, save a billing portal, connect an account — and that is a property of the app, not of any one integration, so every app that has it takes the same shape. An app has at most one **Setup** surface, and the backend's verdict decides its state, never a display flag. The integration skills (Stripe, Spotify, YouTube) each contribute one item to it: what the app needs, how the backend checks it, and the linked steps in the provider's own words.
 
-**The backend answers what the app needs and whether each item is done.** A `/setup` route in `backend.js`, called with `apiFetch` so `ctx.userInfo` is set, lists the items — the key is present, the portal is saved, the account is connected — with `done` read from `ctx.secrets` or the connection, and `ready` when every item is done. An item whose verdict costs a provider call (is the portal saved?) is asked on the owner's call alone and kept in a document the backend writes; a visitor's read takes the kept value, so visitor traffic spends nothing of the provider's and a blip there keeps the last verdict. The Setup surface is the owner's alone: the backend decides who the owner is, and non-owners never receive the items. Each step is a link to the exact page in that page's own words, with the vibe's real handle and slug filled in from what the backend hands the client. The route carries `ownerHandle` and `appSlug` from `ctx.appInfo`, so the Settings link (`https://vibes.diy/vibes/mine/<ownerHandle>/<appSlug>/settings`, **Secrets**) and the CLI line (`npx vibes-diy secrets set KEY --vibe <ownerHandle>/<appSlug>`) are copy-ready rather than templates.
+**The backend answers what the app needs and whether each item is done.** A `/setup` route in `backend.js`, called with `apiFetch` so `ctx.userInfo` is set, lists the items — the key is present, the portal is saved, the account is connected — with `done` read from `ctx.secrets`, the connection or `ctx.stripe.status()`, and `ready` when every item is done. An item whose verdict costs a provider call (is the portal saved?) is asked on the owner's call alone and kept in a document the backend writes; a visitor's read takes the kept value, so visitor traffic spends nothing of the provider's and a blip there keeps the last verdict. The Setup surface is the owner's alone: the backend decides who the owner is, and non-owners never receive the items. Each step is a link to the exact page in that page's own words, with the vibe's real handle and slug filled in from what the backend hands the client. The route carries `ownerHandle` and `appSlug` from `ctx.appInfo`, so the Settings link (`https://vibes.diy/vibes/mine/<ownerHandle>/<appSlug>/settings`, **Secrets**) and the CLI line (`npx vibes-diy secrets set KEY --vibe <ownerHandle>/<appSlug>`) are copy-ready rather than templates.
 
 ```js
 // backend.js — the verdict for everyone, the items for the owner alone
 if (url.pathname === "/setup" && request.method === "GET") {
   const owner = ctx.userInfo?.userHandle === ctx.appInfo.ownerHandle;
-  const items = [{ id: "stripe-key", label: "Stripe secret key", done: Boolean(ctx.secrets.STRIPE_SECRET_KEY) }];
+  const stripe = await ctx.stripe.status(); // the stripe skill picks the mode: test until the owner takes this app live
+  const items = [{ id: "stripe-connect", label: "Connect Stripe", done: stripe.test.state === "ready" }];
   const ready = items.every((item) => item.done);
   if (!owner) return json({ ok: true, ready, owner });
   return json({ ok: true, ready, owner, items, ownerHandle: ctx.appInfo.ownerHandle, appSlug: ctx.appInfo.appSlug });
@@ -132,8 +133,8 @@ function SetupScreen({ setup }) {
           <Row gap={2}><Text>{item.label}</Text><Badge tone={item.done ? "up" : "info"}>{item.done ? "Done" : "To do"}</Badge></Row>
           {/* the skill's steps: each one a link to the exact page, in that page's own words */}
           <ol>
-            <li>Open Stripe's <a href="https://dashboard.stripe.com/test/apikeys" target="_blank" rel="noreferrer">API keys page (test mode)</a> and press <b>Reveal test key</b> beside <b>Secret key</b>.</li>
-            <li>Open <a href={`https://vibes.diy/vibes/mine/${vibe}/settings`} target="_blank" rel="noreferrer">this vibe's Settings tab</a>; under <b>Secrets</b>, enter <code>STRIPE_SECRET_KEY</code>, paste the value, and save.</li>
+            <li>Open <a href={`https://vibes.diy/vibes/mine/${vibe}/settings`} target="_blank" rel="noreferrer">this vibe's Settings tab</a> and press <b>Connect Stripe</b> under <b>Payments</b>; Stripe opens its own setup pages.</li>
+            <li>Come back here: the feature unlocks as soon as Stripe says the account is ready.</li>
           </ol>
         </Stack>
       ))}

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.184",
   "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.184",
+    "@vibes.diy/call-ai-v2": "14.3.184",
+    "@vibes.diy/identity": "14.3.184",
+    "@vibes.diy/use-vibes-types": "14.3.184",
     "arktype": "~2.2.8",
     "json-schema-faker": "~0.6.3"
   },