Remove PicoGL dependency

This change makes the following demo works: `s("bd").uniform("rot")`

.eslintignore

@@ -23,3 +23,4 @@ reverbGen.mjs
 hydra.mjs
 jsdoc-synonyms.js
 packages/hs2js/src/hs2js.mjs
+samples

examples/codemirror-repl/main.js

@@ -29,6 +29,7 @@ const editor = new StrudelMirror({
       import('@strudel/core'),
       import('@strudel/draw'),
       import('@strudel/mini'),
+      import('@strudel/shader'),
       import('@strudel/tonal'),
       import('@strudel/webaudio'),
     );

package.json

@@ -56,18 +56,18 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.9",
-    "@vitest/ui": "^1.1.0",
-    "acorn": "^8.11.3",
+    "@vitest/ui": "^2.1.3",
+    "acorn": "^8.13.0",
     "dependency-tree": "^10.0.9",
     "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "events": "^3.3.0",
-    "jsdoc": "^4.0.2",
+    "jsdoc": "^4.0.3",
     "jsdoc-json": "^2.0.2",
     "jsdoc-to-markdown": "^8.0.0",
-    "lerna": "^8.0.1",
-    "prettier": "^3.1.1",
+    "lerna": "^8.1.8",
+    "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

packages/codemirror/codemirror.mjs

@@ -99,10 +99,8 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
           },
           {
             key: 'Alt-.',
-            run: (_, e) => {
-              e.preventDefault();
-              onStop?.();
-            },
+            preventDefault: true,
+            run: () => onStop?.(),
           },
           /* {
           key: 'Ctrl-Shift-.',

packages/core/clockworker.js

@@ -4,9 +4,9 @@
 // import createClock from './zyklus.mjs';
 
 function getTime() {
-  const precision = 10 ** 4;
-  const seconds = performance.now() / 1000;
-  return Math.round(seconds * precision) / precision;
+  const seconds = performance.now() * 0.001;
+  return seconds;
+  // return Math.round(seconds * precision) / precision;
 }
 
 let num_cycles_at_cps_change = 0;
@@ -24,27 +24,20 @@ const sendMessage = (type, payload) => {
 
 const sendTick = (phase, duration, tick, time) => {
   const num_seconds_since_cps_change = num_ticks_since_cps_change * duration;
-
   const tickdeadline = phase - time;
   const lastTick = time + tickdeadline;
   const num_cycles_since_cps_change = num_seconds_since_cps_change * cps;
-
   const begin = num_cycles_at_cps_change + num_cycles_since_cps_change;
   const secondsSinceLastTick = time - lastTick - duration;
-
   const eventLength = duration * cps;
   const end = begin + eventLength;
-
   const cycle = begin + secondsSinceLastTick * cps;
 
   sendMessage('tick', {
     begin,
     end,
     cps,
-    tickdeadline,
-    num_cycles_at_cps_change,
-    num_seconds_at_cps_change,
-    num_seconds_since_cps_change,
+    time,
     cycle,
   });
   num_ticks_since_cps_change++;

packages/core/controls.mjs

@@ -454,9 +454,6 @@ export const { drive } = registerControl('drive');
  */
 export const { channels, ch } = registerControl('channels', 'ch');
 
-// superdirt only
-export const { phaserrate, phasr } = registerControl('phaserrate', 'phasr');
-
 /**
  * Phaser audio effect that approximates popular guitar pedals.
  *
@@ -468,7 +465,11 @@ export const { phaserrate, phasr } = registerControl('phaserrate', 'phasr');
  * .phaser("<1 2 4 8>")
  *
  */
-export const { phaser, ph } = registerControl(['phaser', 'phaserdepth', 'phasercenter', 'phasersweep'], 'ph');
+export const { phaserrate, ph, phaser } = registerControl(
+  ['phaserrate', 'phaserdepth', 'phasercenter', 'phasersweep'],
+  'ph',
+  'phaser',
+);
 
 /**
  * The frequency sweep range of the lfo for the phaser effect. Defaults to 2000

packages/core/neocyclist.mjs

@@ -5,6 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { logger } from './logger.mjs';
+import { ClockCollator, cycleToSeconds } from './util.mjs';
 
 export class NeoCyclist {
   constructor({ onTrigger, onToggle, getTime }) {
@@ -13,79 +14,38 @@ export class NeoCyclist {
     this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.getTime = getTime; // get absolute time
     this.time_at_last_tick_message = 0;
-
-    this.num_cycles_at_cps_change = 0;
+    // the clock of the worker and the audio context clock can drift apart over time
+    // aditionally, the message time of the worker pinging the callback to process haps can be inconsistent.
+    // we need to keep a rolling average of the time difference between the worker clock and audio context clock
+    // in order to schedule events consistently.
+    this.collator = new ClockCollator({ getTargetClockTime: getTime });
     this.onToggle = onToggle;
     this.latency = 0.1; // fixed trigger time offset
     this.cycle = 0;
     this.id = Math.round(Date.now() * Math.random());
-    this.worker_time_dif;
     this.worker = new SharedWorker(new URL('./clockworker.js', import.meta.url));
     this.worker.port.start();
-
     this.channel = new BroadcastChannel('strudeltick');
-    let weight = 0; // the amount of weight that is applied to the current average when averaging a new time dif
-    const maxWeight = 20;
-    const precision = 10 ** 3; //round off time diff to prevent accumulating outliers
-
-    // the clock of the worker and the audio context clock can drift apart over time
-    // aditionally, the message time of the worker pinging the callback to process haps can be inconsistent.
-    // we need to keep a rolling weighted average of the time difference between the worker clock and audio context clock
-    // in order to schedule events consistently.
-    const setTimeReference = (num_seconds_at_cps_change, num_seconds_since_cps_change, tickdeadline) => {
-      const time_dif = getTime() - (num_seconds_at_cps_change + num_seconds_since_cps_change) + tickdeadline;
-      if (this.worker_time_dif == null) {
-        this.worker_time_dif = time_dif;
-      } else {
-        const w = 1; //weight of new time diff;
-        const new_dif =
-          Math.round(((this.worker_time_dif * weight + time_dif * w) / (weight + w)) * precision) / precision;
-
-        if (new_dif != this.worker_time_dif) {
-          // reset the weight so the clock recovers faster from an audio context freeze/dropout if it happens
-          weight = 4;
-        }
-        this.worker_time_dif = new_dif;
-      }
-      weight = Math.min(weight + 1, maxWeight);
-    };
-
     const tickCallback = (payload) => {
-      const {
-        num_cycles_at_cps_change,
-        cps,
-        num_seconds_at_cps_change,
-        num_seconds_since_cps_change,
-        begin,
-        end,
-        tickdeadline,
-        cycle,
-      } = payload;
+      const { cps, begin, end, cycle, time } = payload;
       this.cps = cps;
       this.cycle = cycle;
-
-      setTimeReference(num_seconds_at_cps_change, num_seconds_since_cps_change, tickdeadline);
-
-      processHaps(begin, end, num_cycles_at_cps_change, num_seconds_at_cps_change);
-
-      this.time_at_last_tick_message = this.getTime();
+      const currentTime = this.collator.calculateOffset(time) + time;
+      processHaps(begin, end, currentTime);
+      this.time_at_last_tick_message = currentTime;
     };
 
-    const processHaps = (begin, end, num_cycles_at_cps_change, seconds_at_cps_change) => {
+    const processHaps = (begin, end, currentTime) => {
       if (this.started === false) {
         return;
       }
 
       const haps = this.pattern.queryArc(begin, end, { _cps: this.cps });
-
       haps.forEach((hap) => {
         if (hap.hasOnset()) {
-          const targetTime =
-            (hap.whole.begin - num_cycles_at_cps_change) / this.cps +
-            seconds_at_cps_change +
-            this.latency +
-            this.worker_time_dif;
-          const duration = hap.duration / this.cps;
+          const timeUntilTrigger = cycleToSeconds(hap.whole.begin - this.cycle, this.cps);
+          const targetTime = timeUntilTrigger + currentTime + this.latency;
+          const duration = cycleToSeconds(hap.duration, this.cps);
           onTrigger?.(hap, 0, duration, this.cps, targetTime);
         }
       });
@@ -129,8 +89,8 @@ export class NeoCyclist {
     this.setStarted(true);
   }
   stop() {
-    this.worker_time_dif = null;
     logger('[cyclist] stop');
+    this.collator.reset();
     this.setStarted(false);
   }
   setPattern(pat, autostart = false) {

packages/core/package.json

@@ -36,6 +36,6 @@
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
     "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

packages/core/pattern.mjs

@@ -386,6 +386,15 @@ export class Pattern {
     return this.fmap(func).squeezeJoin();
   }
 
+  polyJoin = function () {
+    const pp = this;
+    return pp.fmap((p) => p.s_extend(pp.tactus.div(p.tactus))).outerJoin();
+  };
+
+  polyBind(func) {
+    return this.fmap(func).polyJoin();
+  }
+
   //////////////////////////////////////////////////////////////////////
   // Utility methods mainly for internal use
 
@@ -754,6 +763,10 @@ export class Pattern {
     const otherPat = reify(other);
     return otherPat.fmap((b) => this.fmap((a) => func(a)(b))).restartJoin();
   }
+  _opPoly(other, func) {
+    const otherPat = reify(other);
+    return this.fmap((b) => otherPat.fmap((a) => func(a)(b))).polyJoin();
+  }
 
   //////////////////////////////////////////////////////////////////////
   // End-user methods.
@@ -796,15 +809,6 @@ export class Pattern {
   //////////////////////////////////////////////////////////////////////
   // Multi-pattern functions
 
-  /**
-   * Stacks the given pattern(s) to the current pattern.
-   * @name stack
-   * @memberof Pattern
-   * @example
-   * s("hh*4").stack(
-   *   note("c4(5,8)")
-   * )
-   */
   stack(...pats) {
     return stack(this, ...pats);
   }
@@ -813,30 +817,9 @@ export class Pattern {
     return sequence(this, ...pats);
   }
 
-  /**
-   * Appends the given pattern(s) to the current pattern.
-   * @name seq
-   * @memberof Pattern
-   * @synonyms sequence, fastcat
-   * @example
-   * s("hh*4").seq(
-   *   note("c4(5,8)")
-   * )
-   */
   seq(...pats) {
     return sequence(this, ...pats);
   }
-
-  /**
-   * Appends the given pattern(s) to the next cycle.
-   * @name cat
-   * @memberof Pattern
-   * @synonyms slowcat
-   * @example
-   * s("hh*4").cat(
-   *   note("c4(5,8)")
-   * )
-   */
   cat(...pats) {
     return cat(this, ...pats);
   }
@@ -1062,7 +1045,7 @@ function _composeOp(a, b, func) {
     func: [(a, b) => b(a)],
   };
 
