Merge branch 'main' into dirtify-plain-values

Talk fixes

.gitignore

@@ -34,4 +34,5 @@ repl_old
 tutorial.rendered.mdx
 doc.json
 talk/public/EmuSP12
-talk/public/samples
+talk/public/samples
+server/samples/old

packages/core/pattern.mjs

@@ -10,7 +10,7 @@ import Hap from './hap.mjs';
 import State from './state.mjs';
 import { unionWithObj } from './value.mjs';
 
-import { isNote, toMidi, compose, removeUndefineds, flatten, id, listRange, curry, mod } from './util.mjs';
+import { isNote, toMidi, compose, removeUndefineds, flatten, id, listRange, curry, mod, objectify } from './util.mjs';
 import drawLine from './drawLine.mjs';
 
 /** @class Class representing a pattern. */
@@ -546,6 +546,10 @@ export class Pattern {
     return this._fromBipolar().range(min, max);
   }
 
+  union(other) {
+    return this._opleft(other, (a) => (b) => Object.assign({}, objectify(a), objectify(b)));
+  }
+
   _bindWhole(choose_whole, func) {
     const pat_val = this;
     const query = function (state) {
@@ -1014,13 +1018,6 @@ export class Pattern {
     return this._chunk(n, func, true);
   }
 
-  edit(...funcs) {
-    return stack(...funcs.map((func) => func(this)));
-  }
-  pipe(func) {
-    return func(this);
-  }
-
   _bypass(on) {
     on = Boolean(parseInt(on));
     return on ? silence : this;
@@ -1053,6 +1050,22 @@ export class Pattern {
   onTrigger(onTrigger) {
     return this._withHap((hap) => hap.setContext({ ...hap.context, onTrigger }));
   }
+  log(func = id) {
+    return this._withHap((hap) =>
+      hap.setContext({
+        ...hap.context,
+        onTrigger: (...args) => {
+          if (hap.context.onTrigger) {
+            hap.context.onTrigger(...args);
+          }
+          console.log(func(...args));
+        },
+      }),
+    );
+  }
+  logValues(func = id) {
+    return this.log((_, hap) => func(hap.value));
+  }
 }
 
 // TODO - adopt value.mjs fully..

packages/core/signal.mjs

@@ -47,7 +47,6 @@ export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
  */
 export const sine = sine2._fromBipolar();
 
-
 /**
  *  A cosine signal between 0 and 1.
  *
@@ -59,7 +58,6 @@ export const sine = sine2._fromBipolar();
 export const cosine = sine._early(Fraction(1).div(4));
 export const cosine2 = sine2._early(Fraction(1).div(4));
 
-
 /**
  *  A square signal between 0 and 1.
  *
@@ -112,7 +110,14 @@ const timeToRandsPrime = (seed, n) => {
 
 const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);
 
+/**
+ * A continuous pattern of random numbers, between 0 and 1
+ */
 export const rand = signal(timeToRand);
+/**
+ * A continuous pattern of random numbers, between -1 and 1
+ */
+export const rand2 = rand._toBipolar();
 
 export const _brandBy = (p) => rand.fmap((x) => x < p);
 export const brandBy = (pPat) => reify(pPat).fmap(_brandBy).innerJoin();
@@ -121,19 +126,67 @@ export const brand = _brandBy(0.5);
 export const _irand = (i) => rand.fmap((x) => Math.trunc(x * i));
 export const irand = (ipat) => reify(ipat).fmap(_irand).innerJoin();
 
-export const chooseWith = (pat, xs) => {
+export const __chooseWith = (pat, xs) => {
   xs = xs.map(reify);
   if (xs.length == 0) {
     return silence;
   }
-  return pat
-    .range(0, xs.length)
-    .fmap((i) => xs[Math.floor(i)])
-    .outerJoin();
+  return pat.range(0, xs.length).fmap((i) => xs[Math.floor(i)]);
+};
+/**
+ * Choose from the list of values (or patterns of values) using the given
+ * pattern of numbers, which should be in the range of 0..1
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const chooseWith = (pat, xs) => {
+  return __chooseWith(pat, xs).outerJoin();
 };
 
+/**
+ * As with {chooseWith}, but the structure comes from the chosen values, rather
+ * than the pattern you're using to choose with.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const chooseInWith = (pat, xs) => {
+  return __chooseWith(pat, xs).innerJoin();
+};
+
+/**
+ * Chooses randomly from the given list of values.
+ * @param  {...any} xs
+ * @returns {Pattern} - a continuous pattern.
+ */
 export const choose = (...xs) => chooseWith(rand, xs);
 
+/**
+ * Chooses from the given list of values (or patterns of values), according
+ * to the pattern that the method is called on. The pattern should be in
+ * the range 0 .. 1.
+ * @param  {...any} xs
+ * @returns {Pattern}
+ */
+Pattern.prototype.choose = function (...xs) {
+  return chooseWith(this, xs);
+};
+
+/**
+ * As with choose, but the pattern that this method is called on should be
+ * in the range -1 .. 1
+ * @param  {...any} xs
+ * @returns {Pattern}
+ */
+Pattern.prototype.choose2 = function (...xs) {
+  return chooseWith(this._fromBipolar(), xs);
+};
+
+export const chooseCycles = (...xs) => chooseInWith(rand.segment(1), xs);
+
+export const randcat = chooseCycles;
+
 const _wchooseWith = function (pat, ...pairs) {
   const values = pairs.map((pair) => reify(pair[0]));
   const weights = [];

packages/core/test/util.test.mjs

@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import { strict as assert } from 'assert';
 import { pure } from '../pattern.mjs';
-import { isNote, tokenizeNote, toMidi, fromMidi, mod, compose, getFrequency } from '../util.mjs';
+import { isNote, tokenizeNote, toMidi, fromMidi, mod, compose, getFrequency, dirtify } from '../util.mjs';
 
 describe('isNote', () => {
   it('should recognize notes without accidentals', () => {
@@ -118,3 +118,31 @@ describe('compose', () => {
     assert.equal(compose(addS('a'), addS('b'))('x'), 'xab');
   });
 });
+
+describe('dirtify', () => {
+  it('should offset plain number', () => {
+    assert.deepStrictEqual(dirtify(61), { n: 1 });
+    assert.deepStrictEqual(dirtify(60), { n: 0 });
+  });
+  it('should parse note string as midi number', () => {
+    assert.deepStrictEqual(dirtify('c4'), { n: 0 });
+    assert.deepStrictEqual(dirtify('c5'), { n: 12 });
+  });
+  it('should use non note string as sound', () => {
+    assert.deepStrictEqual(dirtify('bd'), { s: 'bd' });
+  });
+  it('should keep objects as is', () => {
+    assert.deepStrictEqual(dirtify({ s: 'bd' }), { s: 'bd' });
+    assert.deepStrictEqual(dirtify({ n: 7 }), { n: 7 });
+    assert.deepStrictEqual(dirtify({ n: 7, room: 0.5 }), { n: 7, room: 0.5 });
+  });
+  it('should parse notes inside object', () => {
+    assert.deepStrictEqual(dirtify({ n: 'c3', s: 'supersaw' }), { n: -12, s: 'supersaw' });
+  });
+  it('should dirtify .value', () => {
+    assert.deepStrictEqual(dirtify({ value: 61 }), { n: 1 });
+    assert.deepStrictEqual(dirtify({ value: 'c5' }), { n: 12 });
+    assert.deepStrictEqual(dirtify({ value: 'bd' }), { s: 'bd' });
+    assert.deepStrictEqual(dirtify({ value: 61, room: 0.5 }), { n: 1, room: 0.5 });
+  });
+});

packages/core/util.mjs

@@ -31,6 +31,19 @@ export const fromMidi = (n) => {
   return Math.pow(2, (n - 69) / 12) * 440;
 };
 
+export const getFreq = (noteOrMidi) => {
+  if (typeof noteOrMidi === 'number') {
+    return fromMidi(noteOrMidi);
+  }
+  return fromMidi(toMidi(noteOrMidi));
+};
+
+export const midi2note = (n) => {
+  const oct = Math.floor(n / 12) - 1;
+  const pc = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'][n % 12];
+  return pc + oct;
+};
+
 // modulo that works with negative numbers e.g. mod(-1, 3) = 2
 // const mod = (n: number, m: number): number => (n < 0 ? mod(n + m, m) : n % m);
 export const mod = (n, m) => ((n % m) + m) % m;
@@ -106,3 +119,43 @@ export function curry(func, overload) {
   }
   return fn;
 }
+
+// this functions just makes sure non objects values are wrapped in { value }
+export function objectify(value) {
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return value; // do nothing if its already an object
+  }
+  return { value };
+}
+
+// maybe move this to osc?
+// turns value into object that is the right format superdirt osc
+export function dirtify(val) {
+  const obj = objectify(val);
+
+  if (obj.n && typeof obj.n === 'string') {
+    return { ...obj, ...dirtify(obj.n) };
+  }
+  const { value, ...rest } = obj;
+  if (typeof value === 'undefined') {
+    return rest;
+  }
+  const isNumber = typeof value === 'number';
+  const isMidi = typeof value === 'string' && isNote(value);
+  if (isNumber || isMidi) {
+    const numberOffset = -60; // tidal 0 = midi 60
+    const n = (isNumber ? value : toMidi(value)) + numberOffset;
+    if (rest.n) {
+      console.warn(`dirtify: n is already defined as "${rest.n}", overwriting with value "${n}"`);
+    }
+    return { ...rest, n };
+  }
+  if (typeof value === 'string') {
+    // not a note => should be a sound
+    return { ...rest, s: value };
+  }
+  console.warn(`dirtify: ignored value "${value}"`);
+  // what lands here?
+  // throw new Error('cannot objectify: ' + value);
+  return {};
+}

packages/osc/osc.mjs

@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import OSC from 'osc-js';
-import { Pattern } from '@strudel.cycles/core';
+import { Pattern, objectify } from '@strudel.cycles/core';
 
 const comm = new OSC();
 comm.open();
@@ -30,7 +30,7 @@ Pattern.prototype.osc = function () {
       if (startedAt < 0) {
         startedAt = Date.now() - currentTime * 1000;
       }
-      const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
+      const controls = Object.assign({}, { cps, cycle, delta }, objectify(hap.value));
       const keyvals = Object.entries(controls).flat();
       const ts = Math.floor(startedAt + (time + latency) * 1000);
       const message = new OSC.Message('/dirt/play', ...keyvals);
@@ -41,3 +41,7 @@ Pattern.prototype.osc = function () {
     return hap.setContext({ ...hap.context, onTrigger });
   });
 };
+
+Pattern.prototype.superdirt = function () {
+  return this.withValue(dirtify).osc();
+};

packages/react/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { CodeMirror as CodeMirror$1 } from 'react-codemirror6';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateEffect, StateField } from '@codemirror/state';
@@ -46,7 +46,13 @@ const materialPalenightTheme = EditorView.theme(
       lineHeight: '22px',
     },
     '.cm-line': {
-      background: '#2C323699',
+      // background: '#2C323699',
+      background: 'transparent',
+    },
+    '.cm-line > *': {
+      // background: '#2C323699',
+      background: '#00000090',
+      // background: 'transparent',
     },
     // done
     '&.cm-focused .cm-cursor': {
@@ -71,7 +77,8 @@ const materialPalenightTheme = EditorView.theme(
       backgroundColor: '#6199ff2f',
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    // commented out because it looks bad in mini repl one liners
+    //'.cm-activeLine': { backgroundColor: cursor + '50' },
     '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
@@ -193,7 +200,7 @@ const highlightField = StateField.define({
             if (from > l || to > l) {
               return;
             }
-            const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+            const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
             return mark.range(from, to);
           })).filter(Boolean), true);
         }
@@ -351,6 +358,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   }, [activeCode, onDrawProp]);
 
