add gainpre + gainpost for effect sends

fix: hash links

.eslintignore

@@ -15,3 +15,6 @@ vite.config.js
 !**/*.mjs
 **/*.tsx
 **/*.ts
+**/*.json
+**/dev-dist
+**/dist

.gitignore

@@ -37,4 +37,6 @@ talk/public/EmuSP12
 talk/public/samples
 server/samples/old
 repl/stats.html
-coverage
+coverage
+public/icons/apple-splash-*
+dev-dist

.prettierignore

@@ -8,4 +8,5 @@ packages/mini/krill-parser.js
 packages/xen/tunejs.js
 paper
 pnpm-lock.yaml
-pnpm-workspace.yaml
+pnpm-workspace.yaml
+**/dev-dist

.prettierrc

@@ -7,7 +7,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "proseWrap": "preserve",
   "htmlWhitespaceSensitivity": "css",

CONTRIBUTING.md

@@ -82,6 +82,10 @@ Please report any problems you've had with the setup instructions!
 ## Code Style
 
 To make sure the code changes only where it should, we are using prettier to unify the code style.
+
+- You can format all files at once by running `pnpm prettier` from the project root
+- Run `pnpm format-check` from the project root to check if all files are well formatted
+
 If you use VSCode, you can
 
 1. install [the prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
@@ -89,6 +93,24 @@ If you use VSCode, you can
 3. Choose "Configure Default Formatter..."
 4. Select prettier
 
+## ESLint
+
+To prevent unwanted runtime errors, this project uses [eslint](https://eslint.org/).
+
+- You can check for lint errors by running `pnpm lint`
+
+There are also eslint extensions / plugins for most editors.
+
+## Running Tests
+
+- Run all tests with `pnpm test`
+- Run all tests with UI using `pnpm test-ui`
+
+## Running all CI Checks
+
+When opening a PR, the CI runner will automatically check the code style and eslint, as well as run all tests.
+You can run the same check with `pnpm check`
+
 ## Package Workflow
 
 The project is split into multiple [packages](https://github.com/tidalcycles/strudel/tree/main/packages) with independent versioning.

README.md

@@ -7,6 +7,7 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w
 - Try it here: <https://strudel.tidalcycles.org/>
 - Docs: <https://strudel.tidalcycles.org/learn/>
 - Technical Blog Post: <https://loophole-letters.vercel.app/strudel>
+- 1 Year of Strudel Blog Post: <https://loophole-letters.vercel.app/strudel1year>
 
 ## Running Locally
 

my-patterns/README.md

@@ -20,11 +20,8 @@ Example: <https://felixroos.github.io/strudel/swatch/>
 ### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.github.io` and base `/strudel`, like this
 
 ```js
-export default defineConfig({
-  /* ... rest of config ... */
-  site: 'https://<your-username>.github.io',
-  base: '/strudel',
-});
+const site = 'https://<your-username>.github.io';
+const base = '/strudel';
 ```
 
 ### 7. commit & push the changes

packages/core/controls.mjs

@@ -4,22 +4,13 @@ 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 { Pattern, sequence } from './pattern.mjs';
+import { Pattern, sequence, registerControl } from './pattern.mjs';
 
 const controls = {};
 const generic_params = [
   /**
    * Select a sound / sample by name.
    *
-   * <details style={{display:'none'}}>
-   * <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
@@ -28,20 +19,36 @@ const generic_params = [
    */
   ['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
+   * Selects the given index from the sample map.
+   * Numbers too high will wrap around.
+   * `n` can also be used to play midi numbers, but it is recommended to use `note` instead.
    *
    * @name n
-   * @param {string | number | Pattern} value note name, note number or sample number
+   * @param {number | Pattern} value sample index starting from 0
    * @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()
+   * s("bd sd,hh*3").n("<0 1>")
    */
   // also see https://github.com/tidalcycles/strudel/pull/63
-  ['f', 'n', 'The note or sample number to choose for a synth or sampleset'],
+  ['f', 'n', 'The sample number to choose for a synth or sampleset'],
+  /**
+   * Plays the given note name or midi number. A note name consists of
+   *
+   * - a letter (a-g or A-G)
+   * - optional accidentals (b or #)
+   * - optional octave number (0-9). Defaults to 3
+   *
+   * Examples of valid note names: `c`, `bb`, `Bb`, `f#`, `c3`, `A4`, `Eb2`, `c#5`
+   *
+   * You can also use midi numbers instead of note names, where 69 is mapped to A4 440Hz in 12EDO.
+   *
+   * @name note
+   * @example
+   * note("c a f e")
+   * @example
+   * note("c4 a4 f4 e4")
+   * @example
+   * note("60 69 65 64")
+   */
   ['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"),
@@ -71,6 +78,8 @@ const generic_params = [
     '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', 'gainpre'],
+  ['f', 'gainpost'],
   /**
    * Like {@link gain}, but linear.
    *
@@ -83,8 +92,7 @@ const generic_params = [
    */
   ['f', 'amp', 'like @gain@, but linear.'],
   /**
-   * A pattern of numbers to specify the attack time of an envelope applied to each sample.
-   * [More info about envelopes](/learn/synths-samples-effects/#envelope)
+   * Amplitude envelope attack time: Specifies how long it takes for the sound to reach its peak value, relative to the onset.
    *
    * @name attack
    * @param {number | Pattern} attack time in seconds.
@@ -92,11 +100,7 @@ const generic_params = [
    * note("c3 e3").attack("<0 .1 .5>")
    *
    */
-  [
-    'f',
-    'attack',
-    'a pattern of numbers to specify the attack time (in seconds) of an envelope applied to each sample.',
-  ],
+  ['f', 'attack'],
 
   /**
    * Select the sound bank to use. To be used together with `s`. The bank name (+ "_") will be prepended to the value of `s`.
@@ -110,8 +114,8 @@ const generic_params = [
   ['f', 'bank', 'selects sound bank to use'],
 
   /**
-   * Gain envelope decay time = the time it takes after the attack time to reach the sustain level.
-   * [More info about envelopes](/learn/synths-samples-effects/#envelope)
+   * Amplitude envelope decay time: the time it takes after the attack time to reach the sustain level.
+   * Note that the decay is only audible if the sustain value is lower than 1.
    *
    * @name decay
    * @param {number | Pattern} time decay time in seconds
@@ -121,7 +125,7 @@ const generic_params = [
    */
   ['f', 'decay', ''],
   /**
-   * Gain envelope sustain level. [More info about envelopes](/learn/synths-samples-effects/#envelope)
+   * Amplitude envelope sustain level: The level which is reached after attack / decay, being sustained until the offset.
    *
    * @name sustain
    * @param {number | Pattern} gain sustain level between 0 and 1
@@ -131,7 +135,7 @@ const generic_params = [
    */
   ['f', 'sustain', ''],
   /**
-   * Gain envelope release time. [More info about envelopes](/learn/synths-samples-effects/#envelope)
+   * Amplitude envelope release time: The time it takes after the offset to go from sustain level to zero.
    *
    * @name release
    * @param {number | Pattern} time release time in seconds
@@ -151,30 +155,30 @@ const generic_params = [
   ],
   // TODO: in tidal, it seems to be normalized
   /**
-   * Sets the center frequency of the band-pass filter.
+   * Sets the center frequency of the **b**and-**p**ass **f**ilter.
    *
-   * @name bandf
+   * @name bpf
    * @param {number | Pattern} frequency center frequency
-   * @synonyms bpf
+   * @synonyms bandf
    * @example
-   * s("bd sd,hh*3").bandf("<1000 2000 4000 8000>")
+   * s("bd sd,hh*3").bpf("<1000 2000 4000 8000>")
    *
    */
-  ['f', 'bandf', 'A pattern of numbers from 0 to 1. Sets the center frequency of the band-pass filter.'],
   ['f', 'bpf', ''],
+  ['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
+   * Sets the **b**and-**p**ass **q**-factor (resonance)
    *
-   * @name bandq
+   * @name bpq
    * @param {number | Pattern} q q factor
-   * @synonyms bpq
+   * @synonyms bandq
    * @example
-   * s("bd sd").bandf(500).bandq("<0 1 2 3>")
+   * s("bd sd").bpf(500).bpq("<0 1 2 3>")
    *
    */
-  ['f', 'bandq', 'a pattern of anumbers from 0 to 1. Sets the q-factor of the band-pass filter.'],
   ['f', 'bpq', ''],
+  ['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.
    *
@@ -282,50 +286,49 @@ const generic_params = [
     '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.
+   * Applies the cutoff frequency of the **l**ow-**p**ass **f**ilter.
    *
-   * @name cutoff
+   * @name lpf
    * @param {number | Pattern} frequency audible between 0 and 20000
-   * @synonyms lpf
+   * @synonyms cutoff
    * @example
-   * s("bd sd,hh*3").cutoff("<4000 2000 1000 500 200 100>")
+   * s("bd sd,hh*3").lpf("<4000 2000 1000 500 200 100>")
    *
    */
-  ['f', 'cutoff', 'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the low-pass filter.'],
   ['f', 'lpf'],
+  ['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.
+   * Applies the cutoff frequency of the **h**igh-**p**ass **f**ilter.
    *
-   * @name hcutoff
+   * @name hpf
    * @param {number | Pattern} frequency audible between 0 and 20000
-   * @synonyms hpf
+   * @synonyms hcutoff
    * @example
-   * s("bd sd,hh*4").hcutoff("<4000 2000 1000 500 200 100>")
+   * s("bd sd,hh*4").hpf("<4000 2000 1000 500 200 100>")
    *
    */
-  ['f', 'hcutoff', ''],
   ['f', 'hpf', ''],
+  ['f', 'hcutoff', ''],
   /**
-   * Applies the resonance of the high-pass filter.
+   * Controls the **h**igh-**p**ass **q**-value.
    *
-   * @name hresonance
+   * @name hpq
    * @param {number | Pattern} q resonance factor between 0 and 50
-   * @synonyms hpq
+   * @synonyms hresonance
    * @example
-   * s("bd sd,hh*4").hcutoff(2000).hresonance("<0 10 20 30>")
+   * s("bd sd,hh*4").hpf(2000).hpq("<0 10 20 30>")
    *
    */
-  ['f', 'hpq', ''],
   ['f', 'hresonance', ''],
-  // TODO: add hpq synonym
+  ['f', 'hpq', ''],
   /**
-   * Applies the cutoff frequency of the low-pass filter.
+   * Controls the **l**ow-**p**ass **q**-value.
    *
-   * @name resonance
+   * @name lpq
    * @param {number | Pattern} q resonance factor between 0 and 50
-   * @synonyms lpq
+   * @synonyms resonance
    * @example
-   * s("bd sd,hh*4").cutoff(2000).resonance("<0 10 20 30>")
+   * s("bd sd,hh*4").lpf(2000).lpq("<0 10 20 30>")
    *
    */
   ['f', 'lpq'],
@@ -392,6 +395,7 @@ const generic_params = [
    *
    * @name detune
    * @param {number | Pattern} amount between 0 and 1
+   * @superdirtOnly
    * @example
    * n("0 3 7").s('superzow').octave(3).detune("<0 .25 .5 1 2>").osc()
    *
@@ -404,6 +408,7 @@ const generic_params = [
    * @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()
+   * @superdirtOnly
    *
    */
   [
@@ -462,6 +467,7 @@ const generic_params = [
    * @param {number | Pattern} wet between 0 and 1
    * @example
    * n("0,4,7").s("supersquare").leslie("<0 .4 .6 1>").osc()
+   * @superdirtOnly
    *
    */
   ['f', 'leslie', ''],
@@ -472,6 +478,7 @@ const generic_params = [
    * @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()
+   * @superdirtOnly
    *
    */
   // TODO: the rate seems to "lag" (in the example, 1 will be fast)
@@ -483,6 +490,7 @@ const generic_params = [
    * @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()
+   * @superdirtOnly
    *
    */
   ['f', 'lsize', ''],
@@ -518,6 +526,7 @@ const generic_params = [
    * @param {number | Pattern} octave octave number
    * @example
    * n("0,4,7").s('supersquare').octave("<3 4 5 6>").osc()
+   * @superDirtOnly
    */
   ['i', 'octave', ''],
   ['f', 'offset', ''], // TODO: what is this? not found in tidal doc
@@ -682,6 +691,7 @@ const generic_params = [
    * @param {number | string | Pattern} unit see description above
    * @example
    * speed("1 2 .5 3").s("bd").unit("c").osc()
+   * @superdirtOnly
    *
    */
   [
@@ -698,6 +708,7 @@ const generic_params = [
    * @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()
+   * @superdirtOnly
    *
    */
   ['f', 'squiz', ''],
@@ -804,31 +815,41 @@ const generic_params = [
   ['f', 'uid', ''],
   ['f', 'val', ''],
   ['f', 'cps', ''],
+  /**
+   * If set to 1, samples will be cut to the duration of their event.
+   * In tidal, this would be done with legato, which [is about to land in strudel too](https://github.com/tidalcycles/strudel/issues/111)
+   *
+   * @name clip
+   * @param {number | Pattern} active 1 or 0
+   * @example
+   * note("c a f e ~").s("piano").clip(1)
+   *
+   */
   ['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, name) =>
-  function (...pats) {
+const makeControl = function (name) {
+  const func = (...pats) => sequence(...pats).withValue((x) => ({ [name]: x }));
+  const setter = function (...pats) {
     if (!pats.length) {
       return this.fmap((value) => ({ [name]: value }));
     }
     return this.set(func(...pats));
   };
+  Pattern.prototype[name] = setter;
+  registerControl(name, func);
+  return func;
+};
 
 generic_params.forEach(([type, name, description]) => {
-  controls[name] = (...pats) => _name(name, ...pats);
-  Pattern.prototype[name] = _setter(controls[name], name);
+  controls[name] = makeControl(name);
 });
 
 // create custom param
 controls.createParam = (name) => {
-  const func = (...pats) => _name(name, ...pats);
-  Pattern.prototype[name] = _setter(func, name);
-  return (...pats) => _name(name, ...pats);
+  return makeControl(name);
 };
 
 controls.createParams = (...names) =>

packages/core/euclid.mjs

@@ -11,15 +11,9 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { Pattern, timeCat, register, silence } from './pattern.mjs';
-import { rotate, flatten } from './util.mjs';
+import { rotate, flatten, splitAt, zipWith } from './util.mjs';
 import Fraction from './fraction.mjs';
 
-const splitAt = function (index, value) {
-  return [value.slice(0, index), value.slice(index)];
-};
-
-const zipWith = (f, xs, ys) => xs.map((n, i) => f(n, ys[i]));
-
 const left = function (n, x) {
   const [ons, offs] = n;
   const [xs, ys] = x;

packages/core/pattern.mjs

@@ -21,12 +21,148 @@ let stringParser;
 // intended to use with mini to automatically interpret all strings as mini notation
 export const setStringParser = (parser) => (stringParser = parser);
 
+const alignments = ['in', 'out', 'mix', 'squeeze', 'squeezeout', 'trig', 'trigzero'];
+
+const methodRegistry = [];
+const getterRegistry = [];
+const controlRegistry = [];
+const controlSubscribers = [];
+const composifiedRegistry = [];
+
+//////////////////////////////////////////////////////////////////////
+// Magic for supporting higher order composition of method chains
+
+// Dresses the given (unary) function with methods for composition chaining, so e.g.
+// `fast(2).iter(4)` composes to pattern functions into a new one.
+function composify(func) {
+  if (!func.__composified) {
+    for (const [name, method] of methodRegistry) {
+      func[name] = method;
+    }
+    for (const [name, getter] of getterRegistry) {
+      Object.defineProperty(func, name, getter);
+    }
+    func.__composified = true;
+    composifiedRegistry.push(func);
+  } else {
+    console.log('Warning: attempt at composifying a function more than once');
+  }
+  return func;
+}
+
+export function registerMethod(name, addAlignments = false, addControls = false) {
+  if (addAlignments || addControls) {
+    // This method needs to make its 'this' object available to chained alignments and/or
+    // control parameters, so it has to be implemented as a getter
+    const getter = {
+      get: function () {
+        const func = this;
+        const wrapped = function (...args) {
+          const composed = (pat) => func(pat)[name](...args);
+          return composify(composed);
+        };
+
+        if (addAlignments) {
+          for (const alignment of alignments) {
+            wrapped[alignment] = function (...args) {
+              const composed = (pat) => func(pat)[name][alignment](...args);
+              return composify(composed);
+            };
+            for (const [controlname, controlfunc] of controlRegistry) {
+              wrapped[alignment][controlname] = function (...args) {
+                const composed = (pat) => func(pat)[name][alignment](controlfunc(...args));
+                return composify(composed);
+              };
+            }
+          }
+        }
+        if (addControls) {
+          for (const [controlname, controlfunc] of controlRegistry) {
+            wrapped[controlname] = function (...args) {
+              const composed = (pat) => func(pat)[name](controlfunc(...args));
+              return composify(composed);
+            };
+          }
+        }
+        return wrapped;
+      },
+    };
+
+    getterRegistry.push([name, getter]);
+
+    // Add to functions already 'composified'
+    for (const composified of composifiedRegistry) {
+      Object.defineProperty(composified, name, getter);
+    }
+  } else {
+    // No chained alignments/controls needed, so we can just add as a plain method,
+    // probably more efficient this way?
+    const method = function (...args) {
+      const func = this;
+      const composed = (pat) => func(pat)[name](...args);
+      return composify(composed);
+    };
+
+    methodRegistry.push([name, method]);
+
+    // Add to functions already 'composified'
+    for (const composified of composifiedRegistry) {
+      composified[name] = method;
+    }
+  }
+}
+
+export function registerControl(controlname, controlfunc) {
+  registerMethod(controlname);
+  controlRegistry.push([controlname, controlfunc]);
+  for (const subscriber of controlSubscribers) {
+    subscriber(controlname, controlfunc);
+  }
+}
+
+export function withControls(func) {
+  for (const [controlname, controlfunc] of controlRegistry) {
+    func(controlname, controlfunc);
+  }
+  controlSubscribers.push(func);
+}
+
+export function addToPrototype(name, func) {
+  Pattern.prototype[name] = func;
+  registerMethod(name);
+}
+
+export function curryPattern(func, arity = func.length) {
+  const fn = function curried(...args) {
+    if (args.length >= arity) {
+      return func.apply(this, args);
+    }
+
+    const partial = function (...args2) {
+      return curried.apply(this, args.concat(args2));
+    };
+    if (args.length == arity - 1) {
+      return composify(partial);
+    }
+
+    return partial;
+  };
+  if (arity == 1) {
+    composify(fn);
+  }
+  return fn;
+}
+
+//////////////////////////////////////////////////////////////////////
+// The core Pattern class
+
 /** @class Class representing a pattern. */
 export class Pattern {
   /**
    * 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}.
+   * @noAutocomplete
    */
   constructor(query) {
     this.query = query;
@@ -51,6 +187,7 @@ export class Pattern {
 
   /**
    * see {@link Pattern#withValue}
+   * @noAutocomplete
    */
   fmap(func) {
     return this.withValue(func);
@@ -62,6 +199,7 @@ export class Pattern {
    * pattern of functions.
    * @param {Function} whole_func
    * @param {Function} func
+   * @noAutocomplete
    * @returns Pattern
    */
   appWhole(whole_func, pat_val) {
@@ -97,6 +235,7 @@ export class Pattern {
    * are not the same but do intersect, the resulting hap has a timespan of the
    * intersection. This applies to both the part and the whole timespan.
    * @param {Pattern} pat_val
+   * @noAutocomplete
    * @returns Pattern
    */
   appBoth(pat_val) {
@@ -117,6 +256,7 @@ export class Pattern {
    * are preserved from the pattern of functions (often referred to as the left
    * hand or inner pattern).
    * @param {Pattern} pat_val
+   * @noAutocomplete
    * @returns Pattern
    */
   appLeft(pat_val) {
@@ -147,6 +287,7 @@ export class Pattern {
    * pattern of values, i.e. structure is preserved from the right hand/outer
    * pattern.
    * @param {Pattern} pat_val
+   * @noAutocomplete
    * @returns Pattern
    */
   appRight(pat_val) {
@@ -332,6 +473,7 @@ export class Pattern {
    * const haps = pattern.queryArc(0, 1)
    * console.log(haps)
    * silence
+   * @noAutocomplete
    */
   queryArc(begin, end) {
     try {
@@ -347,6 +489,7 @@ export class Pattern {
    * some calculations easier to express, as all haps are then constrained to
    * happen within a cycle.
    * @returns Pattern
+   * @noAutocomplete
    */
   splitQueries() {
     const pat = this;
@@ -361,6 +504,7 @@ export class Pattern {
    * timespan before passing it to the original pattern.
    * @param {Function} func the function to apply
    * @returns Pattern
+   * @noAutocomplete
    */
   withQuerySpan(func) {
     return new Pattern((state) => this.query(state.withSpan(func)));
@@ -382,6 +526,7 @@ export class Pattern {
    * begin and end time of the query timespan.
    * @param {Function} func the function to apply
    * @returns Pattern
+   * @noAutocomplete
    */
   withQueryTime(func) {
     return new Pattern((state) => this.query(state.withSpan((span) => span.withTime(func))));
@@ -393,6 +538,7 @@ export class Pattern {
    * present, `whole` timespans).
    * @param {Function} func
    * @returns Pattern
+   * @noAutocomplete
    */
   withHapSpan(func) {
     return new Pattern((state) => this.query(state).map((hap) => hap.withSpan(func)));
@@ -403,6 +549,7 @@ export class Pattern {
    * begin and end time of the hap timespans.
    * @param {Function} func the function to apply
    * @returns Pattern
+   * @noAutocomplete
    */
   withHapTime(func) {
     return this.withHapSpan((span) => span.withTime(func));
@@ -412,6 +559,7 @@ export class Pattern {
    * Returns a new pattern with the given function applied to the list of haps returned by every query.
    * @param {Function} func
    * @returns Pattern
+   * @noAutocomplete
    */
   withHaps(func) {
     return new Pattern((state) => func(this.query(state)));
@@ -421,6 +569,7 @@ export class Pattern {
    * As with {@link Pattern#withHaps}, but applies the function to every hap, rather than every list of haps.
    * @param {Function} func
    * @returns Pattern
+   * @noAutocomplete
    */
   withHap(func) {
     return this.withHaps((haps) => haps.map(func));
@@ -430,6 +579,7 @@ export class Pattern {
    * Returns a new pattern with the context field set to every hap set to the given value.
    * @param {*} context
    * @returns Pattern
+   * @noAutocomplete
    */
   setContext(context) {
     return this.withHap((hap) => hap.setContext(context));
@@ -439,6 +589,7 @@ export class Pattern {
    * Returns a new pattern with the given function applied to the context field of every hap.
    * @param {Function} func
    * @returns Pattern
+   * @noAutocomplete
    */
   withContext(func) {
     return this.withHap((hap) => hap.setContext(func(hap.context)));
@@ -447,6 +598,7 @@ export class Pattern {
   /**
    * Returns a new pattern with the context field of every hap set to an empty object.
    * @returns Pattern
+   * @noAutocomplete
    */
   stripContext() {
     return this.withHap((hap) => hap.setContext({}));
@@ -458,6 +610,7 @@ export class Pattern {
    * @param {Number} start
    * @param {Number} end
    * @returns Pattern
+   * @noAutocomplete
    */
   withLocation(start, end) {
     const location = {
@@ -500,6 +653,7 @@ export class Pattern {
    * Returns a new Pattern, which only returns haps that meet the given test.
    * @param {Function} hap_test - a function which returns false for haps to be removed from the pattern
    * @returns Pattern
+   * @noAutocomplete
    */
   filterHaps(hap_test) {
     return new Pattern((state) => this.query(state).filter(hap_test));
@@ -510,6 +664,7 @@ export class Pattern {
    * inside haps.
    * @param {Function} value_test
    * @returns Pattern
+   * @noAutocomplete
    */
   filterValues(value_test) {
     return new Pattern((state) => this.query(state).filter((hap) => value_test(hap.value)));
@@ -519,6 +674,7 @@ export class Pattern {
    * Returns a new pattern, with haps containing undefined values removed from
    * query results.
    * @returns Pattern
+   * @noAutocomplete
    */
   removeUndefineds() {
     return this.filterValues((val) => val != undefined);
@@ -529,6 +685,7 @@ export class Pattern {
    * with an onset is one with a `whole` timespan that begins at the same time
    * as its `part` timespan.
    * @returns Pattern
+   * @noAutocomplete
    */
   onsetsOnly() {
     // Returns a new pattern that will only return haps where the start
@@ -541,6 +698,7 @@ export class Pattern {
    * Returns a new pattern, with 'continuous' haps (those without 'whole'
    * timespans) removed from query results.
    * @returns Pattern
+   * @noAutocomplete
    */
   discreteOnly() {
     // removes continuous haps that don't have a 'whole' timespan
@@ -550,6 +708,7 @@ export class Pattern {
   /**
    * Combines adjacent haps with the same value and whole.  Only
    * intended for use in tests.
+   * @noAutocomplete
    */
   defragmentHaps() {
     // remove continuous haps
@@ -604,6 +763,7 @@ export class Pattern {
    * @param {Boolean} with_context - set to true, otherwise the context field
    * will be stripped from the resulting haps.
    * @returns [Hap]
+   * @noAutocomplete
    */
   firstCycle(with_context = false) {
     var self = this;
@@ -615,13 +775,17 @@ export class Pattern {
 
   /**
    * Accessor for a list of values returned by querying the first cycle.
+   * @noAutocomplete
    */
   get firstCycleValues() {
-    return this.firstCycle().map((hap) => hap.value);
+    return this.sortHapsByPart()
+      .firstCycle()
+      .map((hap) => hap.value);
   }
 
   /**
    * More human-readable version of the {@link Pattern#firstCycleValues} accessor.
+   * @noAutocomplete
    */
   get showFirstCycle() {
     return this.firstCycle().map(
@@ -633,6 +797,7 @@ export class Pattern {
    * Returns a new pattern, which returns haps sorted in temporal order. Mainly
    * of use when comparing two patterns for equality, in tests.
    * @returns Pattern
+   * @noAutocomplete
    */
   sortHapsByPart() {
     return this.withHaps((haps) =>
@@ -665,7 +830,7 @@ export class Pattern {
     const otherPat = reify(other);
     return this.fmap((a) => otherPat.fmap((b) => func(a)(b))).squeezeJoin();
   }
-  _opSqueezeOut(other, func) {
+  _opSqueezeout(other, func) {
     const thisPat = this;
     const otherPat = reify(other);
     return otherPat.fmap((a) => thisPat.fmap((b) => func(b)(a))).squeezeJoin();
@@ -812,7 +977,7 @@ export class Pattern {
 }
 
 //////////////////////////////////////////////////////////////////////
-// functions relating to chords/patterns of lists
+// functions relating to chords/patterns of lists/lists of patterns
 
 // returns Array<Hap[]> where each list of haps satisfies eq
 function groupHapsBy(eq, haps) {
@@ -832,11 +997,11 @@ function groupHapsBy(eq, haps) {
 const congruent = (a, b) => a.spanEquals(b);
 // Pattern<Hap<T>> -> Pattern<Hap<T[]>>
 // returned pattern contains arrays of congruent haps
-Pattern.prototype.collect = function () {
+addToPrototype('collect', function () {
   return this.withHaps((haps) =>
     groupHapsBy(congruent, haps).map((_haps) => new Hap(_haps[0].whole, _haps[0].part, _haps, {})),
   );
-};
+});
 
 /**
  * Selects indices in in stacked notes.
@@ -844,12 +1009,12 @@ Pattern.prototype.collect = function () {
  * note("<[c,eb,g]!2 [c,f,ab] [d,f,ab]>")
  * .arpWith(haps => haps[2])
  * */
-Pattern.prototype.arpWith = function (func) {
+addToPrototype('arpWith', function (func) {
   return this.collect()
     .fmap((v) => reify(func(v)))
     .innerJoin()
     .withHap((h) => new Hap(h.whole, h.part, h.value.value, h.combineContext(h.value)));
-};
+});
 
 /**
  * Selects indices in in stacked notes.
@@ -857,9 +1022,38 @@ Pattern.prototype.arpWith = function (func) {
  * note("<[c,eb,g]!2 [c,f,ab] [d,f,ab]>")
  * .arp("0 [0,2] 1 [0,2]").slow(2)
  * */
-Pattern.prototype.arp = function (pat) {
+addToPrototype('arp', function (pat) {
   return this.arpWith((haps) => pat.fmap((i) => haps[i % haps.length]));
-};
+});
+
+/**
+ * Takes a time duration followed by one or more patterns, and shifts the given patterns in time, so they are
+ * distributed equally over the given time duration. They are then combined with the pattern 'weave' is called on, after it has been stretched out (i.e. slowed down by) the time duration.
+ * @name weave
+ * @memberof Pattern
+ * @example pan(saw).weave(4, s("bd(3,8)"), s("~ sd"))
+ * @example n("0 1 2 3 4 5 6 7").weave(8, s("bd(3,8)"), s("~ sd"))
+ */
+
+addToPrototype('weave', function (t, ...pats) {
+  return this.weaveWith(t, ...pats.map((x) => set.out(x)));
+});
+
+/**
+ * Like 'weave', but accepts functions rather than patterns, which are applied to the pattern.
+ * @name weaveWith
+ * @memberof Pattern
+ */
+
+addToPrototype('weaveWith', function (t, ...funcs) {
+  const pat = this;
+  const l = funcs.length;
+  t = Fraction(t);
+  if (l == 0) {
+    return silence;
+  }
+  return stack(...funcs.map((func, i) => pat.inside(t, func).early(Fraction(i).div(l))))._slow(t);
+});
 
 //////////////////////////////////////////////////////////////////////
 // compose matrix functions
@@ -957,15 +1151,15 @@ function _composeOp(a, b, func) {
     func: [(a, b) => b(a)],
   };
 
-  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Trig', 'Trigzero'];
+  const hows = alignments.map((x) => x.charAt(0).toUpperCase() + x.slice(1));
 
   // generate methods to do what and how
   for (const [what, [op, preprocess]] of Object.entries(composers)) {
     // make plain version, e.g. pat._add(value) adds that plain value
     // to all the values in pat
-    Pattern.prototype['_' + what] = function (value) {
+    addToPrototype('_' + what, function (value) {
       return this.fmap((x) => op(x, value));
-    };
+    });
 
     // make patternified monster version
     Object.defineProperty(Pattern.prototype, what, {
@@ -979,7 +1173,7 @@ function _composeOp(a, b, func) {
 
         // add methods to that function for each behaviour
         for (const how of hows) {
-          wrapper[how.toLowerCase()] = function (...other) {
+          const howfunc = function (...other) {
             var howpat = pat;
             other = sequence(other);
             if (preprocess) {
@@ -997,19 +1191,41 @@ function _composeOp(a, b, func) {
             }
             return result;
           };
+
+          for (const [controlname, controlfunc] of controlRegistry) {
+            howfunc[controlname] = (...args) => howfunc(controlfunc(...args));
+          }
+          wrapper[how.toLowerCase()] = howfunc;
         }
         wrapper.squeezein = wrapper.squeeze;
 
+        for (const [controlname, controlfunc] of controlRegistry) {
+          wrapper[controlname] = (...args) => wrapper.in(controlfunc(...args));
+        }
+
         return wrapper;
       },
     });
 
-    // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
-    for (const how of hows) {
-      Pattern.prototype[how.toLowerCase()] = function (...args) {
-        return this.set[how.toLowerCase()](args);
-      };
-    }
+    registerMethod(what, true, true);
+  }
+
+  // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
+  for (const howLower of alignments) {
+    // Using a 'get'ted function so that all the controls are added
+    Object.defineProperty(Pattern.prototype, howLower, {
+      get: function () {
+        const pat = this;
+        const howfunc = function (...args) {
+          return pat.set[howLower](args);
+        };
+        for (const [controlname, controlfunc] of controlRegistry) {
+          howfunc[controlname] = (...args) => howfunc(controlfunc(...args));
+        }
+        return howfunc;
+      },
+    });
+    registerMethod(howLower, false, true);
   }
 
   // binary composers
@@ -1021,36 +1237,36 @@ function _composeOp(a, b, func) {
    *   .struct("x ~ x ~ ~ x ~ x ~ ~ ~ x ~ x ~ ~")
    *   .slow(4)
    */
-  Pattern.prototype.struct = function (...args) {
+  addToPrototype('struct', function (...args) {
     return this.keepif.out(...args);
-  };
-  Pattern.prototype.structAll = function (...args) {
+  });
+  addToPrototype('structAll', function (...args) {
     return this.keep.out(...args);
-  };
+  });
   /**
    * Returns silence when mask is 0 or "~"
    *
    * @example
    * note("c [eb,g] d [eb,g]").mask("<1 [0 1]>").slow(2)
    */
-  Pattern.prototype.mask = function (...args) {
+  addToPrototype('mask', function (...args) {
     return this.keepif.in(...args);
-  };
-  Pattern.prototype.maskAll = function (...args) {
+  });
+  addToPrototype('maskAll', function (...args) {
     return this.keep.in(...args);
-  };
+  });
   /**
    * Resets the pattern to the start of the cycle for each onset of the reset pattern.
    *
    * @example
    * s("<bd lt> sd, hh*4").reset("<x@3 x(3,8)>")
    */
-  Pattern.prototype.reset = function (...args) {
+  addToPrototype('reset', function (...args) {
     return this.keepif.trig(...args);
-  };
-  Pattern.prototype.resetAll = function (...args) {
+  });
+  addToPrototype('resetAll', function (...args) {
     return this.keep.trig(...args);
-  };
+  });
   /**
    * Restarts the pattern for each onset of the restart pattern.
    * While reset will only reset the current cycle, restart will start from cycle 0.
@@ -1058,12 +1274,12 @@ function _composeOp(a, b, func) {
    * @example
    * s("<bd lt> sd, hh*4").restart("<x@3 x(3,8)>")
    */
-  Pattern.prototype.restart = function (...args) {
+  addToPrototype('restart', function (...args) {
     return this.keepif.trigzero(...args);
-  };
-  Pattern.prototype.restartAll = function (...args) {
+  });
+  addToPrototype('restartAll', function (...args) {
     return this.keep.trigzero(...args);
-  };
+  });
 })();
 
 // aliases
@@ -1103,6 +1319,7 @@ export const silence = new Pattern(() => []);
  * @returns {Pattern}
  * @example
  * pure('e4') // "e4"
+ * @noAutocomplete
  */
 export function pure(value) {
   function query(state) {
@@ -1307,74 +1524,123 @@ export function pm(...args) {
   polymeter(...args);
 }
 
-export const mask = curry((a, b) => reify(b).mask(a));
-export const struct = curry((a, b) => reify(b).struct(a));
-export const superimpose = curry((a, b) => reify(b).superimpose(...a));
+export const mask = curryPattern((a, b) => reify(b).mask(a));
+export const struct = curryPattern((a, b) => reify(b).struct(a));
+export const superimpose = curryPattern((a, b) => reify(b).superimpose(...a));
+
+const methodToFunction = function (name, addAlignments = false) {
+  const func = curryPattern((a, b) => reify(b)[name](a));
+
+  withControls((controlname, controlfunc) => {
+    func[controlname] = function (...pats) {
+      return func(controlfunc(...pats));
+    };
+  });
+
+  if (addAlignments) {
+    for (const alignment of alignments) {
+      func[alignment] = curryPattern((a, b) => reify(b)[name][alignment](a));
+      withControls((controlname, controlfunc) => {
+        func[alignment][controlname] = function (...pats) {
+          return func[alignment](controlfunc(...pats));
+        };
+      });
+    }
+  }
+
+  return func;
+};
 
 // operators
-export const set = curry((a, b) => reify(b).set(a));
-export const keep = curry((a, b) => reify(b).keep(a));
-export const keepif = curry((a, b) => reify(b).keepif(a));
-export const add = curry((a, b) => reify(b).add(a));
-export const sub = curry((a, b) => reify(b).sub(a));
-export const mul = curry((a, b) => reify(b).mul(a));
-export const div = curry((a, b) => reify(b).div(a));
-export const mod = curry((a, b) => reify(b).mod(a));
-export const pow = curry((a, b) => reify(b).pow(a));
-export const band = curry((a, b) => reify(b).band(a));
-export const bor = curry((a, b) => reify(b).bor(a));
-export const bxor = curry((a, b) => reify(b).bxor(a));
-export const blshift = curry((a, b) => reify(b).blshift(a));
-export const brshift = curry((a, b) => reify(b).brshift(a));
-export const lt = curry((a, b) => reify(b).lt(a));
-export const gt = curry((a, b) => reify(b).gt(a));
-export const lte = curry((a, b) => reify(b).lte(a));
-export const gte = curry((a, b) => reify(b).gte(a));
-export const eq = curry((a, b) => reify(b).eq(a));
-export const eqt = curry((a, b) => reify(b).eqt(a));
-export const ne = curry((a, b) => reify(b).ne(a));
-export const net = curry((a, b) => reify(b).net(a));
-export const and = curry((a, b) => reify(b).and(a));
-export const or = curry((a, b) => reify(b).or(a));
-export const func = curry((a, b) => reify(b).func(a));
+export const set = methodToFunction('set', true);
+export const keep = methodToFunction('keep', true);
+export const keepif = methodToFunction('keepif', true);
+export const add = methodToFunction('add', true);
+export const sub = methodToFunction('sub', true);
+export const mul = methodToFunction('mul', true);
+export const div = methodToFunction('div', true);
+export const mod = methodToFunction('mod', true);
+export const pow = methodToFunction('pow', true);
+export const band = methodToFunction('band', true);
+export const bor = methodToFunction('bor', true);
+export const bxor = methodToFunction('bxor', true);
+export const blshift = methodToFunction('blshift', true);
+export const brshift = methodToFunction('brshift', true);
+export const lt = methodToFunction('lt', true);
+export const gt = methodToFunction('gt', true);
+export const lte = methodToFunction('lte', true);
+export const gte = methodToFunction('gte', true);
+export const eq = methodToFunction('eq', true);
+export const eqt = methodToFunction('eqt', true);
+export const ne = methodToFunction('ne', true);
+export const net = methodToFunction('net', true);
+export const and = methodToFunction('and', true);
+export const or = methodToFunction('or', true);
+export const func = methodToFunction('func', true);
+
+// alignments
+// export const in = methodToFunction('in'); // reserved word :(
+export const out = methodToFunction('out');
+export const mix = methodToFunction('mix');
+export const squeeze = methodToFunction('squeeze');
+export const squeezeout = methodToFunction('squeezeout');
+export const trig = methodToFunction('trig');
+export const trigzero = methodToFunction('trigzero');
 
 /**
  * Registers a new pattern method. The method is added to the Pattern class + the standalone function is returned from register.
  *
  * @param {string} name name of the function
  * @param {function} func function with 1 or more params, where last is the current pattern
+ * @noAutocomplete
  *
  */
-export function register(name, func) {
+export function register(name, func, patternify = true) {
   if (Array.isArray(name)) {
     const result = {};
     for (const name_item of name) {
-      result[name_item] = register(name_item, func);
+      result[name_item] = register(name_item, func, patternify);
     }
     return result;
   }
   const arity = func.length;
-  var pfunc; // the patternified function
 
-  pfunc = function (...args) {
-    args = args.map(reify);
-    const pat = args[args.length - 1];
-    if (arity === 1) {
-      return func(pat);
-    }
-    const [left, ...right] = args.slice(0, -1);
-    let mapFn = (...args) => {
-      // make sure to call func with the correct argument count
-      // args.length is expected to be <= arity-1
-      // so we set undefined args explicitly undefined
-      Array(arity - 1)
-        .fill()
-        .map((_, i) => args[i] ?? undefined);
-      return func(...args, pat);
+  registerMethod(name);
+
+  var pfunc;
+
+  if (patternify) {
+    pfunc = function (...args) {
+      args = args.map(reify);
+      const pat = args[args.length - 1];
+      if (arity === 1) {
+        return func(pat);
+      }
+      const [left, ...right] = args.slice(0, -1);
+      let mapFn = (...args) => {
+        // make sure to call func with the correct argument count
+        // args.length is expected to be <= arity-1
+        // so we set undefined args explicitly undefined
+        Array(arity - 1)
+          .fill()
+          .map((_, i) => args[i] ?? undefined);
+        return func(...args, pat);
+      };
+      mapFn = curryPattern(mapFn, arity - 1);
+
+      const app = function (acc, p, i) {
+        return acc.appLeft(p);
+      };
+      const start = left.fmap(mapFn);
+
+      return right.reduce(app, start).innerJoin();
     };
-    mapFn = curry(mapFn, null, arity - 1);
-    return right.reduce((acc, p) => acc.appLeft(p), left.fmap(mapFn)).innerJoin();
-  };
+  } else {
+    pfunc = function (...args) {
+      args = args.map(reify);
+      return func(...args);
+    };
+  }
 
   Pattern.prototype[name] = function (...args) {
     args = args.map(reify);
@@ -1398,7 +1664,7 @@ export function register(name, func) {
 
   // toplevel functions get curried as well as patternified
   // because pfunc uses spread args, we need to state the arity explicitly!
-  return curry(pfunc, null, arity);
+  return curryPattern(pfunc, arity);
 }
 
 //////////////////////////////////////////////////////////////////////
@@ -1448,15 +1714,17 @@ export const ceil = register('ceil', function (pat) {
  * 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
+ * @noAutocomplete
  */
 export const toBipolar = register('toBipolar', function (pat) {
   return pat.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
+ * 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
+ * @noAutocomplete
  */
 export const fromBipolar = register('fromBipolar', function (pat) {
   return pat.fmap((x) => (x + 1) / 2);
@@ -2162,6 +2430,59 @@ const _loopAt = function (factor, pat, cps = 1) {
     .slow(factor);
 };
 
+/**
+ * Chops samples into the given number of slices, triggering those slices with a given pattern of slice numbers.
+ * @name slice
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * await samples('github:tidalcycles/Dirt-Samples/master')
+ * s("breaks165").slice(8, "0 1 <2 2*2> 3 [4 0] 5 6 7".every(3, rev)).slow(1.5)
+ */
+const slice = register(
+  'slice',
+  function (npat, ipat, opat) {
+    return npat.innerBind((n) =>
+      ipat.outerBind((i) =>
+        opat.outerBind((o) => {
+          // If it's not an object, assume it's a string and make it a 's' control parameter
+          o = o instanceof Object ? o : { s: o };
+          // Remember we must stay pure and avoid editing the object directly
+          const toAdd = { begin: i / n, end: (i + 1) / n, _slices: n };
+          return pure({ ...toAdd, ...o });
+        }),
+      ),
+    );
+  },
+  false, // turns off auto-patternification
+);
+
+/**
+ * Works the same as slice, but changes the playback speed of each slice to match the duration of its step.
+ * @name splice
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * await samples('github:tidalcycles/Dirt-Samples/master')
+ * s("breaks165").splice(8,  "0 1 [2 3 0]@2 3 0@2 7").hurry(0.65)
+ */
+const splice = register(
+  'splice',
+  function (npat, ipat, opat) {
+    const sliced = slice(npat, ipat, opat);
+    return sliced.withHap(function (hap) {
+      return hap.withValue((v) => ({
+        ...{
+          speed: (1 / v._slices / hap.whole.duration) * (v.speed || 1),
+          unit: 'c',
+        },
+        ...v,
+      }));
+    });
+  },
+  false, // turns off auto-patternification
+);
+
 const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
   return _loopAt(factor, pat, 1);
 });

packages/core/test/pattern.test.mjs

@@ -45,6 +45,9 @@ import {
   rev,
   time,
   run,
+  hitch,
+  set,
+  begin,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -204,7 +207,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(
         sequence(1, [2, 3]).add.squeezeout(10, 20, 30),
         sequence([11, [12, 13]], [21, [22, 23]], [31, [32, 33]]),
@@ -252,7 +255,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(sequence(1, [2, 3]).keep.squeezeout(10, 20, 30), sequence([1, [2, 3]], [1, [2, 3]], [1, [2, 3]]));
     });
   });
@@ -294,7 +297,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(sequence(1, [2, 3]).keepif.squeezeout(true, true, false), sequence([1, [2, 3]], [1, [2, 3]], silence));
     });
   });
@@ -929,6 +932,14 @@ describe('Pattern', () => {
     });
   });
   describe('alignments', () => {
+    it('Can combine controls', () => {
+      sameFirst(s('bd').set.in.n(3), s('bd').n(3));
+      sameFirst(s('bd').set.squeeze.n(3, 4), sequence(s('bd').n(3), s('bd').n(4)));
+    });
+    it('Can combine functions with alignmed controls', () => {
+      sameFirst(s('bd').apply(fast(2).set(n(3))), s('bd').fast(2).set.in.n(3));
+      sameFirst(s('bd').apply(fast(2).set.in.n(3)), s('bd').fast(2).set.in.n(3));
+    });
     it('Can squeeze arguments', () => {
       expect(sequence(1, 2).add.squeeze(4, 5).firstCycle()).toStrictEqual(sequence(5, 6, 6, 7).firstCycle());
     });
@@ -959,4 +970,47 @@ describe('Pattern', () => {
       sameFirst(s('a', 'b').hurry(2), s('a', 'b').fast(2).speed(2));
     });
   });
+  describe('composable functions', () => {
+    it('Can compose functions', () => {
+      sameFirst(sequence(3, 4).fast(2).rev().fast(2), fast(2).rev().fast(2)(sequence(3, 4)));
+    });
+    it('Can compose by method chaining operators with controls', () => {
+      sameFirst(s('bd').apply(set.n(3).fast(2)), s('bd').set.n(3).fast(2));
+    });
+    it('Can compose by method chaining operators and alignments with controls', () => {
+      sameFirst(s('bd').apply(set.in.n(3).fast(2)), s('bd').set.n(3).fast(2));
+      //      sameFirst(s('bd').apply(set.squeeze.n(3).fast(2)), s('bd').set.squeeze.n(3).fast(2));
+    });
+  });
+  describe('weave', () => {
+    it('Can distribute patterns along a pattern', () => {
+      sameFirst(n(0, 1).weave(2, s('bd', silence), s(silence, 'sd')), sequence(s('bd').n(0), s('sd').n(1)));
+    });
+  });
+  describe('slice', () => {
+    it('Can slice a sample', () => {
+      sameFirst(
+        s('break').slice(4, sequence(0, 1, 2, 3)),
+        sequence(
+          { begin: 0, end: 0.25, s: 'break', _slices: 4 },
+          { begin: 0.25, end: 0.5, s: 'break', _slices: 4 },
+          { begin: 0.5, end: 0.75, s: 'break', _slices: 4 },
+          { begin: 0.75, end: 1, s: 'break', _slices: 4 },
+        ),
+      );
+    });
+  });
+  describe('splice', () => {
+    it('Can splice a sample', () => {
+      sameFirst(
+        s('break').splice(4, sequence(0, 1, 2, 3)),
+        sequence(
+          { begin: 0, end: 0.25, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.25, end: 0.5, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.5, end: 0.75, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+          { begin: 0.75, end: 1, s: 'break', _slices: 4, unit: 'c', speed: 1 },
+        ),
+      );
+    });
+  });
 });

packages/core/util.mjs

@@ -58,6 +58,7 @@ export const valueToMidi = (value, fallbackValue) => {
 
 /**
  * @deprecated does not appear to be referenced or invoked anywhere in the codebase
+ * @noAutocomplete
  */
 export const getFreq = (noteOrMidi) => {
   if (typeof noteOrMidi === 'number') {
@@ -68,6 +69,7 @@ export const getFreq = (noteOrMidi) => {
 
 /**
  * @deprecated does not appear to be referenced or invoked anywhere in the codebase
+ * @noAutocomplete
  */
 export const midi2note = (n) => {
   const oct = Math.floor(n / 12) - 1;
@@ -137,7 +139,7 @@ export const removeUndefineds = (xs) => xs.filter((x) => x != undefined);
 export const flatten = (arr) => [].concat(...arr);
 
 export const id = (a) => a;
-export const constant = (a, b) => a;
+export const constant = curry((a, b) => a);
 
 export const listRange = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => i + min);
 
@@ -204,3 +206,9 @@ export function parseFractional(numOrString) {
 }
 
 export const fractionalArgs = (fn) => mapArgs(fn, parseFractional);
+
+export const splitAt = function (index, value) {
+  return [value.slice(0, index), value.slice(index)];
+};
+
+export const zipWith = (f, xs, ys) => xs.map((n, i) => f(n, ys[i]));

packages/csound/index.mjs

@@ -92,6 +92,7 @@ async function load() {
     ['message'].forEach((k) => _csound.on(k, (...args) => eventLogger(k, args)));
     await _csound.setOption('-m0d'); // see -m flag https://csound.com/docs/manual/CommandFlags.html
     await _csound.setOption('--sample-accurate');
+    await _csound.setOption('-odac');
     await _csound.compileCsdText(csd);
     // await _csound.compileOrc(livecodeOrc);
     await _csound.compileOrc(presetsOrc);

packages/csound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/csound",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@csound/browser": "^6.18.3",
+    "@csound/browser": "6.18.5",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*"
   },

packages/osc/osc.mjs

@@ -39,14 +39,15 @@ let startedAt = -1;
 /**
  *
  * Sends each hap as an OSC message, which can be picked up by SuperCollider or any other OSC-enabled software.
+ * For more info, read [MIDI & OSC in the docs](https://strudel.tidalcycles.org/learn/input-output)
  *
  * @name osc
  * @memberof Pattern
  * @returns Pattern
  */
-Pattern.prototype.osc = async function () {
-  const osc = await connect();
-  return this.onTrigger((time, hap, currentTime, cps = 1) => {
+Pattern.prototype.osc = function () {
+  return this.onTrigger(async (time, hap, currentTime, cps = 1) => {
+    const osc = await connect();
     const cycle = hap.wholeOrPart().begin.valueOf();
     const delta = hap.duration.valueOf();
     // time should be audio time of onset

packages/react/package.json

@@ -32,10 +32,13 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
+    "@codemirror/autocomplete": "^6.4.0",
     "@codemirror/lang-javascript": "^6.1.1",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.3",
     "@lezer/highlight": "^1.1.3",
+    "@replit/codemirror-emacs": "^6.0.0",
+    "@replit/codemirror-vim": "^6.0.6",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",

packages/react/src/components/Autocomplete.jsx

@@ -0,0 +1,77 @@
+import { createRoot } from 'react-dom/client';
+import jsdoc from '../../../../doc.json';
+
+const getDocLabel = (doc) => doc.name || doc.longname;
+const getInnerText = (html) => {
+  var div = document.createElement('div');
+  div.innerHTML = html;
+  return div.textContent || div.innerText || '';
+};
+
+export function Autocomplete({ doc }) {
+  return (
+    <div className="prose dark:prose-invert  max-h-[400px] overflow-auto">
+      <h3 className="pt-0 mt-0">{getDocLabel(doc)}</h3>
+      <div dangerouslySetInnerHTML={{ __html: doc.description }} />
+      <ul>
+        {doc.params?.map(({ name, type, description }, i) => (
+          <li key={i}>
+            {name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
+          </li>
+        ))}
+      </ul>
+      <div>
+        {doc.examples?.map((example, i) => (
+          <div key={i}>
+            <pre
+              className="cursor-pointer"
+              onMouseDown={(e) => {
+                console.log('ola!');
+                navigator.clipboard.writeText(example);
+                e.stopPropagation();
+              }}
+            >
+              {example}
+            </pre>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const jsdocCompletions = jsdoc.docs
+  .filter(
+    (doc) =>
+      getDocLabel(doc) &&
+      !getDocLabel(doc).startsWith('_') &&
+      !['package'].includes(doc.kind) &&
+      !['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag)),
+  )
+  // https://codemirror.net/docs/ref/#autocomplete.Completion
+  .map((doc) /*: Completion */ => ({
+    label: getDocLabel(doc),
+    // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
+    info: () => {
+      const node = document.createElement('div');
+      // if Autocomplete is non-interactive, it could also be rendered at build time..
+      // .. using renderToStaticMarkup
+      createRoot(node).render(<Autocomplete doc={doc} />);
+      return node;
+    },
+    type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type
+  }));
+
+export const strudelAutocomplete = (context /* : CompletionContext */) => {
+  let word = context.matchBefore(/\w*/);
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from,
+    options: jsdocCompletions,
+    /*     options: [
+      { label: 'match', type: 'keyword' },
+      { label: 'hello', type: 'variable', info: '(World)' },
+      { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
+    ], */
+  };
+};

packages/react/src/components/CodeMirror6.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
@@ -6,6 +6,10 @@ import { javascript } from '@codemirror/lang-javascript';
 import strudelTheme from '../themes/strudel-theme';
 import './style.css';
 import { useCallback } from 'react';
+import { autocompletion } from '@codemirror/autocomplete';
+import { strudelAutocomplete } from './Autocomplete';
+import { vim } from '@replit/codemirror-vim';
+import { emacs } from '@replit/codemirror-emacs';
 
 export const setFlash = StateEffect.define();
 const flashField = StateField.define({
@@ -49,19 +53,20 @@ const highlightField = StateField.define({
     try {
       for (let e of tr.effects) {
         if (e.is(setHighlights)) {
+          const { haps } = e.value;
           const marks =
-            e.value
+            haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || '#FFCA28';
+                  // const color = hap.context.color || e.value.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; // 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: 1.5px solid ${color};` } });
+                  //const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
+                  const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
                   return mark.range(from, to);
                 }),
               )
@@ -79,9 +84,27 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-const extensions = [javascript(), strudelTheme, highlightField, flashField];
+const staticExtensions = [
+  javascript(),
+  highlightField,
+  flashField,
+  // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
+  // autocompletion({ override: [strudelAutocomplete] }),
+  autocompletion({ override: [] }), // wait for https://github.com/uiwjs/react-codemirror/pull/458
+];
 
-export default function CodeMirror({ value, onChange, onViewChanged, onSelectionChange, options, editorDidMount }) {
+export default function CodeMirror({
+  value,
+  onChange,
+  onViewChanged,
+  onSelectionChange,
+  theme,
+  keybindings,
+  fontSize = 18,
+  fontFamily = 'monospace',
+  options,
+  editorDidMount,
+}) {
   const handleOnChange = useCallback(
     (value) => {
       onChange?.(value);
@@ -102,16 +125,27 @@ export default function CodeMirror({ value, onChange, onViewChanged, onSelection
     },
     [onSelectionChange],
   );
+  const extensions = useMemo(() => {
+    let bindings = {
+      vim,
+      emacs,
+    };
+    if (bindings[keybindings]) {
+      return [...staticExtensions, bindings[keybindings]()];
+    }
+    return staticExtensions;
+  }, [keybindings]);
   return (
-    <>
+    <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
         value={value}
+        theme={theme || strudelTheme}
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
       />
-    </>
+    </div>
   );
 }
 

packages/react/src/components/MiniRepl.jsx

@@ -10,10 +10,20 @@ import { Icon } from './Icon';
 import styles from './MiniRepl.module.css';
 import './style.css';
 import { logger } from '@strudel.cycles/core';
+import useEvent from '../hooks/useEvent.mjs';
+import useKeydown from '../hooks/useKeydown.mjs';
 
 const getTime = () => getAudioContext().currentTime;
 
-export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, punchcard, canvasHeight = 200 }) {
+export function MiniRepl({
+  tune,
+  hideOutsideView = false,
+  enableKeyboard,
+  drawTime,
+  punchcard,
+  canvasHeight = 200,
+  theme,
+}) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
   const drawContext = useCallback(
@@ -63,6 +73,27 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
     getTime: () => scheduler.now(),
   });
 
+  // keyboard shortcuts
+  useKeydown(
+    useCallback(
+      async (e) => {
+        if (view?.hasFocus) {
+          if (e.ctrlKey || e.altKey) {
+            if (e.code === 'Enter') {
+              e.preventDefault();
+              flash(view);
+              await activateCode();
+            } else if (e.code === 'Period') {
+              stop();
+              e.preventDefault();
+            }
+          }
+        }
+      },
+      [activateCode, stop, view],
+    ),
+  );
+
   // set active pattern on ctrl+enter
   useLayoutEffect(() => {
     if (enableKeyboard) {
@@ -111,7 +142,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
         {error && <div className={styles.error}>{error.message}</div>}
       </div>
       <div className={styles.body}>
-        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
+        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
       </div>
       {drawTime && (
         <canvas
@@ -140,13 +171,3 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
 function useLogger(onTrigger) {
   useEvent(logger.key, onTrigger);
 }
-
-// TODO: dedupe
-function useEvent(name, onTrigger, useCapture = false) {
-  useEffect(() => {
-    document.addEventListener(name, onTrigger, useCapture);
-    return () => {
-      document.removeEventListener(name, onTrigger, useCapture);
-    };
-  }, [onTrigger]);
-}

packages/react/src/components/MiniRepl.module.css

@@ -1,9 +1,9 @@
 .container {
-  @apply rounded-md overflow-hidden bg-[#222222];
+  @apply overflow-hidden;
 }
 
 .header {
-  @apply flex justify-between bg-slate-700 border-t border-slate-500;
+  @apply flex justify-between bg-lineHighlight border-t border-l border-r border-lineHighlight rounded-t-md overflow-hidden;
 }
 
 .buttons {
@@ -11,11 +11,11 @@
 }
 
 .button {
-  @apply cursor-pointer w-16 flex items-center justify-center p-1 bg-slate-700 border-r border-slate-500  text-white hover:bg-slate-600;
+  @apply cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground hover:bg-background;
 }
 
 .buttonDisabled {
-  @apply w-16 flex items-center justify-center p-1 bg-slate-600 text-slate-400 cursor-not-allowed;
+  @apply w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight;
 }
 
 .error {

packages/react/src/components/style.css

@@ -2,13 +2,13 @@
   background-color: transparent !important;
   height: 100%;
   z-index: 11;
-  font-size: 18px;
+}
+
+.cm-theme {
+  width: 100%;
+  height: 100%;
 }
 
 .cm-theme-light {
   width: 100%;
 }
-
-.cm-line > * {
-  background: #00000095;
-}

packages/react/src/hooks/useEvent.mjs

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+function useEvent(name, onTrigger, useCapture = false) {
+  useEffect(() => {
+    document.addEventListener(name, onTrigger, useCapture);
+    return () => {
+      document.removeEventListener(name, onTrigger, useCapture);
+    };
+  }, [onTrigger]);
+}
+
+export default useEvent;

packages/react/src/hooks/useHighlighting.mjs

@@ -19,9 +19,9 @@ function useHighlighting({ view, pattern, active, getTime }) {
             highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
             const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
             highlights.current = highlights.current.concat(haps); // add potential new onsets
-            view.dispatch({ effects: setHighlights.of(highlights.current) }); // highlight all still active + new active haps
+            view.dispatch({ effects: setHighlights.of({ haps: highlights.current }) }); // highlight all still active + new active haps
           } catch (err) {
-            view.dispatch({ effects: setHighlights.of([]) });
+            view.dispatch({ effects: setHighlights.of({ haps: [] }) });
           }
           frame = requestAnimationFrame(updateHighlights);
         });
@@ -30,7 +30,7 @@ function useHighlighting({ view, pattern, active, getTime }) {
         };
       } else {
         highlights.current = [];
-        view.dispatch({ effects: setHighlights.of([]) });
+        view.dispatch({ effects: setHighlights.of({ haps: [] }) });
       }
     }
   }, [pattern, active, view]);

packages/react/src/hooks/useStrudel.mjs

@@ -10,7 +10,6 @@ function useStrudel({
   getTime,
   evalOnMount = false,
   initialCode = '',
-  autolink = false,
   beforeEval,
   afterEval,
   editPattern,
@@ -51,15 +50,13 @@ function useStrudel({
           setCode(code);
           beforeEval?.();
         },
-        afterEval: ({ pattern: _pattern, code }) => {
+        afterEval: (res) => {
+          const { pattern: _pattern, code } = res;
           setActiveCode(code);
           setPattern(_pattern);
           setEvalError();
           setSchedulerError();
-          if (autolink) {
-            window.location.hash = '#' + encodeURIComponent(btoa(code));
-          }
-          afterEval?.();
+          afterEval?.(res);
         },
         onToggle: (v) => {
           setStarted(v);

packages/react/src/index.js

@@ -1,9 +1,11 @@
 // import 'tailwindcss/tailwind.css';
 
-export { default as CodeMirror, flash } from './components/CodeMirror6';
-export * from './components/MiniRepl';
-export { default as useHighlighting } from './hooks/useHighlighting';
+export { default as CodeMirror, flash } from './components/CodeMirror6'; // !SSR
+export * from './components/MiniRepl'; // !SSR
+export { default as useHighlighting } from './hooks/useHighlighting'; // !SSR
+export { default as useStrudel } from './hooks/useStrudel'; // !SSR
 export { default as usePostMessage } from './hooks/usePostMessage';
-export { default as useStrudel } from './hooks/useStrudel';
 export { default as useKeydown } from './hooks/useKeydown';
+export { default as useEvent } from './hooks/useEvent';
+export { default as strudelTheme } from './themes/strudel-theme';
 export { default as cx } from './cx';

packages/react/src/themes/algoboy.js

@@ -0,0 +1,39 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: '#9bbc0f',
+  foreground: '#0f380f', // whats that?
+  caret: '#0f380f',
+  selection: '#306230',
+  selectionMatch: '#ffffff26',
+  lineHighlight: '#8bac0f',
+  lineBackground: '#9bbc0f50',
+  //lineBackground: 'transparent',
+  gutterBackground: 'transparent',
+  gutterForeground: '#0f380f',
+  light: true,
+};
+export default createTheme({
+  theme: 'light',
+  settings,
+  styles: [
+    { tag: t.keyword, color: '#0f380f' },
+    { tag: t.operator, color: '#0f380f' },
+    { tag: t.special(t.variableName), color: '#0f380f' },
+    { tag: t.typeName, color: '#0f380f' },
+    { tag: t.atom, color: '#0f380f' },
+    { tag: t.number, color: '#0f380f' },
+    { tag: t.definition(t.variableName), color: '#0f380f' },
+    { tag: t.string, color: '#0f380f' },
+    { tag: t.special(t.string), color: '#0f380f' },
+    { tag: t.comment, color: '#0f380f' },
+    { tag: t.variableName, color: '#0f380f' },
+    { tag: t.tagName, color: '#0f380f' },
+    { tag: t.bracket, color: '#0f380f' },
+    { tag: t.meta, color: '#0f380f' },
+    { tag: t.attributeName, color: '#0f380f' },
+    { tag: t.propertyName, color: '#0f380f' },
+    { tag: t.className, color: '#0f380f' },
+    { tag: t.invalid, color: '#0f380f' },
+  ],
+});

packages/react/src/themes/blackscreen.js

@@ -0,0 +1,37 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'black',
+  foreground: 'white', // whats that?
+  caret: 'white',
+  selection: '#ffffff20',
+  selectionMatch: '#036dd626',
+  lineHighlight: '#ffffff10',
+  lineBackground: '#00000050',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+};
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+  ],
+});

packages/react/src/themes/bluescreen.js

@@ -0,0 +1,40 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: '#051DB5',
+  lineBackground: '#051DB550',
+  foreground: 'white', // whats that?
+  caret: 'white',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#036dd626',
+  // lineHighlight: '#8a91991a', // original
+  lineHighlight: '#00000050',
+  gutterBackground: 'transparent',
+  // gutterForeground: '#8a919966',
+  gutterForeground: '#8a919966',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+  ],
+});

packages/react/src/themes/terminal.js

@@ -0,0 +1,36 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'black',
+  foreground: '#41FF00', // whats that?
+  caret: '#41FF00',
+  selection: '#ffffff20',
+  selectionMatch: '#036dd626',
+  lineHighlight: '#ffffff10',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+};
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: '#41FF00' },
+    { tag: t.operator, color: '#41FF00' },
+    { tag: t.special(t.variableName), color: '#41FF00' },
+    { tag: t.typeName, color: '#41FF00' },
+    { tag: t.atom, color: '#41FF00' },
+    { tag: t.number, color: '#41FF00' },
+    { tag: t.definition(t.variableName), color: '#41FF00' },
+    { tag: t.string, color: '#41FF00' },
+    { tag: t.special(t.string), color: '#41FF00' },
+    { tag: t.comment, color: '#41FF00' },
+    { tag: t.variableName, color: '#41FF00' },
+    { tag: t.tagName, color: '#41FF00' },
+    { tag: t.bracket, color: '#41FF00' },
+    { tag: t.meta, color: '#41FF00' },
+    { tag: t.attributeName, color: '#41FF00' },
+    { tag: t.propertyName, color: '#41FF00' },
+    { tag: t.className, color: '#41FF00' },
+    { tag: t.invalid, color: '#41FF00' },
+  ],
+});

packages/react/src/themes/whitescreen.js

@@ -0,0 +1,38 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+export const settings = {
+  background: 'white',
+  foreground: 'black', // whats that?
+  caret: 'black',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#ffffff26',
+  lineHighlight: '#cccccc50',
+  lineBackground: '#ffffff50',
+  gutterBackground: 'transparent',
+  gutterForeground: 'black',
+  light: true,
+};
+export default createTheme({
+  theme: 'light',
+  settings,
+  styles: [
+    { tag: t.keyword, color: 'black' },
+    { tag: t.operator, color: 'black' },
+    { tag: t.special(t.variableName), color: 'black' },
+    { tag: t.typeName, color: 'black' },
+    { tag: t.atom, color: 'black' },
+    { tag: t.number, color: 'black' },
+    { tag: t.definition(t.variableName), color: 'black' },
+    { tag: t.string, color: 'black' },
+    { tag: t.special(t.string), color: 'black' },
+    { tag: t.comment, color: 'black' },
+    { tag: t.variableName, color: 'black' },
+    { tag: t.tagName, color: 'black' },
+    { tag: t.bracket, color: 'black' },
+    { tag: t.meta, color: 'black' },
+    { tag: t.attributeName, color: 'black' },
+    { tag: t.propertyName, color: 'black' },
+    { tag: t.className, color: 'black' },
+    { tag: t.invalid, color: 'black' },
+  ],
+});

packages/tonal/tonal.mjs

@@ -123,17 +123,18 @@ export const scaleTranspose = register('scaleTranspose', function (offset /* : n
 /**
  * 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).
+ * A scale consists of a root note (e.g. `c4`, `c`, `f#`, `bb4`) followed by a [scale type](https://github.com/tonaljs/tonal/blob/main/packages/scale-type/data.ts).
+ * The root note defaults to octave 3, if no octave number is given.
+ * Note that you currently cannot pattern `scale` with the mini notation, because the scale name includes a space.
+ * This will be improved in the future. Until then, use a sequence function like `cat` or `seq`.
  *
  * @memberof Pattern
  * @name scale
  * @param {string} scale Name of scale
  * @returns Pattern
  * @example
+ * "0 2 4 6 4 2".scale('C2 major').note()
+ * @example
  * "0 2 4 6 4 2"
  * .scale(seq('C2 major', 'C2 minor').slow(2))
  * .note()

packages/webaudio/sampler.mjs

@@ -111,7 +111,9 @@ let sampleCache = { current: undefined };
 
 /**
  * Loads a collection of samples to use with `s`
- *
+ * @example
+ * samples('github:tidalcycles/Dirt-Samples/master');
+ * s("[bd ~]*2, [~ hh]*2, ~ sd")
  * @example
  * samples({
  *  bd: '808bd/BD0000.WAV',

packages/webaudio/webaudio.mjs

@@ -219,6 +219,8 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
     n = 0,
     note,
     gain = 0.8,
+    gainpost = 1,
+    gainpre = 1,
     // low pass
     lpf,
     cutoff = lpf,
@@ -373,23 +375,26 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
   }
 
   // last gain
-  const post = gainNode(1);
-  chain.push(post);
-  post.connect(getDestination());
+  const pre = gainNode(gainpre);
+  chain.push(pre);
 
   // delay
   let delaySend;
   if (delay > 0 && delaytime > 0 && delayfeedback > 0) {
     const delyNode = getDelay(orbit, delaytime, delayfeedback, t);
-    delaySend = effectSend(post, delyNode, delay);
+    delaySend = effectSend(pre, delyNode, delay);
   }
   // reverb
   let reverbSend;
   if (room > 0 && roomsize > 0) {
     const reverbNode = getReverb(orbit, roomsize);
-    reverbSend = effectSend(post, reverbNode, room);
+    reverbSend = effectSend(pre, reverbNode, room);
   }
 
+  const post = gainNode(gainpost);
+  chain.push(post);
+  post.connect(getDestination());
+
   // connect chain elements together
   chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
 

packages/webdirt/webdirt.mjs

@@ -59,6 +59,7 @@ export function loadWebDirt(config) {
  * @returns Pattern
  * @example
  * s("bd*2 hh sd hh").n("<0 1>").webdirt()
+ * @noAutocomplete
  */
 Pattern.prototype.webdirt = function () {
   // create a WebDirt object and initialize Web Audio context

paper/iclc-reviews.md

@@ -0,0 +1,97 @@
+**Submission ID:** 8
+
+**Title:** Strudel: live coding patterns on the Web
+
+**Status:** Accept
+
+**Reviewer 1:**
+
+Author Comments: * Summary of the contribution:\
+This paper describes Strudel, a Web-based implementation of Tidal Cycles. It is generally a good overview of the system which could help prospective users understand how it works beyond the manual, and it provides many code examples. The most interesting contribution is the comparison between the Haskell and JavaScript features for this case.
+
+* On theme (1-5):\
+1
+
+* Citation quality (1-5):\
+5
+
+* Missing references:\
+not answered
+
+* Suggested improvements:\
+This paper is a good introduction to Strudel. The style is mostly illustrative, but it is hard to understand where the Tidal syntax is being introduced vs where the specific Strudel features are used. Thus, the best way to improve it would be to focus on Strudel. Also, it would be good to give a better hint on what output method would be preferable. Also the title of Section 9 should compare Strudel to Tidal or Haskell to JavaScript.
+
+The paper is driven by examples, but many are a bit difficult to follow, here are some issues:\
+Section 4 - the mini-notation example does not look terser despite the text.\
+Section 5 - echo funciton is not used.\
+Sections 7.11 and 7.12 - the same (mini-notation) example is used so it is not clear what relation there is between transpilation and using mini-notation. Also please reference peggy\
+Sectin 7.3.2 The sawtooth waveform has been used in all examples, so it would be clearer if it was used here (maybe cutoff as well).
+
+Generally, beyond the language differences, what does Strudel contribute with respect to Haskell-based Tidal? I would say that there is a lot to be gained in terms of installation, availability and potential for collaboration.
+
+* Clarity (1-5):\
+4
+
+* Corrections required:\
+No contentious / incorrect claims
+
+* Other Changes if Published:\
+not answered
+
+* Correct Template used?\
+Yes
+
+* All materials provided?\
+Yes
+
+* Wordcount respected?\
+Yes
+
+* Have any deviations, errors or omissions impacted your ability to give a fair review?\
+No
+
+**Reviewer 2:**
+
+Author Comments: * Summary of the contribution:\
+This proposal presents Strudel, an online, JavaScript-native approach to algorithmic pattern composition that in many ways mirrors TidalCycles. TidalCycles, developed by one of the authors, is a key software piece for live coding. Perhaps the most difficult aspects of Tidal are related to Haskell and Haskell's dependency system that makes it very difficult to install. Haskell in itself is a difficult language to grasp; if Tidal users would like to expand and 'personalise' the possibilities of the software, they would have to get familiar with the particularities of Haskell. JavaScript is a multi-paradigm language that is used for web development can make pattern-based, algorithmic composition more popular. The process of bringing Tidal's paradigm to a dynamic type system seems to be an important part of this research. I enjoy and find very interesting the dialectical process that occurs between Strudel and Tidal, where the implementation of Tidal concepts in Strudel simultaneously transforms Tidal, either by introspection (finding bugs, etc.) or by bringing back to Tidal new insights that are clear in JavaScript. I think moving to TypeScript makes sense; perhaps a small section where the decision to use JavaScript is discussed a little further could be helpful for readers (beyond accessibility). Overall, this paper is clear and presents software that is a key development for live coding and will be a great addition to the next ICLC.
+
+* On theme (1-5):\
+4
+
+* Citation quality (1-5):\
+5
+
+* Missing references:\
+not answered
+
+* Suggested improvements:\
+Tidal-Strudel parity seems to be on the immediate horizon, but I wonder if this parity is transient and if the ultimate goal of Strudel is to ultimately diverge from Tidal. Perhaps the project is in its early stages, and this is not clear, but it would be interesting to get some insights on the authors' intentions. Personally, I think that a key discussion that needs to happen in live coding communities and development nodes is that of what is understood as multilingual live coding. Tidal's paradigm is implemented in a number of programming languages (as well as platforms such as Estuary), each with its own set of features and challenges: some are functional reactive programming, type strict oriented, while others are multi-paradigm, dynamic type oriented, etc. This seems to suggest that it is possible for many programming languages to adopt one single understanding of how to make music. Perhaps further considerations should be made as to whether we need one single grammar to name and express all music structures or whether we need environments and software that help difference to proliferate in terms of music/sound art/art idiosyncrasies. Perhaps questions in this direction are beyond the scope of this paper and I hope this comment is taken as productive feedback for the authors.
+
+* Clarity (1-5):\
+4
+
+* Corrections required:\
+Nothing contentious or incorrect to note.
+
+* Other Changes if Published:\
+The example shown on page 3 under "Pattern Example" seems to be different from its explanation. The explanations do not mention scale but mention echo, which is not present in the example. I would double check all the code examples inc ase I missed something like this.
+
+* Correct Template used?\
+Yes
+
+* All materials provided?\
+Yes
+
+* Wordcount respected?\
+Yes
+
+* Have any deviations, errors or omissions impacted your ability to give a fair review?\
+no
+
+* General remarks:\
+This proposal presents Strudel, an online, JavaScript-native approach to algorithmic pattern composition that in many ways mirrors TidalCycles. TidalCycles, developed by one of the authors, is a key software piece for live coding. Perhaps the most difficult aspects of Tidal are related to Haskell and Haskell's dependency system that makes it very difficult to install. Haskell in itself is a difficult language to grasp; if Tidal users would like to expand and 'personalise' the possibilities of the software, they would have to get familiar with the particularities of Haskell. JavaScript is a multi-paradigm language that can make pattern-based, algorithmic composition more popular. The process of bringing Tidal's paradigm to a dynamic type system seems to be an important part of this research. I enjoy and find very interesting the dialectical process that occurs between Strudel and Tidal, where the implementation of Tidal concepts in Strudel simultaneously transforms Tidal, either by introspection (finding bugs, etc.) or by bringing back to Tidal new insights that are clear in JavaScript. I think moving to TypeScript makes sense; perhaps a small section where the decision to use JavaScript is discussed a little further could be helpful for readers (beyond accessibility). I am curious, did the authors consider PureScript? I can see how, in terms of popularity, PureScript is a lateral move coming from Haskell, but an explicit explanation about the (maybe) obvious candidates would be interesting.\
+Tidal-Strudel parity seems to be on the immediate horizon, but I wonder if this parity is transient and if the ultimate goal of Strudel is to ultimately diverge from Tidal. Perhaps the project is in its early stages, and this is not clear, but it would be interesting to get some insights on the authors' intentions. Personally, I think that a key discussion that needs to happen in live coding communities and development nodes is that of what is understood as multilingual live coding. Tidal's paradigm is implemented in a number of programming languages (as well as platforms such as Estuary), each with its own set of features and challenges: some are functional reactive programming, type strict oriented, while others are multi-paradigm, dynamic type oriented, etc. This seems to suggest that it is possible for many programming languages to adopt one single understanding of how to make music. Perhaps further considerations should be made as to whether we need one single grammar to name and express all music structures or whether we need environments and software that help difference to proliferate in terms of music/sound art/art idiosyncrasies. Perhaps questions in this direction are beyond the scope of this paper and I hope this last comment is taken as productive feedback for the authors.
+
+Overall, this paper is clear and presents software that is a key development for live coding and will be a great addition to the next ICLC.
+
+PS. The example shown on page 3 under "Pattern Example" seems to be different from its explanation. The explanations do not mention scale but mention echo, which is not present in the example.

test/__snapshots__/examples.test.mjs.snap

@@ -861,44 +861,6 @@ exports[`runs examples > example "attack" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "bandf" example index 0 1`] = `
-[
-  "[ 0/1 → 1/2 | s:bd bandf:1000 ]",
-  "[ 1/2 → 1/1 | s:sd bandf:1000 ]",
-  "[ 0/1 → 1/3 | s:hh bandf:1000 ]",
-  "[ 1/3 → 2/3 | s:hh bandf:1000 ]",
-  "[ 2/3 → 1/1 | s:hh bandf:1000 ]",
-  "[ 1/1 → 3/2 | s:bd bandf:2000 ]",
-  "[ 3/2 → 2/1 | s:sd bandf:2000 ]",
-  "[ 1/1 → 4/3 | s:hh bandf:2000 ]",
-  "[ 4/3 → 5/3 | s:hh bandf:2000 ]",
-  "[ 5/3 → 2/1 | s:hh bandf:2000 ]",
-  "[ 2/1 → 5/2 | s:bd bandf:4000 ]",
-  "[ 5/2 → 3/1 | s:sd bandf:4000 ]",
-  "[ 2/1 → 7/3 | s:hh bandf:4000 ]",
-  "[ 7/3 → 8/3 | s:hh bandf:4000 ]",
-  "[ 8/3 → 3/1 | s:hh bandf:4000 ]",
-  "[ 3/1 → 7/2 | s:bd bandf:8000 ]",
-  "[ 7/2 → 4/1 | s:sd bandf:8000 ]",
-  "[ 3/1 → 10/3 | s:hh bandf:8000 ]",
-  "[ 10/3 → 11/3 | s:hh bandf:8000 ]",
-  "[ 11/3 → 4/1 | s:hh bandf:8000 ]",
-]
-`;
-
-exports[`runs examples > example "bandq" example index 0 1`] = `
-[
-  "[ 0/1 → 1/2 | s:bd bandf:500 bandq:0 ]",
-  "[ 1/2 → 1/1 | s:sd bandf:500 bandq:0 ]",
-  "[ 1/1 → 3/2 | s:bd bandf:500 bandq:1 ]",
-  "[ 3/2 → 2/1 | s:sd bandf:500 bandq:1 ]",
-  "[ 2/1 → 5/2 | s:bd bandf:500 bandq:2 ]",
-  "[ 5/2 → 3/1 | s:sd bandf:500 bandq:2 ]",
-  "[ 3/1 → 7/2 | s:bd bandf:500 bandq:3 ]",
-  "[ 7/2 → 4/1 | s:sd bandf:500 bandq:3 ]",
-]
-`;
-
 exports[`runs examples > example "bank" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:bd bank:RolandTR909 ]",
@@ -921,6 +883,44 @@ exports[`runs examples > example "begin" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "bpf" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | s:bd bpf:1000 ]",
+  "[ 1/2 → 1/1 | s:sd bpf:1000 ]",
+  "[ 0/1 → 1/3 | s:hh bpf:1000 ]",
+  "[ 1/3 → 2/3 | s:hh bpf:1000 ]",
+  "[ 2/3 → 1/1 | s:hh bpf:1000 ]",
+  "[ 1/1 → 3/2 | s:bd bpf:2000 ]",
+  "[ 3/2 → 2/1 | s:sd bpf:2000 ]",
+  "[ 1/1 → 4/3 | s:hh bpf:2000 ]",
+  "[ 4/3 → 5/3 | s:hh bpf:2000 ]",
+  "[ 5/3 → 2/1 | s:hh bpf:2000 ]",
+  "[ 2/1 → 5/2 | s:bd bpf:4000 ]",
+  "[ 5/2 → 3/1 | s:sd bpf:4000 ]",
+  "[ 2/1 → 7/3 | s:hh bpf:4000 ]",
+  "[ 7/3 → 8/3 | s:hh bpf:4000 ]",
+  "[ 8/3 → 3/1 | s:hh bpf:4000 ]",
+  "[ 3/1 → 7/2 | s:bd bpf:8000 ]",
+  "[ 7/2 → 4/1 | s:sd bpf:8000 ]",
+  "[ 3/1 → 10/3 | s:hh bpf:8000 ]",
+  "[ 10/3 → 11/3 | s:hh bpf:8000 ]",
+  "[ 11/3 → 4/1 | s:hh bpf:8000 ]",
+]
+`;
+
+exports[`runs examples > example "bpq" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | s:bd bpf:500 bpq:0 ]",
+  "[ 1/2 → 1/1 | s:sd bpf:500 bpq:0 ]",
+  "[ 1/1 → 3/2 | s:bd bpf:500 bpq:1 ]",
+  "[ 3/2 → 2/1 | s:sd bpf:500 bpq:1 ]",
+  "[ 2/1 → 5/2 | s:bd bpf:500 bpq:2 ]",
+  "[ 5/2 → 3/1 | s:sd bpf:500 bpq:2 ]",
+  "[ 3/1 → 7/2 | s:bd bpf:500 bpq:3 ]",
+  "[ 7/2 → 4/1 | s:sd bpf:500 bpq:3 ]",
+]
+`;
+
 exports[`runs examples > example "cat" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:hh ]",
@@ -1060,6 +1060,27 @@ exports[`runs examples > example "chunkBack" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "clip" example index 0 1`] = `
+[
+  "[ 0/1 → 1/5 | note:c s:piano clip:1 ]",
+  "[ 1/5 → 2/5 | note:a s:piano clip:1 ]",
+  "[ 2/5 → 3/5 | note:f s:piano clip:1 ]",
+  "[ 3/5 → 4/5 | note:e s:piano clip:1 ]",
+  "[ 1/1 → 6/5 | note:c s:piano clip:1 ]",
+  "[ 6/5 → 7/5 | note:a s:piano clip:1 ]",
+  "[ 7/5 → 8/5 | note:f s:piano clip:1 ]",
+  "[ 8/5 → 9/5 | note:e s:piano clip:1 ]",
+  "[ 2/1 → 11/5 | note:c s:piano clip:1 ]",
+  "[ 11/5 → 12/5 | note:a s:piano clip:1 ]",
+  "[ 12/5 → 13/5 | note:f s:piano clip:1 ]",
+  "[ 13/5 → 14/5 | note:e s:piano clip:1 ]",
+  "[ 3/1 → 16/5 | note:c s:piano clip:1 ]",
+  "[ 16/5 → 17/5 | note:a s:piano clip:1 ]",
+  "[ 17/5 → 18/5 | note:f s:piano clip:1 ]",
+  "[ 18/5 → 19/5 | note:e s:piano clip:1 ]",
+]
+`;
+
 exports[`runs examples > example "coarse" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:bd coarse:1 ]",
@@ -1254,31 +1275,6 @@ exports[`runs examples > example "cut" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "cutoff" example index 0 1`] = `
-[
-  "[ 0/1 → 1/2 | s:bd cutoff:4000 ]",
-  "[ 1/2 → 1/1 | s:sd cutoff:4000 ]",
-  "[ 0/1 → 1/3 | s:hh cutoff:4000 ]",
-  "[ 1/3 → 2/3 | s:hh cutoff:4000 ]",
-  "[ 2/3 → 1/1 | s:hh cutoff:4000 ]",
-  "[ 1/1 → 3/2 | s:bd cutoff:2000 ]",
-  "[ 3/2 → 2/1 | s:sd cutoff:2000 ]",
-  "[ 1/1 → 4/3 | s:hh cutoff:2000 ]",
-  "[ 4/3 → 5/3 | s:hh cutoff:2000 ]",
-  "[ 5/3 → 2/1 | s:hh cutoff:2000 ]",
-  "[ 2/1 → 5/2 | s:bd cutoff:1000 ]",
-  "[ 5/2 → 3/1 | s:sd cutoff:1000 ]",
-  "[ 2/1 → 7/3 | s:hh cutoff:1000 ]",
-  "[ 7/3 → 8/3 | s:hh cutoff:1000 ]",
-  "[ 8/3 → 3/1 | s:hh cutoff:1000 ]",
-  "[ 3/1 → 7/2 | s:bd cutoff:500 ]",
-  "[ 7/2 → 4/1 | s:sd cutoff:500 ]",
-  "[ 3/1 → 10/3 | s:hh cutoff:500 ]",
-  "[ 10/3 → 11/3 | s:hh cutoff:500 ]",
-  "[ 11/3 → 4/1 | s:hh cutoff:500 ]",
-]
-`;
-
 exports[`runs examples > example "decay" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | note:c3 decay:0.1 sustain:0 ]",
@@ -1898,61 +1894,61 @@ exports[`runs examples > example "gain" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "hcutoff" example index 0 1`] = `
+exports[`runs examples > example "hpf" example index 0 1`] = `
 [
-  "[ 0/1 → 1/2 | s:bd hcutoff:4000 ]",
-  "[ 1/2 → 1/1 | s:sd hcutoff:4000 ]",
-  "[ 0/1 → 1/4 | s:hh hcutoff:4000 ]",
-  "[ 1/4 → 1/2 | s:hh hcutoff:4000 ]",
-  "[ 1/2 → 3/4 | s:hh hcutoff:4000 ]",
-  "[ 3/4 → 1/1 | s:hh hcutoff:4000 ]",
-  "[ 1/1 → 3/2 | s:bd hcutoff:2000 ]",
-  "[ 3/2 → 2/1 | s:sd hcutoff:2000 ]",
-  "[ 1/1 → 5/4 | s:hh hcutoff:2000 ]",
-  "[ 5/4 → 3/2 | s:hh hcutoff:2000 ]",
-  "[ 3/2 → 7/4 | s:hh hcutoff:2000 ]",
-  "[ 7/4 → 2/1 | s:hh hcutoff:2000 ]",
-  "[ 2/1 → 5/2 | s:bd hcutoff:1000 ]",
-  "[ 5/2 → 3/1 | s:sd hcutoff:1000 ]",
-  "[ 2/1 → 9/4 | s:hh hcutoff:1000 ]",
-  "[ 9/4 → 5/2 | s:hh hcutoff:1000 ]",
-  "[ 5/2 → 11/4 | s:hh hcutoff:1000 ]",
-  "[ 11/4 → 3/1 | s:hh hcutoff:1000 ]",
-  "[ 3/1 → 7/2 | s:bd hcutoff:500 ]",
-  "[ 7/2 → 4/1 | s:sd hcutoff:500 ]",
-  "[ 3/1 → 13/4 | s:hh hcutoff:500 ]",
-  "[ 13/4 → 7/2 | s:hh hcutoff:500 ]",
-  "[ 7/2 → 15/4 | s:hh hcutoff:500 ]",
-  "[ 15/4 → 4/1 | s:hh hcutoff:500 ]",
+  "[ 0/1 → 1/2 | s:bd hpf:4000 ]",
+  "[ 1/2 → 1/1 | s:sd hpf:4000 ]",
+  "[ 0/1 → 1/4 | s:hh hpf:4000 ]",
+  "[ 1/4 → 1/2 | s:hh hpf:4000 ]",
+  "[ 1/2 → 3/4 | s:hh hpf:4000 ]",
+  "[ 3/4 → 1/1 | s:hh hpf:4000 ]",
+  "[ 1/1 → 3/2 | s:bd hpf:2000 ]",
+  "[ 3/2 → 2/1 | s:sd hpf:2000 ]",
+  "[ 1/1 → 5/4 | s:hh hpf:2000 ]",
+  "[ 5/4 → 3/2 | s:hh hpf:2000 ]",
+  "[ 3/2 → 7/4 | s:hh hpf:2000 ]",
+  "[ 7/4 → 2/1 | s:hh hpf:2000 ]",
+  "[ 2/1 → 5/2 | s:bd hpf:1000 ]",
+  "[ 5/2 → 3/1 | s:sd hpf:1000 ]",
+  "[ 2/1 → 9/4 | s:hh hpf:1000 ]",
+  "[ 9/4 → 5/2 | s:hh hpf:1000 ]",
+  "[ 5/2 → 11/4 | s:hh hpf:1000 ]",
+  "[ 11/4 → 3/1 | s:hh hpf:1000 ]",
+  "[ 3/1 → 7/2 | s:bd hpf:500 ]",
+  "[ 7/2 → 4/1 | s:sd hpf:500 ]",
+  "[ 3/1 → 13/4 | s:hh hpf:500 ]",
+  "[ 13/4 → 7/2 | s:hh hpf:500 ]",
+  "[ 7/2 → 15/4 | s:hh hpf:500 ]",
+  "[ 15/4 → 4/1 | s:hh hpf:500 ]",
 ]
 `;
 
-exports[`runs examples > example "hresonance" example index 0 1`] = `
+exports[`runs examples > example "hpq" example index 0 1`] = `
 [
-  "[ 0/1 → 1/2 | s:bd hcutoff:2000 hresonance:0 ]",
-  "[ 1/2 → 1/1 | s:sd hcutoff:2000 hresonance:0 ]",
-  "[ 0/1 → 1/4 | s:hh hcutoff:2000 hresonance:0 ]",
-  "[ 1/4 → 1/2 | s:hh hcutoff:2000 hresonance:0 ]",
-  "[ 1/2 → 3/4 | s:hh hcutoff:2000 hresonance:0 ]",
-  "[ 3/4 → 1/1 | s:hh hcutoff:2000 hresonance:0 ]",
-  "[ 1/1 → 3/2 | s:bd hcutoff:2000 hresonance:10 ]",
-  "[ 3/2 → 2/1 | s:sd hcutoff:2000 hresonance:10 ]",
-  "[ 1/1 → 5/4 | s:hh hcutoff:2000 hresonance:10 ]",
-  "[ 5/4 → 3/2 | s:hh hcutoff:2000 hresonance:10 ]",
-  "[ 3/2 → 7/4 | s:hh hcutoff:2000 hresonance:10 ]",
-  "[ 7/4 → 2/1 | s:hh hcutoff:2000 hresonance:10 ]",
-  "[ 2/1 → 5/2 | s:bd hcutoff:2000 hresonance:20 ]",
-  "[ 5/2 → 3/1 | s:sd hcutoff:2000 hresonance:20 ]",
-  "[ 2/1 → 9/4 | s:hh hcutoff:2000 hresonance:20 ]",
-  "[ 9/4 → 5/2 | s:hh hcutoff:2000 hresonance:20 ]",
-  "[ 5/2 → 11/4 | s:hh hcutoff:2000 hresonance:20 ]",
-  "[ 11/4 → 3/1 | s:hh hcutoff:2000 hresonance:20 ]",
-  "[ 3/1 → 7/2 | s:bd hcutoff:2000 hresonance:30 ]",
-  "[ 7/2 → 4/1 | s:sd hcutoff:2000 hresonance:30 ]",
-  "[ 3/1 → 13/4 | s:hh hcutoff:2000 hresonance:30 ]",
-  "[ 13/4 → 7/2 | s:hh hcutoff:2000 hresonance:30 ]",
-  "[ 7/2 → 15/4 | s:hh hcutoff:2000 hresonance:30 ]",
-  "[ 15/4 → 4/1 | s:hh hcutoff:2000 hresonance:30 ]",
+  "[ 0/1 → 1/2 | s:bd hpf:2000 hpq:0 ]",
+  "[ 1/2 → 1/1 | s:sd hpf:2000 hpq:0 ]",
+  "[ 0/1 → 1/4 | s:hh hpf:2000 hpq:0 ]",
+  "[ 1/4 → 1/2 | s:hh hpf:2000 hpq:0 ]",
+  "[ 1/2 → 3/4 | s:hh hpf:2000 hpq:0 ]",
+  "[ 3/4 → 1/1 | s:hh hpf:2000 hpq:0 ]",
+  "[ 1/1 → 3/2 | s:bd hpf:2000 hpq:10 ]",
+  "[ 3/2 → 2/1 | s:sd hpf:2000 hpq:10 ]",
+  "[ 1/1 → 5/4 | s:hh hpf:2000 hpq:10 ]",
+  "[ 5/4 → 3/2 | s:hh hpf:2000 hpq:10 ]",
+  "[ 3/2 → 7/4 | s:hh hpf:2000 hpq:10 ]",
+  "[ 7/4 → 2/1 | s:hh hpf:2000 hpq:10 ]",
+  "[ 2/1 → 5/2 | s:bd hpf:2000 hpq:20 ]",
+  "[ 5/2 → 3/1 | s:sd hpf:2000 hpq:20 ]",
+  "[ 2/1 → 9/4 | s:hh hpf:2000 hpq:20 ]",
+  "[ 9/4 → 5/2 | s:hh hpf:2000 hpq:20 ]",
+  "[ 5/2 → 11/4 | s:hh hpf:2000 hpq:20 ]",
+  "[ 11/4 → 3/1 | s:hh hpf:2000 hpq:20 ]",
+  "[ 3/1 → 7/2 | s:bd hpf:2000 hpq:30 ]",
+  "[ 7/2 → 4/1 | s:sd hpf:2000 hpq:30 ]",
+  "[ 3/1 → 13/4 | s:hh hpf:2000 hpq:30 ]",
+  "[ 13/4 → 7/2 | s:hh hpf:2000 hpq:30 ]",
+  "[ 7/2 → 15/4 | s:hh hpf:2000 hpq:30 ]",
+  "[ 15/4 → 4/1 | s:hh hpf:2000 hpq:30 ]",
 ]
 `;
 
@@ -2385,6 +2381,60 @@ exports[`runs examples > example "loopAtCps" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "lpf" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | s:bd lpf:4000 ]",
+  "[ 1/2 → 1/1 | s:sd lpf:4000 ]",
+  "[ 0/1 → 1/3 | s:hh lpf:4000 ]",
+  "[ 1/3 → 2/3 | s:hh lpf:4000 ]",
+  "[ 2/3 → 1/1 | s:hh lpf:4000 ]",
+  "[ 1/1 → 3/2 | s:bd lpf:2000 ]",
+  "[ 3/2 → 2/1 | s:sd lpf:2000 ]",
+  "[ 1/1 → 4/3 | s:hh lpf:2000 ]",
+  "[ 4/3 → 5/3 | s:hh lpf:2000 ]",
+  "[ 5/3 → 2/1 | s:hh lpf:2000 ]",
+  "[ 2/1 → 5/2 | s:bd lpf:1000 ]",
+  "[ 5/2 → 3/1 | s:sd lpf:1000 ]",
+  "[ 2/1 → 7/3 | s:hh lpf:1000 ]",
+  "[ 7/3 → 8/3 | s:hh lpf:1000 ]",
+  "[ 8/3 → 3/1 | s:hh lpf:1000 ]",
+  "[ 3/1 → 7/2 | s:bd lpf:500 ]",
+  "[ 7/2 → 4/1 | s:sd lpf:500 ]",
+  "[ 3/1 → 10/3 | s:hh lpf:500 ]",
+  "[ 10/3 → 11/3 | s:hh lpf:500 ]",
+  "[ 11/3 → 4/1 | s:hh lpf:500 ]",
+]
+`;
+
+exports[`runs examples > example "lpq" example index 0 1`] = `
+[
+  "[ 0/1 → 1/2 | s:bd lpf:2000 lpq:0 ]",
+  "[ 1/2 → 1/1 | s:sd lpf:2000 lpq:0 ]",
+  "[ 0/1 → 1/4 | s:hh lpf:2000 lpq:0 ]",
+  "[ 1/4 → 1/2 | s:hh lpf:2000 lpq:0 ]",
+  "[ 1/2 → 3/4 | s:hh lpf:2000 lpq:0 ]",
+  "[ 3/4 → 1/1 | s:hh lpf:2000 lpq:0 ]",
+  "[ 1/1 → 3/2 | s:bd lpf:2000 lpq:10 ]",
+  "[ 3/2 → 2/1 | s:sd lpf:2000 lpq:10 ]",
+  "[ 1/1 → 5/4 | s:hh lpf:2000 lpq:10 ]",
+  "[ 5/4 → 3/2 | s:hh lpf:2000 lpq:10 ]",
+  "[ 3/2 → 7/4 | s:hh lpf:2000 lpq:10 ]",
+  "[ 7/4 → 2/1 | s:hh lpf:2000 lpq:10 ]",
+  "[ 2/1 → 5/2 | s:bd lpf:2000 lpq:20 ]",
+  "[ 5/2 → 3/1 | s:sd lpf:2000 lpq:20 ]",
+  "[ 2/1 → 9/4 | s:hh lpf:2000 lpq:20 ]",
+  "[ 9/4 → 5/2 | s:hh lpf:2000 lpq:20 ]",
+  "[ 5/2 → 11/4 | s:hh lpf:2000 lpq:20 ]",
+  "[ 11/4 → 3/1 | s:hh lpf:2000 lpq:20 ]",
+  "[ 3/1 → 7/2 | s:bd lpf:2000 lpq:30 ]",
+  "[ 7/2 → 4/1 | s:sd lpf:2000 lpq:30 ]",
+  "[ 3/1 → 13/4 | s:hh lpf:2000 lpq:30 ]",
+  "[ 13/4 → 7/2 | s:hh lpf:2000 lpq:30 ]",
+  "[ 7/2 → 15/4 | s:hh lpf:2000 lpq:30 ]",
+  "[ 15/4 → 4/1 | s:hh lpf:2000 lpq:30 ]",
+]
+`;
+
 exports[`runs examples > example "lrate" example index 0 1`] = `
 [
   "[ 0/1 → 1/1 | n:0 s:supersquare leslie:1 lrate:1 ]",
@@ -2456,40 +2506,26 @@ exports[`runs examples > example "mul" example index 0 1`] = `
 
 exports[`runs examples > example "n" example index 0 1`] = `
 [
-  "[ 0/1 → 1/1 | s:superpiano n:0 ]",
-  "[ 1/1 → 2/1 | s:superpiano n:1 ]",
-  "[ 2/1 → 3/1 | s:superpiano n:2 ]",
-  "[ 3/1 → 4/1 | s:superpiano n:3 ]",
-]
-`;
-
-exports[`runs examples > example "n" example index 1 1`] = `
-[
-  "[ 0/1 → 1/1 | s:superpiano n:c4 ]",
-  "[ 1/1 → 2/1 | s:superpiano n:d4 ]",
-  "[ 2/1 → 3/1 | s:superpiano n:e4 ]",
-  "[ 3/1 → 4/1 | s:superpiano n:g4 ]",
-]
-`;
-
-exports[`runs examples > example "n" example index 2 1`] = `
-[
-  "[ 0/1 → 1/4 | n:0 s:east ]",
-  "[ 1/4 → 1/2 | n:1 s:east ]",
-  "[ 1/2 → 3/4 | n:2 s:east ]",
-  "[ 3/4 → 1/1 | n:3 s:east ]",
-  "[ 1/1 → 5/4 | n:0 s:east ]",
-  "[ 5/4 → 3/2 | n:1 s:east ]",
-  "[ 3/2 → 7/4 | n:2 s:east ]",
-  "[ 7/4 → 2/1 | n:3 s:east ]",
-  "[ 2/1 → 9/4 | n:0 s:east ]",
-  "[ 9/4 → 5/2 | n:1 s:east ]",
-  "[ 5/2 → 11/4 | n:2 s:east ]",
-  "[ 11/4 → 3/1 | n:3 s:east ]",
-  "[ 3/1 → 13/4 | n:0 s:east ]",
-  "[ 13/4 → 7/2 | n:1 s:east ]",
-  "[ 7/2 → 15/4 | n:2 s:east ]",
-  "[ 15/4 → 4/1 | n:3 s:east ]",
+  "[ 0/1 → 1/2 | s:bd n:0 ]",
+  "[ 1/2 → 1/1 | s:sd n:0 ]",
+  "[ 0/1 → 1/3 | s:hh n:0 ]",
+  "[ 1/3 → 2/3 | s:hh n:0 ]",
+  "[ 2/3 → 1/1 | s:hh n:0 ]",
+  "[ 1/1 → 3/2 | s:bd n:1 ]",
+  "[ 3/2 → 2/1 | s:sd n:1 ]",
+  "[ 1/1 → 4/3 | s:hh n:1 ]",
+  "[ 4/3 → 5/3 | s:hh n:1 ]",
+  "[ 5/3 → 2/1 | s:hh n:1 ]",
+  "[ 2/1 → 5/2 | s:bd n:0 ]",
+  "[ 5/2 → 3/1 | s:sd n:0 ]",
+  "[ 2/1 → 7/3 | s:hh n:0 ]",
+  "[ 7/3 → 8/3 | s:hh n:0 ]",
+  "[ 8/3 → 3/1 | s:hh n:0 ]",
+  "[ 3/1 → 7/2 | s:bd n:1 ]",
+  "[ 7/2 → 4/1 | s:sd n:1 ]",
+  "[ 3/1 → 10/3 | s:hh n:1 ]",
+  "[ 10/3 → 11/3 | s:hh n:1 ]",
+  "[ 11/3 → 4/1 | s:hh n:1 ]",
 ]
 `;
 
@@ -2530,6 +2566,69 @@ exports[`runs examples > example "never" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "note" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c ]",
+  "[ 1/4 → 1/2 | note:a ]",
+  "[ 1/2 → 3/4 | note:f ]",
+  "[ 3/4 → 1/1 | note:e ]",
+  "[ 1/1 → 5/4 | note:c ]",
+  "[ 5/4 → 3/2 | note:a ]",
+  "[ 3/2 → 7/4 | note:f ]",
+  "[ 7/4 → 2/1 | note:e ]",
+  "[ 2/1 → 9/4 | note:c ]",
+  "[ 9/4 → 5/2 | note:a ]",
+  "[ 5/2 → 11/4 | note:f ]",
+  "[ 11/4 → 3/1 | note:e ]",
+  "[ 3/1 → 13/4 | note:c ]",
+  "[ 13/4 → 7/2 | note:a ]",
+  "[ 7/2 → 15/4 | note:f ]",
+  "[ 15/4 → 4/1 | note:e ]",
+]
+`;
+
+exports[`runs examples > example "note" example index 1 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c4 ]",
+  "[ 1/4 → 1/2 | note:a4 ]",
+  "[ 1/2 → 3/4 | note:f4 ]",
+  "[ 3/4 → 1/1 | note:e4 ]",
+  "[ 1/1 → 5/4 | note:c4 ]",
+  "[ 5/4 → 3/2 | note:a4 ]",
+  "[ 3/2 → 7/4 | note:f4 ]",
+  "[ 7/4 → 2/1 | note:e4 ]",
+  "[ 2/1 → 9/4 | note:c4 ]",
+  "[ 9/4 → 5/2 | note:a4 ]",
+  "[ 5/2 → 11/4 | note:f4 ]",
+  "[ 11/4 → 3/1 | note:e4 ]",
+  "[ 3/1 → 13/4 | note:c4 ]",
+  "[ 13/4 → 7/2 | note:a4 ]",
+  "[ 7/2 → 15/4 | note:f4 ]",
+  "[ 15/4 → 4/1 | note:e4 ]",
+]
+`;
+
+exports[`runs examples > example "note" example index 2 1`] = `
+[
+  "[ 0/1 → 1/4 | note:60 ]",
+  "[ 1/4 → 1/2 | note:69 ]",
+  "[ 1/2 → 3/4 | note:65 ]",
+  "[ 3/4 → 1/1 | note:64 ]",
+  "[ 1/1 → 5/4 | note:60 ]",
+  "[ 5/4 → 3/2 | note:69 ]",
+  "[ 3/2 → 7/4 | note:65 ]",
+  "[ 7/4 → 2/1 | note:64 ]",
+  "[ 2/1 → 9/4 | note:60 ]",
+  "[ 9/4 → 5/2 | note:69 ]",
+  "[ 5/2 → 11/4 | note:65 ]",
+  "[ 11/4 → 3/1 | note:64 ]",
+  "[ 3/1 → 13/4 | note:60 ]",
+  "[ 13/4 → 7/2 | note:69 ]",
+  "[ 7/2 → 15/4 | note:65 ]",
+  "[ 15/4 → 4/1 | note:64 ]",
+]
+`;
+
 exports[`runs examples > example "octave" example index 0 1`] = `
 [
   "[ 0/1 → 1/1 | n:0 s:supersquare octave:3 ]",
@@ -3048,35 +3147,6 @@ exports[`runs examples > example "reset" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "resonance" example index 0 1`] = `
-[
-  "[ 0/1 → 1/2 | s:bd cutoff:2000 resonance:0 ]",
-  "[ 1/2 → 1/1 | s:sd cutoff:2000 resonance:0 ]",
-  "[ 0/1 → 1/4 | s:hh cutoff:2000 resonance:0 ]",
-  "[ 1/4 → 1/2 | s:hh cutoff:2000 resonance:0 ]",
-  "[ 1/2 → 3/4 | s:hh cutoff:2000 resonance:0 ]",
-  "[ 3/4 → 1/1 | s:hh cutoff:2000 resonance:0 ]",
-  "[ 1/1 → 3/2 | s:bd cutoff:2000 resonance:10 ]",
-  "[ 3/2 → 2/1 | s:sd cutoff:2000 resonance:10 ]",
-  "[ 1/1 → 5/4 | s:hh cutoff:2000 resonance:10 ]",
-  "[ 5/4 → 3/2 | s:hh cutoff:2000 resonance:10 ]",
-  "[ 3/2 → 7/4 | s:hh cutoff:2000 resonance:10 ]",
-  "[ 7/4 → 2/1 | s:hh cutoff:2000 resonance:10 ]",
-  "[ 2/1 → 5/2 | s:bd cutoff:2000 resonance:20 ]",
-  "[ 5/2 → 3/1 | s:sd cutoff:2000 resonance:20 ]",
-  "[ 2/1 → 9/4 | s:hh cutoff:2000 resonance:20 ]",
-  "[ 9/4 → 5/2 | s:hh cutoff:2000 resonance:20 ]",
-  "[ 5/2 → 11/4 | s:hh cutoff:2000 resonance:20 ]",
-  "[ 11/4 → 3/1 | s:hh cutoff:2000 resonance:20 ]",
-  "[ 3/1 → 7/2 | s:bd cutoff:2000 resonance:30 ]",
-  "[ 7/2 → 4/1 | s:sd cutoff:2000 resonance:30 ]",
-  "[ 3/1 → 13/4 | s:hh cutoff:2000 resonance:30 ]",
-  "[ 13/4 → 7/2 | s:hh cutoff:2000 resonance:30 ]",
-  "[ 7/2 → 15/4 | s:hh cutoff:2000 resonance:30 ]",
-  "[ 15/4 → 4/1 | s:hh cutoff:2000 resonance:30 ]",
-]
-`;
-
 exports[`runs examples > example "restart" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:bd ]",
@@ -3259,6 +3329,31 @@ exports[`runs examples > example "samples" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "samples" example index 1 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd ]",
+  "[ 1/2 → 3/4 | s:bd ]",
+  "[ 1/4 → 1/2 | s:hh ]",
+  "[ 3/4 → 1/1 | s:hh ]",
+  "[ 1/2 → 1/1 | s:sd ]",
+  "[ 1/1 → 5/4 | s:bd ]",
+  "[ 3/2 → 7/4 | s:bd ]",
+  "[ 5/4 → 3/2 | s:hh ]",
+  "[ 7/4 → 2/1 | s:hh ]",
+  "[ 3/2 → 2/1 | s:sd ]",
+  "[ 2/1 → 9/4 | s:bd ]",
+  "[ 5/2 → 11/4 | s:bd ]",
+  "[ 9/4 → 5/2 | s:hh ]",
+  "[ 11/4 → 3/1 | s:hh ]",
+  "[ 5/2 → 3/1 | s:sd ]",
+  "[ 3/1 → 13/4 | s:bd ]",
+  "[ 7/2 → 15/4 | s:bd ]",
+  "[ 13/4 → 7/2 | s:hh ]",
+  "[ 15/4 → 4/1 | s:hh ]",
+  "[ 7/2 → 4/1 | s:sd ]",
+]
+`;
+
 exports[`runs examples > example "saw" example index 0 1`] = `
 [
   "[ 0/1 → 1/32 | note:c3 ]",
@@ -3302,6 +3397,35 @@ exports[`runs examples > example "saw" example index 1 1`] = `
 `;
 
 exports[`runs examples > example "scale" example index 0 1`] = `
+[
+  "[ 0/1 → 1/6 | note:C2 ]",
+  "[ 1/6 → 1/3 | note:E2 ]",
+  "[ 1/3 → 1/2 | note:G2 ]",
+  "[ 1/2 → 2/3 | note:B2 ]",
+  "[ 2/3 → 5/6 | note:G2 ]",
+  "[ 5/6 → 1/1 | note:E2 ]",
+  "[ 1/1 → 7/6 | note:C2 ]",
+  "[ 7/6 → 4/3 | note:E2 ]",
+  "[ 4/3 → 3/2 | note:G2 ]",
+  "[ 3/2 → 5/3 | note:B2 ]",
+  "[ 5/3 → 11/6 | note:G2 ]",
+  "[ 11/6 → 2/1 | note:E2 ]",
+  "[ 2/1 → 13/6 | note:C2 ]",
+  "[ 13/6 → 7/3 | note:E2 ]",
+  "[ 7/3 → 5/2 | note:G2 ]",
+  "[ 5/2 → 8/3 | note:B2 ]",
+  "[ 8/3 → 17/6 | note:G2 ]",
+  "[ 17/6 → 3/1 | note:E2 ]",
+  "[ 3/1 → 19/6 | note:C2 ]",
+  "[ 19/6 → 10/3 | note:E2 ]",
+  "[ 10/3 → 7/2 | note:G2 ]",
+  "[ 7/2 → 11/3 | note:B2 ]",
+  "[ 11/3 → 23/6 | note:G2 ]",
+  "[ 23/6 → 4/1 | note:E2 ]",
+]
+`;
+
+exports[`runs examples > example "scale" example index 1 1`] = `
 [
   "[ 0/1 → 1/6 | note:C2 ]",
   "[ 1/6 → 1/3 | note:E2 ]",
@@ -3566,6 +3690,39 @@ exports[`runs examples > example "sine" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "slice" example index 0 1`] = `
+[
+  "[ (15/16 → 1/1) ⇝ 9/8 | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 3/4 → 15/16 | begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 21/32 → 3/4 | begin:0.5 end:0.625 _slices:8 s:breaks165 ]",
+  "[ 9/16 → 21/32 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 3/8 → 9/16 | begin:0.625 end:0.75 _slices:8 s:breaks165 ]",
+  "[ 3/16 → 3/8 | begin:0.75 end:0.875 _slices:8 s:breaks165 ]",
+  "[ 0/1 → 3/16 | begin:0.875 end:1 _slices:8 s:breaks165 ]",
+  "[ 21/16 → 3/2 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 9/8 → 21/16 | begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ 15/16 ⇜ (1/1 → 9/8) | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 3/2 → 27/16 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 27/16 → 15/8 | begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ 15/8 → 63/32 | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ (63/32 → 2/1) ⇝ 33/16 | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 63/32 ⇜ (2/1 → 33/16) | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 33/16 → 9/4 | begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 9/4 → 75/32 | begin:0.5 end:0.625 _slices:8 s:breaks165 ]",
+  "[ 75/32 → 39/16 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 39/16 → 21/8 | begin:0.625 end:0.75 _slices:8 s:breaks165 ]",
+  "[ 21/8 → 45/16 | begin:0.75 end:0.875 _slices:8 s:breaks165 ]",
+  "[ 45/16 → 3/1 | begin:0.875 end:1 _slices:8 s:breaks165 ]",
+  "[ 3/1 → 51/16 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 51/16 → 27/8 | begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ 27/8 → 57/16 | begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 57/16 → 15/4 | begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 15/4 → 123/32 | begin:0.5 end:0.625 _slices:8 s:breaks165 ]",
+  "[ 123/32 → 63/16 | begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ (63/16 → 4/1) ⇝ 33/8 | begin:0.625 end:0.75 _slices:8 s:breaks165 ]",
+]
+`;
+
 exports[`runs examples > example "slow" example index 0 1`] = `
 [
   "[ 0/1 → 1/1 | s:bd ]",
@@ -3691,6 +3848,36 @@ exports[`runs examples > example "speed" example index 1 1`] = `
 ]
 `;
 
+exports[`runs examples > example "splice" example index 0 1`] = `
+[
+  "[ 0/1 → 5/26 | speed:0.65 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 5/26 → 5/13 | speed:0.65 unit:c begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ 5/13 → 20/39 | speed:0.9750000000000001 unit:c begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 20/39 → 25/39 | speed:0.9750000000000001 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 25/39 → 10/13 | speed:0.9750000000000001 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 10/13 → 25/26 | speed:0.65 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ (25/26 → 1/1) ⇝ 35/26 | speed:0.325 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 25/26 ⇜ (1/1 → 35/26) | speed:0.325 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 35/26 → 20/13 | speed:0.65 unit:c begin:0.875 end:1 _slices:8 s:breaks165 ]",
+  "[ 20/13 → 45/26 | speed:0.65 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 45/26 → 25/13 | speed:0.65 unit:c begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ (25/13 → 2/1) ⇝ 80/39 | speed:0.9750000000000001 unit:c begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 25/13 ⇜ (2/1 → 80/39) | speed:0.9750000000000001 unit:c begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 80/39 → 85/39 | speed:0.9750000000000001 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 85/39 → 30/13 | speed:0.9750000000000001 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 30/13 → 5/2 | speed:0.65 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 5/2 → 75/26 | speed:0.325 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ (75/26 → 3/1) ⇝ 40/13 | speed:0.65 unit:c begin:0.875 end:1 _slices:8 s:breaks165 ]",
+  "[ 75/26 ⇜ (3/1 → 40/13) | speed:0.65 unit:c begin:0.875 end:1 _slices:8 s:breaks165 ]",
+  "[ 40/13 → 85/26 | speed:0.65 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ 85/26 → 45/13 | speed:0.65 unit:c begin:0.125 end:0.25 _slices:8 s:breaks165 ]",
+  "[ 45/13 → 140/39 | speed:0.9750000000000001 unit:c begin:0.25 end:0.375 _slices:8 s:breaks165 ]",
+  "[ 140/39 → 145/39 | speed:0.9750000000000001 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+  "[ 145/39 → 50/13 | speed:0.9750000000000001 unit:c begin:0 end:0.125 _slices:8 s:breaks165 ]",
+  "[ (50/13 → 4/1) ⇝ 105/26 | speed:0.65 unit:c begin:0.375 end:0.5 _slices:8 s:breaks165 ]",
+]
+`;
+
 exports[`runs examples > example "square" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | note:C3 ]",
@@ -4107,6 +4294,48 @@ exports[`runs examples > example "vowel" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "weave" example index 0 1`] = `
+[
+  "[ 0/1 → 1/8 | pan:0.015625 s:bd ]",
+  "[ 3/8 → 1/2 | pan:0.109375 s:bd ]",
+  "[ 3/4 → 7/8 | pan:0.203125 s:bd ]",
+  "[ 1/1 → 9/8 | pan:0.265625 s:bd ]",
+  "[ 11/8 → 3/2 | pan:0.359375 s:bd ]",
+  "[ 7/4 → 15/8 | pan:0.453125 s:bd ]",
+  "[ 2/1 → 17/8 | pan:0.515625 s:bd ]",
+  "[ 19/8 → 5/2 | pan:0.609375 s:bd ]",
+  "[ 11/4 → 23/8 | pan:0.703125 s:bd ]",
+  "[ 3/1 → 25/8 | pan:0.765625 s:bd ]",
+  "[ 27/8 → 7/2 | pan:0.859375 s:bd ]",
+  "[ 15/4 → 31/8 | pan:0.953125 s:bd ]",
+  "[ 1/2 → 1/1 | pan:0.6875 s:sd ]",
+  "[ 3/2 → 2/1 | pan:0.9375 s:sd ]",
+  "[ 5/2 → 3/1 | pan:0.1875 s:sd ]",
+  "[ 7/2 → 4/1 | pan:0.4375 s:sd ]",
+]
+`;
+
+exports[`runs examples > example "weave" example index 1 1`] = `
+[
+  "[ 0/1 → 1/8 | n:0 s:bd ]",
+  "[ 3/8 → 1/2 | n:0 s:bd ]",
+  "[ 3/4 → 7/8 | n:0 s:bd ]",
+  "[ 1/1 → 9/8 | n:1 s:bd ]",
+  "[ 11/8 → 3/2 | n:1 s:bd ]",
+  "[ 7/4 → 15/8 | n:1 s:bd ]",
+  "[ 2/1 → 17/8 | n:2 s:bd ]",
+  "[ 19/8 → 5/2 | n:2 s:bd ]",
+  "[ 11/4 → 23/8 | n:2 s:bd ]",
+  "[ 3/1 → 25/8 | n:3 s:bd ]",
+  "[ 27/8 → 7/2 | n:3 s:bd ]",
+  "[ 15/4 → 31/8 | n:3 s:bd ]",
+  "[ 1/2 → 1/1 | n:4 s:sd ]",
+  "[ 3/2 → 2/1 | n:5 s:sd ]",
+  "[ 5/2 → 3/1 | n:6 s:sd ]",
+  "[ 7/2 → 4/1 | n:7 s:sd ]",
+]
+`;
+
 exports[`runs examples > example "webdirt" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | s:bd n:0 ]",

website/README.md

@@ -19,6 +19,13 @@ npm run build # <- builds repl + tutorial to ../docs
 npm run preview # <- test static build
 ```
 
+## Generate PWA icons
+
+```sh
+cd website/public
+npx pwa-asset-generator icon.png icons
+```
+
 # Standard Readme of Astro Starter Kit: Docs Site
 
 ```bash

website/astro.config.mjs

@@ -1,23 +1,47 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';
-
 import mdx from '@astrojs/mdx';
 
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeUrls from 'rehype-urls';
 
 import tailwind from '@astrojs/tailwind';
+import AstroPWA from '@vite-pwa/astro';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
+const site = `https://strudel.tidalcycles.org`; // root url without a path
+const base = '/'; // base path of the strudel site
+
+// this rehype plugin converts relative anchor links to absolute ones
+// it wokrs by prepending the absolute page path to anchor links
+// example: #gain -> /learn/effects/#gain
+// this is necessary when using a base href like <base href={base} />
+// in this setup, relative anchor links will always link to base, instead of the current page
+function absoluteAnchors() {
+  return (tree, file) => {
+    const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
+    const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
+    return rehypeUrls((url) => {
+      if (!url.href.startsWith('#')) {
+        return;
+      }
+      const baseWithSlash = base.endsWith('/') ? base : base + '/';
+      const absoluteUrl = baseWithSlash + path + url.href;
+      // console.log(url.href + ' -> ', absoluteUrl);
+      return absoluteUrl;
+    })(tree);
+  };
+}
 const options = {
   // See https://mdxjs.com/advanced/plugins
   remarkPlugins: [
     remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
 };
 
 // https://astro.build/config
@@ -29,9 +53,75 @@ export default defineConfig({
     react(),
     mdx(options),
     tailwind(),
+    AstroPWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,wav,mp3,ogg}'],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }) =>
+              [
+                /^https:\/\/raw\.githubusercontent\.com\/.*/i,
+                /^https:\/\/freesound\.org\/.*/i,
+                /^https:\/\/cdn\.freesound\.org\/.*/i,
+                /^https:\/\/shabda\.ndre\.gr\/.*/i,
+              ].some((regex) => regex.test(url)),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'external-samples',
+              expiration: {
+                maxEntries: 5000,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 14 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+      devOptions: {
+        enabled: false,
+      },
+      manifest: {
+        includeAssets: ['favicon.ico', 'icons/apple-icon-180.png', 'favicon.svg'],
+        name: 'Strudel REPL',
+        short_name: 'Strudel',
+        description:
+          'Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript.',
+        theme_color: '#222222',
+        icons: [
+          {
+            src: 'icons/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: 'icons/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+          {
+            src: 'icons/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: 'icons/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
   ],
-  site: `https://strudel.tidalcycles.org`,
-  base: '/',
+  site,
+  base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed
@@ -39,13 +129,3 @@ export default defineConfig({
     },
   },
 });
-
-/*
-  build: {
-    outDir: '../out',
-    sourcemap: true,
-    rollupOptions: {
-      plugins: [visualizer({ template: 'treemap' })],
-    },
-  },
-  */

website/package.json

@@ -21,6 +21,8 @@
     "@docsearch/react": "^3.1.0",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
+    "@nanostores/persistent": "^0.7.0",
+    "@nanostores/react": "^0.4.1",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/csound": "workspace:*",
     "@strudel.cycles/midi": "workspace:*",
@@ -34,23 +36,30 @@
     "@strudel.cycles/webaudio": "workspace:*",
     "@strudel.cycles/xen": "workspace:*",
     "@supabase/supabase-js": "^1.35.3",
+    "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@uiw/codemirror-themes-all": "^4.19.8",
     "astro": "^1.7.2",
+    "canvas": "^2.11.0",
     "fraction.js": "^4.2.0",
     "nanoid": "^4.0.0",
+    "nanostores": "^0.7.4",
     "preact": "^10.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
+    "rehype-urls": "^1.1.1",
     "remark-toc": "^8.0.1",
-    "tailwindcss": "^3.2.4",
-    "canvas": "^2.11.0"
+    "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
-    "html-escaper": "^3.0.3"
+    "@vite-pwa/astro": "^0.0.1",
+    "html-escaper": "^3.0.3",
+    "vite-plugin-pwa": "^0.14.1",
+    "workbox-window": "^6.5.4"
   }
 }

website/public/fonts/3270/LICENSE.txt

@@ -0,0 +1,51 @@
+Copyright 2022 The 3270font Authors (https://github.com/rbanffy/3270font)
+
+Copyright (c) 2011-2022, Ricardo Banffy.
+Copyright (c) 1993-2011, Paul Mattes.
+Copyright (c) 2004-2005, Don Russell.
+Copyright (c) 2004, Dick Altenbern.
+Copyright (c) 1990, Jeff Sparkes.
+Copyright (c) 1989, Georgia Tech Research Corporation (GTRC), Atlanta, GA 30332.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+    * Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+
+    * Neither the name of Ricardo Banffy, Paul Mattes, Don Russell,
+      Dick Altenbern, Jeff Sparkes, GTRC nor the names of their contributors
+      may be used to endorse or promote products derived from this software
+      without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
+IN NO EVENT SHALL RICARDO BANFFY, PAUL MATTES, DON RUSSELL, DICK ALTENBERN, JEFF
+SPARKES OR GTRC BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
+OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The Debian Logo glyph is based on the Debian Open Use Logo and is
+Copyright (c) 1999 Software in the Public Interest, Inc., and it is
+incorporated here under the terms of the Creative Commons
+Attribution-ShareAlike 3.0 Unported License. The logo is released
+under the terms of the GNU Lesser General Public License, version 3 or
+any later version, or, at your option, of the Creative Commons
+Attribution-ShareAlike 3.0 Unported License.
+
+Ubuntu, the Ubuntu logo and the Circle of Friends symbol are
+registered trademarks of Canonical Ltd.
+
+The Fontforge SFD font description file is optionally licensed under
+the SIL Open Font License v1.1 with no Reserved Font Name. This
+license is available with a FAQ at http://scripts.sil.org/OFL.

website/public/fonts/BigBlueTerminal/LICENSE.txt

@@ -0,0 +1,428 @@
+Attribution-ShareAlike 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+	wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More_considerations
+     for the public: 
+	wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-ShareAlike 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-ShareAlike 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. BY-SA Compatible License means a license listed at
+     creativecommons.org/compatiblelicenses, approved by Creative
+     Commons as essentially the equivalent of this Public License.
+
+  d. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  e. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  f. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  g. License Elements means the license attributes listed in the name
+     of a Creative Commons Public License. The License Elements of this
+     Public License are Attribution and ShareAlike.
+
+  h. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  i. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  j. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  k. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  l. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  m. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. Additional offer from the Licensor -- Adapted Material.
+               Every recipient of Adapted Material from You
+               automatically receives an offer from the Licensor to
+               exercise the Licensed Rights in the Adapted Material
+               under the conditions of the Adapter's License You apply.
+
+            c. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+  b. ShareAlike.
+
+     In addition to the conditions in Section 3(a), if You Share
+     Adapted Material You produce, the following conditions also apply.
+
+       1. The Adapter's License You apply must be a Creative Commons
+          license with the same License Elements, this version or
+          later, or a BY-SA Compatible License.
+
+       2. You must include the text of, or the URI or hyperlink to, the
+          Adapter's License You apply. You may satisfy this condition
+          in any reasonable manner based on the medium, means, and
+          context in which You Share Adapted Material.
+
+       3. You may not offer or impose any additional or different terms
+          or conditions on, or apply any Effective Technological
+          Measures to, Adapted Material that restrict exercise of the
+          rights granted under the Adapter's License You apply.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material,
+
+     including for purposes of Section 3(b); and
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.
+

website/public/fonts/PressStart2P/OFL.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2012, Cody "CodeMan38" Boisclair (cody@zone38.net), with Reserved Font Name "Press Start 2P"
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

website/src/components/Footer/AvatarList.astro

@@ -1,66 +1,64 @@
 ---
 // fetch all commits for just this page's path
 type Props = {
-	path: string;
+  path: string;
 };
 const { path } = Astro.props as Props;
-const resolvedPath = `examples/docs/${path}`;
-const url = `https://api.github.com/repos/withastro/astro/commits?path=${resolvedPath}`;
-const commitsURL = `https://github.com/withastro/astro/commits/main/${resolvedPath}`;
+const resolvedPath = `website/src/pages${path}.mdx`;
+const url = `https://api.github.com/repos/tidalcycles/strudel/commits?path=${resolvedPath}`;
+const commitsURL = `https://github.com/tidalcycles/strudel/commits/main/${resolvedPath}`;
 
 type Commit = {
-	author: {
-		id: string;
-		login: string;
-	};
+  author: {
+    id: string;
+    login: string;
+  };
 };
 
 async function getCommits(url: string) {
-	try {
-		const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello';
-		if (!token) {
-			throw new Error(
-				'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
-			);
-		}
+  try {
+    const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello';
+    if (!token) {
+      throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.');
+    }
 
-		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
+    const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
 
-		const res = await fetch(url, {
-			method: 'GET',
-			headers: {
-				Authorization: auth,
-				'User-Agent': 'astro-docs/1.0',
-			},
-		});
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: auth,
+        'User-Agent': 'astro-docs/1.0',
+      },
+    });
 
-		const data = await res.json();
+    const data = await res.json();
 
-		if (!res.ok) {
-			throw new Error(
-				`Request to fetch commits failed. Reason: ${res.statusText}
-       Message: ${data.message}`
-			);
-		}
+    if (!res.ok) {
+      throw new Error(
+        `Request to fetch commits failed. Reason: ${res.statusText}
+       Message: ${data.message}`,
+      );
+    }
 
-		return data as Commit[];
-	} catch (e) {
-		console.warn(`[error]  /src/components/AvatarList.astro 
+    return data as Commit[];
+  } catch (e) {
+    console.warn(`[error]  /src/components/AvatarList.astro 
     ${(e as any)?.message ?? e}`);
-		return [] as Commit[];
-	}
+    return [] as Commit[];
+  }
 }
 
 function removeDups(arr: Commit[]) {
-	const map = new Map<string, Commit['author']>();
+  const map = new Map<string, Commit['author']>();
+  for (let item of arr) {
+    const author = item.author;
+    // Deduplicate based on author.id
+    //map.set(author.id, { login: author.login, id: author.id });
+    author && map.set(author.id, { login: author.login, id: author.id });
+  }
 
-	for (let item of arr) {
-		const author = item.author;
-		// Deduplicate based on author.id
-		map.set(author.id, { login: author.login, id: author.id });
-	}
-
-	return [...map.values()];
+  return [...map.values()];
 }
 
 const data = await getCommits(url);
@@ -70,102 +68,102 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 ---
 
 <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
-<div class="contributors">
-	<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
-		{
-			recentContributors.map((item) => (
-				<li>
-					<a href={`https://github.com/${item.login}`}>
-						<img
-							alt={`Contributor ${item.login}`}
-							title={`Contributor ${item.login}`}
-							width="64"
-							height="64"
-							src={`https://avatars.githubusercontent.com/u/${item.id}`}
-						/>
-					</a>
-				</li>
-			))
-		}
-	</ul>
-	{
-		additionalContributors > 0 && (
-			<span>
-				<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
-					additionalContributors > 1 ? 's' : ''
-				}.`}</a>
-			</span>
-		)
-	}
-	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
+<div class="contributors px-4 mb-8">
+  <ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
+    {
+      recentContributors.map((item) => (
+        <li>
+          <a href={`https://github.com/${item.login}`}>
+            <img
+              alt={`Contributor ${item.login}`}
+              title={`Contributor ${item.login}`}
+              width="64"
+              height="64"
+              src={`https://avatars.githubusercontent.com/u/${item.id}`}
+            />
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+  {
+    additionalContributors > 0 && (
+      <span>
+        <a href={commitsURL}>{`and ${additionalContributors} additional contributor${
+          additionalContributors > 1 ? 's' : ''
+        }.`}</a>
+      </span>
+    )
+  }
+  {unique.length === 0 && <a href={commitsURL}>Contributors</a>}
 </div>
 
 <style>
-	.avatar-list {
-		--avatar-size: 2.5rem;
-		--avatar-count: 3;
+  .avatar-list {
+    --avatar-size: 2.5rem;
+    --avatar-count: 3;
 
-		display: grid;
-		list-style: none;
-		/* Default to displaying most of the avatar to
+    display: grid;
+    list-style: none;
+    /* Default to displaying most of the avatar to
   enable easier access on touch devices, ensuring
   the WCAG touch target size is met or exceeded */
-		grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
-		/* `padding` matches added visual dimensions of
+    grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
+    /* `padding` matches added visual dimensions of
   the `box-shadow` to help create a more accurate
   computed component size */
-		padding: 0.08em;
-		font-size: var(--avatar-size);
-	}
+    padding: 0.08em;
+    font-size: var(--avatar-size);
+  }
 
-	@media (any-hover: hover) and (any-pointer: fine) {
-		.avatar-list {
-			/* We create 1 extra cell to enable the computed 
+  @media (any-hover: hover) and (any-pointer: fine) {
+    .avatar-list {
+      /* We create 1 extra cell to enable the computed 
     width to match the final visual width */
-			grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
-		}
-	}
+      grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
+    }
+  }
 
-	.avatar-list li {
-		width: var(--avatar-size);
-		height: var(--avatar-size);
-	}
+  .avatar-list li {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+  }
 
-	.avatar-list li:hover ~ li a,
-	.avatar-list li:focus-within ~ li a {
-		transform: translateX(33%);
-	}
+  .avatar-list li:hover ~ li a,
+  .avatar-list li:focus-within ~ li a {
+    transform: translateX(33%);
+  }
 
-	.avatar-list img,
-	.avatar-list a {
-		display: block;
-		border-radius: 50%;
-	}
+  .avatar-list img,
+  .avatar-list a {
+    display: block;
+    border-radius: 50%;
+  }
 
-	.avatar-list a {
-		transition: transform 180ms ease-in-out;
-	}
+  .avatar-list a {
+    transition: transform 180ms ease-in-out;
+  }
 
-	.avatar-list img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		background-color: #fff;
-		box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
-	}
+  .avatar-list img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background-color: #fff;
+    box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
+  }
 
-	.avatar-list a:focus {
-		outline: 2px solid transparent;
-		/* Double-layer trick to work for dark and light backgrounds */
-		box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-	}
+  .avatar-list a:focus {
+    outline: 2px solid transparent;
+    /* Double-layer trick to work for dark and light backgrounds */
+    box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+  }
 
-	.contributors {
-		display: flex;
-		align-items: center;
-	}
+  .contributors {
+    display: flex;
+    align-items: center;
+  }
 
-	.contributors > * + * {
-		margin-left: 0.75rem;
-	}
+  .contributors > * + * {
+    margin-left: 0.75rem;
+  }
 </style>

website/src/components/Footer/Footer.astro

@@ -1,19 +0,0 @@
----
-import AvatarList from './AvatarList.astro';
-type Props = {
-	path: string;
-};
-const { path } = Astro.props as Props;
----
-
-<footer>
-	<AvatarList path={path} />
-</footer>
-
-<style>
-	footer {
-		margin-top: auto;
-		padding: 2rem;
-		border-top: 3px solid var(--theme-divider);
-	}
-</style>

website/src/components/HeadCommon.astro

@@ -1,4 +1,5 @@
 ---
+import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
 
 const { BASE_URL } = import.meta.env;
@@ -12,34 +13,75 @@ const base = BASE_URL;
 
 <link rel="icon" type="image/svg+xml" href="favicon.ico" />
 
-<link rel="sitemap" href="./sitemap.xml" />
+<meta
+  name="description"
+  content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
+/>
+<link rel="icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
+<meta name="theme-color" content="#222222" />
 
 <base href={base} />
 
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
-
 <!-- Scrollable a11y code helper -->
 <script src="./make-scrollable-code-focusable.js" is:inline></script>
 
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-  /*   const root = document.documentElement;
-  const theme = localStorage.getItem('theme');
-  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    root.classList.add('theme-dark');
-  } else {
-    root.classList.remove('theme-dark');
-  } */
-</script>
+<script src="/src/pwa.ts"></script>
+<!-- this does not work for some reason: -->
+<!-- <style is:global define:vars={strudelTheme}></style> -->
+<!-- the following variables are just a fallback to make sure everything is readable without JS -->
+<style is:global>
+  :root {
+    --background: #222;
+    --lineBackground: #22222250;
+    --foreground: #fff;
+    --caret: #ffcc00;
+    --selection: rgba(128, 203, 196, 0.5);
+    --selectionMatch: #036dd626;
+    --lineHighlight: #00000050;
+    --gutterBackground: transparent;
+    --gutterForeground: #8a919966;
+  }
+</style>
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9" is:inline></script>
 <script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-TEL60V1WM9');
-</script> -->
+  import { settings } from '../repl/themes.mjs';
+  import { settingsMap } from '../settings.mjs';
+  import { listenKeys } from 'nanostores';
+  const themeStyle = document.createElement('style');
+  themeStyle.id = 'strudel-theme';
+  document.head.append(themeStyle);
+  function activateTheme(name) {
+    if (!settings[name]) {
+      console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
+    }
+    const themeSettings = settings[name] || settings.strudelTheme;
+    // set css variables
+    themeStyle.innerHTML = `:root {
+      ${Object.entries(themeSettings)
+        // important to override fallback
+        .map(([key, value]) => `--${key}: ${value} !important;`)
+        .join('\n')}
+    }`;
+    // tailwind dark mode
+    if (themeSettings.light) {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+  }
+
+  activateTheme(settingsMap.get().theme);
+  listenKeys(settingsMap, ['theme'], ({ theme }) => activateTheme(theme));
+
+  // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
+  const appHeight = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`);
+  };
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', appHeight);
+    appHeight();
+  }
+</script>

website/src/components/HeadSEO.astro

@@ -2,8 +2,8 @@
 import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
 
 export interface Props {
-	frontmatter: Frontmatter;
-	canonicalUrl: URL;
+  frontmatter: Frontmatter;
+  canonicalUrl: URL;
 }
 
 const { frontmatter, canonicalUrl } = Astro.props as Props;
@@ -23,11 +23,7 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} />
 <meta property="og:image" content={canonicalImageSrc} />
 <meta property="og:image:alt" content={imageAlt} />
-<meta
-	name="description"
-	property="og:description"
-	content={frontmatter.description ?? SITE.description}
-/>
+<meta name="description" property="og:description" content={frontmatter.description ?? SITE.description} />
 <meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
@@ -37,10 +33,3 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta name="twitter:description" content={frontmatter.description ?? SITE.description} />
 <meta name="twitter:image" content={canonicalImageSrc} />
 <meta name="twitter:image:alt" content={imageAlt} />
-
-<!--
-  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
-  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
-  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
--->

website/src/components/Header/Header.astro

@@ -19,13 +19,13 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
-<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-[#161616]" title="Top Navigation">
+<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->
   <div class="flex overflow-visible items-center grow" style="overflow:visible">
     <a href="/" class="flex items-center text-2xl space-x-2">
-      <h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
+      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
         <span>🌀</span>
         <div class="flex space-x-1 items-baseline">
           <span class="">strudel</span>

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -14,7 +14,7 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
-<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20">
+<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
   <ul>
     {
       Object.entries(sidebar).map(([header, children]) => (
@@ -27,8 +27,8 @@ const sidebar = SIDEBAR[langCode];
                 return (
                   <li class="">
                     <a
-                      class={`pl-4 py-0.5 w-full hover:bg-header block${
-                        currentPageMatch === child.link ? ' bg-header' : ''
+                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
+                        currentPageMatch === child.link ? ' bg-lineHighlight' : ''
                       }`}
                       href={url}
                       aria-current={currentPageMatch === child.link ? 'page' : false}

website/src/components/PageContent/PageContent.astro

@@ -22,7 +22,7 @@ const currentPage = Astro.url.pathname;
       <span>On this Page:</span>
       <TableOfContents client:media="(max-width: 50em)" headings={headings} currentPage={currentPage} />
     </nav> -->
-    <div class="prose prose-invert max-w-full pb-8">
+    <div class="prose dark:prose-invert max-w-full pb-8">
       <slot />
     </div>
   </section>

website/src/components/RightSidebar/RightSidebar.astro

@@ -2,6 +2,7 @@
 import TableOfContents from './TableOfContents';
 import MoreMenu from './MoreMenu.astro';
 import type { MarkdownHeading } from 'astro';
+import AvatarList from '../Footer/AvatarList.astro';
 
 type Props = {
   headings: MarkdownHeading[];
@@ -9,10 +10,13 @@ type Props = {
 };
 
 const { headings, githubEditUrl } = Astro.props as Props;
-const currentPage = Astro.url.pathname;
+let currentPage = Astro.url.pathname;
+// remove slash before #
+currentPage = currentPage.endsWith('/') ? currentPage.slice(0, -1) : currentPage;
 ---
 
-<nav aria-labelledby="grid-right" class="w-64">
+<nav aria-labelledby="grid-right" class="w-64 text-foreground">
   <TableOfContents client:media="(min-width: 50em)" headings={headings} currentPage={currentPage} />
   <MoreMenu editHref={githubEditUrl} />
+  <!-- <AvatarList path={currentPage} /> -->
 </nav>

website/src/components/RightSidebar/TableOfContents.tsx

@@ -78,9 +78,9 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[]; curren
               <a
                 href={`${currentPage}#${heading.slug}`}
                 onClick={onLinkClick}
-                className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
+                className={`py-0.5 block cursor-pointer w-full border-l-4 border-lineHighlight hover:bg-lineHighlight ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
-                } ${currentID === heading.slug ? 'bg-header' : ''}`.trim()}
+                } ${currentID === heading.slug ? 'bg-lineHighlight' : ''}`.trim()}
               >
                 {unescape(heading.text)}
               </a>

website/src/config.ts

@@ -1,16 +1,14 @@
 export const SITE = {
-  title: 'Strudel Docs',
-  description: 'Documentation for the Strudel Live Coding Language',
-  defaultLanguage: 'en_US',
+  title: 'Strudel',
+  description: 'Strudel is a music live coding editor that brings TidalCycles to the browser.',
+  defaultLanguage: 'en',
 };
 
 export const OPEN_GRAPH = {
   image: {
-    src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true',
-    alt:
-      'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground',
+    src: 'https://strudel.tidalcycles.org/icon.png',
+    alt: 'Strudel Logo',
   },
-  twitter: 'astrodotbuild',
 };
 
 // This is the type of the frontmatter you put in the docs markdown files.
@@ -67,15 +65,17 @@ export const SIDEBAR: Sidebar = {
       { text: 'Tonal Modifiers', link: 'learn/tonal' },
     ],
     More: [
+      { text: 'MIDI & OSC', link: 'learn/input-output' },
+      { text: 'Offline', link: 'learn/pwa' },
       { text: 'Patterns', link: 'technical-manual/patterns' },
       { text: 'Pattern Alignment', link: 'technical-manual/alignment' },
-      { text: 'MIDI & OSC', link: 'learn/input-output' },
       { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' },
     ],
     Development: [
       { text: 'REPL', link: 'technical-manual/repl' },
       { text: 'Docs', link: 'technical-manual/docs' },
       { text: 'Testing', link: 'technical-manual/testing' },
+      // { text: 'Packages', link: 'technical-manual/packages' },
       // { text: 'Internals', link: 'technical-manual/internals' },
     ],
   },

website/src/docs/MiniRepl.css

@@ -0,0 +1,9 @@
+.cm-activeLine {
+  background-color: transparent !important;
+}
+
+.cm-theme {
+  background-color: var(--background);
+  border: 1px solid var(--lineHighlight);
+  padding: 2px;
+}

website/src/docs/MiniRepl.jsx

@@ -2,6 +2,9 @@ import { evalScope, controls } from '@strudel.cycles/core';
 import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
 import { useEffect, useState } from 'react';
 import { prebake } from '../repl/prebake';
+import { themes, settings } from '../repl/themes.mjs';
+import './MiniRepl.css';
+import { useSettings } from '../settings.mjs';
 
 let modules;
 if (typeof window !== 'undefined') {
@@ -25,6 +28,7 @@ if (typeof window !== 'undefined') {
 
 export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
   const [Repl, setRepl] = useState();
+  const { theme } = useSettings();
   useEffect(() => {
     // we have to load this package on the client
     // because codemirror throws an error on the server
@@ -34,7 +38,14 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
   }, []);
   return Repl ? (
     <div className="mb-4">
-      <Repl tune={tune} hideOutsideView={true} drawTime={drawTime} punchcard={punchcard} canvasHeight={canvasHeight} />
+      <Repl
+        tune={tune}
+        hideOutsideView={true}
+        drawTime={drawTime}
+        punchcard={punchcard}
+        canvasHeight={canvasHeight}
+        theme={themes[theme]}
+      />
     </div>
   ) : (
     <pre>{tune}</pre>

website/src/docs/MobileNav.jsx

@@ -23,7 +23,7 @@ export default function MobileNav({ sidebar }) {
             <div className="space-y-1 px-4 py-4 bg-[#161616]">
               <a
                 href=".."
-                className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-bg hover:px-2 rounded-md"
+                className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-background hover:px-2 rounded-md"
               >
                 <span>go to REPL</span>
               </a>
@@ -36,7 +36,9 @@ export default function MobileNav({ sidebar }) {
                       as="a"
                       href={`/${item.link}`}
                       className={classNames(
-                        item.current ? 'bg-bg text-white' : 'text-gray-300 hover:bg-bg hover:text-white',
+                        item.current
+                          ? 'bg-background text-white'
+                          : 'text-gray-300 hover:bg-lineHighlight hover:text-white',
                         'block px-3 py-2 rounded-md text-base font-medium',
                       )}
                       aria-current={item.current ? 'page' : undefined}

website/src/docs/docs.css

@@ -10,27 +10,33 @@
   height: 70px;
   visibility: hidden;
   pointer-events: none;
-  position: relative;
 }
 
-.prose h1:hover .icon-link,
-.prose h2:hover .icon-link,
-.prose h3:hover .icon-link,
-.prose h4:hover .icon-link,
-.prose h5:hover .icon-link,
-.prose h6:hover .icon-link,
-.icon.icon-link:hover {
+.icon.icon-link {
+  visibility: hidden;
+}
+
+.prose h1:hover .icon.icon-link,
+.prose h2:hover .icon.icon-link,
+.prose h3:hover .icon.icon-link,
+.prose h4:hover .icon.icon-link,
+.prose h5:hover .icon.icon-link,
+.prose h6:hover .icon.icon-link {
   visibility: visible;
 }
-.icon.icon-link {
-  background-image: url(./link.svg);
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 16px;
-  display: block;
-  position: absolute;
-  visibility: hidden;
-  margin-left: -20px;
-  width: 20px;
-  margin-top: 8px;
+
+.prose h1 > a,
+.prose h2 > a,
+.prose h3 > a,
+.prose h4 > a,
+.prose h5 > a,
+.prose h6 > a {
+  text-decoration: none !important;
+}
+
+.icon.icon-link::after {
+  content: '#';
+  margin-left: 8px;
+  font-size: 0.9em;
+  opacity: 50%;
 }

website/src/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="astro/client" />
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/client" />

website/src/layouts/MainLayout.astro

@@ -7,7 +7,6 @@ import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
 import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
 import * as CONFIG from '../config';
 import type { MarkdownHeading } from 'astro';
-import Footer from '../components/Footer/Footer.astro';
 import '../docs/docs.css';
 
 type Props = {
@@ -22,16 +21,16 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
 const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 ---
 
-<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial dark">
   <head>
     <HeadCommon />
     <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
     <title>
-      {frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+      {frontmatter.title ? `${frontmatter.title} 🌀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
   </head>
 
-  <body class="h-screen text-gray-50">
+  <body class="h-app-height text-gray-50 bg-background">
     <div class="w-full h-full space-y-4 flex flex-col">
       <header class="max-w-full fixed top-0 w-full z-[100]">
         <Header currentPage={currentPage} />
@@ -49,7 +48,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
           </aside>
         </div>
       </main>
-      <!--     <Footer path={currentFile} /> -->
     </div>
   </body>
 </html>

website/src/pages/functions/intro.mdx

@@ -1,5 +1,5 @@
 ---
-title: Introduction
+title: JavaScript API
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -71,3 +71,5 @@ You can freely mix JS patterns, mini patterns and values! For example, this patt
 
 While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
 When using JS patterns, there is a lot more you can do.
+
+What [Pattern Constructors](/learn/factories) does Strudel offer?

website/src/pages/functions/value-modifiers.mdx

@@ -160,3 +160,5 @@ x(sine.range(0, 200)).y(cosine.range(0, 200));
 />
 
 Note that these params will not do anything until you give them meaning in your custom output!
+
+From modifying parameters we transition to the concept of [Signals](/learn/signals).

website/src/pages/index.astro

@@ -3,12 +3,12 @@ import HeadCommon from '../components/HeadCommon.astro';
 import { Repl } from '../repl/Repl.jsx';
 ---
 
-<html>
+<html lang="en" class="dark">
   <head>
     <HeadCommon />
     <title>Strudel REPL</title>
   </head>
-  <body>
+  <body class="h-app-height bg-background">
     <Repl client:only="react" />
   </body>
 </html>

website/src/pages/learn/accumulation.mdx

@@ -1,6 +1,5 @@
 ---
 title: Accumulation Modifiers
-description: Strudel Tutorial - Coding syntax
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -32,3 +31,5 @@ import { JsDoc } from '../../docs/JsDoc';
 ## stut
 
 <JsDoc client:idle name="stut" h={0} />
+
+There are also [Tonal Modifiers](/learn/tonal).

website/src/pages/learn/code.mdx

@@ -1,6 +1,5 @@
 ---
 title: Coding syntax
-description: Strudel Tutorial - Coding syntax
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -15,8 +14,8 @@ Let's look at this simple example again. What do we notice?
 
 <MiniRepl client:idle tune={`freq("220 275 330 440").s("sine")`} />
 
-- We have a word `freq` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"a3 c#4 e4 a4"`.
-- Then we have a dot `.` followed by another similar piece of code `s("sawtooth")`.
+- We have a word `freq` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"220 275 330 440"` (corresponding to the pitches a3, c#4, e4, a4).
+- Then we have a dot `.` followed by another similar piece of code `s("sine")`.
 - We can also see these texts are _highlighted_ using colours: word `freq` is purple, the brackets `()` are grey, and the content inside the `""` are green.
 
 What happens if we try to 'break' this pattern in different ways?

website/src/pages/learn/conditional-modifiers.mdx

@@ -59,3 +59,5 @@ import { JsDoc } from '../../docs/JsDoc';
 ## invert
 
 <JsDoc client:idle name="invert" h={0} />
+
+After Conditional Modifiers, let's see what [Accumulation Modifiers](/learn/accumulation) have to offer.

website/src/pages/learn/csound.mdx

@@ -150,3 +150,5 @@ In the future, the integration could be improved by passing all patterned contro
 This could work by a unique [channel](https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound/#step-4---writing-continuous-data-channels)
 for each value. Channels could be read [like this](https://github.com/csound/csound/blob/master/Android/CsoundForAndroid/CsoundAndroidExamples/src/main/res/raw/multitouch_xy.csd).
 Also, it might make sense to have a standard library of csound instruments for strudel's effects.
+
+Now, let's dive into the [Functional JavaScript API](/functions/intro)

website/src/pages/learn/effects.mdx

@@ -1,6 +1,5 @@
 ---
 title: Audio effects
-description: Strudel Tutorial - Audio effects
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -9,16 +8,101 @@ import { JsDoc } from '../../docs/JsDoc';
 
 # Audio Effects
 
-Wether you're using a synth or a sample, you can apply any of the following built-in audio effects.
+Whether you're using a synth or a sample, you can apply any of the following built-in audio effects.
 As you might suspect, the effects can be chained together, and they accept a pattern string as their argument.
 
-## bandf
+# Filters
 
-<JsDoc client:idle name="bandf" h={0} />
+Filters are an essential building block of [subtractive synthesis](https://en.wikipedia.org/wiki/Subtractive_synthesis).
+Strudel comes with 3 types of filters:
 
-## bandq
+- low-pass filter: low frequencies may _pass_, high frequencies are cut off
+- high-pass filter: high frequencies may _pass_, low frequencies are cut off
+- band-pass filters: only a frequency band may _pass_, low and high frequencies around are cut off
 
-<JsDoc client:idle name="bandq" h={0} />
+Each filter has 2 parameters:
+
+- cutoff: the frequency at which the filter starts to work. e.g. a low-pass filter with a cutoff of 1000Hz allows frequencies below 1000Hz to pass.
+- q-value: Controls the resonance of the filter. Higher values sound more aggressive. Also see [Q-Factor](https://en.wikipedia.org/wiki/Q_factor)
+
+## lpf
+
+<JsDoc client:idle name="lpf" h={0} />
+
+## lpq
+
+<JsDoc client:idle name="lpq" h={0} />
+
+## hpf
+
+<JsDoc client:idle name="hpf" h={0} />
+
+## hpq
+
+<JsDoc client:idle name="hpq" h={0} />
+
+## bpf
+
+<JsDoc client:idle name="bpf" h={0} />
+
+## bpq
+
+<JsDoc client:idle name="bpq" h={0} />
+
+## vowel
+
+<JsDoc client:idle name="vowel" h={0} />
+
+# Amplitude Envelope
+
+The amplitude [envelope](<https://en.wikipedia.org/wiki/Envelope_(music)>) controls the dynamic contour of a sound.
+Strudel uses ADSR envelopes, which are probably the most common way to describe an envelope:
+
+![ADSR](https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/ADSR_parameter.svg/1920px-ADSR_parameter.svg.png)
+
+[image link](https://commons.wikimedia.org/wiki/File:ADSR_parameter.svg)
+
+## attack
+
+<JsDoc client:idle name="attack" h={0} />
+
+## decay
+
+<JsDoc client:idle name="decay" h={0} />
+
+## sustain
+
+<JsDoc client:idle name="sustain" h={0} />
+
+## release
+
+<JsDoc client:idle name="release" h={0} />
+
+# Dynamics
+
+## gain
+
+<JsDoc client:idle name="gain" h={0} />
+
+## velocity
+
+<JsDoc client:idle name="velocity" h={0} />
+
+# Panning
+
+## jux
+
+<JsDoc client:idle name="jux" h={0} />
+
+## juxBy
+
+<JsDoc client:idle name="juxBy" h={0} />
+
+## pan
+
+<JsDoc client:idle name="pan" h={0} />
+
+# Waveshaping
 
 ## coarse
 
@@ -28,50 +112,10 @@ As you might suspect, the effects can be chained together, and they accept a pat
 
 <JsDoc client:idle name="crush" h={0} />
 
-## cutoff
-
-<JsDoc client:idle name="cutoff" h={0} />
-
-## gain
-
-<JsDoc client:idle name="gain" h={0} />
-
-## hcutoff
-
-<JsDoc client:idle name="hcutoff" h={0} />
-
-## hresonance
-
-<JsDoc client:idle name="hresonance" h={0} />
-
-## pan
-
-<JsDoc client:idle name="pan" h={0} />
-
-## resonance
-
-<JsDoc client:idle name="resonance" h={0} />
-
 ## shape
 
 <JsDoc client:idle name="shape" h={0} />
 
-## velocity
-
-<JsDoc client:idle name="velocity" h={0} />
-
-## vowel
-
-<JsDoc client:idle name="vowel" h={0} />
-
-## jux
-
-<JsDoc client:idle name="jux" h={0} />
-
-## juxBy
-
-<JsDoc client:idle name="juxBy" h={0} />
-
 # Global Effects
 
 ## Local vs Global Effects
@@ -102,3 +146,5 @@ global effects use the same chain for all events of the same orbit:
 ## roomsize
 
 <JsDoc client:idle name="roomsize" h={0} />
+
+Next, we'll look at strudel's support for [Csound](/learn/csound).

website/src/pages/learn/factories.mdx

@@ -1,6 +1,5 @@
 ---
 title: Pattern Constructors
-description: Strudel Tutorial
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -65,3 +64,5 @@ As a chained function:
 ## run
 
 <JsDoc client:idle name="run" h={0} punchcard />
+
+After Pattern Constructors, let's see what [Time Modifiers](/learn/time-modifiers) are available.

website/src/pages/learn/getting-started.mdx

@@ -1,6 +1,5 @@
 ---
 title: Getting Started
-description: Strudel Tutorial - Getting Started
 layout: ../../layouts/MainLayout.astro
 ---
 

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

@@ -1,6 +1,5 @@
 ---
-title: Other Outptuts
-description: Strudel Tutorial
+title: MIDI & OSC
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -41,8 +40,8 @@ Getting [SuperDirt](https://github.com/musikinformatik/SuperDirt/) to work with
 1. install SuperCollider + sc3 plugins, see [Tidal Docs](https://tidalcycles.org/docs/) (Install Tidal) for more info.
 2. install [node.js](https://nodejs.org/en/)
 3. download [Strudel Repo](https://github.com/tidalcycles/strudel/) (or git clone, if you have git installed)
-4. run `npm i` in the strudel directory
-5. run `npm run osc` to start the osc server, which forwards OSC messages from Strudel REPL to SuperCollider
+4. run `pnpm i` in the strudel directory
+5. run `pnpm run osc` to start the osc server, which forwards OSC messages from Strudel REPL to SuperCollider
 
 Now you're all set!
 
@@ -70,3 +69,5 @@ The following functions can be used with [SuperDirt](https://github.com/musikinf
 Please refer to [Tidal Docs](https://tidalcycles.org/) for more info.
 
 <br />
+
+But can we use Strudel [offline](/learn/pwa)?

website/src/pages/learn/mini-notation.mdx

@@ -58,7 +58,7 @@ Try adding or removing notes and notice how the tempo changes!
 
 <MiniRepl client:idle tune={`note("c d e f g a b")`} punchcard />
 
-Note that the overall duration of time does not change, and instead each note length descreases.
+Note that the overall duration of time does not change, and instead each note length decreases.
 This is a key idea, as it illustrates the 'Cycle' in TidalCycles!
 
 Each space-separated note in this sequence is an _event_.
@@ -103,7 +103,7 @@ Contrary to division, a sequence can be sped up by multiplying it by a number us
 
 <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2")`} punchcard />
 
-The multiplication by two here means that the sequence will play twice a cycle.
+The multiplication by two here means that the sequence will play twice per cycle.
 
 As with divisions, multiplications can be decimal (`*2.75`):
 
@@ -235,3 +235,5 @@ Starting with this one `n`, can you make a _pattern string_ that uses every sing
 <MiniRepl client:idle tune={`n("60")`} />
 
 <br />
+
+Next: How do [Samples](/learn/samples) play into this?

website/src/pages/learn/notes.mdx

@@ -1,6 +1,5 @@
 ---
 title: Notes
-description: Strudel Tutorial - Notes
 layout: ../../layouts/MainLayout.astro
 ---
 

website/src/pages/learn/pwa.mdx

@@ -0,0 +1,11 @@
+---
+title: Offline
+layout: ../../layouts/MainLayout.astro
+---
+
+# Using Strudel Offline
+
+You can use Strudel even without a network! When you first visit the [Strudel REPL](strudel.tidalcycles.org/),
+your browser will download the whole web app including documentation.
+
+Ok, what are [Patterns](/technical-manual/patterns) all about?

website/src/pages/learn/samples.mdx

@@ -1,6 +1,5 @@
 ---
-title: Notes
-description: Strudel Tutorial - Notes
+title: Samples
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -9,16 +8,90 @@ import { JsDoc } from '../../docs/JsDoc';
 
 # Samples
 
-# Default Sample Map
+Samples are the most common way to make sound with tidal and strudel.
+A sample is a (commonly short) piece of audio that is used as a basis for sound generation, undergoing various transformations.
+Music that is based on samples can be thought of as a collage of sound. [Read more about Sampling](<https://en.wikipedia.org/wiki/Sampling_(music)>)
 
-As we have seen, `s` can play back audio samples:
+Strudel allows loading samples in the form of audio files of various formats (wav, mp3, ogg) from any publicly available URL.
 
-<MiniRepl client:idle client:idle tune={`s("bd sd,hh*8,misc/2")`} />
+# Default Samples
 
-These sounds come from Strudel's in-built default "sample map".
-To know which sounds are available, open the [default sample map](https://strudel.tidalcycles.org/EmuSP12.json).
+By default, strudel comes with a built-in "sample map", providing a solid base to play with.
 
-# Custom Sample Maps
+<MiniRepl client:idle tune={`s("bd sd,hh*8, misc/2")`} />
+
+Here, we are using the `s` function to play back different default samples (`bd`, `sd`, `hh` and `misc`) to get a drum beat.
+
+For drum sounds, strudel uses the comprehensive [tidal-drum-machines](https://github.com/ritchse/tidal-drum-machines) library, with the following naming convention:
+
+| Drum                                | Abbreviation |
+| ----------------------------------- | ------------ |
+| Bass drum, Kick drum                | bd           |
+| Snare drum                          | sd           |
+| Rimshot                             | rim          |
+| Clap                                | cp           |
+| Closed hi-hat                       | hh           |
+| Open hi-hat                         | oh           |
+| Crash                               | cr           |
+| Ride                                | rd           |
+| Shakers (and maracas, cabasas, etc) | sh           |
+| High tom                            | ht           |
+| Medium tom                          | mt           |
+| Low tom                             | lt           |
+| Cowbell                             | cb           |
+| Tambourine                          | tb           |
+| Other percussions                   | perc         |
+| Miscellaneous samples               | misc         |
+| Effects                             | fx           |
+
+Furthermore, strudel also loads instrument samples from [VCSL](https://github.com/sgossner/VCSL) by default.
+
+To see which sample names are available, open the `samples` tab in the [REPL](https://strudel.tidalcycles.org/).
+
+Note that only the sample maps (mapping names to URLs) are loaded initially, while the audio samples itself are not loaded until they are actually played.
+This behaviour of loading things only when they are needed is also called `lazy loading`.
+While it saves resources, it can also lead to sounds not being audible the first time they are triggered, because the sound is still loading.
+[This might be fixed in the future](https://github.com/tidalcycles/strudel/issues/187)
+
+# Sound Banks
+
+If we look at the `samples` tab, we can see that the drum samples are all prefixed with drum machine names: `RolandTR808_bd`, `RolandTR808_sd`, `RolandTR808_hh` etc..
+
+We _could_ use them like this:
+
+<MiniRepl client:idle tune={`s("RolandTR808_bd RolandTR808_sd,RolandTR808_hh*8")`} />
+
+... but thats obviously a bit much to write. Using the `bank` function, we can shorten this to:
+
+<MiniRepl client:idle tune={`s("bd sd,hh*8").bank("RolandTR808")`} />
+
+You could even pattern the bank to switch between different drum machines:
+
+<MiniRepl client:idle tune={`s("bd sd,hh*8").bank("<RolandTR808 RolandTR909>")`} />
+
+Behind the scenes, `bank` will just prepend the drum machine name to the sample name with `_` to get the full name.
+This of course only works because the name after `_` (`bd`, `sd` etc..) is standardized.
+Also note that some banks won't have samples for all sounds!
+
+# Selecting Sounds
+
+If we look again at the `samples` tab, there is also a number behind each name, indicating how many individual samples are available.
+For example `RolandTR909_hh(4)` means there are 4 samples of a TR909 hihat available.
+By default, `s` will play the first sample, but we can selecting the other ones using `n`, starting from 0:
+
+<MiniRepl client:idle tune={`s("hh*4").bank("RolandTR909").n("<0 1 2 3>")`} />
+
+Numbers that are too high will just wrap around to the beginning
+
+<MiniRepl client:idle tune={`s("hh*4").bank("RolandTR909").n("<0 1 2 3 4 5 6 7>")`} />
+
+Here, 0-3 will play the same sounds as 4-7, because `RolandTR909_hh` only has 4 sounds.
+
+Selecting sounds also works inside the mini notation, using "`:`" like this:
+
+<MiniRepl client:idle tune={`s("bd:1 bd:2,hh:0 hh:1 hh:2 hh:3").bank("RolandTR909")`} />
+
+# Loading Custom Samples
 
 You can load your own sample map using the `samples` function.
 In this example we create a map using sounds from the default sample map:
@@ -48,7 +121,7 @@ s("bassdrum snaredrum, hihat*8")`}
 
 Here we have changed the "map" to include longer sample names.
 
-# Loading Custom Samples
+## The `samples` function
 
 The `samples` function has two arguments:
 
@@ -87,7 +160,7 @@ We can see there are some guitar samples inside the `/samples` folder, so let's
 s("[g0 g1 g2 g3 g4]/5")`}
 />
 
-# Loading Multiple Samples per Sound
+## Multiple Samples per Sound
 
 It is also possible, to declare multiple files for one sound, using the array notation:
 
@@ -146,7 +219,7 @@ And as above, we can choose the sample number using `n` for even more flexibilit
 n("<0 1 2 3 4>").s("guitar")`}
 />
 
-# Pitched Sounds
+## Pitched Sounds
 
 For pitched sounds, you can use `note`, just like with synths:
 
@@ -170,7 +243,7 @@ note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').clip(1)
   .gain(.5)`}
 />
 
-# Base Pitch
+## Base Pitch
 
 If we have 2 samples with different base pitches, we can make them in tune by specifying the pitch like this:
 
@@ -203,32 +276,51 @@ note("g2!2 <bb2 c3>!2, <c4@3 [<eb4 bb3> g4 f4]>")
 
 The sampler will always pick the closest matching sample for the current note!
 
+## Shabda
+
+If you don't want to select samples by hand, there is also the wonderful tool called [shabda](https://shabda.ndre.gr/).
+With it, you can enter any sample name(s) to query from [freesound.org](https://freesound.org/). Example:
+
+<MiniRepl
+  client:idle
+  tune={`await samples('https://shabda.ndre.gr/bass:4,hihat:4,rimshot:2.json?strudel=1')
+stack(
+  n("0 1 2 3").s('bass').slow(2),
+  n("0 1*2 2 3*2").s('hihat'),
+  n("~ 0 ~ 1").s('rimshot')
+).clip(1)`}
+/>
+
 # Sampler Effects
 
-Below are four different examples of sampler "effects" which are functions that can be used to change the behaviour of sample playback.
-Note that most of what you've learned already about Tidal mini-notation can be used with these functions too.
-Almost everything in Tidal can be patterned using strings!
+Sampler effects are functions that can be used to change the behaviour of sample playback.
 
-### `begin`
+### begin
 
 <JsDoc client:idle name="Pattern.begin" h={0} />
 
-### `end`
+### end
 
 <JsDoc client:idle name="Pattern.end" h={0} />
 
-### `cut`
+### cut
 
 <JsDoc client:idle name="cut" h={0} />
 
-### `loopAt`
+### clip
+
+<JsDoc client:idle name="clip" h={0} />
+
+### loopAt
 
 <JsDoc client:idle name="Pattern.loopAt" h={0} />
 
-### `chop`
+### chop
 
 <JsDoc client:idle name="Pattern.chop" h={0} />
 
-### `speed`
+### speed
 
 <JsDoc client:idle name="speed" h={0} />
+
+After samples, let's see what [Synths](/learn/synths) afford us.

website/src/pages/learn/signals.mdx

@@ -1,6 +1,5 @@
 ---
-title: What is Strudel?
-description: Strudel Tutorial
+title: Signals
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -107,3 +106,5 @@ These methods add random behavior to your Patterns.
 ## always
 
 <JsDoc client:idle name="Pattern.always" h={0} />
+
+Next up: [Conditional Modifiers](/learn/conditional-modifiers)

website/src/pages/learn/sounds.mdx

@@ -1,6 +1,5 @@
 ---
 title: Sounds
-description: Strudel Tutorial - Sounds
 layout: ../../layouts/MainLayout.astro
 ---
 

website/src/pages/learn/strudel-vs-tidal.mdx

@@ -144,3 +144,5 @@ You can get the same tempo as tidal with:
 ```
 note("c a f e").fast(.5625);
 ```
+
+Next up: the [REPL](/technical-manual/repl)

website/src/pages/learn/synths.mdx

@@ -1,6 +1,5 @@
 ---
 title: Synths
-description: Strudel Tutorial - Synths
 layout: ../../layouts/MainLayout.astro
 ---
 
@@ -10,7 +9,7 @@ import { JsDoc } from '../../docs/JsDoc';
 # Synths
 
 For now, [samples](/learn/samples) are the main way to play with Strudel.
-In future, more powerful synthesis capabilities will be added.
+In the future, more powerful synthesis capabilities will be added.
 If in the meantime you want to dive deeper into audio synthesis with Tidal, you will need to [install SuperCollider and SuperDirt](https://tidalcycles.org/docs/).
 
 ## Playing synths with `s`
@@ -29,14 +28,4 @@ The power of patterns allows us to sequence any _param_ independently:
 Now we not only pattern the notes, but the sound as well!
 `sawtooth` `square` and `triangle` are the basic waveforms available in `s`.
 
-## Ampltude Envelope
-
-You can control the envelope of a synth using the `attack`, `decay`, `sustain` and `release` functions:
-
-<MiniRepl
-  client:idle
-  tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')
-  .attack(.1).decay(.1).sustain(.2).release(.1)`}
-/>
-
-<br />
+Next up: [Audio Effects](/learn/effects)...

website/src/pages/learn/time-modifiers.mdx

@@ -105,3 +105,5 @@ Some of these have equivalent operators in the Mini Notation:
 ## ribbon
 
 <JsDoc client:idle name="ribbon" h={0} />
+
+Apart from modifying time, there are ways to [Control Parameters](functions/value-modifiers).

website/src/pages/learn/tonal.mdx

@@ -70,3 +70,5 @@ Together with layer, struct and voicings, this can be used to create a basic bac
   x => x.rootNotes(2).note().s('sawtooth').cutoff(800)
 )`}
 />
+
+So far, we've stayed within the browser. [MIDI and OSC](/learn/input-output) are ways to break out of it.

website/src/pages/technical-manual/alignment.mdx

@@ -45,3 +45,5 @@ This makes way for other ways to align the pattern, and several are already defi
 - `trigzero` is similar to `trig`, but the pattern is 'triggered' from its very first cycle, rather than from the current cycle. `trig` and `trigzero` therefore only give different results where the leftmost pattern differs from one cycle to the next.
 
 We will save going deeper into the background, design and practicalities of these alignment functions for future publications. However in the next section, we take them as a case study for looking at the different design affordances offered by Haskell to Tidal, and JavaScript to Strudel.
+
+Ok, so how do Strudel and Tidal [compare](/learn/strudel-vs-tidal)?

website/src/pages/technical-manual/docs.mdx

@@ -74,3 +74,5 @@ Documentation is written with [jsdoc](https://jsdoc.app/) comments. Example:
 - To regenerate the `doc.json` file manually, run `npm run jsdoc-json`
 - The file is used by the `JsDoc` component to find the documentation by name
 - Also, it is used for the `examples.test.mjs` snapshot test
+
+How does Strudel do its [Testing](/technical-manual/testing)?

website/src/pages/technical-manual/packages.mdx

@@ -1,10 +1,79 @@
+---
+title: Strudel Packages
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+
 ## Strudel Packages
 
+The [strudel repo](github.com/tidalcycles/strudel) is organized into packages, using [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces).
+Publishing packages is done with [lerna](https://lerna.js.org/).
+
 There are different packages for different purposes. They..
 
 - split up the code into smaller chunks
 - can be selectively used to implement some sort of time based system
 
-Please refer to the individual README files in the [packages folder](https://github.com/tidalcycles/strudel/tree/main/packages)
+[See the latest published packages on npm](https://www.npmjs.com/search?q=%40strudel.cycles).
 
-TODO
+### Important bits
+
+- The [root package.json](https://github.com/tidalcycles/strudel/blob/main/package.json) specifies `packages/*` as `workspaces`
+- Each folder in `packages` comes with its own `package.json`, defining a package name of the format `@strudel.cycles/<name>`
+- Running `npm i` from the root folder will symlink all packages to the `node_modules` folder, e.g. `node_modules/@strudel.cycles/core` symlinks `packages/core`
+- These symlinks allow importing the packages with their package name, instead of a relative path, e.g. `import { seq } from '@strudel.cycles/core'`, instead of `import { seq } from '../core/`.
+  This works because the [bare module import](https://vitejs.dev/guide/features.html#npm-dependency-resolving-and-pre-bundling) `@strudel.cycles/core` is resolved to `node_modules/@strudel.cycles/core`.
+  In a project that installs the published packages from npm, these imports will still work, whereas relative ones might not.
+- When a strudel package is importing from another strudel package, the package that is imported from should be listed in the `dependencies` field of the `package.json`.
+  For example, [@strudel.cycles/mini lists `@strudel.cycles/core` as a dependency](https://github.com/tidalcycles/strudel/blob/main/packages/mini/package.json).
+- In development, files in any package can be changed and saved to instantly update the dev server via [hot module replacement](https://vitejs.dev/guide/features.html#hot-module-replacement)
+- To publish packages, `npx lerna publish` will check which packages were changed since the last publish and publish only those.
+  The version numbers in the dependencies of each packages will be updated automatically to the latest version.
+
+### Building & Publishing
+
+Currently, all packages are only published as ESM with vite flavour.
+To build standardized ESM and CJS files, a `vite.config.js` like that is needed:
+
+```js
+import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'index.mjs'),
+      formats: ['es', 'cjs'],
+      fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.js' }[ext]),
+    },
+    rollupOptions: {
+      external: [...Object.keys(dependencies)],
+    },
+    target: 'esnext',
+  },
+});
+```
+
+This will build `index.mjs` (ESM) and `index.js` (CJS) to the dist folder.
+
+### What's the main file?
+
+Currently, each package uses the unbundled `index.mjs` as its main file, which must change for the published version.
+There are 2 ways to handle this:
+
+1. `main` = `dist/index.js`, `module` = `dist/index.mjs`. The built files are used. This means that changing a source file won't take effect in the dev server without a rebuild.
+2. Use different `package.json` files for dev vs publish. So the unbuilt `index.mjs` could be used in dev, while the built files can be used when publishing.
+
+Option 1 could be done with [workspace watching](https://lerna.js.org/docs/features/workspace-watching), although it might make the dev server less snappy..
+Option 2 can be done by [publishing just the dist folder and copying over the `package.json` file](https://stackoverflow.com/questions/37862712/how-to-publish-contents-only-of-a-specific-folder).
+Sadly, [this does not fit into how lerna works](https://github.com/lerna/lerna/issues/91).
+
+https://github.com/changesets/changesets
+
+https://turbo.build/repo/docs/handbook/publishing-packages/versioning-and-publishing
+
+https://pnpm.io/workspaces

website/src/pages/technical-manual/patterns.mdx

@@ -37,3 +37,5 @@ Each event has a value, a begin time and an end time, where time is represented
 Note that the query function is not just a way to access a pattern, but true to the principles of functional programming, is the pattern itself. This means that in theory there is no way to change a pattern, it is opaque as a pure function. In practice though, Strudel and Tidal are all about transforming patterns, so how is this done? The answer is, by replacing the pattern with a new one, that calls the old one. This new one is only able to manipulate the query before passing it to the old pattern, and manipulate the results from it before returning them to caller. But, this is enough to support all the temporal and structural manipulations provided by Strudel (and Tidal's) extensive library of functions.
 
 The above examples do not represent how Strudel is used in practice. In the live coding editor, the user only has to type in the pattern itself, the querying will be handled by the scheduler. The scheduler will repeatedly query the pattern for events, which are then scheduled as sound synthesis or other event triggers.
+
+Can we [align](/technical-manual/alignment) patterns?

website/src/pages/technical-manual/repl.mdx

@@ -186,3 +186,5 @@ function onTrigger(hap, deadline, duration) {
 ```
 
 The above example will create an `OscillatorNode` for each event, where the frequency is controlled by the `note` param. In essence, this is how the WebAudio API output of Strudel works, only with many more parameters to control synths, samples and effects.
+
+I want to help, how do I contribute to the [Docs](/technical-manual/docs)?

website/src/pwa.ts

@@ -0,0 +1,11 @@
+import { registerSW } from 'virtual:pwa-register';
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // console.log('PWA application ready to work offline')
+  },
+});

website/src/repl/Footer.jsx

@@ -1,17 +1,18 @@
 import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
-import { cx } from '@strudel.cycles/react';
+import { useEvent, cx } from '@strudel.cycles/react';
+// import { cx } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
-import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useEvent, loadedSamples, ReplContext } from './Repl';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
+import { themes } from './themes.mjs';
+import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs';
 
 export function Footer({ context }) {
-  // const [activeFooter, setActiveFooter] = useState('console');
-  // const { activeFooter, setActiveFooter, isZen } = useContext?.(ReplContext);
-  const { activeFooter, setActiveFooter, isZen } = context;
   const footerContent = useRef();
   const [log, setLog] = useState([]);
+  const { activeFooter, isZen } = useSettings();
 
   useLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
@@ -54,8 +55,8 @@ export function Footer({ context }) {
       <div
         onClick={() => setActiveFooter(name)}
         className={cx(
-          'h-8 px-2 text-white cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-white hover:border-tertiary' : 'border-transparent',
+          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
+          activeFooter === name ? 'border-foreground' : 'border-transparent',
         )}
       >
         {label || name}
@@ -67,16 +68,17 @@ export function Footer({ context }) {
     return null;
   }
   return (
-    <footer className="bg-footer z-[20]">
+    <footer className="bg-lineHighlight z-[20]">
       <div className="flex justify-between px-2">
-        <div className={cx('flex select-none', activeFooter && 'pb-2')}>
+        <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <FooterTab name="intro" label="welcome" />
           <FooterTab name="samples" />
           <FooterTab name="console" />
           <FooterTab name="reference" />
+          <FooterTab name="settings" />
         </div>
         {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-white">
+          <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
             <XMarkIcon className="w-5 h-5" />
           </button>
         )}
@@ -86,85 +88,11 @@ export function Footer({ context }) {
           className="text-white font-mono text-sm h-[360px] flex-none overflow-auto max-w-full relative"
           ref={footerContent}
         >
-          {activeFooter === 'intro' && (
-            <div className="prose prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
-              <h3>
-                <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
-              </h3>
-              <p>
-                You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic
-                music pieces in the browser! It is free and open-source and made for beginners and experts alike. To get
-                started:
-                <br />
-                <br />
-                <span className="underline">1. hit play</span> - <span className="underline">2. change something</span>{' '}
-                - <span className="underline">3. hit update</span>
-                <br />
-                If you don't like what you hear, try <span className="underline">shuffle</span>!
-              </p>
-              <p>
-                To learn more about what this all means, check out the{' '}
-                <a href="./learn/getting-started" target="_blank">
-                  interactive tutorial
-                </a>
-                . Also feel free to join the{' '}
-                <a href="https://discord.com/invite/HGEdXmRkzT" target="_blank">
-                  tidalcycles discord channel
-                </a>{' '}
-                to ask any questions, give feedback or just say hello.
-              </p>
-              <h3>about</h3>
-              <p>
-                strudel is a JavaScript version of{' '}
-                <a href="tidalcycles.org/" target="_blank">
-                  tidalcycles
-                </a>
-                , which is a popular live coding language for music, written in Haskell. You can find the source code at{' '}
-                <a href="https://github.com/tidalcycles/strudel" target="_blank">
-                  github
-                </a>
-                . Please consider to{' '}
-                <a href="https://opencollective.com/tidalcycles" target="_blank">
-                  support this project
-                </a>{' '}
-                to ensure ongoing development 💖
-              </p>
-            </div>
-          )}
-          {activeFooter === 'console' && (
-            <div className="break-all px-4">
-              {log.map((l, i) => {
-                const message = linkify(l.message);
-                return (
-                  <div
-                    key={l.id}
-                    className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'text-highlight')}
-                  >
-                    <span dangerouslySetInnerHTML={{ __html: message }} />
-                    {l.count ? ` (${l.count})` : ''}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-          {activeFooter === 'samples' && (
-            <div className="break-normal w-full px-4">
-              <span className="text-white">{loadedSamples.length} banks loaded:</span>
-              {loadedSamples.map(([name, samples]) => (
-                <span key={name} className="cursor-pointer hover:text-tertiary" onClick={() => {}}>
-                  {' '}
-                  {name}(
-                  {Array.isArray(samples)
-                    ? samples.length
-                    : typeof samples === 'object'
-                    ? Object.values(samples).length
-                    : 1}
-                  ){' '}
-                </span>
-              ))}
-            </div>
-          )}
+          {activeFooter === 'intro' && <WelcomeTab />}
+          {activeFooter === 'console' && <ConsoleTab log={log} />}
+          {activeFooter === 'samples' && <SamplesTab />}
           {activeFooter === 'reference' && <Reference />}
+          {activeFooter === 'settings' && <SettingsTab />}
         </div>
       )}
     </footer>
@@ -195,3 +123,211 @@ function linkify(inputText) {
 
   return replacedText;
 }
+
+function WelcomeTab() {
+  return (
+    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
+      <h3>
+        <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
+      </h3>
+      <p>
+        You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
+        pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
+        <br />
+        <br />
+        <span className="underline">1. hit play</span> - <span className="underline">2. change something</span> -{' '}
+        <span className="underline">3. hit update</span>
+        <br />
+        If you don't like what you hear, try <span className="underline">shuffle</span>!
+      </p>
+      <p>
+        To learn more about what this all means, check out the{' '}
+        <a href="./learn/getting-started" target="_blank">
+          interactive tutorial
+        </a>
+        . Also feel free to join the{' '}
+        <a href="https://discord.com/invite/HGEdXmRkzT" target="_blank">
+          tidalcycles discord channel
+        </a>{' '}
+        to ask any questions, give feedback or just say hello.
+      </p>
+      <h3>about</h3>
+      <p>
+        strudel is a JavaScript version of{' '}
+        <a href="tidalcycles.org/" target="_blank">
+          tidalcycles
+        </a>
+        , which is a popular live coding language for music, written in Haskell. You can find the source code at{' '}
+        <a href="https://github.com/tidalcycles/strudel" target="_blank">
+          github
+        </a>
+        . Please consider to{' '}
+        <a href="https://opencollective.com/tidalcycles" target="_blank">
+          support this project
+        </a>{' '}
+        to ensure ongoing development 💖
+      </p>
+    </div>
+  );
+}
+
+function ConsoleTab({ log }) {
+  return (
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900">
+      <pre>{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
+██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
+███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
+╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
+███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
+╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
+      {log.map((l, i) => {
+        const message = linkify(l.message);
+        return (
+          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
+            <span dangerouslySetInnerHTML={{ __html: message }} />
+            {l.count ? ` (${l.count})` : ''}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function SamplesTab() {
+  return (
+    <div id="samples-tab" className="break-normal w-full px-4 dark:text-white text-stone-900">
+      <span>{loadedSamples.length} banks loaded:</span>
+      {loadedSamples.map(([name, samples]) => (
+        <span key={name} className="cursor-pointer hover:opacity-50" onClick={() => {}}>
+          {' '}
+          {name}(
+          {Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1}){' '}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function ButtonGroup({ value, onChange, items }) {
+  return (
+    <div className="flex grow border border-foreground rounded-md">
+      {Object.entries(items).map(([key, label], i, arr) => (
+        <button
+          key={key}
+          onClick={() => onChange(key)}
+          className={cx(
+            'p-2 grow',
+            i === 0 && 'rounded-l-md',
+            i === arr.length - 1 && 'rounded-r-md',
+            value === key ? 'bg-background' : 'bg-lineHighlight',
+          )}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function SelectInput({ value, options, onChange }) {
+  return (
+    <select
+      className="p-2 bg-background rounded-md text-foreground"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {Object.entries(options).map(([k, label]) => (
+        <option key={k} className="bg-background" value={k}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function NumberSlider({ value, onChange, step = 1, ...rest }) {
+  return (
+    <div className="flex space-x-2 gap-1">
+      <input
+        className="p-2 grow"
+        type="range"
+        value={value}
+        step={step}
+        onChange={(e) => onChange(Number(e.target.value))}
+        {...rest}
+      />
+      <input
+        type="number"
+        value={value}
+        step={step}
+        className="w-16 bg-background rounded-md"
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+    </div>
+  );
+}
+
+function FormItem({ label, children }) {
+  return (
+    <div className="grid gap-2">
+      <label>{label}</label>
+      {children}
+    </div>
+  );
+}
+
+const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
+const fontFamilyOptions = {
+  monospace: 'monospace',
+  BigBlueTerminal: 'BigBlueTerminal',
+  x3270: 'x3270',
+  PressStart: 'PressStart2P',
+};
+
+function SettingsTab() {
+  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+  return (
+    <div className="text-foreground p-4 space-y-4">
+      <FormItem label="Theme">
+        <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
+      </FormItem>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormItem label="Font Family">
+          <SelectInput
+            options={fontFamilyOptions}
+            value={fontFamily}
+            onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}
+          />
+        </FormItem>
+        <FormItem label="Font Size">
+          <NumberSlider
+            value={fontSize}
+            onChange={(fontSize) => settingsMap.setKey('fontSize', fontSize)}
+            min={10}
+            max={40}
+            step={2}
+          />
+        </FormItem>
+      </div>
+      <FormItem label="Keybindings">
+        <ButtonGroup
+          value={keybindings}
+          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+        ></ButtonGroup>
+      </FormItem>
+      <FormItem label="Reset Settings">
+        <button
+          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+          onClick={() => {
+            if (confirm('Sure?')) {
+              settingsMap.set(defaultSettings);
+            }
+          }}
+        >
+          restore default settings
+        </button>
+      </FormItem>
+    </div>
+  );
+}

website/src/repl/Header.jsx

@@ -6,6 +6,7 @@ import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import { cx } from '@strudel.cycles/react';
 import React, { useContext } from 'react';
+import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 import './Repl.css';
 
@@ -21,18 +22,16 @@ export function Header({ context }) {
     handleUpdate,
     handleShuffle,
     handleShare,
-    isZen,
-    setIsZen,
   } = context;
   const isEmbedded = embedded || window.location !== window.parent.location;
-  // useContext(ReplContext)
+  const { isZen } = useSettings();
 
   return (
     <header
       id="header"
       className={cx(
         'py-1 flex-none w-full text-black justify-between z-[100] text-lg  select-none sticky top-0',
-        !isZen && !isEmbedded && 'bg-header',
+        !isZen && !isEmbedded && 'bg-lineHighlight',
         isEmbedded ? 'flex' : 'md:flex',
       )}
     >
@@ -48,13 +47,16 @@ export function Header({ context }) {
           }}
           className={cx(
             isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
-            // 'bg-clip-text bg-gradient-to-r from-primary to-secondary  text-transparent font-bold',
-            'text-white font-bold flex space-x-2 items-center',
+            'text-foreground font-bold flex space-x-2 items-center',
           )}
         >
           <div
             className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
-            onClick={() => !isEmbedded && setIsZen((z) => !z)}
+            onClick={() => {
+              if (!isEmbedded) {
+                setIsZen(!isZen);
+              }
+            }}
           >
             🌀
           </div>
@@ -66,11 +68,11 @@ export function Header({ context }) {
         </h1>
       </div>
       {!isZen && (
-        <div className="flex max-w-full overflow-auto text-white ">
+        <div className="flex max-w-full overflow-auto text-foreground">
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
-            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
+            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:opacity-50', !started && 'animate-pulse')}
           >
             {!pending ? (
               <span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
@@ -87,7 +89,7 @@ export function Header({ context }) {
             className={cx(
               'flex items-center space-x-1',
               !isEmbedded ? 'p-2' : 'px-2',
-              !isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
+              !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
             )}
           >
             {/*             <CommandLineIcon className="w-6 h-6" /> */}
@@ -97,7 +99,7 @@ export function Header({ context }) {
           {!isEmbedded && (
             <button
               title="shuffle"
-              className="hover:text-tertiary p-2 flex items-center space-x-1"
+              className="hover:opacity-50 p-2 flex items-center space-x-1"
               onClick={handleShuffle}
             >
               <SparklesIcon className="w-6 h-6" />
@@ -108,7 +110,7 @@ export function Header({ context }) {
             <button
               title="share"
               className={cx(
-                'cursor-pointer hover:text-tertiary flex items-center space-x-1',
+                'cursor-pointer hover:opacity-50 flex items-center space-x-1',
                 !isEmbedded ? 'p-2' : 'px-2',
               )}
               onClick={handleShare}
@@ -121,21 +123,21 @@ export function Header({ context }) {
             <a
               title="learn"
               href="./learn/getting-started"
-              className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+              className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
             >
               <AcademicCapIcon className="w-6 h-6" />
               <span>learn</span>
             </a>
           )}
           {/* {isEmbedded && (
-            <button className={cx('hover:text-tertiary px-2')}>
+            <button className={cx('hover:opacity-50 px-2')}>
               <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
                 🚀
               </a>
             </button>
           )}
           {isEmbedded && (
-            <button className={cx('hover:text-tertiary px-2')}>
+            <button className={cx('hover:opacity-50 px-2')}>
               <a
                 onClick={() => {
                   window.location.href = initialUrl;

website/src/repl/Reference.jsx

@@ -5,16 +5,16 @@ const visibleFunctions = jsdocJson.docs
 
 export function Reference() {
   return (
-    <div className="flex h-full w-full pt-2">
+    <div className="flex h-full w-full pt-2 text-foreground">
       <div className="w-64 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
         {visibleFunctions.map((entry, i) => (
-          <a key={i} className="cursor-pointer block hover:bg-linegray py-1 px-4" href={`#doc-${i}`}>
+          <a key={i} className="cursor-pointer block hover:bg-lineHighlight py-1 px-4" href={`#doc-${i}`}>
             {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
           </a>
         ))}
       </div>
       <div className="break-normal w-full h-full overflow-auto pl-4 flex relative">
-        <div className="prose prose-invert">
+        <div className="prose dark:prose-invert">
           <h2>API Reference</h2>
           <p>
             This is the long list functions you can use! Remember that you don't need to remember all of those and that

website/src/repl/Repl.css

@@ -10,11 +10,15 @@
   opacity: 0.5;
 }
 
-.cm-gutters {
-  display: none !important;
-}
-
-.cm-content {
+#code .cm-content {
   padding-top: 12px !important;
   padding-left: 8px !important;
 }
+
+#code .cm-scroller {
+  padding-bottom: 50vh;
+  font-family: inherit;
+}
+#code .cm-line > * {
+  background: var(--lineBackground);
+}

website/src/repl/Repl.jsx

@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
-import { CodeMirror, cx, flash, useHighlighting, useStrudel } from '@strudel.cycles/react';
+import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
 import {
   getAudioContext,
   getLoadedSamples,
@@ -22,6 +22,10 @@ import { Header } from './Header';
 import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+import { themes } from './themes.mjs';
+import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
+
+const { latestCode } = settingsMap.get();
 
 initAudioOnFirstClick();
 
@@ -110,23 +114,24 @@ export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
-  const [activeFooter, setActiveFooter] = useState('');
-  const [isZen, setIsZen] = useState(false);
   const [pending, setPending] = useState(false);
 
+  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
       initialCode: '// LOADING',
       defaultOutput: webaudioOutput,
       getTime,
-      autolink: true,
       beforeEval: () => {
         cleanupUi();
         cleanupDraw();
         setPending(true);
       },
-      afterEval: () => {
+      afterEval: ({ code }) => {
         setPending(false);
+        setLatestCode(code);
+        window.location.hash = '#' + encodeURIComponent(btoa(code));
       },
       onToggle: (play) => !play && cleanupDraw(false),
       drawContext,
@@ -135,16 +140,13 @@ export function Repl({ embedded = false }) {
   // init code
   useEffect(() => {
     initCode().then((decoded) => {
-      if (!decoded) {
-        setActiveFooter('intro'); // TODO: get rid
-      }
       logger(
         `Welcome to Strudel! ${
           decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!`
         } Press play or hit ctrl+enter to run it!`,
         'highlight',
       );
-      setCode(decoded || randomTune);
+      setCode(decoded || latestCode || randomTune);
     });
   }, []);
 
@@ -222,10 +224,10 @@ export function Repl({ embedded = false }) {
     }
     // generate uuid in the browser
     const hash = nanoid(12);
+    const shareUrl = window.location.origin + window.location.pathname + '?' + hash;
     const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]);
     if (!error) {
       setLastShared(activeCode || code);
-      const shareUrl = window.location.origin + '?' + hash;
       // copy shareUrl to clipboard
       await navigator.clipboard.writeText(shareUrl);
       const message = `Link copied to clipboard: ${shareUrl}`;
@@ -246,15 +248,11 @@ export function Repl({ embedded = false }) {
     isDirty,
     lastShared,
     activeCode,
-    activeFooter,
-    setActiveFooter,
     handleChangeCode,
     handleTogglePlay,
     handleUpdate,
     handleShuffle,
     handleShare,
-    isZen,
-    setIsZen,
   };
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
@@ -262,21 +260,25 @@ export function Repl({ embedded = false }) {
     <ReplContext.Provider value={context}>
       <div
         className={cx(
-          'h-screen flex flex-col',
+          'h-full flex flex-col',
           //        'bg-gradient-to-t from-green-900 to-slate-900', //
         )}
       >
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror
+            theme={themes[theme] || themes.strudelTheme}
             value={code}
+            keybindings={keybindings}
+            fontSize={fontSize}
+            fontFamily={fontFamily}
             onChange={handleChangeCode}
             onViewChanged={setView}
             onSelectionChange={handleSelectionChange}
           />
         </section>
         {error && (
-          <div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
+          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
         )}
         {isEmbedded && !started && (
           <button
@@ -292,15 +294,3 @@ export function Repl({ embedded = false }) {
     </ReplContext.Provider>
   );
 }
-
-export function useEvent(name, onTrigger, useCapture = false) {
-  useEffect(() => {
-    document.addEventListener(name, onTrigger, useCapture);
-    return () => {
-      document.removeEventListener(name, onTrigger, useCapture);
-    };
-  }, [onTrigger]);
-}
-function useKeydown(onTrigger) {
-  useEvent('keydown', onTrigger, true);
-}

website/src/repl/themes.mjs

@@ -0,0 +1,471 @@
+import {
+  abcdef,
+  androidstudio,
+  atomone,
+  aura,
+  bespin,
+  darcula,
+  dracula,
+  duotoneDark,
+  eclipse,
+  githubDark,
+  gruvboxDark,
+  materialDark,
+  nord,
+  okaidia,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightStorm,
+  vscodeDark,
+  xcodeDark,
+  bbedit,
+  duotoneLight,
+  githubLight,
+  gruvboxLight,
+  materialLight,
+  noctisLilac,
+  solarizedLight,
+  tokyoNightDay,
+  xcodeLight,
+} from '@uiw/codemirror-themes-all';
+
+import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
+import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
+import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
+import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
+import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
+import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
+
+export const themes = {
+  strudelTheme,
+  bluescreen,
+  blackscreen,
+  whitescreen,
+  algoboy,
+  terminal,
+  abcdef,
+  androidstudio,
+  atomone,
+  aura,
+  bespin,
+  darcula,
+  dracula,
+  duotoneDark,
+  eclipse,
+  githubDark,
+  gruvboxDark,
+  materialDark,
+  nord,
+  okaidia,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightStorm,
+  vscodeDark,
+  xcodeDark,
+  bbedit,
+  duotoneLight,
+  githubLight,
+  gruvboxLight,
+  materialLight,
+  noctisLilac,
+  solarizedLight,
+  tokyoNightDay,
+  xcodeLight,
+};
+
+// lineBackground is background with 50% opacity, to make sure the selection below is visible
+
+export const settings = {
+  strudelTheme: {
+    background: '#222',
+    lineBackground: '#22222250',
+    foreground: '#fff',
+    // foreground: '#75baff',
+    caret: '#ffcc00',
+    selection: 'rgba(128, 203, 196, 0.5)',
+    selectionMatch: '#036dd626',
+    // lineHighlight: '#8a91991a', // original
+    lineHighlight: '#00000050',
+    gutterBackground: 'transparent',
+    // gutterForeground: '#8a919966',
+    gutterForeground: '#8a919966',
+  },
+  bluescreen: bluescreenSettings,
+  blackscreen: blackscreenSettings,
+  whitescreen: whitescreenSettings,
+  algoboy: algoboySettings,
+  terminal: terminalSettings,
+  abcdef: {
+    background: '#0f0f0f',
+    lineBackground: '#0f0f0f50',
+    foreground: '#defdef',
+    caret: '#00FF00',
+    selection: '#515151',
+    selectionMatch: '#515151',
+    gutterBackground: '#555',
+    gutterForeground: '#FFFFFF',
+    lineHighlight: '#314151',
+  },
+  androidstudio: {
+    background: '#282b2e',
+    lineBackground: '#282b2e50',
+    foreground: '#a9b7c6',
+    caret: '#00FF00',
+    selection: '#343739',
+    selectionMatch: '#343739',
+    lineHighlight: '#343739',
+  },
+  atomone: {
+    background: '#272C35',
+    lineBackground: '#272C3550',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#ffffff30',
+    selectionMatch: '#2B323D',
+    gutterBackground: '#272C35',
+    gutterForeground: '#465063',
+    gutterBorder: 'transparent',
+    lineHighlight: '#2B323D',
+  },
+  aura: {
+    background: '#21202e',
+    lineBackground: '#21202e50',
+    foreground: '#edecee',
+    caret: '#a277ff',
+    selection: '#3d375e7f',
+    selectionMatch: '#3d375e7f',
+    gutterBackground: '#21202e',
+    gutterForeground: '#edecee',
+    gutterBorder: 'transparent',
+    lineHighlight: '#a394f033',
+  },
+  bbedit: {
+    light: true,
+    background: '#FFFFFF',
+    lineBackground: '#FFFFFF50',
+    foreground: '#000000',
+    caret: '#FBAC52',
+    selection: '#FFD420',
+    selectionMatch: '#FFD420',
+    gutterBackground: '#f5f5f5',
+    gutterForeground: '#4D4D4C',
+    gutterBorder: 'transparent',
+    lineHighlight: '#00000012',
+  },
+  bespin: {
+    background: '#28211c',
+    lineBackground: '#28211c50',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#36312e',
+    selectionMatch: '#4f382b',
+    gutterBackground: '#28211c',
+    gutterForeground: '#666666',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  darcula: {
+    background: '#2B2B2B',
+    lineBackground: '#2B2B2B50',
+    foreground: '#f8f8f2',
+    caret: '#FFFFFF',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: 'rgba(255, 255, 255, 0.1)',
+    gutterForeground: '#999',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  dracula: {
+    background: '#282a36',
+    lineBackground: '#282a3650',
+    foreground: '#f8f8f2',
+    caret: '#f8f8f0',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: '#282a36',
+    gutterForeground: '#6D8A88',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  duotoneLight: {
+    light: true,
+    background: '#faf8f5',
+    lineBackground: '#faf8f550',
+    foreground: '#b29762',
+    caret: '#93abdc',
+    selection: '#e3dcce',
+    selectionMatch: '#e3dcce',
+    gutterBackground: '#faf8f5',
+    gutterForeground: '#cdc4b1',
+    gutterBorder: 'transparent',
+    lineHighlight: '#EFEFEF',
+  },
+  duotoneDark: {
+    background: '#2a2734',
+    lineBackground: '#2a273450',
+    foreground: '#6c6783',
+    caret: '#ffad5c',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    gutterBackground: '#2a2734',
+    gutterForeground: '#545167',
+    lineHighlight: '#36334280',
+  },
+  eclipse: {
+    light: true,
+    background: '#fff',
+    lineBackground: '#ffffff50',
+    foreground: '#000',
+    caret: '#FFFFFF',
+    selection: '#d7d4f0',
+    selectionMatch: '#d7d4f0',
+    gutterBackground: '#f7f7f7',
+    gutterForeground: '#999',
+    lineHighlight: '#e8f2ff',
+    gutterBorder: 'transparent',
+  },
+  githubLight: {
+    light: true,
+    background: '#fff',
+    lineBackground: '#ffffff50',
+    foreground: '#24292e',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#6e7781',
+  },
+  githubDark: {
+    background: '#0d1117',
+    lineBackground: '#0d111750',
+    foreground: '#c9d1d9',
+    caret: '#c9d1d9',
+    selection: '#003d73',
+    selectionMatch: '#003d73',
+    lineHighlight: '#36334280',
+  },
+  gruvboxDark: {
+    background: '#282828',
+    lineBackground: '#28282850',
+    foreground: '#ebdbb2',
+    caret: '#ebdbb2',
+    selection: '#bdae93',
+    selectionMatch: '#bdae93',
+    lineHighlight: '#3c3836',
+    gutterBackground: '#282828',
+    gutterForeground: '#7c6f64',
+  },
+  gruvboxLight: {
+    light: true,
+    background: '#fbf1c7',
+    lineBackground: '#fbf1c750',
+    foreground: '#3c3836',
+    caret: '#af3a03',
+    selection: '#ebdbb2',
+    selectionMatch: '#bdae93',
+    lineHighlight: '#ebdbb2',
+    gutterBackground: '#ebdbb2',
+    gutterForeground: '#665c54',
+    gutterBorder: 'transparent',
+  },
+  materialDark: {
+    background: '#2e3235',
+    lineBackground: '#2e323550',
+    foreground: '#bdbdbd',
+    caret: '#a0a4ae',
+    selection: '#d7d4f0',
+    selectionMatch: '#d7d4f0',
+    gutterBackground: '#2e3235',
+    gutterForeground: '#999',
+    gutterActiveForeground: '#4f5b66',
+    lineHighlight: '#545b61',
+  },
+  materialLight: {
+    light: true,
+    background: '#FAFAFA',
+    lineBackground: '#FAFAFA50',
+    foreground: '#90A4AE',
+    caret: '#272727',
+    selection: '#80CBC440',
+    selectionMatch: '#FAFAFA',
+    gutterBackground: '#FAFAFA',
+    gutterForeground: '#90A4AE',
+    gutterBorder: 'transparent',
+    lineHighlight: '#CCD7DA50',
+  },
+  noctisLilac: {
+    light: true,
+    background: '#f2f1f8',
+    lineBackground: '#f2f1f850',
+    foreground: '#0c006b',
+    caret: '#5c49e9',
+    selection: '#d5d1f2',
+    selectionMatch: '#d5d1f2',
+    gutterBackground: '#f2f1f8',
+    gutterForeground: '#0c006b70',
+    lineHighlight: '#e1def3',
+  },
+  nord: {
+    background: '#2e3440',
+    lineBackground: '#2e344050',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#3b4252',
+    selectionMatch: '#e5e9f0',
+    gutterBackground: '#2e3440',
+    gutterForeground: '#4c566a',
+    gutterActiveForeground: '#d8dee9',
+    lineHighlight: '#4c566a',
+  },
+  okaidia: {
+    background: '#272822',
+    lineBackground: '#27282250',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#49483E',
+    selectionMatch: '#49483E',
+    gutterBackground: '#272822',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  solarizedLight: {
+    light: true,
+    background: '#fdf6e3',
+    lineBackground: '#fdf6e350',
+    foreground: '#657b83',
+    caret: '#586e75',
+    selection: '#dfd9c8',
+    selectionMatch: '#dfd9c8',
+    gutterBackground: '#00000010',
+    gutterForeground: '#657b83',
+    lineHighlight: '#dfd9c8',
+  },
+  solarizedDark: {
+    background: '#002b36',
+    lineBackground: '#002b3650',
+    foreground: '#93a1a1',
+    caret: '#839496',
+    selection: '#173541',
+    selectionMatch: '#aafe661a',
+    gutterBackground: '#00252f',
+    gutterForeground: '#839496',
+    lineHighlight: '#173541',
+  },
+  sublime: {
+    background: '#303841',
+    lineBackground: '#30384150',
+    foreground: '#FFFFFF',
+    caret: '#FBAC52',
+    selection: '#4C5964',
+    selectionMatch: '#3A546E',
+    gutterBackground: '#303841',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  tokyoNightDay: {
+    light: true,
+    background: '#e1e2e7',
+    lineBackground: '#e1e2e750',
+    foreground: '#3760bf',
+    caret: '#3760bf',
+    selection: '#99a7df',
+    selectionMatch: '#99a7df',
+    gutterBackground: '#e1e2e7',
+    gutterForeground: '#3760bf',
+    gutterBorder: 'transparent',
+    lineHighlight: '#5f5faf11',
+  },
+  tokyoNightStorm: {
+    background: '#24283b',
+    lineBackground: '#24283b50',
+    foreground: '#7982a9',
+    caret: '#c0caf5',
+    selection: '#6f7bb630',
+    selectionMatch: '#1f2335',
+    gutterBackground: '#24283b',
+    gutterForeground: '#7982a9',
+    gutterBorder: 'transparent',
+    lineHighlight: '#292e42',
+  },
+  tokyoNight: {
+    background: '#1a1b26',
+    lineBackground: '#1a1b2650',
+    foreground: '#787c99',
+    caret: '#c0caf5',
+    selection: '#515c7e40',
+    selectionMatch: '#16161e',
+    gutterBackground: '#1a1b26',
+    gutterForeground: '#787c99',
+    gutterBorder: 'transparent',
+    lineHighlight: '#1e202e',
+  },
+  vscodeDark: {
+    background: '#1e1e1e',
+    lineBackground: '#1e1e1e50',
+    foreground: '#9cdcfe',
+    caret: '#c6c6c6',
+    selection: '#6199ff2f',
+    selectionMatch: '#72a1ff59',
+    lineHighlight: '#ffffff0f',
+    gutterBackground: '#1e1e1e',
+    gutterForeground: '#838383',
+    gutterActiveForeground: '#fff',
+  },
+  xcodeLight: {
+    light: true,
+    background: '#fff',
+    lineBackground: '#ffffff50',
+    foreground: '#3D3D3D',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#AFAFAF',
+    lineHighlight: '#EDF4FF',
+  },
+  xcodeDark: {
+    background: '#292A30',
+    lineBackground: '#292A3050',
+    foreground: '#CECFD0',
+    caret: '#fff',
+    selection: '#727377',
+    selectionMatch: '#727377',
+    lineHighlight: '#2F3239',
+  },
+};
+
+function getColors(str) {
+  const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
+  const colors = [];
+
+  let match;
+  while ((match = colorRegex.exec(str)) !== null) {
+    const color = match[0];
+    if (!colors.includes(color)) {
+      colors.push(color);
+    }
+  }
+
+  return colors;
+}
+
+// TODO: remove
+export function themeColors(theme) {
+  return getColors(stringifySafe(theme));
+}
+
+function getCircularReplacer() {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+}
+
+function stringifySafe(json) {
+  return JSON.stringify(json, getCircularReplacer());
+}

website/src/settings.mjs

@@ -0,0 +1,28 @@
+import { persistentMap } from '@nanostores/persistent';
+import { useStore } from '@nanostores/react';
+
+export const defaultSettings = {
+  activeFooter: 'intro',
+  keybindings: 'codemirror',
+  theme: 'strudelTheme',
+  fontFamily: 'monospace',
+  fontSize: 18,
+  latestCode: '',
+  isZen: false,
+};
+
+export const settingsMap = persistentMap('strudel-settings', defaultSettings);
+
+export function useSettings() {
+  const state = useStore(settingsMap);
+  return {
+    ...state,
+    isZen: [true, 'true'].includes(state.isZen) ? true : false,
+    fontSize: Number(state.fontSize),
+  };
+}
+
+export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
+
+export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
+export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);