-  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart'];
+  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart', 'Poly'];
 
   // generate methods to do what and how
   for (const [what, [op, preprocess]] of Object.entries(composers)) {
@@ -1267,6 +1250,12 @@ export function reify(thing) {
  * @example
  * stack("g3", "b3", ["e4", "d4"]).note()
  * // "g3,b3,[e4,d4]".note()
+ *
+ * @example
+ * // As a chained function:
+ * s("hh*4").stack(
+ *   note("c4(5,8)")
+ * )
  */
 export function stack(...pats) {
   // Array test here is to avoid infinite recursions..
@@ -1395,6 +1384,11 @@ export function slowcatPrime(...pats) {
  * cat("e5", "b4", ["d5", "c5"]).note()
  * // "<e5 b4 [d5 c5]>".note()
  *
+ * @example
+ * // As a chained function:
+ * s("hh*4").cat(
+ *    note("c4(5,8)")
+ * )
  */
 export function cat(...pats) {
   return slowcat(...pats);
@@ -1417,6 +1411,36 @@ export function arrange(...sections) {
   return s_cat(...sections).slow(total);
 }
 
+/**
+ * Similarly to `arrange`, allows you to arrange multiple patterns together over multiple cycles.
+ * Unlike `arrange`, you specify a start and stop time for each pattern rather than duration, which
+ * means that patterns can overlap.
+ * @return {Pattern}
+ * @example
+seqPLoop([0, 2, "bd(3,8)"],
+         [1, 3, "cp(3,8)"]
+        )
+  .sound()
+ */
+export function seqPLoop(...parts) {
+  let total = Fraction(0);
+  const pats = [];
+  for (let part of parts) {
+    if (part.length == 2) {
+      part.unshift(total);
+    }
+    total = part[1];
+  }
+
+  return stack(
+    ...parts.map(([start, stop, pat]) =>
+      pure(reify(pat)).compress(Fraction(start).div(total), Fraction(stop).div(total)),
+    ),
+  )
+    .slow(total)
+    .innerJoin(); // or resetJoin or restartJoin ??
+}
+
 export function fastcat(...pats) {
   let result = slowcat(...pats);
   if (pats.length > 1) {
@@ -1435,12 +1459,18 @@ export function sequence(...pats) {
 }
 
 /** Like **cat**, but the items are crammed into one cycle.
- * @synonyms fastcat, sequence
+ * @synonyms sequence, fastcat
  * @example
  * seq("e5", "b4", ["d5", "c5"]).note()
  * // "e5 b4 [d5 c5]".note()
  *
+ * @example
+ * // As a chained function:
+ * s("hh*4").seq(
+ *   note("c4(5,8)")
+ * )
  */
+
 export function seq(...pats) {
   return fastcat(...pats);
 }
@@ -2003,6 +2033,34 @@ export const { zoomArc, zoomarc } = register(['zoomArc', 'zoomarc'], function (a
   return pat.zoom(a.begin, a.end);
 });
 
+/**
+ * Splits a pattern into the given number of slices, and plays them according to a pattern of slice numbers.
+ * Similar to `slice`, but slices up patterns rather than sound samples.
+ * @param {number} number of slices
+ * @param {number} slices to play
+ * @example
+ * note("0 1 2 3 4 5 6 7".scale('c:mixolydian'))
+ *.bite(4, "3 2 1 0")
+ * @example
+ * sound("bd - bd bd*2, - sd:6 - sd:5 sd:1 - [- sd:2] -, hh [- cp:7]")
+  .bank("RolandTR909").speed(1.2)
+  .bite(4, "0 0 [1 2] <3 2> 0 0 [2 1] 3")
+ */
+export const bite = register(
+  'bite',
+  (npat, ipat, pat) => {
+    return ipat
+      .fmap((i) => (n) => {
+        const a = Fraction(i).div(n).mod(1);
+        const b = a.add(Fraction(1).div(n));
+        return pat.zoom(a, b);
+      })
+      .appLeft(npat)
+      .squeezeJoin();
+  },
+  false,
+);
+
 /**
  * Selects the given fraction of the pattern and repeats that part to fill the remainder of the cycle.
  * @param {number} fraction fraction to select
@@ -2434,6 +2492,37 @@ Pattern.prototype.tag = function (tag) {
   return this.withContext((ctx) => ({ ...ctx, tags: (ctx.tags || []).concat([tag]) }));
 };
 
+/**
+ * Filters haps using the given function
+ * @name filter
+ * @param {Function} test function to test Hap
+ * @example
+ * s("hh!7 oh").filter(hap => hap.value.s==='hh')
+ */
+export const filter = register('filter', (test, pat) => pat.withHaps((haps) => haps.filter(test)));
+
+/**
+ * Filters haps by their begin time
+ * @name filterWhen
+ * @noAutocomplete
+ * @param {Function} test function to test Hap.whole.begin
+ */
+export const filterWhen = register('filterWhen', (test, pat) => pat.filter((h) => test(h.whole.begin)));
+
+/**
+ * Use within to apply a function to only a part of a pattern.
+ * @name within
+ * @param {number} start start within cycle (0 - 1)
+ * @param {number} end end within cycle (0 - 1). Must be > start
+ * @param {Function} func function to be applied to the sub-pattern
+ */
+export const within = register('within', (a, b, fn, pat) =>
+  stack(
+    fn(pat.filterWhen((t) => t.cyclePos() >= a && t.cyclePos() <= b)),
+    pat.filterWhen((t) => t.cyclePos() < a || t.cyclePos() > b),
+  ),
+);
+
 //////////////////////////////////////////////////////////////////////
 // Tactus-related functions, i.e. ones that do stepwise
 // transformations
@@ -2944,11 +3033,14 @@ export const { loopAt, loopat } = register(['loopAt', 'loopat'], function (facto
 export const fit = register('fit', (pat) =>
   pat.withHaps((haps, state) =>
     haps.map((hap) =>
-      hap.withValue((v) => ({
-        ...v,
-        speed: (state.controls._cps || 1) / hap.whole.duration,
-        unit: 'c',
-      })),
+      hap.withValue((v) => {
+        const slicedur = ('end' in v ? v.end : 1) - ('begin' in v ? v.begin : 0);
+        return {
+          ...v,
+          speed: ((state.controls._cps || 1) / hap.whole.duration) * slicedur,
+          unit: 'c',
+        };
+      }),
     ),
   ),
 );

packages/core/signal.mjs

@@ -138,7 +138,7 @@ const timeToRand = (x) => Math.abs(intSeedToRand(timeToIntSeed(x)));
 const timeToRandsPrime = (seed, n) => {
   const result = [];
   // eslint-disable-next-line
-  for (let i = 0; i < n; ++n) {
+  for (let i = 0; i < n; ++i) {
     result.push(intSeedToRand(seed));
     seed = xorwise(seed);
   }
@@ -159,6 +159,50 @@ const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);
  */
 export const run = (n) => saw.range(0, n).floor().segment(n);
 
+export const randrun = (n) => {
+  return signal((t) => {
+    // Without adding 0.5, the first cycle is always 0,1,2,3,...
+    const rands = timeToRands(t.floor().add(0.5), n);
+    const nums = rands
+      .map((n, i) => [n, i])
+      .sort((a, b) => a[0] > b[0] - a[0] < b[0])
+      .map((x) => x[1]);
+    const i = t.cyclePos().mul(n).floor() % n;
+    return nums[i];
+  })._segment(n);
+};
+
+const _rearrangeWith = (ipat, n, pat) => {
+  const pats = [...Array(n).keys()].map((i) => pat.zoom(Fraction(i).div(n), Fraction(i + 1).div(n)));
+  return ipat.fmap((i) => pats[i].repeatCycles(n)._fast(n)).innerJoin();
+};
+
+/**
+ * @name shuffle
+ * Slices a pattern into the given number of parts, then plays those parts in random order.
+ * Each part will be played exactly once per cycle.
+ * @example
+ * note("c d e f").sound("piano").shuffle(4)
+ * @example
+ * note("c d e f".shuffle(4), "g").sound("piano")
+ */
+export const shuffle = register('shuffle', (n, pat) => {
+  return _rearrangeWith(randrun(n), n, pat);
+});
+
+/**
+ * @name scramble
+ * Slices a pattern into the given number of parts, then plays those parts at random. Similar to `shuffle`,
+ * but parts might be played more than once, or not at all, per cycle.
+ * @example
+ * note("c d e f").sound("piano").scramble(4)
+ * @example
+ * note("c d e f".scramble(4), "g").sound("piano")
+ */
+export const scramble = register('scramble', (n, pat) => {
+  return _rearrangeWith(_irand(n)._segment(n), n, pat);
+});
+
 /**
  * A continuous pattern of random numbers, between 0 and 1.
  *

packages/core/util.mjs

@@ -363,6 +363,76 @@ export function objectMap(obj, fn) {
   }
   return Object.fromEntries(Object.entries(obj).map(([k, v], i) => [k, fn(v, k, i)]));
 }
+export function cycleToSeconds(cycle, cps) {
+  return cycle / cps;
+}
+
+// utility for averaging two clocks together to account for drift
+export class ClockCollator {
+  constructor({
+    getTargetClockTime = getUnixTimeSeconds,
+    weight = 16,
+    offsetDelta = 0.005,
+    checkAfterTime = 2,
+    resetAfterTime = 8,
+  }) {
+    this.offsetTime;
+    this.timeAtPrevOffsetSample;
+    this.prevOffsetTimes = [];
+    this.getTargetClockTime = getTargetClockTime;
+    this.weight = weight;
+    this.offsetDelta = offsetDelta;
+    this.checkAfterTime = checkAfterTime;
+    this.resetAfterTime = resetAfterTime;
+    this.reset = () => {
+      this.prevOffsetTimes = [];
+      this.offsetTime = null;
+      this.timeAtPrevOffsetSample = null;
+    };
+  }
+  calculateOffset(currentTime) {
+    const targetClockTime = this.getTargetClockTime();
+    const diffBetweenTimeSamples = targetClockTime - this.timeAtPrevOffsetSample;
+    const newOffsetTime = targetClockTime - currentTime;
+    // recalcuate the diff from scratch if the clock has been paused for some time.
+    if (diffBetweenTimeSamples > this.resetAfterTime) {
+      this.reset();
+    }
+
+    if (this.offsetTime == null) {
+      this.offsetTime = newOffsetTime;
+    }
+    this.prevOffsetTimes.push(newOffsetTime);
+    if (this.prevOffsetTimes.length > this.weight) {
+      this.prevOffsetTimes.shift();
+    }
+
+    // after X time has passed, the average of the previous weight offset times is calculated and used as a stable reference
+    // for calculating the timestamp
+    if (this.timeAtPrevOffsetSample == null || diffBetweenTimeSamples > this.checkAfterTime) {
+      this.timeAtPrevOffsetSample = targetClockTime;
+      const rollingOffsetTime = averageArray(this.prevOffsetTimes);
+      //when the clock offsets surpass the delta, set the new reference time
+      if (Math.abs(rollingOffsetTime - this.offsetTime) > this.offsetDelta) {
+        this.offsetTime = rollingOffsetTime;
+      }
+    }
+
+    return this.offsetTime;
+  }
+
+  calculateTimestamp(currentTime, targetTime) {
+    return this.calculateOffset(currentTime) + targetTime;
+  }
+}
+
+export function getPerformanceTimeSeconds() {
+  return performance.now() * 0.001;
+}
+
+function getUnixTimeSeconds() {
+  return Date.now() * 0.001;
+}
 
 // Floating point versions, see Fraction for rational versions
 // // greatest common divisor

packages/desktopbridge/oscbridge.mjs

@@ -1,64 +1,36 @@
-import { parseNumeral, Pattern, averageArray } from '@strudel/core';
+import { Pattern, ClockCollator } from '@strudel/core';
+import { parseControlsFromHap } from 'node_modules/@strudel/osc/osc.mjs';
 import { Invoke } from './utils.mjs';
 
-let offsetTime;
-let timeAtPrevOffsetSample;
-let prevOffsetTimes = [];
+const collator = new ClockCollator({});
 
-Pattern.prototype.osc = function () {
-  return this.onTrigger(async (time, hap, currentTime, cps = 1, targetTime) => {
-    hap.ensureObjectValue();
-    const cycle = hap.wholeOrPart().begin.valueOf();
-    const delta = hap.duration.valueOf();
-    const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
-    // make sure n and note are numbers
-    controls.n && (controls.n = parseNumeral(controls.n));
-    controls.note && (controls.note = parseNumeral(controls.note));
+export async function oscTriggerTauri(t_deprecate, hap, currentTime, cps = 1, targetTime) {
+  const controls = parseControlsFromHap(hap, cps);
+  const params = [];
+  const timestamp = collator.calculateTimestamp(currentTime, targetTime);
 
-    const params = [];
+  Object.keys(controls).forEach((key) => {
+    const val = controls[key];
+    const value = typeof val === 'number' ? val.toString() : val;
 
-    const unixTimeSecs = Date.now() / 1000;
-    const newOffsetTime = unixTimeSecs - currentTime;
-    if (offsetTime == null) {
-      offsetTime = newOffsetTime;
-    }
-    prevOffsetTimes.push(newOffsetTime);
-    if (prevOffsetTimes.length > 8) {
-      prevOffsetTimes.shift();
-    }
-    // every two seconds, the average of the previous 8 offset times is calculated and used as a stable reference
-    // for calculating the timestamp that will be sent to the backend
-    if (timeAtPrevOffsetSample == null || unixTimeSecs - timeAtPrevOffsetSample > 2) {
-      timeAtPrevOffsetSample = unixTimeSecs;
-      const rollingOffsetTime = averageArray(prevOffsetTimes);
-      //account for the js clock freezing or resets set the new offset
-      if (Math.abs(rollingOffsetTime - offsetTime) > 0.01) {
-        offsetTime = rollingOffsetTime;
-      }
-    }
-
-    const timestamp = offsetTime + targetTime;
-
-    Object.keys(controls).forEach((key) => {
-      const val = controls[key];
-      const value = typeof val === 'number' ? val.toString() : val;
-
-      if (value == null) {
-        return;
-      }
-      params.push({
-        name: key,
-        value,
-        valueisnumber: typeof val === 'number',
-      });
-    });
-
-    if (params.length === 0) {
+    if (value == null) {
       return;
     }
-    const message = { target: '/dirt/play', timestamp, params };
-    setTimeout(() => {
-      Invoke('sendosc', { messagesfromjs: [message] });
+    params.push({
+      name: key,
+      value,
+      valueisnumber: typeof val === 'number',
     });
   });
+
+  if (params.length === 0) {
+    return;
+  }
+  const message = { target: '/dirt/play', timestamp, params };
+  setTimeout(() => {
+    Invoke('sendosc', { messagesfromjs: [message] });
+  });
+}
+Pattern.prototype.osc = function () {
+  return this.onTrigger(oscTriggerTauri);
 };

packages/midi/midi.mjs

@@ -169,13 +169,18 @@ const refs = {};
 export async function midin(input) {
   if (isPattern(input)) {
     throw new Error(
-      `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${
+      `midin: does not accept Pattern as input. Make sure to pass device name with single quotes. Example: midin('${
         WebMidi.outputs?.[0]?.name || 'IAC Driver Bus 1'
       }')`,
     );
   }
   const initial = await enableWebMidi(); // only returns on first init
   const device = getDevice(input, WebMidi.inputs);
+  if (!device) {
+    throw new Error(
+      `midiin: device "${input}" not found.. connected devices: ${getMidiDeviceNamesString(WebMidi.inputs)}`,
+    );
+  }
   if (initial) {
     const otherInputs = WebMidi.inputs.filter((o) => o.name !== device.name);
     logger(

packages/mini/package.json

@@ -37,6 +37,6 @@
   "devDependencies": {
     "peggy": "^3.0.2",
     "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

packages/osc/osc.mjs

@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import OSC from 'osc-js';
 
-import { logger, parseNumeral, Pattern, getEventOffsetMs, isNote, noteToMidi } from '@strudel/core';
+import { logger, parseNumeral, Pattern, isNote, noteToMidi, ClockCollator } from '@strudel/core';
 
 let connection; // Promise<OSC>
 function connect() {
@@ -34,6 +34,44 @@ function connect() {
   return connection;
 }
 
+export function parseControlsFromHap(hap, cps) {
+  hap.ensureObjectValue();
+  const cycle = hap.wholeOrPart().begin.valueOf();
+  const delta = hap.duration.valueOf();
+  const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
+  // make sure n and note are numbers
+  controls.n && (controls.n = parseNumeral(controls.n));
+  if (typeof controls.note !== 'undefined') {
+    if (isNote(controls.note)) {
+      controls.midinote = noteToMidi(controls.note, controls.octave || 3);
+    } else {
+      controls.note = parseNumeral(controls.note);
+    }
+  }
+  controls.bank && (controls.s = controls.bank + controls.s);
+  controls.roomsize && (controls.size = parseNumeral(controls.roomsize));
+  // speed adjustment for CPS is handled on the DSP side in superdirt and pattern side in Strudel,
+  // so we need to undo the adjustment before sending the message to superdirt.
+  controls.unit === 'c' && controls.speed != null && (controls.speed = controls.speed / cps);
+  const channels = controls.channels;
+  channels != undefined && (controls.channels = JSON.stringify(channels));
+  return controls;
+}
+
+const collator = new ClockCollator({});
+
+export async function oscTrigger(t_deprecate, hap, currentTime, cps = 1, targetTime) {
+  const osc = await connect();
+  const controls = parseControlsFromHap(hap, cps);
+  const keyvals = Object.entries(controls).flat();
+
+  const ts = Math.round(collator.calculateTimestamp(currentTime, targetTime) * 1000);
+  const message = new OSC.Message('/dirt/play', ...keyvals);
+  const bundle = new OSC.Bundle([message], ts);
+  bundle.timestamp(ts); // workaround for https://github.com/adzialocha/osc-js/issues/60
+  osc.send(bundle);
+}
+
 /**
  *
  * Sends each hap as an OSC message, which can be picked up by SuperCollider or any other OSC-enabled software.
@@ -44,33 +82,5 @@ function connect() {
  * @returns Pattern
  */
 Pattern.prototype.osc = function () {
-  return this.onTrigger(async (time, hap, currentTime, cps = 1, targetTime) => {
-    hap.ensureObjectValue();
-    const osc = await connect();
-    const cycle = hap.wholeOrPart().begin.valueOf();
-    const delta = hap.duration.valueOf();
-    const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
-    // make sure n and note are numbers
-    controls.n && (controls.n = parseNumeral(controls.n));
-    if (typeof controls.note !== 'undefined') {
-      if (isNote(controls.note)) {
-        controls.midinote = noteToMidi(controls.note, controls.octave || 3);
-      } else {
-        controls.note = parseNumeral(controls.note);
-      }
-    }
-    controls.bank && (controls.s = controls.bank + controls.s);
-    controls.roomsize && (controls.size = parseNumeral(controls.roomsize));
-    const keyvals = Object.entries(controls).flat();
-    // time should be audio time of onset
-    // currentTime should be current time of audio context (slightly before time)
-    const offset = getEventOffsetMs(targetTime, currentTime);
-
-    // timestamp in milliseconds used to trigger the osc bundle at a precise moment
-    const ts = Math.floor(Date.now() + offset);
-    const message = new OSC.Message('/dirt/play', ...keyvals);
-    const bundle = new OSC.Bundle([message], ts);
-    bundle.timestamp(ts); // workaround for https://github.com/adzialocha/osc-js/issues/60
-    osc.send(bundle);
-  });
+  return this.onTrigger(oscTrigger);
 };

packages/osc/superdirtoutput.js

@@ -0,0 +1,10 @@
+import { oscTriggerTauri } from '../desktopbridge/oscbridge.mjs';
+import { isTauri } from '../desktopbridge/utils.mjs';
+import { oscTrigger } from './osc.mjs';
+
+const trigger = isTauri() ? oscTriggerTauri : oscTrigger;
+
+export const superdirtOutput = (hap, deadline, hapDuration, cps, targetTime) => {
+  const currentTime = performance.now() / 1000;
+  return trigger(null, hap, currentTime, cps, targetTime);
+};

packages/repl/prebake.mjs

@@ -12,6 +12,7 @@ export async function prebake() {
     import('@strudel/webaudio'),
     import('@strudel/codemirror'),
     import('@strudel/hydra'),
+    import('@strudel/shader'),
     import('@strudel/soundfonts'),
     import('@strudel/midi'),
     // import('@strudel/xen'),

packages/serial/serial.mjs

@@ -68,7 +68,7 @@ Pattern.prototype.serial = function (br = 115200, sendcrc = false, singlecharids
     if (!(name in writeMessagers)) {
       getWriter(name, br);
     }
-    const onTrigger = (time, hap, currentTime) => {
+    const onTrigger = (t_deprecate, hap, currentTime, cps, targetTime) => {
       var message = '';
       var chk = 0;
       if (typeof hap.value === 'object') {
@@ -105,7 +105,7 @@ Pattern.prototype.serial = function (br = 115200, sendcrc = false, singlecharids
       } else {
         message = hap.value;
       }
-      const offset = (time - currentTime + latency) * 1000;
+      const offset = (targetTime - currentTime + latency) * 1000;
 
       window.setTimeout(function () {
         writeMessagers[name](message, chk);

packages/shader/README.md

@@ -0,0 +1,16 @@
+# @strudel/shader
+
+Helpers for drawing shader.
+
+## Todos
+
+Here are the things that needs to be implemented:
+
+- [ ] Shader compilation error reporting, e.g. to show the line number
+- [ ] Shader import from url, like shadertoy or git
+- [ ] Display shader author attribution, e.g. to respect CC-BY
+- [ ] Handle WebGL context lost by restoring the objects.
+- [ ] Multiple instances and custom canvas positions
+- [ ] Multiple programs, to be swapped like a pattern
+- [ ] Texture inputs
+- [ ] Buffer inputs, e.g. to generate a texture

packages/shader/index.mjs

@@ -0,0 +1 @@
+export * from './shader.mjs';

packages/shader/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@strudel/shader",
+  "version": "1.0.0",
+  "description": "Helpers for drawing shader",
+  "main": "index.mjs",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.mjs"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "titdalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave",
+    "shader"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel/core": "workspace:*",
+    "picogl": "^0.17.9"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10",
+    "vitest": "^2.1.3"
+  }
+}

packages/shader/shader.mjs

@@ -0,0 +1,347 @@
+/*
+shader.mjs - implements the `loadShader` function
+Copyright (C) 2024 Strudel contributors
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+/*
+/// Here is a feature demo
+// Setup a shader
+let truchetFTW = fetch('https://raw.githubusercontent.com/TristanCacqueray/shaders/refs/heads/main/shaders/Truchet%20%2B%20Kaleidoscope%20FTW.glsl').then((res) => res.text())
+// This shader provides the following uniforms:
+// uniform float icolor;
+// uniform float moveFWD;
+// uniform float rotations[4];
+// uniform float modulations[6];
+
+// Start the instance and binds the uniforms
+let {uniforms} = await loadShader(truchetFTW)
+
+setcpm(96)
+
+// A smoothing function that is called for each frame
+let smooth = (desired, speed) => (value) => value + ((desired - value) / speed)
+
+// Each kick updates a different rotation value.
+let rotationIndex = 0
+$: s("bd").bank("RolandTR808")
+   .gain(2).dist("<1 .7 .7 .7>")
+   .mask("<1@30 0@2>")
+   .onTrigger(() => uniforms.rotations.set(
+     cur => smooth(cur + 1, 20), rotationIndex++),
+     false)
+
+// Each hat increase the icolor value.
+$: sound("hh*4").bank("RolandTR808")
+   .room(.3).gain(".25 .3 .4")
+   .mask("<0@8 1@32>")
+   .onTrigger(() => uniforms.icolor.incr(0.1), false)
+
+// The snare smoothly increase the moveFWD value
+$: s("cp/8").bank("RolandTR808")
+   .hpf(500).hpa(.8).hpenv("<-3 -2 -3 -2 -1>/8")
+   .room(0.5).roomsize(7).rlp(5000).gain(.2)
+   .onTrigger(() => uniforms.moveFWD.set(cur => smooth(cur + 1, 30)), false)
+
+// Each piano note updates a different modulations value
+let pianoPitches = {}
+$: note("<C D G A Bb D C A G D Bb A>*[2,2.02]")
+  .clip(1.1)
+  .transpose("<-12 -24 -12 0>/8")
+  // .sound("sawtooth")
+  .sound("triangle")
+  .cutoff(perlin.slow(5).range(20,1200))
+  .room(.8).roomsize(.6)
+  .gain(.4)
+  .onTrigger((_, hap) => {
+    const n = hap.value.note
+    // assign unique array position for each new notes
+    if (!pianoPitches[n]) pianoPitches[n] = Object.keys(pianoPitches).length + 1
+    const idx = pianoPitches[n]
+    uniforms.modulations.set(cur => smooth(cur + .5, 55), idx)
+  }, false)
+*/
+
+import { logger } from '@strudel/core';
+
+// The standard fullscreen vertex shader.
+const vertexShader = `#version 300 es
+precision highp float;
+layout(location=0) in vec2 position;
+void main() {
+  gl_Position = vec4(position, 1, 1);
+}
+`;
+
+// Make the fragment source, similar to the one from shadertoy.
+function mkFragmentShader(code) {
+  return `#version 300 es
+precision highp float;
+out vec4 oColor;
+uniform float iTime;
+uniform vec2 iResolution;
+
+#define STRUDEL 1
+
+${code}
+
+void main(void) {
+  mainImage(oColor, gl_FragCoord.xy);
+}
+`;
+}
+
+// Helper class to handle uniform updates
+class UniformValue {
+  constructor(count, draw) {
+    this.draw = draw;
+    this.value = new Array(count).fill(0);
+    this.frameModifier = new Array(count).fill(null);
+  }
+
+  // Helper to perform a simple increment
+  incr(value, pos = 0) {
+    const idx = pos % this.value.length;
+    this.value[idx] += value;
+    this.frameModifier[idx] = null;
+    this.draw();
+  }
+
+  // The value can be a function that will be called for each rendering frame
+  set(value, pos = 0) {
+    const idx = pos % this.value.length;
+    if (typeof value === 'function') {
+      this.frameModifier[idx] = value(this.value[idx]);
+    } else {
+      this.value[idx] = value;
+      this.frameModifier[idx] = null;
+    }
+    this.draw();
+  }
+
+  get(pos = 0) {
+    return this.value[pos % this.value.length];
+  }
+
+  // This function is called for every frame, allowing to run a smooth modifier
+  _frameUpdate(elapsed) {
+    this.value = this.value.map((value, idx) =>
+      this.frameModifier[idx] ? this.frameModifier[idx](value, elapsed) : value,
+    );
+    return this.value;
+  }
+
+  // When the shader is update, this function adjust the number of values, preserving the current one
+  _resize(count) {
+    if (count != this.count) {
+      count = Math.max(1, count);
+      resizeArray(this.value, count, 0);
+      resizeArray(this.frameModifier, count, null);
+    }
+  }
+}
+
+// Shrink or extend an array
+function resizeArray(arr, size, defval) {
+  if (arr.length > size) arr.length = size;
+  else arr.push(...new Array(size - arr.length).fill(defval));
+}
+
+// Setup the instance's uniform after shader compilation.
+function setupUniforms(instance) {
+  const newUniforms = new Set();
+  const draw = () => {
+    // Start the drawing loop
+    instance.age = 0;
+    if (!instance.drawing) {
+      instance.drawing = requestAnimationFrame(instance.update);
+    }
+  };
+
+  // Collect every available uniforms
+  let gl = instance.gl;
+  const numUniforms = instance.gl.getProgramParameter(instance.program, gl.ACTIVE_UNIFORMS);
+  for (let i = 0; i < numUniforms; ++i) {
+    const inf = gl.getActiveUniform(instance.program, i);
+
+    // Arrays have a `[0]` suffix in their name, drop that
+    const name = inf.name.replace('[0]', '');
+
+    // Figure out how many values is this uniform, and how to update it.
+    let count = inf.size;
+    let updateFunc = 'uniform1fv';
+    switch (inf.type) {
+      case gl.FLOAT_VEC2:
+        count *= 2;
+        updateFunc = 'uniform2fv';
+        break;
+      case gl.FLOAT_VEC3:
+        count *= 3;
+        updateFunc = 'uniform3fv';
+        break;
+      case gl.FLOAT_VEC4:
+        count *= 4;
+        updateFunc = 'uniform4fv';
+        break;
+    }
+
+    // This is a new uniform
+    if (!instance.uniforms[name]) instance.uniforms[name] = new UniformValue(count, draw);
+    // This is a known uniform, make sure it's size is correct
+    else instance.uniforms[name]._resize(count);
+
+    // Record it's location for the 'updateUniforms' below.
+    instance.uniforms[name].loc = gl.getUniformLocation(instance.program, inf.name);
+    instance.uniforms[name].updateFunc = updateFunc;
+
+    // Record the name so that unused uniform can be deleted below
+    newUniforms.add(name);
+  }
+
+  // Remove deleted uniforms
+  Object.keys(instance.uniforms).forEach((name) => {
+    if (!newUniforms.has(name)) delete instance.uniforms[name];
+  });
+}
+
+// Update the uniforms for a given drawFrame call.
+function updateUniforms(gl, now, elapsed, uniforms) {
+  Object.entries(uniforms).forEach(([name, uniform]) => {
+    try {
+      if (name == 'iTime') {
+        gl.uniform1f(uniform.loc, now);
+      } else if (name == 'iResolution') {
+        gl.uniform2f(uniform.loc, gl.canvas.width, gl.canvas.height);
+      } else {
+        const value = uniform._frameUpdate(elapsed);
+        // Send the value to the GPU
+        // console.log('updateUniforms:', name, uniform.updateFunc, value);
+        gl[uniform.updateFunc](uniform.loc, value);
+      }
+    } catch (err) {
+      console.warn('uniform error');
+      console.error(err);
+    }
+  });
+}
+
+// Setup the canvas and return the WebGL context.
+function setupCanvas(name) {
+  // TODO: support custom size
+  const width = 400;
+  const height = 300;
+  const canvas = document.createElement('canvas');
+  canvas.id = 'cnv-' + name;
+  canvas.width = width;
+  canvas.height = height;
+  const top = 60 + Object.keys(_instances).length * height;
+  canvas.style = `pointer-events:none;width:${width}px;height:${height}px;position:fixed;top:${top}px;right:23px`;
+  document.body.append(canvas);
+  return canvas.getContext('webgl2');
+}
+
+function createProgram(gl, vertex, fragment) {
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!success) {
+      const err = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      throw err;
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const err = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw err;
+  }
+  gl.useProgram(program);
+  return program;
+}
+
+// Setup the shader instance
+function initializeShaderInstance(name, code) {
+  const gl = setupCanvas(name);
+
+  // Two triangle to cover the whole canvas
+  const mkPositionArray = () => {
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(buf, 2, gl.FLOAT, false, 0, 0);
+    return vao;
+  };
+
+  try {
+    let array = mkPositionArray();
+    let program = createProgram(gl, vertexShader, code);
+    const instance = { gl, code, program, array, uniforms: {} };
+    setupUniforms(instance);
+    // Render frame logic
+    let prev = performance.now() / 1000;
+    instance.age = 0;
+    instance.update = () => {
+      const now = performance.now() / 1000;
+      const elapsed = instance.age == 0 ? 1 / 60 : now - prev;
+      prev = now;
+      // console.log('drawing!');
+
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+      // Clear the canvas
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.bindVertexArray(array);
+
+      // Send the uniform values to the GPU
+      updateUniforms(instance.gl, now, elapsed, instance.uniforms);
+
+      // Draw the quad
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+      // After sometime, if no update happened, stop the animation loop to save cpu cycles
+      if (instance.age++ < 100) requestAnimationFrame(instance.update);
+      else instance.drawing = false;
+    };
+    instance.update();
+    return instance;
+  } catch (err) {
+    gl.canvas.remove();
+    throw err;
+  }
+}
+
+// Update the instance program
+function reloadShaderInstanceCode(instance, code) {
+  const program = createProgram(instance.gl, vertexShader, code);
+  instance.gl.deleteProgram(instance.program);
+  instance.program = program;
+  instance.code = code;
+  setupUniforms(instance);
+}
+
+// Keep track of the running shader instances
+let _instances = {};
+export function loadShader(code = '', name = 'default') {
+  if (code) {
+    code = mkFragmentShader(code);
+  }
+  if (!_instances[name]) {
+    _instances[name] = initializeShaderInstance(name, code);
+    logger('[shader] ready');
+  } else if (_instances[name].code != code) {
+    reloadShaderInstanceCode(_instances[name], code);
+    logger('[shader] reloaded');
+  }
+  return _instances[name];
+}

packages/shader/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'index.mjs'),
+      formats: ['es'],
+      fileName: (ext) => ({ es: 'index.mjs' })[ext],
+    },
+    rollupOptions: {
+      external: [...Object.keys(dependencies)],
+    },
+    target: 'esnext',
+  },
+});

packages/superdough/sampler.mjs

@@ -22,16 +22,13 @@ function humanFileSize(bytes, si) {
   return bytes.toFixed(1) + ' ' + units[u];
 }
 
-export const getSampleBufferSource = async (s, n, note, speed, freq, bank, resolveUrl) => {
-  let transpose = 0;
-  if (freq !== undefined && note !== undefined) {
-    logger('[sampler] hap has note and freq. ignoring note', 'warning');
-  }
-  let midi = valueToMidi({ freq, note }, 36);
-  transpose = midi - 36; // C3 is middle C
-
-  const ac = getAudioContext();
-
+// deduces relevant info for sample loading from hap.value and sample definition
+// it encapsulates the core sampler logic into a pure and synchronous function
+// hapValue: Hap.value, bank: sample bank definition for sound "s" (values in strudel.json format)
+export function getSampleInfo(hapValue, bank) {
+  const { s, n = 0, speed = 1.0 } = hapValue;
+  let midi = valueToMidi(hapValue, 36);
+  let transpose = midi - 36; // C3 is middle C;
   let sampleUrl;
   let index = 0;
   if (Array.isArray(bank)) {
@@ -50,19 +47,54 @@ export const getSampleBufferSource = async (s, n, note, speed, freq, bank, resol
     index = getSoundIndex(n, bank[closest].length);
     sampleUrl = bank[closest][index];
   }
+  const label = `${s}:${index}`;
+  let playbackRate = Math.abs(speed) * Math.pow(2, transpose / 12);
+  return { transpose, sampleUrl, index, midi, label, playbackRate };
+}
+
+// takes hapValue and returns buffer + playbackRate.
+export const getSampleBuffer = async (hapValue, bank, resolveUrl) => {
+  let { sampleUrl, label, playbackRate } = getSampleInfo(hapValue, bank);
   if (resolveUrl) {
     sampleUrl = await resolveUrl(sampleUrl);
   }
-  let buffer = await loadBuffer(sampleUrl, ac, s, index);
-  if (speed < 0) {
+  const ac = getAudioContext();
+  const buffer = await loadBuffer(sampleUrl, ac, label);
+
+  if (hapValue.unit === 'c') {
+    playbackRate = playbackRate * buffer.duration;
+  }
+  return { buffer, playbackRate };
+};
+
+// creates playback ready AudioBufferSourceNode from hapValue
+export const getSampleBufferSource = async (hapValue, bank, resolveUrl) => {
+  let { buffer, playbackRate } = await getSampleBuffer(hapValue, bank, resolveUrl);
+  if (hapValue.speed < 0) {
     // should this be cached?
     buffer = reverseBuffer(buffer);
   }
+  const ac = getAudioContext();
   const bufferSource = ac.createBufferSource();
   bufferSource.buffer = buffer;
-  const playbackRate = 1.0 * Math.pow(2, transpose / 12);
   bufferSource.playbackRate.value = playbackRate;
-  return bufferSource;
+
+  const { s, loopBegin = 0, loopEnd = 1, begin = 0, end = 1 } = hapValue;
+
+  // "The computation of the offset into the sound is performed using the sound buffer's natural sample rate,
+  // rather than the current playback rate, so even if the sound is playing at twice its normal speed,
+  // the midway point through a 10-second audio buffer is still 5."
+  const offset = begin * bufferSource.buffer.duration;
+
+  const loop = s.startsWith('wt_') ? 1 : hapValue.loop;
+  if (loop) {
+    bufferSource.loop = true;
+    bufferSource.loopStart = loopBegin * bufferSource.buffer.duration - offset;
+    bufferSource.loopEnd = loopEnd * bufferSource.buffer.duration - offset;
+  }
+  const bufferDuration = bufferSource.buffer.duration / bufferSource.playbackRate.value;
+  const sliceDuration = (end - begin) * bufferDuration;
+  return { bufferSource, offset, bufferDuration, sliceDuration };
 };
 
 export const loadBuffer = (url, ac, s, n = 0) => {
@@ -232,10 +264,10 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '', option
   const { prebake, tag } = options;
   processSampleMap(
     sampleMap,
-    (key, value) =>
-      registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+    (key, bank) =>
+      registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, bank), {
         type: 'sample',
-        samples: value,
+        samples: bank,
         baseUrl,
         prebake,
         tag,
@@ -249,38 +281,26 @@ const cutGroups = [];
 export async function onTriggerSample(t, value, onended, bank, resolveUrl) {
   let {
     s,
-    freq,
-    unit,
     nudge = 0, // TODO: is this in seconds?
     cut,
     loop,
     clip = undefined, // if set, samples will be cut off when the hap ends
     n = 0,
-    note,
     speed = 1, // sample playback speed
-    loopBegin = 0,
-    begin = 0,
-    loopEnd = 1,
-    end = 1,
     duration,
   } = value;
+
   // load sample
   if (speed === 0) {
     // no playback
     return;
   }
-  loop = s.startsWith('wt_') ? 1 : value.loop;
   const ac = getAudioContext();
+
   // destructure adsr here, because the default should be different for synths and samples
-
   let [attack, decay, sustain, release] = getADSRValues([value.attack, value.decay, value.sustain, value.release]);
-  //const soundfont = getSoundfontKey(s);
-  const time = t + nudge;
 
-  const bufferSource = await getSampleBufferSource(s, n, note, speed, freq, bank, resolveUrl);
-
-  // vibrato
-  let vibratoOscillator = getVibratoOscillator(bufferSource.detune, value, t);
+  const { bufferSource, sliceDuration, offset } = await getSampleBufferSource(value, bank, resolveUrl);
 
   // asny stuff above took too long?
   if (ac.currentTime > t) {
@@ -292,26 +312,19 @@ export async function onTriggerSample(t, value, onended, bank, resolveUrl) {
     logger(`[sampler] could not load "${s}:${n}"`, 'error');
     return;
   }
-  bufferSource.playbackRate.value = Math.abs(speed) * bufferSource.playbackRate.value;
-  if (unit === 'c') {
-    // are there other units?
-    bufferSource.playbackRate.value = bufferSource.playbackRate.value * bufferSource.buffer.duration * 1; //cps;
-  }
-  // "The computation of the offset into the sound is performed using the sound buffer's natural sample rate,
-  // rather than the current playback rate, so even if the sound is playing at twice its normal speed,
-  // the midway point through a 10-second audio buffer is still 5."
-  const offset = begin * bufferSource.buffer.duration;
-  if (loop) {
-    bufferSource.loop = true;
-    bufferSource.loopStart = loopBegin * bufferSource.buffer.duration - offset;
-    bufferSource.loopEnd = loopEnd * bufferSource.buffer.duration - offset;
-  }
+
+  // vibrato
+  let vibratoOscillator = getVibratoOscillator(bufferSource.detune, value, t);
+
+  const time = t + nudge;
   bufferSource.start(time, offset);
+
   const envGain = ac.createGain();
   const node = bufferSource.connect(envGain);
+
+  // if none of these controls is set, the duration of the sound will be set to the duration of the sample slice
   if (clip == null && loop == null && value.release == null) {
-    const bufferDuration = bufferSource.buffer.duration / bufferSource.playbackRate.value;
-    duration = (end - begin) * bufferDuration;
+    duration = sliceDuration;
   }
   let holdEnd = t + duration;
 

packages/superdough/superdough.mjs

@@ -87,6 +87,10 @@ export const getAudioContext = () => {
   return audioContext;
 };
 
+export function getAudioContextCurrentTime() {
+  return getAudioContext().currentTime;
+}
+
 let workletsLoading;
 function loadWorklets() {
   if (!workletsLoading) {
@@ -371,7 +375,7 @@ export const superdough = async (value, t, hapDuration) => {
     bandq = getDefaultValue('bandq'),
     channels = getDefaultValue('channels'),
     //phaser
-    phaser,
+    phaserrate: phaser,
     phaserdepth = getDefaultValue('phaserdepth'),
     phasersweep,
     phasercenter,
@@ -417,6 +421,7 @@ export const superdough = async (value, t, hapDuration) => {
   };
   if (bank && s) {
     s = `${bank}_${s}`;
+    value.s = s;
   }
 
   // get source AudioNode

packages/tonal/package.json

@@ -37,6 +37,6 @@
   },
   "devDependencies": {
     "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

packages/transpiler/package.json

@@ -38,6 +38,6 @@
   },
   "devDependencies": {
     "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

packages/xen/package.json

@@ -34,6 +34,6 @@
   },
   "devDependencies": {
     "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
   }
 }

test/__snapshots__/examples.test.mjs.snap

@@ -967,6 +967,156 @@ exports[`runs examples > example "begin" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "bite" example index 0 1`] = `
+[
+  "[ 0/1 → 1/8 | note:Bb3 ]",
+  "[ 1/8 → 1/4 | note:C4 ]",
+  "[ 1/4 → 3/8 | note:G3 ]",
+  "[ 3/8 → 1/2 | note:A3 ]",
+  "[ 1/2 → 5/8 | note:E3 ]",
+  "[ 5/8 → 3/4 | note:F3 ]",
+  "[ 3/4 → 7/8 | note:C3 ]",
+  "[ 7/8 → 1/1 | note:D3 ]",
+  "[ 1/1 → 9/8 | note:Bb3 ]",
+  "[ 9/8 → 5/4 | note:C4 ]",
+  "[ 5/4 → 11/8 | note:G3 ]",
+  "[ 11/8 → 3/2 | note:A3 ]",
+  "[ 3/2 → 13/8 | note:E3 ]",
+  "[ 13/8 → 7/4 | note:F3 ]",
+  "[ 7/4 → 15/8 | note:C3 ]",
+  "[ 15/8 → 2/1 | note:D3 ]",
+  "[ 2/1 → 17/8 | note:Bb3 ]",
+  "[ 17/8 → 9/4 | note:C4 ]",
+  "[ 9/4 → 19/8 | note:G3 ]",
+  "[ 19/8 → 5/2 | note:A3 ]",
+  "[ 5/2 → 21/8 | note:E3 ]",
+  "[ 21/8 → 11/4 | note:F3 ]",
+  "[ 11/4 → 23/8 | note:C3 ]",
+  "[ 23/8 → 3/1 | note:D3 ]",
+  "[ 3/1 → 25/8 | note:Bb3 ]",
+  "[ 25/8 → 13/4 | note:C4 ]",
+  "[ 13/4 → 27/8 | note:G3 ]",
+  "[ 27/8 → 7/2 | note:A3 ]",
+  "[ 7/2 → 29/8 | note:E3 ]",
+  "[ 29/8 → 15/4 | note:F3 ]",
+  "[ 15/4 → 31/8 | note:C3 ]",
+  "[ 31/8 → 4/1 | note:D3 ]",
+]
+`;
+
+exports[`runs examples > example "bite" example index 1 1`] = `
+[
+  "[ 0/1 → 1/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 0/1 → 1/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 1/16 → 1/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 1/8 → 1/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 1/8 → 1/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 3/16 → 1/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 1/4 → 5/16 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 9/32 → 5/16 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 5/16 → 11/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 5/16 → 3/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/8 → 7/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/8 → 1/2 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 13/32 → 7/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 7/16 → 1/2 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 1/2 → 5/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 1/2 → 5/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 9/16 → 5/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 5/8 → 3/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 5/8 → 3/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 11/16 → 3/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 3/4 → 25/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 3/4 → 13/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 13/16 → 7/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 27/32 → 7/8 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 7/8 → 15/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 7/8 → 1/1 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 29/32 → 15/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 15/16 → 1/1 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 1/1 → 9/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 1/1 → 9/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 17/16 → 9/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 9/8 → 5/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 9/8 → 5/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 19/16 → 5/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 5/4 → 21/16 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 41/32 → 21/16 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 21/16 → 43/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 21/16 → 11/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 11/8 → 23/16 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 11/8 → 3/2 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/2 → 13/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/2 → 13/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 25/16 → 13/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 13/8 → 7/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 13/8 → 7/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 27/16 → 7/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 7/4 → 57/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 7/4 → 29/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 29/16 → 15/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 59/32 → 15/8 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 15/8 → 31/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 15/8 → 2/1 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 61/32 → 31/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 31/16 → 2/1 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 2/1 → 17/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 2/1 → 17/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 33/16 → 17/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 17/8 → 9/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 17/8 → 9/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 35/16 → 9/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 9/4 → 37/16 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 73/32 → 37/16 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 37/16 → 75/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 37/16 → 19/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 19/8 → 39/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 19/8 → 5/2 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 77/32 → 39/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 39/16 → 5/2 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 5/2 → 21/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 5/2 → 21/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 41/16 → 21/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 21/8 → 11/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 21/8 → 11/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 43/16 → 11/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 11/4 → 89/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 11/4 → 45/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 45/16 → 23/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 91/32 → 23/8 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 23/8 → 47/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 23/8 → 3/1 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 93/32 → 47/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 47/16 → 3/1 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/1 → 25/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 3/1 → 25/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 49/16 → 25/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 25/8 → 13/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 25/8 → 13/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 51/16 → 13/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 13/4 → 53/16 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 105/32 → 53/16 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 53/16 → 107/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 53/16 → 27/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 27/8 → 55/16 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 27/8 → 7/2 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 7/2 → 29/8 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 7/2 → 29/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 57/16 → 29/8 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 29/8 → 15/4 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 29/8 → 15/4 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 59/16 → 15/4 | s:sd n:6 bank:RolandTR909 speed:1.2 ]",
+  "[ 15/4 → 121/32 | s:sd n:1 bank:RolandTR909 speed:1.2 ]",
+  "[ 15/4 → 61/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 61/16 → 31/8 | s:hh bank:RolandTR909 speed:1.2 ]",
+  "[ 123/32 → 31/8 | s:sd n:5 bank:RolandTR909 speed:1.2 ]",
+  "[ 31/8 → 63/16 | s:bd bank:RolandTR909 speed:1.2 ]",
+  "[ 31/8 → 4/1 | s:cp n:7 bank:RolandTR909 speed:1.2 ]",
+  "[ 125/32 → 63/16 | s:sd n:2 bank:RolandTR909 speed:1.2 ]",
+  "[ 63/16 → 4/1 | s:bd bank:RolandTR909 speed:1.2 ]",
+]
+`;
+
 exports[`runs examples > example "bpattack" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:c2 s:sawtooth bandf:500 bpattack:0.5 bpenv:4 ]",
@@ -1229,6 +1379,16 @@ exports[`runs examples > example "brandBy" example index 0 1`] = `
 `;
 
 exports[`runs examples > example "cat" example index 0 1`] = `
+[
+  "[ 0/1 → 1/1 | note:e5 ]",
+  "[ 1/1 → 2/1 | note:b4 ]",
+  "[ 2/1 → 5/2 | note:d5 ]",
+  "[ 5/2 → 3/1 | note:c5 ]",
+  "[ 3/1 → 4/1 | note:e5 ]",
+]
+`;
+
+exports[`runs examples > example "cat" example index 1 1`] = `
 [
   "[ 0/1 → 1/4 | s:hh ]",
   "[ 1/4 → 1/2 | s:hh ]",
@@ -1251,16 +1411,6 @@ exports[`runs examples > example "cat" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "cat" example index 0 2`] = `
-[
-  "[ 0/1 → 1/1 | note:e5 ]",
-  "[ 1/1 → 2/1 | note:b4 ]",
-  "[ 2/1 → 5/2 | note:d5 ]",
-  "[ 5/2 → 3/1 | note:c5 ]",
-  "[ 3/1 → 4/1 | note:e5 ]",
-]
-`;
-
 exports[`runs examples > example "ceil" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:42 ]",
@@ -2666,6 +2816,43 @@ exports[`runs examples > example "fastGap" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "filter" example index 0 1`] = `
+[
+  "[ 0/1 → 1/8 | s:hh ]",
+  "[ 1/8 → 1/4 | s:hh ]",
+  "[ 1/4 → 3/8 | s:hh ]",
+  "[ 3/8 → 1/2 | s:hh ]",
+  "[ 1/2 → 5/8 | s:hh ]",
+  "[ 5/8 → 3/4 | s:hh ]",
+  "[ 3/4 → 7/8 | s:hh ]",
+  "[ 7/8 → 1/1 | s:oh ]",
+  "[ 1/1 → 9/8 | s:hh ]",
+  "[ 9/8 → 5/4 | s:hh ]",
+  "[ 5/4 → 11/8 | s:hh ]",
+  "[ 11/8 → 3/2 | s:hh ]",
+  "[ 3/2 → 13/8 | s:hh ]",
+  "[ 13/8 → 7/4 | s:hh ]",
+  "[ 7/4 → 15/8 | s:hh ]",
+  "[ 15/8 → 2/1 | s:oh ]",
+  "[ 2/1 → 17/8 | s:hh ]",
+  "[ 17/8 → 9/4 | s:hh ]",
+  "[ 9/4 → 19/8 | s:hh ]",
+  "[ 19/8 → 5/2 | s:hh ]",
+  "[ 5/2 → 21/8 | s:hh ]",
+  "[ 21/8 → 11/4 | s:hh ]",
+  "[ 11/4 → 23/8 | s:hh ]",
+  "[ 23/8 → 3/1 | s:oh ]",
+  "[ 3/1 → 25/8 | s:hh ]",
+  "[ 25/8 → 13/4 | s:hh ]",
+  "[ 13/4 → 27/8 | s:hh ]",
+  "[ 27/8 → 7/2 | s:hh ]",
+  "[ 7/2 → 29/8 | s:hh ]",
+  "[ 29/8 → 15/4 | s:hh ]",
+  "[ 15/4 → 31/8 | s:hh ]",
+  "[ 31/8 → 4/1 | s:oh ]",
+]
+`;
+
 exports[`runs examples > example "firstOf" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:g3 ]",
@@ -4937,149 +5124,149 @@ exports[`runs examples > example "perlin" example index 0 1`] = `
 
 exports[`runs examples > example "phaser" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaser:1 ]",
-  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaser:2 ]",
-  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaser:4 ]",
-  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaser:8 ]",
-  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaser:8 ]",
+  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaserrate:1 ]",
+  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 ]",
+  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaserrate:4 ]",
+  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaserrate:8 ]",
+  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaserrate:8 ]",
 ]
 `;
 
 exports[`runs examples > example "phasercenter" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasercenter:2000 ]",
-  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasercenter:4000 ]",
-  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
-  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasercenter:800 ]",
+  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasercenter:2000 ]",
+  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasercenter:4000 ]",
+  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
+  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasercenter:800 ]",
 ]
 `;
 
 exports[`runs examples > example "phaserdepth" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phaserdepth:0 ]",
