change controls to be functions rather than patterns

Fix array args

package.json

@@ -46,14 +46,15 @@
   },
   "homepage": "https://strudel.tidalcycles.org",
   "dependencies": {
-    "dependency-tree": "^9.0.0",
-    "vitest": "^0.25.7",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
     "@strudel.cycles/tonal": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel.cycles/xen": "workspace:*"
+    "@strudel.cycles/xen": "workspace:*",
+    "acorn": "^8.8.1",
+    "dependency-tree": "^9.0.0",
+    "vitest": "^0.25.7"
   },
   "devDependencies": {
     "@vitest/ui": "^0.25.7",

packages/core/controls.mjs

@@ -4,7 +4,7 @@ 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, registerControl } from './pattern.mjs';
+import { Pattern, sequence, register } from './pattern.mjs';
 
 const controls = {};
 const generic_params = [
@@ -828,18 +828,12 @@ const generic_params = [
 
 // TODO: slice / splice https://www.youtube.com/watch?v=hKhPdO0RKDQ&list=PL2lW1zNIIwj3bDkh-Y3LUGDuRcoUigoDs&index=13
 
-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;
-};
+controls.play = {}
+
+const makeControl = name => {
+  controls.play[name] = pat => pat.fmap(v => ({[name]: v}))
+  return register(name, (v, pat) => pat.fmap(o => ({...o, ...{[name]: v}})))
+}
 
 generic_params.forEach(([type, name, description]) => {
   controls[name] = makeControl(name);

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/hap.mjs

@@ -126,6 +126,19 @@ export class Hap {
   setContext(context) {
     return new Hap(this.whole, this.part, this.value, context);
   }
+
+  ensureObjectValue() {
+    /* if (isNote(hap.value)) {
+      // supports primitive hap values that look like notes
+      hap.value = { note: hap.value };
+    } */
+    if (typeof this.value !== 'object') {
+      throw new Error(
+        `expected hap.value to be an object, but got "${this.value}". Hint: append .note() or .s() to the end`,
+        'error',
+      );
+    }
+  }
 }
 
 export default Hap;

packages/core/pattern.mjs

@@ -977,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) {
@@ -1026,6 +1026,35 @@ 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
 
@@ -1566,11 +1595,11 @@ export const trigzero = methodToFunction('trigzero');
  * @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;
   }
@@ -1578,32 +1607,42 @@ export function register(name, func) {
 
   registerMethod(name);
 
-  const 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);
+  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 = curryPattern(mapFn, arity - 1);
-
-    const app = (acc, p) => acc.appLeft(p);
-    const start = left.fmap(mapFn);
-
-    return right.reduce(app, start).innerJoin();
-  };
+  } else {
+    pfunc = function (...args) {
+      args = args.map(reify);
+      return func(...args);
+    };
+  }
 
   Pattern.prototype[name] = function (...args) {
-    args = args.map(reify);
     // For methods that take a single argument (plus 'this'), allow
     // multiple arguments but sequence them
     if (arity === 2 && args.length !== 1) {
@@ -1611,6 +1650,7 @@ export function register(name, func) {
     } else if (arity !== args.length + 1) {
       throw new Error(`.${name}() expects ${arity - 1} inputs but got ${args.length}.`);
     }
+    args = args.map(reify);
     return pfunc(...args, this);
   };
 
@@ -2390,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

@@ -47,6 +47,7 @@ import {
   run,
   hitch,
   set,
+  begin,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -981,4 +982,35 @@ describe('Pattern', () => {
       //      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

@@ -206,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

@@ -28,9 +28,7 @@ export const csound = register('csound', (instrument, pat) => {
       logger('[csound] not loaded yet', 'warning');
       return;
     }
-    if (typeof hap.value !== 'object') {
-      throw new Error('csound only support objects as hap values');
-    }
+    hap.ensureObjectValue();
     let { gain = 0.8 } = hap.value;
     gain *= 0.2;
 

packages/embed/README.md

@@ -30,5 +30,4 @@ note(`[[e5 [b4 c5] d5 [c5 b4]]
 </strudel-repl>
 ```
 
-- Note that the Code is placed inside HTML comments to prevent the browser from treating it as HTML.
-- [Play with this example on stackblitz](https://stackblitz.com/edit/js-75cvww?file=index.html)
+Note that the Code is placed inside HTML comments to prevent the browser from treating it as HTML.

packages/midi/midi.mjs

@@ -5,8 +5,9 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import * as _WebMidi from 'webmidi';
-import { Pattern, isPattern, isNote, getPlayableNoteValue, logger } from '@strudel.cycles/core';
+import { Pattern, isPattern, logger } from '@strudel.cycles/core';
 import { getAudioContext } from '@strudel.cycles/webaudio';
+import { toMidi } from '@strudel.cycles/core';
 
 // if you use WebMidi from outside of this package, make sure to import that instance:
 export const { WebMidi } = _WebMidi;
@@ -63,7 +64,7 @@ function getDevice(output, outputs) {
 }
 
 // Pattern.prototype.midi = function (output: string | number, channel = 1) {
-Pattern.prototype.midi = function (output, channel = 1) {
+Pattern.prototype.midi = function (output) {
   if (!supportsMidi()) {
     throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
   }
@@ -90,11 +91,6 @@ Pattern.prototype.midi = function (output, channel = 1) {
     );
   }
   return this.onTrigger((time, hap) => {
-    let note = getPlayableNoteValue(hap);
-    const velocity = hap.context?.velocity ?? 0.9;
-    if (!isNote(note)) {
-      throw new Error('not a note: ' + note);
-    }
     if (!midiReady) {
       return;
     }
@@ -106,15 +102,34 @@ Pattern.prototype.midi = function (output, channel = 1) {
           .join(' | ')}`,
       );
     }
-    // console.log('midi', value, output);
+    hap.ensureObjectValue();
+
+    // calculate time
     const timingOffset = WebMidi.time - getAudioContext().currentTime * 1000;
     time = time * 1000 + timingOffset;
-    // const inMs = '+' + (time - Tone.getContext().currentTime) * 1000;
-    // await enableWebMidi()
-    device.playNote(note, channel, {
-      time,
-      duration: hap.duration.valueOf() * 1000 - 5,
-      attack: velocity,
-    });
+
+    // destructure value
+    const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value;
+    const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
+    const duration = hap.duration.valueOf() * 1000 - 5;
+
+    if (note) {
+      const midiNumber = toMidi(note);
+      device.playNote(midiNumber, midichan, {
+        time,
+        duration,
+        attack: velocity,
+      });
+    }
+    if (ccv && ccn) {
+      if (typeof ccv !== 'number' || ccv < 0 || ccv > 1) {
+        throw new Error('expected ccv to be a number between 0 and 1');
+      }
+      if (!['string', 'number'].includes(typeof ccn)) {
+        throw new Error('expected ccn to be a number or a string');
+      }
+      const scaled = Math.round(ccv * 127);
+      device.sendControlChange(ccn, scaled, midichan, { time });
+    }
   });
 };

packages/osc/osc.mjs

@@ -45,9 +45,10 @@ let startedAt = -1;
  * @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) => {
+    hap.ensureObjectValue();
+    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

@@ -37,6 +37,8 @@
     "@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/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';
@@ -8,6 +8,8 @@ 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({
@@ -56,15 +58,15 @@ const highlightField = StateField.define({
             haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || e.value.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);
                 }),
               )
@@ -82,7 +84,7 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-const extensions = [
+const staticExtensions = [
   javascript(),
   highlightField,
   flashField,
@@ -97,6 +99,9 @@ export default function CodeMirror({
   onViewChanged,
   onSelectionChange,
   theme,
+  keybindings,
+  fontSize = 18,
+  fontFamily = 'monospace',
   options,
   editorDidMount,
 }) {
@@ -120,8 +125,18 @@ export default function CodeMirror({
     },
     [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}
@@ -130,7 +145,7 @@ export default function CodeMirror({
         onUpdate={handleOnUpdate}
         extensions={extensions}
       />
-    </>
+    </div>
   );
 }
 

packages/react/src/components/MiniRepl.jsx

@@ -23,7 +23,6 @@ export function MiniRepl({
   punchcard,
   canvasHeight = 200,
   theme,
-  highlightColor,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -72,7 +71,6 @@ export function MiniRepl({
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: highlightColor,
   });
 
   // keyboard shortcuts

packages/react/src/components/style.css

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

packages/react/src/hooks/useHighlighting.mjs

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { setHighlights } from '../components/CodeMirror6';
 
-function useHighlighting({ view, pattern, active, getTime, color }) {
+function useHighlighting({ view, pattern, active, getTime }) {
   const highlights = useRef([]);
   const lastEnd = useRef(0);
   useEffect(() => {
@@ -19,7 +19,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
             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({ haps: highlights.current, color }) }); // 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({ haps: [] }) });
           }
@@ -33,7 +33,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
         view.dispatch({ effects: setHighlights.of({ haps: [] }) });
       }
     }
-  }, [pattern, active, view, color]);
+  }, [pattern, active, view]);
 }
 
 export default useHighlighting;

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/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/webaudio/webaudio.mjs

@@ -193,21 +193,9 @@ function effectSend(input, effect, wet) {
 // export const webaudioOutput = async (t, hap, ct, cps) => {
 export const webaudioOutput = async (hap, deadline, hapDuration) => {
   const ac = getAudioContext();
-  /* if (isNote(hap.value)) {
-      // supports primitive hap values that look like notes
-      hap.value = { note: hap.value };
-    } */
-  if (typeof hap.value !== 'object') {
-    logger(
-      `hap.value "${hap.value}" is not supported by webaudio output. Hint: append .note() or .s() to the end`,
-      'error',
-    );
-    /*     throw new Error(
-      `hap.value "${hap.value}"" is not supported by webaudio output. Hint: append .note() or .s() to the end`,
-    ); */
-    return;
-  }
-  // calculate correct time (tone.js workaround)
+  hap.ensureObjectValue();
+
+  // calculate absolute time
   let t = ac.currentTime + deadline;
   // destructure value
   let {

pnpm-lock.yaml

@@ -11,6 +11,7 @@ importers:
       '@strudel.cycles/webaudio': workspace:*
       '@strudel.cycles/xen': workspace:*
       '@vitest/ui': ^0.25.7
+      acorn: ^8.8.1
       c8: ^7.12.0
       canvas: ^2.11.0
       dependency-tree: ^9.0.0
@@ -32,6 +33,7 @@ importers:
       '@strudel.cycles/transpiler': link:packages/transpiler
       '@strudel.cycles/webaudio': link:packages/webaudio
       '@strudel.cycles/xen': link:packages/xen
+      acorn: 8.8.2
       dependency-tree: 9.0.0
       vitest: 0.25.8_@vitest+ui@0.25.8
     devDependencies:
@@ -164,6 +166,8 @@ importers:
       '@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:*
@@ -185,6 +189,8 @@ importers:
       '@codemirror/state': 6.2.0
       '@codemirror/view': 6.7.3
       '@lezer/highlight': 1.1.3
+      '@replit/codemirror-emacs': 6.0.0_cgfc5aojxuwjajwhkrgidrzxoa
+      '@replit/codemirror-vim': 6.0.6_a4vbhepr4qhxm5cldqd4jpyase
       '@strudel.cycles/core': link:../core
       '@strudel.cycles/transpiler': link:../transpiler
       '@strudel.cycles/webaudio': link:../webaudio
@@ -358,6 +364,8 @@ importers:
       '@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:*
@@ -371,6 +379,7 @@ importers:
       '@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
@@ -382,6 +391,7 @@ importers:
       fraction.js: ^4.2.0
       html-escaper: ^3.0.3
       nanoid: ^4.0.0
+      nanostores: ^0.7.4
       preact: ^10.7.3
       react: ^18.2.0
       react-dom: ^18.2.0
@@ -402,6 +412,8 @@ importers:
       '@docsearch/react': 3.3.2_y6lbs4o5th67cuzjdmtw5eqh7a
       '@headlessui/react': 1.7.8_biqbaboplfbrettd7655fr4n2y
       '@heroicons/react': 2.0.14_react@18.2.0
+      '@nanostores/persistent': 0.7.0_nanostores@0.7.4
+      '@nanostores/react': 0.4.1_nkfnbc2tpc77iht7asm3uqwau4
       '@strudel.cycles/core': link:../packages/core
       '@strudel.cycles/csound': link:../packages/csound
       '@strudel.cycles/midi': link:../packages/midi
@@ -415,6 +427,7 @@ importers:
       '@strudel.cycles/webaudio': link:../packages/webaudio
       '@strudel.cycles/xen': link:../packages/xen
       '@supabase/supabase-js': 1.35.7
+      '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
       '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.4
       '@types/node': 18.11.18
       '@types/react': 18.0.27
@@ -424,6 +437,7 @@ importers:
       canvas: 2.11.0
       fraction.js: 4.2.0
       nanoid: 4.0.0
+      nanostores: 0.7.4
       preact: 10.11.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -3164,6 +3178,27 @@ packages:
       - supports-color
     dev: false
 
+  /@nanostores/persistent/0.7.0_nanostores@0.7.4:
+    resolution: {integrity: sha512-4PAInL/T1hbftZUJ0cmgdFHBMalUoq7BUXFBy7QfyMv/8X3LPTYNh/yxspL7+J+XM3UNvVI7IFRMMs6FBasjhQ==}
+    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      nanostores: ^0.7.0
+    dependencies:
+      nanostores: 0.7.4
+    dev: false
+
+  /@nanostores/react/0.4.1_nkfnbc2tpc77iht7asm3uqwau4:
+    resolution: {integrity: sha512-lsv0CYrMxczbXtoV/mxFVEoL/uVjEjseoP89srO/5yNAOkJka+dSFS7LYyWEbuvCPO7EgbtkvRpO5V+OztKQOw==}
+    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      nanostores: ^0.7.0
+      react: '>=18.0.0'
+    dependencies:
+      nanostores: 0.7.4
+      react: 18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3400,6 +3435,33 @@ packages:
       tsm: 2.3.0
     dev: false
 
+  /@replit/codemirror-emacs/6.0.0_cgfc5aojxuwjajwhkrgidrzxoa:
+    resolution: {integrity: sha512-zxSDg3UKm7811hjqNtgvK9G0IBtCWf82Idb9nZQo0ldmGl4d9SV7oCSuXQ58NmOG4AV7coD7kgFSZhEqHhyQhA==}
+    peerDependencies:
+      '@codemirror/autocomplete': ^6.0.2
+      '@codemirror/commands': ^6.0.0
+      '@codemirror/search': ^6.0.0
+      '@codemirror/state': ^6.0.1
+      '@codemirror/view': ^6.0.2
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_a4vbhepr4qhxm5cldqd4jpyase
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+    dev: false
+
+  /@replit/codemirror-vim/6.0.6_a4vbhepr4qhxm5cldqd4jpyase:
+    resolution: {integrity: sha512-/Lc+5AmV+T5pTm5P+rWpL+gseNHNye7xaUWpULczHai5ZLVg/ZE3+MBwK3Ai+/SmZKR/mK2YuXgNKnTGToEGYg==}
+    peerDependencies:
+      '@codemirror/commands': ^6.0.0
+      '@codemirror/language': ^6.1.0
+      '@codemirror/search': ^6.2.0
+      '@codemirror/state': ^6.0.1
+      '@codemirror/view': ^6.0.3
+    dependencies:
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+    dev: false
+
   /@rollup/plugin-babel/5.3.1_3dsfpkpoyvuuxyfgdbpn4j4uzm:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -3560,6 +3622,15 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: true
 
+  /@tailwindcss/forms/0.5.3_tailwindcss@3.2.4:
+    resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.2.4
+    dev: false
+
   /@tailwindcss/typography/0.5.9_tailwindcss@3.2.4:
     resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
     peerDependencies:
@@ -9371,6 +9442,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /mini-svg-data-uri/1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: false
+
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -9599,6 +9675,11 @@ packages:
     hasBin: true
     dev: false
 
+  /nanostores/0.7.4:
+    resolution: {integrity: sha512-MBeUVt7NBcXqh7AGT+KSr3O0X/995CZsvcP2QEMP+PXFwb07qv3Vjyq+EX0yS8f12Vv3Tn2g/BvK/OZoMhJlOQ==}
+    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+    dev: false
+
   /napi-build-utils/1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     dev: true
@@ -10413,17 +10494,6 @@ packages:
       - supports-color
     dev: true
 
-  /postcss-import/14.1.0:
-    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.1
-    dev: false
-
   /postcss-import/14.1.0_postcss@8.4.21:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -10434,16 +10504,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: true
-
-  /postcss-js/4.0.0:
-    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.3.3
-    dependencies:
-      camelcase-css: 2.0.1
-    dev: false
 
   /postcss-js/4.0.0_postcss@8.4.21:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -10453,23 +10513,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.21
-    dev: true
-
-  /postcss-load-config/3.1.4:
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.0.6
-      yaml: 1.10.2
-    dev: false
 
   /postcss-load-config/3.1.4_postcss@8.4.21:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -10487,15 +10530,6 @@ packages:
       postcss: 8.4.21
       yaml: 1.10.2
 
-  /postcss-nested/6.0.0:
-    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss-selector-parser: 6.0.11
-    dev: false
-
   /postcss-nested/6.0.0_postcss@8.4.21:
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
     engines: {node: '>=12.0'}
@@ -10504,7 +10538,6 @@ packages:
     dependencies:
       postcss: 8.4.21
       postcss-selector-parser: 6.0.11
-    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -12127,8 +12160,6 @@ packages:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -12145,10 +12176,10 @@ packages:
       object-hash: 3.0.0
       picocolors: 1.0.0
       postcss: 8.4.21
-      postcss-import: 14.1.0
-      postcss-js: 4.0.0
-      postcss-load-config: 3.1.4
-      postcss-nested: 6.0.0
+      postcss-import: 14.1.0_postcss@8.4.21
+      postcss-js: 4.0.0_postcss@8.4.21
+      postcss-load-config: 3.1.4_postcss@8.4.21
+      postcss-nested: 6.0.0_postcss@8.4.21
       postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1
@@ -12854,6 +12885,14 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /use-sync-external-store/1.2.0_react@18.2.0:
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /utf-8-validate/5.0.10:
     resolution: {integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==}
     engines: {node: '>=6.14.2'}

test/__snapshots__/examples.test.mjs.snap

@@ -3690,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 ]",
@@ -3815,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 ]",
@@ -4231,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/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,6 +36,7 @@
     "@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",
@@ -43,6 +46,7 @@
     "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",

website/public/dependencygraph.svg

@@ -1,326 +0,0 @@
-<svg height="100%" viewBox="0.00 0.00 538.13 507.20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
-<defs><pattern id="warning" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45 50 50)">
-        <line class="line0" stroke-width="6px" x1="3" x2="3" y2="12"></line>
-        <line class="line1" stroke-width="6px" x1="9" x2="9" y2="12"></line>
-        </pattern></defs><g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 503.2)">
-
-<!-- @strudel.cycles/core@0.6.8 -->
-<g id="node1" class="node module-_strudel_cycles_core maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/core@0.6.8">
-<title>@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M174.8,-37.3C174.8,-37.3 56.9,-37.3 56.9,-37.3 53.66,-37.3 50.43,-34.07 50.43,-30.83 50.43,-30.83 50.43,-24.37 50.43,-24.37 50.43,-21.13 53.66,-17.9 56.9,-17.9 56.9,-17.9 174.8,-17.9 174.8,-17.9 178.03,-17.9 181.26,-21.13 181.26,-24.37 181.26,-24.37 181.26,-30.83 181.26,-30.83 181.26,-34.07 178.03,-37.3 174.8,-37.3"></path>
-<text text-anchor="middle" x="115.85" y="-24.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/core@0.6.8</text>
-</g>
-<!-- fraction.js@4.2.0 -->
-<g id="node21" class="node module-fraction_js maintainer-infusion license-mit" data-module="fraction.js@4.2.0">
-<title>fraction.js@4.2.0</title>
-<path fill="none" stroke="black" d="M343.81,-19.3C343.81,-19.3 273.9,-19.3 273.9,-19.3 270.67,-19.3 267.44,-16.07 267.44,-12.83 267.44,-12.83 267.44,-6.37 267.44,-6.37 267.44,-3.13 270.67,0.1 273.9,0.1 273.9,0.1 343.81,0.1 343.81,0.1 347.05,0.1 350.28,-3.13 350.28,-6.37 350.28,-6.37 350.28,-12.83 350.28,-12.83 350.28,-16.07 347.05,-19.3 343.81,-19.3"></path>
-<text text-anchor="middle" x="308.86" y="-6.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">fraction.js@4.2.0</text>
-</g>
-<!-- @strudel.cycles/core@0.6.8&#45;&gt;fraction.js@4.2.0 -->
-
-<!-- @strudel.cycles/csound@0.6.2 -->
-<g id="node2" class="node module-_strudel_cycles_csound maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/csound@0.6.2">
-<title>@strudel.cycles/csound@0.6.2</title>
-<path fill="none" stroke="black" d="M180.53,-296.3C180.53,-296.3 51.16,-296.3 51.16,-296.3 47.93,-296.3 44.7,-293.07 44.7,-289.83 44.7,-289.83 44.7,-283.37 44.7,-283.37 44.7,-280.13 47.93,-276.9 51.16,-276.9 51.16,-276.9 180.53,-276.9 180.53,-276.9 183.77,-276.9 187,-280.13 187,-283.37 187,-283.37 187,-289.83 187,-289.83 187,-293.07 183.77,-296.3 180.53,-296.3"></path>
-<text text-anchor="middle" x="115.85" y="-283.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/csound@0.6.2</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.1 -->
-<g id="node12" class="node module-_strudel_cycles_webaudio maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/webaudio@0.6.1">
-<title>@strudel.cycles/webaudio@0.6.1</title>
-<path fill="none" stroke="black" d="M186.63,-259.3C186.63,-259.3 45.06,-259.3 45.06,-259.3 41.83,-259.3 38.59,-256.07 38.59,-252.83 38.59,-252.83 38.59,-246.37 38.59,-246.37 38.59,-243.13 41.83,-239.9 45.06,-239.9 45.06,-239.9 186.63,-239.9 186.63,-239.9 189.87,-239.9 193.1,-243.13 193.1,-246.37 193.1,-246.37 193.1,-252.83 193.1,-252.83 193.1,-256.07 189.87,-259.3 186.63,-259.3"></path>
-<text text-anchor="middle" x="115.85" y="-246.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/webaudio@0.6.1</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@strudel.cycles/webaudio@0.6.1 -->
-
-<!-- @csound/browser@6.18.5 -->
-<g id="node14" class="node module-_csound_browser collapsed maintainer-skyne maintainer-kunstmusik maintainer-eddyc maintainer-hlolli license-lgpl_2_1" data-module="@csound/browser@6.18.5">
-<title>@csound/browser@6.18.5</title>
-<path fill="none" stroke="black" d="M364.3,-257.3C364.3,-257.3 253.41,-257.3 253.41,-257.3 250.18,-257.3 246.95,-254.07 246.95,-250.83 246.95,-250.83 246.95,-244.37 246.95,-244.37 246.95,-241.13 250.18,-237.9 253.41,-237.9 253.41,-237.9 364.3,-237.9 364.3,-237.9 367.54,-237.9 370.77,-241.13 370.77,-244.37 370.77,-244.37 370.77,-250.83 370.77,-250.83 370.77,-254.07 367.54,-257.3 364.3,-257.3"></path>
-<text text-anchor="middle" x="308.86" y="-244.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@csound/browser@6.18.5</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@csound/browser@6.18.5 -->
-
-<!-- @strudel.cycles/embed@0.2.0 -->
-<g id="node3" class="node module-_strudel_cycles_embed maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/embed@0.2.0">
-<title>@strudel.cycles/embed@0.2.0</title>
-<path fill="none" stroke="black" d="M179.69,-462.3C179.69,-462.3 52.01,-462.3 52.01,-462.3 48.77,-462.3 45.54,-459.07 45.54,-455.83 45.54,-455.83 45.54,-449.37 45.54,-449.37 45.54,-446.13 48.77,-442.9 52.01,-442.9 52.01,-442.9 179.69,-442.9 179.69,-442.9 182.92,-442.9 186.16,-446.13 186.16,-449.37 186.16,-449.37 186.16,-455.83 186.16,-455.83 186.16,-459.07 182.92,-462.3 179.69,-462.3"></path>
-<text text-anchor="middle" x="115.85" y="-449.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/embed@0.2.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0 -->
-<g id="node4" class="node module-_strudel_cycles_midi maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/midi@0.6.0">
-<title>@strudel.cycles/midi@0.6.0</title>
-<path fill="none" stroke="black" d="M175.04,-370.3C175.04,-370.3 56.66,-370.3 56.66,-370.3 53.42,-370.3 50.19,-367.07 50.19,-363.83 50.19,-363.83 50.19,-357.37 50.19,-357.37 50.19,-354.13 53.42,-350.9 56.66,-350.9 56.66,-350.9 175.04,-350.9 175.04,-350.9 178.27,-350.9 181.5,-354.13 181.5,-357.37 181.5,-357.37 181.5,-363.83 181.5,-363.83 181.5,-367.07 178.27,-370.3 175.04,-370.3"></path>
-<text text-anchor="middle" x="115.85" y="-357.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/midi@0.6.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.0 -->
-<g id="node15" class="node module-_strudel_cycles_webaudio maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/webaudio@0.6.0">
-<title>@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M379.64,-370.3C379.64,-370.3 238.07,-370.3 238.07,-370.3 234.84,-370.3 231.6,-367.07 231.6,-363.83 231.6,-363.83 231.6,-357.37 231.6,-357.37 231.6,-354.13 234.84,-350.9 238.07,-350.9 238.07,-350.9 379.64,-350.9 379.64,-350.9 382.88,-350.9 386.11,-354.13 386.11,-357.37 386.11,-357.37 386.11,-363.83 386.11,-363.83 386.11,-367.07 382.88,-370.3 379.64,-370.3"></path>
-<text text-anchor="middle" x="308.86" y="-357.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/webaudio@0.6.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;@strudel.cycles/webaudio@0.6.0 -->
-
-<!-- webmidi@3.1.4 -->
-<g id="node25" class="node module-webmidi collapsed maintainer-djipco license-apache_2_0" data-module="webmidi@3.1.4">
-<title>webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M340.52,-407.3C340.52,-407.3 277.2,-407.3 277.2,-407.3 273.97,-407.3 270.73,-404.07 270.73,-400.83 270.73,-400.83 270.73,-394.37 270.73,-394.37 270.73,-391.13 273.97,-387.9 277.2,-387.9 277.2,-387.9 340.52,-387.9 340.52,-387.9 343.75,-387.9 346.98,-391.13 346.98,-394.37 346.98,-394.37 346.98,-400.83 346.98,-400.83 346.98,-404.07 343.75,-407.3 340.52,-407.3"></path>
-<text text-anchor="middle" x="308.86" y="-394.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">webmidi@3.1.4</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;webmidi@3.1.4 -->
-
-<!-- @strudel.cycles/mini@0.6.0 -->
-<g id="node5" class="node module-_strudel_cycles_mini maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/mini@0.6.0">
-<title>@strudel.cycles/mini@0.6.0</title>
-<path fill="none" stroke="black" d="M175.04,-111.3C175.04,-111.3 56.66,-111.3 56.66,-111.3 53.42,-111.3 50.19,-108.07 50.19,-104.83 50.19,-104.83 50.19,-98.37 50.19,-98.37 50.19,-95.13 53.42,-91.9 56.66,-91.9 56.66,-91.9 175.04,-91.9 175.04,-91.9 178.27,-91.9 181.5,-95.13 181.5,-98.37 181.5,-98.37 181.5,-104.83 181.5,-104.83 181.5,-108.07 178.27,-111.3 175.04,-111.3"></path>
-<text text-anchor="middle" x="115.85" y="-98.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/mini@0.6.0</text>
-</g>
-<!-- @strudel.cycles/mini@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/osc@0.6.0 -->
-<g id="node6" class="node module-_strudel_cycles_osc maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/osc@0.6.0">
-<title>@strudel.cycles/osc@0.6.0</title>
-<path fill="none" stroke="black" d="M172.53,-222.3C172.53,-222.3 59.16,-222.3 59.16,-222.3 55.93,-222.3 52.7,-219.07 52.7,-215.83 52.7,-215.83 52.7,-209.37 52.7,-209.37 52.7,-206.13 55.93,-202.9 59.16,-202.9 59.16,-202.9 172.53,-202.9 172.53,-202.9 175.76,-202.9 179,-206.13 179,-209.37 179,-209.37 179,-215.83 179,-215.83 179,-219.07 175.76,-222.3 172.53,-222.3"></path>
-<text text-anchor="middle" x="115.85" y="-209.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/osc@0.6.0</text>
-</g>
-<!-- @strudel.cycles/osc@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- osc&#45;js@2.4.0 -->
-<g id="node22" class="node module-osc_js collapsed maintainer-andreasdz license-mit" data-module="osc-js@2.4.0">
-<title>osc-js@2.4.0</title>
-<path fill="none" stroke="black" d="M334.18,-220.3C334.18,-220.3 283.53,-220.3 283.53,-220.3 280.3,-220.3 277.06,-217.07 277.06,-213.83 277.06,-213.83 277.06,-207.37 277.06,-207.37 277.06,-204.13 280.3,-200.9 283.53,-200.9 283.53,-200.9 334.18,-200.9 334.18,-200.9 337.42,-200.9 340.65,-204.13 340.65,-207.37 340.65,-207.37 340.65,-213.83 340.65,-213.83 340.65,-217.07 337.42,-220.3 334.18,-220.3"></path>
-<text text-anchor="middle" x="308.86" y="-207.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">osc-js@2.4.0</text>
-</g>
-<!-- @strudel.cycles/osc@0.6.0&#45;&gt;osc&#45;js@2.4.0 -->
-
-<!-- @strudel.cycles/react@0.6.0 -->
-<g id="node7" class="node module-_strudel_cycles_react collapsed maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/react@0.6.0">
-<title>@strudel.cycles/react@0.6.0</title>
-<path fill="none" stroke="black" d="M175.73,-499.3C175.73,-499.3 55.96,-499.3 55.96,-499.3 52.73,-499.3 49.49,-496.07 49.49,-492.83 49.49,-492.83 49.49,-486.37 49.49,-486.37 49.49,-483.13 52.73,-479.9 55.96,-479.9 55.96,-479.9 175.73,-479.9 175.73,-479.9 178.97,-479.9 182.2,-483.13 182.2,-486.37 182.2,-486.37 182.2,-492.83 182.2,-492.83 182.2,-496.07 178.97,-499.3 175.73,-499.3"></path>
-<text text-anchor="middle" x="115.85" y="-486.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/react@0.6.0</text>
-</g>
-<!-- @strudel.cycles/serial@0.6.0 -->
-<g id="node8" class="node module-_strudel_cycles_serial maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/serial@0.6.0">
-<title>@strudel.cycles/serial@0.6.0</title>
-<path fill="none" stroke="black" d="M177.19,-148.3C177.19,-148.3 54.5,-148.3 54.5,-148.3 51.27,-148.3 48.04,-145.07 48.04,-141.83 48.04,-141.83 48.04,-135.37 48.04,-135.37 48.04,-132.13 51.27,-128.9 54.5,-128.9 54.5,-128.9 177.19,-128.9 177.19,-128.9 180.42,-128.9 183.66,-132.13 183.66,-135.37 183.66,-135.37 183.66,-141.83 183.66,-141.83 183.66,-145.07 180.42,-148.3 177.19,-148.3"></path>
-<text text-anchor="middle" x="115.85" y="-135.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/serial@0.6.0</text>
-</g>
-<!-- @strudel.cycles/serial@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/soundfonts@0.6.0 -->
-<g id="node9" class="node module-_strudel_cycles_soundfonts maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/soundfonts@0.6.0">
-<title>@strudel.cycles/soundfonts@0.6.0</title>
-<path fill="none" stroke="black" d="M189.15,-333.3C189.15,-333.3 42.55,-333.3 42.55,-333.3 39.31,-333.3 36.08,-330.07 36.08,-326.83 36.08,-326.83 36.08,-320.37 36.08,-320.37 36.08,-317.13 39.31,-313.9 42.55,-313.9 42.55,-313.9 189.15,-313.9 189.15,-313.9 192.38,-313.9 195.62,-317.13 195.62,-320.37 195.62,-320.37 195.62,-326.83 195.62,-326.83 195.62,-330.07 192.38,-333.3 189.15,-333.3"></path>
-<text text-anchor="middle" x="115.85" y="-320.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/soundfonts@0.6.0</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;@strudel.cycles/webaudio@0.6.0 -->
-
-<!-- sfumato@0.1.2 -->
-<g id="node23" class="node module-sfumato maintainer-felixroos license-isc" data-module="sfumato@0.1.2">
-<title>sfumato@0.1.2</title>
-<path fill="none" stroke="black" d="M338.96,-333.3C338.96,-333.3 278.76,-333.3 278.76,-333.3 275.52,-333.3 272.29,-330.07 272.29,-326.83 272.29,-326.83 272.29,-320.37 272.29,-320.37 272.29,-317.13 275.52,-313.9 278.76,-313.9 278.76,-313.9 338.96,-313.9 338.96,-313.9 342.19,-313.9 345.43,-317.13 345.43,-320.37 345.43,-320.37 345.43,-326.83 345.43,-326.83 345.43,-330.07 342.19,-333.3 338.96,-333.3"></path>
-<text text-anchor="middle" x="308.86" y="-320.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">sfumato@0.1.2</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;sfumato@0.1.2 -->
-
-<!-- soundfont2@0.4.0 -->
-<g id="node24" class="node module-soundfont2 maintainer-mrten license-mit" data-module="soundfont2@0.4.0">
-<title>soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M513.22,-314.3C513.22,-314.3 438.89,-314.3 438.89,-314.3 435.66,-314.3 432.42,-311.07 432.42,-307.83 432.42,-307.83 432.42,-301.37 432.42,-301.37 432.42,-298.13 435.66,-294.9 438.89,-294.9 438.89,-294.9 513.22,-294.9 513.22,-294.9 516.45,-294.9 519.69,-298.13 519.69,-301.37 519.69,-301.37 519.69,-307.83 519.69,-307.83 519.69,-311.07 516.45,-314.3 513.22,-314.3"></path>
-<text text-anchor="middle" x="476.06" y="-301.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">soundfont2@0.4.0</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;soundfont2@0.4.0 -->
-
-<!-- @strudel.cycles/tonal@0.6.0 -->
-<g id="node10" class="node module-_strudel_cycles_tonal maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/tonal@0.6.0">
-<title>@strudel.cycles/tonal@0.6.0</title>
-<path fill="none" stroke="black" d="M176.36,-425.3C176.36,-425.3 55.33,-425.3 55.33,-425.3 52.1,-425.3 48.86,-422.07 48.86,-418.83 48.86,-418.83 48.86,-412.37 48.86,-412.37 48.86,-409.13 52.1,-405.9 55.33,-405.9 55.33,-405.9 176.36,-405.9 176.36,-405.9 179.6,-405.9 182.83,-409.13 182.83,-412.37 182.83,-412.37 182.83,-418.83 182.83,-418.83 182.83,-422.07 179.6,-425.3 176.36,-425.3"></path>
-<text text-anchor="middle" x="115.85" y="-412.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/tonal@0.6.0</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @tonaljs/tonal@4.10.0 -->
-<g id="node16" class="node module-_tonaljs_tonal collapsed maintainer-danigb license-mit" data-module="@tonaljs/tonal@4.10.0">
-<title>@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M523.73,-463.3C523.73,-463.3 428.38,-463.3 428.38,-463.3 425.15,-463.3 421.91,-460.07 421.91,-456.83 421.91,-456.83 421.91,-450.37 421.91,-450.37 421.91,-447.13 425.15,-443.9 428.38,-443.9 428.38,-443.9 523.73,-443.9 523.73,-443.9 526.96,-443.9 530.2,-447.13 530.2,-450.37 530.2,-450.37 530.2,-456.83 530.2,-456.83 530.2,-460.07 526.96,-463.3 523.73,-463.3"></path>
-<text text-anchor="middle" x="476.06" y="-450.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@tonaljs/tonal@4.10.0</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;@tonaljs/tonal@4.10.0 -->
-
-<!-- chord&#45;voicings@0.0.1 -->
-<g id="node18" class="node module-chord_voicings maintainer-felixroos license-isc" data-module="chord-voicings@0.0.1">
-<title>chord-voicings@0.0.1</title>
-<path fill="none" stroke="black" d="M354.5,-444.3C354.5,-444.3 263.21,-444.3 263.21,-444.3 259.98,-444.3 256.74,-441.07 256.74,-437.83 256.74,-437.83 256.74,-431.37 256.74,-431.37 256.74,-428.13 259.98,-424.9 263.21,-424.9 263.21,-424.9 354.5,-424.9 354.5,-424.9 357.74,-424.9 360.97,-428.13 360.97,-431.37 360.97,-431.37 360.97,-437.83 360.97,-437.83 360.97,-441.07 357.74,-444.3 354.5,-444.3"></path>
-<text text-anchor="middle" x="308.86" y="-431.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">chord-voicings@0.0.1</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;chord&#45;voicings@0.0.1 -->
-
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;webmidi@3.1.4 -->
-
-<!-- @strudel.cycles/transpiler@0.6.0 -->
-<g id="node11" class="node module-_strudel_cycles_transpiler maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/transpiler@0.6.0">
-<title>@strudel.cycles/transpiler@0.6.0</title>
-<path fill="none" stroke="black" d="M185.91,-74.3C185.91,-74.3 45.79,-74.3 45.79,-74.3 42.55,-74.3 39.32,-71.07 39.32,-67.83 39.32,-67.83 39.32,-61.37 39.32,-61.37 39.32,-58.13 42.55,-54.9 45.79,-54.9 45.79,-54.9 185.91,-54.9 185.91,-54.9 189.14,-54.9 192.38,-58.13 192.38,-61.37 192.38,-61.37 192.38,-67.83 192.38,-67.83 192.38,-71.07 189.14,-74.3 185.91,-74.3"></path>
-<text text-anchor="middle" x="115.85" y="-61.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/transpiler@0.6.0</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- acorn@8.8.2 -->
-<g id="node17" class="node module-acorn collapsed maintainer-marijn maintainer-adrianheine maintainer-rreverser license-mit" data-module="acorn@8.8.2">
-<title>acorn@8.8.2</title>
-<path fill="none" stroke="black" d="M333.45,-130.3C333.45,-130.3 284.27,-130.3 284.27,-130.3 281.03,-130.3 277.8,-127.07 277.8,-123.83 277.8,-123.83 277.8,-117.37 277.8,-117.37 277.8,-114.13 281.03,-110.9 284.27,-110.9 284.27,-110.9 333.45,-110.9 333.45,-110.9 336.68,-110.9 339.92,-114.13 339.92,-117.37 339.92,-117.37 339.92,-123.83 339.92,-123.83 339.92,-127.07 336.68,-130.3 333.45,-130.3"></path>
-<text text-anchor="middle" x="308.86" y="-117.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">acorn@8.8.2</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;acorn@8.8.2 -->
-
-<!-- escodegen@2.0.0 -->
-<g id="node19" class="node module-escodegen collapsed maintainer-constellation maintainer-michaelficarra license-bsd_2_clause" data-module="escodegen@2.0.0">
-<title>escodegen@2.0.0</title>
-<path fill="none" stroke="black" d="M344.33,-93.3C344.33,-93.3 273.39,-93.3 273.39,-93.3 270.15,-93.3 266.92,-90.07 266.92,-86.83 266.92,-86.83 266.92,-80.37 266.92,-80.37 266.92,-77.13 270.15,-73.9 273.39,-73.9 273.39,-73.9 344.33,-73.9 344.33,-73.9 347.56,-73.9 350.8,-77.13 350.8,-80.37 350.8,-80.37 350.8,-86.83 350.8,-86.83 350.8,-90.07 347.56,-93.3 344.33,-93.3"></path>
-<text text-anchor="middle" x="308.86" y="-80.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">escodegen@2.0.0</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;escodegen@2.0.0 -->
-
-<!-- estree&#45;walker@3.0.3 -->
-<g id="node20" class="node module-estree_walker collapsed maintainer-rich_harris license-mit" data-module="estree-walker@3.0.3">
-<title>estree-walker@3.0.3</title>
-<path fill="none" stroke="black" d="M351.26,-56.3C351.26,-56.3 266.46,-56.3 266.46,-56.3 263.22,-56.3 259.99,-53.07 259.99,-49.83 259.99,-49.83 259.99,-43.37 259.99,-43.37 259.99,-40.13 263.22,-36.9 266.46,-36.9 266.46,-36.9 351.26,-36.9 351.26,-36.9 354.49,-36.9 357.73,-40.13 357.73,-43.37 357.73,-43.37 357.73,-49.83 357.73,-49.83 357.73,-53.07 354.49,-56.3 351.26,-56.3"></path>
-<text text-anchor="middle" x="308.86" y="-43.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">estree-walker@3.0.3</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;estree&#45;walker@3.0.3 -->
-
-<!-- @strudel.cycles/webaudio@0.6.1&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/xen@0.6.0 -->
-<g id="node13" class="node module-_strudel_cycles_xen maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/xen@0.6.0">
-<title>@strudel.cycles/xen@0.6.0</title>
-<path fill="none" stroke="black" d="M173.25,-185.3C173.25,-185.3 58.44,-185.3 58.44,-185.3 55.21,-185.3 51.98,-182.07 51.98,-178.83 51.98,-178.83 51.98,-172.37 51.98,-172.37 51.98,-169.13 55.21,-165.9 58.44,-165.9 58.44,-165.9 173.25,-165.9 173.25,-165.9 176.48,-165.9 179.72,-169.13 179.72,-172.37 179.72,-172.37 179.72,-178.83 179.72,-178.83 179.72,-182.07 176.48,-185.3 173.25,-185.3"></path>
-<text text-anchor="middle" x="115.85" y="-172.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/xen@0.6.0</text>
-</g>
-<!-- @strudel.cycles/xen@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- chord&#45;voicings@0.0.1&#45;&gt;@tonaljs/tonal@4.10.0 -->
-<g id="edge27" class="edge">
-<title>chord-voicings@0.0.1-&gt;@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M361.22,-440.51C377.14,-442.34 394.88,-444.38 411.53,-446.29"></path>
-<polygon fill="black" stroke="black" points="411.39,-449.8 421.73,-447.47 412.19,-442.85 411.39,-449.8"></polygon>
-</g>
-<!-- sfumato@0.1.2&#45;&gt;soundfont2@0.4.0 -->
-<g id="edge28" class="edge">
-<title>sfumato@0.1.2-&gt;soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M345.7,-319.48C368.06,-316.91 397.22,-313.55 422.19,-310.68"></path>
-<polygon fill="black" stroke="black" points="422.72,-314.14 432.25,-309.52 421.92,-307.19 422.72,-314.14"></polygon>
-</g>
-<g id="edge1" class="edge">
-<title>@strudel.cycles/core@0.6.8-&gt;fraction.js@4.2.0</title>
-<path fill="none" stroke="black" d="M181.25,-21.53C206.16,-19.18 234.23,-16.54 257.6,-14.34"></path>
-<polygon fill="black" stroke="black" points="258.02,-17.81 267.64,-13.39 257.36,-10.84 258.02,-17.81"></polygon>
-</g><g id="edge3" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M44.23,-280.41C33.55,-276.09 24.08,-269.5 17.96,-259.6 -5.99,-220.85 -5.99,-93.35 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge4" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@strudel.cycles/webaudio@0.6.1</title>
-<path fill="none" stroke="black" d="M115.85,-276.84C115.85,-274.39 115.85,-271.94 115.85,-269.49"></path>
-<polygon fill="black" stroke="black" points="119.35,-269.43 115.85,-259.43 112.35,-269.43 119.35,-269.43"></polygon>
-</g><g id="edge6" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M50.17,-356.56C37.1,-352.37 25.19,-345.3 17.96,-333.6 1.66,-307.23 1.66,-80.97 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge7" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M181.51,-360.6C194.37,-360.6 208.05,-360.6 221.49,-360.6"></path>
-<polygon fill="black" stroke="black" points="221.71,-364.1 231.7,-360.6 221.7,-357.1 221.71,-364.1"></polygon>
-</g><g id="edge5" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M166.53,-370.22C195.48,-375.83 231.78,-382.86 260.34,-388.4"></path>
-<polygon fill="black" stroke="black" points="260.01,-391.9 270.49,-390.36 261.34,-385.02 260.01,-391.9"></polygon>
-</g><g id="edge8" class="edge">
-<title>@strudel.cycles/mini@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M50.17,-97.56C37.1,-93.37 25.19,-86.3 17.96,-74.6 7.78,-58.12 21.54,-47.3 41.67,-40.25"></path>
-<polygon fill="black" stroke="black" points="42.78,-43.57 51.3,-37.27 40.71,-36.88 42.78,-43.57"></polygon>
-</g><g id="edge10" class="edge">
-<title>@strudel.cycles/osc@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M52.7,-209.33C38.65,-205.26 25.65,-198.05 17.96,-185.6 2.66,-160.84 2.66,-79.36 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge9" class="edge">
-<title>@strudel.cycles/osc@0.6.0-&gt;osc-js@2.4.0</title>
-<path fill="none" stroke="black" d="M179.13,-211.95C207.93,-211.65 241.33,-211.3 266.9,-211.03"></path>
-<polygon fill="black" stroke="black" points="267.02,-214.53 276.99,-210.92 266.95,-207.53 267.02,-214.53"></polygon>
-</g><g id="edge11" class="edge">
-<title>@strudel.cycles/serial@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M48.17,-133.89C35.89,-129.63 24.82,-122.7 17.96,-111.6 4.64,-90.05 4.64,-76.15 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge14" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M36.71,-313.85C29.15,-309.7 22.6,-304.1 17.96,-296.6 3.83,-273.73 3.83,-77.47 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge15" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M166.53,-333.22C191.53,-338.07 222.01,-343.97 248.26,-349.05"></path>
-<polygon fill="black" stroke="black" points="247.6,-352.49 258.09,-350.96 248.94,-345.62 247.6,-352.49"></polygon>
-</g><g id="edge12" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;sfumato@0.1.2</title>
-<path fill="none" stroke="black" d="M195.64,-323.6C218.22,-323.6 242.08,-323.6 261.97,-323.6"></path>
-<polygon fill="black" stroke="black" points="261.98,-327.1 271.98,-323.6 261.98,-320.1 261.98,-327.1"></polygon>
-</g><g id="edge13" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M164.14,-313.99C184.8,-310.25 209.37,-306.44 231.73,-304.6 297.18,-299.22 372.86,-300.38 422.21,-302.11"></path>
-<polygon fill="black" stroke="black" points="422.21,-305.61 432.33,-302.49 422.47,-298.62 422.21,-305.61"></polygon>
-</g><g id="edge19" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M68.74,-405.99C49.45,-399.45 29.07,-388.58 17.96,-370.6 -0.5,-340.73 -0.5,-84.47 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge16" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M168.82,-425.25C177.92,-427.57 187.2,-430.33 195.73,-433.6 212.82,-440.15 214.01,-449.01 231.73,-453.6 291.41,-469.07 362.13,-466.9 411.9,-462.17"></path>
-<polygon fill="black" stroke="black" points="412.28,-465.65 421.88,-461.17 411.58,-458.69 412.28,-465.65"></polygon>
-</g><g id="edge17" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;chord-voicings@0.0.1</title>
-<path fill="none" stroke="black" d="M182.85,-422.17C203.51,-424.22 226.22,-426.48 246.55,-428.5"></path>
-<polygon fill="black" stroke="black" points="246.33,-432 256.62,-429.5 247.02,-425.03 246.33,-432"></polygon>
-</g><g id="edge18" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M182.85,-409.38C208.4,-406.97 237.07,-404.27 260.51,-402.06"></path>
-<polygon fill="black" stroke="black" points="260.91,-405.54 270.54,-401.12 260.26,-398.57 260.91,-405.54"></polygon>
-</g><g id="edge23" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M115.85,-54.84C115.85,-52.39 115.85,-49.94 115.85,-47.49"></path>
-<polygon fill="black" stroke="black" points="119.35,-47.43 115.85,-37.43 112.35,-47.43 119.35,-47.43"></polygon>
-</g><g id="edge20" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;acorn@8.8.2</title>
-<path fill="none" stroke="black" d="M168.82,-74.25C177.92,-76.57 187.2,-79.33 195.73,-82.6 212.82,-89.15 214.66,-95.99 231.73,-102.6 243.09,-107 255.84,-110.53 267.61,-113.25"></path>
-<polygon fill="black" stroke="black" points="267.12,-116.73 277.64,-115.44 268.61,-109.89 267.12,-116.73"></polygon>
-</g><g id="edge21" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;escodegen@2.0.0</title>
-<path fill="none" stroke="black" d="M192.61,-72.14C214.17,-74.28 237.12,-76.56 256.83,-78.52"></path>
-<polygon fill="black" stroke="black" points="256.51,-82.01 266.81,-79.52 257.21,-75.04 256.51,-82.01"></polygon>
-</g><g id="edge22" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;estree-walker@3.0.3</title>
-<path fill="none" stroke="black" d="M192.61,-57.46C211.68,-55.66 231.85,-53.76 249.89,-52.06"></path>
-<polygon fill="black" stroke="black" points="250.33,-55.54 259.96,-51.11 249.68,-48.57 250.33,-55.54"></polygon>
-</g><g id="edge24" class="edge">
-<title>@strudel.cycles/webaudio@0.6.1-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M38.54,-240.82C30.22,-236.58 22.97,-230.7 17.96,-222.6 -1.66,-190.84 -1.66,-86.36 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge25" class="edge">
-<title>@strudel.cycles/xen@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M51.94,-172.1C38.18,-168 25.52,-160.82 17.96,-148.6 -4,-113.06 -4,-90.14 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge26" class="edge">
-<title>@strudel.cycles/webaudio@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M241.66,-350.81C237.99,-348.55 234.63,-345.84 231.73,-342.6 143.1,-243.48 284.75,-144.37 195.73,-45.6 193.96,-43.64 192.03,-41.87 189.96,-40.27"></path>
-<polygon fill="black" stroke="black" points="191.74,-37.25 181.4,-34.93 188.03,-43.19 191.74,-37.25"></polygon>
-</g><g id="edge2" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@csound/browser@6.18.5</title>
-<path fill="none" stroke="black" d="M164.06,-276.96C190.24,-271.62 222.97,-264.93 250.6,-259.29"></path>
-<polygon fill="black" stroke="black" points="251.43,-262.69 260.52,-257.26 250.02,-255.84 251.43,-262.69"></polygon>
-</g></g>
-</svg>

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,12 +1,9 @@
 ---
 import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
-import { settings } from '../repl/themes.mjs';
 
 const { BASE_URL } = import.meta.env;
 const base = BASE_URL;
-
-const { strudelTheme } = settings;
 ---
 
 <!-- Global Metadata -->
@@ -48,37 +45,43 @@ const { strudelTheme } = settings;
 </style>
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
-<script define:vars={{ settings, strudelTheme }} is:inline>
+<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 getTheme(name) {
+  function activateTheme(name) {
     if (!settings[name]) {
-      console.warn('theme', name, 'has no settings');
+      console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
     }
-    return {
-      name,
-      settings: settings[name] || settings.strudelTheme,
-    };
-  }
-  function setTheme(name) {
-    const { settings } = getTheme(name);
+    const themeSettings = settings[name] || settings.strudelTheme;
     // set css variables
     themeStyle.innerHTML = `:root {
-      ${Object.entries(settings)
+      ${Object.entries(themeSettings)
         // important to override fallback
         .map(([key, value]) => `--${key}: ${value} !important;`)
         .join('\n')}
     }`;
     // tailwind dark mode
-    if (settings.light) {
+    if (themeSettings.light) {
       document.documentElement.classList.remove('dark');
     } else {
       document.documentElement.classList.add('dark');
     }
-    // persist theme name
-    localStorage.setItem('strudel-theme', name || 'strudelTheme');
   }
-  setTheme(localStorage.getItem('strudel-theme'));
-  document.addEventListener('strudel-theme', (e) => setTheme(e.detail));
+
+  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/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[];
@@ -17,4 +18,5 @@ currentPage = currentPage.endsWith('/') ? currentPage.slice(0, -1) : currentPage
 <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/config.ts

@@ -73,9 +73,9 @@ export const SIDEBAR: Sidebar = {
     ],
     Development: [
       { text: 'REPL', link: 'technical-manual/repl' },
-      { text: 'Packages', link: 'technical-manual/packages' },
       { 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.jsx

@@ -4,8 +4,7 @@ import { useEffect, useState } from 'react';
 import { prebake } from '../repl/prebake';
 import { themes, settings } from '../repl/themes.mjs';
 import './MiniRepl.css';
-
-const theme = localStorage.getItem('strudel-theme') || 'strudelTheme';
+import { useSettings } from '../settings.mjs';
 
 let modules;
 if (typeof window !== 'undefined') {
@@ -29,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
@@ -36,7 +36,6 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
       .then(([res]) => setRepl(() => res.MiniRepl))
       .catch((err) => console.error(err));
   }, []);
-  // const { settings } = useTheme();
   return Repl ? (
     <div className="mb-4">
       <Repl
@@ -46,7 +45,6 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
         punchcard={punchcard}
         canvasHeight={canvasHeight}
         theme={themes[theme]}
-        highlightColor={settings[theme]?.foreground}
       />
     </div>
   ) : (

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 = {
@@ -31,7 +30,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </title>
   </head>
 
-  <body class="h-screen text-gray-50 bg-background">
+  <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/index.astro

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

website/src/pages/learn/code.mdx

@@ -14,7 +14,7 @@ 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"`.
+- 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.
 

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

@@ -22,12 +22,35 @@ If no outputName is given, it uses the first midi output it finds.
 
 <MiniRepl
   client:idle
-  tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>")
+  tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>").note()
   .midi()`}
 />
 
 In the console, you will see a log of the available MIDI devices as soon as you run the code, e.g. `Midi connected! Using "Midi Through Port-0".`
 
+## midichan(number)
+
+Selects the MIDI channel to use. If not used, `.midi` will use channel 1 by default.
+
+## ccn && ccv
+
+- `ccn` sets the cc number. Depends on your synths midi mapping
+- `ccv` sets the cc value. normalized from 0 to 1.
+
+<MiniRepl client:idle tune={`note("c a f e").ccn(74).ccv(sine.slow(4)).midi()`} />
+
+In the above snippet, `ccn` is set to 74, which is the filter cutoff for many synths. `ccv` is controlled by a saw pattern.
+Having everything in one pattern, the `ccv` pattern will be aligned to the note pattern, because the structure comes from the left by default.
+But you can also control cc messages separately like this:
+
+<MiniRepl
+  client:idle
+  tune={`stack(
+  note("c a f e"),
+  ccv(sine.segment(16).slow(4)).ccn(74)
+).midi()`}
+/>
+
 # SuperDirt API
 
 In mainline tidal, the actual sound is generated via [SuperDirt](https://github.com/musikinformatik/SuperDirt/), which runs inside SuperCollider.
@@ -40,8 +63,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!
 

website/src/pages/learn/pwa.mdx

@@ -7,79 +7,5 @@ layout: ../../layouts/MainLayout.astro
 
 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.
-When the download is finished (<1MB), you can visit the website even when offline,
-getting the downloaded website instead of the online one.
-
-When the site gets updated, your browser will download that update on the next online visit.
-When an update is available, the site will refresh after the download is finished.
-
-This works because Strudel is implemented as progessive web app (using [Vite PWA](https://vite-pwa-org.netlify.app/)).
-
-## Samples
-
-While the browser will download the app itself, samples are only downloaded when you're actively using them.
-So to make sure a specific set of samples is available when offline, just use them.
-Also, only samples from these domains will be cached for offline use:
-
-- `https://raw.githubusercontent.com/*` for samples uploaded to github
-- `https://freesound.org/*` / `https://cdn.freesound.org/*` for freesound
-- `https://shabda.ndre.gr/.*` for shabda
-
-## Inspecting / Clearing Cache
-
-You can view all cached files in your browser.
-
-### Firefox
-
-- Open the Developer Tools (`Tools > Web Developer > Web Developer Tools`)
-- go to `Storage` tab and expand `Cache Storage > https://strudel.tidalcycles.org`.
-- or go to the `Application` tab and view the latest updates in `Service Workers`
-
-### Chromium based Browsers
-
-- Open Developer Tools (`Right Click > Inspect`)
-- go to the `Application` tab
-- view downloaded files under `Cache > Cache Storage`
-- view the latest updates in `Service Workers`
-
-## Strudel Standalone App
-
-You can also install Strudel as a standalone app on most devices.
-A standalone app has its own desktop / homescreen icon and launches in a separate window,
-without the browser ui.
-
-<figure>
-  <img src="./pwa/strudel-macos.png" alt="Strudel on MacOS" />
-  <figcaption>Strudel on MacOS</figcaption>
-</figure>
-
-### Desktop
-
-With a chromium based browser:
-
-1. go to the [Strudel REPL](strudel.tidalcycles.org/).
-2. on the right of the adress bar, click `install Strudel REPL`
-3. the REPL should now run as a standalone chromium app
-
-Without a chromium based browser, you can use [nativefier](https://github.com/nativefier/nativefier) to generate a desktop app:
-
-1. make sure you have NodeJS installed
-2. run `npx nativefier strudel.tidalcycles.org`
-
-<figure>
-  <img src="./pwa/strudel-linux.png" alt="Strudel on Linux" />
-  <figcaption>Strudel on Linux</figcaption>
-</figure>
-
-### iOS
-
-1. open to the [Strudel REPL](strudel.tidalcycles.org/) in safari
-2. press the share icon and tab `Add to homescreen`
-3. You should now have a strudel app icon that opens the repl in full screen
-
-### Android
-
-1. open to the [Strudel REPL](strudel.tidalcycles.org/)
-2. Tab the install button at the bottom
 
 Ok, what are [Patterns](/technical-manual/patterns) all about?

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

@@ -5,61 +5,75 @@ layout: ../../layouts/MainLayout.astro
 
 import { MiniRepl } from '../../docs/MiniRepl';
 
-# Strudel Packages
+## Strudel Packages
 
-The [strudel repo](github.com/tidalcycles/strudel) is organized as a monorepo, containing multiple npm packages.
-The purpose of the multiple packages is to
+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/).
 
-- organize the codebase into more modular, encapsulated pieces
-- be able to opt out of certain functionalities
-- keep the dependencies of the core packages small
+There are different packages for different purposes. They..
 
-## Overview
+- split up the code into smaller chunks
+- can be selectively used to implement some sort of time based system
 
 [See the latest published packages on npm](https://www.npmjs.com/search?q=%40strudel.cycles).
-Here is an overview of all the packages:
 
-### Essential Packages
+### Important bits
 
-These package are the most essential. You might want to use all of those if you're using strudel in your project:
+- 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.
 
-- [core](https://github.com/tidalcycles/strudel/tree/main/packages/core#strudelcyclescore): tidal pattern engine with core primitives
-- [mini](https://github.com/tidalcycles/strudel/tree/main/packages/mini#strudelcyclesmini): mini notation parser + core bindings
-- [transpiler](https://github.com/tidalcycles/strudel/tree/main/packages/transpiler#strudelcyclestranspiler): user code transpiler. syntax sugar + highlighting
+### Building & Publishing
 
-### Language Extensions
+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:
 
-These packages extend the pattern language by specific functions
+```js
+import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+import { resolve } from 'path';
 
-- [tonal](https://github.com/tidalcycles/strudel/tree/main/packages/tonal): tonal functions for scales and chords
-- [xen](https://github.com/tidalcycles/strudel/tree/main/packages/xen): microtonal / xenharmonic functions
+// 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',
+  },
+});
+```
 
-### Outputs
+This will build `index.mjs` (ESM) and `index.js` (CJS) to the dist folder.
 
-These packages provide bindings for different ways to output strudel patterns:
+### What's the main file?
 
-- [webaudio](https://github.com/tidalcycles/strudel/tree/main/packages/webaudio#strudelcycleswebaudio): the default webaudio output
-- [osc](https://github.com/tidalcycles/strudel/tree/main/packages/osc#strudelcyclesosc): bindings to communicate via OSC
-- [midi](https://github.com/tidalcycles/strudel/tree/main/packages/midi#strudelcyclesmidi): webmidi bindings
-- [csound](https://github.com/tidalcycles/strudel/tree/main/packages/csound#strudelcyclescsound): csound bindings
-- [soundfonts](https://github.com/tidalcycles/strudel/tree/main/packages/serial#strudelcyclessoundfonts): Soundfont support
-- [serial](https://github.com/tidalcycles/strudel/tree/main/packages/serial#strudelcyclesserial): webserial bindings
+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:
 
-### Others
+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.
 
-- [embed](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelcyclesembed): embeddable REPL web component
-- [react](https://github.com/tidalcycles/strudel/tree/main/packages/react#strudelcyclesreact): react hooks and components for strudel
+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).
 
-### No Longer Maintained
+https://github.com/changesets/changesets
 
-- [eval](https://github.com/tidalcycles/strudel/tree/main/packages/eval): old code transpiler
-- [tone](https://github.com/tidalcycles/strudel/tree/main/packages/tone#strudelcyclestone): bindings for Tone.js instruments and effects
-- [webdirt](https://github.com/tidalcycles/strudel/tree/main/packages/webdirt): webdirt bindings, replaced by webaudio package
-
-### Tools
-
-- [pnpm workspaces](https://pnpm.io/)
-- Publishing packages is done with [lerna](https://lerna.js.org/).
-
-## Usage Examples
+https://turbo.build/repo/docs/handbook/publishing-packages/versioning-and-publishing
 
+https://pnpm.io/workspaces

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

@@ -9,7 +9,7 @@ import { MiniRepl } from '../../docs/MiniRepl';
 
 {/* The [REPL](https://strudel.tidalcycles.org/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library. */}
 
-While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL (REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.), which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
+While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL^[REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
 
 Besides a UI for playback control and meta information, the main part of the REPL interface is the code editor powered by CodeMirror. In it, the user can edit and evaluate pattern code live, using one of the available synthesis outputs to create music and/or sound art. The control flow of the REPL follows 3 basic steps:
 

website/src/repl/Footer.jsx

@@ -6,14 +6,13 @@ import { nanoid } from 'nanoid';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
-import { themes, themeColors } from './themes.mjs';
+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, theme, setTheme } = context;
   const footerContent = useRef();
   const [log, setLog] = useState([]);
+  const { activeFooter, isZen } = useSettings();
 
   useLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
@@ -56,8 +55,8 @@ export function Footer({ context }) {
       <div
         onClick={() => setActiveFooter(name)}
         className={cx(
-          'h-8 px-2 text-foreground cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-foreground 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}
@@ -76,7 +75,7 @@ export function Footer({ context }) {
           <FooterTab name="samples" />
           <FooterTab name="console" />
           <FooterTab name="reference" />
-          <FooterTab name="theme" />
+          <FooterTab name="settings" />
         </div>
         {activeFooter !== '' && (
           <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
@@ -89,113 +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 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>
-          )}
-          {activeFooter === 'console' && (
-            <div className="break-all px-4 dark:text-white text-stone-900">
-              {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 dark:text-white text-stone-900">
-              <span>{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 === 'theme' && (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 p-2">
-              {Object.entries(themes).map(([k, t]) => (
-                <div
-                  key={k}
-                  className={cx(
-                    'border-2 border-transparent cursor-pointer p-4 bg-background bg-opacity-25 rounded-md',
-                    theme === k ? '!border-foreground' : '',
-                  )}
-                  onClick={() => {
-                    setTheme(k);
-                    document.dispatchEvent(
-                      new CustomEvent('strudel-theme', {
-                        detail: k,
-                      }),
-                    );
-                  }}
-                >
-                  <div className="mb-2 w-full text-center text-foreground">{k}</div>
-                  <div className="flex justify-stretch overflow-hidden rounded-md">
-                    {themeColors(t).map((c, i) => (
-                      <div key={i} className="grow h-6" style={{ background: c }} />
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
+          {activeFooter === 'settings' && <SettingsTab />}
         </div>
       )}
     </footer>
@@ -226,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,11 +22,9 @@ 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
@@ -53,7 +52,11 @@ export function Header({ context }) {
         >
           <div
             className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
-            onClick={() => !isEmbedded && setIsZen((z) => !z)}
+            onClick={() => {
+              if (!isEmbedded) {
+                setIsZen(!isZen);
+              }
+            }}
           >
             🌀
           </div>
@@ -69,7 +72,7 @@ export function Header({ context }) {
           <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')}>
@@ -86,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" /> */}
@@ -96,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" />
@@ -107,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}
@@ -120,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/Repl.css

@@ -17,6 +17,7 @@
 
 #code .cm-scroller {
   padding-bottom: 50vh;
+  font-family: inherit;
 }
 #code .cm-line > * {
   background: var(--lineBackground);

website/src/repl/Repl.jsx

@@ -23,9 +23,9 @@ 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 useTheme from '../useTheme';
+import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
 
-const initialTheme = localStorage.getItem('strudel-theme') || 'strudelTheme';
+const { latestCode } = settingsMap.get();
 
 initAudioOnFirstClick();
 
@@ -113,25 +113,25 @@ export const ReplContext = createContext(null);
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
-  const [theme, setTheme] = useState(initialTheme);
   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,
@@ -140,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);
     });
   }, []);
 
@@ -172,15 +169,12 @@ export function Repl({ embedded = false }) {
     ),
   );
 
-  const { settings } = useTheme();
-
   // highlighting
   useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: settings?.foreground,
   });
 
   //
@@ -254,17 +248,11 @@ export function Repl({ embedded = false }) {
     isDirty,
     lastShared,
     activeCode,
-    activeFooter,
-    setActiveFooter,
     handleChangeCode,
     handleTogglePlay,
     handleUpdate,
     handleShuffle,
     handleShare,
-    isZen,
-    setIsZen,
-    theme,
-    setTheme,
   };
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
@@ -272,7 +260,7 @@ 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', //
         )}
       >
@@ -281,6 +269,9 @@ export function Repl({ embedded = false }) {
           <CodeMirror
             theme={themes[theme] || themes.strudelTheme}
             value={code}
+            keybindings={keybindings}
+            fontSize={fontSize}
+            fontFamily={fontFamily}
             onChange={handleChangeCode}
             onViewChanged={setView}
             onSelectionChange={handleSelectionChange}

website/src/repl/themes.mjs

@@ -31,9 +31,19 @@ import {
 } 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,
@@ -82,6 +92,11 @@ export const settings = {
     // gutterForeground: '#8a919966',
     gutterForeground: '#8a919966',
   },
+  bluescreen: bluescreenSettings,
+  blackscreen: blackscreenSettings,
+  whitescreen: whitescreenSettings,
+  algoboy: algoboySettings,
+  terminal: terminalSettings,
   abcdef: {
     background: '#0f0f0f',
     lineBackground: '#0f0f0f50',
@@ -395,7 +410,6 @@ export const settings = {
     gutterBackground: '#1e1e1e',
     gutterForeground: '#838383',
     gutterActiveForeground: '#fff',
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
   },
   xcodeLight: {
     light: true,

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);

website/src/styles/index.css

@@ -1,3 +1,16 @@
+@font-face {
+  font-family: 'PressStart';
+  src: url('/fonts/PressStart2P/PressStart2P-Regular.ttf');
+}
+@font-face {
+  font-family: 'BigBlueTerminal';
+  src: url('/fonts/BigBlueTerminal/BigBlue_TerminalPlus.TTF');
+}
+@font-face {
+  font-family: 'x3270';
+  src: url('/fonts/3270/3270-Regular.ttf');
+}
+
 .cm-gutters {
   display: none !important;
 }
@@ -5,3 +18,11 @@
 .prose > h1:not(:first-child) {
   margin-top: 30px;
 }
+:root {
+  --app-height: 100vh;
+}
+
+#console-tab,
+#samples-tab {
+  font-family: BigBlueTerminal, monospace;
+}

website/src/useTheme.jsx

@@ -1,27 +0,0 @@
-import { useState } from 'react';
-import { settings } from './repl/themes.mjs';
-import { useEffect } from 'react';
-
-function useTheme() {
-  const [theme, setTheme] = useState(localStorage.getItem('strudel-theme'));
-  useEvent('strudel-theme', (e) => setTheme(e.detail));
-  const themeSettings = settings[theme || 'strudelTheme'];
-  return {
-    theme,
-    setTheme,
-    settings: themeSettings,
-    isDark: !themeSettings.light,
-    isLight: !!themeSettings.light,
-  };
-}
-// TODO: dedupe
-function useEvent(name, onTrigger, useCapture = false) {
-  useEffect(() => {
-    document.addEventListener(name, onTrigger, useCapture);
-    return () => {
-      document.removeEventListener(name, onTrigger, useCapture);
-    };
-  }, [onTrigger]);
-}
-
-export default useTheme;

website/tailwind.config.cjs

@@ -11,8 +11,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        tertiary: '#82aaff',
-        highlight: '#bb8800',
         // codemirror-theme settings
         background: 'var(--background)',
         lineBackground: 'var(--lineBackground)',
@@ -25,6 +23,9 @@ module.exports = {
         gutterBorder: 'var(--gutterBorder)',
         lineHighlight: 'var(--lineHighlight)',
       },
+      spacing: {
+        'app-height': 'var(--app-height)',
+      },
       typography(theme) {
         return {
           DEFAULT: {
@@ -41,5 +42,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
 };