fix: playhead/total reflect audible duration; stop kills lingering sounds

Playground bugs:
- "aynı sürede göstermiyor" — block-edge time (UI construct) was driving
  the playhead and the Total label, but the underlying preset only
  sounds for its recipe duration. Counter ran past the audio.
- "durma doğru çalışmıyor" — endPlayback() only stopped the pattern
  handle, leaving fire-and-forget sidebar previews and drop-blip plays
  running.

Library:
- PresetEntry gains an optional `durationMs` so consumers can size UI
  to actual audio length. Set on all 36 built-ins from each recipe's
  tail.
- _player: don't manually fireEnded() in the fadeOut > 0 branch — the
  scheduled source.stop(now + tail) lets onended fire it later. The
  zero-fade branch keeps the manual fire (onended doesn't reliably run
  synchronously after stop()).

Playground:
- compose: derive `total` and the play span from
  max(step.at + presetEntries[id].durationMs) so playhead, counter and
  audio all end together.
- compose: endPlayback() now also calls useSeslen.stopAll() so any
  lingering preview / drop-blip is killed when the user stops.

Tooling:
- .oxfmtrc.json: ignore web/src/routeTree.gen.ts (Tanstack-generated;
  oxfmt loops on it). Unblocks CI.
- package.json: keyword reorder from oxfmt sweep.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: productdevbook

.oxfmtrc.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/oxfmt/configuration_schema.json",
   "semi": false,
-  "ignorePatterns": ["CHANGELOG.md"]
+  "ignorePatterns": ["CHANGELOG.md", "web/src/routeTree.gen.ts"]
 }

package.json

@@ -20,8 +20,8 @@
     "offline-audio",
     "oscillator",
     "polyphony",
-    "preset",
     "prefers-reduced-motion",
+    "preset",
     "react",
     "render-to-wav",
     "ses",

src/_player.ts

@@ -96,12 +96,17 @@ export function startBuffer(
       } catch {
         // already stopped
       }
+      // `source.onended` will fire once the tail finishes — fireEnded()
+      // is called from there, so don't fire here too.
     } else {
       try {
         source.stop()
       } catch {
         // already stopped
       }
+      // `source.onended` may not fire synchronously after stop(); fire
+      // ourselves so callers see ended immediately. The handler below
+      // is idempotent (endedCb is nulled after the first call).
       fireEnded()
     }
   }

src/presets/_meta.ts

@@ -60,6 +60,11 @@ export interface PresetEntry {
    *  `createSeslen({ sources, defaults })`. Pure data — consumers can
    *  override on a per-call basis with `play(name, opts)`. */
   readonly defaults?: SourceDefaults
+  /** Approximate audible duration in milliseconds. Synthesised factories
+   *  don't expose `duration` on their `PlayHandle`, so this is the
+   *  metadata-side hint UIs need to show progress, sequence presets and
+   *  size waveform previews. Should match the recipe's tail. */
+  readonly durationMs?: number
   /** The synthesis function. */
   readonly factory: SoundFactory
 }

src/presets/add.ts

@@ -8,6 +8,7 @@ export const add: PresetEntry = {
   description: "A quick rising blip for adding items, ticking todos and incrementing counters.",
   tags: ["ui", "feedback", "chirp"],
   recipe: "sine 880→1480 Hz · 140 ms",
+  durationMs: 160,
   motion: "bounce",
   accent: "teal",
   factory(ctx, master, opts) {

src/presets/alarm.ts

@@ -8,6 +8,7 @@ export const alarm: PresetEntry = {
   description: "Repeating two-tone siren for sustained alarms and timed warnings.",
   tags: ["feedback", "warning"],
   recipe: "square 880↔660 Hz · 4 cycles · 800 ms",
+  durationMs: 840,
   motion: "shake",
   accent: "red",
   factory(ctx, master, opts) {

src/presets/coin.ts

@@ -8,6 +8,7 @@ export const coin: PresetEntry = {
   description: "Two-note metallic ping for coin pickups, points and item collections.",
   tags: ["game", "pickup"],
   recipe: "square 988 + 1320 Hz · 180 ms",
+  durationMs: 200,
   motion: "flash",
   accent: "yellow",
   factory(ctx, master, opts) {

src/presets/collapse.ts

@@ -8,6 +8,7 @@ export const collapse: PresetEntry = {
   description: "Falling arc for accordions, drawers and panels collapsing.",
   tags: ["ui", "transition"],
   recipe: "sine 990→330 Hz · 200 ms",
+  durationMs: 220,
   motion: "pulse",
   accent: "teal",
   factory(ctx, master, opts) {

src/presets/copy.ts

@@ -8,6 +8,7 @@ export const copy: PresetEntry = {
   description: "Bright two-tap blip for copy-to-clipboard confirmations.",
   tags: ["ui", "feedback"],
   recipe: "sine 1480 + 1480 Hz · 90 ms",
+  durationMs: 100,
   motion: "bounce",
   accent: "yellow",
   factory(ctx, master, opts) {

src/presets/delete.ts

@@ -8,6 +8,7 @@ export const deletePreset: PresetEntry = {
   description: "Filtered noise swoosh for removing items and dismissing dialogs.",
   tags: ["ui", "noise", "sweep"],
   recipe: "noise sweep 4 kHz→400 Hz · 200 ms",
+  durationMs: 220,
   motion: "swirl",
   accent: "purple",
   factory(ctx, master, opts) {