+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
   // cycle hook to control scheduling
   const cycle = useCycle({
     onDraw,
@@ -449,6 +458,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
   };
 
   return {
+    hideHeader,
+    hideConsole,
     pending,
     code,
     setCode,
@@ -521,13 +532,13 @@ var tailwind = '';
 
 var style = '';
 
-const container = "_container_10e1g_1";
-const header = "_header_10e1g_5";
-const buttons = "_buttons_10e1g_9";
-const button = "_button_10e1g_9";
-const buttonDisabled = "_buttonDisabled_10e1g_17";
-const error = "_error_10e1g_21";
-const body = "_body_10e1g_25";
+const container = "_container_xpa19_1";
+const header = "_header_xpa19_5";
+const buttons = "_buttons_xpa19_9";
+const button = "_button_xpa19_9";
+const buttonDisabled = "_buttonDisabled_xpa19_17";
+const error = "_error_xpa19_21";
+const body = "_body_xpa19_25";
 var styles = {
 	container: container,
 	header: header,
@@ -563,12 +574,16 @@ function Icon({ type }) {
   }[type]);
 }
 
-function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
+function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } = useRepl({
     tune,
     defaultSynth,
-    autolink: false
+    autolink: false,
+    onEvent
   });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01
@@ -580,7 +595,25 @@ function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
     }
     return isVisible || wasVisible.current;
   }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes("strudel disable-highlighting") });
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === "Enter") {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === "Period") {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener("keydown", handleKeyPress, true);
+      return () => window.removeEventListener("keydown", handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
   return /* @__PURE__ */ React.createElement("div", {
     className: styles.container,
     ref

packages/react/dist/style.css

@@ -1 +1 @@
-*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cm-editor{background-color:transparent!important}._container_10e1g_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(68 76 87 / var(--tw-bg-opacity))}._header_10e1g_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_10e1g_9{display:flex}._button_10e1g_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_10e1g_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_10e1g_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_10e1g_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_10e1g_25{position:relative;overflow:auto}
+*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cm-editor{background-color:transparent!important}._container_xpa19_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(17 17 17 / var(--tw-bg-opacity))}._header_xpa19_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_xpa19_9{display:flex}._button_xpa19_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_xpa19_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_xpa19_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_xpa19_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_xpa19_25{position:relative;overflow:auto}

packages/react/src/components/CodeMirror6.jsx

@@ -60,7 +60,8 @@ const highlightField = StateField.define({
                   if (from > l || to > l) {
                     return; // dont mark outside of range, as it will throw an error
                   }
-                  const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
                   return mark.range(from, to);
                 }),
               )

packages/react/src/components/MiniRepl.jsx

@@ -1,20 +1,25 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import { useInView } from 'react-hook-inview';
 import useRepl from '../hooks/useRepl.mjs';
 import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
-import CodeMirror6 from './CodeMirror6';
+import CodeMirror6, { flash } from './CodeMirror6';
 import 'tailwindcss/tailwind.css';
 import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
 
-export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
-  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
-    tune,
-    defaultSynth,
-    autolink: false,
-  });
+export function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init, onEvent, enableKeyboard }) {
+  const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
+    useRepl({
+      tune,
+      defaultSynth,
+      autolink: false,
+      onEvent,
+    });
+  useEffect(() => {
+    init && evaluateOnly();
+  }, [tune, init]);
   const [view, setView] = useState();
   const [ref, isVisible] = useInView({
     threshold: 0.01,
@@ -26,7 +31,28 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
     }
     return isVisible || wasVisible.current;
   }, [isVisible, hideOutsideView]);