-  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.5 ]",
-  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phaserdepth:0.75 ]",
-  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
-  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phaserdepth:1 ]",
+  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0 ]",
+  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.5 ]",
+  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:0.75 ]",
+  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
+  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phaserdepth:1 ]",
 ]
 `;
 
 exports[`runs examples > example "phasersweep" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasersweep:2000 ]",
-  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasersweep:4000 ]",
-  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
-  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaser:2 phasersweep:800 ]",
+  "[ 0/1 → 1/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 1/8 → 1/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 1/4 → 3/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 3/8 → 1/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 1/2 → 5/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 5/8 → 3/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 3/4 → 7/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 7/8 → 1/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 1/1 → 9/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 9/8 → 5/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 5/4 → 11/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 11/8 → 3/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 3/2 → 13/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 13/8 → 7/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 7/4 → 15/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 15/8 → 2/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasersweep:2000 ]",
+  "[ 2/1 → 17/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 17/8 → 9/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 9/4 → 19/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 19/8 → 5/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 5/2 → 21/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 21/8 → 11/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 11/4 → 23/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 23/8 → 3/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasersweep:4000 ]",
+  "[ 3/1 → 25/8 | note:D3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 25/8 → 13/4 | note:E3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 13/4 → 27/8 | note:F#3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 27/8 → 7/2 | note:A3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 7/2 → 29/8 | note:B3 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 29/8 → 15/4 | note:D4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 15/4 → 31/8 | note:E4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
+  "[ 31/8 → 4/1 | note:F#4 s:sawtooth release:0.5 phaserrate:2 phasersweep:800 ]",
 ]
 `;
 
@@ -6637,6 +6824,56 @@ exports[`runs examples > example "scope" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "scramble
+Slices a pattern into the given number of parts, then plays those parts at random. Similar to \`shuffle\`,
+but parts might be played more than once, or not at all, per cycle." example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:e s:piano ]",
+  "[ 1/4 → 1/2 | note:d s:piano ]",
+  "[ 1/2 → 3/4 | note:c s:piano ]",
+  "[ 3/4 → 1/1 | note:d s:piano ]",
+  "[ 1/1 → 5/4 | note:e s:piano ]",
+  "[ 5/4 → 3/2 | note:c s:piano ]",
+  "[ 3/2 → 7/4 | note:d s:piano ]",
+  "[ 7/4 → 2/1 | note:e s:piano ]",
+  "[ 2/1 → 9/4 | note:f s:piano ]",
+  "[ 9/4 → 5/2 | note:f s:piano ]",
+  "[ 5/2 → 11/4 | note:c s:piano ]",
+  "[ 11/4 → 3/1 | note:c s:piano ]",
+  "[ 3/1 → 13/4 | note:d s:piano ]",
+  "[ 13/4 → 7/2 | note:d s:piano ]",
+  "[ 7/2 → 15/4 | note:f s:piano ]",
+  "[ 15/4 → 4/1 | note:e s:piano ]",
+]
+`;
+
+exports[`runs examples > example "scramble
+Slices a pattern into the given number of parts, then plays those parts at random. Similar to \`shuffle\`,
+but parts might be played more than once, or not at all, per cycle." example index 1 1`] = `
+[
+  "[ 0/1 → 1/8 | note:e s:piano ]",
+  "[ 1/8 → 1/4 | note:d s:piano ]",
+  "[ 1/4 → 3/8 | note:c s:piano ]",
+  "[ 3/8 → 1/2 | note:d s:piano ]",
+  "[ 1/2 → 1/1 | note:g s:piano ]",
+  "[ 1/1 → 9/8 | note:e s:piano ]",
+  "[ 9/8 → 5/4 | note:c s:piano ]",
+  "[ 5/4 → 11/8 | note:d s:piano ]",
+  "[ 11/8 → 3/2 | note:e s:piano ]",
+  "[ 3/2 → 2/1 | note:g s:piano ]",
+  "[ 2/1 → 17/8 | note:f s:piano ]",
+  "[ 17/8 → 9/4 | note:f s:piano ]",
+  "[ 9/4 → 19/8 | note:c s:piano ]",
+  "[ 19/8 → 5/2 | note:c s:piano ]",
+  "[ 5/2 → 3/1 | note:g s:piano ]",
+  "[ 3/1 → 25/8 | note:d s:piano ]",
+  "[ 25/8 → 13/4 | note:d s:piano ]",
+  "[ 13/4 → 27/8 | note:f s:piano ]",
+  "[ 27/8 → 7/2 | note:e s:piano ]",
+  "[ 7/2 → 4/1 | note:g s:piano ]",
+]
+`;
+
 exports[`runs examples > example "segment" example index 0 1`] = `
 [
   "[ 0/1 → 1/24 | note:40.25 ]",
@@ -6739,6 +6976,27 @@ exports[`runs examples > example "segment" example index 0 1`] = `
 `;
 
 exports[`runs examples > example "seq" example index 0 1`] = `
