Publish

- @strudel.cycles/core@0.2.0 - @strudel.cycles/eval@0.2.0 - @strudel.cycles/midi@0.2.0 - @strudel.cycles/mini@0.2.0 - @strudel.cycles/react@0.2.0 - @strudel.cycles/soundfonts@0.2.0 - @strudel.cycles/tonal@0.2.0 - @strudel.cycles/tone@0.2.0 - @strudel.cycles/webaudio@0.2.0 - @strudel.cycles/webdirt@0.2.0 - @strudel.cycles/xen@0.2.0
add soundfont2 dependency
2026-07-14 14:53:45 -04:00 · 2022-08-14 17:56:28 +02:00 · 2022-08-14 17:51:07 +02:00 · 2022-08-14 17:40:41 +02:00 · 2022-08-14 16:04:14 +02:00 · 2022-08-14 15:55:50 +02:00
236 changed files with 32518 additions and 5363 deletions
@@ -30,4 +30,9 @@ mytunes.ts
 doc
 out
 .parcel-cache
-repl_old
+repl_old
+tutorial.rendered.mdx
+doc.json
+talk/public/EmuSP12
+talk/public/samples
+server/samples/old
@@ -32,7 +32,9 @@ Use one of the Communication Channels listed above.
 ## Improve the Tutorial

 If you find some weak spots in the [tutorial](https://strudel.tidalcycles.org/), 
-you are welcome to improve them by editing [this file](https://github.com/tidalcycles/strudel/blob/main/repl/src/tutorial/tutorial.mdx).
+you are welcome to improve them by editing [this file](https://github.com/tidalcycles/strudel/blob/main/tutorial/tutorial.mdx).
+
+
 This will even work without setting up a development environment, only a github account is required.

 ## Propose a Feature
@@ -2,7 +2,7 @@

 [![Strudel test status](https://github.com/tidalcycles/strudel/actions/workflows/test.yml/badge.svg)](https://github.com/tidalcycles/strudel/actions)

-An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This is unstable software, please tread carefully.
+An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This software is slowly stabilising, but please continue to tread carefully.

 - Try it here: <https://strudel.tidalcycles.org/>
 - Tutorial: <https://strudel.tidalcycles.org/tutorial/>
@@ -38,6 +38,12 @@ Click on the package names to find out more about each one.

 There are many ways to contribute to this project! See [contribution guide](./CONTRIBUTING.md).

+<a href="https://github.com/tidalcycles/strudel/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tidalcycles/strudel" />
+</a>
+
+Made with [contrib.rocks](https://contrib.rocks).
+
 ## Community

 There is a #strudel channel on the TidalCycles discord: <https://discord.com/invite/HGEdXmRkzT>
@@ -1 +0,0 @@
-strudel.tidalcycles.org
@@ -1,16 +0,0 @@
-{
-  "files": {
-    "main.css": "/static/css/main.35f2ca4c.css",
-    "main.js": "/static/js/main.f848d51e.js",
-    "static/js/787.1c52cb78.chunk.js": "/static/js/787.1c52cb78.chunk.js",
-    "static/media/logo.svg": "/static/media/logo.ac95051720b3dccfe511e0e02d8e1029.svg",
-    "index.html": "/index.html",
-    "main.35f2ca4c.css.map": "/static/css/main.35f2ca4c.css.map",
-    "main.f848d51e.js.map": "/static/js/main.f848d51e.js.map",
-    "787.1c52cb78.chunk.js.map": "/static/js/787.1c52cb78.chunk.js.map"
-  },
-  "entrypoints": [
-    "static/css/main.35f2ca4c.css",
-    "static/js/main.f848d51e.js"
-  ]
-}
@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Strudel REPL"/><title>Strudel REPL</title><script defer="defer" src="/static/js/main.f848d51e.js"></script><link href="/static/css/main.35f2ca4c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
@@ -1,15 +0,0 @@
-{
-  "short_name": "Strudel REPL",
-  "name": "Strudel REPL - Tidal Patterns in JavaScript",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_strudel_cycles_repl=self.webpackChunk_strudel_cycles_repl||[]).push([[787],{787:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(n=m(e,r,t),o&&a(o),s((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},h=!1,T=-1,y=function(e,t){h||(g((function(e){T=e.value})),h=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
-//# sourceMappingURL=787.1c52cb78.chunk.js.map
@@ -1,96 +0,0 @@
-/* 
-
-Strudel - javascript-based environment for live coding algorithmic (musical) patterns
-https://strudel.tidalcycles.org / https://github.com/tidalcycles/strudel/
-
-Copyright (C) Strudel contributors 
-https://github.com/tidalcycles/strudel/graphs/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/>.
-
-*/
-
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-/*! @license ReactCodeMirror - MIT License - Tom Golden (8162045+tbjgolden@users.noreply.github.com) */
-
-/**
- * @license Fraction.js v4.2.0 05/03/2022
- * https://www.xarg.org/2014/03/rational-numbers-in-javascript/
- *
- * Copyright (c) 2021, Robert Eisele (robert@xarg.org)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- **/
-
-/**
- * Tone.js
- * @author Yotam Mann
- * @license http://opensource.org/licenses/MIT MIT License
- * @copyright 2014-2019 Yotam Mann
- */
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
@@ -1 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link rel="icon" href="/tutorial/favicon.e3ab9dd9.ico"><link rel="stylesheet" type="text/css" href="/tutorial/index.a3acddda.css"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Strudel REPL"><title>Strudel Tutorial</title></head><body> <div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript> <script src="/tutorial/index.55306425.js" defer></script> </body></html>
@@ -4,9 +4,11 @@
  "private": true,
  "description": "Port of tidalcycles to javascript",
  "scripts": {
-    "test": "npm run test --workspaces --if-present && cd repl && npm run test",
+    "test": "vitest run --version",
+    "test-ui": "vitest --ui",
    "bootstrap": "lerna bootstrap",
-    "setup": "npm i && npm run bootstrap && cd repl && npm i",
+    "setup": "npm i && npm run bootstrap && cd repl && npm i && cd ../tutorial && npm i",
+    "snapshot": "cd repl && npm run snapshot",
    "repl": "cd repl && npm run dev",
    "osc": "cd packages/osc && npm run server",
    "build": "rm -rf out && cd repl && npm run build && cd ../tutorial && npm run build",
@@ -36,12 +38,14 @@
  },
  "homepage": "https://strudel.tidalcycles.org",
  "devDependencies": {
+    "@vitest/ui": "^0.21.1",
    "events": "^3.3.0",
    "gh-pages": "^4.0.0",
+    "happy-dom": "^6.0.4",
    "jsdoc": "^3.6.10",
    "jsdoc-json": "^2.0.2",
    "jsdoc-to-markdown": "^7.1.1",
    "lerna": "^4.0.0",
-    "mocha": "^9.1.4"
+    "vitest": "^0.21.1"
  }
 }
@@ -8,100 +8,433 @@ import { Pattern, sequence } from './pattern.mjs';

 const controls = {};
 const generic_params = [
+  /**
+   * Select a sound / sample by name.
+   *
+   * <details>
+   * <summary>show all sounds</summary>
+   *
+   * 808 (6) 808bd (25) 808cy (25) 808hc (5) 808ht (5) 808lc (5) 808lt (5) 808mc (5) 808mt (5) 808oh (5) 808sd (25) 909 (1) ab (12) ade (10) ades2 (9) ades3 (7) ades4 (6) alex (2) alphabet (26) amencutup (32) armora (7) arp (2) arpy (11) auto (11) baa (7) baa2 (7) bass (4) bass0 (3) bass1 (30) bass2 (5) bass3 (11) bassdm (24) bassfoo (3) battles (2) bd (24) bend (4) bev (2) bin (2) birds (10) birds3 (19) bleep (13) blip (2) blue (2) bottle (13) breaks125 (2) breaks152 (1) breaks157 (1) breaks165 (1) breath (1) bubble (8) can (14) casio (3) cb (1) cc (6) chin (4) circus (3) clak (2) click (4) clubkick (5) co (4) coins (1) control (2) cosmicg (15) cp (2) cr (6) crow (4) d (4) db (13) diphone (38) diphone2 (12) dist (16) dork2 (4) dorkbot (2) dr (42) dr2 (6) dr55 (4) dr_few (8) drum (6) drumtraks (13) e (8) east (9) electro1 (13) em2 (6) erk (1) f (1) feel (7) feelfx (8) fest (1) fire (1) flick (17) fm (17) foo (27) future (17) gab (10) gabba (4) gabbaloud (4) gabbalouder (4) glasstap (3) glitch (8) glitch2 (8) gretsch (24) gtr (3) h (7) hand (17) hardcore (12) hardkick (6) haw (6) hc (6) hh (13) hh27 (13) hit (6) hmm (1) ho (6) hoover (6) house (8) ht (16) if (5) ifdrums (3) incoming (8) industrial (32) insect (3) invaders (18) jazz (8) jungbass (20) jungle (13) juno (12) jvbass (13) kicklinn (1) koy (2) kurt (7) latibro (8) led (1) less (4) lighter (33) linnhats (6) lt (16) made (7) made2 (1) mash (2) mash2 (4) metal (10) miniyeah (4) monsterb (6) moog (7) mouth (15) mp3 (4) msg (9) mt (16) mute (28) newnotes (15) noise (1) noise2 (8) notes (15) numbers (9) oc (4) odx (15) off (1) outdoor (6) pad (3) padlong (1) pebbles (1) perc (6) peri (15) pluck (17) popkick (10) print (11) proc (2) procshort (8) psr (30) rave (8) rave2 (4) ravemono (2) realclaps (4) reverbkick (1) rm (2) rs (1) sax (22) sd (2) seawolf (3) sequential (8) sf (18) sheffield (1) short (5) sid (12) sine (6) sitar (8) sn (52) space (18) speakspell (12) speech (7) speechless (10) speedupdown (9) stab (23) stomp (10) subroc3d (11) sugar (2) sundance (6) tabla (26) tabla2 (46) tablex (3) tacscan (22) tech (13) techno (7) tink (5) tok (4) toys (13) trump (11) ul (10) ulgab (5) uxay (3) v (6) voodoo (5) wind (10) wobble (1) world (3) xmas (1) yeah (31)
+   *
+   * <a href="https://tidalcycles.org/docs/configuration/Audio%20Samples/default_library" target="_blank">more info</a>
+   *
+   * </details>
+   *
+   * @name s
+   * @param {string | Pattern} sound The sound / pattern of sounds to pick
+   * @example
+   * s("bd hh").osc()
+   *
+   */
  ['s', 's', 'sound'],
+  /**
+   * The note or sample number to choose for a synth or sampleset
+   * Note names currently not working yet, but will hopefully soon. Just stick to numbers for now
+   *
+   * @name n
+   * @param {string | number | Pattern} value note name, note number or sample number
+   * @example
+   * s('superpiano').n("<0 1 2 3>").osc()
+   * @example
+   * s('superpiano').n("<c4 d4 e4 g4>").osc()
+   * @example
+   * n("0 1 2 3").s('east').osc()
+   */
+  // TODO: nOut does not work
+  // TODO: notes don't work as expected
+  // current "workaround" for notes:
+  // s('superpiano').n("<c0 d0 e0 g0>"._asNumber()).osc()
+  // -> .n or .osc (or .superdirt) would need to convert note strings to numbers
+  // also see https://github.com/tidalcycles/strudel/pull/63
+  ['f', 'n', 'The note or sample number to choose for a synth or sampleset'],
+  ['f', 'note', 'The note or pitch to play a sound or synth with'],
  //['s', 'toArg', 'for internal sound routing'],
  // ["f", "from", "for internal sound routing"),
  //['f', 'to', 'for internal sound routing'],
+  /**
+   * A pattern of numbers that speed up (or slow down) samples while they play. Currently only supported by osc / superdirt.
+   *
+   * @name accelerate
+   * @param {number | Pattern} amount acceleration.
+   * @example
+   * s("sax").accelerate("<0 1 2 4 8 16>").slow(2).osc()
+   *
+   */
  ['f', 'accelerate', 'a pattern of numbers that speed up (or slow down) samples while they play.'],
-  ['f', 'amp', 'like @gain@, but linear.'],
-  [
-    'f',
-    'attack',
-    'a pattern of numbers to specify the attack time (in seconds) of an envelope applied to each sample.',
-  ],
-  ['f', 'bandf', 'a pattern of numbers from 0 to 1. Sets the center frequency of the band-pass filter.'],
-  ['f', 'bandq', 'a pattern of anumbers from 0 to 1. Sets the q-factor of the band-pass filter.'],
-  [
-    'f',
-    'begin',
-    'a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.',
-  ],
-  ['f', 'legato', 'controls the amount of overlap between two adjacent sounds'],
-  // ['f', 'clhatdecay', ''],
-  [
-    'f',
-    'crush',
-    'bit crushing, a pattern of numbers from 1 (for drastic reduction in bit-depth) to 16 (for barely no reduction).',
-  ],
-  [
-    'f',
-    'coarse',
-    'fake-resampling, a pattern of numbers for lowering the sample rate, i.e. 1 for original 2 for half, 3 for a third and so on.',
-  ],
-  ['i', 'channel', 'choose the channel the pattern is sent to in superdirt'],
-  [
-    'i',
-    'cut',
-    'In the style of classic drum-machines, `cut` will stop a playing sample as soon as another samples with in same cutgroup is to be played. An example would be an open hi-hat followed by a closed one, essentially muting the open.',
-  ],
-  ['f', 'cutoff', 'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the low-pass filter.'],
-  // ['f', 'cutoffegint', ''],
-  ['f', 'decay', ''],
-  ['f', 'delay', 'a pattern of numbers from 0 to 1. Sets the level of the delay signal.'],
-  ['f', 'delayfeedback', 'a pattern of numbers from 0 to 1. Sets the amount of delay feedback.'],
-  ['f', 'delaytime', 'a pattern of numbers from 0 to 1. Sets the length of the delay.'],
-  ['f', 'detune', ''],
-  ['f', 'djf', 'DJ filter, below 0.5 is low pass filter, above is high pass filter.'],
-  [
-    'f',
-    'dry',
-    'when set to `1` will disable all reverb for this pattern. See `room` and `size` for more information about reverb.',
-  ],
-  [
-    'f',
-    'end',
-    'the same as `begin`, but cuts the end off samples, shortening them; e.g. `0.75` to cut off the last quarter of each sample.',
-  ],
-  [
-    'f',
-    'fadeTime',
-    "Used when using begin/end or chop/striate and friends, to change the fade out time of the 'grain' envelope.",
-  ],
-  [
-    'f',
-    'fadeInTime',
-    'As with fadeTime, but controls the fade in time of the grain envelope. Not used if the grain begins at position 0 in the sample.',
-  ],
-  ['f', 'freq', ''],
+  /**
+   * Like {@link amp}, but exponential.
+   *
+   * @name gain
+   * @param {number | Pattern} amount gain.
+   * @example
+   * s("bd*8").gain(".7*2 1 .7*2 1 .7 1").osc()
+   *
+   */
  [
    'f',
    'gain',
    'a pattern of numbers that specify volume. Values less than 1 make the sound quieter. Values greater than 1 make the sound louder. For the linear equivalent, see @amp@.',
  ],
-  ['f', 'gate', ''],
-  // ['f', 'hatgrain', ''],
+  /**
+   * Like {@link gain}, but linear.
+   *
+   * @name amp
+   * @param {number | Pattern} amount gain.
+   * @example
+   * s("bd*8").amp(".1*2 .5 .1*2 .5 .1 .5").osc()
+   *
+   */
+  ['f', 'amp', 'like @gain@, but linear.'],
+  // TODO: find out why 0 does not work, and it generally seems not right
+  /*
+   * A pattern of numbers to specify the attack time of an envelope applied to each sample.
+   *
+   * @name attack
+   * @param {number | Pattern} attack time in seconds.
+   * @example
+   * n("c5 e5").s('superpiano').attack("<0 .1>").osc()
+   *
+   */
  [
    'f',
-    'hcutoff',
-    'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the high-pass filter. Also has alias @hpf@',
+    'attack',
+    'a pattern of numbers to specify the attack time (in seconds) of an envelope applied to each sample.',
+  ],
+  // TODO: find out how this works?
+  /*
+   * Envelope decay time = the time it takes after the attack time to reach the sustain level.
+   *
+   * @name decay
+   * @param {number | Pattern} time decay time in seconds
+   * @example
+   * s("sax").cut(1).decay("<.1 .2 .3 .4>").sustain(0).osc()
+   *
+   */
+  ['f', 'decay', ''],
+  ['f', 'sustain', ''],
+  [
+    'f',
+    'release',
+    'a pattern of numbers to specify the release time (in seconds) of an envelope applied to each sample.',
  ],
  [
    'f',
    'hold',
    'a pattern of numbers to specify the hold time (in seconds) of an envelope applied to each sample. Only takes effect if `attack` and `release` are also specified.',
  ],
+  // TODO: in tidal, it seems to be normalized
+  /**
+   * Sets the center frequency of the band-pass filter.
+   *
+   * @name bandf
+   * @param {number | Pattern} frequency center frequency
+   * @example
+   * s("bd sd").bandf("<1000 2000 4000 8000>").osc()
+   *
+   */
+  ['f', 'bandf', 'A pattern of numbers from 0 to 1. Sets the center frequency of the band-pass filter.'],
+  // TODO: in tidal, it seems to be normalized
+  /**
+   * Sets the q-factor of the band-pass filter
+   *
+   * @name bandq
+   * @param {number | Pattern} q q factor
+   * @example
+   * s("bd sd").bandf(2000).bandq("<.2 .9>").osc()
+   *
+   */
+  ['f', 'bandq', 'a pattern of anumbers from 0 to 1. Sets the q-factor of the band-pass filter.'],
+  /**
+   * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
+   *
+   * @name begin
+   * @param {number | Pattern} amount between 0 and 1, where 1 is the length of the sample
+   * @example
+   * s("rave").begin("<0 .25 .5 .75>").osc()
+   *
+   */
+  [
+    'f',
+    'begin',
+    'a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.',
+  ],
+  /**
+   * The same as {@link begin}, but cuts off the end off each sample.
+   *
+   * @name end
+   * @param {number | Pattern} length 1 = whole sample, .5 = half sample, .25 = quarter sample etc..
+   * @example
+   * s("bd*2,ho*4").end("<.1 .2 .5 1>").osc()
+   *
+   */
+  [
+    'f',
+    'end',
+    'the same as `begin`, but cuts the end off samples, shortening them; e.g. `0.75` to cut off the last quarter of each sample.',
+  ],
+  /**
+   * Loops the sample (from `begin` to `end`) the specified number of times.
+   * Note that the tempo of the loop is not synced with the cycle tempo.
+   *
+   * @name loop
+   * @param {number | Pattern} times How often the sample is looped
+   * @example
+   * s("bd").loop("<1 2 3 4>").osc()
+   *
+   */
+  ['f', 'loop', 'loops the sample (from `begin` to `end`) the specified number of times.'],
+  // TODO: currently duplicated with "native" legato
+  // TODO: superdirt legato will do more: https://youtu.be/dQPmE1WaD1k?t=419
+  /**
+   * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
+   *
+   * @name legato
+   * @param {number | Pattern} duration between 0 and 1, where 1 is the length of the whole hap time
+   * @example
+   * "c4 eb4 g4 bb4".legato("<0.125 .25 .5 .75 1 2 4>")
+   *
+   */
+  ['f', 'legato', 'controls the amount of overlap between two adjacent sounds'],
+  // ['f', 'clhatdecay', ''],
+  /**
+   * bit crusher effect.
+   *
+   * @name crush
+   * @param {number | Pattern} depth between 1 (for drastic reduction in bit-depth) to 16 (for barely no reduction).
+   * @example
+   * s("<bd sd>,hh*3,jvbass*2").fast(2).crush("<16 8 7 6 5 4 3 2>").osc()
+   *
+   */
+  [
+    'f',
+    'crush',
+    'bit crushing, a pattern of numbers from 1 (for drastic reduction in bit-depth) to 16 (for barely no reduction).',
+  ],
+  /**
+   * fake-resampling for lowering the sample rate
+   *
+   * @name coarse
+   * @param {number | Pattern} factor 1 for original 2 for half, 3 for a third and so on.
+   * @example
+   * s("xmas").coarse("<1 4 8 16 32>").osc()
+   *
+   */
+  [
+    'f',
+    'coarse',
+    'fake-resampling, a pattern of numbers for lowering the sample rate, i.e. 1 for original 2 for half, 3 for a third and so on.',
+  ],
+
+  /**
+   * choose the channel the pattern is sent to in superdirt
+   *
+   * @name channel
+   * @param {number | Pattern} channel channel number
+   *
+   */
+  ['i', 'channel', 'choose the channel the pattern is sent to in superdirt'],
+  /**
+   * In the style of classic drum-machines, `cut` will stop a playing sample as soon as another samples with in same cutgroup is to be played. An example would be an open hi-hat followed by a closed one, essentially muting the open.
+   *
+   * @name cut
+   * @param {number | Pattern} group cut group number
+   * @example
+   * s("bd sax").cut(1).osc()
+   *
+   */
+  [
+    'i',
+    'cut',
+    'In the style of classic drum-machines, `cut` will stop a playing sample as soon as another samples with in same cutgroup is to be played. An example would be an open hi-hat followed by a closed one, essentially muting the open.',
+  ],
+  /**
+   * Applies the cutoff frequency of the low-pass filter.
+   *
+   * @name cutoff
+   * @param {number | Pattern} frequency audible between 0 and 20000
+   * @example
+   * s("bd,hh*2,<~ sd>").fast(2).cutoff("<4000 2000 1000 500 200 100>").osc()
+   *
+   */
+  // TODO: add lpf synonym
+  ['f', 'cutoff', 'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the low-pass filter.'],
+  /**
+   * Applies the cutoff frequency of the high-pass filter.
+   *
+   * @name hcutoff
+   * @param {number | Pattern} frequency audible between 0 and 20000
+   * @example
+   * s("bd,hh*2,<~ sd>").fast(2).hcutoff("<4000 2000 1000 500 200 100>").osc()
+   *
+   */
+  // TODO: add hpf synonym
+  [
+    'f',
+    'hcutoff',
+    'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the high-pass filter. Also has alias @hpf@',
+  ],
+  /**
+   * Applies the cutoff frequency of the high-pass filter.
+   *
+   * @name hresonance
+   * @param {number | Pattern} q resonance factor between 0 and 1
+   * @example
+   * s("bd,hh*2,<~ sd>").fast(2).hcutoff(2000).hresonance("<0 .2 .4 .6>").osc()
+   *
+   */
  [
    'f',
    'hresonance',
    'a pattern of numbers from 0 to 1. Applies the resonance of the high-pass filter. Has alias @hpq@',
  ],
+  // TODO: add hpq synonym
+  /**
+   * Applies the cutoff frequency of the low-pass filter.
+   *
+   * @name resonance
+   * @param {number | Pattern} q resonance factor between 0 and 1
+   * @example
+   * s("bd,hh*2,<~ sd>").fast(2).cutoff(2000).resonance("<0 .2 .4 .6>").osc()
+   *
+   */
+  ['f', 'resonance', 'a pattern of numbers from 0 to 1. Specifies the resonance of the low-pass filter.'],
+  // TODO: add lpq synonym?
+  /**
+   * Set detune of oscillators. Works only with some synths, see <a target="_blank" href="https://tidalcycles.org/docs/patternlib/tutorials/synthesizers">tidal doc</a>
+   *
+   * @name djf
+   * @param {number | Pattern} cutoff below 0.5 is low pass filter, above is high pass filter
+   * @example
+   * n("0 3 7 [10,24]").s('superzow').octave(3).djf("<.5 .25 .5 .75>").osc()
+   *
+   */
+  ['f', 'djf', 'DJ filter, below 0.5 is low pass filter, above is high pass filter.'],
+  // ['f', 'cutoffegint', ''],
+  // TODO: does not seem to work
+  /*
+   * Sets the level of the delay signal.
+   *
+   * @name delay
+   * @param {number | Pattern} level between 0 and 1
+   * @example
+   * s("bd").delay("<0 .5 .75 1>").osc()
+   *
+   */
+  ['f', 'delay', 'a pattern of numbers from 0 to 1. Sets the level of the delay signal.'],
+  ['f', 'delayfeedback', 'a pattern of numbers from 0 to 1. Sets the amount of delay feedback.'],
+  ['f', 'delaytime', 'a pattern of numbers from 0 to 1. Sets the length of the delay.'],
+  /* // TODO: test
+   * Specifies whether delaytime is calculated relative to cps.
+   *
+   * @name lock
+   * @param {number | Pattern} enable When set to 1, delaytime is a direct multiple of a cycle.
+   * @example
+   * s("sd").delay().lock(1).osc()
+   *
+   */
+  [
+    'f',
+    'lock',
+    'A pattern of numbers. Specifies whether delaytime is calculated relative to cps. When set to 1, delaytime is a direct multiple of a cycle.',
+  ],
+  /**
+   * Set detune of oscillators. Works only with some synths, see <a target="_blank" href="https://tidalcycles.org/docs/patternlib/tutorials/synthesizers">tidal doc</a>
+   *
+   * @name detune
+   * @param {number | Pattern} amount between 0 and 1
+   * @example
+   * n("0 3 7").s('superzow').octave(3).detune("<0 .25 .5 1 2>").osc()
+   *
+   */
+  ['f', 'detune', ''],
+  /**
+   * Set dryness of reverb. See {@link room} and {@link size} for more information about reverb.
+   *
+   * @name dry
+   * @param {number | Pattern} dry 0 = wet, 1 = dry
+   * @example
+   * n("[0,3,7](3,8)").s("superpiano").room(.7).dry("<0 .5 .75 1>").osc()
+   *
+   */
+  [
+    'f',
+    'dry',
+    'when set to `1` will disable all reverb for this pattern. See `room` and `size` for more information about reverb.',
+  ],
+  // TODO: does not seem to do anything
+  /*
+   * Used when using {@link begin}/{@link end} or {@link chop}/{@link striate} and friends, to change the fade out time of the 'grain' envelope.
+   *
+   * @name fadeTime
+   * @param {number | Pattern} time between 0 and 1
+   * @example
+   * s("ho*4").end(.1).fadeTime("<0 .2 .4 .8>").osc()
+   *
+   */
+  [
+    'f',
+    'fadeTime',
+    "Used when using begin/end or chop/striate and friends, to change the fade out time of the 'grain' envelope.",
+  ],
+  // TODO: see above
+  [
+    'f',
+    'fadeInTime',
+    'As with fadeTime, but controls the fade in time of the grain envelope. Not used if the grain begins at position 0 in the sample.',
+  ],
+  /**
+   * Set frequency of sound.
+   *
+   * @name freq
+   * @param {number | Pattern} frequency in Hz. the audible range is between 20 and 20000 Hz
+   * @example
+   * freq("220 110 440 110").s("superzow").osc()
+   * @example
+   * freq("110".mulOut(".5 1.5 .6 [2 3]")).s("superzow").osc()
+   *
+   */
+  ['f', 'freq', ''],
+  // TODO: https://tidalcycles.org/docs/configuration/MIDIOSC/control-voltage/#gate
+  ['f', 'gate', ''],
+  // ['f', 'hatgrain', ''],
  // ['f', 'lagogo', ''],
  // ['f', 'lclap', ''],
  // ['f', 'lclaves', ''],
  // ['f', 'lclhat', ''],
  // ['f', 'lcrash', ''],
+  // TODO:
+  // https://tidalcycles.org/docs/reference/audio_effects/#leslie-1
+  // https://tidalcycles.org/docs/reference/audio_effects/#leslie
+  /**
+   * Emulation of a Leslie speaker: speakers rotating in a wooden amplified cabinet.
+   *
+   * @name leslie
+   * @param {number | Pattern} wet between 0 and 1
+   * @example
+   * n("0,4,7").s("supersquare").leslie("<0 .4 .6 1>").osc()
+   *
+   */
  ['f', 'leslie', ''],
+  /**
+   * Rate of modulation / rotation for leslie effect
+   *
+   * @name lrate
+   * @param {number | Pattern} rate 6.7 for fast, 0.7 for slow
+   * @example
+   * n("0,4,7").s("supersquare").leslie(1).lrate("<1 2 4 8>").osc()
+   *
+   */
+  // TODO: the rate seems to "lag" (in the example, 1 will be fast)
  ['f', 'lrate', ''],
+  /**
+   * Physical size of the cabinet in meters. Be careful, it might be slightly larger than your computer. Affects the Doppler amount (pitch warble)
+   *
+   * @name lsize
+   * @param {number | Pattern} meters somewhere between 0 and 1
+   * @example
+   * n("0,4,7").s("supersquare").leslie(1).lrate(2).lsize("<.1 .5 1>").osc()
+   *
+   */
  ['f', 'lsize', ''],
  // ['f', 'lfo', ''],
  // ['f', 'lfocutoffint', ''],
@@ -113,47 +446,86 @@ const generic_params = [
  // ['f', 'lhitom', ''],
  // ['f', 'lkick', ''],
  // ['f', 'llotom', ''],
-  [
-    'f',
-    'lock',
-    'A pattern of numbers. Specifies whether delaytime is calculated relative to cps. When set to 1, delaytime is a direct multiple of a cycle.',
-  ],
-  ['f', 'loop', 'loops the sample (from `begin` to `end`) the specified number of times.'],
  // ['f', 'lophat', ''],
  // ['f', 'lsnare', ''],
-  ['f', 'n', 'The note or sample number to choose for a synth or sampleset'],
-  ['f', 'note', 'The note or pitch to play a sound or synth with'],
-  ['f', 'degree', ''],
-  ['f', 'mtranspose', ''],
-  ['f', 'ctranspose', ''],
-  ['f', 'harmonic', ''],
-  ['f', 'stepsPerOctave', ''],
-  ['f', 'octaveR', ''],
+  ['f', 'degree', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'mtranspose', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'ctranspose', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'harmonic', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'stepsPerOctave', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'octaveR', ''], // TODO: what is this? not found in tidal doc
+  // TODO: why is this needed? what's the difference to late / early?
  [
    'f',
    'nudge',
    'Nudges events into the future by the specified number of seconds. Negative numbers work up to a point as well (due to internal latency)',
  ],
+  // TODO: the following doc is just a guess, it's not documented in tidal doc.
+  /**
+   * Sets the default octave of a synth.
+   *
+   * @name octave
+   * @param {number | Pattern} octave octave number
+   * @example
+   * n("0,4,7").s('supersquare').octave("<3 4 5 6>").osc()
+   */
  ['i', 'octave', ''],
-  ['f', 'offset', ''],
+  ['f', 'offset', ''], // TODO: what is this? not found in tidal doc
  // ['f', 'ophatdecay', ''],
+  // TODO: example
+  /**
+   * a pattern of numbers. An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share hardware output bus offset and global effects, e.g. reverb and delay. The maximum number of orbits is specified in the superdirt startup, numbers higher than maximum will wrap around.
+   *
+   * @name orbit
+   * @param {number | Pattern} number
+   *
+   */
  [
    'i',
    'orbit',
    'a pattern of numbers. An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share hardware output bus offset and global effects, e.g. reverb and delay. The maximum number of orbits is specified in the superdirt startup, numbers higher than maximum will wrap around.',
  ],
-  ['f', 'overgain', ''],
-  ['f', 'overshape', ''],
+  ['f', 'overgain', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'overshape', ''], // TODO: what is this? not found in tidal doc
+  /**
+   * Sets position in stereo.
+   *
+   * @name pan
+   * @param {number | Pattern} pan between 0 and 1, from left to right (assuming stereo), once round a circle (assuming multichannel)
+   * @example
+   * s("[bd hh]*2").pan("<.5 1 .5 0>").osc()
+   *
+   */
  [
    'f',
    'pan',
    'a pattern of numbers between 0 and 1, from left to right (assuming stereo), once round a circle (assuming multichannel)',
  ],
+  // TODO: this has no effect (see example)
+  /*
+   * Controls how much multichannel output is fanned out
+   *
+   * @name panspan
+   * @param {number | Pattern} span between -inf and inf, negative is backwards ordering
+   * @example
+   * s("[bd hh]*2").pan("<.5 1 .5 0>").panspan("<0 .5 1>").osc()
+   *
+   */
  [
    'f',
    'panspan',
    'a pattern of numbers between -inf and inf, which controls how much multichannel output is fanned out (negative is backwards ordering)',
  ],
+  // TODO: this has no effect (see example)
+  /*
+   * Controls how much multichannel output is spread
+   *
+   * @name pansplay
+   * @param {number | Pattern} spread between 0 and 1
+   * @example
+   * s("[bd hh]*2").pan("<.5 1 .5 0>").pansplay("<0 .5 1>").osc()
+   *
+   */
  [
    'f',
    'pansplay',
@@ -173,68 +545,163 @@ const generic_params = [
  // ['f', 'pitch2', ''],
  // ['f', 'pitch3', ''],
  // ['f', 'portamento', ''],
+  // TODO: LFO rate see https://tidalcycles.org/docs/patternlib/tutorials/synthesizers/#supersquare
  ['f', 'rate', "used in SuperDirt softsynths as a control rate or 'speed'"],
-  [
-    'f',
-    'release',
-    'a pattern of numbers to specify the release time (in seconds) of an envelope applied to each sample.',
-  ],
-  ['f', 'resonance', 'a pattern of numbers from 0 to 1. Specifies the resonance of the low-pass filter.'],
-  ['f', 'room', 'a pattern of numbers from 0 to 1. Sets the level of reverb.'],
-  // ['f', 'sagogo', ''],
-  // ['f', 'sclap', ''],
-  // ['f', 'sclaves', ''],
-  // ['f', 'scrash', ''],
+  // TODO: slide param for certain synths
+  ['f', 'slide', ''],
+  // TODO: detune? https://tidalcycles.org/docs/patternlib/tutorials/synthesizers/#supersquare
  ['f', 'semitone', ''],
-  [
-    'f',
-    'shape',
-    'wave shaping distortion, a pattern of numbers from 0 for no distortion up to 1 for loads of distortion.',
-  ],
+  // TODO: dedup with synth param, see https://tidalcycles.org/docs/reference/synthesizers/#superpiano
+  ['f', 'velocity', ''],
+  ['f', 'voice', ''], // TODO: synth param
+  /**
+   * Sets the level of reverb.
+   *
+   * @name room
+   * @param {number | Pattern} level between 0 and 1
+   * @example
+   * s("bd sd").room("<0 .2 .4 .6 .8 1>").osc()
+   *
+   */
+  ['f', 'room', 'a pattern of numbers from 0 to 1. Sets the level of reverb.'],
+  /**
+   * Sets the room size of the reverb, see {@link room}.
+   *
+   * @name size
+   * @param {number | Pattern} size between 0 and 1
+   * @example
+   * s("bd sd").room(.8).size("<0 .2 .4 .6 .8 1>").osc()
+   *
+   */
+  // TODO: find out why :
+  // s("bd sd").room(.8).size("<0 .2 .4 .6 .8 [1,0]>").osc()
+  // .. does not work. Is it because room is only one effect?
  [
    'f',
    'size',
    'a pattern of numbers from 0 to 1. Sets the perceptual size (reverb time) of the `room` to be used in reverb.',
  ],
-  ['f', 'slide', ''],
+  // ['f', 'sagogo', ''],
+  // ['f', 'sclap', ''],
+  // ['f', 'sclaves', ''],
+  // ['f', 'scrash', ''],
+  /**
+   * Wave shaping distortion. CAUTION: it might get loud
+   *
+   * @name shape
+   * @param {number | Pattern} distortion between 0 and 1
+   * @example
+   * s("bd sd").shape("<0 .2 .4 .6 .8 1>").osc()
+   *
+   */
+  [
+    'f',
+    'shape',
+    'wave shaping distortion, a pattern of numbers from 0 for no distortion up to 1 for loads of distortion.',
+  ],
+  /**
+   * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
+   *
+   * @name speed
+   * @param {number | Pattern} speed -inf to inf, negative numbers play the sample backwards.
+   * @example
+   * s("bd").speed("<1 2 4 1 -2 -4>").osc()
+   * @example
+   * speed("1 1.5*2 [2 1.1]").s("sax").cut(1).osc()
+   *
+   */
  [
    'f',
    'speed',
    'a pattern of numbers which changes the speed of sample playback, i.e. a cheap way of changing pitch. Negative values will play the sample backwards!',
  ],
-  ['f', 'squiz', ''],
-  ['f', 'stutterdepth', ''],
-  ['f', 'stuttertime', ''],
-  ['f', 'sustain', ''],
-  ['f', 'timescale', ''],
-  ['f', 'timescalewin', ''],
-  // ['f', 'tomdecay', ''],
+  /**
+   * Used in conjunction with {@link speed}, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`.
+   *
+   * @name unit
+   * @param {number | string | Pattern} unit see description above
+   * @example
+   * speed("1 2 .5 3").s("bd").unit("c").osc()
+   *
+   */
  [
    's',
    'unit',
    'used in conjunction with `speed`, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`.',
  ],
-  ['f', 'velocity', ''],
+  /**
+   * Made by Calum Gunn. Reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter. The SuperCollider manual defines Squiz as:
+   *
+   * "A simplistic pitch-raising algorithm. It's not meant to sound natural; its sound is reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter, depending on the input. The algorithm works by cutting the signal into fragments (delimited by upwards-going zero-crossings) and squeezing those fragments in the time domain (i.e. simply playing them back faster than they came in), leaving silences inbetween. All the parameters apart from memlen can be modulated."
+   *
+   * @name squiz
+   * @param {number | Pattern} squiz Try passing multiples of 2 to it - 2, 4, 8 etc.
+   * @example
+   * squiz("2 4/2 6 [8 16]").s("bd").osc()
+   *
+   */
+  ['f', 'squiz', ''],
+  ['f', 'stutterdepth', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'stuttertime', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'timescale', ''], // TODO: what is this? not found in tidal doc
+  ['f', 'timescalewin', ''], // TODO: what is this? not found in tidal doc
+  // ['f', 'tomdecay', ''],
  // ['f', 'vcfegint', ''],
  // ['f', 'vcoegint', ''],
-  ['f', 'voice', ''],
+  /**
+   *
+   * Formant filter to make things sound like vowels.
+   *
+   * @name vowel
+   * @param {string | Pattern} vowel You can use a e i o u. Use a rest (~) to override the effect
+   * @example
+   * vowel("a e i [o u]").slow(2)
+   * .n("<[0,7]!4 [2,7]!4>")
+   * .s('supersquare').osc()
+   *
+   */
  [
    's',
    'vowel',
    'formant filter to make things sound like vowels, a pattern of either `a`, `e`, `i`, `o` or `u`. Use a rest (`~`) for no effect.',
  ],
+  /* // TODO: find out how it works
+   * Made by Calum Gunn. Divides an audio stream into tiny segments, using the signal's zero-crossings as segment boundaries, and discards a fraction of them. Takes a number between 1 and 100, denoted the percentage of segments to drop. The SuperCollider manual describes the Waveloss effect this way:
+   *
+   * Divide an audio stream into tiny segments, using the signal's zero-crossings as segment boundaries, and discard a fraction of them (i.e. replace them with silence of the same length). The technique was described by Trevor Wishart in a lecture. Parameters: the filter drops drop out of out of chunks. mode can be 1 to drop chunks in a simple deterministic fashion (e.g. always dropping the first 30 out of a set of 40 segments), or 2 to drop chunks randomly but in an appropriate proportion.)
+   *
+   * mode: ?
+   * waveloss: ?
+   *
+   * @name waveloss
+   */
  ['f', 'waveloss', ''],
+  // TODO: midi effects?
  ['f', 'dur', ''],
  // ['f', 'modwheel', ''],
  ['f', 'expression', ''],
  ['f', 'sustainpedal', ''],
+  /* // TODO: doesn't seem to do anything
+   *
+   * Tremolo Audio DSP effect
+   *
+   * @name tremolodepth
+   * @param {number | Pattern} depth between 0 and 1
+   * @example
+   * n("0,4,7").tremolodepth("<0 .3 .6 .9>").osc()
+   *
+   */
+  // TODO: tremdp alias
  ['f', 'tremolodepth', "Tremolo Audio DSP effect | params are 'tremolorate' and 'tremolodepth'"],
  ['f', 'tremolorate', "Tremolo Audio DSP effect | params are 'tremolorate' and 'tremolodepth'"],
+  // TODO: doesn't seem to do anything
  ['f', 'phaserdepth', "Phaser Audio DSP effect | params are 'phaserrate' and 'phaserdepth'"],
  ['f', 'phaserrate', "Phaser Audio DSP effect | params are 'phaserrate' and 'phaserdepth'"],
+
  ['f', 'fshift', 'frequency shifter'],
  ['f', 'fshiftnote', 'frequency shifter'],
  ['f', 'fshiftphase', 'frequency shifter'],
+
  ['f', 'triode', 'tube distortion'],
  ['f', 'krush', 'shape/bass enhancer'],
  ['f', 'kcutoff', ''],
@@ -277,18 +744,34 @@ const generic_params = [
  ['f', 'uid', ''],
  ['f', 'val', ''],
  ['f', 'cps', ''],
+  ['f', 'clip', ''],
 ];

+// TODO: slice / splice https://www.youtube.com/watch?v=hKhPdO0RKDQ&list=PL2lW1zNIIwj3bDkh-Y3LUGDuRcoUigoDs&index=13
+
 const _name = (name, ...pats) => sequence(...pats).withValue((x) => ({ [name]: x }));

-const _setter = (func) =>
+const _setter = (func, name) =>
  function (...pats) {
+    if (!pats.length) {
+      return this.fmap((value) => ({ [name]: value }));
+    }
    return this.set(func(...pats));
  };

 generic_params.forEach(([type, name, description]) => {
  controls[name] = (...pats) => _name(name, ...pats);
-  Pattern.prototype[name] = _setter(controls[name]);
+  Pattern.prototype[name] = _setter(controls[name], name);
 });

+// create custom param
+controls.createParam = (name) => {
+  const func = (...pats) => _name(name, ...pats);
+  Pattern.prototype[name] = _setter(func, name);
+  return (...pats) => _name(name, ...pats);
+};
+
+controls.createParams = (...names) =>
+  names.reduce((acc, name) => Object.assign(acc, { [name]: createParam(name) }), {});
+
 export default controls;
@@ -6,6 +6,22 @@ This program is free software: you can redistribute it and/or modify it under th

 import Fraction, { gcd } from './fraction.mjs';

+/**
+ * Intended for a debugging, drawLine renders the pattern as a string, where each character represents the same time span.
+ * Should only be used with single characters as values, otherwise the character slots will be messed up.
+ * Character legend:
+ *
+ * - "|" cycle separator
+ * - "-" hold previous value
+ * - "." silence
+ *
+ * @param {Pattern} pattern the pattern to use
+ * @param {number} chars max number of characters (approximately)
+ * @returns string
+ * @example
+ * const line = drawLine("0 [1 2 3]", 10); // |0--123|0--123
+ * console.log(line);
+ */
 function drawLine(pat, chars = 60) {
  let cycle = 0;
  let pos = Fraction(0);
@@ -17,10 +17,70 @@ const euclid = (pulses, steps, rotation = 0) => {
  return b;
 };

+/**
+ * Changes the structure of the pattern to form an euclidean rhythm.
+ * Euclidian rhythms are rhythms obtained using the greatest common divisor of two numbers.
+ * They were described in 2004 by Godfried Toussaint, a canadian computer scientist.
+ * Euclidian rhythms are really useful for computer/algorithmic music because they can accurately
+ * describe a large number of rhythms used in the most important music world traditions.
+ *
+ * @memberof Pattern
+ * @param {number} pulses the number of onsets / beats
+ * @param {number} steps the number of steps to fill
+ * @param {number} rotation (optional) offset in steps
+ * @returns Pattern
+ * @example // The Cuban tresillo pattern.
+ * "c3".euclid(3,8)
+ * @example // A thirteenth century Persian rhythm called Khafif-e-ramal.
+ * "c3".euclid(2,5)
+ * @example // The archetypal pattern of the Cumbia from Colombia, as well as a Calypso rhythm from Trinidad.
+ * "c3".euclid(3,4)
+ * @example // Another thirteenth century Persian rhythm by the name of Khafif-e-ramal, as well as a Rumanian folk-dance rhythm.
+ * "c3".euclid(3,5,2)
+ * @example // A Ruchenitza rhythm used in a Bulgarian folk-dance.
+ * "c3".euclid(3,7)
+ * @example // The Cuban tresillo pattern.
+ * "c3".euclid(3,8)
+ * @example // Another Ruchenitza Bulgarian folk-dance rhythm.
+ * "c3".euclid(4,7)
+ * @example // The Aksak rhythm of Turkey.
+ * "c3".euclid(4,9)
+ * @example // The metric pattern used by Frank Zappa in his piece titled Outside Now.
+ * "c3".euclid(4,11)
+ * @example // Yields the York-Samai pattern, a popular Arab rhythm.
+ * "c3".euclid(5,6)
+ * @example // The Nawakhat pattern, another popular Arab rhythm.
+ * "c3".euclid(5,7)
+ * @example // The Cuban cinquillo pattern.
+ * "c3".euclid(5,8)
+ * @example // A popular Arab rhythm called Agsag-Samai.
+ * "c3".euclid(5,9)
+ * @example // The metric pattern used by Moussorgsky in Pictures at an Exhibition.
+ * "c3".euclid(5,11)
+ * @example // The Venda clapping pattern of a South African children’s song.
+ * "c3".euclid(5,12)
+ * @example // The Bossa-Nova rhythm necklace of Brazil.
+ * "c3".euclid(5,16)
+ * @example // A typical rhythm played on the Bendir (frame drum).
+ * "c3".euclid(7,8)
+ * @example // A common West African bell pattern.
+ * "c3".euclid(7,12)
+ * @example // A Samba rhythm necklace from Brazil.
+ * "c3".euclid(7,16,14)
+ * @example // A rhythm necklace used in the Central African Republic.
+ * "c3".euclid(9,16)
+ * @example // A rhythm necklace of the Aka Pygmies of Central Africa.
+ * "c3".euclid(11,24,14)
+ * @example // Another rhythm necklace of the Aka Pygmies of the upper Sangha.
+ * "c3".euclid(13,24,5)
+ */
 Pattern.prototype.euclid = function (pulses, steps, rotation = 0) {
  return this.struct(euclid(pulses, steps, rotation));
 };

+/**
+ * Similar to {@link Pattern#euclid}, but each pulse is held until the next pulse, so there will be no gaps.
+ */
 Pattern.prototype.euclidLegato = function (pulses, steps, rotation = 0) {
  const bin_pat = euclid(pulses, steps, rotation);
  const firstOne = bin_pat.indexOf(1);
@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th

 // this is a shortcut to eval code from a gist
 // why? to be able to shorten strudel code + e.g. be able to change instruments after links have been generated
-export default (route) =>
-  fetch(`https://gist.githubusercontent.com/${route}?cachebust=${Date.now()}`)
+export default (route, cache = true) =>
+  fetch(`https://gist.githubusercontent.com/${route}?cachebust=${cache ? '' : Date.now()}`)
    .then((res) => res.text())
    .then((code) => eval(code));
@@ -86,11 +86,9 @@ export class Hap {
  }

  showWhole() {
-    return `${this.whole == undefined ? '~' : this.whole.show()}: ${this.value}`;
-  }
-
-  showWhole() {
-    return `${this.whole == undefined ? '~' : this.whole.show()}: ${this.value}`;
+    return `${this.whole == undefined ? '~' : this.whole.show()}: ${
+      typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    }`;
  }

  combineContext(b) {
@@ -15,5 +15,19 @@ export * from './state.mjs';
 export * from './timespan.mjs';
 export * from './util.mjs';
 export * from './speak.mjs';
-export * as gist from './gist.js';
-// export * from './value.mjs';
+export { default as gist } from './gist.js';
+// below won't work with runtime.mjs (json import fails)
+/* import * as p from './package.json';
+export const version = p.version; */
+console.log(
+  '%c // 🌀 @strudel.cycles/core loaded 🌀', // keep "//" for runnable snapshot source..
+  'background-color: black;color:white;padding:4px;border-radius:15px',
+);
+if (globalThis._strudelLoaded) {
+  console.warn(
+    `@strudel.cycles/core was loaded more than once...
+This might happen when you have multiple versions of strudel installed. 
+Please check with "npm ls @strudel.cycles/core".`,
+  );
+}
+globalThis._strudelLoaded = true;
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/core",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/core",
-			"version": "0.0.3",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.0",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"bjork": "^0.0.1",
 				"fraction.js": "^4.2.0"
@@ -1,11 +1,11 @@
 {
  "name": "@strudel.cycles/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Port of Tidal Cycles to JavaScript",
  "main": "index.mjs",
  "type": "module",
  "scripts": {
-    "test": "mocha --colors"
+    "test": "vitest run"
  },
  "repository": {
    "type": "git",
@@ -28,8 +28,5 @@
    "bjork": "^0.0.1",
    "fraction.js": "^4.2.0"
  },
-  "devDependencies": {
-    "mocha": "^9.2.2"
-  },
  "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2"
 }
@@ -15,9 +15,11 @@ import drawLine from './drawLine.mjs';

 /** @class Class representing a pattern. */
 export class Pattern {
+  _Pattern = true; // this property is used to detect if a pattern that fails instanceof Pattern is an instance of another Pattern
  /**
-   * Create a pattern.
-   * @param {function} query - The function that maps a State to Haps .
+   * Create a pattern. As an end user, you will most likely not create a Pattern directly.
+   *
+   * @param {function} query - The function that maps a {@link State} to an array of {@link Hap}.
   */
  constructor(query) {
    this.query = query;
@@ -62,7 +64,7 @@ export class Pattern {
  }

  /**
-   * As with {@link Pattern#withQuerySpan|withQuerySpan}, but the function is applied to both the
+   * As with {@link Pattern#withQuerySpan}, but the function is applied to both the
   * begin and end time of the query timespan.
   * @param {Function} func the function to apply
   * @returns Pattern
@@ -72,7 +74,7 @@ export class Pattern {
  }

  /**
-   * Similar to {@link Pattern#withQuerySpan|withQuerySpan}, but the function is applied to the timespans
+   * Similar to {@link Pattern#withQuerySpan}, but the function is applied to the timespans
   * of all haps returned by pattern queries (both `part` timespans, and where
   * present, `whole` timespans).
   * @param {Function} func
@@ -83,7 +85,7 @@ export class Pattern {
  }

  /**
-   * As with {@link Pattern#withHapSpan|withHapSpan}, but the function is applied to both the
+   * As with {@link Pattern#withHapSpan}, but the function is applied to both the
   * begin and end time of the hap timespans.
   * @param {Function} func the function to apply
   * @returns Pattern
@@ -182,7 +184,7 @@ export class Pattern {

  /**
   * Returns a new pattern, with the function applied to the value of
-   * each hap. It has the alias {@link Pattern#fmap|fmap}.
+   * each hap. It has the alias {@link Pattern#fmap}.
   * @param {Function} func
   * @returns Pattern
   */
@@ -191,7 +193,7 @@ export class Pattern {
  }

  /**
-   * see {@link Pattern#withValue|withValue}
+   * see {@link Pattern#withValue}
   */
  fmap(func) {
    return this.withValue(func);
@@ -298,7 +300,7 @@ export class Pattern {
  }

  /**
-   * As with {@link Pattern#appBoth|appBoth}, but the `whole` timespan is not the intersection,
+   * As with {@link Pattern#appBoth}, but the `whole` timespan is not the intersection,
   * but the timespan from the function of patterns that this method is called
   * on. In practice, this means that the pattern structure, including onsets,
   * are preserved from the pattern of functions (often referred to as the left
@@ -330,7 +332,7 @@ export class Pattern {
  }

  /**
-   * As with {@link Pattern#appLeft|appLeft}, but `whole` timespans are instead taken from the
+   * As with {@link Pattern#appLeft}, but `whole` timespans are instead taken from the
   * pattern of values, i.e. structure is preserved from the right hand/outer
   * pattern.
   * @param {Pattern} pat_val
@@ -463,35 +465,83 @@ export class Pattern {
    });
  }

+  /**
+   * Assumes a numerical pattern. Returns a new pattern with all values rounded
+   * to the nearest integer.
+   * @returns Pattern
+   */
  round() {
    return this._asNumber().fmap((v) => Math.round(v));
  }

+  /**
+   * Assumes a numerical pattern. Returns a new pattern with all values set to
+   * their mathematical floor. E.g. `3.7` replaced with to `3`, and `-4.2`
+   * replaced with `-5`.
+   * @returns Pattern
+   */
  floor() {
    return this._asNumber().fmap((v) => Math.floor(v));
  }

+  /**
+   * Assumes a numerical pattern. Returns a new pattern with all values set to
+   * their mathematical ceiling. E.g. `3.2` replaced with `4`, and `-4.2`
+   * replaced with `-4`.
+   * @returns Pattern
+   */
  ceil() {
    return this._asNumber().fmap((v) => Math.ceil(v));
  }

+  /**
+   * Assumes a numerical pattern, containing unipolar values in the range 0 ..
+   * 1. Returns a new pattern with values scaled to the bipolar range -1 .. 1
+   * @returns Pattern
+   */
  _toBipolar() {
    return this.fmap((x) => x * 2 - 1);
  }
+
+  /**
+   * Assumes a numerical pattern, containing bipolar values in the range -1 ..
+   * 1. Returns a new pattern with values scaled to the unipolar range 0 .. 1
+   * @returns Pattern
+   */
  _fromBipolar() {
    return this.fmap((x) => (x + 1) / 2);
  }

-  // Assumes source pattern of numbers in range 0..1
+  /**
+   * Assumes a numerical pattern, containing unipolar values in the range 0 ..
+   * 1. Returns a new pattern with values scaled to the given min/max range.
+   * @param {Number} min
+   * @param {Number} max
+   * @returns Pattern
+   */
  range(min, max) {
    return this.mul(max - min).add(min);
  }

+  /**
+   * Assumes a numerical pattern, containing unipolar values in the range 0 ..
+   * 1. Returns a new pattern with values scaled to the given min/max range,
+   * following an exponential curve.
+   * @param {Number} min
+   * @param {Number} max
+   * @returns Pattern
+   */
  rangex(min, max) {
    return this.range(Math.log(min), Math.log(max)).fmap(Math.exp);
  }

-  // Assumes source pattern of numbers in range -1..1
+  /**
+   * Assumes a numerical pattern, containing bipolar values in the range -1 ..
+   * 1. Returns a new pattern with values scaled to the given min/max range.
+   * @param {Number} min
+   * @param {Number} max
+   * @returns Pattern
+   */
  range2(min, max) {
    return this._fromBipolar().range(min, max);
  }
@@ -683,11 +733,31 @@ export class Pattern {
    return this._compress(span.begin, span.end);
  }

+  /**
+   * Speed up a pattern by the given factor.
+   *
+   * @name fast
+   * @memberof Pattern
+   * @param {number | Pattern} factor speed up factor
+   * @returns Pattern
+   * @example
+   * seq(e5, b4, d5, c5).fast(2)
+   */
  _fast(factor) {
    const fastQuery = this.withQueryTime((t) => t.mul(factor));
    return fastQuery.withHapTime((t) => t.div(factor));
  }

+  /**
+   * Slow down a pattern over the given number of cycles.
+   *
+   * @name slow
+   * @memberof Pattern
+   * @param {number | Pattern} factor slow down factor
+   * @returns Pattern
+   * @example
+   * seq(e5, b4, d5, c5).slow(2)
+   */
  _slow(factor) {
    return this._fast(Fraction(1).div(factor));
  }
@@ -944,13 +1014,6 @@ export class Pattern {
    return this._chunk(n, func, true);
  }

-  edit(...funcs) {
-    return stack(...funcs.map((func) => func(this)));
-  }
-  pipe(func) {
-    return func(this);
-  }
-
  _bypass(on) {
    on = Boolean(parseInt(on));
    return on ? silence : this;
@@ -974,8 +1037,30 @@ export class Pattern {
    return this._withContext((context) => ({ ...context, velocity: (context.velocity || 1) * velocity }));
  }

-  _loopAt(factor,cps=1) {
-    return this.speed((1/factor)*cps).unit("c").slow(factor)
+  // move this to controls? (speed and unit are controls)
+  _loopAt(factor, cps = 1) {
+    return this.speed((1 / factor) * cps)
+      .unit('c')
+      .slow(factor);
+  }
+  onTrigger(onTrigger) {
+    return this._withHap((hap) => hap.setContext({ ...hap.context, onTrigger }));
+  }
+  log(func = id) {
+    return this._withHap((hap) =>
+      hap.setContext({
+        ...hap.context,
+        onTrigger: (...args) => {
+          if (hap.context.onTrigger) {
+            hap.context.onTrigger(...args);
+          }
+          console.log(func(...args));
+        },
+      }),
+    );
+  }
+  logValues(func = id) {
+    return this.log((_, hap) => func(hap.value));
  }
 }

@@ -1137,7 +1222,15 @@ export function pure(value) {

 export function isPattern(thing) {
  // thing?.constructor?.name !== 'Pattern' // <- this will fail when code is mangled
-  return thing instanceof Pattern;
+  const is = thing instanceof Pattern || thing._Pattern;
+  if (!thing instanceof Pattern) {
+    console.warn(
+      `Found Pattern that fails "instanceof Pattern" check.
+      This may happen if you are using multiple versions of @strudel.cycles/core. 
+      Please check by running "npm ls @strudel.cycles/core".`,
+    );
+  }
+  return is;
 }

 export function reify(thing) {
@@ -1201,8 +1294,8 @@ export function slowcatPrime(...pats) {
  pats = pats.map(reify);
  const query = function (state) {
    const pat_n = Math.floor(state.span.begin) % pats.length;
-    const pat = pats[pat_n];
-    return pat.query(state);
+    const pat = pats[pat_n]; // can be undefined for same cases e.g. /#cHVyZSg0MikKICAuZXZlcnkoMyxhZGQoNykpCiAgLmxhdGUoLjUp
+    return pat?.query(state) || [];
  };
  return new Pattern(query)._splitQueries();
 }
@@ -1215,8 +1308,8 @@ export function slowcatPrime(...pats) {
 * @return {Pattern}
 * @example
 * fastcat(e5, b4, [d5, c5])
- * sequence(e5, b4, [d5, c5])
- * seq(e5, b4, [d5, c5])
+ * // sequence(e5, b4, [d5, c5])
+ * // seq(e5, b4, [d5, c5])
 */
 export function fastcat(...pats) {
  return slowcat(...pats)._fast(pats.length);
@@ -1314,6 +1407,7 @@ export function pr(args) {
 }

 export const add = curry((a, pat) => pat.add(a));
+export const chop = curry((a, pat) => pat.chop(a));
 export const chunk = curry((a, pat) => pat.chunk(a));
 export const chunkBack = curry((a, pat) => pat.chunkBack(a));
 export const div = curry((a, pat) => pat.div(a));
@@ -22,17 +22,61 @@ export const signal = (func) => {
 export const isaw = signal((t) => 1 - (t % 1));
 export const isaw2 = isaw._toBipolar();

+/**
+ *  A sawtooth signal between 0 and 1.
+ *
+ * @return {Pattern}
+ * @example
+ * "c3 [eb3,g3] g2 [g3,bb3]".legato(saw.slow(4))
+ * @example
+ * saw.range(0,8).segment(8).scale('C major').slow(4)
+ *
+ */
 export const saw = signal((t) => t % 1);
 export const saw2 = saw._toBipolar();

 export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
+
+/**
+ *  A sine signal between 0 and 1.
+ *
+ * @return {Pattern}
+ * @example
+ * sine.segment(16).range(0,15).slow(2).scale('C minor')
+ *
+ */
 export const sine = sine2._fromBipolar();
+
+/**
+ *  A cosine signal between 0 and 1.
+ *
+ * @return {Pattern}
+ * @example
+ * stack(sine,cosine).segment(16).range(0,15).slow(2).scale('C minor')
+ *
+ */
 export const cosine = sine._early(Fraction(1).div(4));
 export const cosine2 = sine2._early(Fraction(1).div(4));

+/**
+ *  A square signal between 0 and 1.
+ *
+ * @return {Pattern}
+ * @example
+ * square.segment(2).range(0,7).scale('C minor')
+ *
+ */
 export const square = signal((t) => Math.floor((t * 2) % 2));
 export const square2 = square._toBipolar();

+/**
+ *  A triangle signal between 0 and 1.
+ *
+ * @return {Pattern}
+ * @example
+ * triangle.segment(2).range(0,7).scale('C minor')
+ *
+ */
 export const tri = fastcat(isaw, saw);
 export const tri2 = fastcat(isaw2, saw2);

@@ -66,7 +110,14 @@ const timeToRandsPrime = (seed, n) => {

 const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);

+/**
+ * A continuous pattern of random numbers, between 0 and 1
+ */
 export const rand = signal(timeToRand);
+/**
+ * A continuous pattern of random numbers, between -1 and 1
+ */
+export const rand2 = rand._toBipolar();

 export const _brandBy = (p) => rand.fmap((x) => x < p);
 export const brandBy = (pPat) => reify(pPat).fmap(_brandBy).innerJoin();
@@ -75,19 +126,67 @@ export const brand = _brandBy(0.5);
 export const _irand = (i) => rand.fmap((x) => Math.trunc(x * i));
 export const irand = (ipat) => reify(ipat).fmap(_irand).innerJoin();

-export const chooseWith = (pat, xs) => {
+export const __chooseWith = (pat, xs) => {
  xs = xs.map(reify);
  if (xs.length == 0) {
    return silence;
  }
-  return pat
-    .range(0, xs.length)
-    .fmap((i) => xs[Math.floor(i)])
-    .outerJoin();
+  return pat.range(0, xs.length).fmap((i) => xs[Math.floor(i)]);
+};
+/**
+ * Choose from the list of values (or patterns of values) using the given
+ * pattern of numbers, which should be in the range of 0..1
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const chooseWith = (pat, xs) => {
+  return __chooseWith(pat, xs).outerJoin();
 };

+/**
+ * As with {chooseWith}, but the structure comes from the chosen values, rather
+ * than the pattern you're using to choose with.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const chooseInWith = (pat, xs) => {
+  return __chooseWith(pat, xs).innerJoin();
+};
+
+/**
+ * Chooses randomly from the given list of values.
+ * @param  {...any} xs
+ * @returns {Pattern} - a continuous pattern.
+ */
 export const choose = (...xs) => chooseWith(rand, xs);

+/**
+ * Chooses from the given list of values (or patterns of values), according
+ * to the pattern that the method is called on. The pattern should be in
+ * the range 0 .. 1.
+ * @param  {...any} xs
+ * @returns {Pattern}
+ */
+Pattern.prototype.choose = function (...xs) {
+  return chooseWith(this, xs);
+};
+
+/**
+ * As with choose, but the pattern that this method is called on should be
+ * in the range -1 .. 1
+ * @param  {...any} xs
+ * @returns {Pattern}
+ */
+Pattern.prototype.choose2 = function (...xs) {
+  return chooseWith(this._fromBipolar(), xs);
+};
+
+export const chooseCycles = (...xs) => chooseInWith(rand.segment(1), xs);
+
+export const randcat = chooseCycles;
+
 const _wchooseWith = function (pat, ...pairs) {
  const values = pairs.map((pair) => reify(pair[0]));
  const weights = [];
@@ -5,52 +5,42 @@ This program is free software: you can redistribute it and/or modify it under th
 */

 import { fastcat, stack, slowcat, silence, pure } from '../pattern.mjs';
-import { strict as assert } from 'assert';
+import { describe, it, expect } from 'vitest';
 import drawLine from '../drawLine.mjs';

 describe('drawLine', () => {
  it('supports equal lengths', () => {
-    assert.equal(drawLine(fastcat(0), 4), '|0|0');
-    assert.equal(drawLine(fastcat(0, 1), 4), '|01|01');
-    assert.equal(drawLine(fastcat(0, 1, 2), 6), '|012|012');
+    expect(drawLine(fastcat(0), 4)).toEqual('|0|0');
+    expect(drawLine(fastcat(0, 1), 4)).toEqual('|01|01');
+    expect(drawLine(fastcat(0, 1, 2), 6)).toEqual('|012|012');
  });
  it('supports unequal lengths', () => {
-    assert.equal(drawLine(fastcat(0, [1, 2]), 10), '|0-12|0-12');
-    assert.equal(drawLine(fastcat(0, [1, 2, 3]), 10), '|0--123|0--123');
-    assert.equal(drawLine(fastcat(0, 1, [2, 3]), 10), '|0-1-23|0-1-23');
+    expect(drawLine(fastcat(0, [1, 2]), 10)).toEqual('|0-12|0-12');
+    expect(drawLine(fastcat(0, [1, 2, 3]), 10)).toEqual('|0--123|0--123');
+    expect(drawLine(fastcat(0, 1, [2, 3]), 10)).toEqual('|0-1-23|0-1-23');
  });
  it('supports unequal silence', () => {
-    assert.equal(drawLine(fastcat(0, silence, [1, 2]), 10), '|0-..12|0-..12');
+    expect(drawLine(fastcat(0, silence, [1, 2]), 10)).toEqual('|0-..12|0-..12');
  });
  it('supports polyrhythms', () => {
-    '0*2 1*3';
-    assert.equal(drawLine(fastcat(pure(0).fast(2), pure(1).fast(3)), 10), '|0--0--1-1-1-');
+    // assert.equal(drawLine(fastcat(pure(0).fast(2), pure(1).fast(3)), 10), '|0--0--1-1-1-');
+    expect(drawLine(fastcat(pure(0).fast(2), pure(1).fast(3)), 10)).toEqual('|0--0--1-1-1-');
  });
  it('supports multiple lines', () => {
-    assert.equal(
-      drawLine(fastcat(0, stack(1, 2)), 10),
-      `|01|01|01|01
-|.2|.2|.2|.2`,
-    );
-    assert.equal(
-      drawLine(fastcat(0, 1, stack(2, 3)), 10),
-      `|012|012|012
-|..3|..3|..3`,
-    );
-    assert.equal(
-      drawLine(fastcat(0, stack(1, 2, 3)), 10),
-      `|01|01|01|01
+    expect(drawLine(fastcat(0, stack(1, 2)), 10)).toEqual(`|01|01|01|01
+|.2|.2|.2|.2`);
+
+    expect(drawLine(fastcat(0, 1, stack(2, 3)), 10)).toEqual(`|012|012|012
+|..3|..3|..3`);
+
+    expect(drawLine(fastcat(0, stack(1, 2, 3)), 10)).toEqual(`|01|01|01|01
 |.2|.2|.2|.2
-|.3|.3|.3|.3`,
-    );
-    assert.equal(
-      drawLine(fastcat(0, 1, stack(2, 3, 4)), 10),
-      `|012|012|012
+|.3|.3|.3|.3`);
+    expect(drawLine(fastcat(0, 1, stack(2, 3, 4)), 10)).toEqual(`|012|012|012
 |..3|..3|..3
-|..4|..4|..4`,
-    );
+|..4|..4|..4`);
  });
  it('supports unequal cycle lengths', () => {
-    assert.equal(drawLine(slowcat(0, [1, 2]), 10), `|0|12|0|12`);
+    expect(drawLine(slowcat(0, [1, 2]), 10)).toEqual(`|0|12|0|12`);
  });
 });
@@ -5,11 +5,11 @@ This program is free software: you can redistribute it and/or modify it under th
 */

 import Fraction, { gcd } from '../fraction.mjs';
-import { strict as assert } from 'assert';
+import { describe, it, expect } from 'vitest';

 describe('gcd', () => {
  it('should work', () => {
    const F = Fraction._original;
-    assert.equal(gcd(F(1 / 6), F(1 / 4)).toFraction(), '1/12');
+    expect(gcd(F(1 / 6), F(1 / 4)).toFraction()).toEqual('1/12');
  });
 });
@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th

 import Fraction from 'fraction.js';

-import { deepStrictEqual, strict as assert } from 'assert';
+import { describe, it, expect } from 'vitest';

 import {
  TimeSpan,
@@ -41,15 +41,11 @@ import {
  tri2,
  id,
  ply,
-  rev
+  rev,
 } from '../index.mjs';

 import { steady } from '../signal.mjs';

-//import { Time } from 'tone';
-import pkg from 'tone';
-const { Time } = pkg;
-
 const st = (begin, end) => new State(ts(begin, end));
 const ts = (begin, end) => new TimeSpan(Fraction(begin), Fraction(end));
 const hap = (whole, part, value, context = {}) => new Hap(whole, part, value, context);
@@ -58,35 +54,35 @@ const third = Fraction(1, 3);
 const twothirds = Fraction(2, 3);

 const sameFirst = (a, b) => {
-  return assert.deepStrictEqual(a._sortHapsByPart().firstCycle(), b._sortHapsByPart().firstCycle());
+  return expect(a._sortHapsByPart().firstCycle()).toStrictEqual(b._sortHapsByPart().firstCycle());
 };

-describe('TimeSpan', function () {
-  describe('equals()', function () {
-    it('Should be equal to the same value', function () {
-      assert.equal(new TimeSpan(0, 4).equals(new TimeSpan(0, 4)), true);
+describe('TimeSpan', () => {
+  describe('equals()', () => {
+    it('Should be equal to the same value', () => {
+      expect(new TimeSpan(0, 4).equals(new TimeSpan(0, 4))).toBe(true);
    });
  });
-  describe('splitCycles', function () {
-    it('Should split two cycles into two', function () {
-      assert.equal(new TimeSpan(Fraction(0), Fraction(2)).spanCycles.length, 2);
+  describe('splitCycles', () => {
+    it('Should split two cycles into two', () => {
+      expect(new TimeSpan(Fraction(0), Fraction(2)).spanCycles.length).toBe(2);
    });
  });
-  describe('intersection_e', function () {
+  describe('intersection_e', () => {
    var a = new TimeSpan(Fraction(0), Fraction(2));
    var b = new TimeSpan(Fraction(1), Fraction(3));
    var c = new TimeSpan(Fraction(1), Fraction(2));
    var d = new TimeSpan(Fraction(1), Fraction(2));
-    it('Should create an intersection', function () {
-      assert.equal(a.intersection_e(b).equals(c), true);
+    it('Should create an intersection', () => {
+      expect(a.intersection_e(b).equals(c)).toBe(true);
    });
  });
 });

-describe('Hap', function () {
-  describe('hasOnset()', function () {
-    it('True if part includes onset from whole', function () {
-      assert.equal(new Hap(new TimeSpan(0, 1), new TimeSpan(0, 1), 'thing').hasOnset(), true);
+describe('Hap', () => {
+  describe('hasOnset()', () => {
+    it('True if part includes onset from whole', () => {
+      expect(new Hap(new TimeSpan(0, 1), new TimeSpan(0, 1), 'thing').hasOnset()).toBe(true);
    });
  });
  var a = new Hap(new TimeSpan(Fraction(0), Fraction(0.5)), new TimeSpan(Fraction(0), Fraction(0.5)), 'a');
@@ -94,19 +90,19 @@ describe('Hap', function () {
  var c = new Hap(new TimeSpan(Fraction(0), Fraction(0.25)), new TimeSpan(Fraction(0), Fraction(0.5)), 'c');
  var d = new Hap(undefined, new TimeSpan(Fraction(0), Fraction(0.5)), 'd');
  var e = new Hap(undefined, new TimeSpan(Fraction(0), Fraction(0.5)), 'e');
-  describe('spanEquals', function () {
-    it('True if two haps have the same whole and part', function () {
-      assert.equal(a.spanEquals(b), true);
+  describe('spanEquals', () => {
+    it('True if two haps have the same whole and part', () => {
+      expect(a.spanEquals(b)).toBe(true);
    });
-    it("False if two haps don't the same whole and part", function () {
-      assert.equal(a.spanEquals(c), false);
+    it("False if two haps don't the same whole and part", () => {
+      expect(a.spanEquals(c)).toBe(false);
    });
-    it('True if two haps have the same part and undefined wholes', function () {
-      assert.equal(d.spanEquals(e), true);
+    it('True if two haps have the same part and undefined wholes', () => {
+      expect(d.spanEquals(e)).toBe(true);
    });
  });
  describe('resolveState()', () => {
-    it('Can increment some state', function () {
+    it('Can increment some state', () => {
      const stateful_value = (state) => {
        const newValue = state['incrementme'];
        // TODO Does the state *need* duplicating here?
@@ -118,8 +114,8 @@ describe('Hap', function () {
      const ev1 = new Hap(ts(0, 1), ts(0, 1), stateful_value, {}, true);
      const [state2, ev2] = ev1.resolveState(state);
      const [state3, ev3] = ev1.resolveState(state2);
-      assert.deepStrictEqual(ev3, new Hap(ts(0, 1), ts(0, 1), 11, {}, false));
-      assert.deepStrictEqual(state3, { incrementme: 12 });
+      expect(ev3).toStrictEqual(new Hap(ts(0, 1), ts(0, 1), 11, {}, false));
+      expect(state3).toStrictEqual({ incrementme: 12 });
    });
  });
  describe('wholeOrPart()', () => {
@@ -128,42 +124,40 @@ describe('Hap', function () {
    const continuousHap = new Hap(undefined, ts1, 'hello');
    const discreteHap = new Hap(ts1, ts0_5, 'hello');
    it('Can pick a whole', () => {
-      assert.deepStrictEqual(discreteHap.wholeOrPart(), ts1);
+      expect(discreteHap.wholeOrPart()).toStrictEqual(ts1);
    });
    it('Can pick a part', () => {
-      assert.deepStrictEqual(continuousHap.wholeOrPart(), ts1);
+      expect(continuousHap.wholeOrPart()).toStrictEqual(ts1);
    });
  });
 });
-
-describe('Pattern', function () {
-  describe('pure', function () {
-    it('Can make a pattern', function () {
-      assert.equal(pure('hello').query(st(0.5, 2.5)).length, 3);
+describe('Pattern', () => {
+  describe('pure', () => {
+    it('Can make a pattern', () => {
+      expect(pure('hello').query(st(0.5, 2.5)).length).toBe(3);
    });
  });
-  describe('fmap()', function () {
-    it('Can add things', function () {
-      assert.equal(
+  describe('fmap()', () => {
+    it('Can add things', () => {
+      expect(
        pure(3)
          .fmap((x) => x + 4)
          .firstCycle()[0].value,
-        7,
-      );
+      ).toBe(7);
    });
  });
-  describe('add()', function () {
-    it('can structure In()', function () {
-      assert.equal(pure(3).add(pure(4)).query(st(0, 1))[0].value, 7);
-      assert.equal(pure(3).addIn(pure(4)).query(st(0, 1))[0].value, 7);
+  describe('add()', () => {
+    it('can structure In()', () => {
+      expect(pure(3).add(pure(4)).query(st(0, 1))[0].value).toBe(7);
+      expect(pure(3).addIn(pure(4)).query(st(0, 1))[0].value).toBe(7);
    });
    it('can structure Out()', () => {
      sameFirst(sequence(1, 2).addOut(4), sequence(5, 6).struct(true));
    });
    it('can Mix() structure', () => {
-      assert.deepStrictEqual(sequence(1, 2).addMix(silence, 5, silence).firstCycle(), [
-        hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 6),
-        hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 7),
+      expect(sequence(1, 2).addMix(silence, 5, silence).firstCycle()).toStrictEqual([
+        new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 6),
+        new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 7),
      ]);
    });
    it('can Trig() structure', () => {
@@ -197,18 +191,18 @@ describe('Pattern', function () {
      );
    });
  });
-  describe('keep()', function () {
-    it('can structure In()', function () {
-      assert.equal(pure(3).keep(pure(4)).query(st(0, 1))[0].value, 3);
-      assert.equal(pure(3).keepIn(pure(4)).query(st(0, 1))[0].value, 3);
+  describe('keep()', () => {
+    it('can structure In()', () => {
+      expect(pure(3).keep(pure(4)).query(st(0, 1))[0].value).toBe(3);
+      expect(pure(3).keepIn(pure(4)).query(st(0, 1))[0].value).toBe(3);
    });
    it('can structure Out()', () => {
      sameFirst(sequence(1, 2).keepOut(4), sequence(1, 2).struct(true));
    });
    it('can Mix() structure', () => {
-      assert.deepStrictEqual(sequence(1, 2).keepMix(silence, 5, silence).firstCycle(), [
-        hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
-        hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
+      expect(sequence(1, 2).keepMix(silence, 5, silence).firstCycle()).toStrictEqual([
+        new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
+        new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
      ]);
    });
    it('can Trig() structure', () => {
@@ -239,8 +233,8 @@ describe('Pattern', function () {
      sameFirst(sequence(1, [2, 3]).keepSqueezeOut(10, 20, 30), sequence([1, [2, 3]], [1, [2, 3]], [1, [2, 3]]));
    });
  });
-  describe('keepif()', function () {
-    it('can structure In()', function () {
+  describe('keepif()', () => {
+    it('can structure In()', () => {
      sameFirst(sequence(3, 4).keepif(true, false), sequence(3, silence));
      sameFirst(sequence(3, 4).keepifIn(true, false), sequence(3, silence));
    });
@@ -248,9 +242,9 @@ describe('Pattern', function () {
      sameFirst(pure(1).keepifOut(true, false), sequence(1, silence));
    });
    it('can Mix() structure', () => {
-      assert.deepStrictEqual(sequence(1, 2).keepifMix(false, true, false).firstCycle(), [
-        hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
-        hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
+      expect(sequence(1, 2).keepifMix(false, true, false).firstCycle()).toStrictEqual([
+        new Hap(ts(1 / 3, 1 / 2), ts(1 / 3, 1 / 2), 1),
+        new Hap(ts(1 / 2, 2 / 3), ts(1 / 2, 2 / 3), 2),
      ]);
    });
    it('can Trig() structure', () => {
@@ -281,35 +275,39 @@ describe('Pattern', function () {
      sameFirst(sequence(1, [2, 3]).keepifSqueezeOut(true, true, false), sequence([1, [2, 3]], [1, [2, 3]], silence));
    });
  });
-  describe('sub()', function () {
-    it('Can subtract things', function () {
-      assert.equal(pure(3).sub(pure(4)).query(st(0, 1))[0].value, -1);
+  describe('sub()', () => {
+    it('Can subtract things', () => {
+      expect(pure(3).sub(pure(4)).query(st(0, 1))[0].value).toBe(-1);
    });
  });
-  describe('mul()', function () {
-    it('Can multiply things', function () {
-      assert.equal(pure(3).mul(pure(2)).firstCycle()[0].value, 6);
+  describe('mul()', () => {
+    it('Can multiply things', () => {
+      expect(pure(3).mul(pure(2)).firstCycle()[0].value).toBe(6);
    });
  });
-  describe('div()', function () {
-    it('Can divide things', function () {
-      assert.equal(pure(3).div(pure(2)).firstCycle()[0].value, 1.5);
+  describe('div()', () => {
+    it('Can divide things', () => {
+      expect(pure(3).div(pure(2)).firstCycle()[0].value).toBe(1.5);
    });
  });
-  describe('set()', function () {
-    it('Can set things in objects', function () {
-      assert.deepStrictEqual(
+  describe('set()', () => {
+    it('Can set things in objects', () => {
+      expect(
        pure({ a: 4, b: 6 })
          .set(pure({ c: 7 }))
          .firstCycle()[0].value,
-        { a: 4, b: 6, c: 7 },
-      );
+      ).toStrictEqual({
+        a: 4,
+        b: 6,
+        c: 7,
+      });
+
      sameFirst(
        sequence({ a: 1, b: 2 }, { a: 2, b: 2 }, { a: 3, b: 2 }).set({ a: 4, c: 5 }),
        sequence({ a: 4, b: 2, c: 5 }).fast(3),
      );
    });
-    it('Can set things with plain values', function () {
+    it('Can set things with plain values', () => {
      sameFirst(sequence(1, 2, 3).set(4), sequence(4).fast(3));
    });
    describe('setOut()', () => {
@@ -342,94 +340,84 @@ describe('Pattern', function () {
      });
    });
  });
-  describe('stack()', function () {
-    it('Can stack things', function () {
-      assert.deepStrictEqual(
+  describe('stack()', () => {
+    it('Can stack things', () => {
+      expect(
        stack(pure('a'), pure('b'), pure('c'))
          .firstCycle()
          .map((h) => h.value),
-        ['a', 'b', 'c'],
-      );
+      ).toStrictEqual(['a', 'b', 'c']);
    });
-    it('Can stack subpatterns', function () {
+    it('Can stack subpatterns', () => {
      sameFirst(stack('a', ['b', 'c']), stack('a', sequence('b', 'c')));
    });
  });
-  describe('_fast()', function () {
-    it('Makes things faster', function () {
-      assert.equal(pure('a')._fast(2).firstCycle().length, 2);
+  describe('_fast()', () => {
+    it('Makes things faster', () => {
+      expect(pure('a')._fast(2).firstCycle().length).toBe(2);
    });
  });
-  describe('_fastGap()', function () {
-    it('Makes things faster, with a gap', function () {
-      assert.deepStrictEqual(
-        sequence('a', 'b', 'c')._fastGap(2).firstCycle(),
+  describe('_fastGap()', () => {
+    it('Makes things faster, with a gap', () => {
+      expect(sequence('a', 'b', 'c')._fastGap(2).firstCycle()).toStrictEqual(
        sequence(['a', 'b', 'c'], silence).firstCycle(),
      );
-      assert.deepStrictEqual(
-        sequence('a', 'b', 'c')._fastGap(3).firstCycle(),
+      expect(sequence('a', 'b', 'c')._fastGap(3).firstCycle()).toStrictEqual(
        sequence(['a', 'b', 'c'], silence, silence).firstCycle(),
      );
    });
-    it('Makes things faster, with a gap, when speeded up further', function () {
-      assert.deepStrictEqual(
-        sequence('a', 'b', 'c')._fastGap(2).fast(2).firstCycle(),
+    it('Makes things faster, with a gap, when speeded up further', () => {
+      expect(sequence('a', 'b', 'c')._fastGap(2).fast(2).firstCycle()).toStrictEqual(
        sequence(['a', 'b', 'c'], silence, ['a', 'b', 'c'], silence).firstCycle(),
      );
    });
  });
-  describe('_compressSpan()', function () {
-    it('Can squash cycles of a pattern into a given timespan', function () {
-      assert.deepStrictEqual(
-        pure('a')._compressSpan(new TimeSpan(0.25, 0.5)).firstCycle(),
+  describe('_compressSpan()', () => {
+    it('Can squash cycles of a pattern into a given timespan', () => {
+      expect(pure('a')._compressSpan(ts(0.25, 0.5)).firstCycle()).toStrictEqual(
        sequence(silence, 'a', silence, silence).firstCycle(),
      );
    });
  });
-  describe('fast()', function () {
-    it('Makes things faster', function () {
-      assert.equal(pure('a').fast(2).firstCycle().length, 2);
+  describe('fast()', () => {
+    it('Makes things faster', () => {
+      expect(pure('a').fast(2).firstCycle().length).toBe(2);
    });
-    it('Makes things faster, with a pattern of factors', function () {
-      assert.equal(pure('a').fast(sequence(1, 4)).firstCycle().length, 3);
-      // .fast(sequence(1,silence) is a quick hack to cut a hap in two..
-      assert.deepStrictEqual(
-        pure('a').fast(sequence(1, 4)).firstCycle(),
+    it('Makes things faster, with a pattern of factors', () => {
+      expect(pure('a').fast(sequence(1, 4)).firstCycle().length).toBe(3);
+      expect(pure('a').fast(sequence(1, 4)).firstCycle()).toStrictEqual(
        stack(pure('a').fast(sequence(1, silence)), sequence(silence, ['a', 'a'])).firstCycle(),
      );
    });
-    it('defaults to accepting sequences', function () {
-      assert.deepStrictEqual(
-        sequence(1, 2, 3).fast(sequence(1.5, 2)).firstCycle(),
+    it('defaults to accepting sequences', () => {
+      expect(sequence(1, 2, 3).fast(sequence(1.5, 2)).firstCycle()).toStrictEqual(
        sequence(1, 2, 3).fast(1.5, 2).firstCycle(),
      );
    });
-    it('works as a static function', function () {
-      assert.deepStrictEqual(
-        sequence(1, 2, 3).fast(1, 2).firstCycle(),
+    it('works as a static function', () => {
+      expect(sequence(1, 2, 3).fast(1, 2).firstCycle()).toStrictEqual(
        fast(sequence(1, 2), sequence(1, 2, 3)).firstCycle(),
      );
    });
-    it('works as a curried static function', function () {
-      assert.deepStrictEqual(
-        sequence(1, 2, 3).fast(1, 2).firstCycle(),
+    it('works as a curried static function', () => {
+      expect(sequence(1, 2, 3).fast(1, 2).firstCycle()).toStrictEqual(
        fast(sequence(1, 2))(sequence(1, 2, 3)).firstCycle(),
      );
    });
  });
-  describe('_slow()', function () {
-    it('Makes things slower', function () {
-      assert.deepStrictEqual(
-        pure('a')._slow(2).firstCycle()[0],
-        new Hap(new TimeSpan(Fraction(0), Fraction(2)), new TimeSpan(Fraction(0), Fraction(1)), 'a'),
-      );
+
+  describe('_slow()', () => {
+    it('Makes things slower', () => {
+      expect(pure('a')._slow(2).firstCycle()[0]).toStrictEqual(hap(ts(0, 2), ts(0, 1), 'a'));

      const pat = sequence(pure('c3'), pure('eb3')._slow(2)); // => try mini('c3 eb3/2') in repl
-      assert.deepStrictEqual(pat.query(st(0, 1))[1], hap(ts(0.5, 1.5), ts(1 / 2, 1), 'eb3'));
+
+      expect(pat.query(st(0, 1))[1]).toStrictEqual(hap(ts(0.5, 1.5), ts(1 / 2, 1), 'eb3'));
+
      // the following test fails
-      /* assert.deepStrictEqual(
-        pat.query(ts(1,2))[1], undefined
-      ) */
+      //  assert.deepStrictEqual(
+      //   pat.query(ts(1,2))[1], undefined
+      // )
      // expecting [c3 eb3] [c3 ~]
      // what happens [c3 eb3] [c3 eb3]
      // notable examples:
@@ -439,134 +427,125 @@ describe('Pattern', function () {
  });
  describe('inside', () => {
    it('can rev inside a cycle', () => {
-      sameFirst(sequence('a', 'b', 'c', 'd').inside(2, rev),
-        sequence('b', 'a', 'd', 'c')
-      );
+      sameFirst(sequence('a', 'b', 'c', 'd').inside(2, rev), sequence('b', 'a', 'd', 'c'));
    });
  });
  describe('outside', () => {
    it('can rev outside a cycle', () => {
-      sameFirst(sequence('a', 'b', 'c', 'd')._slow(2).outside(2, rev),
-        sequence('d', 'c')
-      );
+      sameFirst(sequence('a', 'b', 'c', 'd')._slow(2).outside(2, rev), sequence('d', 'c'));
    });
  });
-  describe('_filterValues()', function () {
-    it('Filters true', function () {
-      assert.equal(
+  describe('_filterValues()', () => {
+    it('Filters true', () => {
+      expect(
        pure(true)
          ._filterValues((x) => x)
          .firstCycle().length,
-        1,
-      );
+      ).toBe(1);
    });
  });
-  describe('when()', function () {
-    it('Always faster', function () {
-      assert.equal(
+  describe('when()', () => {
+    it('Always faster', () => {
+      expect(
        pure('a')
          .when(pure(true), (x) => x._fast(2))
          .firstCycle().length,
-        2,
-      );
+      ).toBe(2);
    });
-    it('Never faster', function () {
-      assert.equal(
+    it('Never faster', () => {
+      expect(
        pure('a')
          .when(pure(false), (x) => x._fast(2))
          .firstCycle().length,
-        1,
-      );
+      ).toBe(1);
    });
-    it('Can alternate', function () {
-      assert.deepStrictEqual(
-        pure(10).when(slowcat(true, false), add(3)).fast(4)._sortHapsByPart().firstCycle(),
-        fastcat(13, 10, 13, 10).firstCycle(),
-      );
+    it('Can alternate', () => {
+      expect(
+        pure(10)
+          .when(slowcat(true, false), (x) => x.add(3))
+          .fast(4)
+          ._sortHapsByPart()
+          .firstCycle(),
+      ).toStrictEqual(fastcat(13, 10, 13, 10).firstCycle());
    });
  });
-  describe('fastcat()', function () {
-    it('Can concatenate two things', function () {
-      assert.deepStrictEqual(
+  describe('fastcat()', () => {
+    it('Can concatenate two things', () => {
+      expect(
        fastcat(pure('a'), pure('b'))
          .firstCycle()
          .map((x) => x.value),
-        ['a', 'b'],
-      );
+      ).toStrictEqual(['a', 'b']);
    });
  });
-  describe('fastcat()', function () {
-    it('Can go into negative time', function () {
+  describe('fastcat()', () => {
+    it('Can go into negative time', () => {
      sameFirst(fastcat('a', 'b', 'c').late(1000000), fastcat('a', 'b', 'c'));
    });
  });
-  describe('slowcat()', function () {
-    it('Can concatenate things slowly', function () {
-      assert.deepStrictEqual(
+  describe('slowcat()', () => {
+    it('Can concatenate things slowly', () => {
+      expect(
        slowcat('a', 'b')
          .firstCycle()
          .map((x) => x.value),
-        ['a'],
-      );
-      assert.deepStrictEqual(
+      ).toStrictEqual(['a']);
+
+      expect(
        slowcat('a', 'b')
          ._early(1)
          .firstCycle()
          .map((x) => x.value),
-        ['b'],
-      );
-      assert.deepStrictEqual(
+      ).toStrictEqual(['b']);
+
+      expect(
        slowcat('a', slowcat('b', 'c'))
          ._early(1)
          .firstCycle()
          .map((x) => x.value),
-        ['b'],
-      );
-      assert.deepStrictEqual(
+      ).toStrictEqual(['b']);
+
+      expect(
        slowcat('a', slowcat('b', 'c'))
          ._early(3)
          .firstCycle()
          .map((x) => x.value),
-        ['c'],
-      );
+      ).toStrictEqual(['c']);
    });
    it('Can cat subpatterns', () => {
      sameFirst(slowcat('a', ['b', 'c']).fast(4), sequence('a', ['b', 'c']).fast(2));
    });
  });
-  describe('rev()', function () {
-    it('Can reverse things', function () {
-      assert.deepStrictEqual(
+  describe('rev()', () => {
+    it('Can reverse things', () => {
+      expect(
        fastcat('a', 'b', 'c')
          .rev()
          .firstCycle()
          .sort((a, b) => a.part.begin.sub(b.part.begin))
          .map((a) => a.value),
-        ['c', 'b', 'a'],
-      );
+      ).toStrictEqual(['c', 'b', 'a']);
    });
  });
  describe('sequence()', () => {
    it('Can work like fastcat', () => {
-      assert.deepStrictEqual(sequence(1, 2, 3).firstCycle(), fastcat(1, 2, 3).firstCycle());
+      expect(sequence(1, 2, 3).firstCycle()).toStrictEqual(fastcat(1, 2, 3).firstCycle());
    });
  });
  describe('polyrhythm()', () => {
    it('Can layer up cycles', () => {
-      assert.deepStrictEqual(
-        polyrhythm(['a', 'b'], ['c']).firstCycle(),
+      expect(polyrhythm(['a', 'b'], ['c']).firstCycle()).toStrictEqual(
        stack(fastcat(pure('a'), pure('b')), pure('c')).firstCycle(),
      );
    });
  });
  describe('polymeter()', () => {
    it('Can layer up cycles, stepwise', () => {
-      assert.deepStrictEqual(
-        polymeterSteps(3, ['d', 'e']).firstCycle(),
+      expect(polymeterSteps(3, ['d', 'e']).firstCycle()).toStrictEqual(
        fastcat(pure('d'), pure('e'), pure('d')).firstCycle(),
      );
-      assert.deepStrictEqual(
-        polymeter(['a', 'b', 'c'], ['d', 'e']).fast(2).firstCycle(),
+
+      expect(polymeter(['a', 'b', 'c'], ['d', 'e']).fast(2).firstCycle()).toStrictEqual(
        stack(sequence('a', 'b', 'c', 'a', 'b', 'c'), sequence('d', 'e', 'd', 'e', 'd', 'e')).firstCycle(),
      );
    });
@@ -574,29 +553,24 @@ describe('Pattern', function () {

  describe('every()', () => {
    it('Can apply a function every 3rd time', () => {
-      assert.deepStrictEqual(
+      expect(
        pure('a')
          .every(3, (x) => x._fast(2))
          ._fast(3)
          .firstCycle(),
-        sequence(sequence('a', 'a'), 'a', 'a').firstCycle(),
-      );
+      ).toStrictEqual(sequence(sequence('a', 'a'), 'a', 'a').firstCycle());
    });
    it('works with currying', () => {
-      assert.deepStrictEqual(
-        pure('a').every(3, fast(2))._fast(3).firstCycle(),
+      expect(pure('a').every(3, fast(2))._fast(3).firstCycle()).toStrictEqual(
        sequence(sequence('a', 'a'), 'a', 'a').firstCycle(),
      );
-      assert.deepStrictEqual(
-        sequence(3, 4, 5).every(3, add(3)).fast(5).firstCycle(),
+      expect(sequence(3, 4, 5).every(3, add(3)).fast(5).firstCycle()).toStrictEqual(
        sequence(6, 7, 8, 3, 4, 5, 3, 4, 5, 6, 7, 8, 3, 4, 5).firstCycle(),
      );
-      assert.deepStrictEqual(
-        sequence(3, 4, 5).every(2, sub(1)).fast(5).firstCycle(),
+      expect(sequence(3, 4, 5).every(2, sub(1)).fast(5).firstCycle()).toStrictEqual(
        sequence(2, 3, 4, 3, 4, 5, 2, 3, 4, 3, 4, 5, 2, 3, 4).firstCycle(),
      );
-      assert.deepStrictEqual(
-        sequence(3, 4, 5).every(3, add(3)).every(2, sub(1)).fast(2).firstCycle(),
+      expect(sequence(3, 4, 5).every(3, add(3)).every(2, sub(1)).fast(2).firstCycle()).toStrictEqual(
        sequence(5, 6, 7, 3, 4, 5).firstCycle(),
      );
    });
@@ -606,98 +580,91 @@ describe('Pattern', function () {
      sameFirst(sequence('a', 'b').brak()._fast(2), sequence('a', 'b', fastcat(silence, 'a'), fastcat('b', silence)));
    });
  });
-  describe('timeCat()', function () {
-    it('Can concatenate patterns with different relative durations', function () {
-      assert.deepStrictEqual(
-        sequence('a', ['a', 'a']).firstCycle(),
+  describe('timeCat()', () => {
+    it('Can concatenate patterns with different relative durations', () => {
+      expect(sequence('a', ['a', 'a']).firstCycle()).toStrictEqual(
        timeCat([1, 'a'], [0.5, 'a'], [0.5, 'a']).firstCycle(),
      );
    });
  });
-  describe('struct()', function () {
-    it('Can restructure a discrete pattern', function () {
-      assert.deepStrictEqual(sequence('a', 'b').struct(sequence(true, true, true)).firstCycle(), [
+  describe('struct()', () => {
+    it('Can restructure a discrete pattern', () => {
+      expect(sequence('a', 'b').struct(sequence(true, true, true)).firstCycle()).toStrictEqual([
        hap(ts(0, third), ts(0, third), 'a'),
        hap(ts(third, twothirds), ts(third, 0.5), 'a'),
        hap(ts(third, twothirds), ts(0.5, twothirds), 'b'),
        hap(ts(twothirds, 1), ts(twothirds, 1), 'b'),
      ]);
-      assert.deepStrictEqual(
+
+      expect(
        pure('a')
          .struct(sequence(true, [true, false], true))
          .firstCycle(),
-        sequence('a', ['a', silence], 'a').firstCycle(),
-      );
-      assert.deepStrictEqual(
+      ).toStrictEqual(sequence('a', ['a', silence], 'a').firstCycle());
+
+      expect(
        pure('a')
          .struct(sequence(true, [true, false], true).invert())
          .firstCycle(),
-        sequence(silence, [silence, 'a'], silence).firstCycle(),
-      );
-      assert.deepStrictEqual(
+      ).toStrictEqual(sequence(silence, [silence, 'a'], silence).firstCycle());
+
+      expect(
        pure('a')
          .struct(sequence(true, [true, silence], true))
          .firstCycle(),
-        sequence('a', ['a', silence], 'a').firstCycle(),
-      );
+      ).toStrictEqual(sequence('a', ['a', silence], 'a').firstCycle());
    });
    it('Can structure a continuous pattern', () => {
-      assert.deepStrictEqual(
-        steady('a').struct(true, [true, true]).firstCycle(),
-        sequence('a', ['a', 'a']).firstCycle(),
-      );
+      expect(steady('a').struct(true, [true, true]).firstCycle()).toStrictEqual(sequence('a', ['a', 'a']).firstCycle());
    });
  });
-  describe('mask()', function () {
-    it('Can fragment a pattern', function () {
-      assert.deepStrictEqual(sequence('a', 'b').mask(sequence(true, true, true)).firstCycle(), [
+  describe('mask()', () => {
+    it('Can fragment a pattern', () => {
+      expect(sequence('a', 'b').mask(sequence(true, true, true)).firstCycle()).toStrictEqual([
        hap(ts(0, 0.5), ts(0, third), 'a'),
        hap(ts(0, 0.5), ts(third, 0.5), 'a'),
        hap(ts(0.5, 1), ts(0.5, twothirds), 'b'),
        hap(ts(0.5, 1), ts(twothirds, 1), 'b'),
      ]);
    });
-    it('Can mask off parts of a pattern', function () {
-      assert.deepStrictEqual(
-        sequence(['a', 'b'], 'c').mask(sequence(true, false)).firstCycle(),
+    it('Can mask off parts of a pattern', () => {
+      expect(sequence(['a', 'b'], 'c').mask(sequence(true, false)).firstCycle()).toStrictEqual(
        sequence(['a', 'b'], silence).firstCycle(),
      );
-      assert.deepStrictEqual(sequence('a').mask(sequence(true, false)).firstCycle(), [hap(ts(0, 1), ts(0, 0.5), 'a')]);
+
+      expect(sequence('a').mask(sequence(true, false)).firstCycle()).toStrictEqual([hap(ts(0, 1), ts(0, 0.5), 'a')]);
    });
  });
-  describe('invert()', function () {
-    it('Can invert a binary pattern', function () {
-      assert.deepStrictEqual(
-        sequence(true, false, [true, false]).invert().firstCycle(),
+  describe('invert()', () => {
+    it('Can invert a binary pattern', () => {
+      expect(sequence(true, false, [true, false]).invert().firstCycle()).toStrictEqual(
        sequence(false, true, [false, true]).firstCycle(),
      );
    });
  });
-  describe('signal()', function () {
-    it('Can make saw/saw2', function () {
-      assert.deepStrictEqual(
-        saw.struct(true, true, true, true).firstCycle(),
+  describe('signal()', () => {
+    it('Can make saw/saw2', () => {
+      expect(saw.struct(true, true, true, true).firstCycle()).toStrictEqual(
        sequence(1 / 8, 3 / 8, 5 / 8, 7 / 8).firstCycle(),
      );
-      assert.deepStrictEqual(
-        saw2.struct(true, true, true, true).firstCycle(),
+
+      expect(saw2.struct(true, true, true, true).firstCycle()).toStrictEqual(
        sequence(-3 / 4, -1 / 4, 1 / 4, 3 / 4).firstCycle(),
      );
    });
-    it('Can make isaw/isaw2', function () {
-      assert.deepStrictEqual(
-        isaw.struct(true, true, true, true).firstCycle(),
+    it('Can make isaw/isaw2', () => {
+      expect(isaw.struct(true, true, true, true).firstCycle()).toStrictEqual(
        sequence(7 / 8, 5 / 8, 3 / 8, 1 / 8).firstCycle(),
      );
-      assert.deepStrictEqual(
-        isaw2.struct(true, true, true, true).firstCycle(),
+
+      expect(isaw2.struct(true, true, true, true).firstCycle()).toStrictEqual(
        sequence(3 / 4, 1 / 4, -1 / 4, -3 / 4).firstCycle(),
      );
    });
  });
  describe('_setContext()', () => {
    it('Can set the hap context', () => {
-      assert.deepStrictEqual(
+      expect(
        pure('a')
          ._setContext([
            [
@@ -706,20 +673,19 @@ describe('Pattern', function () {
            ],
          ])
          .firstCycle(true),
-        [
-          hap(ts(0, 1), ts(0, 1), 'a', [
-            [
-              [0, 1],
-              [1, 2],
-            ],
-          ]),
-        ],
-      );
+      ).toStrictEqual([
+        hap(ts(0, 1), ts(0, 1), 'a', [
+          [
+            [0, 1],
+            [1, 2],
+          ],
+        ]),
+      ]);
    });
  });
  describe('_withContext()', () => {
    it('Can update the hap context', () => {
-      assert.deepStrictEqual(
+      expect(
        pure('a')
          ._setContext([
            [
@@ -735,52 +701,49 @@ describe('Pattern', function () {
            ],
          ])
          .firstCycle(true),
-        [
-          hap(ts(0, 1), ts(0, 1), 'a', [
-            [
-              [0, 1],
-              [1, 2],
-            ],
-            [
-              [3, 4],
-              [3, 4],
-            ],
-          ]),
-        ],
-      );
+      ).toStrictEqual([
+        hap(ts(0, 1), ts(0, 1), 'a', [
+          [
+            [0, 1],
+            [1, 2],
+          ],
+          [
+            [3, 4],
+            [3, 4],
+          ],
+        ]),
+      ]);
    });
  });
  describe('apply', () => {
    it('Can apply a function', () => {
-      assert.deepStrictEqual(sequence('a', 'b')._apply(fast(2)).firstCycle(), sequence('a', 'b').fast(2).firstCycle());
+      expect(sequence('a', 'b')._apply(fast(2)).firstCycle()).toStrictEqual(sequence('a', 'b').fast(2).firstCycle());
    }),
      it('Can apply a pattern of functions', () => {
-        assert.deepStrictEqual(sequence('a', 'b').apply(fast(2)).firstCycle(), sequence('a', 'b').fast(2).firstCycle());
-        assert.deepStrictEqual(
-          sequence('a', 'b').apply(fast(2), fast(3)).firstCycle(),
+        expect(sequence('a', 'b').apply(fast(2)).firstCycle()).toStrictEqual(sequence('a', 'b').fast(2).firstCycle());
+        expect(sequence('a', 'b').apply(fast(2), fast(3)).firstCycle()).toStrictEqual(
          sequence('a', 'b').fast(2, 3).firstCycle(),
        );
      });
  });
  describe('layer', () => {
    it('Can layer up multiple functions', () => {
-      assert.deepStrictEqual(
+      expect(
        sequence(1, 2, 3)
          .layer(fast(2), (pat) => pat.add(3, 4))
          .firstCycle(),
-        stack(sequence(1, 2, 3).fast(2), sequence(1, 2, 3).add(3, 4)).firstCycle(),
-      );
+      ).toStrictEqual(stack(sequence(1, 2, 3).fast(2), sequence(1, 2, 3).add(3, 4)).firstCycle());
    });
  });
  describe('early', () => {
    it('Can shift a hap earlier', () => {
-      assert.deepStrictEqual(pure(30)._late(0.25).query(st(1, 2)), [
+      expect(pure(30)._late(0.25).query(st(1, 2))).toStrictEqual([
        hap(ts(1 / 4, 5 / 4), ts(1, 5 / 4), 30),
        hap(ts(5 / 4, 9 / 4), ts(5 / 4, 2), 30),
      ]);
    });
    it('Can shift a hap earlier, into negative time', () => {
-      assert.deepStrictEqual(pure(30)._late(0.25).query(st(0, 1)), [
+      expect(pure(30)._late(0.25).query(st(0, 1))).toStrictEqual([
        hap(ts(-3 / 4, 1 / 4), ts(0, 1 / 4), 30),
        hap(ts(1 / 4, 5 / 4), ts(1 / 4, 1), 30),
      ]);
@@ -788,16 +751,14 @@ describe('Pattern', function () {
  });
  describe('off', () => {
    it('Can offset a transformed pattern from the original', () => {
-      assert.deepStrictEqual(
-        pure(30).off(0.25, add(2)).firstCycle(),
+      expect(pure(30).off(0.25, add(2)).firstCycle()).toStrictEqual(
        stack(pure(30), pure(30).late(0.25).add(2)).firstCycle(),
      );
    });
  });
  describe('jux', () => {
    it('Can juxtapose', () => {
-      assert.deepStrictEqual(
-        pure({ a: 1 }).jux(fast(2))._sortHapsByPart().firstCycle(),
+      expect(pure({ a: 1 }).jux(fast(2))._sortHapsByPart().firstCycle()).toStrictEqual(
        stack(pure({ a: 1, pan: 0 }), pure({ a: 1, pan: 1 }).fast(2))
          ._sortHapsByPart()
          .firstCycle(),
@@ -806,8 +767,7 @@ describe('Pattern', function () {
  });
  describe('juxBy', () => {
    it('Can juxtapose by half', () => {
-      assert.deepStrictEqual(
-        pure({ a: 1 }).juxBy(0.5, fast(2))._sortHapsByPart().firstCycle(),
+      expect(pure({ a: 1 }).juxBy(0.5, fast(2))._sortHapsByPart().firstCycle()).toStrictEqual(
        stack(pure({ a: 1, pan: 0.25 }), pure({ a: 1, pan: 0.75 }).fast(2))
          ._sortHapsByPart()
          .firstCycle(),
@@ -816,11 +776,12 @@ describe('Pattern', function () {
  });
  describe('_squeezeJoin', () => {
    it('Can squeeze', () => {
-      assert.deepStrictEqual(
+      expect(
        sequence('a', ['a', 'a'])
          .fmap((a) => fastcat('b', 'c'))
          ._squeezeJoin()
          .firstCycle(),
+      ).toStrictEqual(
        sequence(
          ['b', 'c'],
          [
@@ -833,14 +794,13 @@ describe('Pattern', function () {
  });
  describe('ply', () => {
    it('Can ply(3)', () => {
-      assert.deepStrictEqual(
-        sequence('a', ['b', 'c']).ply(3).firstCycle(),
+      expect(sequence('a', ['b', 'c']).ply(3).firstCycle()).toStrictEqual(
        sequence(pure('a').fast(3), [pure('b').fast(3), pure('c').fast(3)]).firstCycle(),
      );
    });
    it('Doesnt drop haps in the 9th cycle', () => {
      // fixed with https://github.com/tidalcycles/strudel/commit/72eeaf446e3d5e186d63cc0d2276f0723cde017a
-      assert.equal(sequence(1, 2, 3).ply(2).early(8).firstCycle().length, 6);
+      expect(sequence(1, 2, 3).ply(2).early(8).firstCycle().length).toBe(6);
    });
  });
  describe('striate', () => {
@@ -853,8 +813,7 @@ describe('Pattern', function () {
  });
  describe('chop', () => {
    it('Can _chop(2)', () => {
-      assert.deepStrictEqual(
-        sequence({ sound: 'a' }, { sound: 'b' })._chop(2).firstCycle(),
+      expect(sequence({ sound: 'a' }, { sound: 'b' })._chop(2).firstCycle()).toStrictEqual(
        sequence(
          { sound: 'a', begin: 0, end: 0.5 },
          { sound: 'a', begin: 0.5, end: 1 },
@@ -864,8 +823,7 @@ describe('Pattern', function () {
      );
    });
    it('Can chop(2,3)', () => {
-      assert.deepStrictEqual(
-        pure({ sound: 'a' }).fast(2).chop(2, 3)._sortHapsByPart().firstCycle(),
+      expect(pure({ sound: 'a' }).fast(2).chop(2, 3)._sortHapsByPart().firstCycle()).toStrictEqual(
        sequence(
          [
            { sound: 'a', begin: 0, end: 0.5 },
@@ -884,16 +842,14 @@ describe('Pattern', function () {
  });
  describe('range2', () => {
    it('Can change the range of a bipolar pattern', () => {
-      assert.deepStrictEqual(
-        sequence(-1, -0.5, 0, 0.5).range2(1000, 1100).firstCycle(),
+      expect(sequence(-1, -0.5, 0, 0.5).range2(1000, 1100).firstCycle()).toStrictEqual(
        sequence(1000, 1025, 1050, 1075).firstCycle(),
      );
    });
  });
  describe('linger', () => {
    it('Can linger on the first quarter of a cycle', () => {
-      assert.deepStrictEqual(
-        sequence(0, 1, 2, 3, 4, 5, 6, 7).linger(0.25).firstCycle(),
+      expect(sequence(0, 1, 2, 3, 4, 5, 6, 7).linger(0.25).firstCycle()).toStrictEqual(
        sequence(0, 1, 0, 1, 0, 1, 0, 1).firstCycle(),
      );
    });
@@ -4,117 +4,117 @@ 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 { strict as assert } from 'assert';
 import { pure } from '../pattern.mjs';
 import { isNote, tokenizeNote, toMidi, fromMidi, mod, compose, getFrequency } from '../util.mjs';
+import { describe, it, expect } from 'vitest';

 describe('isNote', () => {
  it('should recognize notes without accidentals', () => {
    'C3 D3 E3 F3 G3 A3 B3 C4 D5 c5 d5 e5'.split(' ').forEach((note) => {
-      assert.equal(isNote(note), true);
+      expect(isNote(note)).toBe(true);
    });
  });
  it('should recognize notes with accidentals', () => {
    'C#3 D##3 Eb3 Fbb3 Bb5'.split(' ').forEach((note) => {
-      assert.equal(isNote(note), true);
+      expect(isNote(note)).toBe(true);
    });
  });
  it('should not recognize invalid notes', () => {
-    assert.equal(isNote('H5'), false);
-    assert.equal(isNote('C'), false);
-    assert.equal(isNote('X'), false);
-    assert.equal(isNote(1), false);
+    expect(isNote('H5')).toBe(false);
+    expect(isNote('C')).toBe(false);
+    expect(isNote('X')).toBe(false);
+    expect(isNote(1)).toBe(false);
  });
 });

 describe('isNote', () => {
  it('should tokenize notes without accidentals', () => {
-    assert.deepStrictEqual(tokenizeNote('C3'), ['C', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('D3'), ['D', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('E3'), ['E', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('F3'), ['F', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('G3'), ['G', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('A3'), ['A', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('B3'), ['B', '', 3]);
-    assert.deepStrictEqual(tokenizeNote('C4'), ['C', '', 4]);
-    assert.deepStrictEqual(tokenizeNote('D5'), ['D', '', 5]);
+    expect(tokenizeNote('C3')).toStrictEqual(['C', '', 3]);
+    expect(tokenizeNote('D3')).toStrictEqual(['D', '', 3]);
+    expect(tokenizeNote('E3')).toStrictEqual(['E', '', 3]);
+    expect(tokenizeNote('F3')).toStrictEqual(['F', '', 3]);
+    expect(tokenizeNote('G3')).toStrictEqual(['G', '', 3]);
+    expect(tokenizeNote('A3')).toStrictEqual(['A', '', 3]);
+    expect(tokenizeNote('B3')).toStrictEqual(['B', '', 3]);
+    expect(tokenizeNote('C4')).toStrictEqual(['C', '', 4]);
+    expect(tokenizeNote('D5')).toStrictEqual(['D', '', 5]);
  });
  it('should tokenize notes with accidentals', () => {
-    assert.deepStrictEqual(tokenizeNote('C#3'), ['C', '#', 3]);
-    assert.deepStrictEqual(tokenizeNote('D##3'), ['D', '##', 3]);
-    assert.deepStrictEqual(tokenizeNote('Eb3'), ['E', 'b', 3]);
-    assert.deepStrictEqual(tokenizeNote('Fbb3'), ['F', 'bb', 3]);
-    assert.deepStrictEqual(tokenizeNote('Bb5'), ['B', 'b', 5]);
+    expect(tokenizeNote('C#3')).toStrictEqual(['C', '#', 3]);
+    expect(tokenizeNote('D##3')).toStrictEqual(['D', '##', 3]);
+    expect(tokenizeNote('Eb3')).toStrictEqual(['E', 'b', 3]);
+    expect(tokenizeNote('Fbb3')).toStrictEqual(['F', 'bb', 3]);
+    expect(tokenizeNote('Bb5')).toStrictEqual(['B', 'b', 5]);
  });
  it('should tokenize notes without octave', () => {
-    assert.deepStrictEqual(tokenizeNote('C'), ['C', '', undefined]);
-    assert.deepStrictEqual(tokenizeNote('C#'), ['C', '#', undefined]);
-    assert.deepStrictEqual(tokenizeNote('Bb'), ['B', 'b', undefined]);
-    assert.deepStrictEqual(tokenizeNote('Bbb'), ['B', 'bb', undefined]);
+    expect(tokenizeNote('C')).toStrictEqual(['C', '', undefined]);
+    expect(tokenizeNote('C#')).toStrictEqual(['C', '#', undefined]);
+    expect(tokenizeNote('Bb')).toStrictEqual(['B', 'b', undefined]);
+    expect(tokenizeNote('Bbb')).toStrictEqual(['B', 'bb', undefined]);
  });
  it('should not tokenize invalid notes', () => {
-    assert.deepStrictEqual(tokenizeNote('X'), []);
-    assert.deepStrictEqual(tokenizeNote('asfasf'), []);
-    assert.deepStrictEqual(tokenizeNote(123), []);
+    expect(tokenizeNote('X')).toStrictEqual([]);
+    expect(tokenizeNote('asfasf')).toStrictEqual([]);
+    expect(tokenizeNote(123)).toStrictEqual([]);
  });
 });
 describe('toMidi', () => {
  it('should turn notes into midi', () => {
-    assert.equal(toMidi('A4'), 69);
-    assert.equal(toMidi('C4'), 60);
-    assert.equal(toMidi('Db4'), 61);
-    assert.equal(toMidi('C3'), 48);
-    assert.equal(toMidi('Cb3'), 47);
-    assert.equal(toMidi('Cbb3'), 46);
-    assert.equal(toMidi('C#3'), 49);
-    assert.equal(toMidi('C#3'), 49);
-    assert.equal(toMidi('C##3'), 50);
+    expect(toMidi('A4')).toEqual(69);
+    expect(toMidi('C4')).toEqual(60);
+    expect(toMidi('Db4')).toEqual(61);
+    expect(toMidi('C3')).toEqual(48);
+    expect(toMidi('Cb3')).toEqual(47);
+    expect(toMidi('Cbb3')).toEqual(46);
+    expect(toMidi('C#3')).toEqual(49);
+    expect(toMidi('C#3')).toEqual(49);
+    expect(toMidi('C##3')).toEqual(50);
  });
 });
 describe('fromMidi', () => {
  it('should turn midi into frequency', () => {
-    assert.equal(fromMidi(69), 440);
-    assert.equal(fromMidi(57), 220);
+    expect(fromMidi(69)).toEqual(440);
+    expect(fromMidi(57)).toEqual(220);
  });
 });
 describe('getFrequency', () => {
  it('should turn midi into frequency', () => {
    const happify = (val, context = {}) => pure(val).firstCycle()[0].setContext(context);
-    assert.equal(getFrequency(happify('a4')), 440);
-    assert.equal(getFrequency(happify('a3')), 220);
-    assert.equal(getFrequency(happify(440, { type: 'frequency' })), 440); // TODO: migrate when values are objects..
-    assert.equal(getFrequency(happify(432, { type: 'frequency' })), 432);
+    expect(getFrequency(happify('a4'))).toEqual(440);
+    expect(getFrequency(happify('a3'))).toEqual(220);
+    expect(getFrequency(happify(440, { type: 'frequency' }))).toEqual(440); // TODO: migrate when values are objects..
+    expect(getFrequency(happify(432, { type: 'frequency' }))).toEqual(432);
  });
 });

 describe('mod', () => {
  it('should work like regular modulo with positive numbers', () => {
-    assert.equal(mod(0, 3), 0);
-    assert.equal(mod(1, 3), 1);
-    assert.equal(mod(2, 3), 2);
-    assert.equal(mod(3, 3), 0);
-    assert.equal(mod(4, 3), 1);
-    assert.equal(mod(4, 2), 0);
+    expect(mod(0, 3)).toEqual(0);
+    expect(mod(1, 3)).toEqual(1);
+    expect(mod(2, 3)).toEqual(2);
+    expect(mod(3, 3)).toEqual(0);
+    expect(mod(4, 3)).toEqual(1);
+    expect(mod(4, 2)).toEqual(0);
  });
  it('should work with negative numbers', () => {
-    assert.equal(mod(-1, 3), 2);
-    assert.equal(mod(-2, 3), 1);
-    assert.equal(mod(-3, 3), 0);
-    assert.equal(mod(-4, 3), 2);
-    assert.equal(mod(-5, 3), 1);
-    assert.equal(mod(-3, 2), 1);
+    expect(mod(-1, 3)).toEqual(2);
+    expect(mod(-2, 3)).toEqual(1);
+    expect(mod(-3, 3)).toEqual(0);
+    expect(mod(-4, 3)).toEqual(2);
+    expect(mod(-5, 3)).toEqual(1);
+    expect(mod(-3, 2)).toEqual(1);
  });
 });

 describe('compose', () => {
  const add1 = (a) => a + 1;
  it('should compose', () => {
-    assert.equal(compose(add1, add1)(0), 2);
-    assert.equal(compose(add1)(0), 1);
+    expect(compose(add1, add1)(0)).toEqual(2);
+    expect(compose(add1)(0)).toEqual(1);
  });
  const addS = (s) => (a) => a + s;
  it('should compose left to right', () => {
-    assert.equal(compose(addS('a'), addS('b'))(''), 'ab');
-    assert.equal(compose(addS('a'), addS('b'))('x'), 'xab');
+    expect(compose(addS('a'), addS('b'))('')).toEqual('ab');
+    expect(compose(addS('a'), addS('b'))('x')).toEqual('xab');
  });
 });
@@ -4,21 +4,21 @@ 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 { strict as assert } from 'assert';
+import { describe, it, expect } from 'vitest';
 import { map, valued, mul } from '../value.mjs';

 describe('Value', () => {
  it('unionWith', () => {
    const { value } = valued({ freq: 2000, distortion: 1.2 }).unionWith({ distortion: 2 }, mul);
-    assert.deepStrictEqual(value, { freq: 2000, distortion: 2.4 });
+    expect(value).toStrictEqual({ freq: 2000, distortion: 2.4 });
  });

  it('experiments', () => {
-    assert.equal(map(mul(5), valued(3)).value, 15);
-    assert.equal(map(mul(null), valued(3)).value, 0);
-    assert.equal(map(mul(3), valued(null)).value, null);
-    assert.equal(valued(3).map(mul).ap(3).value, 9);
-    assert.equal(valued(mul).ap(3).ap(3).value, 9);
-    assert.equal(valued(3).mul(3).value, 9);
+    expect(map(mul(5), valued(3)).value).toEqual(15);
+    expect(map(mul(null), valued(3)).value).toEqual(0);
+    expect(map(mul(3), valued(null)).value).toEqual(null);
+    expect(valued(3).map(mul).ap(3).value).toEqual(9);
+    expect(valued(mul).ap(3).ap(3).value).toEqual(9);
+    expect(valued(3).mul(3).value).toEqual(9);
  });
 });
@@ -10,7 +10,7 @@ export const tokenizeNote = (note) => {
  if (typeof note !== 'string') {
    return [];
  }
-  const [pc, acc = '', oct] = note.match(/^([a-gA-G])([#b]*)([0-9])?$/)?.slice(1) || [];
+  const [pc, acc = '', oct] = note.match(/^([a-gA-G])([#bs]*)([0-9])?$/)?.slice(1) || [];
  if (!pc) {
    return [];
  }
@@ -24,24 +24,42 @@ export const toMidi = (note) => {
    throw new Error('not a note: "' + note + '"');
  }
  const chroma = { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 }[pc.toLowerCase()];
-  const offset = acc?.split('').reduce((o, char) => o + { '#': 1, b: -1 }[char], 0) || 0;
+  const offset = acc?.split('').reduce((o, char) => o + { '#': 1, b: -1, s: 1 }[char], 0) || 0;
  return (Number(oct) + 1) * 12 + chroma + offset;
 };
 export const fromMidi = (n) => {
  return Math.pow(2, (n - 69) / 12) * 440;
 };

+export const getFreq = (noteOrMidi) => {
+  if (typeof noteOrMidi === 'number') {
+    return fromMidi(noteOrMidi);
+  }
+  return fromMidi(toMidi(noteOrMidi));
+};
+
+export const midi2note = (n) => {
+  const oct = Math.floor(n / 12) - 1;
+  const pc = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'][n % 12];
+  return pc + oct;
+};
+
 // modulo that works with negative numbers e.g. mod(-1, 3) = 2
 // const mod = (n: number, m: number): number => (n < 0 ? mod(n + m, m) : n % m);
 export const mod = (n, m) => ((n % m) + m) % m;

 export const getPlayableNoteValue = (hap) => {
  let { value: note, context } = hap;
+  if (typeof note === 'object' && !Array.isArray(note)) {
+    note = note.note || note.n || note.value;
+  }
  // if value is number => interpret as midi number as long as its not marked as frequency
  if (typeof note === 'number' && context.type !== 'frequency') {
    note = fromMidi(hap.value);
-  } else if (typeof note === 'string' && !isNote(note)) {
-    throw new Error('not a note: ' + note);
+  } else if (typeof note === 'number' && context.type === 'frequency') {
+    note = hap.value; // legacy workaround.. will be removed in the future
+  } else if (typeof note !== 'string' || !isNote(note)) {
+    throw new Error('not a note: ' + JSON.stringify(note));
  }
  return note;
 };
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/embed",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "description": "Embeddable Web Component to load a Strudel REPL into an iframe",
  "main": "embed.js",
  "type": "module",
@@ -15,9 +15,11 @@ npm i @strudel.cycles/eval --save

 ```js
 import { evaluate, extend } from '@strudel.cycles/eval';
-import * as strudel from '@strudel.cycles/core';

-extend(strudel); // add strudel to eval scope
+evalScope(
+  import('@strudel.cycles/core'),
+  // import other strudel packages here
+); // add strudel to eval scope

 async function run(code) {
  const { pattern } = await evaluate(code);
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/eval",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/eval",
-			"version": "0.0.3",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.1",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"estraverse": "^5.3.0",
 				"shift-ast": "^6.1.0",
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/eval",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Code evaluator for strudel",
  "main": "index.mjs",
  "type": "module",
@@ -8,7 +8,7 @@
    "test": "test"
  },
  "scripts": {
-    "test": "mocha --colors"
+    "test": "vitest run"
  },
  "repository": {
    "type": "git",
@@ -28,7 +28,7 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/core": "^0.1.0",
+    "@strudel.cycles/core": "^0.2.0",
    "estraverse": "^5.3.0",
    "shift-ast": "^6.1.0",
    "shift-codegen": "^7.0.3",
@@ -34,7 +34,7 @@ export const wrappedAsync = true;

 export default (_code) => {
  const { code, addReturn } = wrapAsync(_code);
-  const ast = parseScriptWithLocation(code);
+  const ast = parseScriptWithLocation(disguiseImports(code));
  const artificialNodes = [];
  const parents = [];
  const shifted = replace(ast.tree, {
@@ -128,10 +128,22 @@ export default (_code) => {
  if (wrappedAsync) {
    addReturn(shifted);
  }
-  const generated = codegen(shifted);
+  const generated = undisguiseImports(codegen(shifted));
  return generated;
 };

+// renames all import statements to "_mport" as Shift doesn't support dynamic import.
+// there shouldn't be any side-effects from this as this change does not affect
+// the syntax & will be undone by the equivalent replace in "undisguiseImports".
+function disguiseImports(code) {
+  return code.replaceAll('import', '_mport'); // Must be the same length!
+}
+
+// Rename the renamed import statements back to "import"
+function undisguiseImports(code) {
+  return code.replaceAll('_mport', 'import');
+}
+
 function wrapAsync(code) {
  // wrap code in async to make await work on top level => this will create 1 line offset to locations
  // this is why line offset is -1 in getLocationObject calls below
@@ -4,31 +4,29 @@ 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 { strict as assert } from 'assert';
-import { evaluate, extend } from '../evaluate.mjs';
+import { expect, describe, it } from 'vitest';
+
+import { evaluate, evalScope } from '../evaluate.mjs';
 import { mini } from '@strudel.cycles/mini';
 import * as strudel from '@strudel.cycles/core';
-
 const { fastcat } = strudel;

-extend({ mini }, strudel);
-// TODO: test evalScope
-
-describe('evaluate', () => {
+describe('evaluate', async () => {
+  await evalScope({ mini }, strudel);
  const ev = async (code) => (await evaluate(code)).pattern._firstCycleValues;
  it('Should evaluate strudel functions', async () => {
-    assert.deepStrictEqual(await ev("pure('c3')"), ['c3']);
-    assert.deepStrictEqual(await ev('cat(c3)'), ['c3']);
-    assert.deepStrictEqual(await ev('fastcat(c3, d3)'), ['c3', 'd3']);
-    assert.deepStrictEqual(await ev('slowcat(c3, d3)'), ['c3']);
+    expect(await ev('pure("c3")')).toEqual(['c3']);
+    expect(await ev('cat("c3")')).toEqual(['c3']);
+    expect(await ev('fastcat("c3", "d3")')).toEqual(['c3', 'd3']);
+    expect(await ev('slowcat("c3", "d3")')).toEqual(['c3']);
  });
-  it('Should be extendable', async () => {
-    extend({ myFunction: (...x) => fastcat(...x) });
-    assert.deepStrictEqual(await ev('myFunction(c3, d3)'), ['c3', 'd3']);
+  it('Scope should be extendable', async () => {
+    await evalScope({ myFunction: (...x) => fastcat(...x) });
+    expect(await ev('myFunction("c3", "d3")')).toEqual(['c3', 'd3']);
  });
  it('Should evaluate simple double quoted mini notation', async () => {
-    assert.deepStrictEqual(await ev('"c3"'), ['c3']);
-    assert.deepStrictEqual(await ev('"c3 d3"'), ['c3', 'd3']);
-    assert.deepStrictEqual(await ev('"<c3 d3>"'), ['c3']);
+    expect(await ev('"c3"')).toEqual(['c3']);
+    expect(await ev('"c3 d3"')).toEqual(['c3', 'd3']);
+    expect(await ev('"<c3 d3>"')).toEqual(['c3']);
  });
 });
@@ -4,11 +4,16 @@ 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 { strict as assert } from 'assert';
+import { describe, it, expect } from 'vitest';
 import shapeshifter from '../shapeshifter.mjs';

 describe('shapeshifter', () => {
  it('Should shift simple double quote string', () => {
-    assert.equal(shapeshifter('"c3"'), '(async()=>{return mini("c3").withMiniLocation([1,0,15],[1,4,19])})()');
+    expect(shapeshifter('"c3"')).toEqual('(async()=>{return mini("c3").withMiniLocation([1,0,15],[1,4,19])})()');
+  });
+  it('Should handle dynamic imports', () => {
+    expect(shapeshifter('const { default: foo } = await import(\'https://bar.com/foo.js\');"c3"')).toEqual(
+      '(async()=>{const{default:foo}=await import("https://bar.com/foo.js");return mini("c3").withMiniLocation([1,64,79],[1,68,83])})()',
+    );
  });
 });
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/midi",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/midi",
-			"version": "0.0.4",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.1",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"tone": "^14.7.77",
 				"webmidi": "^2.5.2"
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/midi",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Midi API for strudel",
  "main": "index.mjs",
  "repository": {
@@ -21,7 +21,7 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/tone": "^0.1.0",
+    "@strudel.cycles/tone": "^0.2.0",
    "tone": "^14.7.77",
    "webmidi": "^2.5.2"
  }
@@ -8,6 +8,7 @@ This program is free software: you can redistribute it and/or modify it under th
 // a sequence = a serie of elements placed between quotes
 // a stack = a serie of vertically aligned slices sharing the same overall length
 // a slice = a serie of horizontally aligned elements
+// a choose = a serie of elements, one of which is chosen at random


 {
@@ -81,17 +82,18 @@ DIGIT  = [0-9]
 // ------------------ delimiters ---------------------------

 ws "whitespace" = [ \n\r\t]*
-comma = ws "," ws;
+comma = ws "," ws
+pipe = ws "|" ws
 quote = '"' / "'"

 // ------------------ steps and cycles ---------------------------

 // single step definition (e.g bd)
-step_char =  [0-9a-zA-Z~] / "-" / "#" / "." / "^" / "_"
+step_char =  [0-9a-zA-Z~] / "-" / "#" / "." / "^" / "_" / ":"
 step = ws chars:step_char+ ws { return chars.join("") }

 // define a sub cycle e.g. [1 2, 3 [4]]
-sub_cycle = ws  "[" ws s:stack ws "]" ws { return s}
+sub_cycle = ws  "[" ws s:stack_or_choose ws "]" ws { return s}

 // define a timeline e.g <1 3 [3 5]>. We simply defer to a stack and change the alignement
 timeline = ws "<" ws sc:single_cycle ws ">" ws
@@ -102,7 +104,7 @@ slice = step / sub_cycle  / timeline

 // slice modifier affects the timing/size of a slice (e.g. [a b c]@3)
 // at this point, we assume we can represent them as regular sequence operators
-slice_modifier = slice_weight / slice_bjorklund / slice_slow / slice_fast / slice_fixed_step / slice_replicate
+slice_modifier = slice_weight / slice_bjorklund / slice_slow / slice_fast / slice_fixed_step / slice_replicate / slice_degrade

 slice_weight =  "@" a:number
  { return { weight: a} }
@@ -122,6 +124,9 @@ slice_fast = "*"a:number
 slice_fixed_step = "%"a:number
  { return { operator : { type_: "fixed-step", arguments_ :{ amount:a } } } }

+slice_degrade = "?"a:number?
+  { return { operator : { type_: "degradeBy", arguments_ :{ amount:(a? a : 0.5) } } } }
+
 // a slice with an modifier applied i.e [bd@4 sd@3]@2 hh]
 slice_with_modifier = s:slice o:slice_modifier?
  { return new ElementStub(s, o);}
@@ -132,14 +137,22 @@ single_cycle = s:(slice_with_modifier)+
  { return new PatternStub(s,"h"); }

 // a stack is a serie of vertically aligned single cycles, separated by a comma
+stack_tail = tail:(comma @single_cycle)+
+  { return { alignment: 'v', list: tail }; }
+
+// a choose is a serie of pipe-separated single cycles, one of which is chosen
+// at random each time through the pattern
+choose_tail = tail:(pipe @single_cycle)+
+  { return { alignment: 'r', list: tail }; }
+
 // if the stack contains only one element, we don't create a stack but return the
 // underlying element
-stack = c:single_cycle cs:(comma v:single_cycle { return v})*
-  { if (cs.length == 0 && c instanceof Object) { return c;} else { cs.unshift(c); return new PatternStub(cs,"v");}  }
+stack_or_choose = head:single_cycle tail:(stack_tail / choose_tail)?
+  { if (tail && tail.list.length > 0) { return new PatternStub([head, ...tail.list], tail.alignment); } else { return head; } }

 // a sequence is a quoted stack
-sequence = ws quote s:stack quote
-  { return s; }
+sequence = ws quote sc:stack_or_choose quote
+  { return sc; }

 // ------------------ operators ---------------------------

@@ -10,6 +10,13 @@ import { addMiniLocations } from '@strudel.cycles/eval/shapeshifter.mjs';

 const { pure, Pattern, Fraction, stack, slowcat, sequence, timeCat, silence, reify } = strudel;

+var _seedState = 0;
+const randOffset = 0.0002;
+
+function _nextSeed() {
+  return _seedState++;
+}
+
 const applyOptions = (parent) => (pat, i) => {
  const ast = parent.source_[i];
  const options = ast.options_;
@@ -21,6 +28,8 @@ const applyOptions = (parent) => (pat, i) => {
        return reify(pat).fast(speed);
      case 'bjorklund':
        return pat.euclid(operator.arguments_.pulse, operator.arguments_.step, operator.arguments_.rotation);
+      case 'degradeBy':
+        return reify(pat)._degradeByWith(strudel.rand.early(randOffset * _nextSeed()).segment(1), operator.arguments_.amount);
      // TODO: case 'fixed-step': "%"
    }
    console.warn(`operator "${operator.type_}" not implemented`);
@@ -82,6 +91,9 @@ export function patternifyAST(ast) {
      if (alignment === 'v') {
        return stack(...children);
      }
+      if (alignment === 'r') {
+        return strudel.chooseInWith(strudel.rand.early(randOffset * _nextSeed()).segment(1), children);
+      }
      const weightedChildren = ast.source_.some((child) => !!child.options_?.weight);
      if (!weightedChildren && alignment === 't') {
        return slowcat(...children);
@@ -1,11 +1,12 @@
 {
  "name": "@strudel.cycles/mini",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Mini notation for strudel",
  "main": "index.mjs",
  "type": "module",
  "scripts": {
-    "test": "mocha --colors"
+    "test": "vitest run",
+    "build:parser": "peggy -o krill-parser.js --format es ./krill.pegjs"
  },
  "repository": {
    "type": "git",
@@ -25,8 +26,11 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/core": "^0.1.0",
-    "@strudel.cycles/eval": "^0.1.0",
-    "@strudel.cycles/tone": "^0.1.0"
+    "@strudel.cycles/core": "^0.2.0",
+    "@strudel.cycles/eval": "^0.2.0",
+    "@strudel.cycles/tone": "^0.2.0"
+  },
+  "devDependencies": {
+    "peggy": "^2.0.1"
  }
 }
@@ -4,50 +4,104 @@ 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 { strict as assert } from 'assert';
 import { mini } from '../mini.mjs';
 import '@strudel.cycles/core/euclid.mjs';
+import { describe, expect, it } from 'vitest';

 describe('mini', () => {
  const minV = (v) => mini(v)._firstCycleValues;
  const minS = (v) => mini(v)._showFirstCycle;
  it('supports single elements', () => {
-    assert.deepStrictEqual(minV('a'), ['a']);
+    expect(minV('a')).toEqual(['a']);
  });
  it('supports rest', () => {
-    assert.deepStrictEqual(minV('~'), []);
+    expect(minV('~')).toEqual([]);
  });
  it('supports cat', () => {
-    assert.deepStrictEqual(minS('a b'), ['a: 0 - 1/2', 'b: 1/2 - 1']);
-    assert.deepStrictEqual(minS('a b c'), ['a: 0 - 1/3', 'b: 1/3 - 2/3', 'c: 2/3 - 1']);
+    expect(minS('a b')).toEqual(['a: 0 - 1/2', 'b: 1/2 - 1']);
+    expect(minS('a b c')).toEqual(['a: 0 - 1/3', 'b: 1/3 - 2/3', 'c: 2/3 - 1']);
  });
  it('supports slowcat', () => {
-    assert.deepStrictEqual(minV('<a b>'), ['a']);
+    expect(minV('<a b>')).toEqual(['a']);
  });
  it('supports division', () => {
-    assert.deepStrictEqual(minS('a/2'), ['a: 0 - 2']);
-    assert.deepStrictEqual(minS('[c3 d3]/2'), ['c3: 0 - 1']);
+    expect(minS('a/2')).toEqual(['a: 0 - 2']);
+    expect(minS('[c3 d3]/2')).toEqual(['c3: 0 - 1']);
  });
  it('supports multiplication', () => {
-    assert.deepStrictEqual(minS('c3*2'), ['c3: 0 - 1/2', 'c3: 1/2 - 1']);
-    assert.deepStrictEqual(minV('[c3 d3]*2'), ['c3', 'd3', 'c3', 'd3']);
+    expect(minS('c3*2')).toEqual(['c3: 0 - 1/2', 'c3: 1/2 - 1']);
+    expect(minV('[c3 d3]*2')).toEqual(['c3', 'd3', 'c3', 'd3']);
  });
  it('supports brackets', () => {
-    assert.deepStrictEqual(minS('c3 [d3 e3]'), ['c3: 0 - 1/2', 'd3: 1/2 - 3/4', 'e3: 3/4 - 1']);
-    assert.deepStrictEqual(minS('c3 [d3 [e3 f3]]'), ['c3: 0 - 1/2', 'd3: 1/2 - 3/4', 'e3: 3/4 - 7/8', 'f3: 7/8 - 1']);
+    expect(minS('c3 [d3 e3]')).toEqual(['c3: 0 - 1/2', 'd3: 1/2 - 3/4', 'e3: 3/4 - 1']);
+    expect(minS('c3 [d3 [e3 f3]]')).toEqual(['c3: 0 - 1/2', 'd3: 1/2 - 3/4', 'e3: 3/4 - 7/8', 'f3: 7/8 - 1']);
  });
  it('supports commas', () => {
-    assert.deepStrictEqual(minS('c3,e3,g3'), ['c3: 0 - 1', 'e3: 0 - 1', 'g3: 0 - 1']);
-    assert.deepStrictEqual(minS('[c3,e3,g3] f3'), ['c3: 0 - 1/2', 'e3: 0 - 1/2', 'g3: 0 - 1/2', 'f3: 1/2 - 1']);
+    expect(minS('c3,e3,g3')).toEqual(['c3: 0 - 1', 'e3: 0 - 1', 'g3: 0 - 1']);
+    expect(minS('[c3,e3,g3] f3')).toEqual(['c3: 0 - 1/2', 'e3: 0 - 1/2', 'g3: 0 - 1/2', 'f3: 1/2 - 1']);
  });
  it('supports elongation', () => {
-    assert.deepStrictEqual(minS('a@3 b'), ['a: 0 - 3/4', 'b: 3/4 - 1']);
-    assert.deepStrictEqual(minS('a@2 b@3'), ['a: 0 - 2/5', 'b: 2/5 - 1']);
+    expect(minS('a@3 b')).toEqual(['a: 0 - 3/4', 'b: 3/4 - 1']);
+    expect(minS('a@2 b@3')).toEqual(['a: 0 - 2/5', 'b: 2/5 - 1']);
  });
  it('supports replication', () => {
-    assert.deepStrictEqual(minS('a!3 b'), ['a: 0 - 1/4', 'a: 1/4 - 1/2', 'a: 1/2 - 3/4', 'b: 3/4 - 1']);
+    expect(minS('a!3 b')).toEqual(['a: 0 - 1/4', 'a: 1/4 - 1/2', 'a: 1/2 - 3/4', 'b: 3/4 - 1']);
  });
  it('supports euclidean rhythms', () => {
-    assert.deepStrictEqual(minS('a(3, 8)'), ['a: 0 - 1/8', 'a: 3/8 - 1/2', 'a: 3/4 - 7/8']);
+    expect(minS('a(3, 8)')).toEqual(['a: 0 - 1/8', 'a: 3/8 - 1/2', 'a: 3/4 - 7/8']);
+  });
+  it('supports the ? operator', () => {
+    expect(
+      mini('a?')
+        .queryArc(0, 20)
+        .map((hap) => hap.whole.begin),
+    ).toEqual(
+      mini('a')
+        .degradeBy(0.5)
+        .queryArc(0, 20)
+        .map((hap) => hap.whole.begin),
+    );
+  });
+  // testing things that involve pseudo-randomness, so there's a probability we could fail by chance.
+  // these next few tests work with the current PRNG, and are intended to succeed with p > 0.99 even if the PRNG changes
+  //   (as long as the PRNG has a relatively-uniform distribution of values)
+  it('supports degradeBy with default of 50%', () => {
+    const haps = mini('a?').queryArc(0, 1000);
+    expect(459 <= haps.length && haps.length <= 541).toBe(true);
+    // 'Number of elements did not fall in 99% confidence interval for binomial with p=0.5',
+  });
+  it('supports degradeBy with an argument', () => {
+    const haps = mini('a?0.8').queryArc(0, 1000);
+    expect(haps.length > 0).toBe(true);
+    // 'Should have had at least one element when degradeBy was set at 0.8');
+    expect(haps.length < 230).toBe(true);
+    // 'Had too many cycles remaining after degradeBy 0.8');
+  });
+  it('supports the random choice operator ("|") with nesting', () => {
+    const numCycles = 900;
+    const haps = mini('a | [b | c] | [d | e | f]').queryArc(0, numCycles);
+    // Should have about 1/3 a, 1/6 each of b | c, and 1/9 each of d | e | f.
+    // Evaluating this distribution with a chi-squared test.
+    // Note: this just evaluates the overall distribution, not things like correlation/runs of values
+    const observed = haps.reduce((acc, hap) => {
+      acc[hap.value] = (acc[hap.value] || 0) + 1;
+      return acc;
+    }, {});
+    const expected = {
+      a: numCycles / 3,
+      b: numCycles / 6,
+      c: numCycles / 6,
+      d: numCycles / 9,
+      e: numCycles / 9,
+      f: numCycles / 9,
+    };
+    let chisq = -numCycles;
+    for (let k in expected) {
+      chisq += (observed[k] * observed[k]) / expected[k];
+    }
+    // 15.086 is the chisq for 5 degrees of freedom at 99%, so for 99% of uniformly-distributed
+    //  PRNG, this test should succeed
+    expect(chisq <= 15.086).toBe(true);
+    // assert(chisq <= 15.086, chisq + ' was expected to be less than 15.086 under chi-squared test');
  });
 });
@@ -12,17 +12,27 @@ comm.open();
 const latency = 0.1;
 let startedAt = -1;

+/**
+ *
+ * Sends each hap as an OSC message, which can be picked up by SuperCollider or any other OSC-enabled software.
+ *
+ * @name osc
+ * @memberof Pattern
+ * @returns Pattern
+ */
 Pattern.prototype.osc = function () {
  return this._withHap((hap) => {
-    const onTrigger = (time, hap, currentTime, cps, cycle, delta) => {
+    const onTrigger = (time, hap, currentTime, cps) => {
+      const cycle = hap.wholeOrPart().begin.valueOf();
+      const delta = hap.duration.valueOf();
      // time should be audio time of onset
      // currentTime should be current time of audio context (slightly before time)
      if (startedAt < 0) {
-        startedAt = Date.now() - (currentTime * 1000);
+        startedAt = Date.now() - currentTime * 1000;
      }
-      const controls = Object.assign({}, { cps: cps, cycle: cycle, delta: delta }, hap.value);
+      const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
      const keyvals = Object.entries(controls).flat();
-      const ts = Math.floor(startedAt + ((time + latency) * 1000));
+      const ts = Math.floor(startedAt + (time + latency) * 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
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/osc",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/osc",
-			"version": "0.0.1",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.0",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"osc-js": "^2.3.2"
 			}
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/osc",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "description": "OSC messaging for strudel",
  "main": "osc.mjs",
  "scripts": {
@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { CodeMirror as CodeMirror$1 } from 'react-codemirror6';
-import { EditorView, Decoration } from '@codemirror/view';
+import React, { useCallback, useState, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
+import _CodeMirror from '@uiw/react-codemirror';
+import { Decoration, EditorView } from '@codemirror/view';
 import { StateEffect, StateField } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
-import { HighlightStyle, tags } from '@codemirror/highlight';
+import { tags } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
 import { useInView } from 'react-hook-inview';
 import { evaluate } from '@strudel.cycles/eval';
 import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
@@ -11,139 +12,74 @@ import { Tone } from '@strudel.cycles/tone';
 import { TimeSpan, State } from '@strudel.cycles/core';
 import { WebMidi, enableWebMidi } from '@strudel.cycles/midi';

-/*
-  Credits for color palette:
-
-  Author:     Mattia Astorino (http://github.com/equinusocio)
-  Website:    https://material-theme.site/
-*/
-
-const ivory = '#abb2bf',
-  stone = '#7d8799', // Brightened compared to original to increase contrast
-  invalid = '#ffffff',
-  darkBackground = '#21252b',
-  highlightBackground = 'rgba(0, 0, 0, 0.5)',
-  // background = '#292d3e',
-  background = 'transparent',
-  tooltipBackground = '#353a42',
-  selection = 'rgba(128, 203, 196, 0.2)',
-  cursor = '#ffcc00';
-
-/// The editor theme styles for Material Palenight.
-const materialPalenightTheme = EditorView.theme(
-  {
-    // done
-    '&': {
-      color: '#ffffff',
-      backgroundColor: background,
-      fontSize: '15px',
-      'z-index': 11,
-    },
-
-    // done
-    '.cm-content': {
-      caretColor: cursor,
-      lineHeight: '22px',
-    },
-    '.cm-line': {
-      background: '#2C323699',
-    },
-    // done
-    '&.cm-focused .cm-cursor': {
-      borderLeftColor: cursor,
-    },
-
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-      backgroundColor: selection,
-    },
-
-    '.cm-panels': { backgroundColor: darkBackground, color: '#ffffff' },
-    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
-    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
-
-    // done, use onedarktheme
-    '.cm-searchMatch': {
-      backgroundColor: '#72a1ff59',
-      outline: '1px solid #457dff',
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-      backgroundColor: '#6199ff2f',
-    },
-
-    '.cm-activeLine': { backgroundColor: highlightBackground },
-    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
-    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-      backgroundColor: '#bad0f847',
-      outline: '1px solid #515a6b',
-    },
-
-    // done
-    '.cm-gutters': {
-      background: '#2C323699',
-      color: '#676e95',
-      border: 'none',
-    },
-
-    '.cm-activeLineGutter': {
-      backgroundColor: highlightBackground,
-    },
-
-    '.cm-foldPlaceholder': {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: '#ddd',
-    },
-
-    '.cm-tooltip': {
-      border: 'none',
-      backgroundColor: tooltipBackground,
-    },
-    '.cm-tooltip .cm-tooltip-arrow:before': {
-      borderTopColor: 'transparent',
-      borderBottomColor: 'transparent',
-    },
-    '.cm-tooltip .cm-tooltip-arrow:after': {
-      borderTopColor: tooltipBackground,
-      borderBottomColor: tooltipBackground,
-    },
-    '.cm-tooltip-autocomplete': {
-      '& > ul > li[aria-selected]': {
-        backgroundColor: highlightBackground,
-        color: ivory,
-      },
-    },
+var strudelTheme = createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#222',
+    foreground: '#75baff', // whats that?
+    caret: '#ffcc00',
+    selection: 'rgba(128, 203, 196, 0.5)',
+    selectionMatch: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: 'transparent',
+    // gutterForeground: '#8a919966',
+    gutterForeground: '#676e95',
  },
-  { dark: true },
-);
+  styles: [
+    { tag: tags.keyword, color: '#c792ea' },
+    { tag: tags.operator, color: '#89ddff' },
+    { tag: tags.special(tags.variableName), color: '#eeffff' },
+    { tag: tags.typeName, color: '#f07178' },
+    { tag: tags.atom, color: '#f78c6c' },
+    { tag: tags.number, color: '#ff5370' },
+    { tag: tags.definition(tags.variableName), color: '#82aaff' },
+    { tag: tags.string, color: '#c3e88d' },
+    { tag: tags.special(tags.string), color: '#f07178' },
+    { tag: tags.comment, color: '#7d8799' },
+    { tag: tags.variableName, color: '#f07178' },
+    { tag: tags.tagName, color: '#ff5370' },
+    { tag: tags.bracket, color: '#a2a1a4' },
+    { tag: tags.meta, color: '#ffcb6b' },
+    { tag: tags.attributeName, color: '#c792ea' },
+    { tag: tags.propertyName, color: '#c792ea' },
+    { tag: tags.className, color: '#decb6b' },
+    { tag: tags.invalid, color: '#ffffff' },
+  ],
+});

-/// The highlighting style for code in the Material Palenight theme.
-const materialPalenightHighlightStyle = HighlightStyle.define([
-  { tag: tags.keyword, color: '#c792ea' },
-  { tag: tags.operator, color: '#89ddff' },
-  { tag: tags.special(tags.variableName), color: '#eeffff' },
-  { tag: tags.typeName, color: '#f07178' },
-  { tag: tags.atom, color: '#f78c6c' },
-  { tag: tags.number, color: '#ff5370' },
-  { tag: tags.definition(tags.variableName), color: '#82aaff' },
-  { tag: tags.string, color: '#c3e88d' },
-  { tag: tags.special(tags.string), color: '#f07178' },
-  { tag: tags.comment, color: stone },
-  { tag: tags.variableName, color: '#f07178' },
-  { tag: tags.tagName, color: '#ff5370' },
-  { tag: tags.bracket, color: '#a2a1a4' },
-  { tag: tags.meta, color: '#ffcb6b' },
-  { tag: tags.attributeName, color: '#c792ea' },
-  { tag: tags.propertyName, color: '#c792ea' },
-  { tag: tags.className, color: '#decb6b' },
-  { tag: tags.invalid, color: invalid },
-]);
-
-/// Extension to enable the Material Palenight theme (both the editor theme and
-/// the highlight style).
-// : Extension
-const materialPalenight = [materialPalenightTheme, materialPalenightHighlightStyle];
+var style = '';

+const setFlash = StateEffect.define();
+const flashField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(flash2, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setFlash)) {
+          if (e.value) {
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            flash2 = Decoration.set([mark.range(0, tr.newDoc.length)]);
+          } else {
+            flash2 = Decoration.set([]);
+          }
+        }
+      }
+      return flash2;
+    } catch (err) {
+      console.warn("flash error", err);
+      return flash2;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f)
+});
+const flash = (view) => {
+  view.dispatch({ effects: setFlash.of(true) });
+  setTimeout(() => {
+    view.dispatch({ effects: setFlash.of(false) });
+  }, 200);
+};
 const setHighlights = StateEffect.define();
 const highlightField = StateField.define({
  create() {
@@ -153,41 +89,57 @@ const highlightField = StateField.define({
    try {
      for (let e of tr.effects) {
        if (e.is(setHighlights)) {
-          highlights = Decoration.set(e.value.flatMap((hap) => (hap.context.locations || []).map(({ start, end }) => {
-            const color = hap.context.color || "#FFCA28";
-            let from = tr.newDoc.line(start.line).from + start.column;
-            let to = tr.newDoc.line(end.line).from + end.column;
-            const l = tr.newDoc.length;
-            if (from > l || to > l) {
-              return;
-            }
-            const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
-            return mark.range(from, to);
-          })).filter(Boolean), true);
+          const marks = e.value.map(
+            (hap) => (hap.context.locations || []).map(({ start, end }) => {
+              const color = hap.context.color || "#FFCA28";
+              let from = tr.newDoc.line(start.line).from + start.column;
+              let to = tr.newDoc.line(end.line).from + end.column;
+              const l = tr.newDoc.length;
+              if (from > l || to > l) {
+                return;
+              }
+              const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
+              return mark.range(from, to);
+            })
+          ).flat().filter(Boolean) || [];
+          highlights = Decoration.set(marks, true);
        }
      }
      return highlights;
    } catch (err) {
-      return highlights;
+      return Decoration.set([]);
    }
  },
  provide: (f) => EditorView.decorations.from(f)
 });
-function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CodeMirror$1, {
-    onViewChange: onViewChanged,
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      flex: "1 0 auto"
+const extensions = [javascript(), strudelTheme, highlightField, flashField];
+function CodeMirror({ value, onChange, onViewChanged, onSelectionChange, options, editorDidMount }) {
+  const handleOnChange = useCallback(
+    (value2) => {
+      onChange?.(value2);
    },
+    [onChange]
+  );
+  const handleOnCreateEditor = useCallback(
+    (view) => {
+      onViewChanged?.(view);
+    },
+    [onViewChanged]
+  );
+  const handleOnUpdate = useCallback(
+    (viewUpdate) => {
+      if (viewUpdate.selectionSet && onSelectionChange) {
+        onSelectionChange?.(viewUpdate.state.selection);
+      }
+    },
+    [onSelectionChange]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(_CodeMirror, {
    value,
-    onChange,
-    extensions: [
-      javascript(),
-      materialPalenight,
-      highlightField
-    ]
+    onChange: handleOnChange,
+    onCreateEditor: handleOnCreateEditor,
+    onUpdate: handleOnUpdate,
+    extensions
  }));
 }

@@ -318,6 +270,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
    }
  }, [activeCode, onDrawProp]);

+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
  // cycle hook to control scheduling
  const cycle = useCycle({
    onDraw,
@@ -339,14 +293,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
            /* console.warn('no instrument chosen', event);
          throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
          } else {
-            onTrigger(
-              time,
-              event,
-              currentTime,
-              1 /* cps */,
-              event.wholeOrPart().begin.valueOf(),
-              event.duration.valueOf(),
-            );
+            onTrigger(time, event, currentTime, 1 /* cps */);
          }
        } catch (err) {
          console.warn(err);
@@ -369,7 +316,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
      },
      [pattern],
    ),
-    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), []),
+    onSchedule: useCallback((_events, cycle) => logCycle(_events), []),
    ready: !!pattern && !!activeCode,
  });

@@ -423,6 +370,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
  };

  return {
+    hideHeader,
+    hideConsole,
    pending,
    code,
    setCode,
@@ -464,7 +413,10 @@ function useHighlighting({ view, pattern, active }) {
        function updateHighlights() {
          try {
            const audioTime = Tone.getTransport().seconds;
-            const span = [lastEnd || audioTime, audioTime + 1 / 60];
+            // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
+            // see https://github.com/tidalcycles/strudel/issues/108
+            const begin = Math.max(lastEnd || audioTime, audioTime - 1 / 10);
+            const span = [begin, audioTime + 1 / 60];
            lastEnd = audioTime + 1 / 60;
            highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
            const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
@@ -490,13 +442,13 @@ function useHighlighting({ view, pattern, active }) {

 var tailwind = '';

-const container = "_container_10e1g_1";
-const header = "_header_10e1g_5";
-const buttons = "_buttons_10e1g_9";
-const button = "_button_10e1g_9";
-const buttonDisabled = "_buttonDisabled_10e1g_17";
-const error = "_error_10e1g_21";
-const body = "_body_10e1g_25";
+const container = "_container_3i85k_1";
+const header = "_header_3i85k_5";
+const buttons = "_buttons_3i85k_9";
+const button = "_button_3i85k_9";
+const buttonDisabled = "_buttonDisabled_3i85k_17";
+const error = "_error_3i85k_21";
+const body = "_body_3i85k_25";
 var styles = {
 	container: container,
 	header: header,
@@ -532,12 +484,16 @@ function Icon({ type }) {
  }[type]);
 }

-function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
+function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } = useRepl({
    tune,
    defaultSynth,
-    autolink: false
+    autolink: false,
+    onEvent
  });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
  const [view, setView] = useState();
  const [ref, isVisible] = useInView({
    threshold: 0.01
@@ -549,7 +505,25 @@ function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
    }
    return isVisible || wasVisible.current;
  }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes("strudel disable-highlighting") });
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === "Enter") {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === "Period") {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener("keydown", handleKeyPress, true);
+      return () => window.removeEventListener("keydown", handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
  return /* @__PURE__ */ React.createElement("div", {
    className: styles.container,
    ref
@@ -617,4 +591,4 @@ function useWebMidi(props) {
  return { loading, outputs, outputByName };
 }

-export { CodeMirror, MiniRepl, cx, useCycle, useHighlighting, usePostMessage, useRepl, useWebMidi };
+export { CodeMirror, MiniRepl, cx, flash, useCycle, useHighlighting, usePostMessage, useRepl, useWebMidi };
@@ -1 +1 @@
-*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_10e1g_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(68 76 87 / var(--tw-bg-opacity))}._header_10e1g_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_10e1g_9{display:flex}._button_10e1g_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_10e1g_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_10e1g_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_10e1g_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_10e1g_25{position:relative;overflow:auto}
+.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:16px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto}
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "React components for strudel",
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.js",
@@ -37,11 +37,12 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@codemirror/lang-javascript": "^0.19.0",
-    "@strudel.cycles/core": "^0.1.0",
-    "@strudel.cycles/eval": "^0.1.0",
-    "@strudel.cycles/tone": "^0.1.0",
-    "react-codemirror6": "^1.1.0",
+    "@codemirror/lang-javascript": "^6.0.2",
+    "@strudel.cycles/core": "^0.2.0",
+    "@strudel.cycles/eval": "^0.2.0",
+    "@strudel.cycles/tone": "^0.2.0",
+    "@uiw/codemirror-themes": "^4.11.4",
+    "@uiw/react-codemirror": "^4.11.4",
    "react-hook-inview": "^4.5.0"
  },
  "peerDependencies": {
@@ -1,11 +1,26 @@
 import React from 'react';
 import { MiniRepl } from './components/MiniRepl';
 import 'tailwindcss/tailwind.css';
+import { Tone, getDefaultSynth } from '@strudel.cycles/tone';
+import { evalScope } from '@strudel.cycles/eval';
+
+const defaultSynth = getDefaultSynth();
+
+evalScope(
+  Tone,
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/tone'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/midi'),
+  import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+);

 function App() {
  return (
    <div>
-      <MiniRepl tune={`"c3"`} />
+      <MiniRepl tune={`"c3"`} defaultSynth={defaultSynth} />
    </div>
  );
 }
@@ -1,11 +1,44 @@
 import React from 'react';
-import { CodeMirror as _CodeMirror } from 'react-codemirror6';
-// import { CodeMirrorLite as _CodeMirror } from 'react-codemirror6/dist/lite';
+import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
-// import { materialPalenight } from 'codemirror6-themes';
-import { materialPalenight } from '../themes/material-palenight';
+import strudelTheme from '../themes/strudel-theme';
+import './style.css';
+import { useCallback } from 'react';
+
+export const setFlash = StateEffect.define();
+const flashField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(flash, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setFlash)) {
+          if (e.value) {
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
+          } else {
+            flash = Decoration.set([]);
+          }
+        }
+      }
+      return flash;
+    } catch (err) {
+      console.warn('flash error', err);
+      return flash;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+export const flash = (view) => {
+  view.dispatch({ effects: setFlash.of(true) });
+  setTimeout(() => {
+    view.dispatch({ effects: setFlash.of(false) });
+  }, 200);
+};

 export const setHighlights = StateEffect.define();
 const highlightField = StateField.define({
@@ -16,9 +49,9 @@ const highlightField = StateField.define({
    try {
      for (let e of tr.effects) {
        if (e.is(setHighlights)) {
-          highlights = Decoration.set(
+          const marks =
            e.value
-              .flatMap((hap) =>
+              .map((hap) =>
                (hap.context.locations || []).map(({ start, end }) => {
                  const color = hap.context.color || '#FFCA28';
                  let from = tr.newDoc.line(start.line).from + start.column;
@@ -27,42 +60,56 @@ const highlightField = StateField.define({
                  if (from > l || to > l) {
                    return; // dont mark outside of range, as it will throw an error
                  }
-                  const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
                  return mark.range(from, to);
                }),
              )
-              .filter(Boolean),
-            true,
-          );
+              .flat()
+              .filter(Boolean) || [];
+          highlights = Decoration.set(marks, true);
        }
      }
      return highlights;
    } catch (err) {
      // console.warn('highlighting error', err);
-      return highlights;
+      return Decoration.set([]);
    }
  },
  provide: (f) => EditorView.decorations.from(f),
 });

-export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
+const extensions = [javascript(), strudelTheme, highlightField, flashField];
+
+export default function CodeMirror({ value, onChange, onViewChanged, onSelectionChange, options, editorDidMount }) {
+  const handleOnChange = useCallback(
+    (value) => {
+      onChange?.(value);
+    },
+    [onChange],
+  );
+  const handleOnCreateEditor = useCallback(
+    (view) => {
+      onViewChanged?.(view);
+    },
+    [onViewChanged],
+  );
+  const handleOnUpdate = useCallback(
+    (viewUpdate) => {
+      if (viewUpdate.selectionSet && onSelectionChange) {
+        onSelectionChange?.(viewUpdate.state.selection);
+      }
+    },
+    [onSelectionChange],
+  );
  return (
    <>
      <_CodeMirror
-        onViewChange={onViewChanged}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flex: '1 0 auto',
-        }}
        value={value}
-        onChange={onChange}
-        extensions={[
-          javascript(),
-          materialPalenight,
-          highlightField,
-          // theme, language, ...
-        ]}
+        onChange={handleOnChange}
+        onCreateEditor={handleOnCreateEditor}
+        onUpdate={handleOnUpdate}
+        extensions={extensions}
      />
    </>
  );
@@ -1,19 +1,25 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import { useInView } from 'react-hook-inview';
 import useRepl from '../hooks/useRepl.mjs';
 import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
-import CodeMirror6 from './CodeMirror6';
+import CodeMirror6, { flash } from './CodeMirror6';
 import 'tailwindcss/tailwind.css';
+import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';

-export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
-    tune,
-    defaultSynth,
-    autolink: false,
-  });
+export function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
+    useRepl({
+      tune,
+      defaultSynth,
+      autolink: false,
+      onEvent,
+    });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
  const [view, setView] = useState();
  const [ref, isVisible] = useInView({
    threshold: 0.01,
@@ -25,7 +31,28 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
    }
    return isVisible || wasVisible.current;
  }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });
+
+  // set active pattern on ctrl+enter
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === 'Enter') {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === 'Period') {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener('keydown', handleKeyPress, true);
+      return () => window.removeEventListener('keydown', handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
+
  return (
    <div className={styles.container} ref={ref}>
      <div className={styles.header}>
@@ -39,7 +66,7 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
        </div>
        {error && <div className={styles.error}>{error.message}</div>}
      </div>
-      <div className={styles.body} >
+      <div className={styles.body}>
        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
      </div>
    </div>
@@ -1,5 +1,5 @@
 .container {
-  @apply sc-rounded-md sc-overflow-hidden sc-bg-[#444C57];
+  @apply sc-rounded-md sc-overflow-hidden sc-bg-[#222222];
 }

 .header {
@@ -0,0 +1,14 @@
+.cm-editor {
+  background-color: transparent !important;
+  height: 100%;
+  z-index: 11;
+  font-size: 16px;
+}
+
+.cm-theme-light {
+  width: 100%;
+}
+
+.cm-line > * {
+  background: #00000095;
+}
@@ -14,7 +14,10 @@ function useHighlighting({ view, pattern, active }) {
        function updateHighlights() {
          try {
            const audioTime = Tone.getTransport().seconds;
-            const span = [lastEnd || audioTime, audioTime + 1 / 60];
+            // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
+            // see https://github.com/tidalcycles/strudel/issues/108
+            const begin = Math.max(lastEnd || audioTime, audioTime - 1 / 10);
+            const span = [begin, audioTime + 1 / 60];
            lastEnd = audioTime + 1 / 60;
            highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
            const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
@@ -36,6 +36,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
    }
  }, [activeCode, onDrawProp]);

+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
  // cycle hook to control scheduling
  const cycle = useCycle({
    onDraw,
@@ -57,14 +59,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
            /* console.warn('no instrument chosen', event);
          throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
          } else {
-            onTrigger(
-              time,
-              event,
-              currentTime,
-              1 /* cps */,
-              event.wholeOrPart().begin.valueOf(),
-              event.duration.valueOf(),
-            );
+            onTrigger(time, event, currentTime, 1 /* cps */);
          }
        } catch (err) {
          console.warn(err);
@@ -143,6 +138,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
  };

  return {
+    hideHeader,
+    hideConsole,
    pending,
    code,
    setCode,
@@ -1,6 +1,6 @@
 // import 'tailwindcss/tailwind.css';

-export { default as CodeMirror } from './components/CodeMirror6';
+export { default as CodeMirror, flash } from './components/CodeMirror6';
 export * from './components/MiniRepl';
 export { default as useCycle } from './hooks/useCycle';
 export { default as useHighlighting } from './hooks/useHighlighting';
@@ -1,135 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { HighlightStyle, tags as t } from '@codemirror/highlight';
-
-/*
-  Credits for color palette:
-
-  Author:     Mattia Astorino (http://github.com/equinusocio)
-  Website:    https://material-theme.site/
-*/
-
-const ivory = '#abb2bf',
-  stone = '#7d8799', // Brightened compared to original to increase contrast
-  invalid = '#ffffff',
-  darkBackground = '#21252b',
-  highlightBackground = 'rgba(0, 0, 0, 0.5)',
-  // background = '#292d3e',
-  background = 'transparent',
-  tooltipBackground = '#353a42',
-  selection = 'rgba(128, 203, 196, 0.2)',
-  cursor = '#ffcc00';
-
-/// The editor theme styles for Material Palenight.
-export const materialPalenightTheme = EditorView.theme(
-  {
-    // done
-    '&': {
-      color: '#ffffff',
-      backgroundColor: background,
-      fontSize: '15px',
-      'z-index': 11,
-    },
-
-    // done
-    '.cm-content': {
-      caretColor: cursor,
-      lineHeight: '22px',
-    },
-    '.cm-line': {
-      background: '#2C323699',
-    },
-    // done
-    '&.cm-focused .cm-cursor': {
-      borderLeftColor: cursor,
-    },
-
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-      backgroundColor: selection,
-    },
-
-    '.cm-panels': { backgroundColor: darkBackground, color: '#ffffff' },
-    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
-    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
-
-    // done, use onedarktheme
-    '.cm-searchMatch': {
-      backgroundColor: '#72a1ff59',
-      outline: '1px solid #457dff',
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-      backgroundColor: '#6199ff2f',
-    },
-
-    '.cm-activeLine': { backgroundColor: highlightBackground },
-    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
-    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-      backgroundColor: '#bad0f847',
-      outline: '1px solid #515a6b',
-    },
-
-    // done
-    '.cm-gutters': {
-      background: '#2C323699',
-      color: '#676e95',
-      border: 'none',
-    },
-
-    '.cm-activeLineGutter': {
-      backgroundColor: highlightBackground,
-    },
-
-    '.cm-foldPlaceholder': {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: '#ddd',
-    },
-
-    '.cm-tooltip': {
-      border: 'none',
-      backgroundColor: tooltipBackground,
-    },
-    '.cm-tooltip .cm-tooltip-arrow:before': {
-      borderTopColor: 'transparent',
-      borderBottomColor: 'transparent',
-    },
-    '.cm-tooltip .cm-tooltip-arrow:after': {
-      borderTopColor: tooltipBackground,
-      borderBottomColor: tooltipBackground,
-    },
-    '.cm-tooltip-autocomplete': {
-      '& > ul > li[aria-selected]': {
-        backgroundColor: highlightBackground,
-        color: ivory,
-      },
-    },
-  },
-  { dark: true },
-);
-
-/// The highlighting style for code in the Material Palenight theme.
-export const materialPalenightHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: '#c792ea' },
-  { tag: t.operator, color: '#89ddff' },
-  { tag: t.special(t.variableName), color: '#eeffff' },
-  { tag: t.typeName, color: '#f07178' },
-  { tag: t.atom, color: '#f78c6c' },
-  { tag: t.number, color: '#ff5370' },
-  { tag: t.definition(t.variableName), color: '#82aaff' },
-  { tag: t.string, color: '#c3e88d' },
-  { tag: t.special(t.string), color: '#f07178' },
-  { tag: t.comment, color: stone },
-  { tag: t.variableName, color: '#f07178' },
-  { tag: t.tagName, color: '#ff5370' },
-  { tag: t.bracket, color: '#a2a1a4' },
-  { tag: t.meta, color: '#ffcb6b' },
-  { tag: t.attributeName, color: '#c792ea' },
-  { tag: t.propertyName, color: '#c792ea' },
-  { tag: t.className, color: '#decb6b' },
-  { tag: t.invalid, color: invalid },
-]);
-
-/// Extension to enable the Material Palenight theme (both the editor theme and
-/// the highlight style).
-// : Extension
-export const materialPalenight = [materialPalenightTheme, materialPalenightHighlightStyle];
@@ -0,0 +1,36 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#222',
+    foreground: '#75baff', // whats that?
+    caret: '#ffcc00',
+    selection: 'rgba(128, 203, 196, 0.5)',
+    selectionMatch: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: 'transparent',
+    // gutterForeground: '#8a919966',
+    gutterForeground: '#676e95',
+  },
+  styles: [
+    { tag: t.keyword, color: '#c792ea' },
+    { tag: t.operator, color: '#89ddff' },
+    { tag: t.special(t.variableName), color: '#eeffff' },
+    { tag: t.typeName, color: '#f07178' },
+    { tag: t.atom, color: '#f78c6c' },
+    { tag: t.number, color: '#ff5370' },
+    { tag: t.definition(t.variableName), color: '#82aaff' },
+    { tag: t.string, color: '#c3e88d' },
+    { tag: t.special(t.string), color: '#f07178' },
+    { tag: t.comment, color: '#7d8799' },
+    { tag: t.variableName, color: '#f07178' },
+    { tag: t.tagName, color: '#ff5370' },
+    { tag: t.bracket, color: '#a2a1a4' },
+    { tag: t.meta, color: '#ffcb6b' },
+    { tag: t.attributeName, color: '#c792ea' },
+    { tag: t.propertyName, color: '#c792ea' },
+    { tag: t.className, color: '#decb6b' },
+    { tag: t.invalid, color: '#ffffff' },
+  ],
+});
@@ -33,8 +33,12 @@ export default defineConfig({
        '@strudel.cycles/serial',
        '@strudel.cycles/webaudio',
        '@codemirror/view',
-        '@codemirror/highlight',
-        '@codemirror/state'
+        '@codemirror/lang-javascript',
+        '@codemirror/state',
+        '@codemirror/commands',
+        '@lezer/highlight',
+        '@codemirror/language',
+        '@uiw/codemirror-themes'
      ],
    },
    target: 'esnext',
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/serial",
-  "version": "0.1.0",
+  "version": "0.1.3",
  "description": "Webserial API for strudel",
  "main": "serial.mjs",
  "repository": {
@@ -9,7 +9,7 @@ import { Pattern, isPattern } from '@strudel.cycles/core';
 var serialWriter;
 var choosing = false;

-export async function getWriter(br=115200) {
+export async function getWriter(br=38400) {
  if (choosing) {
    return;
  }
@@ -34,8 +34,7 @@ export async function getWriter(br=115200) {

 const latency = 0.1;

-// Pattern.prototype.midi = function (output: string | number, channel = 1) {
-Pattern.prototype.serial = async function (...args) {
+Pattern.prototype.serial = function (...args) {
  return this._withHap((hap) => {
    if (!serialWriter) {
      getWriter(...args);
@@ -43,8 +42,27 @@ Pattern.prototype.serial = async function (...args) {
    const onTrigger = (time, hap, currentTime) => {
      var message = "";
      if (typeof hap.value === 'object') {
-        for (const [key, val] of Object.entries(hap.value).flat()) {
-          message += `${key}:${val};`
+        if ('action' in hap.value) {
+          message += hap.value['action'] + '(';
+          var first = true;
+          for (const [key, val] of Object.entries(hap.value)) {
+            if (key === 'action') {
+              continue;
+            }
+            if (first) {
+              first = false;
+            }
+            else {
+              message +=',';
+            }
+            message += `${key}:${val}`
+          }
+          message += ')';
+        }
+        else {
+          for (const [key, val] of Object.entries(hap.value)) {
+            message += `${key}:${val};`
+          }
        }
      }
      else {
@@ -0,0 +1,13 @@
+// this script converts a soundfont into a json file, it has not been not used yet
+import fetch from 'node-fetch';
+
+const name = '0000_JCLive';
+
+const js = await fetch(`https://felixroos.github.io/webaudiofontdata/sound/${name}_sf2_file.js`).then((res) =>
+  res.text(),
+);
+// console.log(js);
+
+let [_, data] = js.split('_sf2_file=');
+data = eval(data);
+console.log(JSON.stringify(data));
@@ -0,0 +1,114 @@
+let loadCache = {};
+async function loadFont(name) {
+  if (loadCache[name]) {
+    return loadCache[name];
+  }
+  const load = async () => {
+    // TODO: make soundfont source configurable
+    const url = `https://felixroos.github.io/webaudiofontdata/sound/${name}.js`;
+    console.log('load font', name, url);
+    const preset = await fetch(url).then((res) => res.text());
+    let [_, data] = preset.split('={');
+    return eval('{' + data);
+  };
+  loadCache[name] = load();
+  return loadCache[name];
+}
+
+export async function getFontBufferSource(name, pitch, ac) {
+  if (typeof pitch === 'string') {
+    pitch = toMidi(pitch);
+  }
+  const { buffer, zone } = await getFontPitch(name, pitch, ac);
+  const src = ac.createBufferSource();
+  src.buffer = buffer;
+  const baseDetune = zone.originalPitch - 100.0 * zone.coarseTune - zone.fineTune;
+  const playbackRate = 1.0 * Math.pow(2, (100.0 * pitch - baseDetune) / 1200.0);
+  // src detune?
+  src.playbackRate.value = playbackRate;
+  const loop = zone.loopStart > 1 && zone.loopStart < zone.loopEnd;
+  if (!loop) {
+    /* const waveDuration = duration + this.afterTime;
+          if (waveDuration > zone.buffer.duration / playbackRate) {
+            waveDuration = zone.buffer.duration / playbackRate;
+            // TODO: do sth with waveduration
+          } */
+  } else {
+    src.loop = true;
+    src.loopStart = zone.loopStart / zone.sampleRate;
+    src.loopEnd = zone.loopEnd / zone.sampleRate;
+    //+ (zone.delay ? zone.delay : 0);
+  }
+  return src;
+}
+
+let bufferCache = {};
+export async function getFontPitch(name, pitch, ac) {
+  const key = `${name}:::${pitch}`;
+  if (bufferCache[key]) {
+    return bufferCache[key];
+  }
+  // console.log('load buffer', key);
+  const load = async () => {
+    const preset = await loadFont(name);
+    if (!preset) {
+      throw new Error(`Could not load soundfont ${name}`);
+    }
+    const zone = findZone(preset, pitch);
+    if (!zone) {
+      throw new Error('no soundfont zone found for preset ', name, 'pitch', pitch);
+    }
+    const buffer = await getBuffer(zone, ac);
+    if (!buffer) {
+      throw new Error(`no soundfont buffer found for preset ${name}, pitch: ${pitch}`);
+    }
+    return { buffer, zone };
+  };
+  bufferCache[key] = load(); // dont await here to cache promise immediately!
+  return bufferCache[key];
+}
+
+function findZone(preset, pitch) {
+  return preset.find((zone) => {
+    return zone.keyRangeLow <= pitch && zone.keyRangeHigh + 1 >= pitch;
+  });
+}
+
+// promisified version of https://github.com/felixroos/webaudiofont/blob/c6f97249b60dcfafc20fca5bb381294a6b2f8f51/npm/dist/WebAudioFontPlayer.js#L740
+async function getBuffer(zone, audioContext) {
+  if (zone.sample) {
+    console.warn('zone.sample untested!');
+    const decoded = atob(zone.sample);
+    zone.buffer = audioContext.createBuffer(1, decoded.length / 2, zone.sampleRate);
+    const float32Array = zone.buffer.getChannelData(0);
+    let b1, b2, n;
+    for (var i = 0; i < decoded.length / 2; i++) {
+      b1 = decoded.charCodeAt(i * 2);
+      b2 = decoded.charCodeAt(i * 2 + 1);
+      if (b1 < 0) {
+        b1 = 256 + b1;
+      }
+      if (b2 < 0) {
+        b2 = 256 + b2;
+      }
+      n = b2 * 256 + b1;
+      if (n >= 65536 / 2) {
+        n = n - 65536;
+      }
+      float32Array[i] = n / 65536.0;
+    }
+  } else {
+    if (zone.file) {
+      const datalen = zone.file.length;
+      const arraybuffer = new ArrayBuffer(datalen);
+      const view = new Uint8Array(arraybuffer);
+      const decoded = atob(zone.file);
+      let b;
+      for (let i = 0; i < decoded.length; i++) {
+        b = decoded.charCodeAt(i);
+        view[i] = b;
+      }
+      return new Promise((resolve) => audioContext.decodeAudioData(arraybuffer, resolve));
+    }
+  }
+}
@@ -0,0 +1,6 @@
+import { getFontBufferSource } from './fontloader.mjs';
+import * as soundfontList from './list.mjs';
+import { startPresetNote } from 'sfumato';
+import { loadSoundfont } from './sfumato.mjs';
+
+export { loadSoundfont, startPresetNote, getFontBufferSource, soundfontList };
@@ -0,0 +1,301 @@
+{
+  "name": "@strudel.cycles/soundfonts",
+  "version": "0.2.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@strudel.cycles/soundfonts",
+      "version": "0.1.0",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "webaudiofont": "^3.0.1"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/glob": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
+    },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
+    "node_modules/marked": {
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
+      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/shiki": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
+      "integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
+      "dependencies": {
+        "jsonc-parser": "^3.0.0",
+        "vscode-oniguruma": "^1.6.1",
+        "vscode-textmate": "5.2.0"
+      }
+    },
+    "node_modules/typedoc": {
+      "version": "0.22.17",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.17.tgz",
+      "integrity": "sha512-h6+uXHVVCPDaANzjwzdsj9aePBjZiBTpiMpBBeyh1zcN2odVsDCNajz8zyKnixF93HJeGpl34j/70yoEE5BfNg==",
+      "dependencies": {
+        "glob": "^8.0.3",
+        "lunr": "^2.3.9",
+        "marked": "^4.0.16",
+        "minimatch": "^5.1.0",
+        "shiki": "^0.10.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 12.10.0"
+      },
+      "peerDependencies": {
+        "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x || 4.4.x || 4.5.x || 4.6.x || 4.7.x"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/vscode-oniguruma": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.6.2.tgz",
+      "integrity": "sha512-KH8+KKov5eS/9WhofZR8M8dMHWN2gTxjMsG4jd04YhpbPR91fUj7rYQ2/XjeHCJWbg7X++ApRIU9NUwM2vTvLA=="
+    },
+    "node_modules/vscode-textmate": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz",
+      "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
+    },
+    "node_modules/webaudiofont": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webaudiofont/-/webaudiofont-3.0.1.tgz",
+      "integrity": "sha512-PwqbR4OdvzbW8/TLTitSU/rw4mxMKyAGTKV42mePCgMoUGLJoQj8HDLWVqtNOpUZ0ghPNhNE6cRFEv6HFFEBQA==",
+      "dependencies": {
+        "typedoc": "^0.22.14"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    }
+  },
+  "dependencies": {
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "requires": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "glob": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
+    },
+    "lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
+    "marked": {
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
+      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA=="
+    },
+    "minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "requires": {
+        "brace-expansion": "^2.0.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "shiki": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
+      "integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
+      "requires": {
+        "jsonc-parser": "^3.0.0",
+        "vscode-oniguruma": "^1.6.1",
+        "vscode-textmate": "5.2.0"
+      }
+    },
+    "typedoc": {
+      "version": "0.22.17",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.17.tgz",
+      "integrity": "sha512-h6+uXHVVCPDaANzjwzdsj9aePBjZiBTpiMpBBeyh1zcN2odVsDCNajz8zyKnixF93HJeGpl34j/70yoEE5BfNg==",
+      "requires": {
+        "glob": "^8.0.3",
+        "lunr": "^2.3.9",
+        "marked": "^4.0.16",
+        "minimatch": "^5.1.0",
+        "shiki": "^0.10.1"
+      }
+    },
+    "typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "peer": true
+    },
+    "vscode-oniguruma": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.6.2.tgz",
+      "integrity": "sha512-KH8+KKov5eS/9WhofZR8M8dMHWN2gTxjMsG4jd04YhpbPR91fUj7rYQ2/XjeHCJWbg7X++ApRIU9NUwM2vTvLA=="
+    },
+    "vscode-textmate": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz",
+      "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
+    },
+    "webaudiofont": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webaudiofont/-/webaudiofont-3.0.1.tgz",
+      "integrity": "sha512-PwqbR4OdvzbW8/TLTitSU/rw4mxMKyAGTKV42mePCgMoUGLJoQj8HDLWVqtNOpUZ0ghPNhNE6cRFEv6HFFEBQA==",
+      "requires": {
+        "typedoc": "^0.22.14"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    }
+  }
+}
@@ -0,0 +1,33 @@
+{
+  "name": "@strudel.cycles/soundfonts",
+  "version": "0.2.0",
+  "description": "Soundsfont support for strudel",
+  "main": "index.mjs",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "tidalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "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.cycles/core": "^0.2.0",
+    "@strudel.cycles/webaudio": "^0.2.0",
+    "sfumato": "^0.1.2",
+    "soundfont2": "^0.4.0"
+  },
+  "devDependencies": {
+    "node-fetch": "^3.2.6"
+  }
+}
@@ -0,0 +1,24 @@
+import { Pattern } from '@strudel.cycles/core';
+import { loadSoundfont as _loadSoundfont, startPresetNote } from 'sfumato';
+
+Pattern.prototype.soundfont = function (sf, n = 0) {
+  return this.onTrigger((t, h, ct) => {
+    const ctx = getAudioContext();
+    const note = getPlayableNoteValue(h);
+    const preset = sf.presets[n % sf.presets.length];
+    const deadline = ctx.currentTime + t - ct;
+    const args = [ctx, preset, toMidi(note), deadline];
+    const stop = startPresetNote(...args);
+    stop(deadline + h.duration);
+  });
+};
+
+const soundfontCache = new Map();
+export function loadSoundfont(url) {
+  if (soundfontCache.get(url)) {
+    return soundfontCache.get(url);
+  }
+  const sf = _loadSoundfont(url);
+  soundfontCache.set(url, sf);
+  return sf;
+}
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/tonal",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/tonal",
-			"version": "0.0.3",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.1",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"@tonaljs/tonal": "^4.6.5",
 				"webmidi": "^3.0.15"
@@ -1,11 +1,11 @@
 {
  "name": "@strudel.cycles/tonal",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Tonal functions for strudel",
  "main": "index.mjs",
  "type": "module",
  "scripts": {
-    "test": "mocha --colors"
+    "test": "vitest run"
  },
  "repository": {
    "type": "git",
@@ -25,7 +25,7 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/core": "^0.1.0",
+    "@strudel.cycles/core": "^0.2.0",
    "@tonaljs/tonal": "^4.6.5",
    "webmidi": "^3.0.15"
  }
@@ -4,12 +4,14 @@ 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 { strict as assert } from 'assert';
+// import { strict as assert } from 'assert';
+
 import '../tonal.mjs'; // need to import this to add prototypes
 import { pure } from '@strudel.cycles/core';
+import { describe, it, expect } from 'vitest';

 describe('tonal', () => {
  it('Should run tonal functions ', () => {
-    assert.deepStrictEqual(pure('c3').scale('C major').scaleTranspose(1)._firstCycleValues, ['D3']);
+    expect(pure('c3').scale('C major').scaleTranspose(1)._firstCycleValues).toEqual(['D3']);
  });
 });
@@ -42,6 +42,38 @@ function scaleOffset(scale, offset, note) {
 }

 // Pattern.prototype._transpose = function (intervalOrSemitones: string | number) {
+/**
+ * Change the pitch of each value by the given amount. Expects numbers or note strings as values.
+ * The amount can be given as a number of semitones or as a string in interval short notation.
+ * If you don't care about enharmonic correctness, just use numbers. Otherwise, pass the interval of
+ * the form: ST where S is the degree number and T the type of interval with
+ *
+ * - M = major
+ * - m = minor
+ * - P = perfect
+ * - A = augmented
+ * - d = diminished
+ *
+ * Examples intervals:
+ *
+ * - 1P = unison
+ * - 3M = major third
+ * - 3m = minor third
+ * - 4P = perfect fourth
+ * - 4A = augmented fourth
+ * - 5P = perfect fifth
+ * - 5d = diminished fifth
+ *
+ * @param {string | number} amount Either number of semitones or interval string.
+ * @returns Pattern
+ * @memberof Pattern
+ * @name transpose
+ * @example
+ * "c2 c3".fast(2).transpose("<0 -2 5 3>".slow(2)).transpose(0)
+ * @example
+ * "c2 c3".fast(2).transpose("<1P -2M 4P 3m>".slow(2)).transpose(0)
+ */
+
 Pattern.prototype._transpose = function (intervalOrSemitones) {
  return this._withHap((hap) => {
    const interval = !isNaN(Number(intervalOrSemitones))
@@ -63,6 +95,20 @@ Pattern.prototype._transpose = function (intervalOrSemitones) {
 // e.g. `stack(c3).superimpose(transpose(slowcat(7, 5)))` or
 // or even `stack(c3).superimpose(transpose.slowcat(7, 5))` or

+/**
+ * Transposes notes inside the scale by the number of steps.
+ * Expected to be called on a Pattern which already has a {@link Pattern#scale}
+ *
+ * @memberof Pattern
+ * @name scaleTranspose
+ * @param {offset} offset number of steps inside the scale
+ * @returns Pattern
+ * @example
+ * "-8 [2,4,6]"
+ * .scale('C4 bebop major')
+ * .scaleTranspose("<0 -1 -2 -3 -4 -5 -6 -4>")
+ */
+
 Pattern.prototype._scaleTranspose = function (offset /* : number | string */) {
  return this._withHap((hap) => {
    if (!hap.context.scale) {
@@ -74,6 +120,25 @@ Pattern.prototype._scaleTranspose = function (offset /* : number | string */) {
    return hap.withValue(() => scaleOffset(hap.context.scale, Number(offset), hap.value));
  });
 };
+
+/**
+ * Turns numbers into notes in the scale (zero indexed). Also sets scale for other scale operations, like {@link Pattern#scaleTranspose}.
+ *
+ * The scale name has the form "TO? N" wher
+ *
+ * - T = Tonic
+ * - O = Octave (optional, defaults to 3)
+ * - N = Name of scale, available names can be found [here](https://github.com/tonaljs/tonal/blob/main/packages/scale-type/data.ts).
+ *
+ * @memberof Pattern
+ * @name scale
+ * @param {string} scale Name of scale
+ * @returns Pattern
+ * @example 
+ * "0 2 4 6 4 2"
+ * .scale(seq('C2 major', 'C2 minor').slow(2))
+ */
+
 Pattern.prototype._scale = function (scale /* : string */) {
  return this._withHap((hap) => {
    let note = hap.value;
@@ -31,6 +31,18 @@ Pattern.prototype.fmapNested = function (func) {
  );
 };

+/**
+ * Turns chord symbols into voicings, using the smoothest voice leading possible.
+ * Uses [chord-voicings package](https://github.com/felixroos/chord-voicings#chord-voicings).
+ *
+ * @name voicings
+ * @memberof Pattern
+ * @param {range} range note range for possible voicings (optional, defaults to `['F3', 'A4']`)
+ * @returns Pattern
+ * @example
+ * stack("<C^7 A7 Dm7 G7>".voicings(), "<C3 A2 D3 G2>")
+ */
+
 Pattern.prototype.voicings = function (range) {
  let lastVoicing;
  if (!range?.length) {
@@ -20,7 +20,7 @@ export const getDrawContext = (id = 'test-canvas') => {
  return canvas.getContext('2d');
 };

-Pattern.prototype.draw = function (callback, cycleSpan, lookaheadCycles = 1) {
+Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
  if (window.strudelAnimation) {
    cancelAnimationFrame(window.strudelAnimation);
  }
@@ -29,19 +29,21 @@ Pattern.prototype.draw = function (callback, cycleSpan, lookaheadCycles = 1) {
    events = [];
  const animate = (time) => {
    const t = Tone.getTransport().seconds;
-    if (cycleSpan) {
-      const currentCycle = Math.floor(t / cycleSpan);
+    if (from !== undefined && to !== undefined) {
+      const currentCycle = Math.floor(t);
      if (cycle !== currentCycle) {
        cycle = currentCycle;
-        const begin = currentCycle * cycleSpan;
-        const end = (currentCycle + lookaheadCycles) * cycleSpan;
-        events = this._asNumber(true) // true = silent error
-          .query(new State(new TimeSpan(begin, end)))
-          .filter(Boolean)
-          .filter((event) => event.part.begin.equals(event.whole.begin));
+        const begin = currentCycle + from;
+        const end = currentCycle + to;
+        setTimeout(() => {
+          events = this.query(new State(new TimeSpan(begin, end)))
+            .filter(Boolean)
+            .filter((event) => event.part.begin.equals(event.whole.begin));
+          onQuery?.(events);
+        }, 0);
      }
    }
-    callback(ctx, events, t, cycleSpan, time);
+    callback(ctx, events, t, time);
    window.strudelAnimation = requestAnimationFrame(animate);
  };
  requestAnimationFrame(animate);
@@ -1,13 +1,13 @@
 {
 	"name": "@strudel.cycles/tone",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@strudel.cycles/tone",
-			"version": "0.0.4",
-			"license": "GPL-3.0-or-later",
+			"version": "0.1.1",
+			"license": "AGPL-3.0-or-later",
 			"dependencies": {
 				"@tonejs/piano": "^0.2.1",
 				"chord-voicings": "^0.0.1",
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/tone",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Tone.js API for strudel",
  "main": "index.mjs",
  "type": "module",
@@ -22,7 +22,7 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/core": "^0.1.0",
+    "@strudel.cycles/core": "^0.2.0",
    "@tonejs/piano": "^0.2.1",
    "chord-voicings": "^0.0.1",
    "tone": "^14.7.77"
@@ -6,39 +6,142 @@ This program is free software: you can redistribute it and/or modify it under th

 import { Pattern } from '@strudel.cycles/core';

+const scale = (normalized, min, max) => normalized * (max - min) + min;
+const getValue = (e) => {
+  let value = typeof e.value === 'object' ? e.value.note ?? e.value.n : e.value;
+  if (typeof value === 'string') {
+    value = toMidi(value);
+  }
+  return value;
+};
+
 Pattern.prototype.pianoroll = function ({
-  timeframe = 10,
-  inactive = '#C9E597',
+  cycles = 4,
+  playhead = 0.5,
+  overscan = 1,
+  flipTime = 0,
+  flipValues = 0,
+  hideNegative = false,
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
  active = '#FFCA28',
-  background = '#2A3236',
+  // background = '#2A3236',
+  background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
+  minMidi = 10,
  maxMidi = 90,
-  minMidi = 0,
+  autorange = 0,
+  timeframe: timeframeProp,
+  fold = 0,
+  vertical = 0,
 } = {}) {
-  const w = window.innerWidth;
-  const h = window.innerHeight;
-  const midiRange = maxMidi - minMidi + 1;
-  const height = h / midiRange;
+  const ctx = getDrawContext();
+  const w = ctx.canvas.width;
+  const h = ctx.canvas.height;
+  let from = -cycles * playhead;
+  let to = cycles * (1 - playhead);
+
+  if (timeframeProp) {
+    console.warn('timeframe is deprecated! use from/to instead');
+    from = 0;
+    to = timeframeProp;
+  }
+  if (!autorange && fold) {
+    console.warn('disabling autorange has no effect when fold is enabled');
+  }
+  const timeAxis = vertical ? h : w;
+  const valueAxis = vertical ? w : h;
+  let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time
+  const timeExtent = to - from; // number of seconds that fit inside the canvas frame
+  const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values
+  let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true
+  let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true
+  let foldValues = [];
+  flipTime && timeRange.reverse();
+  flipValues && valueRange.reverse();
+
  this.draw(
    (ctx, events, t) => {
      ctx.fillStyle = background;
-      ctx.clearRect(0, 0, w, h);
-      ctx.fillRect(0, 0, w, h);
-      events.forEach((event) => {
-        const isActive = event.whole.begin <= t && event.whole.end >= t;
+      ctx.globalAlpha = 1; // reset!
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
+      const inFrame = (event) =>
+        (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
+      events.filter(inFrame).forEach((event) => {
+        const isActive = event.whole.begin <= t && event.whole.end > t;
        ctx.fillStyle = event.context?.color || inactive;
        ctx.strokeStyle = event.context?.color || active;
        ctx.globalAlpha = event.context.velocity ?? 1;
-        const x = Math.round((event.whole.begin / timeframe) * w);
-        const width = Math.round(((event.whole.end - event.whole.begin) / timeframe) * w);
-        const y = Math.round(h - ((Number(event.value) - minMidi) / midiRange) * h);
-        const offset = (t / timeframe) * w;
-        const margin = 0;
-        const coords = [x - offset + margin + 1, y + 1, width - 2, height - 2];
+        const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
+        let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
+        const value = getValue(event);
+        const valuePx = scale(
+          fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
+          ...valueRange,
+        );
+        let margin = 0;
+        const offset = scale(t / timeExtent, ...timeRange);
+        let coords;
+        if (vertical) {
+          coords = [
+            valuePx + 1 - (flipValues ? barThickness : 0), // x
+            timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
+            barThickness - 2, // width
+            durationPx - 2, // height
+          ];
+        } else {
+          coords = [
+            timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
+            valuePx + 1 - (flipValues ? 0 : barThickness), // y
+            durationPx - 2, // widith
+            barThickness - 2, // height
+          ];
+        }
        isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
      });
+      ctx.globalAlpha = 1; // reset!
+      const playheadPosition = scale(-from / timeExtent, ...timeRange);
+      // draw playhead
+      ctx.strokeStyle = playheadColor;
+      ctx.beginPath();
+      if (vertical) {
+        ctx.moveTo(0, playheadPosition);
+        ctx.lineTo(valueAxis, playheadPosition);
+      } else {
+        ctx.moveTo(playheadPosition, 0);
+        ctx.lineTo(playheadPosition, valueAxis);
+      }
+      ctx.stroke();
+    },
+    {
+      from: from - overscan,
+      to: to + overscan,
+      onQuery: (events) => {
+        const { min, max, values } = events.reduce(
+          ({ min, max, values }, e) => {
+            const v = getValue(e);
+            return {
+              min: v < min ? v : min,
+              max: v > max ? v : max,
+              values: values.includes(v) ? values : [...values, v],
+            };
+          },
+          { min: Infinity, max: -Infinity, values: [] },
+        );
+        if (autorange) {
+          minMidi = min;
+          maxMidi = max;
+          valueExtent = maxMidi - minMidi + 1;
+        }
+        foldValues = values.sort((a, b) => a - b);
+        barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
+      },
    },
-    timeframe,
-    2, // lookaheadCycles
  );
  return this;
 };
@@ -4,15 +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 { strict as assert } from 'assert';
 import '../tone.mjs';
 import { pure } from '@strudel.cycles/core';
-import Tone from 'tone';
+import { describe, it, expect } from 'vitest';

 describe('tone', () => {
  it('Should have working tone function', () => {
-    const s = synth().chain(out());
-    assert.deepStrictEqual(s, new Tone.Synth().chain(out()));
-    assert.deepStrictEqual(pure('c3').tone(s)._firstCycleValues, ['c3']);
+    // const s = synth().chain(out()); // TODO: mock audio context?
+    // assert.deepStrictEqual(s, new Tone.Synth().chain(out()));
+    const s = {};
+    expect(pure('c3').tone(s)._firstCycleValues).toEqual(['c3']);
  });
 });
@@ -9,14 +9,12 @@ const stringifyFunction = (func) => '(' + func + ')();';
 const urlifyFunction = (func) => URL.createObjectURL(new Blob([stringifyFunction(func)], { type: 'text/javascript' }));
 const createWorker = (func) => new Worker(urlifyFunction(func));

-// this class is basically the tale of two clocks
+// this is just a setInterval with a counter, running in a worker
 export class ClockWorker {
  worker;
-  audioContext;
-  interval = 0.2; // query span
-  lastEnd = 0;
-  constructor(audioContext, callback, interval = this.interval) {
-    this.audioContext = audioContext;
+  interval = 0.1; // query span
+  tick = 0;
+  constructor(callback, interval = this.interval) {
    this.interval = interval;
    this.worker = createWorker(() => {
      // we cannot use closures here!
@@ -33,6 +31,7 @@ export class ClockWorker {
        if (!interval) {
          throw new Error('no interval set! call worker.postMessage({interval}) before starting.');
        }
+        postMessage('tick');
        timerID = setInterval(() => postMessage('tick'), interval * 1000);
      };
      self.onmessage = function (e) {
@@ -50,25 +49,23 @@ export class ClockWorker {
    });
    this.worker.postMessage({ interval });
    // const round = (n, d) => Math.round(n * d) / d;
-    const precision = 100;
    this.worker.onmessage = (e) => {
      if (e.data === 'tick') {
-        const begin = this.lastEnd || this.audioContext.currentTime;
-        const end = this.audioContext.currentTime + this.interval; // DONT reference begin here!
-        this.lastEnd = end;
        // callback with query span, using clock #2 (the audio clock)
-        callback(begin, end);
+        callback(this.tick++, this.interval);
      }
    };
  }
  start() {
-    console.log('start...');
-    this.audioContext.resume();
+    // console.log('start...');
    this.worker.postMessage('start');
  }
  stop() {
-    console.log('stop...');
+    // console.log('stop...');
    this.worker.postMessage('stop');
+    this.tick = 0;
+  }
+  setInterval(interval) {
+    this.worker.postMessage({ interval });
  }
 }
-
@@ -1,9 +1,11 @@
 <div style="position: absolute; top: 0; right: 0; padding: 4px">
  <button id="start" style="margin-bottom: 4px; font-size: 2em">start</button><br />
-  <button id="stop" style="font-size: 2em">stop</button>
+  <button id="stop" style="margin-bottom: 4px; font-size: 2em">stop</button><br />
+  <button id="slower" style="font-size: 2em">-</button>
+  <button id="faster" style="font-size: 2em">+</button>
 </div>
 <textarea
-  style="font-size: 2em; background: #bce865; color: #323230; height: 100%; width: 100%; outline: none; border: 0"
+  style="font-size: 2em; background: #052b49; color: #fff; height: 100%; width: 100%; outline: none; border: 0"
  id="text"
  spellcheck="false"
 >
@@ -11,11 +13,9 @@ Loading...</textarea
 >
 <script type="module">
  document.body.style = 'margin: 0';
-  // import * as strudel from '@strudel.cycles/core';
-  import * as strudel from '../../core/index.mjs';
-  import * as util from '../../core/util.mjs';
+  import * as strudel from '@strudel.cycles/core';
+  import * as util from '@strudel.cycles/core/util.mjs';
  import '@strudel.cycles/core/euclid.mjs';
-  // import { Scheduler, getAudioContext } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.0.4';
  import { Scheduler, getAudioContext } from '../index.mjs';

  const { cat, State, TimeSpan } = strudel;
@@ -33,11 +33,12 @@ Loading...</textarea
 .mul(slowcat(1,2))
 .mul(slowcat(1,3/2,4/3,5/3).slow(8))
 .fast(3)
+.freq()
 .velocity(.5)
-.wave(cat('sawtooth','square').fast(2))
-.adsr(0.01,.02,.5,0.1)
-.filter('lowshelf',800,25)
-.out()`;
+.s('sawtooth')
+.cutoff(800)
+.out()
+`;

  try {
    const base64 = decodeURIComponent(window.location.href.split('#')[1]);
@@ -61,4 +62,6 @@ Loading...</textarea

  document.getElementById('start').addEventListener('click', () => scheduler.start());
  document.getElementById('stop').addEventListener('click', () => scheduler.stop());
+  document.getElementById('slower').addEventListener('click', () => scheduler.setCps(scheduler.cps - 0.1));
+  document.getElementById('faster').addEventListener('click', () => scheduler.setCps(scheduler.cps + 0.1));
 </script>
@@ -7,3 +7,4 @@ This program is free software: you can redistribute it and/or modify it under th
 export * from './clockworker.mjs';
 export * from './scheduler.mjs';
 export * from './webaudio.mjs';
+export * from './sampler.mjs';
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/webaudio",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/webaudio",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "description": "Web Audio helpers for Strudel",
  "main": "index.mjs",
  "type": "module",
@@ -28,6 +28,6 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@strudel.cycles/core": "^0.1.0"
+    "@strudel.cycles/core": "^0.2.0"
  }
 }
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Strudel REPL"/><title>Strudel REPL</title><script defer="defer" src="/static/js/main.f848d51e.js"></script><link href="/static/css/main.35f2ca4c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>