-  useHighlighting({ view, pattern, active: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });
+
+  // set active pattern on ctrl+enter
+  useLayoutEffect(() => {
+    if (enableKeyboard) {
+      const handleKeyPress = async (e) => {
+        if (e.ctrlKey || e.altKey) {
+          if (e.code === 'Enter') {
+            e.preventDefault();
+            flash(view);
+            await activateCode();
+          } else if (e.code === 'Period') {
+            cycle.stop();
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener('keydown', handleKeyPress, true);
+      return () => window.removeEventListener('keydown', handleKeyPress, true);
+    }
+  }, [enableKeyboard, pattern, code, activateCode, cycle, view]);
+
   return (
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
@@ -40,7 +66,7 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
         </div>
         {error && <div className={styles.error}>{error.message}</div>}
       </div>
-      <div className={styles.body} >
+      <div className={styles.body}>
         {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 .container {
-  @apply sc-rounded-md sc-overflow-hidden sc-bg-[#444C57];
+  @apply sc-rounded-md sc-overflow-hidden sc-bg-[#111111];
 }
 
 .header {

packages/react/src/hooks/useRepl.mjs

@@ -36,6 +36,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
     }
   }, [activeCode, onDrawProp]);
 
+  const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
+  const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
   // cycle hook to control scheduling
   const cycle = useCycle({
     onDraw,
@@ -136,6 +138,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
   };
 
   return {
+    hideHeader,
+    hideConsole,
     pending,
     code,
     setCode,

packages/react/src/themes/material-palenight.js

@@ -36,7 +36,13 @@ export const materialPalenightTheme = EditorView.theme(
       lineHeight: '22px',
     },
     '.cm-line': {
-      background: '#2C323699',
+      // background: '#2C323699',
+      background: 'transparent',
+    },
+    '.cm-line > *': {
+      // background: '#2C323699',
+      background: '#00000090',
+      // background: 'transparent',
     },
     // done
     '&.cm-focused .cm-cursor': {
@@ -61,7 +67,8 @@ export const materialPalenightTheme = EditorView.theme(
       backgroundColor: '#6199ff2f',
     },
 
-    '.cm-activeLine': { backgroundColor: highlightBackground },
+    // commented out because it looks bad in mini repl one liners
+    //'.cm-activeLine': { backgroundColor: cursor + '50' },
     '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {

packages/tone/pianoroll.mjs

@@ -22,10 +22,14 @@ Pattern.prototype.pianoroll = function ({
   flipTime = 0,
   flipValues = 0,
   hideNegative = false,
-  inactive = '#C9E597',
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
   active = '#FFCA28',
   // background = '#2A3236',
   background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
   minMidi = 10,
   maxMidi = 90,
   autorange = 0,
@@ -58,12 +62,14 @@ Pattern.prototype.pianoroll = function ({
   flipTime && timeRange.reverse();
   flipValues && valueRange.reverse();
 
-  const playheadPosition = scale(-from / timeExtent, ...timeRange);
   this.draw(
     (ctx, events, t) => {
       ctx.fillStyle = background;
-      ctx.clearRect(0, 0, w, h);
-      ctx.fillRect(0, 0, w, h);
+      ctx.globalAlpha = 1; // reset!
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
       const inFrame = (event) =>
         (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
       events.filter(inFrame).forEach((event) => {
@@ -71,15 +77,6 @@ Pattern.prototype.pianoroll = function ({
         ctx.fillStyle = event.context?.color || inactive;
         ctx.strokeStyle = event.context?.color || active;
         ctx.globalAlpha = event.context.velocity ?? 1;
-        ctx.beginPath();
-        if (vertical) {
-          ctx.moveTo(0, playheadPosition);
-          ctx.lineTo(valueAxis, playheadPosition);
-        } else {
-          ctx.moveTo(playheadPosition, 0);
-          ctx.lineTo(playheadPosition, valueAxis);
-        }
-        ctx.stroke();
         const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
         let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
         const value = getValue(event);
@@ -107,6 +104,19 @@ Pattern.prototype.pianoroll = function ({
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
       });
+      ctx.globalAlpha = 1; // reset!
+      const playheadPosition = scale(-from / timeExtent, ...timeRange);
+      // draw playhead
+      ctx.strokeStyle = playheadColor;
+      ctx.beginPath();
+      if (vertical) {
+        ctx.moveTo(0, playheadPosition);
+        ctx.lineTo(valueAxis, playheadPosition);
+      } else {
+        ctx.moveTo(playheadPosition, 0);
+        ctx.lineTo(playheadPosition, valueAxis);
+      }
+      ctx.stroke();
     },
     {
       from: from - overscan,

packages/webaudio/webaudio.mjs

@@ -126,146 +126,150 @@ const splitSN = (s, n) => {
 
 Pattern.prototype.out = function () {
   return this.onTrigger(async (t, hap, ct) => {
-    const ac = getAudioContext();
-    // calculate correct time (tone.js workaround)
-    t = ac.currentTime + t - ct;
-    // destructure value
-    let {
-      freq,
-      s,
-      sf,
-      clip = 0, // if 1, samples will be cut off when the hap ends
-      n = 0,
-      note,
-      gain = 1,
-      cutoff,
-      resonance = 1,
-      hcutoff,
-      hresonance = 1,
-      bandf,
-      bandq = 1,
-      pan,
-      attack = 0.001,
-      decay = 0.05,
-      sustain = 0.5,
-      release = 0.001,
-      speed = 1, // sample playback speed
-      begin = 0,
-      end = 1,
-    } = hap.value;
-    const { velocity = 1 } = hap.context;
-    gain *= velocity; // legacy fix for velocity
-    // the chain will hold all audio nodes that connect to each other
-    const chain = [];
-    if (typeof s === 'string') {
-      [s, n] = splitSN(s, n);
-    }
-    if (typeof note === 'string') {
-      [note, n] = splitSN(note, n);
-    }
-    if (!s || ['sine', 'square', 'triangle', 'sawtooth'].includes(s)) {
-      // with synths, n and note are the same thing
-      n = note || n;
-      if (typeof n === 'string') {
-        n = toMidi(n); // e.g. c3 => 48
+    try {
+      const ac = getAudioContext();
+      // calculate correct time (tone.js workaround)
+      t = ac.currentTime + t - ct;
+      // destructure value
+      let {
+        freq,
+        s,
+        sf,
+        clip = 0, // if 1, samples will be cut off when the hap ends
+        n = 0,
+        note,
+        gain = 1,
+        cutoff,
+        resonance = 1,
+        hcutoff,
+        hresonance = 1,
+        bandf,
+        bandq = 1,
+        pan,
+        attack = 0.001,
+        decay = 0.05,
+        sustain = 0.5,
+        release = 0.001,
+        speed = 1, // sample playback speed
+        begin = 0,
+        end = 1,
+      } = hap.value;
+      const { velocity = 1 } = hap.context;
+      gain *= velocity; // legacy fix for velocity
+      // the chain will hold all audio nodes that connect to each other
+      const chain = [];
+      if (typeof s === 'string') {
+        [s, n] = splitSN(s, n);
       }
-      // get frequency
-      if (!freq && typeof n === 'number') {
-        freq = fromMidi(n); // + 48);
+      if (typeof note === 'string') {
+        [note, n] = splitSN(note, n);
       }
-      // make oscillator
-      const o = getOscillator({ t, s, freq, duration: hap.duration, release });
-      chain.push(o);
-      // level down oscillators as they are really loud compared to samples i've tested
-      const g = ac.createGain();
-      g.gain.value = 0.3;
-      chain.push(g);
-      // TODO: make adsr work with samples without pops
-      // envelope
-      const adsr = getADSR(attack, decay, sustain, release, 1, t, t + hap.duration);
-      chain.push(adsr);
-    } else {
-      // load sample
-      if (speed === 0) {
-        // no playback
-        return;
-      }
-      if (!s) {
-        console.warn('no sample specified');
-        return;
-      }
-      const soundfont = getSoundfontKey(s);
-      let bufferSource;
-
-      try {
-        if (soundfont) {
-          // is soundfont
-          bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
-        } else {
-          // is sample from loaded samples(..)
-          bufferSource = await getSampleBufferSource(s, n, note);
+      if (!s || ['sine', 'square', 'triangle', 'sawtooth'].includes(s)) {
+        // with synths, n and note are the same thing
+        n = note || n;
+        if (typeof n === 'string') {
+          n = toMidi(n); // e.g. c3 => 48
         }
-      } catch (err) {
-        console.warn(err);
-        return;
-      }
-      // asny stuff above took too long?
-      if (ac.currentTime > t) {
-        console.warn('sample still loading:', s, n);
-        return;
-      }
-      if (!bufferSource) {
-        console.warn('no buffer source');
-        return;
-      }
-      bufferSource.playbackRate.value = Math.abs(speed) * bufferSource.playbackRate.value;
-      // TODO: nudge, unit, cut, loop
-      let duration = soundfont || clip ? hap.duration : bufferSource.buffer.duration;
-      // let duration = bufferSource.buffer.duration;
-      const offset = begin * duration;
-      duration = ((end - begin) * duration) / Math.abs(speed);
-      if (soundfont || clip) {
-        bufferSource.start(t, offset); // duration does not work here for some reason
+        // get frequency
+        if (!freq && typeof n === 'number') {
+          freq = fromMidi(n); // + 48);
+        }
+        // make oscillator
+        const o = getOscillator({ t, s, freq, duration: hap.duration, release });
+        chain.push(o);
+        // level down oscillators as they are really loud compared to samples i've tested
+        const g = ac.createGain();
+        g.gain.value = 0.3;
+        chain.push(g);
+        // TODO: make adsr work with samples without pops
+        // envelope
+        const adsr = getADSR(attack, decay, sustain, release, 1, t, t + hap.duration);
+        chain.push(adsr);
       } else {
-        bufferSource.start(t, offset, duration);
-      }
-      chain.push(bufferSource);
-      if (soundfont || clip) {
-        const env = ac.createGain();
-        const releaseLength = 0.1;
-        env.gain.value = 0.6;
-        env.gain.setValueAtTime(env.gain.value, t + duration);
-        env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
-        // env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
-        chain.push(env);
-        bufferSource.stop(t + duration + releaseLength);
-      } else {
-        bufferSource.stop(t + duration);
-      }
-    }
-    // master out
-    const master = ac.createGain();
-    master.gain.value = gain;
-    chain.push(master);
+        // load sample
+        if (speed === 0) {
+          // no playback
+          return;
+        }
+        if (!s) {
+          console.warn('no sample specified');
+          return;
+        }
+        const soundfont = getSoundfontKey(s);
+        let bufferSource;
 
-    // filters
-    cutoff !== undefined && chain.push(getFilter('lowpass', cutoff, resonance));
-    hcutoff !== undefined && chain.push(getFilter('highpass', hcutoff, hresonance));
-    bandf !== undefined && chain.push(getFilter('bandpass', bandf, bandq));
-    // TODO vowel
-    // TODO delay / delaytime / delayfeedback
-    // panning
-    if (pan !== undefined) {
-      const panner = ac.createStereoPanner();
-      panner.pan.value = 2 * pan - 1;
-      chain.push(panner);
-    }
-    // master out
-    /* const master = ac.createGain();
+        try {
+          if (soundfont) {
+            // is soundfont
+            bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
+          } else {
+            // is sample from loaded samples(..)
+            bufferSource = await getSampleBufferSource(s, n, note);
+          }
+        } catch (err) {
+          console.warn(err);
+          return;
+        }
+        // asny stuff above took too long?
+        if (ac.currentTime > t) {
+          console.warn('sample still loading:', s, n);
+          return;
+        }
+        if (!bufferSource) {
+          console.warn('no buffer source');
+          return;
+        }
+        bufferSource.playbackRate.value = Math.abs(speed) * bufferSource.playbackRate.value;
+        // TODO: nudge, unit, cut, loop
+        let duration = soundfont || clip ? hap.duration : bufferSource.buffer.duration;
+        // let duration = bufferSource.buffer.duration;
+        const offset = begin * duration;
+        duration = ((end - begin) * duration) / Math.abs(speed);
+        if (soundfont || clip) {
+          bufferSource.start(t, offset); // duration does not work here for some reason
+        } else {
+          bufferSource.start(t, offset, duration);
+        }
+        chain.push(bufferSource);
+        if (soundfont || clip) {
+          const env = ac.createGain();
+          const releaseLength = 0.1;
+          env.gain.value = 0.6;
+          env.gain.setValueAtTime(env.gain.value, t + duration);
+          env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
+          // env.gain.linearRampToValueAtTime(0, t + duration + releaseLength);
+          chain.push(env);
+          bufferSource.stop(t + duration + releaseLength);
+        } else {
+          bufferSource.stop(t + duration);
+        }
+      }
+      // master out
+      const master = ac.createGain();
+      master.gain.value = gain;
+      chain.push(master);
+
+      // filters
+      cutoff !== undefined && chain.push(getFilter('lowpass', cutoff, resonance));
+      hcutoff !== undefined && chain.push(getFilter('highpass', hcutoff, hresonance));
+      bandf !== undefined && chain.push(getFilter('bandpass', bandf, bandq));
+      // TODO vowel
+      // TODO delay / delaytime / delayfeedback
+      // panning
+      if (pan !== undefined) {
+        const panner = ac.createStereoPanner();
+        panner.pan.value = 2 * pan - 1;
+        chain.push(panner);
+      }
+      // master out
+      /* const master = ac.createGain();
     master.gain.value = 0.8 * gain;
     chain.push(master); */
-    chain.push(ac.destination);
-    // connect chain elements together
-    chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
+      chain.push(ac.destination);
+      // connect chain elements together
+      chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
+    } catch (e) {
+      console.warn('.out error:', e);
+    }
   });
 };

repl/.gitignore

@@ -24,4 +24,4 @@ dist-ssr
 *.sw?
 
 oldtunes.mjs
-public/samples/EMU World
+public/samples/EMU World/

repl/src/App.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  background-color: #2a3236;
+  background-color: #111;
 }
 
 .react-codemirror2,
@@ -15,12 +15,12 @@ body {
 }
 
 .CodeMirror-line > span {
-  background-color: #2a323699;
+  background-color: #11111190;
 }
 
 .darken::before {
   content: ' ';
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;

repl/src/App.jsx

@@ -108,6 +108,8 @@ function App() {
     pattern,
     pushLog,
     pending,
+    hideHeader,
+    hideConsole,
   } = useRepl({
     tune: '// LOADING...',
     defaultSynth,
@@ -167,142 +169,149 @@ function App() {
 
   return (
     <div className="min-h-screen flex flex-col">
-      <header
-        id="header"
-        className={cx(
-          'flex-none w-full px-2 flex border-b border-gray-200  justify-between z-[10] bg-gray-100',
-          isEmbedded ? 'h-8' : 'h-14',
-        )}
-      >
-        <div className="flex items-center space-x-2">
-          <img src={logo} className={cx('Tidal-logo', isEmbedded ? 'w-6 h-6' : 'w-10 h-10')} alt="logo" />
-          <h1 className={isEmbedded ? 'text-l' : 'text-xl'}>Strudel {isEmbedded ? 'Mini ' : ''}REPL</h1>
-        </div>
-        <div className="flex">
-          <button
-            onClick={() => {
-              getAudioContext().resume(); // fixes no sound in ios webkit
-              togglePlay();
-            }}
-            className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}
-          >
-            {!pending ? (
-              <span className={cx('flex items-center', isEmbedded ? 'w-16' : 'w-16')}>
-                {cycle.started ? (
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                ) : (
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fillRule="evenodd"
-                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                )}
-                {cycle.started ? 'pause' : 'play'}
-              </span>
-            ) : (
-              <>loading...</>
-            )}
-          </button>
-          {!isEmbedded && (
+      {!hideHeader && (
+        <header
+          id="header"
+          className={cx(
+            'flex-none w-full px-2 flex border-b border-gray-200  justify-between z-[10] bg-gray-100',
+            isEmbedded ? 'h-8' : 'h-14',
+          )}
+        >
+          <div className="flex items-center space-x-2">
+            <img src={logo} className={cx('Tidal-logo', isEmbedded ? 'w-6 h-6' : 'w-10 h-10')} alt="logo" />
+            <h1 className={isEmbedded ? 'text-l' : 'text-xl'}>Strudel {isEmbedded ? 'Mini ' : ''}REPL</h1>
+          </div>
+          <div className="flex">
             <button
-              className="hover:bg-gray-300 p-2"
-              onClick={async () => {
-                const _code = getRandomTune();
-                console.log('tune', _code); // uncomment this to debug when random code fails
-                setCode(_code);
-                cleanupDraw();
-                cleanupUi();
-                resetLoadedSamples();
-                prebake();
-                const parsed = await evaluate(_code);
-                setPattern(parsed.pattern);
-                setActiveCode(_code);
+              onClick={() => {
+                getAudioContext().resume(); // fixes no sound in ios webkit
+                togglePlay();
               }}
+              className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}
             >
-              🎲 random
+              {!pending ? (
+                <span className={cx('flex items-center', isEmbedded ? 'w-16' : 'w-16')}>
+                  {cycle.started ? (
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  ) : (
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  )}
+                  {cycle.started ? 'pause' : 'play'}
+                </span>
+              ) : (
+                <>loading...</>
+              )}
             </button>
-          )}
-          {!isEmbedded && (
-            <button className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}>
-              <a href="./tutorial">📚 tutorial</a>
-            </button>
-          )}
-          {!isEmbedded && (
-            <button
-              className={cx('cursor-pointer hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}
-              onClick={async () => {
-                const codeToShare = activeCode || code;
-                if (lastShared === codeToShare) {
-                  // alert('Link already generated!');
-                  pushLog(`Link already generated!`);
-                  return;
-                }
-                // generate uuid in the browser
-                const hash = nanoid(12);
-                const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]);
-                if (!error) {
-                  setLastShared(activeCode || code);
-                  const shareUrl = window.location.origin + '?' + hash;
-                  // copy shareUrl to clipboard
-                  navigator.clipboard.writeText(shareUrl);
-                  const message = `Link copied to clipboard: ${shareUrl}`;
-                  // alert(message);
-                  pushLog(message);
-                } else {
-                  console.log('error', error);
-                  const message = `Error: ${error.message}`;
-                  // alert(message);
-                  pushLog(message);
-                }
-              }}
-            >
-              📣 share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}
-            </button>
-          )}
-          {isEmbedded && (
-            <button className={cx('hover:bg-gray-300 px-2')}>
-              <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
-                🚀 open
-              </a>
-            </button>
-          )}
-          {isEmbedded && (
-            <button className={cx('hover:bg-gray-300 px-2')}>
-              <a
-                onClick={() => {
-                  window.location.href = initialUrl;
-                  window.location.reload();
+            {!isEmbedded && (
+              <button
+                className="hover:bg-gray-300 p-2"
+                onClick={async () => {
+                  const _code = getRandomTune();
+                  console.log('tune', _code); // uncomment this to debug when random code fails
+                  setCode(_code);
+                  cleanupDraw();
+                  cleanupUi();
+                  resetLoadedSamples();
+                  prebake();
+                  const parsed = await evaluate(_code);
+                  setPattern(parsed.pattern);
+                  setActiveCode(_code);
                 }}
-                title="Reset"
               >
-                💔 reset
-              </a>
-            </button>
-          )}
-        </div>
-      </header>
+                🎲 random
+              </button>
+            )}
+            {!isEmbedded && (
+              <button className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}>
+                <a href="./tutorial">📚 tutorial</a>
+              </button>
+            )}
+            {!isEmbedded && (
+              <button
+                className={cx('cursor-pointer hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}
+                onClick={async () => {
+                  const codeToShare = activeCode || code;
+                  if (lastShared === codeToShare) {
+                    // alert('Link already generated!');
+                    pushLog(`Link already generated!`);
+                    return;
+                  }
+                  // generate uuid in the browser
+                  const hash = nanoid(12);
+                  const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]);
+                  if (!error) {
+                    setLastShared(activeCode || code);
+                    const shareUrl = window.location.origin + '?' + hash;
+                    // copy shareUrl to clipboard
+                    navigator.clipboard.writeText(shareUrl);
+                    const message = `Link copied to clipboard: ${shareUrl}`;
+                    // alert(message);
+                    pushLog(message);
+                  } else {
+                    console.log('error', error);
+                    const message = `Error: ${error.message}`;
+                    // alert(message);
+                    pushLog(message);
+                  }
+                }}
+              >
+                📣 share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}
+              </button>
+            )}
+            {isEmbedded && (
+              <button className={cx('hover:bg-gray-300 px-2')}>
+                <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
+                  🚀 open
+                </a>
+              </button>
+            )}
+            {isEmbedded && (
+              <button className={cx('hover:bg-gray-300 px-2')}>
+                <a
+                  onClick={() => {
+                    window.location.href = initialUrl;
+                    window.location.reload();
+                  }}
+                  title="Reset"
+                >
+                  💔 reset
+                </a>
+              </button>
+            )}
+          </div>
+        </header>
+      )}
       <section className="grow flex flex-col text-gray-100">
-        <div className="grow relative flex overflow-auto" id="code">
+        <div className="grow relative flex overflow-auto pb-8 cursor-text" id="code">
           {/* onCursor={markParens} */}
           <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
-          <span className="z-[20] py-1 px-2 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
+          <span className="z-[20] bg-black rounded-t-md py-1 px-2 fixed bottom-0 right-1 text-xs whitespace-pre text-right pointer-events-none">
             {!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
           </span>
           {error && (
-            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>
+            <div
+              className={cx(
+                'rounded-md fixed pointer-events-none left-2 bottom-1 text-xs bg-black px-2 z-[20]',
+                'text-red-500',
+              )}
+            >
               {error?.message || 'unknown error'}
             </div>
           )}
         </div>
-        {!isEmbedded && (
+        {!isEmbedded && !hideConsole && (
           <textarea
             className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
             value={log}

repl/src/tunes.mjs

@@ -306,7 +306,7 @@ const drums = stack(
 const thru = (x) => x.transpose("<0 1>/8").transpose(-1);
 const synths = stack(
   "<eb4 d4 c4 b3>/2".scale(timeCat([3,'C minor'],[1,'C melodic minor']).slow(8)).struct("[~ x]*2")
-  .edit(
+  .layer(
     scaleTranspose(0).early(0),
     scaleTranspose(2).early(1/8),
     scaleTranspose(7).early(1/4),
@@ -517,7 +517,7 @@ const snare = noise({type:'white',...adsr(0,0.2,0)}).chain(lowpass(5000),vol(1.8
 const s = polysynth().set({...osc('sawtooth4'),...adsr(0.01,.2,.6,0.2)}).chain(vol(.23).connect(delay),out());
 stack(
   stack(
-    "0 1 4 [3!2 5]".edit(
+    "0 1 4 [3!2 5]".layer(
       // chords
       x=>x.add("0,3").duration("0.05!3 0.02"),
       // bass

server/.gitignore

@@ -1 +0,0 @@
-samples/old

server/headline.js

@@ -1,24 +0,0 @@
-const headlines = [
-  `
-  ██████ ▄▄▄█████▓ ██▀███   █    ██ ▓█████▄ ▓█████  ██▓    
-▒██    ▒ ▓  ██▒ ▓▒▓██ ▒ ██▒ ██  ▓██▒▒██▀ ██▌▓█   ▀ ▓██▒    
-░ ▓██▄   ▒ ▓██░ ▒░▓██ ░▄█ ▒▓██  ▒██░░██   █▌▒███   ▒██░    
-  ▒   ██▒░ ▓██▓ ░ ▒██▀▀█▄  ▓▓█  ░██░░▓█▄   ▌▒▓█  ▄ ▒██░    
-▒██████▒▒  ▒██▒ ░ ░██▓ ▒██▒▒▒█████▓ ░▒████▓ ░▒████▒░██████▒
-▒ ▒▓▒ ▒ ░  ▒ ░░   ░ ▒▓ ░▒▓░░▒▓▒ ▒ ▒  ▒▒▓  ▒ ░░ ▒░ ░░ ▒░▓  ░
-░ ░▒  ░ ░    ░      ░▒ ░ ▒░░░▒░ ░ ░  ░ ▒  ▒  ░ ░  ░░ ░ ▒  ░
-░  ░  ░    ░        ░░   ░  ░░░ ░ ░  ░ ░  ░    ░     ░ ░   
-      ░              ░        ░        ░       ░  ░    ░  ░
-                                     ░                     `,
-  `
-
-  ███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
-  ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
-  ███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
-  ╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
-  ███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
-  ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝
-`,
-];
-
-export const randomHeadline = () => headlines[Math.floor(Math.random() * headlines.length)];

server/package-lock.json

@@ -1,677 +0,0 @@
-{
-  "name": "@strudel.cycles/server",
-  "version": "0.0.1",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "@strudel.cycles/server",
-      "version": "0.0.1",
-      "license": "ISC",
-      "dependencies": {
-        "speaker": "^0.5.4",
-        "web-audio-api": "^0.2.2"
-      }
-    },
-    "node_modules/aac": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/aac/-/aac-0.1.3.tgz",
-      "integrity": "sha512-mhkqrzCOMndmoQovW43ry8tkMttuvKcpU0u9/K7zI+lF5NtCY2NE+HwAPiEgd3rHK7IuBT1ZsGL+LKeCPW9btQ==",
-      "peerDependencies": {
-        "av": "~0.4.0"
-      }
-    },
-    "node_modules/abc": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/abc/-/abc-0.5.1.tgz",
-      "integrity": "sha512-WRBP9wjuEdmzw1yFHCVf7Qp/PXSmfuUSX3FSs+5+uLG4qGKmhOPKl8LtZaG0p6xxuB6hX1tIzH4VaHL23+bU5A==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/alac": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/alac/-/alac-0.1.0.tgz",
-      "integrity": "sha512-+NBR/Nj/5zndHO7Oz4EOE7Qj+v+hk/0edJerBhjMQRznyjfaYV6/W+tUOOlLTZ0BWWD4p6eb11KKDHoPW5LsCw==",
-      "peerDependencies": {
-        "av": "~0.4.0"
-      }
-    },
-    "node_modules/assertion-error": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz",
-      "integrity": "sha512-g/gZV+G476cnmtYI+Ko9d5khxSoCSoom/EaNmmCfwpOvBXEJ18qwFrxfP1/CsIqk2no1sAKKwxndV0tP7ROOFQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/async": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-      "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw=="
-    },
-    "node_modules/audiobuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/audiobuffer/-/audiobuffer-0.2.0.tgz",
-      "integrity": "sha512-wEZ3iAOK1yNCy1PNcSe2V1pzzCV5rezYg0r/TRwojZBIVupQF56ioI0x5PGgatmWxJ4t8sWXymg8AFfopPXfrg==",
-      "dependencies": {
-        "underscore": "1.4.x"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/audiobuffer/node_modules/underscore": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
-      "integrity": "sha512-ZqGrAgaqqZM7LGRzNjLnw5elevWb5M8LEoDMadxIW3OWbcv72wMMgKdwOKpd5Fqxe8choLD8HN3iSj3TUh/giQ=="
-    },
-    "node_modules/av": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/av/-/av-0.4.9.tgz",
-      "integrity": "sha512-MvkT0k+co6o+zLMrBFFeVhYcG/S/jzy+2p00c/VwA71q6g90J28qUNh93NabKrcN06bkwFK0OeiEpFsQd7TS7g==",
-      "dependencies": {
-        "coffeeify": "^0.6.0"
-      },
-      "optionalDependencies": {
-        "speaker": "^0.3.0"
-      }
-    },
-    "node_modules/av/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "optional": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/av/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "optional": true
-    },
-    "node_modules/av/node_modules/speaker": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/speaker/-/speaker-0.3.1.tgz",
-      "integrity": "sha512-LEqSy+FHYHPZj4kX8NHylzaOmy+VIqj57enm2GS4B568hj0SdKDYa9jALCGQy43LZa/JmQk1iF0nlMVbS1PfPg==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "bindings": "^1.2.1",
-        "debug": "^2.2.0",
-        "nan": "^2.2.0",
-        "readable-stream": "^2.0.5"
-      }
-    },
-    "node_modules/bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dependencies": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "node_modules/buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "dependencies": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
-      }
-    },
-    "node_modules/buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
-    },
-    "node_modules/buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ=="
-    },
-    "node_modules/chai": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-1.7.2.tgz",
-      "integrity": "sha512-iTItmoMR+S+g8g0xU7db2mrr2LeLMJ6Y+YJwJEOUSaVTzm6qyTBfj5r+5x+XQhlXUfVn6WfFS4sXpEtMg6Qwaw==",
-      "dependencies": {
-        "assertion-error": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/coffee-script": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.7.1.tgz",
-      "integrity": "sha512-W3s+SROY73OmrSGtPTTW/2wp2rmW5vuh0/tUuCK1NvTuyzLOVPccIP9whmhZ4cYWcr2NJPNENZIFaAMkTD5G3w==",
-      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
-      "dependencies": {
-        "mkdirp": "~0.3.5"
-      },
-      "bin": {
-        "cake": "bin/cake",
-        "coffee": "bin/coffee"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/coffeeify": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/coffeeify/-/coffeeify-0.6.0.tgz",
-      "integrity": "sha512-nt2rZwyeqLnzdbC15ZUBnQtokHLqNnbgfpUMYzAk1Pa33hObdtXnDV0SmTj2DWbzp47MpR87ix3uKHyutnzjsg==",
-      "dependencies": {
-        "coffee-script": "~1.7.0",
-        "convert-source-map": "~0.3.3",
-        "through": "~2.3.4"
-      }
-    },
-    "node_modules/convert-source-map": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
-      "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg=="
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "optional": true
-    },
-    "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-    },
-    "node_modules/flac": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/flac/-/flac-0.3.0.tgz",
-      "integrity": "sha512-52oFJru3F/aELcnDwHtqDNXxruIZH7bE3vK6xQF4ALCelCZBXFggqPsPXPilVs9L242Iz1ROrbVX0UYXJMMinw==",
-      "dependencies": {
-        "abc": "0.5.x",
-        "fsa": "0.5.x"
-      },
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
-    "node_modules/fsa": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/fsa/-/fsa-0.5.1.tgz",
-      "integrity": "sha512-HMdf0zJNXwP5dxROQb/ncUv+9BxuO4NM5R6/pSbUdfu5CUzMOg7+iP4tQUtBIv18PaScukzfxGIqLyJ3d9wg3Q==",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "optional": true
-    },
-    "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "optional": true
-    },
-    "node_modules/mkdirp": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-      "integrity": "sha512-8OCq0De/h9ZxseqzCH8Kw/Filf5pF/vMI6+BH7Lu0jXz2pqYCjTAQRolSxRIi+Ax+oCCjlxoJMP0YQ4XlrQNHg==",
-      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)"
-    },
-    "node_modules/mp3": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/mp3/-/mp3-0.1.0.tgz",
-      "integrity": "sha512-W9SQWAS8Gn7VvBHBSYnCIz2KAEzZccY+OAKJvO9JRRFBc0MfQ0icb7K4O9Sst/3SW1wcScC+zLNPYoiU6sSXww==",
-      "peerDependencies": {
-        "av": "~0.4.0"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "optional": true
-    },
-    "node_modules/pcm-boilerplate": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pcm-boilerplate/-/pcm-boilerplate-0.1.1.tgz",
-      "integrity": "sha512-2mU5wENQGQoiuYUiRbLJtI8cH7H+1yvjR400XfGH6JONyzERbSbAIFCJnfRUSfbGJi2WJdo1gbTjiTsDyFSY4Q==",
-      "dependencies": {
-        "async": "0.2.x",
-        "chai": "1.7.x",
-        "underscore": "1.4.x"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/pcm-boilerplate/node_modules/async": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-      "integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
-    },
-    "node_modules/pcm-boilerplate/node_modules/underscore": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
-      "integrity": "sha512-ZqGrAgaqqZM7LGRzNjLnw5elevWb5M8LEoDMadxIW3OWbcv72wMMgKdwOKpd5Fqxe8choLD8HN3iSj3TUh/giQ=="
-    },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "optional": true
-    },
-    "node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "optional": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "optional": true
-    },
-    "node_modules/speaker": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/speaker/-/speaker-0.5.4.tgz",
-      "integrity": "sha512-0I35CJGgqU1rd/a3qVysR5gLlG+8QlzJcPAEnYvT0BLfuLdJ7JNdlQHwbh7ETNcXDXbzm2O148GEAoAER54Dvw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "bindings": "^1.3.0",
-        "buffer-alloc": "^1.1.0",
-        "debug": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
-    "node_modules/underscore": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
-      "integrity": "sha512-5WsVTFcH1ut/kkhAaHf4PVgI8c7++GiVcpCGxPouI6ZVjsqPnSDf8h/8HtVqc0t4fzRXwnMK70EcZeAs3PIddg=="
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "optional": true
-    },
-    "node_modules/web-audio-api": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/web-audio-api/-/web-audio-api-0.2.2.tgz",
-      "integrity": "sha512-XidLn3tEz8V9jwuV4OOVTOgNHp3WT6SQwv28Ad3lNXU4R9aPxWDYnocfVBh/OIna96jYPpiuP74KvSrTIF0OTg==",
-      "dependencies": {
-        "aac": "0.1.x",
-        "alac": "0.1.x",
-        "async": "0.9.x",
-        "audiobuffer": "0.2.x",
-        "av": "0.4.x",
-        "flac": "0.3.x",
-        "mp3": "0.1.x",
-        "pcm-boilerplate": "0.1.x",
-        "underscore": "1.8.x"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    }
-  },
-  "dependencies": {
-    "aac": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/aac/-/aac-0.1.3.tgz",
-      "integrity": "sha512-mhkqrzCOMndmoQovW43ry8tkMttuvKcpU0u9/K7zI+lF5NtCY2NE+HwAPiEgd3rHK7IuBT1ZsGL+LKeCPW9btQ==",
-      "requires": {}
-    },
-    "abc": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/abc/-/abc-0.5.1.tgz",
-      "integrity": "sha512-WRBP9wjuEdmzw1yFHCVf7Qp/PXSmfuUSX3FSs+5+uLG4qGKmhOPKl8LtZaG0p6xxuB6hX1tIzH4VaHL23+bU5A=="
-    },
-    "alac": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/alac/-/alac-0.1.0.tgz",
-      "integrity": "sha512-+NBR/Nj/5zndHO7Oz4EOE7Qj+v+hk/0edJerBhjMQRznyjfaYV6/W+tUOOlLTZ0BWWD4p6eb11KKDHoPW5LsCw==",
-      "requires": {}
-    },
-    "assertion-error": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz",
-      "integrity": "sha512-g/gZV+G476cnmtYI+Ko9d5khxSoCSoom/EaNmmCfwpOvBXEJ18qwFrxfP1/CsIqk2no1sAKKwxndV0tP7ROOFQ=="
-    },
-    "async": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-      "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw=="
-    },
-    "audiobuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/audiobuffer/-/audiobuffer-0.2.0.tgz",
-      "integrity": "sha512-wEZ3iAOK1yNCy1PNcSe2V1pzzCV5rezYg0r/TRwojZBIVupQF56ioI0x5PGgatmWxJ4t8sWXymg8AFfopPXfrg==",
-      "requires": {
-        "underscore": "1.4.x"
-      },
-      "dependencies": {
-        "underscore": {
-          "version": "1.4.4",
-          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
-          "integrity": "sha512-ZqGrAgaqqZM7LGRzNjLnw5elevWb5M8LEoDMadxIW3OWbcv72wMMgKdwOKpd5Fqxe8choLD8HN3iSj3TUh/giQ=="
-        }
-      }
-    },
-    "av": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/av/-/av-0.4.9.tgz",
-      "integrity": "sha512-MvkT0k+co6o+zLMrBFFeVhYcG/S/jzy+2p00c/VwA71q6g90J28qUNh93NabKrcN06bkwFK0OeiEpFsQd7TS7g==",
-      "requires": {
-        "coffeeify": "^0.6.0",
-        "speaker": "^0.3.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "optional": true
-        },
-        "speaker": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/speaker/-/speaker-0.3.1.tgz",
-          "integrity": "sha512-LEqSy+FHYHPZj4kX8NHylzaOmy+VIqj57enm2GS4B568hj0SdKDYa9jALCGQy43LZa/JmQk1iF0nlMVbS1PfPg==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.2.1",
-            "debug": "^2.2.0",
-            "nan": "^2.2.0",
-            "readable-stream": "^2.0.5"
-          }
-        }
-      }
-    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "requires": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
-      }
-    },
-    "buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
-    },
-    "buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ=="
-    },
-    "chai": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-1.7.2.tgz",
-      "integrity": "sha512-iTItmoMR+S+g8g0xU7db2mrr2LeLMJ6Y+YJwJEOUSaVTzm6qyTBfj5r+5x+XQhlXUfVn6WfFS4sXpEtMg6Qwaw==",
-      "requires": {
-        "assertion-error": "1.0.0"
-      }
-    },
-    "coffee-script": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.7.1.tgz",
-      "integrity": "sha512-W3s+SROY73OmrSGtPTTW/2wp2rmW5vuh0/tUuCK1NvTuyzLOVPccIP9whmhZ4cYWcr2NJPNENZIFaAMkTD5G3w==",
-      "requires": {
-        "mkdirp": "~0.3.5"
-      }
-    },
-    "coffeeify": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/coffeeify/-/coffeeify-0.6.0.tgz",
-      "integrity": "sha512-nt2rZwyeqLnzdbC15ZUBnQtokHLqNnbgfpUMYzAk1Pa33hObdtXnDV0SmTj2DWbzp47MpR87ix3uKHyutnzjsg==",
-      "requires": {
-        "coffee-script": "~1.7.0",
-        "convert-source-map": "~0.3.3",
-        "through": "~2.3.4"
-      }
-    },
-    "convert-source-map": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
-      "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg=="
-    },
-    "core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "optional": true
-    },
-    "debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "requires": {
-        "ms": "2.1.2"
-      }
-    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-    },
-    "flac": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/flac/-/flac-0.3.0.tgz",
-      "integrity": "sha512-52oFJru3F/aELcnDwHtqDNXxruIZH7bE3vK6xQF4ALCelCZBXFggqPsPXPilVs9L242Iz1ROrbVX0UYXJMMinw==",
-      "requires": {
-        "abc": "0.5.x",
-        "fsa": "0.5.x"
-      }
-    },
-    "fsa": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/fsa/-/fsa-0.5.1.tgz",
-      "integrity": "sha512-HMdf0zJNXwP5dxROQb/ncUv+9BxuO4NM5R6/pSbUdfu5CUzMOg7+iP4tQUtBIv18PaScukzfxGIqLyJ3d9wg3Q=="
-    },
-    "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "optional": true
-    },
-    "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "optional": true
-    },
-    "mkdirp": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-      "integrity": "sha512-8OCq0De/h9ZxseqzCH8Kw/Filf5pF/vMI6+BH7Lu0jXz2pqYCjTAQRolSxRIi+Ax+oCCjlxoJMP0YQ4XlrQNHg=="
-    },
-    "mp3": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/mp3/-/mp3-0.1.0.tgz",
-      "integrity": "sha512-W9SQWAS8Gn7VvBHBSYnCIz2KAEzZccY+OAKJvO9JRRFBc0MfQ0icb7K4O9Sst/3SW1wcScC+zLNPYoiU6sSXww==",
-      "requires": {}
-    },
-    "ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "optional": true
-    },
-    "pcm-boilerplate": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pcm-boilerplate/-/pcm-boilerplate-0.1.1.tgz",
-      "integrity": "sha512-2mU5wENQGQoiuYUiRbLJtI8cH7H+1yvjR400XfGH6JONyzERbSbAIFCJnfRUSfbGJi2WJdo1gbTjiTsDyFSY4Q==",
-      "requires": {
-        "async": "0.2.x",
-        "chai": "1.7.x",
-        "underscore": "1.4.x"
-      },
-      "dependencies": {
-        "async": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-          "integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
-        },
-        "underscore": {
-          "version": "1.4.4",
-          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
-          "integrity": "sha512-ZqGrAgaqqZM7LGRzNjLnw5elevWb5M8LEoDMadxIW3OWbcv72wMMgKdwOKpd5Fqxe8choLD8HN3iSj3TUh/giQ=="
-        }
-      }
-    },
-    "process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "optional": true
-    },
-    "readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "optional": true,
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "optional": true
-    },
-    "speaker": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/speaker/-/speaker-0.5.4.tgz",
-      "integrity": "sha512-0I35CJGgqU1rd/a3qVysR5gLlG+8QlzJcPAEnYvT0BLfuLdJ7JNdlQHwbh7ETNcXDXbzm2O148GEAoAER54Dvw==",
-      "requires": {
-        "bindings": "^1.3.0",
-        "buffer-alloc": "^1.1.0",
-        "debug": "^4.0.0"
-      }
-    },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "optional": true,
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
-    "underscore": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
-      "integrity": "sha512-5WsVTFcH1ut/kkhAaHf4PVgI8c7++GiVcpCGxPouI6ZVjsqPnSDf8h/8HtVqc0t4fzRXwnMK70EcZeAs3PIddg=="
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "optional": true
-    },
-    "web-audio-api": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/web-audio-api/-/web-audio-api-0.2.2.tgz",
-      "integrity": "sha512-XidLn3tEz8V9jwuV4OOVTOgNHp3WT6SQwv28Ad3lNXU4R9aPxWDYnocfVBh/OIna96jYPpiuP74KvSrTIF0OTg==",
-      "requires": {
-        "aac": "0.1.x",
-        "alac": "0.1.x",
-        "async": "0.9.x",
-        "audiobuffer": "0.2.x",
-        "av": "0.4.x",
-        "flac": "0.3.x",
-        "mp3": "0.1.x",
-        "pcm-boilerplate": "0.1.x",
-        "underscore": "1.8.x"
-      }
-    }
-  }
-}