+[
+  "[ 0/1 → 1/3 | note:e5 ]",
+  "[ 1/3 → 2/3 | note:b4 ]",
+  "[ 2/3 → 5/6 | note:d5 ]",
+  "[ 5/6 → 1/1 | note:c5 ]",
+  "[ 1/1 → 4/3 | note:e5 ]",
+  "[ 4/3 → 5/3 | note:b4 ]",
+  "[ 5/3 → 11/6 | note:d5 ]",
+  "[ 11/6 → 2/1 | note:c5 ]",
+  "[ 2/1 → 7/3 | note:e5 ]",
+  "[ 7/3 → 8/3 | note:b4 ]",
+  "[ 8/3 → 17/6 | note:d5 ]",
+  "[ 17/6 → 3/1 | note:c5 ]",
+  "[ 3/1 → 10/3 | note:e5 ]",
+  "[ 10/3 → 11/3 | note:b4 ]",
+  "[ 11/3 → 23/6 | note:d5 ]",
+  "[ 23/6 → 4/1 | note:c5 ]",
+]
+`;
+
+exports[`runs examples > example "seq" example index 1 1`] = `
 [
   "[ 0/1 → 1/8 | s:hh ]",
   "[ 1/8 → 1/4 | s:hh ]",
@@ -6779,24 +7037,23 @@ exports[`runs examples > example "seq" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "seq" example index 0 2`] = `
+exports[`runs examples > example "seqPLoop" example index 0 1`] = `
 [
-  "[ 0/1 → 1/3 | note:e5 ]",
-  "[ 1/3 → 2/3 | note:b4 ]",
-  "[ 2/3 → 5/6 | note:d5 ]",
-  "[ 5/6 → 1/1 | note:c5 ]",
-  "[ 1/1 → 4/3 | note:e5 ]",
-  "[ 4/3 → 5/3 | note:b4 ]",
-  "[ 5/3 → 11/6 | note:d5 ]",
-  "[ 11/6 → 2/1 | note:c5 ]",
-  "[ 2/1 → 7/3 | note:e5 ]",
-  "[ 7/3 → 8/3 | note:b4 ]",
-  "[ 8/3 → 17/6 | note:d5 ]",
-  "[ 17/6 → 3/1 | note:c5 ]",
-  "[ 3/1 → 10/3 | note:e5 ]",
-  "[ 10/3 → 11/3 | note:b4 ]",
-  "[ 11/3 → 23/6 | note:d5 ]",
-  "[ 23/6 → 4/1 | note:c5 ]",
+  "[ 0/1 → 1/8 | s:bd ]",
+  "[ 3/8 → 1/2 | s:bd ]",
+  "[ 3/4 → 7/8 | s:bd ]",
+  "[ 1/1 → 9/8 | s:bd ]",
+  "[ 1/1 → 9/8 | s:cp ]",
+  "[ 11/8 → 3/2 | s:bd ]",
+  "[ 11/8 → 3/2 | s:cp ]",
+  "[ 7/4 → 15/8 | s:bd ]",
+  "[ 7/4 → 15/8 | s:cp ]",
+  "[ 2/1 → 17/8 | s:cp ]",
+  "[ 19/8 → 5/2 | s:cp ]",
+  "[ 11/4 → 23/8 | s:cp ]",
+  "[ 3/1 → 25/8 | s:bd ]",
+  "[ 27/8 → 7/2 | s:bd ]",
+  "[ 15/4 → 31/8 | s:bd ]",
 ]
 `;
 
@@ -6853,6 +7110,56 @@ exports[`runs examples > example "shape" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "shuffle
+Slices a pattern into the given number of parts, then plays those parts in random order.
+Each part will be played exactly once per cycle." example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c s:piano ]",
+  "[ 1/4 → 1/2 | note:d s:piano ]",
+  "[ 1/2 → 3/4 | note:e s:piano ]",
+  "[ 3/4 → 1/1 | note:f s:piano ]",
+  "[ 1/1 → 5/4 | note:c s:piano ]",
+  "[ 5/4 → 3/2 | note:d s:piano ]",
+  "[ 3/2 → 7/4 | note:e s:piano ]",
+  "[ 7/4 → 2/1 | note:f s:piano ]",
+  "[ 2/1 → 9/4 | note:c s:piano ]",
+  "[ 9/4 → 5/2 | note:d s:piano ]",
+  "[ 5/2 → 11/4 | note:e s:piano ]",
+  "[ 11/4 → 3/1 | note:f s:piano ]",
+  "[ 3/1 → 13/4 | note:c s:piano ]",
+  "[ 13/4 → 7/2 | note:d s:piano ]",
+  "[ 7/2 → 15/4 | note:e s:piano ]",
+  "[ 15/4 → 4/1 | note:f s:piano ]",
+]
+`;
+
+exports[`runs examples > example "shuffle
+Slices a pattern into the given number of parts, then plays those parts in random order.
+Each part will be played exactly once per cycle." example index 1 1`] = `
+[
+  "[ 0/1 → 1/8 | note:c s:piano ]",
+  "[ 1/8 → 1/4 | note:d s:piano ]",
+  "[ 1/4 → 3/8 | note:e s:piano ]",
+  "[ 3/8 → 1/2 | note:f s:piano ]",
+  "[ 1/2 → 1/1 | note:g s:piano ]",
+  "[ 1/1 → 9/8 | note:c s:piano ]",
+  "[ 9/8 → 5/4 | note:d s:piano ]",
+  "[ 5/4 → 11/8 | note:e s:piano ]",
+  "[ 11/8 → 3/2 | note:f s:piano ]",
+  "[ 3/2 → 2/1 | note:g s:piano ]",
+  "[ 2/1 → 17/8 | note:c s:piano ]",
+  "[ 17/8 → 9/4 | note:d s:piano ]",
+  "[ 9/4 → 19/8 | note:e s:piano ]",
+  "[ 19/8 → 5/2 | note:f s:piano ]",
+  "[ 5/2 → 3/1 | note:g s:piano ]",
+  "[ 3/1 → 25/8 | note:c s:piano ]",
+  "[ 25/8 → 13/4 | note:d s:piano ]",
+  "[ 13/4 → 27/8 | note:e s:piano ]",
+  "[ 27/8 → 7/2 | note:f s:piano ]",
+  "[ 7/2 → 4/1 | note:g s:piano ]",
+]
+`;
+
 exports[`runs examples > example "silence" example index 0 1`] = `[]`;
 
 exports[`runs examples > example "sine" example index 0 1`] = `