server/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@strudel.cycles/server",
-  "version": "0.0.1",
-  "description": "Experimental Strudel node server",
-  "main": "server.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "speaker": "^0.5.4",
-    "web-audio-api": "^0.2.2"
-  }
-}

server/repl.js

@@ -1,76 +0,0 @@
-import repl from 'repl';
-import { evalScope, evaluate } from '@strudel.cycles/eval';
-import { AudioContext } from 'web-audio-api';
-import Speaker from 'speaker';
-import controls from '@strudel.cycles/core/controls.mjs';
-import { prepareSamples, playBuffer } from './sampler.js';
-import { randomHeadline } from './headline.js';
-
-/*
-  This is just a POC of how a strudel cli / repl could look like 
-*/
-
-// setup audio
-const context = new AudioContext();
-context.outStream = new Speaker({
-  channels: context.format.numberOfChannels,
-  bitDepth: context.format.bitDepth,
-  sampleRate: context.sampleRate,
-});
-console.log('now loading samples..');
-const buffers = await prepareSamples(context, './samples/');
-console.log('');
-
-// scheduler
-let tick = 0;
-const slice = 0.5;
-const latency = 1;
-/* console.log('latency', latency);
-console.log('querying every', slice, 's'); */
-const offset = context.currentTime + latency;
-let pattern;
-setInterval(() => {
-  if (pattern) {
-    try {
-      pattern
-        .queryArc(tick * slice, ++tick * slice)
-        .filter((hap) => hap.hasOnset())
-        .forEach((hap) => {
-          const t = hap.whole.begin.valueOf() + offset;
-          const { s, n } = hap.value;
-          const bank = buffers[s];
-          if (bank?.length) {
-            const index = (n ?? 0) % bank.length;
-            playBuffer(context, bank[index], t);
-          }
-        });
-    } catch (err) {
-      console.error('query error', err);
-    }
-  }
-}, slice * 1000);
-
-await evalScope(controls, import('@strudel.cycles/core'), import('@strudel.cycles/mini'));
-console.log(`${randomHeadline()}
-
-welcome to the experimental strudel cli <3
-
-available samples: ${Object.entries(buffers)
-  .map(([key, samples]) => `${key} (${samples.length})`)
-  .join(', ')}   
-you can add samples to the samples folder (.wav, .ogg, .mp3)
-
-please enter a pattern, e.g. s("bd(3,8),~ sd,hh(3,8,1)")
-`);
-// repl
-repl.start({
-  prompt: '>>>',
-  eval: async function myEval(cmd, context, filename, callback) {
-    try {
-      pattern = (await evaluate(cmd)).pattern;
-    } catch (err) {
-      console.error('query error', err.message);
-    }
-    callback(null);
-  },
-});

server/sampler.js

@@ -1,41 +0,0 @@
-import fs from 'fs';
-
-export const loadSample = (context, path) => {
-  console.log(`load sample: ${path}`);
-  return new Promise((resolve, reject) => {
-    fs.readFile(new URL(path, import.meta.url), function (err, buffer) {
-      if (err) reject(err);
-      context.decodeAudioData(buffer, resolve);
-    });
-  });
-};
-
-export async function prepareSamples(context, path, ignore = ['.DS_Store', 'Thumbs.db']) {
-  const ignored = (filename) => !ignore.includes(filename);
-  const folders = fs.readdirSync(path).filter(ignored);
-  return Object.fromEntries(
-    await Promise.all(
-      folders.map(async (folder) => {
-        return [
-          folder,
-          await Promise.all(
-            fs
-              .readdirSync(path + folder)
-              .filter(ignored)
-              .map((filename) => path + folder + '/' + filename)
-              .map((filepath) => loadSample(context, filepath)),
-          ),
-        ];
-      }, []),
-    ),
-  );
-}
-
-export const playBuffer = (context, audioBuffer, start = 0) => {
-  const bufferNode = context.createBufferSource();
-  bufferNode.connect(context.destination);
-  bufferNode.buffer = audioBuffer;
-  bufferNode.loop = false;
-  bufferNode.start(start);
-  bufferNode.stop(start + audioBuffer.length / audioBuffer.sampleRate);
-};