@@ -7423,6 +7730,27 @@ exports[`runs examples > example "squiz" example index 0 1`] = `
 `;
 
 exports[`runs examples > example "stack" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | note:e4 ]",
+  "[ 0/1 → 1/1 | note:g3 ]",
+  "[ 0/1 → 1/1 | note:b3 ]",
+  "[ 1/2 → 1/1 | note:d4 ]",
+  "[ 1/1 → 3/2 | note:e4 ]",
+  "[ 1/1 → 2/1 | note:g3 ]",
+  "[ 1/1 → 2/1 | note:b3 ]",
+  "[ 3/2 → 2/1 | note:d4 ]",
+  "[ 2/1 → 5/2 | note:e4 ]",
+  "[ 2/1 → 3/1 | note:g3 ]",
+  "[ 2/1 → 3/1 | note:b3 ]",
+  "[ 5/2 → 3/1 | note:d4 ]",
+  "[ 3/1 → 7/2 | note:e4 ]",
+  "[ 3/1 → 4/1 | note:g3 ]",
+  "[ 3/1 → 4/1 | note:b3 ]",
+  "[ 7/2 → 4/1 | note:d4 ]",
+]
+`;
+
+exports[`runs examples > example "stack" example index 1 1`] = `
 [
   "[ 0/1 → 1/8 | note:c4 ]",
   "[ 0/1 → 1/4 | s:hh ]",
@@ -7463,27 +7791,6 @@ exports[`runs examples > example "stack" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "stack" example index 0 2`] = `
-[
-  "[ 0/1 → 1/2 | note:e4 ]",
-  "[ 0/1 → 1/1 | note:g3 ]",
-  "[ 0/1 → 1/1 | note:b3 ]",
-  "[ 1/2 → 1/1 | note:d4 ]",
-  "[ 1/1 → 3/2 | note:e4 ]",
-  "[ 1/1 → 2/1 | note:g3 ]",
-  "[ 1/1 → 2/1 | note:b3 ]",
-  "[ 3/2 → 2/1 | note:d4 ]",
-  "[ 2/1 → 5/2 | note:e4 ]",
-  "[ 2/1 → 3/1 | note:g3 ]",
-  "[ 2/1 → 3/1 | note:b3 ]",
-  "[ 5/2 → 3/1 | note:d4 ]",
-  "[ 3/1 → 7/2 | note:e4 ]",
-  "[ 3/1 → 4/1 | note:g3 ]",
-  "[ 3/1 → 4/1 | note:b3 ]",
-  "[ 7/2 → 4/1 | note:d4 ]",
-]
-`;
-
 exports[`runs examples > example "steps" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | s:bd ]",

vitest.config.ts