tutorial/tutorial.mdx

@@ -32,14 +32,14 @@ const drums = stack(
 const thru = (x) => x.transpose("<0 1>/8").transpose(-1);
 const synths = stack(
 "<eb4 d4 c4 b3>/2".scale(timeCat([3,'C minor'],[1,'C melodic minor']).slow(8)).struct("[~ x]\*2")
-.edit(
+.layer(
 scaleTranspose(0).early(0),
 scaleTranspose(2).early(1/8),
 scaleTranspose(7).early(1/4),
 scaleTranspose(8).early(3/8)
-).edit(thru).tone(keys).bypass("<1 0>/16"),
-"<C2 Bb1 Ab1 [G1 [G2 G1]]>/2".struct("[x [~ x] <[~ [~ x]]!3 [x x]>@2]/2".fast(2)).edit(thru).tone(bass),
-"<Cm7 Bb7 Fm7 G7b13>/2".struct("~ [x@0.1 ~]".fast(2)).voicings().edit(thru).every(2, early(1/8)).tone(keys).bypass("<0@7 1>/8".early(1/4))
+).layer(thru).tone(keys).bypass("<1 0>/16"),
+"<C2 Bb1 Ab1 [G1 [G2 G1]]>/2".struct("[x [~ x] <[~ [~ x]]!3 [x x]>@2]/2".fast(2)).layer(thru).tone(bass),
+"<Cm7 Bb7 Fm7 G7b13>/2".struct("~ [x@0.1 ~]".fast(2)).voicings().layer(thru).every(2, early(1/8)).tone(keys).bypass("<0@7 1>/8".early(1/4))
 )
 stack(
 drums.fast(2),
@@ -175,11 +175,21 @@ Using "!" we can repeat without speeding up:
 
 In essence, the `x!n` is like a shortcut for `[x*n]@n`.
 
+## Euclidian
+
+Using round brackets, we can create rhythmical sub-divisions based on three parameters: beats, segments and offset. 
+The first parameter controls how may beats will be played. 
+The second parameter controls the total amount of segments the beats will be distributed over. 
+The third (optional) parameter controls the starting position for distributing the beats.
+One popular Euclidian rhythm (going by various names, such as "Pop Clave") is "(3,8,1)" or simply "(3,8)", 
+resulting in a rhythmical structure of "x ~ ~ x ~ ~ x ~" (3 beats over 8 segments, starting on position 1).
+
+<MiniRepl tune={`"e5(2,8) b4(3,8) d5(2,8) c5(3,8)".slow(4)`} />
+
 ## Mini Notation TODO
 
 Compared to [tidal mini notation](https://tidalcycles.org/docs/patternlib/tutorials/mini_notation/), the following mini notation features are missing from Strudel:
 
-- [x] Euclidean algorithm "c3(3,2,1)" TODO: document
 - [ ] Tie symbols "\_"
 - [ ] feet marking "."
 - [ ] random choice "|"
@@ -436,12 +446,6 @@ Applies the given function by the given time offset:
 
 <MiniRepl tune={`"c3 eb3 g3".off(1/8, add(7))`} />
 
-### append(pat)
-
-Appends the given pattern after the current pattern:
-
-<MiniRepl tune={`"c4,eb4,g4".append("c4,f4,ab4")`} />
-
 ### stack(pat)
 
 Stacks the given pattern to the current pattern:
@@ -643,10 +647,10 @@ Turns chord symbols into root notes of chords in given octave.
 
 <MiniRepl tune={`"<C^7 A7b13 Dm7 G7>".rootNotes(3)`} />
 
-Together with edit, struct and voicings, this can be used to create a basic backing track:
+Together with layer, struct and voicings, this can be used to create a basic backing track:
 
 <MiniRepl
-  tune={`"<C^7 A7b13 Dm7 G7>".edit(
+  tune={`"<C^7 A7b13 Dm7 G7>".layer(
   x => x.voicings(['d3','g4']).struct("~ x"),
   x => x.rootNotes(2).tone(synth(osc('sawtooth4')).chain(out()))
 )`}