@@ -3,11 +3,6 @@ import { configDefaults, defineConfig } from 'vitest/config';
 /// <reference types="vitest" />
 export default defineConfig({
   test: {
-    // ...
-    deps: {
-      registerNodeLoader: true,
-    },
-    threads: false,
     reporters: 'verbose',
     isolate: false,
     silent: true,

website/.astro/settings.json

@@ -1,5 +0,0 @@
-{
-	"devToolbar": {
-		"enabled": false
-	}
-}

website/.astro/types.d.ts

@@ -1,290 +0,0 @@
-declare module 'astro:content' {
-	interface Render {
-		'.mdx': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	interface Render {
-		'.md': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	export { z } from 'astro/zod';
-
-	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-
-	export type CollectionKey = keyof AnyEntryMap;
-	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
-
-	export type ContentCollectionKey = keyof ContentEntryMap;
-	export type DataCollectionKey = keyof DataEntryMap;
-
-	// This needs to be in sync with ImageMetadata
-	export type ImageFunction = () => import('astro/zod').ZodObject<{
-		src: import('astro/zod').ZodString;
-		width: import('astro/zod').ZodNumber;
-		height: import('astro/zod').ZodNumber;
-		format: import('astro/zod').ZodUnion<
-			[
-				import('astro/zod').ZodLiteral<'png'>,
-				import('astro/zod').ZodLiteral<'jpg'>,
-				import('astro/zod').ZodLiteral<'jpeg'>,
-				import('astro/zod').ZodLiteral<'tiff'>,
-				import('astro/zod').ZodLiteral<'webp'>,
-				import('astro/zod').ZodLiteral<'gif'>,
-				import('astro/zod').ZodLiteral<'svg'>,
-				import('astro/zod').ZodLiteral<'avif'>,
-			]
-		>;
-	}>;
-
-	type BaseSchemaWithoutEffects =
-		| import('astro/zod').AnyZodObject
-		| import('astro/zod').ZodUnion<[BaseSchemaWithoutEffects, ...BaseSchemaWithoutEffects[]]>
-		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
-		| import('astro/zod').ZodIntersection<BaseSchemaWithoutEffects, BaseSchemaWithoutEffects>;
-
-	type BaseSchema =
-		| BaseSchemaWithoutEffects
-		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
-
-	export type SchemaContext = { image: ImageFunction };
-
-	type DataCollectionConfig<S extends BaseSchema> = {
-		type: 'data';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type ContentCollectionConfig<S extends BaseSchema> = {
-		type?: 'content';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type CollectionConfig<S> = ContentCollectionConfig<S> | DataCollectionConfig<S>;
-
-	export function defineCollection<S extends BaseSchema>(
-		input: CollectionConfig<S>
-	): CollectionConfig<S>;
-
-	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
-	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
-		ContentEntryMap[C]
-	>['slug'];
-
-	export function getEntryBySlug<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		// Note that this has to accept a regular string too, for SSR
-		entrySlug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
-		collection: C,
-		entryId: E
-	): Promise<CollectionEntry<C>>;
-
-	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => entry is E
-	): Promise<E[]>;
-	export function getCollection<C extends keyof AnyEntryMap>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => unknown
-	): Promise<CollectionEntry<C>[]>;
-
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(entry: {
-		collection: C;
-		slug: E;
-	}): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(entry: {
-		collection: C;
-		id: E;
-	}): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		slug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(
-		collection: C,
-		id: E
-	): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	/** Resolve an array of entry references from the same collection */
-	export function getEntries<C extends keyof ContentEntryMap>(
-		entries: {
-			collection: C;
-			slug: ValidContentEntrySlug<C>;
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-	export function getEntries<C extends keyof DataEntryMap>(
-		entries: {
-			collection: C;
-			id: keyof DataEntryMap[C];
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-
-	export function reference<C extends keyof AnyEntryMap>(
-		collection: C
-	): import('astro/zod').ZodEffects<
-		import('astro/zod').ZodString,
-		C extends keyof ContentEntryMap
-			? {
-					collection: C;
-					slug: ValidContentEntrySlug<C>;
-				}
-			: {
-					collection: C;
-					id: keyof DataEntryMap[C];
-				}
-	>;
-	// Allow generic `string` to avoid excessive type errors in the config
-	// if `dev` is not running to update as you edit.
-	// Invalid collection names will be caught at build time.
-	export function reference<C extends string>(
-		collection: C
-	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
-
-	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
-	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
-		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
-	>;
-
-	type ContentEntryMap = {
-		"blog": {
-"release-0.0.2-schwindlig.mdx": {
-	id: "release-0.0.2-schwindlig.mdx";
-  slug: "release-002-schwindlig";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.2.1-stuermisch.mdx": {
-	id: "release-0.0.2.1-stuermisch.mdx";
-  slug: "release-0021-stuermisch";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.3-maelstrom.mdx": {
-	id: "release-0.0.3-maelstrom.mdx";
-  slug: "release-003-maelstrom";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.4-gischt.mdx": {
-	id: "release-0.0.4-gischt.mdx";
-  slug: "release-004-gischt";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.3.0-donauwelle.mdx": {
-	id: "release-0.3.0-donauwelle.mdx";
-  slug: "release-030-donauwelle";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.4.0-brandung.mdx": {
-	id: "release-0.4.0-brandung.mdx";
-  slug: "release-040-brandung";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.5.0-wirbel.mdx": {
-	id: "release-0.5.0-wirbel.mdx";
-  slug: "release-050-wirbel";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.6.0-zimtschnecke.mdx": {
-	id: "release-0.6.0-zimtschnecke.mdx";
-  slug: "release-060-zimtschnecke";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.7.0-zuckerguss.mdx": {
-	id: "release-0.7.0-zuckerguss.mdx";
-  slug: "release-070-zuckerguss";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.8.0-himbeermuffin.mdx": {
-	id: "release-0.8.0-himbeermuffin.mdx";
-  slug: "release-080-himbeermuffin";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.9.0-bananenbrot.mdx": {
-	id: "release-0.9.0-bananenbrot.mdx";
-  slug: "release-090-bananenbrot";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-1.0.0-geburtstagskuchen.mdx": {
-	id: "release-1.0.0-geburtstagskuchen.mdx";
-  slug: "release-100-geburtstagskuchen";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"year-2.mdx": {
-	id: "year-2.mdx";
-  slug: "year-2";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-};
-
-	};
-
-	type DataEntryMap = {
-		
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	type ContentConfig = typeof import("../src/content/config");
-}

website/.gitignore

@@ -1,3 +1,4 @@
+.astro
 # build output
 dist/
 

website/package.json

@@ -35,6 +35,7 @@
     "@strudel/mini": "workspace:*",
     "@strudel/osc": "workspace:*",
     "@strudel/serial": "workspace:*",
+    "@strudel/shader": "workspace:*",
     "@strudel/soundfonts": "workspace:*",
     "@strudel/tonal": "workspace:*",
     "@strudel/transpiler": "workspace:*",

website/src/components/Udels/UdelsEditor.jsx

@@ -1,34 +1,26 @@
-import { ReplContext } from '@src/repl/util.mjs';
-
 import Loader from '@src/repl/components/Loader';
-import { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 
 // type Props = {
 //  context: replcontext,
-//  containerRef:  React.MutableRefObject<HTMLElement | null>,
-//  editorRef:  React.MutableRefObject<HTMLElement | null>,
-//  error: Error
-//  init: () => void
 // }
 
 export default function UdelsEditor(Props) {
-  const { context, containerRef, editorRef, error, init } = Props;
-  const { pending, started, handleTogglePlay } = context;
+  const { context } = Props;
+  const { containerRef, editorRef, error, init, pending, started, handleTogglePlay } = context;
+
   return (
-    <ReplContext.Provider value={context}>
-      <div className={'h-full flex w-full flex-col relative'}>
-        <Loader active={pending} />
-        {/* <Header context={context} /> */}
-        <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
-        <div className="grow flex relative overflow-hidden">
-          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        </div>
-        <UserFacingErrorMessage error={error} />
-        <Panel context={context} />
+    <div className={'h-full flex w-full flex-col relative'}>
+      <Loader active={pending} />
+      <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
+      <div className="grow flex relative overflow-hidden">
+        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
       </div>
-    </ReplContext.Provider>
+      <UserFacingErrorMessage error={error} />
+      <HorizontalPanel context={context} />
+    </div>
   );
 }

website/src/content/blog/release-0.0.2-schwindlig.mdx

@@ -26,7 +26,7 @@ author: froos
 - fix: 💄 Enhance visualisation of the Tutorial on mobile by @puria in https://github.com/tidalcycles/strudel/pull/19
 - Stateful queries and events (WIP) by @yaxu in https://github.com/tidalcycles/strudel/pull/14
 - Fix resolveState by @yaxu in https://github.com/tidalcycles/strudel/pull/22
-- added \_asNumber + interprete numbers as midi by @felixroos in https://github.com/tidalcycles/strudel/pull/21
+- added \_asNumber + interpret numbers as midi by @felixroos in https://github.com/tidalcycles/strudel/pull/21
 - Update package.json by @ChiakiUehira in https://github.com/tidalcycles/strudel/pull/23
 - packaging by @felixroos in https://github.com/tidalcycles/strudel/pull/24
 

website/src/content/blog/release-0.6.0-zimtschnecke.mdx

@@ -28,7 +28,7 @@ author: froos
 
 - support freq in pianoroll by @felixroos in https://github.com/tidalcycles/strudel/pull/308
 - ICLC2023 paper WIP by @yaxu in https://github.com/tidalcycles/strudel/pull/306
-- fix: copy share link to clipboard was broken for some browers by @felixroos in https://github.com/tidalcycles/strudel/pull/311
+- fix: copy share link to clipboard was broken for some browsers by @felixroos in https://github.com/tidalcycles/strudel/pull/311
 - Jsdoc component by @felixroos in https://github.com/tidalcycles/strudel/pull/312
 - object support for .scale by @felixroos in https://github.com/tidalcycles/strudel/pull/307
 - Astro build by @felixroos in https://github.com/tidalcycles/strudel/pull/315

website/src/content/blog/release-1.0.0-geburtstagskuchen.mdx

@@ -138,7 +138,7 @@ Plenty of things have been added to the docs, including a [showcase of what peop
 - Export patterns + ui tweaks by @felixroos in https://github.com/tidalcycles/strudel/pull/855
 - Pattern organization by @felixroos in https://github.com/tidalcycles/strudel/pull/858
 - Sound Import from local file system by @daslyfe in https://github.com/tidalcycles/strudel/pull/839
-- bugfix: suspend and close exisiting audio context when changing interface by @daslyfe in https://github.com/tidalcycles/strudel/pull/882
+- bugfix: suspend and close existing audio context when changing interface by @daslyfe in https://github.com/tidalcycles/strudel/pull/882
 - add root mode for voicings by @felixroos in https://github.com/tidalcycles/strudel/pull/887
 - scales can now be anchored by @felixroos in https://github.com/tidalcycles/strudel/pull/888
 - add dough function for raw dsp by @felixroos in https://github.com/tidalcycles/strudel/pull/707 (experimental)
@@ -195,7 +195,7 @@ Plenty of things have been added to the docs, including a [showcase of what peop
 - Update tauri.yml workflow file by @vasilymilovidov in https://github.com/tidalcycles/strudel/pull/705
 - vite-vanilla-repl readme fix by @felixroos in https://github.com/tidalcycles/strudel/pull/737
 - completely revert config mess by @felixroos in https://github.com/tidalcycles/strudel/pull/745
-- hopefully fix trainling slashes bug by @felixroos in https://github.com/tidalcycles/strudel/pull/753
+- hopefully fix trailing slashes bug by @felixroos in https://github.com/tidalcycles/strudel/pull/753
 - Update vite pwa by @felixroos in https://github.com/tidalcycles/strudel/pull/772
 - Update to Astro 3 by @felixroos in https://github.com/tidalcycles/strudel/pull/775
 - support multiple named serial connections, change default baudrate by @yaxu in https://github.com/tidalcycles/strudel/pull/551

website/src/docs/MiniRepl.jsx

@@ -1,7 +1,6 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Icon } from './Icon';
 import { silence, noteToMidi, _mod } from '@strudel/core';
-import { clearHydra } from '@strudel/hydra';
 import { getDrawContext, getPunchcardPainter } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
 import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
@@ -37,7 +36,7 @@ export function MiniRepl({
   const shouldShowCanvas = !!punchcard;
   const canvasId = shouldShowCanvas ? useMemo(() => `canvas-${id}`, [id]) : null;
   autodraw = !!punchcard || !!claviature || !!autodraw;
-  drawTime = drawTime ?? punchcard ? [0, 4] : [-2, 2];
+  drawTime = (drawTime ?? punchcard) ? [0, 4] : [-2, 2];
   if (claviature) {
     drawTime = [0, 0];
   }
@@ -120,6 +119,7 @@ export function MiniRepl({
                 'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
                 started ? 'animate-pulse' : '',
               )}
+              aria-label={started ? 'stop' : 'play'}
               onClick={() => editorRef.current?.toggle()}
             >
               <Icon type={started ? 'stop' : 'play'} />
@@ -129,6 +129,7 @@ export function MiniRepl({
                 'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
                 isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
               )}
+              aria-label="update"
               onClick={() => editorRef.current?.evaluate()}
             >
               <Icon type="refresh" />
@@ -140,6 +141,7 @@ export function MiniRepl({
                 className={
                   'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
                 }
+                aria-label="previous example"
                 onClick={() => changeTune(tuneIndex - 1)}
               >
                 <div className="rotate-180">
@@ -150,6 +152,7 @@ export function MiniRepl({
                 className={
                   'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
                 }
+                aria-label="next example"
                 onClick={() => changeTune(tuneIndex + 1)}
               >
                 <Icon type="skip" />

website/src/pages/learn/factories.mdx

@@ -25,26 +25,14 @@ These are the equivalents used by the Mini Notation:
 
 <JsDoc client:idle name="cat" h={0} />
 
-You can also use cat as a chained function like this:
-
-<JsDoc client:idle name="Pattern.cat" h={0} hideDescription />
-
 ## seq
 
 <JsDoc client:idle name="seq" h={0} />
 
-Or as a chained function:
-
-<JsDoc client:idle name="Pattern.seq" h={0} hideDescription />
-
 ## stack
 
 <JsDoc client:idle name="stack" h={0} />
 
-As a chained function:
-
-<JsDoc client:idle name="Pattern.stack" h={0} hideDescription />
-
 ## s_cat
 
 <JsDoc client:idle name="s_cat" h={0} />

website/src/pages/learn/input-output.mdx

@@ -45,7 +45,7 @@ But you can also control cc messages separately like this:
 $: ccv(sine.segment(16).slow(4)).ccn(74).midi()`}
 />
 
-# SuperDirt API
+# OSC/SuperDirt API
 
 In mainline tidal, the actual sound is generated via [SuperDirt](https://github.com/musikinformatik/SuperDirt/), which runs inside SuperCollider.
 Strudel also supports using [SuperDirt](https://github.com/musikinformatik/SuperDirt/) as a backend, although it requires some developer tooling to run.
@@ -73,16 +73,14 @@ Now you're all set!
 
 If you now hear sound, congratulations! If not, you can get help on the [#strudel channel in the TidalCycles discord](https://discord.com/invite/HGEdXmRkzT).
 
+Note: if you have the 'Audio Engine Target' in settings set to 'OSC', you do not need to add .osc() to the end of your pattern.
+
 ### Pattern.osc
 
 <JsDoc client:idle name="Pattern.osc" h={0} />
 
 ## SuperDirt Params
 
-The following functions can be used with [SuperDirt](https://github.com/musikinformatik/SuperDirt/):
-
-`s n note freq channel orbit cutoff resonance hcutoff hresonance bandf bandq djf vowel cut begin end loop fadeTime speed unitA gain amp accelerate crush coarse delay lock leslie lrate lsize pan panspan pansplay room size dry shape squiz waveloss attack decay octave detune tremolodepth`
-
 Please refer to [Tidal Docs](https://tidalcycles.org/) for more info.
 
 <br />

website/src/repl/Repl.jsx

@@ -4,252 +4,15 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { code2hash, logger, silence } from '@strudel/core';
-import { getDrawContext } from '@strudel/draw';
-import { transpiler } from '@strudel/transpiler';
-import {
-  getAudioContext,
-  webaudioOutput,
-  resetGlobalEffects,
-  resetLoadedSounds,
-  initAudioOnFirstClick,
-} from '@strudel/webaudio';
-import { defaultAudioDeviceName } from '../settings.mjs';
-import { getAudioDevices, setAudioDevice, setVersionDefaultsFrom } from './util.mjs';
-import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
-import { clearHydra } from '@strudel/hydra';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { settingsMap, useSettings } from '../settings.mjs';
-import {
-  setActivePattern,
-  setLatestCode,
-  createPatternID,
-  userPattern,
-  getViewingPatternData,
-  setViewingPatternData,
-} from '../user_pattern_utils.mjs';
-import { useStore } from '@nanostores/react';
-import { prebake } from './prebake.mjs';
-import { getRandomTune, initCode, loadModules, shareCode, ReplContext, isUdels } from './util.mjs';
-import './Repl.css';
-import { setInterval, clearInterval } from 'worker-timers';
-import { getMetadata } from '../metadata_parser';
+import { isIframe, isUdels } from './util.mjs';
 import UdelsEditor from '@components/Udels/UdelsEditor';
-
 import ReplEditor from './components/ReplEditor';
-
-const { latestCode } = settingsMap.get();
-
-let modulesLoading, presets, drawContext, clearCanvas, isIframe, audioReady;
-
-if (typeof window !== 'undefined') {
-  audioReady = initAudioOnFirstClick();
-  modulesLoading = loadModules();
-  presets = prebake();
-  drawContext = getDrawContext();
-  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
-  isIframe = window.location !== window.parent.location;
-}
-
-async function getModule(name) {
-  if (!modulesLoading) {
-    return;
-  }
-  const modules = await modulesLoading;
-  return modules.find((m) => m.packageName === name);
-}
+import EmbeddedReplEditor from './components/EmbeddedReplEditor';
+import { useReplContext } from './useReplContext';
 
 export function Repl({ embedded = false }) {
-  const isEmbedded = embedded || isIframe;
-  const { panelPosition, isZen, isSyncEnabled } = useSettings();
-  const init = useCallback(() => {
-    const drawTime = [-2, 2];
-    const drawContext = getDrawContext();
-    const editor = new StrudelMirror({
-      sync: isSyncEnabled,
-      defaultOutput: webaudioOutput,
-      getTime: () => getAudioContext().currentTime,
-      setInterval,
-      clearInterval,
-      transpiler,
-      autodraw: false,
-      root: containerRef.current,
-      initialCode: '// LOADING',
-      pattern: silence,
-      drawTime,
-      drawContext,
-      prebake: async () => Promise.all([modulesLoading, presets]),
-      onUpdateState: (state) => {
-        setReplState({ ...state });
-      },
-      onToggle: (playing) => {
-        if (!playing) {
-          clearHydra();
-        }
-      },
-      beforeEval: () => audioReady,
-      afterEval: (all) => {
-        const { code } = all;
-        //post to iframe parent (like Udels) if it exists...
-        window.parent?.postMessage(code);
-
-        setLatestCode(code);
-        window.location.hash = '#' + code2hash(code);
-        setDocumentTitle(code);
-        const viewingPatternData = getViewingPatternData();
-        setVersionDefaultsFrom(code);
-        const data = { ...viewingPatternData, code };
-        let id = data.id;
-        const isExamplePattern = viewingPatternData.collection !== userPattern.collection;
-
-        if (isExamplePattern) {
-          const codeHasChanged = code !== viewingPatternData.code;
-          if (codeHasChanged) {
-            // fork example
-            const newPattern = userPattern.duplicate(data);
-            id = newPattern.id;
-            setViewingPatternData(newPattern.data);
-          }
-        } else {
-          id = userPattern.isValidID(id) ? id : createPatternID();
-          setViewingPatternData(userPattern.update(id, data).data);
-        }
-        setActivePattern(id);
-      },
-      bgFill: false,
-    });
-    window.strudelMirror = editor;
-
-    // init settings
-
-    initCode().then(async (decoded) => {
-      let code, msg;
-      if (decoded) {
-        code = decoded;
-        msg = `I have loaded the code from the URL.`;
-      } else if (latestCode) {
-        code = latestCode;
-        msg = `Your last session has been loaded!`;
-      } else {
-        const { code: randomTune, name } = await getRandomTune();
-        code = randomTune;
-        msg = `A random code snippet named "${name}" has been loaded!`;
-      }
-      editor.setCode(code);
-      setDocumentTitle(code);
-      logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
-    });
-
-    editorRef.current = editor;
-  }, []);
-
-  const [replState, setReplState] = useState({});
-  const { started, isDirty, error, activeCode, pending } = replState;
-  const editorRef = useRef();
-  const containerRef = useRef();
-
-  // this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
-  // this will be the case when the main repl is being replaced
-  const _settings = useStore(settingsMap, { keys: Object.keys(defaultSettings) });
-  useEffect(() => {
-    let editorSettings = {};
-    Object.keys(defaultSettings).forEach((key) => {
-      if (_settings.hasOwnProperty(key)) {
-        editorSettings[key] = _settings[key];
-      }
-    });
-    editorRef.current?.updateSettings(editorSettings);
-  }, [_settings]);
-
-  // on first load, set stored audio device if possible
-  useEffect(() => {
-    const { audioDeviceName } = _settings;
-    if (audioDeviceName !== defaultAudioDeviceName) {
-      getAudioDevices().then((devices) => {
-        const deviceID = devices.get(audioDeviceName);
-        if (deviceID == null) {
-          return;
-        }
-        setAudioDevice(deviceID);
-      });
-    }
-  }, []);
-
-  //
-  // UI Actions
-  //
-
-  const setDocumentTitle = (code) => {
-    const meta = getMetadata(code);
-    document.title = (meta.title ? `${meta.title} - ` : '') + 'Strudel REPL';
-  };
-
-  const handleTogglePlay = async () => {
-    editorRef.current?.toggle();
-  };
-
-  const resetEditor = async () => {
-    (await getModule('@strudel/tonal'))?.resetVoicings();
-    resetGlobalEffects();
-    clearCanvas();
-    clearHydra();
-    resetLoadedSounds();
-    editorRef.current.repl.setCps(0.5);
-    await prebake(); // declare default samples
-  };
-
-  const handleUpdate = async (patternData, reset = false) => {
-    setViewingPatternData(patternData);
-    editorRef.current.setCode(patternData.code);
-    if (reset) {
-      await resetEditor();
-      handleEvaluate();
-    }
-  };
-
-  const handleEvaluate = () => {
-    editorRef.current.evaluate();
-  };
-  const handleShuffle = async () => {
-    const patternData = await getRandomTune();
-    const code = patternData.code;
-    logger(`[repl] ✨ loading random tune "${patternData.id}"`);
-    setActivePattern(patternData.id);
-    setViewingPatternData(patternData);
-    await resetEditor();
-    editorRef.current.setCode(code);
-    editorRef.current.repl.evaluate(code);
-  };
-
-  const handleShare = async () => shareCode(replState.code);
-  const context = {
-    embedded,
-    started,
-    pending,
-    isDirty,
-    activeCode,
-    handleTogglePlay,
-    handleUpdate,
-    handleShuffle,
-    handleShare,
-    handleEvaluate,
-  };
-
-  if (isUdels()) {
-    return (
-      <UdelsEditor context={context} error={error} init={init} editorRef={editorRef} containerRef={containerRef} />
-    );
-  }
-
-  return (
-    <ReplEditor
-      panelPosition={panelPosition}
-      isEmbedded={isEmbedded}
-      context={context}
-      error={error}
-      init={init}
-      editorRef={editorRef}
-      containerRef={containerRef}
-    />
-  );
+  const isEmbedded = embedded || isIframe();
+  const Editor = isUdels() ? UdelsEditor : isEmbedded ? EmbeddedReplEditor : ReplEditor;
+  const context = useReplContext();
+  return <Editor context={context} />;
 }

website/src/repl/components/EmbeddedReplEditor.jsx

@@ -0,0 +1,25 @@
+import Loader from '@src/repl/components/Loader';
+import { Code } from '@src/repl/components/Code';
+import BigPlayButton from '@src/repl/components/BigPlayButton';
+import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
+import { Header } from './Header';
+
+// type Props = {
+//  context: replcontext,
+// }
+
+export default function EmbeddedReplEditor(Props) {
+  const { context } = Props;
+  const { pending, started, handleTogglePlay, containerRef, editorRef, error, init } = context;
+  return (
+    <div className="h-full flex flex-col relative">
+      <Loader active={pending} />
+      <Header context={context} embedded={true} />
+      <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
+      <div className="grow flex relative overflow-hidden">
+        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+      </div>
+      <UserFacingErrorMessage error={error} />
+    </div>
+  );
+}

website/src/repl/components/Header.jsx

@@ -6,23 +6,14 @@ import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
 import { useSettings, setIsZen } from '../../settings.mjs';
-// import { ReplContext } from './Repl';
 import '../Repl.css';
+
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
-export function Header({ context }) {
-  const {
-    embedded,
-    started,
-    pending,
-    isDirty,
-    activeCode,
-    handleTogglePlay,
-    handleEvaluate,
-    handleShuffle,
-    handleShare,
-  } = context;
+export function Header({ context, embedded = false }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
+    context;
   const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
   const { isZen } = useSettings();
 
@@ -52,7 +43,7 @@ export function Header({ context }) {
           )}
         >
           <div
-            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
+            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer', isZen && 'fixed top-2 right-4')}
             onClick={() => {
               if (!isEmbedded) {
                 setIsZen(!isZen);

website/src/repl/components/ReplEditor.jsx

@@ -1,38 +1,30 @@
-import { ReplContext } from '@src/repl/util.mjs';
-
 import Loader from '@src/repl/components/Loader';
-import { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
-import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
+import { useSettings } from '@src/settings.mjs';
 
 // type Props = {
 //  context: replcontext,
-//  containerRef:  React.MutableRefObject<HTMLElement | null>,
-//  editorRef:  React.MutableRefObject<HTMLElement | null>,
-//  error: Error
-//  init: () => void
-//  isEmbedded: boolean
 // }
 
 export default function ReplEditor(Props) {
-  const { context, containerRef, editorRef, error, init, panelPosition } = Props;
-  const { pending, started, handleTogglePlay, isEmbedded } = context;
-  const showPanel = !isEmbedded;
+  const { context } = Props;
+  const { containerRef, editorRef, error, init, pending } = context;
+  const settings = useSettings();
+  const { panelPosition } = settings;
+
   return (
-    <ReplContext.Provider value={context}>
-      <div className="h-full flex flex-col relative">
-        <Loader active={pending} />
-        <Header context={context} />
-        {isEmbedded && <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />}
-        <div className="grow flex relative overflow-hidden">
-          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-          {panelPosition === 'right' && showPanel && <Panel context={context} />}
-        </div>
-        <UserFacingErrorMessage error={error} />
-        {panelPosition === 'bottom' && showPanel && <Panel context={context} />}
+    <div className="h-full flex flex-col relative">
+      <Loader active={pending} />
+      <Header context={context} />
+      <div className="grow flex relative overflow-hidden">
+        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+        {panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
-    </ReplContext.Provider>
+      <UserFacingErrorMessage error={error} />
+      {panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+    </div>
   );
 }

website/src/repl/components/panel/AudioEngineTargetSelector.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { audioEngineTargets } from '../../../settings.mjs';
+import { SelectInput } from './SelectInput';
+
+// Allows the user to select an audio interface for Strudel to play through
+export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
+  const onTargetChange = (target) => {
+    onChange(target);
+  };
+  const options = new Map([
+    [audioEngineTargets.webaudio, audioEngineTargets.webaudio],
+    [audioEngineTargets.osc, audioEngineTargets.osc],
+  ]);
+  return (
+    <div className=" flex flex-col gap-1">
+      <SelectInput isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
+      {target === audioEngineTargets.osc && (
+        <div>
+          <p className="text-sm italic">
+            ⚠ All events routed to OSC, audio is silenced! See{' '}
+            <a className="text-blue-500" href="https://strudel.cc/learn/input-output/">
+              Docs
+            </a>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

website/src/repl/components/panel/ConsoleTab.jsx

@@ -2,8 +2,8 @@ import cx from '@src/cx.mjs';
 
 export function ConsoleTab({ log }) {
   return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
-      <pre>{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-2">
+      <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
 ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
 ███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
 ╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     

website/src/repl/components/panel/Panel.jsx

@@ -1,10 +1,9 @@
-import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel/core';
 import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
-import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
-import { setActiveFooter, useSettings } from '../../../settings.mjs';
+import { useCallback, useState } from 'react';
+import { setPanelPinned, setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -12,33 +11,87 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import useClient from '@src/useClient.mjs';
-
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+import { ChevronLeftIcon } from '@heroicons/react/16/solid';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
-export function Panel({ context }) {
-  const footerContent = useRef();
+export function HorizontalPanel({ context }) {
+  const settings = useSettings();
+  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+
+  return (
+    <PanelNav
+      className={cx(
+        'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
+        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
+      )}
+    >
+      <div className="flex h-full overflow-auto ">
+        <PanelContent context={context} tab={tab} />
+      </div>
+
+      <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
+        <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+        <PinButton pinned={pinned} setPinned={setPanelPinned} />
+      </div>
+    </PanelNav>
+  );
+}
+
+export function VerticalPanel({ context }) {
+  const settings = useSettings();
+  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+
+  return (
+    <PanelNav
+      className={cx(
+        'hover:min-w-[min(600px,80vw)] hover:max-w-[min(600px,80vw)]',
+        pinned ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-8',
+      )}
+    >
+      <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
+        <div className="flex justify-between w-full ">
+          <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+          <PinButton pinned={pinned} setPinned={setPanelPinned} />
+        </div>
+
+        <div className="overflow-auto h-full">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      </div>
+      <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
+        <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
+      </div>
+    </PanelNav>
+  );
+}
+
+const tabNames = {
+  welcome: 'intro',
+  patterns: 'patterns',
+  sounds: 'sounds',
+  reference: 'reference',
+  console: 'console',
+  settings: 'settings',
+};
+if (TAURI) {
+  tabNames.files = 'files';
+}
+
+function PanelNav({ children, className, ...props }) {
+  return (
+    <nav
+      aria-label="Settings Menu"
+      className={cx('bg-lineHighlight group transition-all overflow-x-auto', className)}
+      {...props}
+    >
+      {children}
+    </nav>
+  );
+}
+
+function PanelContent({ context, tab }) {
   const [log, setLog] = useState([]);
-  const { activeFooter, isZen, panelPosition } = useSettings();
-
-  useIsomorphicLayoutEffect(() => {
-    if (footerContent.current && activeFooter === 'console') {
-      // scroll log box to bottom when log changes
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    }
-  }, [log, activeFooter]);
-  useIsomorphicLayoutEffect(() => {
-    if (!footerContent.current) {
-    } else if (activeFooter === 'console') {
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    } else {
-      footerContent.current.scrollTop = 0;
-    }
-  }, [activeFooter]);
-
   useLogger(
     useCallback((e) => {
       const { message, type, data } = e.detail;
@@ -60,66 +113,72 @@ export function Panel({ context }) {
     }, []),
   );
 
-  const PanelTab = ({ children, name, label }) => (
+  switch (tab) {
+    case tabNames.patterns:
+      return <PatternsTab context={context} />;
+    case tabNames.console:
+      return <ConsoleTab log={log} />;
+    case tabNames.sounds:
+      return <SoundsTab />;
+    case tabNames.reference:
+      return <Reference />;
+    case tabNames.settings:
+      return <SettingsTab started={context.started} />;
+    case tabNames.files:
+      return <FilesTab />;
+    default:
+      return <WelcomeTab context={context} />;
+  }
+}
+
+function PanelTab({ label, isSelected, onClick }) {
+  return (
     <>
       <div
-        onClick={() => setActiveFooter(name)}
+        onClick={onClick}
         className={cx(
           'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-foreground' : 'border-transparent',
+          isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
-        {label || name}
+        {label}
       </div>
-      {activeFooter === name && <>{children}</>}
     </>
   );
-  const client = useClient();
-  if (isZen) {
-    return null;
-  }
-
-  const isActive = activeFooter !== '';
-
-  let positions = {
-    right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
-    bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
-  };
-  if (!client) {
-    return null;
-  }
+}
+function Tabs({ setTab, tab }) {
   return (
-    <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
-      <div className="flex justify-between px-2">
-        <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
-          <PanelTab name="intro" label="welcome" />
-          <PanelTab name="patterns" />
-          <PanelTab name="sounds" />
-          <PanelTab name="console" />
-          <PanelTab name="reference" />
-          <PanelTab name="settings" />
-          {TAURI && <PanelTab name="files" />}
-        </div>
-        {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
-            <XMarkIcon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-      {activeFooter !== '' && (
-        <div className="relative overflow-hidden">
-          <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
-            {activeFooter === 'intro' && <WelcomeTab context={context} />}
-            {activeFooter === 'patterns' && <PatternsTab context={context} />}
-            {activeFooter === 'console' && <ConsoleTab log={log} />}
-            {activeFooter === 'sounds' && <SoundsTab />}
-            {activeFooter === 'reference' && <Reference />}
-            {activeFooter === 'settings' && <SettingsTab started={context.started} />}
-            {activeFooter === 'files' && <FilesTab />}
-          </div>
-        </div>
+    <div className={cx('flex select-none max-w-full overflow-auto pb-2')}>
+      {Object.keys(tabNames).map((key) => {
+        const val = tabNames[key];
+        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
+      })}
+    </div>
+  );
+}
+
+function PinButton({ pinned, setPinned }) {
+  return (
+    <button
+      onClick={() => setPinned(!pinned)}
+      className={cx(
+        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
+        pinned ? 'flex' : 'hidden',
       )}
-    </nav>
+      aria-label="Pin Settings Menu"
+    >
+      <svg
+        stroke="currentColor"
+        fill={'currentColor'}
+        strokeWidth="0"
+        className="w-full h-full"
+        opacity={pinned ? 1 : '.3'}
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"></path>
+      </svg>
+    </button>
   );
 }
 

website/src/repl/components/panel/PatternsTab.jsx

@@ -77,7 +77,7 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
 
 function ActionButton({ children, onClick, label, labelIsHidden }) {
   return (
-    <button className="hover:opacity-50" onClick={onClick} title={label}>
+    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
       {labelIsHidden !== true && label}
       {children}
     </button>
@@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
   const autoResetPatternOnChange = !isUdels();
 
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4 flex flex-col overflow-hidden max-h-full">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full h-full">
       <ButtonGroup
         value={patternFilter}
         onChange={(value) => settingsMap.setKey('patternFilter', value)}
@@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
         </div>
       )}
 
-      <section className="flex overflow-y-scroll max-h-full flex-col">
+      <section className="flex overflow-y-auto max-h-full flex-grow flex-col">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>

website/src/repl/components/panel/Reference.jsx

@@ -1,5 +1,7 @@
+import { useMemo, useState } from 'react';
+
 import jsdocJson from '../../../../../doc.json';
-const visibleFunctions = jsdocJson.docs
+const availableFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 
@@ -10,25 +12,50 @@ const getInnerText = (html) => {
 };
 
 export function Reference() {
+  const [search, setSearch] = useState('');
+
+  const visibleFunctions = useMemo(() => {
+    return availableFunctions.filter((entry) => {
+      if (!search) {
+        return true;
+      }
+
+      return entry.name.includes(search) || (entry.synonyms?.some((s) => s.includes(search)) ?? false);
+    });
+  }, [search]);
+
   return (
-    <div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
-      <div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
-        {visibleFunctions.map((entry, i) => (
-          <a
-            key={i}
-            className="cursor-pointer block hover:bg-lineHighlight py-1 px-4"
-            onClick={() => {
-              const el = document.getElementById(`doc-${i}`);
-              const container = document.getElementById('reference-container');
-              container.scrollTo(0, el.offsetTop);
-            }}
-          >
-            {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
-          </a>
-        ))}
+    <div className="flex h-full w-full p-2 text-foreground overflow-hidden">
+      <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
+        <div class="w-full flex">
+          <input
+            className="w-full p-1 bg-background rounded-md border-none"
+            placeholder="Search"
+            value={search}
+            onInput={(event) => setSearch(event.target.value)}
+          />
+        </div>
+        <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">
+          {visibleFunctions.map((entry, i) => (
+            <a
+              key={i}
+              className="cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden  px-1 text-ellipsis"
+              onClick={() => {
+                const el = document.getElementById(`doc-${i}`);
+                const container = document.getElementById('reference-container');
+                container.scrollTo(0, el.offsetTop);
+              }}
+            >
+              {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
+            </a>
+          ))}
+        </div>
       </div>
-      <div className="break-normal w-full h-full overflow-auto pl-4 flex relative" id="reference-container">
-        <div className="prose dark:prose-invert max-w-full pr-4">
+      <div
+        className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative"
+        id="reference-container"
+      >
+        <div className="prose dark:prose-invert min-w-full px-1 ">
           <h2>API Reference</h2>
           <p>
             This is the long list functions you can use! Remember that you don't need to remember all of those and that

website/src/repl/components/panel/SettingsTab.jsx

@@ -3,6 +3,8 @@ import { themes } from '@strudel/codemirror';
 import { isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
+import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
+import { confirmDialog } from '../../util.mjs';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -78,6 +80,8 @@ const fontFamilyOptions = {
   galactico: 'galactico',
 };
 
+const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';
+
 export function SettingsTab({ started }) {
   const {
     theme,
@@ -96,19 +100,41 @@ export function SettingsTab({ started }) {
     fontFamily,
     panelPosition,
     audioDeviceName,
+    audioEngineTarget,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
+  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
   return (
-    <div className="text-foreground p-4 space-y-4">
-      {AudioContext.prototype.setSinkId != null && (
+    <div className="text-foreground p-4 space-y-4 w-full">
+      {canChangeAudioDevice && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
             isDisabled={started}
             audioDeviceName={audioDeviceName}
-            onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
+            onChange={(audioDeviceName) => {
+              confirmDialog(RELOAD_MSG).then((r) => {
+                if (r == true) {
+                  settingsMap.setKey('audioDeviceName', audioDeviceName);
+                  return window.location.reload();
+                }
+              });
+            }}
           />
         </FormItem>
       )}
+      <FormItem label="Audio Engine Target">
+        <AudioEngineTargetSelector
+          target={audioEngineTarget}
+          onChange={(target) => {
+            confirmDialog(RELOAD_MSG).then((r) => {
+              if (r == true) {
+                settingsMap.setKey('audioEngineTarget', target);
+                return window.location.reload();
+              }
+            });
+          }}
+        />
+      </FormItem>
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>
@@ -193,10 +219,13 @@ export function SettingsTab({ started }) {
         <Checkbox
           label="Sync across Browser Tabs / Windows"
           onChange={(cbEvent) => {
-            if (confirm('Changing this setting requires the window to reload itself. OK?')) {
-              settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
-              window.location.reload();
-            }
+            const newVal = cbEvent.target.checked;
+            confirmDialog(RELOAD_MSG).then((r) => {
+              if (r) {
+                settingsMap.setKey('isSyncEnabled', newVal);
+                window.location.reload();
+              }
+            });
           }}
           disabled={shouldAlwaysSync}
           value={isSyncEnabled}
@@ -207,9 +236,11 @@ export function SettingsTab({ started }) {
         <button
           className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
           onClick={() => {
-            if (confirm('Sure?')) {
-              settingsMap.set(defaultSettings);
-            }
+            confirmDialog('Sure?').then((r) => {
+              if (r) {
+                settingsMap.set(defaultSettings);
+              }
+            });
           }}
         >
           restore default settings

website/src/repl/components/panel/SoundsTab.jsx

@@ -1,7 +1,7 @@
 import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
-import React, { useMemo, useRef } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
@@ -12,15 +12,20 @@ const getSamples = (samples) =>
 export function SoundsTab() {
   const sounds = useStore(soundMap);
   const { soundsFilter } = useSettings();
+  const [search, setSearch] = useState('');
+
   const soundEntries = useMemo(() => {
-    let filtered = Object.entries(sounds)
-      .filter(([key]) => !key.startsWith('_'))
-      .sort((a, b) => a[0].localeCompare(b[0]));
     if (!sounds) {
       return [];
     }
+
+    let filtered = Object.entries(sounds)
+      .filter(([key]) => !key.startsWith('_'))
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));
+
     if (soundsFilter === 'user') {
-      return filtered.filter(([key, { data }]) => !data.prebake);
+      return filtered.filter(([_, { data }]) => !data.prebake);
     }
     if (soundsFilter === 'drums') {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
@@ -32,9 +37,11 @@ export function SoundsTab() {
       return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
     return filtered;
-  }, [sounds, soundsFilter]);
+  }, [sounds, soundsFilter, search]);
+
   // holds mutable ref to current triggered sound
   const trigRef = useRef();
+
   // stop current sound on mouseup
   useEvent('mouseup', () => {
     const t = trigRef.current;
@@ -43,8 +50,16 @@ export function SoundsTab() {
       ref?.stop(getAudioContext().currentTime + 0.01);
     });
   });
+
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
+      <input
+        className="w-full p-1 bg-background rounded-md pb-2"
+        placeholder="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+
       <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
@@ -58,7 +73,8 @@ export function SoundsTab() {
         ></ButtonGroup>
         <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
-      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span

website/src/repl/components/panel/WelcomeTab.jsx

@@ -5,7 +5,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 
 export function WelcomeTab({ context }) {
   return (
-    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
+    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 ">
       <h3>
         <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
       </h3>

website/src/repl/files.mjs

@@ -23,10 +23,10 @@ async function hasStrudelJson(subpath) {
 async function loadStrudelJson(subpath) {
   const contents = await readTextFile(subpath + '/strudel.json', { dir });
   const sampleMap = JSON.parse(contents);
-  processSampleMap(sampleMap, (key, value) => {
-    registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value, fileResolver(subpath)), {
+  processSampleMap(sampleMap, (key, bank) => {
+    registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, bank, fileResolver(subpath)), {
       type: 'sample',
-      samples: value,
+      samples: bank,
       fileSystem: true,
       tag: 'local',
     });

website/src/repl/useReplContext.jsx

@@ -0,0 +1,239 @@
+/*
+Repl.jsx - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/App.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { code2hash, getPerformanceTimeSeconds, logger, silence } from '@strudel/core';
+import { getDrawContext } from '@strudel/draw';
+import { transpiler } from '@strudel/transpiler';
+import {
+  getAudioContextCurrentTime,
+  webaudioOutput,
+  resetGlobalEffects,
+  resetLoadedSounds,
+  initAudioOnFirstClick,
+} from '@strudel/webaudio';
+import { getAudioDevices, setAudioDevice, setVersionDefaultsFrom } from './util.mjs';
+import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
+import { clearHydra } from '@strudel/hydra';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { settingsMap, useSettings } from '../settings.mjs';
+import {
+  setActivePattern,
+  setLatestCode,
+  createPatternID,
+  userPattern,
+  getViewingPatternData,
+  setViewingPatternData,
+} from '../user_pattern_utils.mjs';
+import { superdirtOutput } from '@strudel/osc/superdirtoutput';
+import { audioEngineTargets, defaultAudioDeviceName } from '../settings.mjs';
+import { useStore } from '@nanostores/react';
+import { prebake } from './prebake.mjs';
+import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
+import './Repl.css';
+import { setInterval, clearInterval } from 'worker-timers';
+import { getMetadata } from '../metadata_parser';
+
+const { latestCode } = settingsMap.get();
+let modulesLoading, presets, drawContext, clearCanvas, audioReady;
+
+if (typeof window !== 'undefined') {
+  audioReady = initAudioOnFirstClick();
+  modulesLoading = loadModules();
+  presets = prebake();
+  drawContext = getDrawContext();
+  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
+}
+
+async function getModule(name) {
+  if (!modulesLoading) {
+    return;
+  }
+  const modules = await modulesLoading;
+  return modules.find((m) => m.packageName === name);
+}
+
+export function useReplContext() {
+  const { isSyncEnabled, audioEngineTarget } = useSettings();
+  const shouldUseWebaudio = audioEngineTarget !== audioEngineTargets.osc;
+  const defaultOutput = shouldUseWebaudio ? webaudioOutput : superdirtOutput;
+  const getTime = shouldUseWebaudio ? getAudioContextCurrentTime : getPerformanceTimeSeconds;
+
+  const init = useCallback(() => {
+    const drawTime = [-2, 2];
+    const drawContext = getDrawContext();
+    const editor = new StrudelMirror({
+      sync: isSyncEnabled,
+      defaultOutput,
+      getTime,
+      setInterval,
+      clearInterval,
+      transpiler,
+      autodraw: false,
+      root: containerRef.current,
+      initialCode: '// LOADING',
+      pattern: silence,
+      drawTime,
+      drawContext,
+      prebake: async () => Promise.all([modulesLoading, presets]),
+      onUpdateState: (state) => {
+        setReplState({ ...state });
+      },
+      onToggle: (playing) => {
+        if (!playing) {
+          clearHydra();
+        }
+      },
+      beforeEval: () => audioReady,
+      afterEval: (all) => {
+        const { code } = all;
+        //post to iframe parent (like Udels) if it exists...
+        window.parent?.postMessage(code);
+
+        setLatestCode(code);
+        window.location.hash = '#' + code2hash(code);
+        setDocumentTitle(code);
+        const viewingPatternData = getViewingPatternData();
+        setVersionDefaultsFrom(code);
+        const data = { ...viewingPatternData, code };
+        let id = data.id;
+        const isExamplePattern = viewingPatternData.collection !== userPattern.collection;
+
+        if (isExamplePattern) {
+          const codeHasChanged = code !== viewingPatternData.code;
+          if (codeHasChanged) {
+            // fork example
+            const newPattern = userPattern.duplicate(data);
+            id = newPattern.id;
+            setViewingPatternData(newPattern.data);
+          }
+        } else {
+          id = userPattern.isValidID(id) ? id : createPatternID();
+          setViewingPatternData(userPattern.update(id, data).data);
+        }
+        setActivePattern(id);
+      },
+      bgFill: false,
+    });
+    window.strudelMirror = editor;
+
+    // init settings
+    initCode().then(async (decoded) => {
+      let code, msg;
+      if (decoded) {
+        code = decoded;
+        msg = `I have loaded the code from the URL.`;
+      } else if (latestCode) {
+        code = latestCode;
+        msg = `Your last session has been loaded!`;
+      } else {
+        const { code: randomTune, name } = await getRandomTune();
+        code = randomTune;
+        msg = `A random code snippet named "${name}" has been loaded!`;
+      }
+      editor.setCode(code);
+      setDocumentTitle(code);
+      logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
+    });
+
+    editorRef.current = editor;
+  }, []);
+
+  const [replState, setReplState] = useState({});
+  const { started, isDirty, error, activeCode, pending } = replState;
+  const editorRef = useRef();
+  const containerRef = useRef();
+
+  // this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
+  // this will be the case when the main repl is being replaced
+  const _settings = useStore(settingsMap, { keys: Object.keys(defaultSettings) });
+  useEffect(() => {
+    let editorSettings = {};
+    Object.keys(defaultSettings).forEach((key) => {
+      if (Object.prototype.hasOwnProperty.call(_settings, key)) {
+        editorSettings[key] = _settings[key];
+      }
+    });
+    editorRef.current?.updateSettings(editorSettings);
+  }, [_settings]);
+
+  // on first load, set stored audio device if possible
+  useEffect(() => {
+    const { audioDeviceName } = _settings;
+    if (audioDeviceName !== defaultAudioDeviceName) {
+      getAudioDevices().then((devices) => {
+        const deviceID = devices.get(audioDeviceName);
+        if (deviceID == null) {
+          return;
+        }
+        setAudioDevice(deviceID);
+      });
+    }
+  }, []);
+
+  //
+  // UI Actions
+  //
+
+  const setDocumentTitle = (code) => {
+    const meta = getMetadata(code);
+    document.title = (meta.title ? `${meta.title} - ` : '') + 'Strudel REPL';
+  };
+
+  const handleTogglePlay = async () => {
+    editorRef.current?.toggle();
+  };
+
+  const resetEditor = async () => {
+    (await getModule('@strudel/tonal'))?.resetVoicings();
+    resetGlobalEffects();
+    clearCanvas();
+    clearHydra();
+    resetLoadedSounds();
+    editorRef.current.repl.setCps(0.5);
+    await prebake(); // declare default samples
+  };
+
+  const handleUpdate = async (patternData, reset = false) => {
+    setViewingPatternData(patternData);
+    editorRef.current.setCode(patternData.code);
+    if (reset) {
+      await resetEditor();
+      handleEvaluate();
+    }
+  };
+
+  const handleEvaluate = () => {
+    editorRef.current.evaluate();
+  };
+  const handleShuffle = async () => {
+    const patternData = await getRandomTune();
+    const code = patternData.code;
+    logger(`[repl] ✨ loading random tune "${patternData.id}"`);
+    setActivePattern(patternData.id);
+    setViewingPatternData(patternData);
+    await resetEditor();
+    editorRef.current.setCode(code);
+    editorRef.current.repl.evaluate(code);
+  };
+
+  const handleShare = async () => shareCode(replState.code);
+  const context = {
+    started,
+    pending,
+    isDirty,
+    activeCode,
+    handleTogglePlay,
+    handleUpdate,
+    handleShuffle,
+    handleShare,
+    handleEvaluate,
+    init,
+    error,
+    editorRef,
+    containerRef,
+  };
+  return context;
+}

website/src/repl/util.mjs

@@ -2,14 +2,11 @@ import { evalScope, hash2code, logger } from '@strudel/core';
 import { settingPatterns, defaultAudioDeviceName } from '../settings.mjs';
 import { getAudioContext, initializeAudioOutput, setDefaultAudioContext, setVersionDefaults } from '@strudel/webaudio';
 import { getMetadata } from '../metadata_parser';
-
 import { isTauri } from '../tauri.mjs';
 import './Repl.css';
-
 import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
 import { writeText } from '@tauri-apps/api/clipboard';
-import { createContext } from 'react';
 import { $featuredPatterns, loadDBPatterns } from '@src/user_pattern_utils.mjs';
 
 // Create a single supabase client for interacting with your database
@@ -81,6 +78,7 @@ export function loadModules() {
     import('@strudel/codemirror'),
     import('@strudel/hydra'),
     import('@strudel/serial'),
+    import('@strudel/shader'),
     import('@strudel/soundfonts'),
     import('@strudel/csound'),
     import('@strudel/tidal'),
@@ -97,6 +95,16 @@ export function loadModules() {
 
   return evalScope(settingPatterns, ...modules);
 }
+// confirm dialog is a promise in webkit and a boolean in other browsers... normalize it to be a promise everywhere
+export function confirmDialog(msg) {
+  const confirmed = confirm(msg);
+  if (confirmed instanceof Promise) {
+    return confirmed;
+  }
+  return new Promise((resolve) => {
+    resolve(confirmed);
+  });
+}
 
 let lastShared;
 export async function shareCode(codeToShare) {
@@ -105,37 +113,48 @@ export async function shareCode(codeToShare) {
     logger(`Link already generated!`, 'error');
     return;
   }
-  const isPublic = confirm(
+
+  confirmDialog(
     'Do you want your pattern to be public? If no, press cancel and you will get just a private link.',
-  );
-  // generate uuid in the browser
-  const hash = nanoid(12);
-  const shareUrl = window.location.origin + window.location.pathname + '?' + hash;
-  const { error } = await supabase.from('code_v1').insert([{ code: codeToShare, hash, ['public']: isPublic }]);
-  if (!error) {
-    lastShared = codeToShare;
-    // copy shareUrl to clipboard
-    if (isTauri()) {
-      await writeText(shareUrl);
+  ).then(async (isPublic) => {
+    const hash = nanoid(12);
+    const shareUrl = window.location.origin + window.location.pathname + '?' + hash;
+    const { error } = await supabase.from('code_v1').insert([{ code: codeToShare, hash, ['public']: isPublic }]);
+    if (!error) {
+      lastShared = codeToShare;
+      // copy shareUrl to clipboard
+      if (isTauri()) {
+        await writeText(shareUrl);
+      } else {
+        await navigator.clipboard.writeText(shareUrl);
+      }
+      const message = `Link copied to clipboard: ${shareUrl}`;
+      alert(message);
+      // alert(message);
+      logger(message, 'highlight');
     } else {
-      await navigator.clipboard.writeText(shareUrl);
+      console.log('error', error);
+      const message = `Error: ${error.message}`;
+      // alert(message);
+      logger(message);
     }
-    const message = `Link copied to clipboard: ${shareUrl}`;
-    alert(message);
-    // alert(message);
-    logger(message, 'highlight');
-  } else {
-    console.log('error', error);
-    const message = `Error: ${error.message}`;
-    // alert(message);
-    logger(message);
+  });
+}
+
+export const isIframe = () => window.location !== window.parent.location;
+function isCrossOriginFrame() {
+  try {
+    return !window.top.location.hostname;
+  } catch (e) {
+    return true;
   }
 }
 
-export const ReplContext = createContext(null);
-
 export const isUdels = () => {
-  return window.parent?.location.pathname.includes('udels');
+  if (isCrossOriginFrame()) {
+    return false;
+  }
+  return window.top?.location?.pathname.includes('udels');
 };
 
 export const getAudioDevices = async () => {

website/src/settings.mjs

@@ -5,6 +5,11 @@ import { isUdels } from './repl/util.mjs';
 
 export const defaultAudioDeviceName = 'System Standard';
 
+export const audioEngineTargets = {
+  webaudio: 'webaudio',
+  osc: 'osc',
+};
+
 export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
@@ -25,9 +30,11 @@ export const defaultSettings = {
   isZen: false,
   soundsFilter: 'all',
   patternFilter: 'community',
-  panelPosition: 'right',
+  panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom',
+  isPanelPinned: true,
   userPatterns: '{}',
   audioDeviceName: defaultAudioDeviceName,
+  audioEngineTarget: audioEngineTargets.webaudio,
 };
 
 let search = null;
@@ -54,6 +61,7 @@ export function useSettings() {
   return {
     ...state,
     isZen: parseBoolean(state.isZen),
+    isPanelPinned: parseBoolean(state.isPanelPinned),
     isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
     isBracketClosingEnabled: parseBoolean(state.isBracketClosingEnabled),
     isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
@@ -71,6 +79,7 @@ export function useSettings() {
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
+export const setPanelPinned = (isPinned) => settingsMap.setKey('isPanelPinned', isPinned);
 
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
 

website/src/styles/index.css

@@ -52,6 +52,7 @@
 }
 :root {
   --app-height: 100vh;
+  --app-width: 100vw;
 }
 
 #console-tab {

website/src/user_pattern_utils.mjs

@@ -1,10 +1,9 @@
 import { atom } from 'nanostores';
-import { persistentAtom } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { logger } from '@strudel/core';
 import { nanoid } from 'nanoid';
 import { settingsMap } from './settings.mjs';
-import { parseJSON, supabase } from './repl/util.mjs';
+import { confirmDialog, parseJSON, supabase } from './repl/util.mjs';
 
 export let $publicPatterns = atom([]);
 export let $featuredPatterns = atom([]);
@@ -131,17 +130,19 @@ export const userPattern = {
     return this.update(newPattern.id, { ...newPattern.data, code: data.code });
   },
   clearAll() {
-    if (!confirm(`This will delete all your patterns. Are you really sure?`)) {
-      return;
-    }
-    const viewingPatternData = getViewingPatternData();
-    setUserPatterns({});
+    confirmDialog(`This will delete all your patterns. Are you really sure?`).then((r) => {
+      if (r == false) {
+        return;
+      }
+      const viewingPatternData = getViewingPatternData();
+      setUserPatterns({});
 
-    if (viewingPatternData.collection !== this.collection) {
-      return { id: viewingPatternData.id, data: viewingPatternData };
-    }
-    setActivePattern(null);
-    return this.create();
+      if (viewingPatternData.collection !== this.collection) {
+        return { id: viewingPatternData.id, data: viewingPatternData };
+      }
+      setActivePattern(null);
+      return this.create();
+    });
   },
   delete(id) {
     const userPatterns = this.getAll();

website/tailwind.config.cjs

@@ -34,6 +34,7 @@ module.exports = {
       },
       spacing: {
         'app-height': 'var(--app-height)',
+        'app-width': 'var(--app-width)',
       },
       typography(theme) {
         return {