fix: add flag to reduce dom weight

+ use name instead of longname for linking

README.md

@@ -24,8 +24,8 @@ There are multiple npm packages you can use to use strudel, or only parts of it,
 
 - [`core`](./packages/core/): tidal pattern engine
 - [`mini`](./packages/mini): mini notation parser + core binding
-- [`eval`](./packages/eval): user code evaluator. syntax sugar + highlighting
-- [`tone`](./packages/tone): bindings for Tone.js instruments and effects
+- [`transpiler`](./packages/transpiler): user code transpiler
+- [`webaudio`](./packages/webaudio): webaudio output
 - [`osc`](./packages/osc): bindings to communicate via OSC
 - [`midi`](./packages/midi): webmidi bindings
 - [`serial`](./packages/serial): webserial bindings

index.mjs

@@ -2,7 +2,6 @@
 export * from './packages/core/index.mjs';
 export * from './packages/csound/index.mjs';
 export * from './packages/embed/index.mjs';
-export * from './packages/eval/index.mjs';
 export * from './packages/midi/index.mjs';
 export * from './packages/mini/index.mjs';
 export * from './packages/osc/index.mjs';
@@ -10,8 +9,6 @@ export * from './packages/react/index.mjs';
 export * from './packages/serial/index.mjs';
 export * from './packages/soundfonts/index.mjs';
 export * from './packages/tonal/index.mjs';
-export * from './packages/tone/index.mjs';
 export * from './packages/transpiler/index.mjs';
 export * from './packages/webaudio/index.mjs';
-export * from './packages/webdirt/index.mjs';
 export * from './packages/xen/index.mjs';

package.json

@@ -67,6 +67,6 @@
     "lerna": "^6.6.1",
     "prettier": "^2.8.8",
     "rollup-plugin-visualizer": "^5.8.1",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

packages/codemirror/codemirror.mjs

@@ -1,11 +1,12 @@
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap, Decoration, lineNumbers, highlightActiveLineGutter } from '@codemirror/view';
 import { defaultKeymap } from '@codemirror/commands';
-import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
 import { javascript } from '@codemirror/lang-javascript';
-import { StateField, StateEffect } from '@codemirror/state';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { EditorView, highlightActiveLineGutter, keymap, lineNumbers } from '@codemirror/view';
+import { Drawer, repl } from '@strudel.cycles/core';
+import { flashField, flash } from './flash.mjs';
+import { highlightExtension, highlightMiniLocations } from './highlight.mjs';
 import { oneDark } from './themes/one-dark';
-import { repl, Drawer } from '@strudel.cycles/core';
 
 // https://codemirror.net/docs/guide/
 export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, theme = oneDark, root }) {
@@ -15,7 +16,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, the
       theme,
       javascript(),
       lineNumbers(),
-      highlightField,
+      highlightExtension,
       highlightActiveLineGutter(),
       syntaxHighlighting(defaultHighlightStyle),
       keymap.of(defaultKeymap),
@@ -40,93 +41,6 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, the
   });
 }
 
-//
-//  highlighting
-//
-
-export const setHighlights = StateEffect.define();
-export const highlightField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(highlights, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setHighlights)) {
-          const { haps } = e.value;
-          const marks =
-            haps
-              .map((hap) =>
-                (hap.context.locations || []).map(({ start, end }) => {
-                  // 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: 2px solid #FFCA28;` },
-                  });
-                  return mark.range(from, to);
-                }),
-              )
-              .flat()
-              .filter(Boolean) || [];
-          highlights = Decoration.set(marks, true);
-        }
-      }
-      return highlights;
-    } catch (err) {
-      // console.warn('highlighting error', err);
-      return Decoration.set([]);
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-// helper to simply trigger highlighting for given haps
-export function highlightHaps(view, haps) {
-  view.dispatch({ effects: setHighlights.of({ haps }) });
-}
-
-//
-// flash
-//
-
-export const setFlash = StateEffect.define();
-const flashField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(flash, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setFlash)) {
-          if (e.value) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
-            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
-          } else {
-            flash = Decoration.set([]);
-          }
-        }
-      }
-      return flash;
-    } catch (err) {
-      console.warn('flash error', err);
-      return flash;
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-export const flash = (view, ms = 200) => {
-  view.dispatch({ effects: setFlash.of(true) });
-  setTimeout(() => {
-    view.dispatch({ effects: setFlash.of(false) });
-  }, ms);
-};
-
 export class StrudelMirror {
   constructor(options) {
     const { root, initialCode = '', onDraw, drawTime = [-2, 2], prebake, ...replOptions } = options;
@@ -134,7 +48,7 @@ export class StrudelMirror {
 
     this.drawer = new Drawer((haps, time) => {
       const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.endClipped);
-      this.highlight(currentFrame);
+      this.highlight(currentFrame, time);
       onDraw?.(haps, time, currentFrame);
     }, drawTime);
 
@@ -193,7 +107,7 @@ export class StrudelMirror {
   flash(ms) {
     flash(this.editor, ms);
   }
-  highlight(haps) {
-    highlightHaps(this.editor, haps);
+  highlight(haps, time) {
+    highlightMiniLocations(this.editor.view, time, haps);
   }
 }

packages/codemirror/flash.mjs

@@ -0,0 +1,35 @@
+import { StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+
+export const setFlash = StateEffect.define();
+export const flashField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(flash, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setFlash)) {
+          if (e.value && tr.newDoc.length > 0) {
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
+          } else {
+            flash = Decoration.set([]);
+          }
+        }
+      }
+      return flash;
+    } catch (err) {
+      console.warn('flash error', err);
+      return flash;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+export const flash = (view, ms = 200) => {
+  view.dispatch({ effects: setFlash.of(true) });
+  setTimeout(() => {
+    view.dispatch({ effects: setFlash.of(false) });
+  }, ms);
+};

packages/codemirror/highlight.mjs

@@ -0,0 +1,126 @@
+import { RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+
+export const setMiniLocations = StateEffect.define();
+export const showMiniLocations = StateEffect.define();
+export const updateMiniLocations = (view, locations) => {
+  view.dispatch({ effects: setMiniLocations.of(locations) });
+};
+export const highlightMiniLocations = (view, atTime, haps) => {
+  view.dispatch({ effects: showMiniLocations.of({ atTime, haps }) });
+};
+
+const miniLocations = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(locations, tr) {
+    if (tr.docChanged) {
+      locations = locations.map(tr.changes);
+    }
+
+    for (let e of tr.effects) {
+      if (e.is(setMiniLocations)) {
+        // this is called on eval, with the mini locations obtained from the transpiler
+        // codemirror will automatically remap the marks when the document is edited
+        // create a mark for each mini location, adding the range to the spec to find it later
+        const marks = e.value
+          .filter(([from]) => from < tr.newDoc.length)
+          .map(([from, to]) => [from, Math.min(to, tr.newDoc.length)])
+          .map(
+            (range) =>
+              Decoration.mark({
+                id: range.join(':'),
+                // this green is only to verify that the decoration moves when the document is edited
+                // it will be removed later, so the mark is not visible by default
+                attributes: { style: `background-color: #00CA2880` },
+              }).range(...range), // -> Decoration
+          );
+
+        locations = Decoration.set(marks, true); // -> DecorationSet === RangeSet<Decoration>
+      }
+    }
+
+    return locations;
+  },
+});
+
+const visibleMiniLocations = StateField.define({
+  create() {
+    return { atTime: 0, haps: new Map() };
+  },
+  update(visible, tr) {
+    for (let e of tr.effects) {
+      if (e.is(showMiniLocations)) {
+        // this is called every frame to show the locations that are currently active
+        // we can NOT create new marks because the context.locations haven't changed since eval time
+        // this is why we need to find a way to update the existing decorations, showing the ones that have an active range
+        const haps = new Map();
+        for (let hap of e.value.haps) {
+          for (let { start, end } of hap.context.locations) {
+            let id = `${start}:${end}`;
+            if (!haps.has(id) || haps.get(id).whole.begin.lt(hap.whole.begin)) {
+              haps.set(id, hap);
+            }
+          }
+        }
+
+        visible = { atTime: e.value.atTime, haps };
+      }
+    }
+
+    return visible;
+  },
+});
+
+// // Derive the set of decorations from the miniLocations and visibleLocations
+const miniLocationHighlights = EditorView.decorations.compute([miniLocations, visibleMiniLocations], (state) => {
+  const iterator = state.field(miniLocations).iter();
+  const { haps } = state.field(visibleMiniLocations);
+  const builder = new RangeSetBuilder();
+
+  while (iterator.value) {
+    const {
+      from,
+      to,
+      value: {
+        spec: { id },
+      },
+    } = iterator;
+
+    if (haps.has(id)) {
+      const hap = haps.get(id);
+      const color = hap.context.color ?? 'var(--foreground)';
+      // Get explicit channels for color values
+      /* 
+      const swatch = document.createElement('div');
+      swatch.style.color = color;
+      document.body.appendChild(swatch);
+      let channels = getComputedStyle(swatch)
+        .color.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d*(?:\.\d+)?))?\)$/)
+        .slice(1)
+        .map((c) => parseFloat(c || 1));
+      document.body.removeChild(swatch);
+
+      // Get percentage of event
+      const percent = 1 - (atTime - hap.whole.begin) / hap.whole.duration;
+      channels[3] *= percent;
+      */
+
+      builder.add(
+        from,
+        to,
+        Decoration.mark({
+          // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
+          attributes: { style: `outline: solid 2px ${color}` },
+        }),
+      );
+    }
+
+    iterator.next();
+  }
+
+  return builder.finish();
+});
+
+export const highlightExtension = [miniLocations, visibleMiniLocations, miniLocationHighlights];

packages/codemirror/index.mjs

@@ -0,0 +1,3 @@
+export * from './codemirror.mjs';
+export * from './highlight.mjs';
+export * from './flash.mjs';

packages/codemirror/package.json

@@ -2,7 +2,7 @@
   "name": "@strudel/codemirror",
   "version": "0.8.4",
   "description": "Codemirror Extensions for Strudel",
-  "main": "codemirror.mjs",
+  "main": "index.mjs",
   "publishConfig": {
     "main": "dist/index.js",
     "module": "dist/index.mjs"

packages/codemirror/vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [],
   build: {
     lib: {
-      entry: resolve(__dirname, 'codemirror.mjs'),
+      entry: resolve(__dirname, 'index.mjs'),
       formats: ['es', 'cjs'],
       fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.js' }[ext]),
     },

packages/core/controls.mjs

@@ -509,7 +509,7 @@ const generic_params = [
    * @superDirtOnly
    */
   ['octave'],
-  ['offset'], // TODO: what is this? not found in tidal doc
+
   // ['ophatdecay'],
   // TODO: example
   /**
@@ -573,6 +573,15 @@ const generic_params = [
   // TODO: dedup with synth param, see https://tidalcycles.org/docs/reference/synthesizers/#superpiano
   // ['velocity'],
   ['voice'], // TODO: synth param
+
+  // voicings // https://github.com/tidalcycles/strudel/issues/506
+  ['chord'], // chord to voice, like C Eb Fm7 G7. the symbols can be defined via addVoicings
+  ['dictionary', 'dict'], // which dictionary to use for the voicings
+  ['anchor'], // the top note to align the voicing to, defaults to c5
+  ['offset'], // how the voicing is offset from the anchored position
+  ['octaves'], // how many octaves are voicing steps spread apart, defaults to 1
+  [['mode', 'anchor']], // below = anchor note will be removed from the voicing, useful for melody harmonization
+
   /**
    * Sets the level of reverb.
    *

packages/core/draw.mjs

@@ -15,6 +15,14 @@ export const getDrawContext = (id = 'test-canvas') => {
     canvas.height = window.innerHeight;
     canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
     document.body.prepend(canvas);
+    let timeout;
+    window.addEventListener('resize', () => {
+      timeout && clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }, 200);
+    });
   }
   return canvas.getContext('2d');
 };

packages/core/evaluate.mjs

@@ -1,6 +1,6 @@
 /*
 evaluate.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/evaluate.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/evaluate.mjs>
 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/>.
 */
 
@@ -37,8 +37,12 @@ function safeEval(str, options = {}) {
 }
 
 export const evaluate = async (code, transpiler) => {
+  let meta = {};
   if (transpiler) {
-    code = transpiler(code); // transform syntactically correct js code to semantically usable code
+    // transform syntactically correct js code to semantically usable code
+    const transpiled = transpiler(code);
+    code = transpiled.output;
+    meta = transpiled;
   }
   // if no transpiler is given, we expect a single instruction (!wrapExpression)
   const options = { wrapExpression: !!transpiler };
@@ -48,5 +52,5 @@ export const evaluate = async (code, transpiler) => {
     const message = `got "${typeof evaluated}" instead of pattern`;
     throw new Error(message + (typeof evaluated === 'function' ? ', did you forget to call a function?' : '.'));
   }
-  return { mode: 'javascript', pattern: evaluated };
+  return { mode: 'javascript', pattern: evaluated, meta };
 };

packages/core/package.json

@@ -36,6 +36,6 @@
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
     "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

packages/core/pattern.mjs

@@ -472,15 +472,15 @@ export class Pattern {
   /**
    * Returns a new pattern with the given location information added to the
    * context of every hap.
-   * @param {Number} start
-   * @param {Number} end
+   * @param {Number} start start offset
+   * @param {Number} end end offset
    * @returns Pattern
    * @noAutocomplete
    */
-  withLocation(start, end) {
+  withLoc(start, end) {
     const location = {
-      start: { line: start[0], column: start[1], offset: start[2] },
-      end: { line: end[0], column: end[1], offset: end[2] },
+      start,
+      end,
     };
     return this.withContext((context) => {
       const locations = (context.locations || []).concat([location]);
@@ -488,32 +488,6 @@ export class Pattern {
     });
   }
 
-  withMiniLocation(start, end) {
-    const offset = {
-      start: { line: start[0], column: start[1], offset: start[2] },
-      end: { line: end[0], column: end[1], offset: end[2] },
-    };
-    return this.withContext((context) => {
-      let locations = context.locations || [];
-      locations = locations.map(({ start, end }) => {
-        const colOffset = start.line === 1 ? offset.start.column : 0;
-        return {
-          start: {
-            ...start,
-            line: start.line - 1 + (offset.start.line - 1) + 1,
-            column: start.column - 1 + colOffset,
-          },
-          end: {
-            ...end,
-            line: end.line - 1 + (offset.start.line - 1) + 1,
-            column: end.column - 1 + colOffset,
-          },
-        };
-      });
-      return { ...context, locations };
-    });
-  }
-
   /**
    * Returns a new Pattern, which only returns haps that meet the given test.
    * @param {Function} hap_test - a function which returns false for haps to be removed from the pattern
@@ -809,13 +783,14 @@ export class Pattern {
       hap.setContext({
         ...hap.context,
         onTrigger: (...args) => {
-          if (!dominant && hap.context.onTrigger) {
-            hap.context.onTrigger(...args);
-          }
+          // run previously set trigger, if it exists
+          hap.context.onTrigger?.(...args);
           onTrigger(...args);
         },
-        // we need this to know later if the default trigger should still fire
-        dominantTrigger: dominant,
+        // if dominantTrigger is set to true, the default output (webaudio) will be disabled
+        // when using multiple triggers, you cannot flip this flag to false again!
+        // example: x.csound('CooLSynth').log() as well as x.log().csound('CooLSynth') should work the same
+        dominantTrigger: hap.context.dominantTrigger || dominant,
       }),
     );
   }
@@ -2266,14 +2241,18 @@ 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.
+ * Instead of a number, it also accepts a list of numbers from 0 to 1 to slice at specific points.
  * @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)
+ * @example
+ * await samples('github:tidalcycles/Dirt-Samples/master')
+ * s("breaks125/2").fit().slice([0,.25,.5,.75], "0 1 1 <2 3>")
  */
 
 export const slice = register(
@@ -2284,9 +2263,9 @@ export const slice = register(
         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 });
+          const begin = Array.isArray(n) ? n[i] : i / n;
+          const end = Array.isArray(n) ? n[i + 1] : (i + 1) / n;
+          return pure({ begin, end, _slices: n, ...o });
         }),
       ),
     );
@@ -2328,6 +2307,19 @@ export const { loopAt, loopat } = register(['loopAt', 'loopat'], function (facto
   return _loopAt(factor, pat, 1);
 });
 
+// this function will be redefined in repl.mjs to use the correct cps value.
+// It is still here to work in cases where repl.mjs is not used
+
+export const fit = register('fit', (pat) =>
+  pat.withHap((hap) =>
+    hap.withValue((v) => ({
+      ...v,
+      speed: 1 / hap.whole.duration,
+      unit: 'c',
+    })),
+  ),
+);
+
 /**
  * Makes the sample fit the given number of cycles and cps value, by
  * changing the speed. Please note that at some point cps will be

packages/core/pianoroll.mjs

@@ -1,6 +1,6 @@
 /*
 pianoroll.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/pianoroll.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/pianoroll.mjs>
 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/>.
 */
 
@@ -246,7 +246,7 @@ export function pianoroll({
   haps
     // .filter(inFrame)
     .forEach((event) => {
-      const isActive = event.whole.begin <= time && event.whole.end > time;
+      const isActive = event.whole.begin <= time && event.endClipped > time;
       const color = event.value?.color || event.context?.color;
       ctx.fillStyle = color || inactive;
       ctx.strokeStyle = color || active;

packages/core/repl.mjs

@@ -35,11 +35,10 @@ export function repl({
     }
     try {
       await beforeEval?.({ code });
-      let { pattern } = await _evaluate(code, transpiler);
-
+      let { pattern, meta } = await _evaluate(code, transpiler);
       logger(`[eval] code updated`);
       setPattern(pattern, autostart);
-      afterEval?.({ code, pattern });
+      afterEval?.({ code, pattern, meta });
       return pattern;
     } catch (err) {
       // console.warn(`[repl] eval error: ${err.message}`);

packages/core/signal.mjs

@@ -191,13 +191,6 @@ export const chooseInWith = (pat, xs) => {
  */
 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);
 };

packages/core/spiral.mjs

@@ -68,8 +68,9 @@ Pattern.prototype.spiral = function (options = {}) {
   } = options;
 
   function spiral({ ctx, time, haps, drawTime }) {
-    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
-    const [cx, cy] = [ctx.canvas.width / 2, ctx.canvas.height / 2];
+    const [w, h] = [ctx.canvas.width, ctx.canvas.height];
+    ctx.clearRect(0, 0, w * 2, h * 2);
+    const [cx, cy] = [w / 2, h / 2];
     const settings = {
       margin: size / stretch,
       cx,

packages/core/ui.mjs

@@ -1,6 +1,6 @@
 /*
 ui.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/ui.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/ui.mjs>
 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/>.
 */
 

packages/core/util.mjs

@@ -11,21 +11,24 @@ export const tokenizeNote = (note) => {
   if (typeof note !== 'string') {
     return [];
   }
-  const [pc, acc = '', oct] = note.match(/^([a-gA-G])([#bsf]*)([0-9])?$/)?.slice(1) || [];
+  const [pc, acc = '', oct] = note.match(/^([a-gA-G])([#bsf]*)([0-9]*)$/)?.slice(1) || [];
   if (!pc) {
     return [];
   }
   return [pc, acc, oct ? Number(oct) : undefined];
 };
 
+const chromas = { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 };
+const accs = { '#': 1, b: -1, s: 1, f: -1 };
+
 // turns the given note into its midi number representation
-export const noteToMidi = (note) => {
-  const [pc, acc, oct = 3] = tokenizeNote(note);
+export const noteToMidi = (note, defaultOctave = 3) => {
+  const [pc, acc, oct = defaultOctave] = tokenizeNote(note);
   if (!pc) {
     throw new Error('not a note: "' + note + '"');
   }
-  const chroma = { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 }[pc.toLowerCase()];
-  const offset = acc?.split('').reduce((o, char) => o + { '#': 1, b: -1, s: 1, f: -1 }[char], 0) || 0;
+  const chroma = chromas[pc.toLowerCase()];
+  const offset = acc?.split('').reduce((o, char) => o + accs[char], 0) || 0;
   return (Number(oct) + 1) * 12 + chroma + offset;
 };
 export const midiToFreq = (n) => {

packages/eval/.gitignore

@@ -1,3 +0,0 @@
-shift-parser
-shift-reducer
-!shift-traverser

packages/eval/README.md

@@ -1,50 +0,0 @@
-# @strudel.cycles/eval
-
-This package contains the strudel code transformer and evaluator.
-It allows creating strudel patterns from input code that is optimized for minimal keystrokes and human readability.
-
-## Deprecation Note
-
-This package will not be developed further. Consider using `@strudel.cycles/transpiler` as a replacement.
-
-## Install
-
-```sh
-npm i @strudel.cycles/eval --save
-```
-
-## Example
-
-```js
-import { evalScope } from '@strudel.cycles/core';
-import { evaluate } from '@strudel.cycles/eval';
-
-evalScope(
-  import('@strudel.cycles/core'),
-  // import other strudel packages here
-); // add strudel to eval scope
-
-async function run(code) {
-  const { pattern } = await evaluate(code);
-  const events = pattern.firstCycle();
-  console.log(events.map((e) => e.show()).join('\n'));
-}
-
-run('sequence([a3, [b3, c4]])');
-```
-
-yields:
-
-```js
-(0/1 -> 1/2, 0/1 -> 1/2, a3)
-(1/2 -> 3/4, 1/2 -> 3/4, b3)
-(3/4 -> 1/1, 3/4 -> 1/1, c4)
-```
-
-[play with @strudel.cycles/eval on codesandbox](https://codesandbox.io/s/strudel-eval-example-ndz1d8?file=/src/index.js)
-
-## Dev Notes
-
-shift-traverser is currently monkey patched because its package.json uses estraverse@^4.2.0,
-which does not support the spread operator (Error: Unknown node type SpreadProperty.).
-By monkey patched, I mean I copied the source of shift-traverser to a subfolder and installed the dependencies (shift-spec + estraverse@^5.3.0)

packages/eval/evaluate.mjs

@@ -1,12 +0,0 @@
-/*
-evaluate.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/evaluate.mjs>
-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 { evaluate as _evaluate } from '@strudel.cycles/core';
-import shapeshifter from './shapeshifter.mjs';
-
-export const evaluate = async (code) => {
-  return _evaluate(code, shapeshifter);
-};

packages/eval/index.mjs

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

packages/eval/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "@strudel.cycles/eval",
-  "version": "0.8.0",
-  "description": "Code evaluator for strudel",
-  "main": "index.mjs",
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
-  },
-  "scripts": {
-    "build": "vite build",
-    "test": "vitest run",
-    "prepublishOnly": "npm run build"
-  },
-  "type": "module",
-  "directories": {
-    "test": "test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@strudel.cycles/core": "workspace:*",
-    "estraverse": "^5.3.0",
-    "shift-ast": "^7.0.0",
-    "shift-codegen": "^8.1.0",
-    "shift-parser": "^8.0.0",
-    "shift-spec": "^2019.0.0",
-    "shift-traverser": "^1.0.0"
-  },
-  "devDependencies": {
-    "@strudel.cycles/mini": "workspace:*",
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
-  }
-}

packages/eval/shapeshifter.mjs

@@ -1,296 +0,0 @@
-/*
-shapeshifter.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/shapeshifter.mjs>
-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 { parseScriptWithLocation } from './shift-parser/index.js'; // npm module does not work in the browser
-import traverser from './shift-traverser/index.js'; // npm module does not work in the browser */
-import { parseScriptWithLocation } from 'shift-parser';
-import traverser from './shift-traverser/index.js';
-const { replace } = traverser;
-import {
-  LiteralStringExpression,
-  IdentifierExpression,
-  CallExpression,
-  StaticMemberExpression,
-  ReturnStatement,
-  ArrayExpression,
-  LiteralNumericExpression,
-} from 'shift-ast';
-import shiftCodegen from 'shift-codegen';
-const codegen = shiftCodegen.default || shiftCodegen; // parcel module resolution fuckup
-
-import * as strudel from '@strudel.cycles/core';
-
-const { Pattern } = strudel;
-
-const isNote = (name) => /^[a-gC-G][bs]?[0-9]$/.test(name);
-
-const addLocations = true;
-export const addMiniLocations = true;
-export const minifyStrings = true;
-export const wrappedAsync = false; // this is now handled by core evaluate by default
-export const shouldAddReturn = true;
-
-export default (_code) => {
-  const { code, addReturn } = wrapAsync(_code);
-  const ast = parseScriptWithLocation(disguiseImports(code));
-  const artificialNodes = [];
-  const parents = [];
-  const shifted = replace(ast.tree, {
-    enter(node, parent) {
-      parents.push(parent);
-      const isSynthetic = parents.some((p) => artificialNodes.includes(p));
-      if (isSynthetic) {
-        return node;
-      }
-
-      // replace template string `xxx` with mini(`xxx`)
-      if (minifyStrings && isBackTickString(node)) {
-        return minifyWithLocation(node, node, ast.locations, artificialNodes);
-      }
-      // allows to use top level strings, which are normally directives... but we don't need directives
-      if (minifyStrings && node.directives?.length === 1 && !node.statements?.length) {
-        const str = new LiteralStringExpression({ value: node.directives[0].rawValue });
-        const wrapped = minifyWithLocation(str, node.directives[0], ast.locations, artificialNodes);
-        return { ...node, directives: [], statements: [wrapped] };
-      }
-
-      // replace double quote string "xxx" with mini('xxx')
-      if (minifyStrings && isStringWithDoubleQuotes(node, ast.locations, code)) {
-        return minifyWithLocation(node, node, ast.locations, artificialNodes);
-      }
-
-      // operator overloading => still not done
-      const operators = {
-        '*': 'fast',
-        '/': 'slow',
-        '&': 'stack',
-        '&&': 'append',
-      };
-      if (
-        node.type === 'BinaryExpression' &&
-        operators[node.operator] &&
-        ['LiteralNumericExpression', 'LiteralStringExpression', 'IdentifierExpression'].includes(node.right?.type) &&
-        canBeOverloaded(node.left)
-      ) {
-        let arg = node.left;
-        if (node.left.type === 'IdentifierExpression') {
-          arg = wrapFunction('reify', node.left);
-        }
-        return new CallExpression({
-          callee: new StaticMemberExpression({
-            property: operators[node.operator],
-            object: wrapFunction('reify', arg),
-          }),
-          arguments: [node.right],
-        });
-      }
-
-      const isMarkable = isPatternArg(parents) || hasModifierCall(parent);
-      // add to location to pure(x) calls
-      if (node.type === 'CallExpression' && node.callee.name === 'pure') {
-        const literal = node.arguments[0];
-        // const value = literal[{ LiteralNumericExpression: 'value', LiteralStringExpression: 'name' }[literal.type]];
-        return reifyWithLocation(literal, node.arguments[0], ast.locations, artificialNodes);
-      }
-      // replace pseudo note variables
-      if (node.type === 'IdentifierExpression') {
-        if (isNote(node.name)) {
-          const value = node.name[1] === 's' ? node.name.replace('s', '#') : node.name;
-          if (addLocations && isMarkable) {
-            return reifyWithLocation(new LiteralStringExpression({ value }), node, ast.locations, artificialNodes);
-          }
-          return new LiteralStringExpression({ value });
-        }
-        if (node.name === 'r') {
-          return new IdentifierExpression({ name: 'silence' });
-        }
-      }
-      if (
-        addLocations &&
-        ['LiteralStringExpression' /* , 'LiteralNumericExpression' */].includes(node.type) &&
-        isMarkable
-      ) {
-        // TODO: to make LiteralNumericExpression work, we need to make sure we're not inside timeCat...
-        return reifyWithLocation(node, node, ast.locations, artificialNodes);
-      }
-      if (addMiniLocations) {
-        return addMiniNotationLocations(node, ast.locations, artificialNodes);
-      }
-      return node;
-    },
-    leave() {
-      parents.pop();
-    },
-  });
-  // add return to last statement (because it's wrapped in an async function artificially)
-  if (shouldAddReturn) {
-    addReturn(shifted);
-  }
-  const generated = undisguiseImports(codegen(shifted));
-  return generated;
-};
-
-// renames all import statements to "_mport" as Shift doesn't support dynamic import.
-// there shouldn't be any side-effects from this as this change does not affect
-// the syntax & will be undone by the equivalent replace in "undisguiseImports".
-function disguiseImports(code) {
-  return code.replaceAll('import', '_mport'); // Must be the same length!
-}
-
-// Rename the renamed import statements back to "import"
-function undisguiseImports(code) {
-  return code.replaceAll('_mport', 'import');
-}
-
-function wrapAsync(code) {
-  // wrap code in async to make await work on top level => this will create 1 line offset to locations
-  // this is why line offset is -1 in getLocationObject calls below
-  if (wrappedAsync) {
-    code = `(async () => {
-${code}
-})()`;
-  }
-  const addReturn = (ast) => {
-    const body = wrappedAsync ? ast.statements[0].expression.callee.body : ast;
-    body.statements = body.statements
-      .slice(0, -1)
-      .concat([new ReturnStatement({ expression: body.statements.slice(-1)[0] })]);
-  };
-  return {
-    code,
-    addReturn,
-  };
-}
-
-function addMiniNotationLocations(node, locations, artificialNodes) {
-  const miniFunctions = ['mini', 'm'];
-  // const isAlreadyWrapped = parent?.type === 'CallExpression' && parent.callee.name === 'withLocationOffset';
-  if (node.type === 'CallExpression' && miniFunctions.includes(node.callee.name)) {
-    // mini('c3')
-    if (node.arguments.length > 1) {
-      // TODO: transform mini(...args) to cat(...args.map(mini)) ?
-      console.warn('multi arg mini locations not supported yet...');
-      return node;
-    }
-    const str = node.arguments[0];
-    return minifyWithLocation(str, str, locations, artificialNodes);
-  }
-  if (node.type === 'StaticMemberExpression' && miniFunctions.includes(node.property)) {
-    // 'c3'.mini or 'c3'.m
-    return minifyWithLocation(node.object, node, locations, artificialNodes);
-  }
-  return node;
-}
-
-function wrapFunction(name, ...args) {
-  return new CallExpression({
-    callee: new IdentifierExpression({ name }),
-    arguments: args,
-  });
-}
-
-function isBackTickString(node) {
-  return node.type === 'TemplateExpression' && node.elements.length === 1;
-}
-
-function isStringWithDoubleQuotes(node, locations, code) {
-  if (node.type !== 'LiteralStringExpression') {
-    return false;
-  }
-  const loc = locations.get(node);
-  const snippet = code.slice(loc.start.offset, loc.end.offset);
-  return snippet[0] === '"'; // we can trust the end is also ", as the parsing did not fail
-}
-
-// returns true if the given parents belong to a pattern argument node
-// this is used to check if a node should receive a location for highlighting
-function isPatternArg(parents) {
-  if (!parents.length) {
-    return false;
-  }
-  const ancestors = parents.slice(0, -1);
-  const parent = parents[parents.length - 1];
-  if (isPatternFactory(parent)) {
-    return true;
-  }
-  if (parent?.type === 'ArrayExpression') {
-    return isPatternArg(ancestors);
-  }
-  return false;
-}
-
-function hasModifierCall(parent) {
-  // TODO: modifiers are more than composables, for example every is not composable but should be seen as modifier..
-  // need all prototypes of Pattern
-  return parent?.type === 'StaticMemberExpression';
-  // && Object.keys(Pattern.prototype.composable).includes(parent.property)
-}
-const factories = Object.keys(Pattern.prototype.factories).concat(['mini']);
-
-function isPatternFactory(node) {
-  return node?.type === 'CallExpression' && factories.includes(node.callee.name);
-}
-
-function canBeOverloaded(node) {
-  return (node.type === 'IdentifierExpression' && isNote(node.name)) || isPatternFactory(node);
-  // TODO: support sequence(c3).transpose(3).x.y.z
-}
-
-// turns node in reify(value).withLocation(location), where location is the node's location in the source code
-// with this, the reified pattern can pass its location to the event, to know where to highlight when it's active
-function reifyWithLocation(literalNode, node, locations, artificialNodes) {
-  const args = getLocationArguments(node, locations);
-  const withLocation = new CallExpression({
-    callee: new StaticMemberExpression({
-      object: wrapFunction('reify', literalNode),
-      property: 'withLocation',
-    }),
-    arguments: args,
-  });
-  artificialNodes.push(withLocation);
-  return withLocation;
-}
-
-// turns node in reify(value).withLocation(location), where location is the node's location in the source code
-// with this, the reified pattern can pass its location to the event, to know where to highlight when it's active
-function minifyWithLocation(literalNode, node, locations, artificialNodes) {
-  const args = getLocationArguments(node, locations);
-  const wrapped = wrapFunction('mini', literalNode);
-  if (!addMiniLocations) {
-    artificialNodes.push(wrapped);
-    return wrapped;
-  }
-  const withLocation = new CallExpression({
-    callee: new StaticMemberExpression({
-      object: wrapped,
-      property: 'withMiniLocation',
-    }),
-    arguments: args,
-  });
-  artificialNodes.push(withLocation);
-  return withLocation;
-}
-
-function getLocationArguments(node, locations) {
-  const loc = locations.get(node);
-  const lineOffset = wrappedAsync ? -1 : 0;
-  return [
-    new ArrayExpression({
-      elements: [
-        new LiteralNumericExpression({ value: loc.start.line + lineOffset }), // the minus 1 assumes the code has been wrapped in async iife
-        new LiteralNumericExpression({ value: loc.start.column }),
-        new LiteralNumericExpression({ value: loc.start.offset }),
-      ],
-    }),
-    new ArrayExpression({
-      elements: [
-        new LiteralNumericExpression({ value: loc.end.line + lineOffset }), // the minus 1 assumes the code has been wrapped in async iife
-        new LiteralNumericExpression({ value: loc.end.column }),
-        new LiteralNumericExpression({ value: loc.end.offset }),
-      ],
-    }),
-  ];
-}

packages/eval/shift-traverser/index.js

@@ -1,68 +0,0 @@
-/*
-index.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/shift-traverser/index.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-/*
-  Copyright (C) 2014 Yusuke Suzuki <utatane.tea@gmail.com>
-
-  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.
-
-  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 <COPYRIGHT HOLDER> 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.
-*/
-
-import _Spec from 'shift-spec';
-const Spec = _Spec.default || _Spec; // parcel module resolution fuckup
-// import { version } from '../package.json'
-
-// Loading uncached estraverse for changing estraverse.Syntax.
-import _estraverse from 'estraverse';
-
-const estraverse = _estraverse.cloneEnvironment();
-
-// Adjust estraverse members.
-
-Object.keys(estraverse.Syntax)
-  .filter((key) => key !== 'Property')
-  .forEach((key) => {
-    delete estraverse.Syntax[key];
-    delete estraverse.VisitorKeys[key];
-  });
-
-Object.assign(
-  estraverse.Syntax,
-  Object.keys(Spec).reduce((result, key) => {
-    result[key] = key;
-    return result;
-  }, {}),
-);
-
-Object.assign(
-  estraverse.VisitorKeys,
-  Object.keys(Spec).reduce((result, key) => {
-    result[key] = Spec[key].fields.map((field) => field.name);
-    return result;
-  }, {}),
-);
-
-// estraverse.version = version;
-export default estraverse;
-
-/* vim: set sw=4 ts=4 et tw=80 : */

packages/eval/test/evaluate.test.mjs

@@ -1,32 +0,0 @@
-/*
-evaluate.test.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/test/evaluate.test.mjs>
-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 { expect, describe, it } from 'vitest';
-
-import { evaluate } from '../evaluate.mjs';
-import { mini } from '@strudel.cycles/mini';
-import * as strudel from '@strudel.cycles/core';
-const { fastcat, evalScope } = strudel;
-
-describe('evaluate', async () => {
-  await evalScope({ mini }, strudel);
-  const ev = async (code) => (await evaluate(code)).pattern.firstCycleValues;
-  it('Should evaluate strudel functions', async () => {
-    expect(await ev('pure("c3")')).toEqual(['c3']);
-    expect(await ev('cat("c3")')).toEqual(['c3']);
-    expect(await ev('fastcat("c3", "d3")')).toEqual(['c3', 'd3']);
-    expect(await ev('slowcat("c3", "d3")')).toEqual(['c3']);
-  });
-  it('Scope should be extendable', async () => {
-    await evalScope({ myFunction: (...x) => fastcat(...x) });
-    expect(await ev('myFunction("c3", "d3")')).toEqual(['c3', 'd3']);
-  });
-  it('Should evaluate simple double quoted mini notation', async () => {
-    expect(await ev('"c3"')).toEqual(['c3']);
-    expect(await ev('"c3 d3"')).toEqual(['c3', 'd3']);
-    expect(await ev('"<c3 d3>"')).toEqual(['c3']);
-  });
-});

packages/eval/test/shapeshifter.test.mjs

@@ -1,25 +0,0 @@
-/*
-shapeshifter.test.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/test/shapeshifter.test.mjs>
-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 { describe, it, expect } from 'vitest';
-import shapeshifter, { wrappedAsync } from '../shapeshifter.mjs';
-
-describe('shapeshifter', () => {
-  it('Should shift simple double quote string', () => {
-    if (wrappedAsync) {
-      expect(shapeshifter('"c3"')).toEqual('(async()=>{return mini("c3").withMiniLocation([1,0,15],[1,4,19])})()');
-    } else {
-      expect(shapeshifter('"c3"')).toEqual('return mini("c3").withMiniLocation([1,0,0],[1,4,4])');
-    }
-  });
-  if (wrappedAsync) {
-    it('Should handle dynamic imports', () => {
-      expect(shapeshifter('const { default: foo } = await import(\'https://bar.com/foo.js\');"c3"')).toEqual(
-        'const{default:foo}=await import("https://bar.com/foo.js");return mini("c3").withMiniLocation([1,64,79],[1,68,83])',
-      );
-    });
-  }
-});

packages/eval/vite.config.js

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

packages/midi/midi.mjs

@@ -113,8 +113,8 @@ Pattern.prototype.midi = function (output) {
     const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
     const duration = hap.duration.valueOf() * 1000 - 5;
 
-    if (note) {
-      const midiNumber = noteToMidi(note);
+    if (note != null) {
+      const midiNumber = typeof note === 'number' ? note : noteToMidi(note);
       device.playNote(midiNumber, midichan, {
         time,
         duration,

packages/mini/mini.mjs

@@ -9,7 +9,7 @@ import * as strudel from '@strudel.cycles/core';
 
 const randOffset = 0.0003;
 
-const applyOptions = (parent, code) => (pat, i) => {
+const applyOptions = (parent, enter) => (pat, i) => {
   const ast = parent.source_[i];
   const options = ast.options_;
   const ops = options?.ops;
@@ -23,18 +23,14 @@ const applyOptions = (parent, code) => (pat, i) => {
           if (!legalTypes.includes(type)) {
             throw new Error(`mini: stretch: type must be one of ${legalTypes.join('|')} but got ${type}`);
           }
-          pat = strudel.reify(pat)[type](patternifyAST(amount, code));
+          pat = strudel.reify(pat)[type](enter(amount));
           break;
         }
         case 'bjorklund': {
           if (op.arguments_.rotation) {
-            pat = pat.euclidRot(
-              patternifyAST(op.arguments_.pulse, code),
-              patternifyAST(op.arguments_.step, code),
-              patternifyAST(op.arguments_.rotation, code),
-            );
+            pat = pat.euclidRot(enter(op.arguments_.pulse), enter(op.arguments_.step), enter(op.arguments_.rotation));
           } else {
-            pat = pat.euclid(patternifyAST(op.arguments_.pulse, code), patternifyAST(op.arguments_.step, code));
+            pat = pat.euclid(enter(op.arguments_.pulse), enter(op.arguments_.step));
           }
           break;
         }
@@ -45,7 +41,7 @@ const applyOptions = (parent, code) => (pat, i) => {
           break;
         }
         case 'tail': {
-          const friend = patternifyAST(op.arguments_.element, code);
+          const friend = enter(op.arguments_.element);
           pat = pat.fmap((a) => (b) => Array.isArray(a) ? [...a, b] : [a, b]).appLeft(friend);
           break;
         }
@@ -72,11 +68,14 @@ function resolveReplications(ast) {
   );
 }
 
-export function patternifyAST(ast, code) {
+// expects ast from mini2ast + quoted mini string + optional callback when a node is entered
+export function patternifyAST(ast, code, onEnter, offset = 0) {
+  onEnter?.(ast);
+  const enter = (node) => patternifyAST(node, code, onEnter, offset);
   switch (ast.type_) {
     case 'pattern': {
       resolveReplications(ast);
-      const children = ast.source_.map((child) => patternifyAST(child, code)).map(applyOptions(ast, code));
+      const children = ast.source_.map((child) => enter(child)).map(applyOptions(ast, enter));
       const alignment = ast.arguments_.alignment;
       if (alignment === 'stack') {
         return strudel.stack(...children);
@@ -84,7 +83,7 @@ export function patternifyAST(ast, code) {
       if (alignment === 'polymeter') {
         // polymeter
         const stepsPerCycle = ast.arguments_.stepsPerCycle
-          ? patternifyAST(ast.arguments_.stepsPerCycle, code).fmap((x) => strudel.Fraction(x))
+          ? enter(ast.arguments_.stepsPerCycle).fmap((x) => strudel.Fraction(x))
           : strudel.pure(strudel.Fraction(children.length > 0 ? children[0].__weight : 1));
 
         const aligned = children.map((child) => child.fast(stepsPerCycle.fmap((x) => x.div(child.__weight || 1))));
@@ -111,7 +110,7 @@ export function patternifyAST(ast, code) {
       return pat;
     }
     case 'element': {
-      return patternifyAST(ast.source_, code);
+      return enter(ast.source_);
     }
     case 'atom': {
       if (ast.source_ === '~') {
@@ -121,66 +120,82 @@ export function patternifyAST(ast, code) {
         console.warn('no location for', ast);
         return ast.source_;
       }
-      const { start, end } = ast.location_;
       const value = !isNaN(Number(ast.source_)) ? Number(ast.source_) : ast.source_;
-      // the following line expects the shapeshifter append .withMiniLocation
-      // because location_ is only relative to the mini string, but we need it relative to whole code
-      // make sure whitespaces are not part of the highlight:
-      const actual = code?.split('').slice(start.offset, end.offset).join('');
-      const [offsetStart = 0, offsetEnd = 0] = actual
-        ? actual.split(ast.source_).map((p) => p.split('').filter((c) => c === ' ').length)
-        : [];
-      return strudel
-        .pure(value)
-        .withLocation(
-          [start.line, start.column + offsetStart, start.offset + offsetStart],
-          [start.line, end.column - offsetEnd, end.offset - offsetEnd],
-        );
+      if (offset === -1) {
+        // skip location handling (used when getting leaves to avoid confusion)
+        return strudel.pure(value);
+      }
+      const [from, to] = getLeafLocation(code, ast, offset);
+      return strudel.pure(value).withLoc(from, to);
     }
     case 'stretch':
-      return patternifyAST(ast.source_, code).slow(patternifyAST(ast.arguments_.amount, code));
-    /* case 'scale':
-      let [tonic, scale] = Scale.tokenize(ast.arguments_.scale);
-      const intervals = Scale.get(scale).intervals;
-      const pattern = patternifyAST(ast.source_);
-      tonic = tonic || 'C4';
-      // console.log('scale', ast, pattern, tonic, scale);
-      console.log('tonic', tonic);
-      return pattern.fmap((step: any) => {
-        step = Number(step);
-        if (isNaN(step)) {
-          console.warn(`scale step "${step}" not a number`);
-          return step;
-        }
-        const octaves = Math.floor(step / intervals.length);
-        const mod = (n: number, m: number): number => (n < 0 ? mod(n + m, m) : n % m);
-        const index = mod(step, intervals.length); // % with negative numbers. e.g. -1 % 3 = 2
-        const interval = Interval.add(intervals[index], Interval.fromSemitones(octaves * 12));
-        return Note.transpose(tonic, interval || '1P');
-      }); */
-    /* case 'struct':
-      // TODO:
-      return strudel.silence; */
+      return enter(ast.source_).slow(enter(ast.arguments_.amount));
     default:
       console.warn(`node type "${ast.type_}" not implemented -> returning silence`);
       return strudel.silence;
   }
 }
 
+// takes quoted mini string + leaf node within, returns source location of node (whitespace corrected)
+export const getLeafLocation = (code, leaf, globalOffset = 0) => {
+  // value is expected without quotes!
+  const { start, end } = leaf.location_;
+  const actual = code?.split('').slice(start.offset, end.offset).join('');
+  // make sure whitespaces are not part of the highlight
+  const [offsetStart = 0, offsetEnd = 0] = actual
+    ? actual.split(leaf.source_).map((p) => p.split('').filter((c) => c === ' ').length)
+    : [];
+  return [start.offset + offsetStart + globalOffset, end.offset - offsetEnd + globalOffset];
+};
+
+// takes quoted mini string, returns ast
+export const mini2ast = (code) => krill.parse(code);
+
+// takes quoted mini string, returns all nodes that are leaves
+export const getLeaves = (code) => {
+  const ast = mini2ast(code);
+  let leaves = [];
+  patternifyAST(
+    ast,
+    code,
+    (node) => {
+      if (node.type_ === 'atom') {
+        leaves.push(node);
+      }
+    },
+    -1,
+  );
+  return leaves;
+};
+
+// takes quoted mini string, returns locations [fromCol,toCol] of all leaf nodes
+export const getLeafLocations = (code, offset = 0) => {
+  return getLeaves(code).map((l) => getLeafLocation(code, l, offset));
+};
+
 // mini notation only (wraps in "")
 export const mini = (...strings) => {
   const pats = strings.map((str) => {
     const code = `"${str}"`;
-    const ast = krill.parse(code);
+    const ast = mini2ast(code);
     return patternifyAST(ast, code);
   });
   return strudel.sequence(...pats);
 };
 
+// turns str mini string (without quotes) into pattern
+// offset is the position of the mini string in the JS code
+// each leaf node will get .withLoc added
+// this function is used by the transpiler for double quoted strings
+export const m = (str, offset) => {
+  const code = `"${str}"`;
+  const ast = mini2ast(code);
+  return patternifyAST(ast, code, null, offset);
+};
+
 // includes haskell style (raw krill parsing)
 export const h = (string) => {
-  const ast = krill.parse(string);
-  // console.log('ast', ast);
+  const ast = mini2ast(string);
   return patternifyAST(ast, string);
 };
 

packages/mini/package.json

@@ -37,6 +37,6 @@
   "devDependencies": {
     "peggy": "^3.0.2",
     "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

packages/mini/test/mini.test.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 { mini } from '../mini.mjs';
+import { getLeafLocation, getLeafLocations, mini, mini2ast } from '../mini.mjs';
 import '@strudel.cycles/core/euclid.mjs';
 import { describe, expect, it } from 'vitest';
 
@@ -185,3 +185,36 @@ describe('mini', () => {
     expect(minV('a:b c:d:[e:f] g')).toEqual([['a', 'b'], ['c', 'd', ['e', 'f']], 'g']);
   });
 });
+
+describe('getLeafLocation', () => {
+  it('gets location of leaf nodes', () => {
+    const code = '"bd sd"';
+    const ast = mini2ast(code);
+
+    const bd = ast.source_[0].source_;
+    expect(getLeafLocation(code, bd)).toEqual([1, 3]);
+
+    const sd = ast.source_[1].source_;
+    expect(getLeafLocation(code, sd)).toEqual([4, 6]);
+  });
+});
+
+describe('getLeafLocations', () => {
+  it('gets locations of leaf nodes', () => {
+    expect(getLeafLocations('"bd sd"')).toEqual([
+      [1, 3], // bd columns
+      [4, 6], // sd columns
+    ]);
+    expect(getLeafLocations('"bd*2 [sd cp]"')).toEqual([
+      [1, 3], // bd columns
+      [7, 9], // sd columns
+      [10, 12], // cp columns
+      [4, 5], // "2" columns
+    ]);
+    expect(getLeafLocations('"bd*<2 3>"')).toEqual([
+      [1, 3], // bd columns
+      [5, 6], // "2" columns
+      [7, 8], // "3" columns
+    ]);
+  });
+});

packages/react/examples/nano-repl/src/App.jsx

@@ -82,9 +82,10 @@ function App() {
     code,
     defaultOutput: webaudioOutput,
     getTime,
+    afterEval: ({ meta }) => setMiniLocations(meta.miniLocations),
   });
 
-  useHighlighting({
+  const { setMiniLocations } = useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),

packages/react/package.json

@@ -42,6 +42,7 @@
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
+    "@strudel/codemirror": "workspace:*",
     "@uiw/codemirror-themes": "^4.19.16",
     "@uiw/react-codemirror": "^4.19.16",
     "react-hook-inview": "^4.5.0"

packages/react/src/components/CodeMirror6.jsx

@@ -1,100 +1,31 @@
-import React, { useMemo } from 'react';
-import _CodeMirror from '@uiw/react-codemirror';
-import { EditorView, Decoration } from '@codemirror/view';
-import { StateField, StateEffect } from '@codemirror/state';
-import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
-import strudelTheme from '../themes/strudel-theme';
-import './style.css';
-import { useCallback } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
-import { strudelAutocomplete } from './Autocomplete';
-import { vim } from '@replit/codemirror-vim';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import { EditorView } from '@codemirror/view';
 import { emacs } from '@replit/codemirror-emacs';
+import { vim } from '@replit/codemirror-vim';
+import _CodeMirror from '@uiw/react-codemirror';
+import React, { useCallback, useMemo } from 'react';
+import strudelTheme from '../themes/strudel-theme';
+import { strudelAutocomplete } from './Autocomplete';
+import {
+  highlightExtension,
+  flashField,
+  flash,
+  highlightMiniLocations,
+  updateMiniLocations,
+} from '@strudel/codemirror';
+import './style.css';
 
-export const setFlash = StateEffect.define();
-const flashField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(flash, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setFlash)) {
-          if (e.value) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
-            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
-          } else {
-            flash = Decoration.set([]);
-          }
-        }
-      }
-      return flash;
-    } catch (err) {
-      console.warn('flash error', err);
-      return flash;
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
+export { flash, highlightMiniLocations, updateMiniLocations };
 
-export const flash = (view) => {
-  view.dispatch({ effects: setFlash.of(true) });
-  setTimeout(() => {
-    view.dispatch({ effects: setFlash.of(false) });
-  }, 200);
-};
-
-export const setHighlights = StateEffect.define();
-const highlightField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(highlights, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setHighlights)) {
-          const { haps } = e.value;
-          const marks =
-            haps
-              .map((hap) =>
-                (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || e.value.color;
-                  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
-                  }
-                  let mark;
-                  if (color) {
-                    mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
-                  } else {
-                    mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
-                  }
-                  return mark.range(from, to);
-                }),
-              )
-              .flat()
-              .filter(Boolean) || [];
-          highlights = Decoration.set(marks, true);
-        }
-      }
-      return highlights;
-    } catch (err) {
-      // console.warn('highlighting error', err);
-      return Decoration.set([]);
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-const staticExtensions = [javascript(), highlightField, flashField];
+const staticExtensions = [javascript(), flashField, highlightExtension];
 
 export default function CodeMirror({
   value,
   onChange,
   onViewChanged,
   onSelectionChange,
+  onDocChange,
   theme,
   keybindings,
   isLineNumbersDisplayed,
@@ -102,8 +33,6 @@ export default function CodeMirror({
   isLineWrappingEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
-  options,
-  editorDidMount,
 }) {
   const handleOnChange = useCallback(
     (value) => {
@@ -121,6 +50,9 @@ export default function CodeMirror({
 
   const handleOnUpdate = useCallback(
     (viewUpdate) => {
+      if (viewUpdate.docChanged && onDocChange) {
+        onDocChange?.(viewUpdate);
+      }
       if (viewUpdate.selectionSet && onSelectionChange) {
         onSelectionChange?.(viewUpdate.state.selection);
       }
@@ -152,6 +84,8 @@ export default function CodeMirror({
     return _extensions;
   }, [keybindings, isAutoCompletionEnabled, isLineWrappingEnabled]);
 
+  const basicSetup = useMemo(() => ({ lineNumbers: isLineNumbersDisplayed }), [isLineNumbersDisplayed]);
+
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
@@ -161,108 +95,8 @@ export default function CodeMirror({
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
-        basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
+        basicSetup={basicSetup}
       />
     </div>
   );
 }
-
-let parenMark;
-export const markParens = (editor, data) => {
-  const v = editor.getDoc().getValue();
-  const marked = getCurrentParenArea(v, data);
-  parenMark?.clear();
-  parenMark = editor.getDoc().markText(...marked, { css: 'background-color: #00007720' }); //
-};
-
-// returns { line, ch } from absolute character offset
-export function offsetToPosition(offset, code) {
-  const lines = code.split('\n');
-  let line = 0;
-  let ch = 0;
-  for (let i = 0; i < offset; i++) {
-    if (ch === lines[line].length) {
-      line++;
-      ch = 0;
-    } else {
-      ch++;
-    }
-  }
-  return { line, ch };
-}
-
-// returns absolute character offset from { line, ch }
-export function positionToOffset(position, code) {
-  const lines = code.split('\n');
-  if (position.line > lines.length) {
-    // throw new Error('positionToOffset: position.line > lines.length');
-    return 0;
-  }
-  let offset = 0;
-  for (let i = 0; i < position.line; i++) {
-    offset += lines[i].length + 1;
-  }
-  offset += position.ch;
-  return offset;
-}
-
-// given code and caret position, the functions returns the indices of the parens we are in
-export function getCurrentParenArea(code, caretPosition) {
-  const caret = positionToOffset(caretPosition, code);
-  let open, i, begin, end;
-  // walk left
-  i = caret;
-  open = 0;
-  while (i > 0) {
-    if (code[i - 1] === '(') {
-      open--;
-    } else if (code[i - 1] === ')') {
-      open++;
-    }
-    if (open === -1) {
-      break;
-    }
-    i--;
-  }
-  begin = i;
-  // walk right
-  i = caret;
-  open = 0;
-  while (i < code.length) {
-    if (code[i] === '(') {
-      open--;
-    } else if (code[i] === ')') {
-      open++;
-    }
-    if (open === 1) {
-      break;
-    }
-    i++;
-  }
-  end = i;
-  return [begin, end].map((o) => offsetToPosition(o, code));
-}
-
-/* 
-export const markEvent = (editor) => (time, event) => {
-  const locs = event.context.locations;
-  if (!locs || !editor) {
-    return;
-  }
-  const col = event.context?.color || '#FFCA28';
-  // mark active event
-  const marks = locs.map(({ start, end }) =>
-    editor.getDoc().markText(
-      { line: start.line - 1, ch: start.column },
-      { line: end.line - 1, ch: end.column },
-      //{ css: 'background-color: #FFCA28; color: black' } // background-color is now used by parent marking
-      { css: 'outline: 1px solid ' + col + '; box-sizing:border-box' },
-      //{ css: `background-color: ${col};border-radius:5px` },
-    ),
-  );
-  //Tone.Transport.schedule(() => { // problem: this can be cleared by scheduler...
-  setTimeout(() => {
-    marks.forEach((mark) => mark.clear());
-    // }, '+' + event.duration * 0.5);
-  }, event.duration * 1000);
-}; */

packages/react/src/components/MiniRepl.jsx

@@ -71,6 +71,7 @@ export function MiniRepl({
     evalOnMount,
     drawContext,
     drawTime,
+    afterEval: ({ meta }) => setMiniLocations(meta.miniLocations),
   });
 
   const [view, setView] = useState();
@@ -84,7 +85,7 @@ export function MiniRepl({
     }
     return isVisible || wasVisible.current;
   }, [isVisible, hideOutsideView]);
-  useHighlighting({
+  const { setMiniLocations } = useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),

packages/react/src/hooks/useHighlighting.mjs

@@ -1,10 +1,18 @@
-import { useEffect, useRef } from 'react';
-import { setHighlights } from '../components/CodeMirror6';
+import { useEffect, useRef, useState } from 'react';
+import { highlightMiniLocations, updateMiniLocations } from '../components/CodeMirror6';
 const round = (x) => Math.round(x * 1000) / 1000;
 
 function useHighlighting({ view, pattern, active, getTime }) {
   const highlights = useRef([]);
   const lastEnd = useRef(0);
+
+  const [miniLocations, setMiniLocations] = useState([]);
+  useEffect(() => {
+    if (view) {
+      updateMiniLocations(view, miniLocations);
+    }
+  }, [view, miniLocations]);
+
   useEffect(() => {
     if (view) {
       if (pattern && active) {
@@ -20,9 +28,9 @@ function useHighlighting({ view, pattern, active, getTime }) {
             highlights.current = highlights.current.filter((hap) => hap.endClipped > 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 }) }); // highlight all still active + new active haps
+            highlightMiniLocations(view, begin, highlights.current);
           } catch (err) {
-            view.dispatch({ effects: setHighlights.of({ haps: [] }) });
+            highlightMiniLocations(view, 0, []);
           }
           frame = requestAnimationFrame(updateHighlights);
         });
@@ -31,10 +39,12 @@ function useHighlighting({ view, pattern, active, getTime }) {
         };
       } else {
         highlights.current = [];
-        view.dispatch({ effects: setHighlights.of({ haps: [] }) });
+        highlightMiniLocations(view, 0, highlights.current);
       }
     }
   }, [pattern, active, view]);
+
+  return { setMiniLocations };
 }
 
 export default useHighlighting;

packages/react/src/index.js

@@ -1,6 +1,6 @@
 // import 'tailwindcss/tailwind.css';
 
-export { default as CodeMirror, flash } from './components/CodeMirror6'; // !SSR
+export { default as CodeMirror, flash, updateMiniLocations, highlightMiniLocations } from './components/CodeMirror6'; // !SSR
 export * from './components/MiniRepl'; // !SSR
 export { default as useHighlighting } from './hooks/useHighlighting'; // !SSR
 export { default as useStrudel } from './hooks/useStrudel'; // !SSR

packages/react/vite.config.js

@@ -22,8 +22,6 @@ export default defineConfig({
         ...Object.keys(peerDependencies),
         ...Object.keys(dependencies),
         // TODO: find out which of below names are obsolete now
-        '@strudel.cycles/tone',
-        '@strudel.cycles/eval',
         '@strudel.cycles/transpiler',
         'acorn',
         '@strudel.cycles/core',

packages/tonal/index.mjs

@@ -3,3 +3,5 @@ import './voicings.mjs';
 
 export * from './tonal.mjs';
 export * from './voicings.mjs';
+
+import './ireal.mjs';

packages/tonal/ireal.mjs

@@ -0,0 +1,523 @@
+// explore them here: https://codesandbox.io/s/voicing-explorer-ireal-47tkx5?file=/src/ireal.js:0-16036
+// scraped via: https://codesandbox.io/s/ireal-midi-scraper-2-gjz2mr?file=/src/index.js
+
+export const simple = {
+  2: ['1P 5P 8P 9M', '1P 5P 8P 9M 12P', '5P 8P 9M 12P'],
+  5: ['1P 5P 8P 12P', '5P 8P 12P 15P'],
+  6: ['1P 5P 6M 8P 10M', '1P 5P 8P 10M 13M', '3M 5P 8P 10M 13M', '5P 8P 10M 12P 13M'],
+  7: [
+    '1P 5P 7m 8P 10M',
+    '1P 7m 8P 10M 12P',
+    '3M 7m 8P 10M 12P',
+    '3M 7m 8P 10M 14m',
+    '3M 7m 10M 12P 15P',
+    '7m 10M 12P 14m 15P',
+    '7m 10M 12P 15P 17M',
+  ],
+  9: [
+    '1P 5P 7m 9M 10M',
+    '1P 7m 9M 10M 12P',
+    '3M 7m 8P 9M 12P',
+    '7m 9M 10M 14m 15P',
+    '3M 7m 8P 12P 16M',
+    '7m 10M 12P 15P 16M',
+  ],
+  11: ['1P 5P 7m 9M 11P', '5P 7m 8P 9M 11P', '7m 8P 9M 11P 12P', '7m 8P 11P 12P 16M'],
+  13: ['1P 6M 7m 9M 10M', '1P 7m 9M 10M 13M', '3M 7m 8P 9M 13M', '7m 8P 9M 10M 13M', '7m 9M 10M 13M 15P'],
+  69: ['1P 5P 6M 9M 10M', '1P 5P 9M 10M 13M', '3M 5P 8P 9M 13M', '5P 8P 9M 10M 13M'],
+  add9: ['1P 5P 8P 9M 10M', '1P 5P 9M 10M 12P', '3M 8P 9M 10M 12P', '3M 8P 9M 12P 15P', '5P 8P 9M 12P 17M'],
+  '+': [
+    '1P 3M 6m 8P 10M',
+    '1P 6m 8P 10M 13m',
+    '3M 6m 8P 10M 13m',
+    '3M 8P 10M 13m 15P',
+    '6m 8P 10M 13m 15P',
+    '6m 10M 13m 15P 17M',
+  ],
+  o: ['1P 5d 8P 10m 12d', '3m 8P 10m 12d 15P', '5d 8P 10m 12d 15P'],
+  h: [
+    '3m 5d 7m 8P 10m',
+    '1P 5d 7m 10m 12d',
+    '3m 7m 8P 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 7m 8P 10m 14m',
+    '5d 8P 10m 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  sus: ['1P 4P 5P 8P', '1P 4P 5P 8P 11P', '5P 8P 11P 12P', '5P 8P 11P 12P 15P'],
+  '^': ['1P 5P 8P 10M', '1P 5P 8P 10M 12P', '3M 5P 8P 10M 12P', '3M 8P 10M 12P 15P', '5P 8P 10M 12P 15P'],
+  '-': ['1P 3m 5P 8P 10m', '1P 5P 8P 10m 12P', '3m 5P 8P 10m 12P', '5P 8P 10m 12P 15P'],
+  '^7': ['1P 5P 7M 10M 12P', '1P 10M 12P 14M', '3M 8P 10M 12P 14M', '5P 8P 10M 12P 14M', '5P 8P 10M 14M 17M'],
+  '-7': [
+    '1P 3m 5P 7m 10m',
+    '1P 5P 7m 10m 12P',
+    '3m 7m 8P 10m 12P',
+    '3m 7m 8P 10m 14m',
+    '5P 7m 8P 10m 14m',
+    '7m 10m 12P 14m 15P',
+    '5P 8P 10m 14m 17m',
+    '7m 10m 12P 15P 17m',
+  ],
+  '7sus': ['1P 5P 7m 8P 11P', '5P 8P 11P 12P 14m', '7m 8P 11P 12P 14m', '7m 11P 12P 14m 18P'],
+  h7: [
+    '3m 5d 7m 8P 10m',
+    '1P 5d 7m 10m 12d',
+    '1P 7m 10m 12d',
+    '3m 7m 8P 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 7m 8P 10m 14m',
+    '5d 8P 10m 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  o7: [
+    '1P 6M 8P 10m 12d',
+    '1P 6M 10m 12d 13M',
+    '3m 8P 10m 12d 13M',
+    '3m 8P 12d 13M 15P',
+    '5d 10m 12d 13M 15P',
+    '5d 10m 13M 15P 17m',
+    '6M 12d 13M 15P 17m',
+    '6M 12d 15P 17m 19d',
+  ],
+  '^9': [
+    '1P 5P 7M 9M 10M',
+    '1P 7M 9M 10M 12P',
+    '3M 7M 8P 9M 12P',
+    '3M 7M 8P 12P 16M',
+    '5P 8P 10M 14M 16M',
+    '7M 8P 10M 12P 16M',
+  ],
+  '^13': ['1P 6M 7M 9M 10M', '1P 7M 9M 10M 13M', '3M 7M 8P 9M 13M', '3M 7M 8P 13M 16M', '7M 8P 10M 13M 16M'],
+  '^7#11': ['1P 5P 7M 10M 12d', '3M 7M 8P 10M 12d', '1P 7M 10M 12d 14M', '3M 7M 8P 12d 14M', '5P 8P 10M 12d 14M'],
+  '^9#11': ['1P 3M 5d 7M 9M', '1P 7M 9M 10M 12d', '3M 7M 8P 9M 12d', '3M 8P 9M 12d 14M'],
+  '^7#5': ['1P 6m 7M 10M 13m', '3M 7M 8P 10M 13m', '6m 7M 8P 10M 13m'],
+  '-6': [
+    '1P 3m 5P 6M 8P',
+    '1P 5P 6M 8P 10m',
+    '3m 5P 6M 8P 10m',
+    '1P 5P 8P 10m 13M',
+    '3m 5P 8P 10m 13M',
+    '5P 8P 10m 12P 13M',
+    '5P 8P 10m 13M 15P',
+  ],
+  '-69': [
+    '1P 3m 5P 6M 9M',
+    '3m 5P 6M 8P 9M',
+    '3m 6M 9M 10m 12P',
+    '1P 5P 9M 10m 13M',
+    '3m 5P 8P 9M 13M',
+    '5P 8P 9M 10m 13M',
+    '5P 8P 10m 13M 16M',
+  ],
+  '-^7': ['1P 3m 5P 7M 10m', '1P 5P 7M 10m 12P', '3m 7M 8P 10m 12P', '5P 7M 8P 10m 14M', '5P 8P 10m 14M 17m'],
+  '-^9': ['1P 3m 5P 7M 9M', '1P 7M 9M 10m 12P', '3m 7M 8P 9M 12P', '5P 8P 9M 10m 14M'],
+  '-9': [
+    '1P 3m 5P 7m 9M',
+    '3m 5P 7m 8P 9M',
+    '3m 7m 8P 9M 12P',
+    '5P 8P 9M 10m 14m',
+    '3m 7m 9M 12P 15P',
+    '7m 10m 12P 15P 16M',
+  ],
+  '-add9': ['1P 2M 3m 5P 8P', '1P 3m 5P 9M', '3m 5P 8P 9M 12P', '5P 8P 9M 10m 12P'],
+  '-11': [
+    '1P 3m 7m 9M 11P',
+    '3m 7m 8P 9M 11P',
+    '1P 4P 7m 10m 12P',
+    '5P 8P 11P 14m',
+    '3m 7m 9M 11P 15P',
+    '5P 8P 11P 14m 16M',
+    '7m 10m 12P 15P 18P',
+  ],
+  '-7b5': [
+    '3m 5d 7m 8P 10m',
+    '1P 7m 10m 12d',
+    '1P 5d 7m 10m 12d',
+    '3m 7m 8P 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 7m 8P 10m 14m',
+    '5d 8P 10m 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  h9: ['1P 7m 9M 10m 12d', '3m 7m 8P 9M 12d', '5d 8P 9M 10m 14m', '7m 10m 12d 15P 16M'],
+  '-b6': ['1P 5P 6m 8P 10m', '1P 5P 8P 10m 13m', '3m 5P 8P 10m 13m', '5P 8P 10m 13m', '5P 8P 10m 13m 15P'],
+  '-#5': ['1P 6m 8P 10m 13m', '3m 6m 8P 10m 13m', '6m 8P 10m 13m 15P'],
+  '7b9': ['1P 3M 7m 9m 10M', '3M 7m 8P 9m 10M', '3M 7m 8P 9m 14m', '7m 9m 10M 14m 15P'],
+  '7#9': ['1P 3M 7m 10m', '3M 7m 8P 10m 14m', '7m 10m 10M 14m 15P'],
+  '7#11': ['1P 3M 7m 10M 12d', '3M 7m 8P 10M 12d', '7m 10M 12d 14m 15P'],
+  '7b5': ['1P 3M 7m 10M 12d', '3M 7m 8P 10M 12d', '7m 10M 12d 14m 15P'],
+  '7#5': ['1P 3M 7m 10M 13m', '3M 7m 8P 10M 13m', '3M 7m 8P 13m 14m', '7m 10M 13m 14m 15P'],
+  '9#11': ['1P 7m 9M 10M 12d', '3M 7m 8P 9M 12d', '7m 10M 12d 15P 16M'],
+  '9b5': ['1P 7m 9M 10M 12d', '3M 7m 8P 9M 12d', '7m 10M 12d 15P 16M'],
+  '9#5': ['1P 7m 9M 10M 13m', '3M 7m 9M 10M 13m', '3M 7m 9M 13m 14m', '7m 10M 13m 14m 16M', '7m 10M 13m 16M 17M'],
+  '7b13': ['1P 3M 7m 10M 13m', '3M 7m 8P 10M 13m', '3M 7m 8P 13m 14m', '7m 10M 13m 14m 15P'],
+  '7#9#5': ['1P 3M 7m 10m 13m', '3M 7m 10m 13m 15P', '7m 10M 13m 15P 17m'],
+  '7#9b5': ['1P 3M 7m 10m 12d', '3M 7m 10m 12d 15P', '7m 10M 12d 15P 17m'],
+  '7#9#11': ['1P 3M 7m 10m 12d', '3M 7m 10m 12d 15P', '7m 10M 12d 15P 17m'],
+  '7b9#11': ['1P 7m 9m 10M 12d', '3M 7m 8P 9m 12d', '7m 8P 10M 12d 16m'],
+  '7b9b5': ['1P 7m 9m 10M 12d', '3M 7m 8P 9m 12d', '7m 8P 10M 12d 16m'],
+  '7b9#5': ['1P 7m 9m 10M 13m', '3M 7m 8P 9m 13m', '7m 9m 10M 13m 15P'],
+  '7b9#9': ['1P 3M 7m 9m 10m', '3M 7m 8P 9m 10m', '7m 8P 10M 16m 17m'],
+  '7b9b13': ['1P 7m 9m 10M 13m', '3M 7m 8P 9m 13m', '7m 9m 10M 13m 15P'],
+  '7alt': [
+    '3M 7m 8P 9m 12d',
+    '1P 7m 10m 10M 13m',
+    '3M 7m 8P 10m 13m',
+    '3M 7m 9m 12d 15P',
+    '3M 7m 10m 13m 15P',
+    '7m 10M 12d 15P 17m',
+    '7m 10M 13m 15P 17m',
+  ],
+  '13#11': ['1P 6M 7m 10M 12d', '3M 7m 9M 12d 13M', '7m 10M 12d 13M 16M'],
+  '13b9': ['1P 3M 6M 7m 9m', '1P 6M 7m 9m 10M', '3M 7m 9m 10M 13M', '3M 7m 10M 13M 16m', '7m 10M 13M 16m 17M'],
+  '13#9': ['1P 3M 6M 7m 10m', '3M 7m 8P 10m 13M', '7m 10M 13M 14m 17m'],
+  '7b9sus': ['1P 5P 7m 9m 11P', '5P 7m 8P 9m 11P', '7m 8P 11P 14m 16m'],
+  '7susadd3': ['1P 4P 5P 7m 10M', '5P 8P 10M 11P 14m', '7m 11P 12P 15P 17M'],
+  '9sus': ['1P 5P 7m 9M 11P', '5P 7m 8P 9M 11P', '7m 8P 9M 11P 12P', '7m 8P 11P 12P 16M'],
+  '13sus': ['1P 4P 6M 7m 9M', '1P 7m 9M 11P 13M', '5P 7m 9M 11P 13M', '7m 9M 11P 13M 15P'],
+  '7b13sus': ['1P 5P 7m 11P 13m', '5P 7m 8P 11P 13m', '7m 11P 13m 14m 15P'],
+};
+
+export const complex = {
+  2: ['1P 5P 6M 8P 9M', '1P 5P 8P 9M 12P', '5P 8P 9M 12P 13M', '5P 8P 9M 12P 15P'],
+  5: ['1P 5P 8P 12P', '1P 5P 8P 9M 12P', '5P 8P 12P 15P', '5P 8P 12P 15P 16M'],
+  6: ['1P 5P 6M 9M 10M', '1P 5P 9M 10M 13M', '3M 5P 9M 10M 13M', '5P 8P 9M 10M 13M', '3M 6M 9M 12P 15P'],
+  7: [
+    '1P 5P 7m 8P 10M',
+    '1P 7m 8P 10M 12P',
+    '3M 7m 8P 10M 12P',
+    '3M 7m 8P 10M 14m',
+    '3M 7m 10M 12P 15P',
+    '7m 10M 12P 14m 15P',
+    '7m 10M 12P 15P 17M',
+    '7m 10M 14m 17M 19P',
+  ],
+  9: [
+    '1P 6M 7m 9M 10M',
+    '3M 7m 9M 10M 12P',
+    '1P 7m 9M 10M 13M',
+    '3M 7m 9M 10M 13M',
+    '3M 7m 9M 12P 15P',
+    '7m 10M 12P 13M 16M',
+    '7m 10M 13M 16M 17M',
+    '7m 10M 13M 16M 19P',
+  ],
+  11: [
+    '1P 4P 6M 7m 9M',
+    '1P 5P 7m 9M 11P',
+    '4P 6M 7m 9M 11P',
+    '5P 8P 9M 11P 14m',
+    '7m 9M 11P 13M 15P',
+    '7m 11P 12P 14m 18P',
+  ],
+  13: [
+    '3M 7m 9M 10M 13M',
+    '3M 7m 9M 13M 15P',
+    '3M 7m 10M 13M 16M',
+    '7m 10M 12P 13M 16M',
+    '7m 10M 13M 16M 17M',
+    '7m 10M 13M 16M 19P',
+  ],
+  69: ['1P 5P 6M 9M 10M', '1P 5P 9M 10M 13M', '3M 5P 9M 10M 13M', '5P 8P 9M 10M 13M', '3M 6M 9M 12P 15P'],
+  add9: [
+    '1P 5P 8P 9M 10M',
+    '1P 5P 9M 10M 12P',
+    '3M 8P 9M 10M 12P',
+    '3M 8P 9M 12P 15P',
+    '5P 8P 9M 10M 15P',
+    '5P 8P 9M 12P 17M',
+  ],
+  '+': [
+    '1P 6m 8P 9M 10M',
+    '1P 6m 8P 10M 13m',
+    '3M 8P 9M 10M 13m',
+    '3M 8P 10M 13m 15P',
+    '6m 10M 13m 15P 16M',
+    '6m 10M 13m 15P 17M',
+  ],
+  o: [
+    '1P 6M 8P 10m 12d',
+    '1P 6M 10m 12d 13M',
+    '3m 8P 10m 12d 13M',
+    '3m 8P 12d 13M 15P',
+    '5d 10m 12d 13M 15P',
+    '5d 10m 13M 15P 17m',
+    '6M 12d 13M 15P 17m',
+    '6M 12d 15P 17m 19d',
+  ],
+  h: [
+    '1P 5d 7m 10m 11P',
+    '3m 5d 7m 8P 11P',
+    '5d 7m 8P 10m 11P',
+    '1P 7m 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 8P 10m 11P 14m',
+    '7m 10m 11P 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  sus: [
+    '1P 4P 5P 8P 9M',
+    '1P 4P 5P 8P 11P',
+    '1P 5P 8P 9M 11P',
+    '5P 8P 9M 11P 12P',
+    '5P 8P 11P 12P 13M',
+    '5P 8P 11P 13M 15P',
+  ],
+  '^': [
+    '1P 3M 5P 6M 9M',
+    '1P 5P 8P 10M 12P',
+    '3M 5P 9M 10M 12P',
+    '1P 5P 8P 10M 13M',
+    '3M 8P 10M 13M 15P',
+    '5P 9M 10M 12P 15P',
+  ],
+  '-': [
+    '1P 3m 5P 8P 10m',
+    '1P 3m 5P 9M 11P',
+    '3m 5P 8P 9M 11P',
+    '5P 8P 9M 10m 11P',
+    '1P 5P 9M 10m 12P',
+    '3m 5P 8P 10m 12P',
+    '5P 8P 10m 12P 15P',
+  ],
+  '^7': [
+    '1P 6M 7M 9M 10M',
+    '3M 7M 9M 10M 12P',
+    '1P 7M 9M 10M 13M',
+    '3M 7M 9M 10M 13M',
+    '3M 7M 9M 12P 13M',
+    '3M 7M 9M 13M 14M',
+    '3M 7M 10M 13M 16M',
+    '7M 10M 13M 14M 16M',
+    '7M 10M 13M 16M 17M',
+    '7M 10M 13M 16M 19P',
+  ],
+  '-7': [
+    '1P 3m 5P 7m 9M',
+    '1P 3m 5P 7m 10m',
+    '1P 5P 7m 10m 11P',
+    '3m 7m 8P 10m 11P',
+    '1P 5P 7m 10m 12P',
+    '3m 7m 9M 10m 12P',
+    '3m 7m 8P 10m 14m',
+    '5P 7m 9M 10m 14m',
+    '7m 10m 11P 14m 15P',
+    '7m 10m 12P 15P 16M',
+    '5P 8P 11P 14m 17m',
+    '7m 10m 12P 15P 17m',
+  ],
+  '7sus': [
+    '1P 4P 6M 7m 9M',
+    '1P 5P 7m 9M 11P',
+    '4P 6M 7m 9M 11P',
+    '5P 8P 9M 11P 14m',
+    '7m 9M 11P 13M 15P',
+    '7m 11P 12P 14m 18P',
+  ],
+  h7: [
+    '1P 5d 7m 10m 11P',
+    '3m 5d 7m 8P 11P',
+    '5d 7m 8P 10m 11P',
+    '1P 7m 10m 12d',
+    '3m 7m 8P 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 8P 10m 11P 14m',
+    '7m 10m 11P 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  o7: [
+    '1P 6M 8P 10m 12d',
+    '1P 6M 10m 12d 13M',
+    '3m 8P 10m 12d 13M',
+    '3m 8P 12d 13M 15P',
+    '5d 10m 12d 13M 15P',
+    '5d 10m 13M 15P 17m',
+    '6M 12d 13M 15P 17m',
+    '6M 12d 15P 17m 19d',
+  ],
+  '^9': [
+    '1P 6M 7M 9M 10M',
+    '1P 7M 9M 10M 13M',
+    '3M 7M 9M 10M 13M',
+    '3M 7M 9M 12P 13M',
+    '3M 7M 8P 9M 13M',
+    '3M 7M 9M 13M 14M',
+    '3M 7M 10M 13M 16M',
+    '7M 10M 13M 14M 16M',
+    '7M 10M 13M 16M 17M',
+    '7M 10M 13M 16M 19P',
+  ],
+  '^13': [
+    '1P 6M 7M 9M 10M',
+    '1P 7M 9M 10M 13M',
+    '3M 7M 9M 12P 13M',
+    '3M 7M 9M 10M 13M',
+    '3M 7M 8P 9M 13M',
+    '3M 7M 9M 13M 14M',
+    '3M 7M 10M 13M 16M',
+    '7M 10M 13M 14M 16M',
+    '7M 10M 13M 16M 17M',
+    '7M 10M 13M 16M 19P',
+  ],
+  '^7#11': [
+    '1P 3M 5d 7M 9M',
+    '1P 7M 9M 10M 12d',
+    '3M 7M 9M 10M 12d',
+    '3M 7M 9M 12d 13M',
+    '3M 7M 10M 12d 14M',
+    '7M 10M 12d 13M 14M',
+    '7M 10M 12d 13M 16M',
+    '7M 10M 12d 14M 17M',
+  ],
+  '^9#11': [
+    '1P 3M 5d 7M 9M',
+    '1P 7M 9M 10M 12d',
+    '3M 7M 9M 10M 12d',
+    '3M 7M 9M 12d 13M',
+    '3M 7M 9M 12d 14M',
+    '7M 10M 12d 14M 16M',
+    '7M 10M 12d 13M 16M',
+  ],
+  '^7#5': ['1P 6m 7M 10M 13m', '3M 7M 9M 10M 13m', '3M 7M 10M 13m 14M', '7M 10M 13m 14M 16M', '7M 10M 13m 14M 17M'],
+  '-6': [
+    '1P 3m 5P 6M 9M',
+    '3m 5P 6M 8P 9M',
+    '1P 5P 6M 10m 11P',
+    '3m 5P 6M 8P 11P',
+    '1P 5P 9M 10m 13M',
+    '3m 5P 8P 9M 13M',
+    '5P 8P 10m 11P 13M',
+    '5P 8P 10m 13M 16M',
+  ],
+  '-69': [
+    '1P 3m 5P 6M 9M',
+    '3m 5P 6M 8P 9M',
+    '3m 6M 9M 10m 12P',
+    '1P 5P 9M 10m 13M',
+    '3m 5P 8P 9M 13M',
+    '5P 8P 9M 10m 13M',
+    '5P 8P 10m 13M 16M',
+  ],
+  '-^7': [
+    '1P 3m 5P 7M 9M',
+    '1P 5P 7M 10m 11P',
+    '3m 7M 9M 10m 11P',
+    '3m 7M 9M 10m 12P',
+    '3m 7M 9M 12P 14M',
+    '7M 10m 11P 12P 14M',
+    '7M 10m 12P 14M 16M',
+  ],
+  '-^9': [
+    '1P 3m 5P 7M 9M',
+    '1P 5P 7M 10m 11P',
+    '3m 7M 9M 10m 11P',
+    '3m 7M 9M 10m 12P',
+    '3m 7M 9M 12P 14M',
+    '7M 10m 11P 12P 14M',
+    '7M 10m 12P 14M 16M',
+  ],
+  '-9': [
+    '1P 3m 5P 7m 9M',
+    '1P 3m 7m 9M 11P',
+    '3m 7m 9M 10m 11P',
+    '3m 7m 9M 10m 12P',
+    '3m 7m 9M 10m 14m',
+    '3m 7m 9M 12P 15P',
+    '7m 10m 11P 14m 16M',
+    '7m 10m 12P 16M 18P',
+  ],
+  '-add9': ['1P 2M 3m 5P 8P', '1P 3m 5P 9M', '3m 5P 8P 9M 12P', '5P 8P 9M 10m 12P'],
+  '-11': [
+    '3m 5P 7m 9M 11P',
+    '7m 9M 10m 11P',
+    '1P 4P 7m 10m 12P',
+    '3m 7m 9M 11P 12P',
+    '7m 9M 10m 11P 12P',
+    '3m 7m 9M 11P 14m',
+    '4P 10m 12P 14m',
+    '5P 8P 11P 14m',
+    '5P 8P 11P 14m 16M',
+    '7m 10m 12P 16M 18P',
+    '7m 10m 11P 16M 21m',
+  ],
+  '-7b5': [
+    '1P 5d 7m 10m 11P',
+    '3m 5d 7m 8P 11P',
+    '5d 7m 8P 10m 11P',
+    '1P 7m 10m 12d',
+    '3m 7m 8P 10m 12d',
+    '3m 7m 8P 12d 14m',
+    '5d 8P 10m 11P 14m',
+    '7m 10m 11P 12d 14m',
+    '7m 10m 12d 14m 15P',
+    '5d 8P 10m 14m 17m',
+  ],
+  h9: [
+    '3m 5d 7m 9M 11P',
+    '1P 7m 9M 10m 12d',
+    '3m 7m 9M 12d 14m',
+    '5d 8P 9M 10m 14m',
+    '7m 10m 11P 12d 14m',
+    '7m 10m 12d 14m 16M',
+  ],
+  '-b6': ['1P 3m 5P 6m 8P', '3m 5P 8P 11P 13m', '5P 8P 10m 11P 13m'],
+  '-#5': ['1P 6m 8P 10m 13m', '3m 6m 8P 11P 13m', '6m 8P 10m 13m 15P'],
+  '7b9': ['1P 3M 7m 9m 10M', '3M 7m 8P 9m 10M', '3M 7m 8P 9m 14m', '7m 9m 10M 14m 15P'],
+  '7#9': ['1P 3M 7m 10m', '3M 7m 10m 10M 12P', '3M 7m 10m 12P 14m', '7m 10M 12P 14m 17m'],
+  '7#11': ['1P 3M 7m 9M 12d', '3M 7m 9M 12d 13M', '7m 10M 12d 13M 16M'],
+  '7b5': ['1P 3M 7m 9M 12d', '3M 7m 9M 12d 13M', '7m 10M 12d 13M 16M'],
+  '7#5': ['1P 3M 7m 10M 13m', '3M 7m 8P 10M 13m', '3M 7m 8P 13m 14m', '7m 10M 13m 14m 15P', '7m 10M 13m 14m 17M'],
+  '9#11': ['1P 7m 9M 10M 12d', '3M 7m 8P 9M 12d', '7m 10M 12d 15P 16M'],
+  '9b5': ['1P 7m 9M 10M 12d', '3M 7m 8P 9M 12d', '7m 10M 12d 15P 16M'],
+  '9#5': ['1P 7m 9M 10M 13m', '3M 7m 9M 10M 13m', '3M 7m 9M 13m 14m', '7m 10M 13m 14m 16M', '7m 10M 13m 16M 17M'],
+  '7b13': ['1P 3M 7m 10M 13m', '3M 7m 8P 10M 13m', '3M 7m 8P 13m 14m', '7m 10M 13m 14m 15P', '7m 10M 13m 14m 17M'],
+  '7#9#5': ['3M 7m 10m 10M 13m', '3M 7m 10m 13m 14m', '7m 10M 13m 14m 17m'],
+  '7#9b5': ['3M 7m 10m 10M 12d', '3M 7m 10m 12d 14m', '7m 10M 12d 14m 17m'],
+  '7#9#11': ['3M 7m 10m 10M 12d', '3M 7m 10m 12d 14m', '7m 10M 12d 14m 17m'],
+  '7b9#11': ['3M 7m 9m 10M 12d', '3M 7m 9m 12d 14m', '7m 8P 10M 12d 16m', '7m 10M 12d 14m 16m'],
+  '7b9b5': ['3M 7m 9m 10M 12d', '3M 7m 9m 12d 14m', '7m 8P 10M 12d 16m', '7m 10M 12d 14m 16m'],
+  '7b9#5': ['1P 7m 9m 10M 13m', '3M 7m 9m 10M 13m', '3M 7m 10M 13m 16m', '7m 10M 13m 14m 16m', '7m 10M 13m 16m 17M'],
+  '7b9#9': ['1P 3M 7m 9m 10m', '3M 7m 10m 13m 16m', '7m 10M 13m 16m 17m'],
+  '7b9b13': ['1P 7m 9m 10M 13m', '3M 7m 9m 10M 13m', '3M 7m 10M 13m 16m', '7m 10M 13m 14m 16m', '7m 10M 13m 16m 17M'],
+  '7alt': [
+    '3M 7m 8P 10m 13m',
+    '3M 7m 9m 12d 13m',
+    '3M 7m 9m 10m 13m',
+    '3M 7m 10m 13m 14m',
+    '3M 7m 9m 12d 14m',
+    '3M 7m 10m 13m 15P',
+    '3M 7m 10m 13m 16m',
+    '7m 10M 12d 14m 16m',
+    '7m 10M 12d 13m 16m',
+    '7m 10M 13m 15P 17m',
+    '7m 10M 13m 16m 17m',
+    '7m 10M 13m 16m 19d',
+  ],
+  '13#11': ['3M 7m 9M 12d 13M', '7m 10M 12d 13M 16M'],
+  '13b9': ['3M 7m 9m 10M 13M', '3M 7m 10M 13M 16m', '7m 10M 13M 16m 17M'],
+  '13#9': ['3M 7m 10m 10M 13M', '7m 10M 13M 14m 17m'],
+  '7b9sus': ['1P 5P 7m 9m 11P', '5P 7m 8P 9m 11P', '7m 8P 11P 14m 16m'],
+  '7susadd3': ['1P 4P 5P 7m 10M', '5P 8P 10M 11P 14m', '7m 11P 12P 15P 17M'],
+  '9sus': [
+    '1P 4P 6M 7m 9M',
+    '1P 5P 7m 9M 11P',
+    '4P 6M 7m 9M 11P',
+    '5P 8P 9M 11P 14m',
+    '7m 9M 11P 13M 15P',
+    '7m 11P 12P 14m 18P',
+  ],
+  '13sus': [
+    '1P 4P 6M 7m 9M',
+    '1P 7m 9M 11P 13M',
+    '4P 7m 9M 11P 13M',
+    '7m 9M 11P 13M 15P',
+    '7m 11P 13M 14m 16M',
+    '7m 11P 13M 16M 18P',
+  ],
+  '7b13sus': ['1P 5P 7m 11P 13m', '5P 7m 8P 11P 13m', '7m 11P 13m 14m 15P'],
+};

packages/tonal/package.json

@@ -38,6 +38,6 @@
   },
   "devDependencies": {
     "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

packages/tonal/test/tonleiter.test.mjs

@@ -0,0 +1,152 @@
+/*
+tonleiter.test.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tonal/test/tonleiter.test.mjs>
+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 { describe, test, expect } from 'vitest';
+import {
+  Step,
+  Note,
+  transpose,
+  pc2chroma,
+  rotateChroma,
+  chroma2pc,
+  tokenizeChord,
+  note2pc,
+  note2oct,
+  midi2note,
+  renderVoicing,
+  scaleStep,
+} from '../tonleiter.mjs';
+
+describe('tonleiter', () => {
+  test('Step ', () => {
+    expect(Step.tokenize('#11')).toEqual(['#', 11]);
+    expect(Step.tokenize('b13')).toEqual(['b', 13]);
+    expect(Step.tokenize('bb6')).toEqual(['bb', 6]);
+    expect(Step.tokenize('b3')).toEqual(['b', 3]);
+    expect(Step.tokenize('3')).toEqual(['', 3]);
+    expect(Step.tokenize('10')).toEqual(['', 10]);
+    // expect(Step.tokenize('asdasd')).toThrow();
+    expect(Step.accidentals('b3')).toEqual(-1);
+    expect(Step.accidentals('#11')).toEqual(1);
+  });
+  test('Note', () => {
+    expect(Note.tokenize('C##')).toEqual(['C', '##']);
+    expect(Note.tokenize('Bb')).toEqual(['B', 'b']);
+    expect(Note.accidentals('C#')).toEqual(1);
+    expect(Note.accidentals('C##')).toEqual(2);
+    expect(Note.accidentals('Eb')).toEqual(-1);
+    expect(Note.accidentals('Bbb')).toEqual(-2);
+  });
+  test('transpose', () => {
+    expect(transpose('F#', '3')).toEqual('A#');
+    expect(transpose('C', '3')).toEqual('E');
+    expect(transpose('D', '3')).toEqual('F#');
+    expect(transpose('E', '3')).toEqual('G#');
+    expect(transpose('Eb', '3')).toEqual('G');
+    expect(transpose('Ebb', '3')).toEqual('Gb');
+  });
+  test('pc2chroma', () => {
+    expect(pc2chroma('C')).toBe(0);
+    expect(pc2chroma('C#')).toBe(1);
+    expect(pc2chroma('C##')).toBe(2);
+    expect(pc2chroma('D')).toBe(2);
+    expect(pc2chroma('Db')).toBe(1);
+    expect(pc2chroma('Dbb')).toBe(0);
+    expect(pc2chroma('bb')).toBe(10);
+    expect(pc2chroma('f')).toBe(5);
+    expect(pc2chroma('c')).toBe(0);
+  });
+  test('rotateChroma', () => {
+    expect(rotateChroma(0, 1)).toBe(1);
+    expect(rotateChroma(0, -1)).toBe(11);
+    expect(rotateChroma(11, 1)).toBe(0);
+    expect(rotateChroma(11, 13)).toBe(0);
+  });
+  test('chroma2pc', () => {
+    expect(chroma2pc(0)).toBe('C');
+    expect(chroma2pc(1)).toBe('Db');
+    expect(chroma2pc(1, true)).toBe('C#');
+    expect(chroma2pc(2)).toBe('D');
+    expect(chroma2pc(3)).toBe('Eb');
+  });
+  test('tokenizeChord', () => {
+    expect(tokenizeChord('Cm7')).toEqual(['C', 'm7', undefined]);
+    expect(tokenizeChord('C#m7')).toEqual(['C#', 'm7', undefined]);
+    expect(tokenizeChord('Bb^7')).toEqual(['Bb', '^7', undefined]);
+    expect(tokenizeChord('Bb^7/F')).toEqual(['Bb', '^7', 'F']);
+  });
+  test('note2pc', () => {
+    expect(note2pc('C5')).toBe('C');
+    expect(note2pc('C52')).toBe('C');
+    expect(note2pc('Bb3')).toBe('Bb');
+    expect(note2pc('F')).toBe('F');
+  });
+  test('note2oct', () => {
+    expect(note2oct('C5')).toBe(5);
+    expect(note2oct('Bb3')).toBe(3);
+    expect(note2oct('C7')).toBe(7);
+    expect(note2oct('C10')).toBe(10);
+  });
+  test('midi2note', () => {
+    expect(midi2note(60)).toBe('C4');
+    expect(midi2note(61)).toBe('Db4');
+    expect(midi2note(61, true)).toBe('C#4');
+  });
+  test('scaleStep', () => {
+    expect(scaleStep([60, 63, 67], 0)).toBe(60);
+    expect(scaleStep([60, 63, 67], 1)).toBe(63);
+    expect(scaleStep([60, 63, 67], 2)).toBe(67);
+    expect(scaleStep([60, 63, 67], 3)).toBe(72);
+    expect(scaleStep([60, 63, 67], 4)).toBe(75);
+    expect(scaleStep([60, 63, 67], -1)).toBe(55);
+    expect(scaleStep([60, 63, 67], -2)).toBe(51);
+    expect(scaleStep([60, 63, 67], -3)).toBe(48);
+    expect(scaleStep([60, 63, 67], -4)).toBe(43);
+  });
+  test('renderVoicing', () => {
+    const dictionary = {
+      m7: [
+        '3 7 10 14', // b3 5 b7 9
+        '10 14 15 19', // b7 9 b3 5
+      ],
+    };
+    expect(renderVoicing({ chord: 'Em7', anchor: 'Bb4', dictionary, mode: 'below' })).toEqual([
+      'G3',
+      'B3',
+      'D4',
+      'Gb4',
+    ]);
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'D5', dictionary, mode: 'below' })).toEqual([
+      'Eb4',
+      'G4',
+      'Bb4',
+      'D5',
+    ]);
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'G5', dictionary, mode: 'below' })).toEqual([
+      'Bb4',
+      'D5',
+      'Eb5',
+      'G5',
+    ]);
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'g5', dictionary, mode: 'below' })).toEqual([
+      'Bb4',
+      'D5',
+      'Eb5',
+      'G5',
+    ]);
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'g5', dictionary, mode: 'below', n: 0 })).toEqual([70]); // Bb4
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'g5', dictionary, mode: 'below', n: 1 })).toEqual([74]); // D5
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'g5', dictionary, mode: 'below', n: 4 })).toEqual([82]); // Bb5
+    expect(renderVoicing({ chord: 'Cm7', anchor: 'g5', dictionary, mode: 'below', offset: 1 })).toEqual([
+      'Eb5',
+      'G5',
+      'Bb5',
+      'D6',
+    ]);
+    // expect(voiceBelow('G4', 'Cm7', voicingDictionary)).toEqual(['Bb3', 'D4', 'Eb4', 'G4']);
+    // TODO: test with offset
+  });
+});

packages/tonal/tonal.mjs

@@ -127,18 +127,18 @@ export const scaleTranspose = register('scaleTranspose', function (offset /* : n
  *
  * The root note defaults to octave 3, if no octave number is given.
  *
- * @memberof Pattern
  * @name scale
  * @param {string} scale Name of scale
  * @returns Pattern
  * @example
- * "0 2 4 6 4 2".scale("C2:major").note()
+ * n("0 2 4 6 4 2").scale("C:major")
  * @example
- * "0 2 4 6 4 2"
- * .scale("C2:<major minor>")
- * .note()
+ * n("[0,7] 4 [2,7] 4")
+ * .scale("C:<major minor>/2")
+ * .s("piano")
  * @example
- * "0 1 2 3 4 5 6 7".rev().scale("C2:<major minor>").note()
+ * n(rand.range(0,12).segment(8).round())
+ * .scale("C:ritusen")
  * .s("folkharp")
  */
 

packages/tonal/tonleiter.mjs

@@ -0,0 +1,190 @@
+import { isNote, isNoteWithOctave, _mod, noteToMidi, tokenizeNote } from '@strudel.cycles/core';
+import { Interval } from '@tonaljs/tonal';
+
+// https://codesandbox.io/s/stateless-voicings-g2tmz0?file=/src/lib.js:0-2515
+
+const flats = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
+const pcs = ['c', 'db', 'd', 'eb', 'e', 'f', 'gb', 'g', 'ab', 'a', 'bb', 'b'];
+const sharps = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+const accs = { b: -1, '#': 1 };
+
+export const pc2chroma = (pc) => {
+  const [letter, ...rest] = pc.split('');
+  return pcs.indexOf(letter.toLowerCase()) + rest.reduce((sum, sign) => sum + accs[sign], 0);
+};
+
+export const rotateChroma = (chroma, steps) => (chroma + (steps % 12) + 12) % 12;
+
+export const chroma2pc = (chroma, sharp = false) => {
+  return (sharp ? sharps : flats)[chroma];
+};
+
+export function tokenizeChord(chord) {
+  const match = (chord || '').match(/^([A-G][b#]*)([^/]*)[/]?([A-G][b#]*)?$/);
+  if (!match) {
+    // console.warn('could not tokenize chord', chord);
+    return [];
+  }
+  return match.slice(1);
+}
+export const note2pc = (note) => note.match(/^[A-G][#b]?/i)[0];
+export const note2oct = (note) => tokenizeNote(note)[2];
+
+export const note2chroma = (note) => {
+  return pc2chroma(note2pc(note));
+};
+
+// TODO: test
+export const midi2chroma = (midi) => midi % 12;
+
+// TODO: test and use in voicing function
+export const pitch2chroma = (x, defaultOctave) => {
+  if (isNoteWithOctave(x)) {
+    return note2chroma(x);
+  }
+  if (isNote(x)) {
+    //pc
+    return pc2chroma(x, defaultOctave);
+  }
+  if (typeof x === 'number') {
+    // expect midi
+    return midi2chroma(x);
+  }
+};
+
+export const step2semitones = (x) => {
+  let num = Number(x);
+  if (!isNaN(num)) {
+    return num;
+  }
+  return Interval.semitones(x);
+};
+
+export const x2midi = (x) => {
+  if (typeof x === 'number') {
+    return x;
+  }
+  if (typeof x === 'string') {
+    return noteToMidi(x);
+  }
+};
+
+// duplicate: util.mjs (does not support sharp flag)
+export const midi2note = (midi, sharp = false) => {
+  const oct = Math.floor(midi / 12) - 1;
+  const pc = (sharp ? sharps : flats)[midi % 12];
+  return pc + oct;
+};
+
+export function scaleStep(notes, offset, octaves = 1) {
+  notes = notes.map((note) => (typeof note === 'string' ? noteToMidi(note) : note));
+  const octOffset = Math.floor(offset / notes.length) * octaves * 12;
+  offset = _mod(offset, notes.length);
+  return notes[offset] + octOffset;
+}
+
+// different ways to resolve the note to compare the anchor to (see renderVoicing)
+let modeTarget = {
+  below: (v) => v.slice(-1)[0],
+  duck: (v) => v.slice(-1)[0],
+  above: (v) => v[0],
+};
+
+export function renderVoicing({ chord, dictionary, offset = 0, n, mode = 'below', anchor = 'c5', octaves = 1 }) {
+  const [root, symbol] = tokenizeChord(chord);
+  const rootChroma = pc2chroma(root);
+  anchor = anchor?.note || anchor;
+  const anchorChroma = pitch2chroma(anchor);
+  const voicings = dictionary[symbol].map((voicing) =>
+    (typeof voicing === 'string' ? voicing.split(' ') : voicing).map(step2semitones),
+  );
+
+  let minDistance, bestIndex;
+  // calculate distances up from voicing top notes
+  let chromaDiffs = voicings.map((v, i) => {
+    const targetStep = modeTarget[mode](v);
+    const diff = _mod(anchorChroma - targetStep - rootChroma, 12);
+    if (minDistance === undefined || diff < minDistance) {
+      minDistance = diff;
+      bestIndex = i;
+    }
+    return diff;
+  });
+
+  const octDiff = Math.ceil(offset / voicings.length) * 12;
+  const indexWithOffset = _mod(bestIndex + offset, voicings.length);
+  const voicing = voicings[indexWithOffset];
+  const targetStep = modeTarget[mode](voicing);
+  const anchorMidi = noteToMidi(anchor, 4) - chromaDiffs[indexWithOffset] + octDiff;
+
+  const voicingMidi = voicing.map((v) => anchorMidi - targetStep + v);
+  let notes = voicingMidi.map((n) => midi2note(n));
+
+  if (mode === 'duck') {
+    notes = notes.filter((_, i) => voicingMidi[i] !== noteToMidi(anchor));
+  }
+  if (n !== undefined) {
+    return [scaleStep(notes, n, octaves)];
+  }
+  return notes;
+}
+
+// https://github.com/tidalcycles/strudel/blob/14184993d0ee7d69c47df57ac864a1a0f99a893f/packages/tonal/tonleiter.mjs
+const steps = [1, 0, 2, 0, 3, 4, 0, 5, 0, 6, 0, 7];
+const notes = ['C', '', 'D', '', 'E', 'F', '', 'G', '', 'A', '', 'B'];
+const noteLetters = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+
+export const accidentalOffset = (accidentals) => {
+  return accidentals.split('#').length - accidentals.split('b').length;
+};
+
+const accidentalString = (offset) => {
+  if (offset < 0) {
+    return 'b'.repeat(-offset);
+  }
+  if (offset > 0) {
+    return '#'.repeat(offset);
+  }
+  return '';
+};
+
+export const Step = {
+  tokenize(step) {
+    const matches = step.match(/^([#b]*)([1-9][0-9]*)$/);
+    if (!matches) {
+      throw new Error(`Step.tokenize: not a valid step: ${step}`);
+    }
+    const [accidentals, stepNumber] = matches.slice(1);
+    return [accidentals, parseInt(stepNumber)];
+  },
+  accidentals(step) {
+    return accidentalOffset(Step.tokenize(step)[0]);
+  },
+};
+
+export const Note = {
+  // TODO: support octave numbers
+  tokenize(note) {
+    return [note[0], note.slice(1)];
+  },
+  accidentals(note) {
+    return accidentalOffset(this.tokenize(note)[1]);
+  },
+};
+
+// TODO: support octave numbers
+export function transpose(note, step) {
+  // example: E, 3
+  const stepNumber = Step.tokenize(step)[1]; // 3
+  const noteLetter = Note.tokenize(note)[0]; // E
+  const noteIndex = noteLetters.indexOf(noteLetter); // 2 "E is C+2"
+  const targetNote = noteLetters[(noteIndex + stepNumber - 1) % 8]; // G "G is a third above E"
+  const rootIndex = notes.indexOf(noteLetter); // 4 "E is 4 semitones above C"
+  const targetIndex = notes.indexOf(targetNote); // 7 "G is 7 semitones above C"
+  const indexOffset = targetIndex - rootIndex; // 3 (E to G is normally a 3 semitones)
+  const stepIndex = steps.indexOf(stepNumber); // 4 ("3" is normally 4 semitones)
+  const offsetAccidentals = accidentalString(Step.accidentals(step) + Note.accidentals(note) + stepIndex - indexOffset); // "we need to add a # to to the G to make it a major third from E"
+  return [targetNote, offsetAccidentals].join('');
+}
+
+//Note("Bb3").transpose("c3")

packages/tonal/voicings.mjs

@@ -5,7 +5,9 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { stack, register } from '@strudel.cycles/core';
+import { renderVoicing } from './tonleiter.mjs';
 import _voicings from 'chord-voicings';
+import { complex, simple } from './ireal.mjs';
 const { dictionaryVoicing, minTopNoteDiff } = _voicings.default || _voicings; // parcel module resolution fuckup
 
 const lefthand = {
@@ -49,10 +51,33 @@ const triads = {
   aug: ['1P 3m 5A', '3m 5A 8P', '5A 8P 10m'],
 };
 
+const defaultDictionary = {
+  // triads
+  '': ['1P 3M 5P', '3M 5P 8P', '5P 8P 10M'],
+  M: ['1P 3M 5P', '3M 5P 8P', '5P 8P 10M'],
+  m: ['1P 3m 5P', '3m 5P 8P', '5P 8P 10m'],
+  o: ['1P 3m 5d', '3m 5d 8P', '5d 8P 10m'],
+  aug: ['1P 3m 5A', '3m 5A 8P', '5A 8P 10m'],
+  // sevenths chords
+  m7: ['3m 5P 7m 9M', '7m 9M 10m 12P'],
+  7: ['3M 6M 7m 9M', '7m 9M 10M 13M'],
+  '^7': ['3M 5P 7M 9M', '7M 9M 10M 12P'],
+  69: ['3M 5P 6A 9M'],
+  m7b5: ['3m 5d 7m 8P', '7m 8P 10m 12d'],
+  '7b9': ['3M 6m 7m 9m', '7m 9m 10M 13m'],
+  '7b13': ['3M 6m 7m 9m', '7m 9m 10M 13m'],
+  o7: ['1P 3m 5d 6M', '5d 6M 8P 10m'],
+  '7#11': ['7m 9M 11A 13A'],
+  '7#9': ['3M 7m 9A'],
+  mM7: ['3m 5P 7M 9M', '7M 9M 10m 12P'],
+  m6: ['3m 5P 6M 9M', '6M 9M 10m 12P'],
+};
+
 export const voicingRegistry = {
-  lefthand: { dictionary: lefthand, range: ['F3', 'A4'] },
-  triads: { dictionary: triads },
-  guidetones: { dictionary: guidetones },
+  lefthand: { dictionary: lefthand, range: ['F3', 'A4'], mode: 'below', anchor: 'a4' },
+  triads: { dictionary: triads, mode: 'below', anchor: 'a4' },
+  guidetones: { dictionary: guidetones, mode: 'above', anchor: 'a4' },
+  default: { dictionary: defaultDictionary, mode: 'below', anchor: 'a4' },
 };
 export const setVoicingRange = (name, range) => addVoicings(name, voicingRegistry[name].dictionary, range);
 
@@ -81,6 +106,11 @@ export const addVoicings = (name, dictionary, range = ['F3', 'A4']) => {
   Object.assign(voicingRegistry, { [name]: { dictionary, range } });
 };
 
+// new call signature
+export const registerVoicings = (name, dictionary, options = {}) => {
+  Object.assign(voicingRegistry, { [name]: { dictionary, ...options } });
+};
+
 const getVoicing = (chord, dictionaryName, lastVoicing) => {
   const { dictionary, range } = voicingRegistry[dictionaryName];
   return dictionaryVoicing({
@@ -93,6 +123,7 @@ const getVoicing = (chord, dictionaryName, lastVoicing) => {
 };
 
 /**
+ * DEPRECATED: still works, but it is recommended you use .voicing instead (without s).
  * Turns chord symbols into voicings, using the smoothest voice leading possible.
  * Uses [chord-voicings package](https://github.com/felixroos/chord-voicings#chord-voicings).
  *
@@ -129,7 +160,76 @@ export const voicings = register('voicings', function (dictionary, pat) {
  */
 export const rootNotes = register('rootNotes', function (octave, pat) {
   return pat.fmap((value) => {
-    const root = value.match(/^([a-gA-G][b#]?).*$/)[1];
-    return root + octave;
+    const chord = value.chord || value;
+    const root = chord.match(/^([a-gA-G][b#]?).*$/)[1];
+    const note = root + octave;
+    return value.chord ? { note } : note;
   });
 });
+
+/**
+ * Turns chord symbols into voicings. You can use the following control params:
+ *
+ * - `chord`: Note, followed by chord symbol, e.g. C Am G7 Bb^7
+ * - `dict`: voicing dictionary to use, falls back to default dictionary
+ * - `anchor`: the note that is used to align the chord
+ * - `mode`: how the voicing is aligned to the anchor
+ *   - `below`: top note <= anchor
+ *   - `duck`: top note <= anchor, anchor excluded
+ *   - `above`: bottom note >= anchor
+ * - `offset`: whole number that shifts the voicing up or down to the next voicing
+ * - `n`: if set, the voicing is played like a scale. Overshooting numbers will be octaved
+ *
+ * All of the above controls are optional, except `chord`.
+ * If you pass a pattern of strings to voicing, they will be interpreted as chords.
+ *
+ * @name voicing
+ * @param {string} dictionary which voicing dictionary to use.
+ * @returns Pattern
+ * @example
+ * voicing("<C Am F G>")
+ * @example
+ * n("0 1 2 3 4 5 6 7").chord("<C Am F G>").voicing()
+ */
+export const voicing = register('voicing', function (pat) {
+  return pat
+    .fmap((value) => {
+      // destructure voicing controls out
+      value = typeof value === 'string' ? { chord: value } : value;
+      let { dictionary = 'default', chord, anchor, offset, mode, n, octaves, ...rest } = value;
+      dictionary =
+        typeof dictionary === 'string' ? voicingRegistry[dictionary] : { dictionary, mode: 'below', anchor: 'c5' };
+      let notes = renderVoicing({ ...dictionary, chord, anchor, offset, mode, n, octaves });
+
+      return stack(...notes)
+        .note()
+        .set(rest); // rest does not include voicing controls anymore!
+    })
+    .outerJoin();
+});
+
+export function voicingAlias(symbol, alias, setOrSets) {
+  setOrSets = !Array.isArray(setOrSets) ? [setOrSets] : setOrSets;
+  setOrSets.forEach((set) => {
+    set[alias] = set[symbol];
+  });
+}
+
+// no symbol = major chord
+voicingAlias('^', '', [simple, complex]);
+
+Object.keys(simple).forEach((symbol) => {
+  // add aliases for "-" === "m"
+  if (symbol.includes('-')) {
+    let alias = symbol.replace('-', 'm');
+    voicingAlias(symbol, alias, [complex, simple]);
+  }
+  // add aliases for "^" === "M"
+  if (symbol.includes('^')) {
+    let alias = symbol.replace('^', 'M');
+    voicingAlias(symbol, alias, [complex, simple]);
+  }
+});
+
+registerVoicings('ireal', simple);
+registerVoicings('ireal-ext', complex);

packages/tone/README.md

@@ -1,34 +0,0 @@
-# @strudel.cycles/tone
-
-This package adds Tone.js functions to strudel Patterns.
-
-## Deprecation Note
-
-This package will not be developed further. Consider using `@strudel.cycles/webaudio` as a replacement.
-
-## Install
-
-```sh
-npm i @strudel.cycles/tone --save
-```
-
-## Example
-
-The following example will create a pattern and play it back with tone.js:
-
-```js
-import { sequence, stack, State, TimeSpan } from '@strudel.cycles/core';
-import { Tone, polysynth, osc, out } from '@strudel.cycles/tone';
-
-const pattern = sequence('c3', ['eb3', stack('g3', 'bb3')]).tone(polysynth().set(osc('sawtooth4')).chain(out()));
-
-document.getElementById('play').addEventListener('click', async () => {
-  await Tone.start();
-  Tone.getTransport().stop();
-  const events = pattern.query(new State(new TimeSpan(0, 4))).filter((e) => e.whole.begin.equals(e.part.begin));
-  events.forEach((event) =>
-    Tone.getTransport().schedule((time) => event.context.onTrigger(time, event), event.whole.begin.valueOf()),
-  );
-  Tone.getTransport().start('+0.1');
-});
-```

packages/tone/index.mjs

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

packages/tone/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@strudel.cycles/tone",
-  "version": "0.8.0",
-  "description": "Tone.js API for strudel",
-  "main": "index.mjs",
-  "type": "module",
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@strudel.cycles/core": "workspace:*",
-    "tone": "^14.7.77"
-  },
-  "devDependencies": {
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
-  }
-}

packages/tone/test/tone.test.mjs

@@ -1,18 +0,0 @@
-/*
-tone.test.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/test/tone.test.mjs>
-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 '../tone.mjs';
-import { pure } from '@strudel.cycles/core';
-import { describe, it, expect } from 'vitest';
-
-describe('tone', () => {
-  it('Should have working tone function', () => {
-    // const s = synth().chain(out()); // TODO: mock audio context?
-    // assert.deepStrictEqual(s, new Tone.Synth().chain(out()));
-    const s = {};
-    expect(pure('c3').tone(s).firstCycleValues).toEqual(['c3']);
-  });
-});

packages/tone/tone.mjs

@@ -1,106 +0,0 @@
-/*
-tone.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/tone.mjs>
-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 { register } from '@strudel.cycles/core';
-import * as _Tone from 'tone';
-
-// import Tone from here, to make sure to get the same AudioContext
-export const Tone = _Tone;
-
-const {
-  Filter,
-  Gain,
-  Synth,
-  PolySynth,
-  MembraneSynth,
-  MetalSynth,
-  MonoSynth,
-  AMSynth,
-  DuoSynth,
-  FMSynth,
-  NoiseSynth,
-  PluckSynth,
-  Sampler,
-  getDestination,
-  Players,
-} = Tone;
-import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
-
-// "balanced" | "interactive" | "playback";
-// Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
-export const getDefaultSynth = () => {
-  const s = new PolySynth().chain(new Gain(0.5), getDestination());
-  s.set({
-    oscillator: { type: 'triangle' },
-    envelope: {
-      release: 0.01,
-    },
-  });
-  return s;
-};
-
-// what about
-// https://www.charlie-roberts.com/gibberish/playground/
-
-// with this function, you can play the pattern with any tone synth
-export const tone = register('tone', function (instrument, pat) {
-  return pat.onTrigger((time, hap) => {
-    let note;
-    let velocity = hap.context?.velocity ?? 0.75;
-    if (instrument instanceof PluckSynth) {
-      note = getPlayableNoteValue(hap);
-      instrument.triggerAttack(note, time);
-    } else if (instrument instanceof NoiseSynth) {
-      instrument.triggerAttackRelease(hap.duration.valueOf(), time); // noise has no value
-    } else if (instrument instanceof Sampler) {
-      note = getPlayableNoteValue(hap);
-      instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
-    } else if (instrument instanceof Players) {
-      if (!instrument.has(hap.value)) {
-        throw new Error(`name "${hap.value}" not defined for players`);
-      }
-      const player = instrument.player(hap.value);
-      // velocity ?
-      player.start(time);
-      player.stop(time + hap.duration.valueOf());
-    } else {
-      note = getPlayableNoteValue(hap);
-      instrument.triggerAttackRelease(note, hap.duration.valueOf(), time, velocity);
-    }
-  });
-});
-
-// synth helpers
-export const amsynth = (options) => new AMSynth(options);
-export const duosynth = (options) => new DuoSynth(options);
-export const fmsynth = (options) => new FMSynth(options);
-export const membrane = (options) => new MembraneSynth(options);
-export const metal = (options) => new MetalSynth(options);
-export const monosynth = (options) => new MonoSynth(options);
-export const noise = (options) => new NoiseSynth(options);
-export const pluck = (options) => new PluckSynth(options);
-export const polysynth = (options) => new PolySynth(options);
-export const sampler = (options, baseUrl) =>
-  new Promise((resolve) => {
-    const s = new Sampler(options, () => resolve(s), baseUrl);
-  });
-export const players = (options, baseUrl = '') => {
-  options = !baseUrl
-    ? options
-    : Object.fromEntries(Object.entries(options).map(([key, value]) => [key, baseUrl + value]));
-  return new Promise((resolve) => {
-    const s = new Players(options, () => resolve(s));
-  });
-};
-export const synth = (options) => new Synth(options);
-
-// effect helpers
-export const vol = (v) => new Gain(v);
-export const lowpass = (v) => new Filter(v, 'lowpass');
-export const highpass = (v) => new Filter(v, 'highpass');
-export const adsr = (a, d = 0.1, s = 0.4, r = 0.01) => ({ envelope: { attack: a, decay: d, sustain: s, release: r } });
-export const osc = (type) => ({ oscillator: { type } });
-export const out = () => getDestination();

packages/tone/vite.config.js

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

packages/transpiler/package.json

@@ -31,12 +31,13 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/mini": "workspace:*",
     "acorn": "^8.8.1",
     "escodegen": "^2.0.0",
     "estree-walker": "^3.0.1"
   },
   "devDependencies": {
     "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

packages/transpiler/test/transpiler.test.mjs

@@ -11,22 +11,20 @@ const simple = { wrapAsync: false, addReturn: false, simpleLocs: true };
 
 describe('transpiler', () => {
   it('wraps double quote string with mini and adds location', () => {
-    expect(transpiler('"c3"', simple)).toEqual("mini('c3').withMiniLocation(0, 4);");
-    expect(transpiler('stack("c3","bd sd")', simple)).toEqual(
-      "stack(mini('c3').withMiniLocation(6, 10), mini('bd sd').withMiniLocation(11, 18));",
-    );
+    expect(transpiler('"c3"', simple).output).toEqual("m('c3', 0);");
+    expect(transpiler('stack("c3","bd sd")', simple).output).toEqual("stack(m('c3', 6), m('bd sd', 11));");
   });
   it('wraps backtick string with mini and adds location', () => {
-    expect(transpiler('`c3`', simple)).toEqual("mini('c3').withMiniLocation(0, 4);");
+    expect(transpiler('`c3`', simple).output).toEqual("m('c3', 0);");
   });
   it('replaces note variables with note strings', () => {
-    expect(transpiler('seq(c3, d3)', simple)).toEqual("seq('c3', 'd3');");
+    expect(transpiler('seq(c3, d3)', simple).output).toEqual("seq('c3', 'd3');");
   });
   it('keeps tagged template literal as is', () => {
-    expect(transpiler('xxx`c3`', simple)).toEqual('xxx`c3`;');
+    expect(transpiler('xxx`c3`', simple).output).toEqual('xxx`c3`;');
   });
   it('supports top level await', () => {
-    expect(transpiler("await samples('xxx');", simple)).toEqual("await samples('xxx');");
+    expect(transpiler("await samples('xxx');", simple).output).toEqual("await samples('xxx');");
   });
   /*   it('parses dynamic imports', () => {
     expect(
@@ -36,4 +34,12 @@ describe('transpiler', () => {
       }),
     ).toEqual("const {default: foo} = await import('https://bar.com/foo.js');");
   }); */
+  it('collections locations', () => {
+    const { miniLocations } = transpiler(`s("bd", "hh oh")`, { ...simple, emitMiniLocations: true });
+    expect(miniLocations).toEqual([
+      [3, 5],
+      [9, 11],
+      [12, 14],
+    ]);
+  });
 });

packages/transpiler/transpiler.mjs

@@ -2,9 +2,10 @@ import escodegen from 'escodegen';
 import { parse } from 'acorn';
 import { walk } from 'estree-walker';
 import { isNoteWithOctave } from '@strudel.cycles/core';
+import { getLeafLocations } from '@strudel.cycles/mini';
 
 export function transpiler(input, options = {}) {
-  const { wrapAsync = false, addReturn = true, simpleLocs = false } = options;
+  const { wrapAsync = false, addReturn = true, emitMiniLocations = true } = options;
 
   let ast = parse(input, {
     ecmaVersion: 2022,
@@ -12,18 +13,27 @@ export function transpiler(input, options = {}) {
     locations: true,
   });
 
+  let miniLocations = [];
+  const collectMiniLocations = (value, node) => {
+    const leafLocs = getLeafLocations(`"${value}"`, node.start); // stimmt!
+    //const withOffset = leafLocs.map((offsets) => offsets.map((o) => o + node.start));
+    miniLocations = miniLocations.concat(leafLocs);
+  };
+
   walk(ast, {
-    enter(node, parent, prop, index) {
+    enter(node, parent /* , prop, index */) {
       if (isBackTickString(node, parent)) {
-        const { quasis, start, end } = node;
+        const { quasis } = node;
         const { raw } = quasis[0].value;
         this.skip();
-        return this.replace(miniWithLocation(raw, node, simpleLocs));
+        emitMiniLocations && collectMiniLocations(raw, node);
+        return this.replace(miniWithLocation(raw, node));
       }
       if (isStringWithDoubleQuotes(node)) {
-        const { value, start, end } = node;
+        const { value } = node;
         this.skip();
-        return this.replace(miniWithLocation(value, node, simpleLocs));
+        emitMiniLocations && collectMiniLocations(value, node);
+        return this.replace(miniWithLocation(value, node));
       }
       // TODO: remove pseudo note variables?
       if (node.type === 'Identifier' && isNoteWithOctave(node.name)) {
@@ -47,11 +57,14 @@ export function transpiler(input, options = {}) {
       argument: expression,
     };
   }
-  const output = escodegen.generate(ast);
+  let output = escodegen.generate(ast);
   if (wrapAsync) {
-    return `(async ()=>{${output}})()`;
+    output = `(async ()=>{${output}})()`;
   }
-  return output;
+  if (!emitMiniLocations) {
+    return { output };
+  }
+  return { output, miniLocations };
 }
 
 function isStringWithDoubleQuotes(node, locations, code) {
@@ -66,64 +79,18 @@ function isBackTickString(node, parent) {
   return node.type === 'TemplateLiteral' && parent.type !== 'TaggedTemplateExpression';
 }
 
-function miniWithLocation(value, node, simpleLocs) {
-  let locs;
-  const { start: fromOffset, end: toOffset } = node;
-  if (simpleLocs) {
-    locs = [
-      {
-        type: 'Literal',
-        value: fromOffset,
-      },
-      {
-        type: 'Literal',
-        value: toOffset,
-      },
-    ];
-  } else {
-    const {
-      loc: {
-        start: { line: fromLine, column: fromColumn },
-        end: { line: toLine, column: toColumn },
-      },
-    } = node;
-    locs = [
-      {
-        type: 'ArrayExpression',
-        elements: [fromLine, fromColumn, fromOffset].map((value) => ({
-          type: 'Literal',
-          value,
-        })),
-      },
-      {
-        type: 'ArrayExpression',
-        elements: [toLine, toColumn, toOffset].map((value) => ({
-          type: 'Literal',
-          value,
-        })),
-      },
-    ];
-  }
-  // with location
+function miniWithLocation(value, node) {
+  const { start: fromOffset } = node;
   return {
     type: 'CallExpression',
     callee: {
-      type: 'MemberExpression',
-      object: {
-        type: 'CallExpression',
-        callee: {
-          type: 'Identifier',
-          name: 'mini',
-        },
-        arguments: [{ type: 'Literal', value }],
-        optional: false,
-      },
-      property: {
-        type: 'Identifier',
-        name: 'withMiniLocation',
-      },
+      type: 'Identifier',
+      name: 'm',
     },
-    arguments: locs,
+    arguments: [
+      { type: 'Literal', value },
+      { type: 'Literal', value: fromOffset },
+    ],
     optional: false,
   };
 }

packages/webdirt/README.md

@@ -1,7 +0,0 @@
-# @strudel.cycles/webdirt
-
-This package adds [webdirt](https://github.com/dktr0/WebDirt) support to strudel!
-
-## Deprecation Note
-
-This package will not be developed further. Consider using `@strudel.cycles/webaudio` as a replacement.

packages/webdirt/index.mjs

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

packages/webdirt/makeSampleMap.sh

@@ -1,32 +0,0 @@
-#/bin/sh
-printf "{\n"
-dircount=0
-# for d in $searchRoot/*; do
-find $1 -mindepth 1 -maxdepth 1 -iname "*" | sort | while read d; do
-  if [ -d "$d" ]
-  then
-    if [ $dircount -ne 0 ]
-    then
-      printf ",\n"
-    fi
-    (( dircount++ ))
-    dirname=`basename $d`
-    printf "\"%s\": [" "$dirname"
-    search2=$searchRoot/$dirname/*.WAV
-    filecount=0
-    find "$d" -iname "*.wav" | sort | while read f; do
-    # for f in $search2; do
-      filename=$(printf %q "$f")
-      basename=${f##*/}
-      if [[ ${basename:0:1} != "." ]]; then
-        if [ $filecount -ne 0 ]; then
-          printf ","
-        fi
-        (( filecount++ ))
-        printf "\"%s/%s\"" "$dirname" "$basename"
-      fi
-    done
-    printf "]"
-  fi
-done
-printf "\n}\n"

packages/webdirt/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "@strudel.cycles/webdirt",
-  "version": "0.8.0",
-  "description": "WebDirt integration for Strudel",
-  "main": "index.mjs",
-  "type": "module",
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "WebDirt": "github:dktr0/WebDirt"
-  },
-  "devDependencies": {
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
-  }
-}

packages/webdirt/vite.config.js

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

packages/webdirt/webdirt.mjs

@@ -1,97 +0,0 @@
-import * as strudel from '@strudel.cycles/core';
-const { Pattern } = strudel;
-import * as WebDirt from 'WebDirt';
-//import { loadBuffer, getLoadedBuffer } from '@strudel.cycles/webaudio';
-
-let webDirt;
-
-/*
-example config:
-{
-    sampleMapUrl: 'EmuSP12.json',
-    sampleFolder: 'EmuSP12',
-}
-*/
-export function loadWebDirt(config) {
-  webDirt = new WebDirt.WebDirt(config);
-  webDirt.initializeWebAudio();
-}
-
-/**
- *
- * Uses [webdirt](https://github.com/dktr0/WebDirt) as output.
- *
- * <details>
- * <summary>show supported Webdirt controls</summary>
- *
- * - s :: String, -- name of sample bank
- * - n :: Int, -- number of sample within a bank
- * - {@link gain} :: Number, -- clamped from 0 to 2; 1 is default and full-scale
- * - overgain :: Number, -- additional gain added to gain to go past clamp at 2
- * - {@link pan} :: Number, -- range: 0 to 1
- * - nudge :: Number, -- nudge the time of the sample forwards/backwards in seconds
- * - {@link speed} :: Number, -- speed / pitch of the sample
- * - {@link unit} :: String
- * - note :: Number, -- pitch offset in semitones
- * - {@link begin} :: Number, -- cut from sample start, normalized
- * - {@link end} :: Number, -- cut from sample end, normalized
- * - {@link cut} :: Int, -- samples with same cut number will interupt each other
- * - {@link cutoff} :: Number, -- lowpass filter frequency
- * - {@link resonance} :: Number, -- lowpass filter resonance
- * - {@link hcutoff} :: Number, -- highpass filter frequency
- * - {@link hresonance} :: Number, -- highpass filter resonance
- * - {@link bandf} :: Number, -- bandpass filter frequency
- * - {@link bandq} :: Number, -- bandpass filter resonance
- * - {@link vowel} :: String, -- name of vowel ('a' | 'e' | 'i' | 'o' | 'u')
- * - delay :: Number, -- delay wet/dry mix
- * - delaytime :: Number, -- delay time in seconds
- * - delayfeedback :: Number, -- delay feedback
- * - {@link loop} :: Number, -- loop sample n times (relative to sample length)
- * - {@link crush} :: Number, -- bitcrusher (currently not working)
- * - {@link coarse} :: Number, -- coarse effect (currently not working)
- * - {@link shape} :: Number, -- (currently not working)
-
- *
- * </details>
- *
- * @name webdirt
- * @memberof Pattern
- * @returns Pattern
- * @example
- * s("bd*2 hh sd hh").n("<0 1>").webdirt()
- * @noAutocomplete
- */
-Pattern.prototype.webdirt = function () {
-  throw new Error('webdirt support has been dropped..');
-  // create a WebDirt object and initialize Web Audio context
-  /* return this.onTrigger(async (time, e, currentTime) => {
-    if (!webDirt) {
-      throw new Error('WebDirt not initialized!');
-    }
-    const deadline = time - currentTime;
-    const { s, n = 0, ...rest } = e.value || {};
-    if (!s) {
-      console.warn('Pattern.webdirt: no "s" was set!');
-    }
-    const samples = getLoadedSamples();
-    if (!samples?.[s]) {
-      // try default samples
-      webDirt.playSample({ s, n, ...rest }, deadline);
-      return;
-    }
-    if (!samples?.[s]) {
-      console.warn(`Pattern.webdirt: sample "${s}" not found in loaded samples`, samples);
-    } else {
-      const bank = samples[s];
-      const sampleUrl = bank[n % bank.length];
-      const buffer = getLoadedBuffer(sampleUrl);
-      if (!buffer) {
-        console.log(`Pattern.webdirt: load ${s}:${n} from ${sampleUrl}`);
-        loadBuffer(sampleUrl, webDirt.ac);
-      } else {
-        const msg = { buffer: { buffer }, ...rest };
-        webDirt.playSample(msg, deadline);
-      }
-    }
-  }); */
-};

packages/xen/package.json

@@ -34,6 +34,6 @@
   },
   "devDependencies": {
     "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vitest": "^0.33.0"
   }
 }

pnpm-lock.yaml

@@ -66,8 +66,8 @@ importers:
         specifier: ^5.8.1
         version: 5.9.0
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   packages/codemirror:
     dependencies:
@@ -107,8 +107,8 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   packages/core/examples/vite-vanilla-repl:
     dependencies:
@@ -178,40 +178,6 @@ importers:
 
   packages/embed: {}
 
-  packages/eval:
-    dependencies:
-      '@strudel.cycles/core':
-        specifier: workspace:*
-        version: link:../core
-      estraverse:
-        specifier: ^5.3.0
-        version: 5.3.0
-      shift-ast:
-        specifier: ^7.0.0
-        version: 7.0.0
-      shift-codegen:
-        specifier: ^8.1.0
-        version: 8.1.0
-      shift-parser:
-        specifier: ^8.0.0
-        version: 8.0.0
-      shift-spec:
-        specifier: ^2019.0.0
-        version: 2019.0.0
-      shift-traverser:
-        specifier: ^1.0.0
-        version: 1.0.0
-    devDependencies:
-      '@strudel.cycles/mini':
-        specifier: workspace:*
-        version: link:../mini
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.3)
-      vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
-
   packages/midi:
     dependencies:
       '@strudel.cycles/core':
@@ -241,8 +207,8 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   packages/osc:
     dependencies:
@@ -292,6 +258,9 @@ importers:
       '@strudel.cycles/webaudio':
         specifier: workspace:*
         version: link:../webaudio
+      '@strudel/codemirror':
+        specifier: workspace:*
+        version: link:../codemirror
       '@uiw/codemirror-themes':
         specifier: ^4.19.16
         version: 4.19.16(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
@@ -436,30 +405,17 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
-
-  packages/tone:
-    dependencies:
-      '@strudel.cycles/core':
-        specifier: workspace:*
-        version: link:../core
-      tone:
-        specifier: ^14.7.77
-        version: 14.7.77
-    devDependencies:
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.3)
-      vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   packages/transpiler:
     dependencies:
       '@strudel.cycles/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel.cycles/mini':
+        specifier: workspace:*
+        version: link:../mini
       acorn:
         specifier: ^8.8.1
         version: 8.8.2
@@ -474,8 +430,8 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   packages/web:
     dependencies:
@@ -522,25 +478,6 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
 
-  packages/webdirt:
-    dependencies:
-      '@strudel.cycles/core':
-        specifier: workspace:*
-        version: link:../core
-      '@strudel.cycles/webaudio':
-        specifier: workspace:*
-        version: link:../webaudio
-      WebDirt:
-        specifier: github:dktr0/WebDirt
-        version: github.com/dktr0/WebDirt/d2ce441e82a11036455e93643af5938a844eee27
-    devDependencies:
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.3)
-      vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
-
   packages/xen:
     dependencies:
       '@strudel.cycles/core':
@@ -551,8 +488,8 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
       vitest:
-        specifier: ^0.28.0
-        version: 0.28.0(@vitest/ui@0.28.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.28.0)
 
   website:
     dependencies:
@@ -2761,6 +2698,13 @@ packages:
       '@sinclair/typebox': 0.25.24
     dev: true
 
+  /@jest/schemas@29.6.0:
+    resolution: {integrity: sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+    dev: true
+
   /@jridgewell/gen-mapping@0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -2794,6 +2738,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
   /@jridgewell/trace-mapping@0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
@@ -3688,6 +3636,10 @@ packages:
     resolution: {integrity: sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==}
     dev: true
 
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+    dev: true
+
   /@supabase/functions-js@2.1.1:
     resolution: {integrity: sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==}
     dependencies:
@@ -4094,11 +4046,11 @@ packages:
   /@types/chai-subset@1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
-      '@types/chai': 4.3.4
+      '@types/chai': 4.3.5
     dev: true
 
-  /@types/chai@4.3.4:
-    resolution: {integrity: sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==}
+  /@types/chai@4.3.5:
+    resolution: {integrity: sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==}
     dev: true
 
   /@types/debug@4.1.7:
@@ -4174,10 +4126,6 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
 
-  /@types/node@18.11.18:
-    resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
-    dev: true
-
   /@types/node@18.16.3:
     resolution: {integrity: sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==}
 
@@ -4619,31 +4567,39 @@ packages:
       '@babel/plugin-transform-react-jsx-self': 7.21.0(@babel/core@7.21.5)
       '@babel/plugin-transform-react-jsx-source': 7.19.6(@babel/core@7.21.5)
       react-refresh: 0.14.0
-      vite: 4.3.3
+      vite: 4.3.3(@types/node@18.16.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.28.0:
-    resolution: {integrity: sha512-GSk1k9/W8JcVHFhCqVX/MdV9SbVbOV4p7U293f7f9xpNK17c1oA47OErsdL0a5lwJoS82RT4ZieTuE1Q9egeaQ==}
+  /@vitest/expect@0.33.0:
+    resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==}
     dependencies:
-      '@vitest/spy': 0.28.0
-      '@vitest/utils': 0.28.0
+      '@vitest/spy': 0.33.0
+      '@vitest/utils': 0.33.0
       chai: 4.3.7
     dev: true
 
-  /@vitest/runner@0.28.0:
-    resolution: {integrity: sha512-SXQO9aubp7Hg4DV4D5DP70wJ/4o0krH1gAPrSt+rhEZQbQvMaBJAHWOxEibwzLkklgoHreaMEvETFILkGQWXww==}
+  /@vitest/runner@0.33.0:
+    resolution: {integrity: sha512-UPfACnmCB6HKRHTlcgCoBh6ppl6fDn+J/xR8dTufWiKt/74Y9bHci5CKB8tESSV82zKYtkBJo9whU3mNvfaisg==}
     dependencies:
-      '@vitest/utils': 0.28.0
+      '@vitest/utils': 0.33.0
       p-limit: 4.0.0
-      pathe: 1.1.0
+      pathe: 1.1.1
     dev: true
 
-  /@vitest/spy@0.28.0:
-    resolution: {integrity: sha512-gYBDQIP0QDvxrscl2Id0BTbzLUbuAzFiFur3eHxH9Yt5cM6YCH/kxBrSHhmXTbu92UenLx53Gwq17u5N0zGNDQ==}
+  /@vitest/snapshot@0.33.0:
+    resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==}
     dependencies:
-      tinyspy: 1.0.2
+      magic-string: 0.30.1
+      pathe: 1.1.1
+      pretty-format: 29.6.1
+    dev: true
+
+  /@vitest/spy@0.33.0:
+    resolution: {integrity: sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==}
+    dependencies:
+      tinyspy: 2.1.1
     dev: true
 
   /@vitest/ui@0.28.0:
@@ -4656,14 +4612,12 @@ packages:
       sirv: 2.0.2
     dev: true
 
-  /@vitest/utils@0.28.0:
-    resolution: {integrity: sha512-Dt+jDZbwriZWzJ5Hi9nAUnz9IPgNb+ACE96tWiXPp/u9NmCYWIWcuNoUOYS8HQyGFz31GiNYGvaZ4ZEDjAgi1g==}
+  /@vitest/utils@0.33.0:
+    resolution: {integrity: sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==}
     dependencies:
-      cli-truncate: 3.1.0
-      diff: 5.1.0
+      diff-sequences: 29.4.3
       loupe: 2.3.6
-      picocolors: 1.0.0
-      pretty-format: 27.5.1
+      pretty-format: 29.6.1
     dev: true
 
   /@vscode/emmet-helper@2.8.6:
@@ -4732,6 +4686,12 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /acorn@8.10.0:
+    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /acorn@8.8.2:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
     engines: {node: '>=0.4.0'}
@@ -5577,14 +5537,6 @@ packages:
     resolution: {integrity: sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==}
     engines: {node: '>=6'}
 
-  /cli-truncate@3.1.0:
-    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      slice-ansi: 5.0.0
-      string-width: 5.1.2
-    dev: true
-
   /cli-width@3.0.0:
     resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
     engines: {node: '>= 10'}
@@ -6241,6 +6193,11 @@ packages:
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  /diff-sequences@29.4.3:
+    resolution: {integrity: sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
   /diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
@@ -6777,11 +6734,6 @@ packages:
     dependencies:
       estraverse: 5.3.0
 
-  /estraverse@4.2.0:
-    resolution: {integrity: sha512-VHvyaGnJy+FuGfcfaM7W7OZw4mQiKW73jPHwQXx2VnMSUBajYmytOT5sKEfsBvNPtGX6YDwcrGDz2eocoHg0JA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -8091,11 +8043,6 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  /is-fullwidth-code-point@4.0.0:
-    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
-    engines: {node: '>=12'}
-    dev: true
-
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -8866,6 +8813,13 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /magic-string@0.30.1:
+    resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
@@ -9719,13 +9673,13 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  /mlly@1.2.0:
-    resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
+  /mlly@1.4.0:
+    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
     dependencies:
-      acorn: 8.8.2
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      ufo: 1.1.1
+      acorn: 8.10.0
+      pathe: 1.1.1
+      pkg-types: 1.0.3
+      ufo: 1.1.2
     dev: true
 
   /modify-values@1.0.1:
@@ -9785,10 +9739,6 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: true
 
-  /multimap@1.1.0:
-    resolution: {integrity: sha512-0ZIR9PasPxGXmRsEF8jsDzndzHDj7tIav+JUmvIFB/WHswliFnquxECT/De7GR4yg99ky/NlRKJT82G1y271bw==}
-    dev: false
-
   /multimatch@5.0.0:
     resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
     engines: {node: '>=10'}
@@ -10708,6 +10658,10 @@ packages:
     resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
     dev: true
 
+  /pathe@1.1.1:
+    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
+    dev: true
+
   /pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
@@ -10781,12 +10735,12 @@ packages:
       - supports-color
     dev: true
 
-  /pkg-types@1.0.2:
-    resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
+  /pkg-types@1.0.3:
+    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.0
-      mlly: 1.2.0
-      pathe: 1.1.0
+      mlly: 1.4.0
+      pathe: 1.1.1
     dev: true
 
   /pkg@5.8.1:
@@ -10982,15 +10936,6 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
-  /pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-    dev: true
-
   /pretty-format@29.4.3:
     resolution: {integrity: sha512-cvpcHTc42lcsvOOAzd3XuNWTcvk1Jmnzqeu+WsOuiPmxUJTnkbAcFNsRKvEpBEUFVUgy/GTZLulZDcDEi+CIlA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -11000,6 +10945,15 @@ packages:
       react-is: 18.2.0
     dev: true
 
+  /pretty-format@29.6.1:
+    resolution: {integrity: sha512-7jRj+yXO0W7e4/tSJKoR7HRIHLPPjtNaUGG2xxKQnGvPNRkgWcQ0AZX6P4KBRJN4FcTBWb3sa7DVUJmocYuoog==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.6.0
+      ansi-styles: 5.2.0
+      react-is: 18.2.0
+    dev: true
+
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -11147,10 +11101,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-    dev: true
-
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
@@ -11836,56 +11786,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  /shift-ast@7.0.0:
-    resolution: {integrity: sha512-O0INwsZa1XH/lMSf52udGnjNOxKBLxFiZHt0Ys3i6bqtwuGEA3eDR4+e0qJELIsCy8+BiTtlTgQzP76K1ehipQ==}
-    dev: false
-
-  /shift-codegen@8.1.0:
-    resolution: {integrity: sha512-hV48SiFM0pgTLCueh0iwqbvqElXPtZL69nb+3eXOU3iZZnLP+AlBQSLKKvHSPr/Onmk0lcUEkAM7RA6V6Wj1GQ==}
-    dependencies:
-      esutils: 2.0.3
-      object-assign: 4.1.1
-      shift-reducer: 7.0.0
-    dev: false
-
-  /shift-parser@8.0.0:
-    resolution: {integrity: sha512-IShW1wGhvA5e+SPNVQ+Dwi/Be6651F2jZc6wwYHbYW7PiswAYfvR/v3Q+CjjxsVCna5L6J5OtR6y+tkkCzvCfw==}
-    dependencies:
-      multimap: 1.1.0
-      shift-ast: 7.0.0
-      shift-reducer: 7.0.0
-      shift-regexp-acceptor: 3.0.0
-    dev: false
-
-  /shift-reducer@7.0.0:
-    resolution: {integrity: sha512-9igIDMHzp1+CkQZITGHM1sAd9jqMPV0vhqHuh8jlYumHSMIwsYcrDeo1tlpzNRUnfbEq1nLyh8Bf1YU8HGUE7g==}
-    dependencies:
-      shift-ast: 7.0.0
-    dev: false
-
-  /shift-regexp-acceptor@3.0.0:
-    resolution: {integrity: sha512-98UKizBjHY6SjjLUr51YYw4rtR+vxjGFm8znqNsoahesAI8Y9+WVAyiBCxxkov1KSDhW0Wz8FwwUqHnlFnjdUg==}
-    dependencies:
-      unicode-match-property-ecmascript: 1.0.4
-      unicode-match-property-value-ecmascript: 1.0.2
-      unicode-property-aliases-ecmascript: 1.0.4
-    dev: false
-
-  /shift-spec@2018.0.0:
-    resolution: {integrity: sha512-/aiPOkj7dbe+CV2VZhIMTHQToZmgniofpRG7Yr7x2/0sO6CSVC++py1Wzf+s+rWSTDHKcLvziVAxjRRV4i4EoQ==}
-    dev: false
-
-  /shift-spec@2019.0.0:
-    resolution: {integrity: sha512-vYfKl+afWPUj/wfr5T/+mdYvWx0nn8LY6hVdfZmFENdGEBpAfQyOTo4/5i+rs8mj+Jz4+0MnsP4vXagjEoHfEw==}
-    dev: false
-
-  /shift-traverser@1.0.0:
-    resolution: {integrity: sha512-DMY3512wJbdC+IC+nhLH3/Stgr2BbxbNcg7qyZ6+e5qNnNs8TBQJWdMsRgHlX1JXwF4C0ONKS8VUxsPT0Tf7aw==}
-    dependencies:
-      estraverse: 4.2.0
-      shift-spec: 2018.0.0
-    dev: false
-
   /shiki@0.11.1:
     resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
     dependencies:
@@ -11964,14 +11864,6 @@ packages:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
 
-  /slice-ansi@5.0.0:
-    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-    dev: true
-
   /smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
@@ -12122,8 +12014,8 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /std-env@3.3.2:
-    resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==}
+  /std-env@3.3.3:
+    resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
     dev: true
 
   /stdopt@2.2.0:
@@ -12505,7 +12397,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.2
+      acorn: 8.10.0
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -12584,13 +12476,13 @@ packages:
     resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
     dev: true
 
-  /tinypool@0.3.1:
-    resolution: {integrity: sha512-zLA1ZXlstbU2rlpA4CIeVaqvWq41MTWqLY3FfsAXgC8+f7Pk7zroaJQxDgxn1xNudKW6Kmj4808rPFShUlIRmQ==}
+  /tinypool@0.6.0:
+    resolution: {integrity: sha512-FdswUUo5SxRizcBc6b1GSuLpLjisa8N8qMyYoP3rl+bym+QauhtJP5bvZY1ytt8krKGmMLYIRl36HBZfeAoqhQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tinyspy@1.0.2:
-    resolution: {integrity: sha512-bSGlgwLBYf7PnUsQ6WOc6SJ3pGOcd+d8AA6EUnLDDM0kWEstC1JIlSZA3UNliDXhd9ABoS7hiRBDCu+XP/sf1Q==}
+  /tinyspy@2.1.1:
+    resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -12618,13 +12510,6 @@ packages:
     dependencies:
       is-number: 7.0.0
 
-  /tone@14.7.77:
-    resolution: {integrity: sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==}
-    dependencies:
-      standardized-audio-context: 25.3.37
-      tslib: 2.5.0
-    dev: false
-
   /totalist@3.0.0:
     resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
     engines: {node: '>=6'}
@@ -12834,8 +12719,8 @@ packages:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: true
 
-  /ufo@1.1.1:
-    resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
+  /ufo@1.1.2:
+    resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
     dev: true
 
   /uglify-js@3.17.4:
@@ -12874,24 +12759,11 @@ packages:
   /unherit@3.0.1:
     resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==}
 
-  /unicode-canonical-property-names-ecmascript@1.0.4:
-    resolution: {integrity: sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==}
-    engines: {node: '>=4'}
-    dev: false
-
   /unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
     engines: {node: '>=4'}
     dev: true
 
-  /unicode-match-property-ecmascript@1.0.4:
-    resolution: {integrity: sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==}
-    engines: {node: '>=4'}
-    dependencies:
-      unicode-canonical-property-names-ecmascript: 1.0.4
-      unicode-property-aliases-ecmascript: 1.0.4
-    dev: false
-
   /unicode-match-property-ecmascript@2.0.0:
     resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
     engines: {node: '>=4'}
@@ -12900,21 +12772,11 @@ packages:
       unicode-property-aliases-ecmascript: 2.1.0
     dev: true
 
-  /unicode-match-property-value-ecmascript@1.0.2:
-    resolution: {integrity: sha512-Rx7yODZC1L/T8XKo/2kNzVAQaRE88AaMvI1EF/Xnj3GW2wzN6fop9DDWuFAKUVFH7vozkz26DzP0qyWLKLIVPQ==}
-    engines: {node: '>=4'}
-    dev: false
-
   /unicode-match-property-value-ecmascript@2.1.0:
     resolution: {integrity: sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==}
     engines: {node: '>=4'}
     dev: true
 
-  /unicode-property-aliases-ecmascript@1.0.4:
-    resolution: {integrity: sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==}
-    engines: {node: '>=4'}
-    dev: false
-
   /unicode-property-aliases-ecmascript@2.1.0:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
@@ -13191,19 +13053,17 @@ packages:
       replace-ext: 1.0.1
     dev: false
 
-  /vite-node@0.28.0(@types/node@18.11.18):
-    resolution: {integrity: sha512-4w+hFGfAfsfCchVpZFkIEEEGxF+OA1lVIPc7Dijf/k/nJRUGU80RWnDubA0jmc7CApg/UbnSkIsYGh8v4eJ1HA==}
-    engines: {node: '>=v14.16.0'}
+  /vite-node@0.33.0(@types/node@18.16.3):
+    resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==}
+    engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.2.0
-      pathe: 1.1.0
+      mlly: 1.4.0
+      pathe: 1.1.1
       picocolors: 1.0.0
-      source-map: 0.6.1
-      source-map-support: 0.5.21
-      vite: 4.3.3(@types/node@18.11.18)
+      vite: 4.3.3(@types/node@18.16.3)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -13233,71 +13093,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite@4.3.3:
-    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
-  /vite@4.3.3(@types/node@18.11.18):
-    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.11.18
-      esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.3.3(@types/node@18.16.3):
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -13340,9 +13135,9 @@ packages:
     dependencies:
       vite: 4.3.3(@types/node@18.16.3)
 
-  /vitest@0.28.0(@vitest/ui@0.28.0):
-    resolution: {integrity: sha512-qgPw3vHEOc36wJBknmmeWIpuaLnXtWZinkeT8aOTyIuBYipgpabVzWjWgCilKDa8F+ZrY2cHeH2xGUCYOc5/XA==}
-    engines: {node: '>=v14.16.0'}
+  /vitest@0.33.0(@vitest/ui@0.28.0):
+    resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
+    engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
@@ -13350,6 +13145,9 @@ packages:
       '@vitest/ui': '*'
       happy-dom: '*'
       jsdom: '*'
+      playwright: '*'
+      safaridriver: '*'
+      webdriverio: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
@@ -13361,31 +13159,37 @@ packages:
         optional: true
       jsdom:
         optional: true
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
     dependencies:
-      '@types/chai': 4.3.4
+      '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.18
-      '@vitest/expect': 0.28.0
-      '@vitest/runner': 0.28.0
-      '@vitest/spy': 0.28.0
+      '@types/node': 18.16.3
+      '@vitest/expect': 0.33.0
+      '@vitest/runner': 0.33.0
+      '@vitest/snapshot': 0.33.0
+      '@vitest/spy': 0.33.0
       '@vitest/ui': 0.28.0
-      '@vitest/utils': 0.28.0
-      acorn: 8.8.2
+      '@vitest/utils': 0.33.0
+      acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
       chai: 4.3.7
       debug: 4.3.4
       local-pkg: 0.4.3
-      pathe: 1.1.0
+      magic-string: 0.30.1
+      pathe: 1.1.1
       picocolors: 1.0.0
-      source-map: 0.6.1
-      std-env: 3.3.2
+      std-env: 3.3.3
       strip-literal: 1.0.1
       tinybench: 2.5.0
-      tinypool: 0.3.1
-      tinyspy: 1.0.2
-      vite: 4.3.3(@types/node@18.11.18)
-      vite-node: 0.28.0(@types/node@18.11.18)
+      tinypool: 0.6.0
+      vite: 4.3.3(@types/node@18.16.3)
+      vite-node: 0.33.0(@types/node@18.16.3)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -13923,9 +13727,3 @@ packages:
 
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-
-  github.com/dktr0/WebDirt/d2ce441e82a11036455e93643af5938a844eee27:
-    resolution: {tarball: https://codeload.github.com/dktr0/WebDirt/tar.gz/d2ce441e82a11036455e93643af5938a844eee27}
-    name: webdirt
-    version: 1.0.1
-    dev: false

test/runtime.mjs

@@ -3,28 +3,21 @@
 // it might require mocking more stuff when tunes added that use other functions
 
 // import * as tunes from './tunes.mjs';
-// import { evaluate } from '@strudel.cycles/eval';
 import { evaluate } from '@strudel.cycles/transpiler';
 import { evalScope } from '@strudel.cycles/core';
 import * as strudel from '@strudel.cycles/core';
 import * as webaudio from '@strudel.cycles/webaudio';
 import controls from '@strudel.cycles/core/controls.mjs';
 // import gist from '@strudel.cycles/core/gist.js';
-import { mini } from '@strudel.cycles/mini/mini.mjs';
-// import * as toneHelpers from '@strudel.cycles/tone/tone.mjs';
+import { mini, m } from '@strudel.cycles/mini/mini.mjs';
 // import * as voicingHelpers from '@strudel.cycles/tonal/voicings.mjs';
-// import * as uiHelpers from '@strudel.cycles/tone/ui.mjs';
-// import * as drawHelpers from '@strudel.cycles/tone/draw.mjs';
 // import euclid from '@strudel.cycles/core/euclid.mjs';
-// import '@strudel.cycles/tone/tone.mjs';
 // import '@strudel.cycles/midi/midi.mjs';
 import * as tonalHelpers from '@strudel.cycles/tonal';
 import '@strudel.cycles/xen/xen.mjs';
 // import '@strudel.cycles/xen/tune.mjs';
 // import '@strudel.cycles/core/euclid.mjs';
 // import '@strudel.cycles/core/speak.mjs'; // window is not defined
-// import '@strudel.cycles/tone/pianoroll.mjs';
-// import '@strudel.cycles/tone/draw.mjs';
 // import '@strudel.cycles/osc/osc.mjs';
 // import '@strudel.cycles/webaudio/webaudio.mjs';
 // import '@strudel.cycles/serial/serial.mjs';
@@ -67,6 +60,7 @@ const toneHelpersMocked = {
   vol: mockNode,
   out: id,
   osc: id,
+  samples: id,
   adsr: id,
   getDestination: id,
   players: mockNode,
@@ -174,6 +168,7 @@ evalScope(
     csound: id,
     loadOrc: id,
     mini,
+    m,
     getDrawContext,
     getAudioContext,
     loadSoundfont,
@@ -187,7 +182,7 @@ evalScope(
 
 export const queryCode = async (code, cycles = 1) => {
   const { pattern } = await evaluate(code);
-  const haps = pattern.queryArc(0, cycles);
+  const haps = pattern.sortHapsByPart().queryArc(0, cycles);
   return haps.map((h) => h.show(true));
 };
 

undocumented.json

@@ -156,17 +156,6 @@
   ],
   "/home/felix/projects/strudel/packages/core/gist.js": [],
   "/home/felix/projects/strudel/packages/core/index.mjs": [],
-  "/home/felix/projects/strudel/packages/eval/shift-traverser/index.js": [],
-  "/home/felix/projects/strudel/packages/eval/shapeshifter.mjs": [
-    "addMiniLocations",
-    "minifyStrings",
-    "wrappedAsync",
-    "shouldAddReturn"
-  ],
-  "/home/felix/projects/strudel/packages/eval/evaluate.mjs": [
-    "evaluate"
-  ],
-  "/home/felix/projects/strudel/packages/eval/index.mjs": [],
   "/home/felix/projects/strudel/packages/midi/midi.mjs": [
     "WebMidi",
     "enableWebMidi"
@@ -199,29 +188,6 @@
     "setVoicingRange"
   ],
   "/home/felix/projects/strudel/packages/tonal/index.mjs": [],
-  "/home/felix/projects/strudel/packages/tone/tone.mjs": [
-    "Tone",
-    "getDefaultSynth",
-    "tone",
-    "amsynth",
-    "duosynth",
-    "fmsynth",
-    "membrane",
-    "metal",
-    "monosynth",
-    "noise",
-    "pluck",
-    "polysynth",
-    "sampler",
-    "players",
-    "synth",
-    "vol",
-    "lowpass",
-    "highpass",
-    "adsr",
-    "out"
-  ],
-  "/home/felix/projects/strudel/packages/tone/index.mjs": [],
   "/home/felix/projects/strudel/packages/transpiler/transpiler.mjs": [
     "transpiler"
   ],
@@ -251,10 +217,6 @@
     "webaudioOutputTrigger"
   ],
   "/home/felix/projects/strudel/packages/webaudio/index.mjs": [],
-  "/home/felix/projects/strudel/packages/webdirt/webdirt.mjs": [
-    "loadWebDirt"
-  ],
-  "/home/felix/projects/strudel/packages/webdirt/index.mjs": [],
   "/home/felix/projects/strudel/packages/xen/xen.mjs": [
     "edo",
     "xen",

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -43,14 +43,18 @@ const sidebar = SIDEBAR[langCode];
         </li>
       ))
     }
+    <li>
+      <a class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`} href={`${Astro.site?.pathname}ref`}> Reference</a>
+    </li>
   </ul>
 </nav>
 
 <script is:inline>
-  window.addEventListener('DOMContentLoaded', () => {
-    var target = document.querySelector('[aria-current="page"]');
-    if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
-    }
-  });
+window.addEventListener('DOMContentLoaded', () => {
+  var target = document.querySelector('[aria-current="page"]');
+  const nav = document.querySelector('.nav-groups');
+  if (nav && target && target.offsetTop > window.innerHeight - 100) {
+    nav.scrollTop = target.offsetTop;
+  }
+});
 </script>

website/src/components/LeftSidebar/ReferenceSidebar.astro

@@ -0,0 +1,66 @@
+---
+import { docs } from '../../../../doc.json';
+
+type Props = {
+  currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+const { BASE_URL } = import.meta.env;
+let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+---
+
+<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
+  <ul>
+    <li>
+      <a
+        class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`}
+        href={`${Astro.site?.pathname}workshop/getting-started`}>Back to Docs</a
+      >
+    </li>
+    <li>
+      <div class="nav-group pb-4">
+        <a class="hover:bg-lineHighlight w-full block" href={Astro.site?.pathname + 'ref'}><h2>Reference</h2></a>
+        <ul>
+          {
+            docs
+              .filter(
+                ({ tags }) =>
+                  !tags?.find((t) => t.title === 'noautocomplete') && !tags?.find((t) => t.title === 'superdirtonly'),
+              )
+              .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
+              // @ts-ignore
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map(({ name }) => {
+                const link = 'ref/' + name;
+                const url = Astro.site?.pathname + link;
+                return (
+                  <li class="">
+                    <a
+                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
+                        currentPageMatch === link ? ' bg-lineHighlight' : ''
+                      }`}
+                      href={url}
+                      aria-current={currentPageMatch === link ? 'page' : false}
+                    >
+                      {name}
+                    </a>
+                  </li>
+                );
+              })
+          }
+        </ul>
+      </div>
+    </li>
+  </ul>
+</nav>
+
+<script is:inline>
+window.addEventListener('DOMContentLoaded', () => {
+  var target = document.querySelector('[aria-current="page"]');
+  const nav = document.querySelector('.nav-groups');
+  if (nav && target && target.offsetTop > window.innerHeight - 100) {
+    nav.scrollTop = target.offsetTop;
+  }
+});
+</script>

website/src/components/PageContent/PageContent.astro

@@ -8,9 +8,10 @@ type Props = {
   frontmatter: Frontmatter;
   headings: MarkdownHeading[];
   githubEditUrl: string;
+  hideMoreMenu?: boolean;
 };
 
-const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
+const { frontmatter, headings, githubEditUrl, hideMoreMenu } = Astro.props as Props;
 const title = frontmatter.title;
 const currentPage = Astro.url.pathname;
 ---
@@ -22,9 +23,13 @@ const currentPage = Astro.url.pathname;
       <slot />
     </div>
   </section>
-  <nav class="block sm:hidden">
-    <MoreMenu editHref={githubEditUrl} />
-  </nav>
+  {
+    !hideMoreMenu && (
+      <nav class="block sm:hidden">
+        <MoreMenu editHref={githubEditUrl} />
+      </nav>
+    )
+  }
 </article>
 <style>
   .content {

website/src/components/PitchSlider.jsx

@@ -0,0 +1,268 @@
+import useEvent from '@strudel.cycles/react/src/hooks/useEvent.mjs';
+import useFrame from '@strudel.cycles/react/src/hooks/useFrame.mjs';
+import { getAudioContext } from '@strudel.cycles/webaudio';
+import { midi2note } from '@strudel.cycles/core';
+import { useState, useRef, useEffect } from 'react';
+import Claviature from '@components/Claviature';
+
+let Button = (props) => <button {...props} className="bg-lineHighlight p-2 rounded-md color-foreground" />;
+
+function plotValues(ctx, values, min, max, color) {
+  let { width, height } = ctx.canvas;
+  ctx.strokeStyle = color;
+  const thickness = 8;
+  ctx.lineWidth = thickness;
+  ctx.beginPath();
+
+  let x = (f) => ((f - min) / (max - min)) * width;
+  let y = (i) => (1 - i / values.length) * height;
+  values.forEach((f, i, a) => {
+    ctx.lineTo(x(f), y(i));
+  });
+  ctx.stroke();
+}
+
+function getColor(cssVariable) {
+  if (typeof document === 'undefined') {
+    return 'white';
+  }
+  const dummyElement = document.createElement('div');
+  dummyElement.style.color = cssVariable;
+  // Append the dummy element to the document body
+  document.body.appendChild(dummyElement);
+  // Get the computed style of the dummy element
+  const styles = getComputedStyle(dummyElement);
+  // Get the value of the CSS variable
+  const color = styles.getPropertyValue(cssVariable);
+  document.body.removeChild(dummyElement);
+  return color;
+}
+
+let pitchColor = '#eab308';
+let frequencyColor = '#3b82f6';
+
+export function PitchSlider({
+  buttons = [],
+  animatable = false,
+  plot = false,
+  showPitchSlider = false,
+  showFrequencySlider = false,
+  pitchStep = '0.001',
+  min = 55,
+  max = 7040,
+  initial = 220,
+  baseFrequency = min,
+  zeroOffset = 0,
+  claviature,
+}) {
+  const oscRef = useRef();
+  const activeRef = useRef();
+  const freqRef = useRef(initial);
+  const historyRef = useRef([freqRef.current]);
+  const frameRef = useRef();
+  const canvasRef = useRef();
+  const [hz, setHz] = useState(freqRef.current);
+
+  useEffect(() => {
+    freqRef.current = hz;
+  }, [hz]);
+
+  useEvent('mouseup', () => {
+    oscRef.current?.stop();
+    activeRef.current = false;
+  });
+
+  let freqSlider2freq = (progress) => min + progress * (max - min);
+  let pitchSlider2freq = (progress) => min * 2 ** (progress * Math.log2(max / min));
+  let freq2freqSlider = (freq) => (freq - min) / (max - min);
+  let freq2pitchSlider = (freq) => {
+    const [minOct, maxOct] = [Math.log2(min), Math.log2(max)];
+    return (Math.log2(freq) - minOct) / (maxOct - minOct);
+  };
+
+  const freqSlider = freq2freqSlider(hz);
+  const pitchSlider = freq2pitchSlider(hz);
+
+  let startOsc = (hz) => {
+    if (oscRef.current) {
+      oscRef.current.stop();
+    }
+    oscRef.current = getAudioContext().createOscillator();
+    oscRef.current.frequency.value = hz;
+    oscRef.current.connect(getAudioContext().destination);
+    oscRef.current.start();
+    activeRef.current = true;
+    setHz(hz);
+  };
+
+  let startSweep = (exp = false) => {
+    let f = min;
+    startOsc(f);
+    const frame = () => {
+      if (f < max) {
+        if (!exp) {
+          f += 10;
+        } else {
+          f *= 1.01;
+        }
+        oscRef.current.frequency.value = f;
+        frameRef.current = requestAnimationFrame(frame);
+      } else {
+        oscRef.current.stop();
+        cancelAnimationFrame(frameRef.current);
+      }
+      setHz(f);
+    };
+    requestAnimationFrame(frame);
+  };
+
+  useFrame(() => {
+    historyRef.current.push(freqRef.current);
+    historyRef.current = historyRef.current.slice(-1000);
+    if (canvasRef.current) {
+      let ctx = canvasRef.current.getContext('2d');
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      if (showFrequencySlider) {
+        plotValues(ctx, historyRef.current, min, max, frequencyColor);
+      }
+      if (showPitchSlider) {
+        const [minOct, maxOct] = [Math.log2(min), Math.log2(max)];
+        let perceptual = historyRef.current.map((v) => Math.log2(v));
+        plotValues(ctx, perceptual, minOct, maxOct, pitchColor);
+      }
+    }
+  }, plot);
+
+  let handleChangeFrequency = (f) => {
+    setHz(f);
+    if (oscRef.current) {
+      oscRef.current.frequency.value = f;
+    }
+  };
+  let handleMouseDown = () => {
+    cancelAnimationFrame(frameRef.current);
+    startOsc(hz);
+  };
+
+  let exponent, activeNote, activeNoteLabel;
+  if (showPitchSlider) {
+    const expOffset = baseFrequency ? Math.log2(baseFrequency / min) : 0;
+    exponent = freq2pitchSlider(hz) * Math.log2(max / min) - expOffset;
+    let semitones = parseFloat((exponent * 12).toFixed(2));
+    if (zeroOffset) {
+      semitones = semitones + zeroOffset;
+      const isWhole = Math.round(semitones) === semitones;
+      activeNote = midi2note(Math.round(semitones));
+      activeNoteLabel = (!isWhole ? '~' : '') + activeNote;
+      semitones = !isWhole ? semitones.toFixed(2) : semitones;
+      exponent = (
+        <>
+          (<span className="text-yellow-500">{semitones}</span> - {zeroOffset})/12
+        </>
+      );
+    } else if (semitones % 12 === 0) {
+      exponent = <span className="text-yellow-500">{semitones / 12}</span>;
+    } else if (semitones % 1 === 0) {
+      exponent = (
+        <>
+          <span className="text-yellow-500">{semitones}</span>/12
+        </>
+      );
+    } else {
+      exponent = <span className="text-yellow-500">{exponent.toFixed(2)}</span>;
+    }
+  }
+  return (
+    <>
+      <span className="font-mono">
+        {showFrequencySlider && <span className="text-blue-500">{hz.toFixed(0)}Hz</span>}
+        {showFrequencySlider && showPitchSlider && <> = </>}
+        {showPitchSlider && (
+          <>
+            {baseFrequency || min}Hz * 2<sup>{exponent}</sup>
+          </>
+        )}
+      </span>
+      {claviature && (
+        <>
+          {' '}
+          = <span className="text-yellow-500">{activeNoteLabel}</span>
+        </>
+      )}
+      <div>
+        {showFrequencySlider && (
+          <div className="flex space-x-1 items-center">
+            <input
+              type="range"
+              value={freqSlider}
+              min={0}
+              max={1}
+              step={0.001}
+              onMouseDown={handleMouseDown}
+              className={`block w-full max-w-[600px] accent-blue-500 `}
+              onChange={(e) => {
+                const f = freqSlider2freq(parseFloat(e.target.value));
+                handleChangeFrequency(f);
+              }}
+            />
+          </div>
+        )}
+        {showPitchSlider && (
+          <div>
+            <input
+              type="range"
+              value={pitchSlider}
+              min={0}
+              max={1}
+              //step=".001"
+              step={pitchStep}
+              onMouseDown={handleMouseDown}
+              className={`block w-full max-w-[600px] accent-yellow-500`}
+              onChange={(e) => {
+                const f = pitchSlider2freq(parseFloat(e.target.value));
+                handleChangeFrequency(f);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="px-2">
+        {plot && <canvas ref={canvasRef} className="w-full max-w-[584px] h-[300px]" height="600" width={800} />}
+      </div>
+      <div className="space-x-2">
+        {animatable && (
+          <Button onClick={() => startSweep()}>
+            <span style={{ color: '#3b82f6' }}>Frequency Sweep</span>
+          </Button>
+        )}
+        {animatable && (
+          <Button onClick={() => startSweep(true)}>
+            <span style={{ color: '#eab308' }}>Pitch Sweep</span>
+          </Button>
+        )}
+        {buttons.map((f, i) => (
+          <Button key={(f, i)} onMouseDown={() => startOsc(f)}>
+            {f}Hz
+          </Button>
+        ))}
+      </div>
+      {claviature && (
+        <Claviature
+          onMouseDown={(note) => {
+            const f = 440 * 2 ** ((note - 69) / 12);
+            handleChangeFrequency(f);
+            cancelAnimationFrame(frameRef.current);
+            startOsc(f);
+          }}
+          options={{
+            range: ['A1', 'A5'],
+            scaleY: 0.75,
+            scaleX: 0.86,
+            colorize: activeNote ? [{ keys: [activeNote], color: '#eab308' }] : [],
+            labels: activeNote ? { [activeNote]: activeNote } : {},
+          }}
+        />
+      )}
+    </>
+  );
+}

website/src/config.ts

@@ -15,7 +15,7 @@ export const OPEN_GRAPH = {
 export type Frontmatter = {
   title: string;
   description: string;
-  layout: string;
+  layout?: string;
   image?: { src: string; alt: string };
   dir?: 'ltr' | 'rtl';
   ogLocale?: string;
@@ -89,6 +89,7 @@ export const SIDEBAR: Sidebar = {
       { text: 'Accumulation', link: 'learn/accumulation' },
       { text: 'Tonal Functions', link: 'learn/tonal' },
     ],
+    Understand: [{ text: 'Pitch', link: 'understand/pitch' }],
     Development: [
       { text: 'REPL', link: 'technical-manual/repl' },
       { text: 'Sounds', link: 'technical-manual/sounds' },

website/src/docs/old.mdx

@@ -1,152 +0,0 @@
-# Old APIs
-
-These APIs are outdated and might break in the future.
-
-## Webdirt API (deprecated)
-
-You can use the powerful sampling engine [Webdirt](https://github.com/dktr0/WebDirt) with Strudel.
-
-{{ 'Pattern.webdirt' | jsdoc }}
-
-<br />
-<br />
-
-## Tone API (deprecated)
-
-The Tone API uses Tone.js instruments ands effects to create sounds.
-
-<MiniRepl
-  tune={`stack(
-    "[c5 c5 bb4 c5] [~ g4 ~ g4] [c5 f5 e5 c5] ~"
-      .tone(synth(adsr(0,.1,0,0)).chain(out())),
-    "[c2 c3]*8"
-      .tone(synth({
-        ...osc('sawtooth'),
-        ...adsr(0,.1,0.4,0)
-      }).chain(lowpass(300), out()))
-  ).slow(4)`}
-/>
-
-### tone(instrument)
-
-To change the instrument of a pattern, you can pass any [Tone.js Source](https://tonejs.github.io/docs/14.7.77/index.html) to .tone:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(new FMSynth().toDestination())`}
-/>
-
-While this works, it is a little bit verbose. To simplify things, all Tone Synths have a shortcut:
-
-```js
-const amsynth = (options) => new AMSynth(options);
-const duosynth = (options) => new DuoSynth(options);
-const fmsynth = (options) => new FMSynth(options);
-const membrane = (options) => new MembraneSynth(options);
-const metal = (options) => new MetalSynth(options);
-const monosynth = (options) => new MonoSynth(options);
-const noise = (options) => new NoiseSynth(options);
-const pluck = (options) => new PluckSynth(options);
-const polysynth = (options) => new PolySynth(options);
-const synth = (options) => new Synth(options);
-const sampler = (options, baseUrl?) => new Sampler(options); // promisified, see below
-const players = (options, baseUrl?) => new Sampler(options); // promisified, see below
-```
-
-### sampler
-
-With sampler, you can create tonal instruments from samples:
-
-<MiniRepl
-  tune={`sampler({
-  C5: 'https://freesound.org/data/previews/536/536549_11935698-lq.mp3'
-}).then(kalimba => 
-  saw.struct("x*8").mul(16).round()
-  .legato(4).scale('D dorian').slow(2)
-  .tone(kalimba.toDestination())
-)`}
-/>
-
-The sampler function promisifies [Tone.js Sampler](https://tonejs.github.io/docs/14.7.77/Sampler).
-
-Note that this function currently only works with this promise notation, but in the future,
-it will be possible to use async instruments in a synchronous fashion.
-
-### players
-
-With players, you can create sound banks:
-
-<MiniRepl
-  tune={`players({
-    bd: 'samples/tidal/bd/BT0A0D0.wav',
-    sn: 'samples/tidal/sn/ST0T0S3.wav',
-    hh: 'samples/tidal/hh/000_hh3closedhh.wav'
-  }, 'https://loophole-letters.vercel.app/')
-  .then(drums=>
-  "bd hh sn hh".tone(drums.toDestination())
-)
-  `}
-/>
-
-The sampler function promisifies [Tone.js Players](https://tonejs.github.io/docs/14.7.77/Players).
-
-Note that this function currently only works with this promise notation, but in the future,
-it will be possible to use async instruments in a synchronous fashion.
-
-### out
-
-Shortcut for Tone.Destination. Intended to be used with Tone's .chain:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(membrane().chain(out()))`}
-/>
-
-This alone is not really useful, so read on..
-
-### vol(volume)
-
-Helper that returns a Gain Node with the given volume. Intended to be used with Tone's .chain:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(noise().chain(vol(0.5), out()))`}
-/>
-
-### osc(type)
-
-Helper to set the waveform of a synth, monosynth or polysynth:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(synth(osc('sawtooth4')).chain(out()))`}
-/>
-
-The base types are `sine`, `square`, `sawtooth`, `triangle`. You can also append a number between 1 and 32 to reduce the harmonic partials.
-
-### lowpass(cutoff)
-
-Helper that returns a Filter Node of type lowpass with the given cutoff. Intended to be used with Tone's .chain:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(synth(osc('sawtooth')).chain(lowpass(800), out()))`}
-/>
-
-### highpass(cutoff)
-
-Helper that returns a Filter Node of type highpass with the given cutoff. Intended to be used with Tone's .chain:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(synth(osc('sawtooth')).chain(highpass(2000), out()))`}
-/>
-
-### adsr
-
-Helper to set the envelope of a Tone.js instrument. Intended to be used with Tone's .set:
-
-<MiniRepl
-  tune={`"[c4 c4 bb3 c4] [~ g3 ~ g3] [c4 f4 e4 c4] ~".slow(4)
-.tone(synth(adsr(0,.1,0,0)).chain(out()))`}
-/>

website/src/layouts/ReferenceLayout.astro

@@ -0,0 +1,50 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
+import * as CONFIG from '../config';
+import type { MarkdownHeading } from 'astro';
+import '../docs/docs.css';
+import ReferenceSidebar from '../components/LeftSidebar/ReferenceSidebar.astro';
+
+type Props = {
+  frontmatter: CONFIG.Frontmatter;
+  headings: MarkdownHeading[];
+};
+
+const { frontmatter, headings } = Astro.props as Props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const currentPage = Astro.url.pathname;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
+---
+
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial dark">
+  <head>
+    <HeadCommon />
+    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+    <title>
+      {frontmatter.title ? `${frontmatter.title} 🌀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+    </title>
+  </head>
+
+  <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} />
+      </header>
+      <main class="relative pt-16">
+        <div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
+          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
+            <ReferenceSidebar currentPage={currentPage} />
+          </aside>
+          <PageContent hideMoreMenu={true} frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
+            <slot />
+          </PageContent>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>

website/src/pages/learn/samples.mdx

@@ -319,6 +319,10 @@ Sampler effects are functions that can be used to change the behaviour of sample
 
 <JsDoc client:idle name="Pattern.chop" h={0} />
 
+### slice
+
+<JsDoc client:idle name="Pattern.slice" h={0} />
+
 ### speed
 
 <JsDoc client:idle name="speed" h={0} />

website/src/pages/learn/tonal.mdx

@@ -10,20 +10,13 @@ import { JsDoc } from '../../docs/JsDoc';
 
 These functions use [tonaljs](https://github.com/tonaljs/tonal) to provide helpers for musical operations.
 
+### voicing()
+
+<JsDoc client:idle name="voicing" h={0} />
+
 ### scale(name)
 
-Turns numbers into notes in the scale (zero indexed). Also sets scale for other scale operations, like scaleTranspose.
-
-<MiniRepl
-  client:idle
-  tune={`"0 2 4 6 4 2"
-.scale("C2:major C2:minor").slow(2))
-.note().s("piano")`}
-/>
-
-Note that the scale root is octaved here. You can also omit the octave, then index zero will default to octave 3.
-
-All the available scale names can be found [here](https://github.com/tonaljs/tonal/blob/main/packages/scale-type/data.ts).
+<JsDoc client:idle name="scale" h={0} />
 
 ### transpose(semitones)
 

website/src/pages/ref/[ref].astro

@@ -0,0 +1,40 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+import { docs } from '../../../../doc.json';
+import JsDoc from '../../docs/JsDoc.astro';
+
+export const getSynonyms = (doc) => {
+  const synonyms = doc.tags?.find((t) => t.title === 'synonyms');
+  if (synonyms) {
+    return synonyms.text?.split(', ');
+  }
+  return [];
+};
+
+export function getStaticPaths() {
+  let paths: any = [];
+  docs
+    .filter((doc) => !!doc.name)
+    .forEach((doc) => {
+      paths.push({ params: { ref: doc.name } });
+      const synonyms = getSynonyms(doc);
+      if (synonyms) {
+        synonyms.forEach((synonym) => {
+          paths.push({ params: { ref: synonym } });
+        });
+      }
+    });
+  return paths;
+}
+
+const { ref } = Astro.params;
+const entry = docs.find((d) => d.name === ref || getSynonyms(d).includes(ref));
+if (!entry) {
+  return;
+}
+---
+
+<ReferenceLayout frontmatter={{ title: entry.name || 'Reference', description: '' }} headings={[]}>
+  <h1>{entry!.name}</h1>
+  <JsDoc name={entry.longname} />
+</ReferenceLayout>

website/src/pages/ref/index.astro

@@ -0,0 +1,8 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+---
+
+<ReferenceLayout frontmatter={{ title: 'Reference', description: 'All functions' }} headings={[]}>
+  <h1>Reference</h1>
+  <p>Welcome to the Reference! Pick an Item on the left</p>
+</ReferenceLayout>

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

@@ -126,13 +126,9 @@ These functions are more low level, probably not needed by the live coder.
 
 <JsDoc client:idle name="Pattern#stripContext" h={0} />
 
-## withLocation
+## withLoc
 
-<JsDoc client:idle name="Pattern#withLocation" h={0} />
-
-## withMiniLocation
-
-<JsDoc client:idle name="Pattern#withMiniLocation" h={0} />
+<JsDoc client:idle name="Pattern#withLoc" h={0} />
 
 ## filterHaps
 

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

@@ -52,9 +52,9 @@ These packages provide bindings for different ways to output strudel patterns:
 
 ### No Longer Maintained
 
-- [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
+- [eval](https://www.npmjs.com/package/@strudel.cycles/eval): old code transpiler
+- [tone](https://www.npmjs.com/package/@strudel.cycles/tone): bindings for Tone.js instruments and effects
+- [webdirt](https://www.npmjs.com/package/@strudel.cycles/webdirt): webdirt bindings, replaced by webaudio package
 
 ## Tools
 

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

@@ -32,19 +32,17 @@ In the JavaScript world, using transpilation is a common practise to be able to
 
 In the same tradition, Strudel can add a transpilation step to simplify the user code in the context of live coding. For example, the Strudel REPL lets the user create mini-notation patterns using just double quoted strings, while single quoted strings remain what they are:
 
-```js
-'c3 [e3 g3]*2';
+```strudel
+note("c3 [e3 g3]*2")
 ```
 
 is transpiled to:
 
-```js
-mini('c3 [e3 g3]*2').withMiniLocation([1, 0, 0], [1, 14, 14]);
+```strudel
+note(m('c3 [e3 g3]', 5))
 ```
 
-Here, the string is wrapped in `mini`, which will create a pattern from a mini-notation string. Additionally, the `withMiniLocation` method passes the original source code location of the string to the pattern, which enables highlighting active events.
-
-Other convenient features like pseudo variables, operator overloading and top level await are possible with transpilation.
+Here, the string is wrapped in `m`, which will create a pattern from a mini-notation string. As the second parameter, it gets passed source code location of the string, which enables highlighting active events later.
 
 After the transpilation, the code is ready to be evaluated into a `Pattern`.
 
@@ -56,16 +54,22 @@ While the transpilation allows JavaScript to express Patterns in a less verbose
 
 The mini-notation parser is implemented using `peggy`, which allows generating performant parsers for Domain Specific Languages (DSLs) using a concise grammar notation. The generated parser turns the mini-notation string into an AST which is used to call the respective Strudel functions with the given structure. For example, `"c3 [e3 g3]*2"` will result in the following calls:
 
-```js
+```strudel
 seq(
-  reify('c3').withLocation([1, 1, 1], [1, 4, 4]),
-  seq(reify('e3').withLocation([1, 5, 5], [1, 8, 8]), reify('g3').withLocation([1, 8, 8], [1, 10, 10])).fast(2),
-);
+  reify('c3').withLoc(6, 9),
+  seq(reify('e3').withLoc(10, 12), reify('g3',).withLoc(13, 15))
+)
 ```
 
 ### Highlighting Locations
 
-As seen in the examples above, both the JS and the mini-notation parser add source code locations using `withMiniLocation` and `withLocation` methods. While the JS parser adds locations relative to the user code as a whole, the mini-notation adds locations relative to the position of the mini-notation string. The absolute location of elements within mini-notation can be calculated by simply adding both locations together. This absolute location can be used to highlight active events in real time.
+As seen in the examples above, both the mini-notation parser adds the source code locations using `withLoc`.
+This location is calculated inside the `m` function, as the sum of 2 locations:
+
+1. the location where the mini notation string begins, as obtained from the JS parser
+2. the location of the substring inside the mini notation, as obtained from the mini notation parser
+
+The sum of both is passed to `withLoc` to tell each element its location, which can be later used for highlighting when it's active.
 
 ### Mini Notation
 

website/src/pages/understand/pitch.mdx

@@ -0,0 +1,169 @@
+---
+title: Understanding Pitch
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { PitchSlider } from '../../components/PitchSlider';
+import Box from '@components/Box.astro';
+
+# Understanding Pitch
+
+Let's learn how pitch works! The slider below controls the <span style="color:#3b82f6;">frequency</span> of an oscillator, producing a pitch:
+
+{/* <PitchSlider client:load showFrequencySlider plot /> */}
+
+<PitchSlider client:load showFrequencySlider min={20} max={20000} />
+
+- Drag the slider to hear a pitch
+- Move the slider to change the pitch
+- Observe how the Hz number changes
+- <span className="text-red-300">Caution</span>: The higher frequencies could be disturbing for children or animals!
+
+The Hz number is the frequency of the pitch you're hearing.
+The higher the frequency, the higher the pitch and vice versa.
+A pitch occurs whenever something is vibrating / oscillating at a frequency, in this case it's your speaker.
+The unit **Hz** describes how many times that oscillation happens per second.
+Our eyes are too slow to actually see the oscillation on the speaker, but we can <a href="https://www.youtube.com/watch?v=CDMBWw7OuJQ" target="_blank">see it in slow motion</a>.
+
+<Box>
+
+The hearing range of a newborn is said to be between 20Hz and 20000Hz.
+The upper limit decreases with age. What's your upper limit?
+
+</Box>
+
+In Strudel, we can play frequencies directly with the `freq` control:
+
+<MiniRepl client:visible tune={`freq("200 [300,500] 400 [500,<600 670 712 670>]")`} />
+
+## Frequency vs Pitch Perception
+
+Maybe you have already noticed that the <span style="color:#3b82f6;">frequency slider</span> is "lopsided",
+meaning the pitch changes more in the left region and less in the right region.<br/>
+To make that more obvious, let's add a <span style="color:#eab308">pitch slider</span>
+that controls the frequency on a different scale:
+
+<PitchSlider animatable plot showFrequencySlider showPitchSlider client:load />
+
+Try out the buttons above to sweep through the frequency range in 2 different ways:
+
+- Frequency Sweep: <span style="color:#3b82f6;">frequency rises linear</span> , <span style="color:#eab308">pitch rises logarithmic</span>
+- Pitch Sweep: <span style="color:#3b82f6;">frequency rises exponential</span> , <span style="color:#eab308">pitch rises linear</span>
+
+<Box>
+
+Don't be scared of these mathematical terms:
+
+- "logarithmic" is just a fancy way of saying "it starts fast and slows down"
+- "exponential" is just a fancy way of saying "it starts slow and gets faster"
+
+</Box>
+
+Most of the time, we might want to control pitch in a way that matches our perception,
+which is what the <span style="color:#eab308">pitch slider</span> does.
+
+## From Hz to Semitones
+
+Because Hz does not match our perception, let's try to find a unit for pitch that matches.
+To approach that unit of pitch, let's look at how frequency behaves when it is doubled:
+
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 7} />
+
+- Use the now stepped pitch slider above
+- Can you hear how these pitches seem related to each other?
+
+<Box>
+
+In musical terms, a pitch with double the frequency of another is an `octave` higher.
+
+</Box>
+
+Because octaves are pretty far apart, octaves are typically divided into 12 smaller parts:
+
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
+
+This step is also called a semitone, which is the most common division of pitched music.
+For example, the keys on a piano keyboard are also divided into semitones.
+
+In Strudel, we could do that with `freq` like this:
+
+<MiniRepl
+  client:visible
+  tune={`freq(
+  "0 4 7 12"
+  .fmap(n => 440 * 2**(n/12))
+)`}
+/>
+
+Of course, this can be written shorter with note, as we will see below.
+
+## From Semitones to MIDI numbers
+
+Now we know what the distance of a semitone is.
+Above, we used an arbitrary base frequency of 440Hz, which means the exponent 0 is equal to 440Hz.
+Typically, 440Hz is standardized to the number 69, which leads to this calculation:
+
+<PitchSlider
+  client:load
+  showPitchSlider
+  showFrequencySlider
+  baseFrequency={440}
+  zeroOffset={69}
+  pitchStep={1 / 12 / 7}
+  min={440 / 8}
+  max={7040}
+  initial={440}
+/>
+
+The yellow number is now a MIDI number, covering more than the whole human hearing range with numbers from 0 to 127.
+In Strudel, we can use MIDI numbers inside `note`:
+
+<MiniRepl client:visible tune={`note("69 73 76 81")`} />
+
+## From MIDI numbers to notes
+
+In western music theory, notes are used instead of numbers.
+For each midi number, there is at least one note label:
+
+<PitchSlider
+  client:load
+  showPitchSlider
+  showFrequencySlider
+  baseFrequency={440}
+  zeroOffset={69}
+  pitchStep={1 / 48}
+  min={440 / 8}
+  max={880}
+  initial={440}
+  claviature
+/>
+
+A full note label consists of a letter (A-G), 0 or more accidentals (b | #) and an octave number.
+This system is also known as [Scientific Pitch Notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation).
+In Strudel, these note labels can also be used inside `note` as an alternative to midi numbers:
+
+<MiniRepl client:visible tune={`note("A4 C#5 E5 A5").piano()`} />
+
+## Open Questions
+
+Now that we have learned about different representations of pitch, there are still open questions:
+
+- Why 12 notes? What about different divisions of the octave?
+- Why are notes labeled as they are? Why only 7 letters?
+- Are there other labeling systems?
+- What about Just Intonation Systems?
+- What about Timbre?
+
+All those questions are important to ask and will be answered in another article.
+
+## Definition
+
+At first, I wanted to start this article with a definition, but then thought it might be a good idea to focus on intuitive exploration.
+Maybe you now understand this definition much better:
+
+<Box>
+
+From [wikipedia](<https://en.wikipedia.org/wiki/Pitch_(music)>): "Pitch is a perceptual property of sounds that allows their ordering on a frequency-related scale, or more commonly, pitch is the quality that makes it possible to judge sounds as "higher" and "lower" in the sense associated with musical melodies."
+
+</Box>

website/src/repl/Repl.jsx

@@ -5,11 +5,19 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
-import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
+import {
+  CodeMirror,
+  cx,
+  flash,
+  useHighlighting,
+  useStrudel,
+  useKeydown,
+  updateMiniLocations,
+} from '@strudel.cycles/react';
 import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useState, useMemo } from 'react';
 import './Repl.css';
 import { Footer } from './Footer';
 import { Header } from './Header';
@@ -106,7 +114,6 @@ export function Repl({ embedded = false }) {
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
-
   const {
     theme,
     keybindings,
@@ -128,7 +135,8 @@ export function Repl({ embedded = false }) {
         cleanupUi();
         cleanupDraw();
       },
-      afterEval: ({ code }) => {
+      afterEval: ({ code, meta }) => {
+        setMiniLocations(meta.miniLocations);
         setPending(false);
         setLatestCode(code);
         window.location.hash = '#' + encodeURIComponent(btoa(code));
@@ -143,13 +151,18 @@ export function Repl({ embedded = false }) {
   // init code
   useEffect(() => {
     initCode().then((decoded) => {
-      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 || latestCode || randomTune);
+      let msg;
+      if (decoded) {
+        setCode(decoded);
+        msg = `I have loaded the code from the URL.`;
+      } else if (latestCode) {
+        setCode(latestCode);
+        msg = `Your last session has been loaded!`;
+      } /*  if(randomTune) */ else {
+        setCode(randomTune);
+        msg = `A random code snippet named "${name}" has been loaded!`;
+      }
+      logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
       setPending(false);
     });
   }, []);
@@ -178,7 +191,7 @@ export function Repl({ embedded = false }) {
   );
 
   // highlighting
-  useHighlighting({
+  const { setMiniLocations } = useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
@@ -200,6 +213,7 @@ export function Repl({ embedded = false }) {
     // TODO: scroll to selected function in reference
     // console.log('selectino change', selection.ranges[0].from);
   }, []);
+
   const handleTogglePlay = async () => {
     await getAudioContext().resume(); // fixes no sound in ios webkit
     if (!started) {
@@ -264,6 +278,11 @@ export function Repl({ embedded = false }) {
     handleShuffle,
     handleShare,
   };
+  const currentTheme = useMemo(() => themes[theme] || themes.strudelTheme, [theme]);
+  const handleViewChanged = useCallback((v) => {
+    setView(v);
+  }, []);
+
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
     // bg-gradient-to-t from-green-900 to-slate-900
@@ -278,7 +297,7 @@ export function Repl({ embedded = false }) {
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror
-            theme={themes[theme] || themes.strudelTheme}
+            theme={currentTheme}
             value={code}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
@@ -287,10 +306,7 @@ export function Repl({ embedded = false }) {
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}
-            onViewChanged={(v) => {
-              setView(v);
-              // window.editorView = v;
-            }}
+            onViewChanged={handleViewChanged}
             onSelectionChange={handleSelectionChange}
           />
         </section>

website/src/repl/tunes.mjs

@@ -68,32 +68,35 @@ stack(
 `;
 
 export const giantSteps = `// John Coltrane - Giant Steps
-setVoicingRange('lefthand', ['E3', 'G4']);
+
+let melody = note(
+  "[F#5 D5] [B4 G4] Bb4 [B4 A4]",
+  "[D5 Bb4] [G4 Eb4] F#4 [G4 F4]",
+  "Bb4 [B4 A4] D5 [D#5 C#5]",
+  "F#5 [G5 F5] Bb5 [F#5 F#5]",
+)
 
 stack(
   // melody
-  seq(
-    "[F#5 D5] [B4 G4] Bb4 [B4 A4]",
-    "[D5 Bb4] [G4 Eb4] F#4 [G4 F4]",
-    "Bb4 [B4 A4] D5 [D#5 C#5]",
-    "F#5 [G5 F5] Bb5 [F#5 F#5]",
-  ).color('#F8E71C'),
+  melody.color('#F8E71C'),
   // chords
-  seq(
+  chord(
     "[B^7 D7] [G^7 Bb7] Eb^7 [Am7 D7]",
     "[G^7 Bb7] [Eb^7 F#7] B^7 [Fm7 Bb7]",
     "Eb^7 [Am7 D7] G^7 [C#m7 F#7]",
     "B^7 [Fm7 Bb7] Eb^7 [C#m7 F#7]"
-  ).voicings('lefthand').color('#7ED321'),
+  ).dict('lefthand')
+  .anchor(melody).mode('duck')
+  .voicing().color('#7ED321'),
   // bass
-  seq(
+  note(
     "[B2 D2] [G2 Bb2] [Eb2 Bb3] [A2 D2]",
     "[G2 Bb2] [Eb2 F#2] [B2 F#2] [F2 Bb2]",
     "[Eb2 Bb2] [A2 D2] [G2 D2] [C#2 F#2]",
     "[B2 F#2] [F2 Bb2] [Eb2 Bb3] [C#2 F#2]"
   ).color('#00B8D4')
-).slow(20).note()
-//.pianoroll({fold:1})`;
+).slow(20)
+.pianoroll({fold:1})`;
 
 export const zeldasRescue = `// Koji Kondo - Princess Zelda's Rescue
 stack(
@@ -134,28 +137,31 @@ const drums = stack(
   s("[~ hh]*2").delay(.3).delayfeedback(.5).delaytime(.125).gain(.4)
 );
 
-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")
+  .scale("<C:minor!3 C:melodic:minor>/2")
+  .struct("[~ x]*2")
   .layer(
     x=>x.scaleTranspose(0).early(0),
     x=>x.scaleTranspose(2).early(1/8),
     x=>x.scaleTranspose(7).early(1/4),
     x=>x.scaleTranspose(8).early(3/8)
-  ).apply(thru).note().apply(keys).mask("<~ x>/16")
+  ).note().apply(keys).mask("<~ x>/16")
   .color('darkseagreen'),
-  note("<C2 Bb1 Ab1 [G1 [G2 G1]]>/2".apply(thru))
+  
+  note("<C2 Bb1 Ab1 [G1 [G2 G1]]>/2")
   .struct("[x [~ x] <[~ [~ x]]!3 [x x]>@2]/2".fast(2))
   .s('sawtooth').attack(0.001).decay(0.2).sustain(1).cutoff(500)
   .color('brown'),
-  "<Cm7 Bb7 Fm7 G7b13>/2".struct("~ [x@0.2 ~]".fast(2))
-  .voicings('lefthand')
-  .apply(thru).every(2, early(1/8)).note().apply(keys).sustain(0)
+  chord("<Cm7 Bb7 Fm7 G7b13>/2")
+  .struct("~ [x@0.2 ~]".fast(2))
+  .dict('lefthand').voicing()
+  .every(2, early(1/8))
+  .apply(keys).sustain(0)
   .delay(.4).delaytime(.12)
   .mask("<x@7 ~>/8".early(1/4))
-)
+).add(note("<-1 0>/8"))
 stack(
   drums.fast(2).color('tomato'), 
   synths
@@ -263,15 +269,20 @@ export const festivalOfFingers = `// "Festival of fingers"
 
 const chords = "<Cm7 Fm7 G7 F#7>";
 stack(
-  chords.voicings('lefthand').struct("x(3,8,-1)").velocity(.5).off(1/7,x=>x.transpose(12).velocity(.2)),
-  chords.rootNotes(2).struct("x(4,8,-2)"),
+  chord(chords).dict('lefthand').voicing().struct("x(3,8,-1)")
+  .velocity(.5).off(1/7,x=>x.add(note(12)).velocity(.2)),
+  
+  chords.rootNotes(2).struct("x(4,8,-2)").note(),
+  
   chords.rootNotes(4)
   .scale(cat('C minor','F dorian','G dorian','F# mixolydian'))
   .struct("x(3,8,-2)".fast(2))
   .scaleTranspose("0 4 0 6".early(".125 .5")).layer(scaleTranspose("0,<2 [4,6] [5,7]>/4"))
+  .note()
+  
 ).slow(2)
  .velocity(sine.struct("x*8").add(3/5).mul(2/5).fast(8))
- .note().piano()`;
+ .piano()`;
 
 // iter, echo, echoWith
 export const undergroundPlumber = `// "Underground plumber"
@@ -527,10 +538,10 @@ stack(
   .gain(.4) // turn down
   .cutoff(sine.slow(7).range(300,5000)) // automate cutoff
   //.hush()
-  ,"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') // chords
-  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
-  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "note"
+  ,chord("<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>")
+  .dict('lefthand').voicing() // chords
+  .add(note("0,.04")) // add second, slightly detuned voice
+  .add(note(perlin.range(0,.5))) // random pitch variation
   .s('sawtooth') // waveform
   .gain(.16) // turn down
   .cutoff(500) // fixed cutoff
@@ -559,14 +570,15 @@ samples({
   perc: ['perc/002_perc2.wav'],
 }, 'github:tidalcycles/Dirt-Samples/master/');
 
-"C^7 Am7 Dm7 G7".slow(2).voicings('lefthand')
-  .stack("0@6 [<1 2> <2 0> 1]@2".scale('C5 major'))
-  .note().slow(4)
+chord("<C^7 Am7 Dm7 G7>*2").dict('lefthand').anchor("G4").voicing()
+  .stack(n("0@6 [<1 2> <2 0> 1]@2").scale('C5 major'))
+  .slow(4)
   .s("gm_epiano1:1")
   .color('steelblue')
   .stack(
-   "<-7 ~@2 [~@2 -7] -9 ~@2 [~@2 -9] -10!2 ~ [~@2 -10] -5 ~ [-3 -2 -10]@2>*2".scale('C3 major')
-    .note().s('sawtooth').color('brown')
+   n("<-7 ~@2 [~@2 -7] -9 ~@2 [~@2 -9] -10!2 ~ [~@2 -10] -5 ~ [-3 -2 -10]@2>*2")
+    .scale('C3 major')
+    .s('sawtooth').color('brown')
   )
   .attack(0.05).decay(.1).sustain(.7)
   .cutoff(perlin.range(800,2000))
@@ -664,8 +676,10 @@ stack(
   s("mt lt ht").struct("x(3,8)").fast(2).gain(.5).room(.5).sometimes(x=>x.speed(".5")),
   s("misc:2").speed(1).delay(.5).delaytime(1/3).gain(.4),
   // chords
-  note("[~ Gm7] ~ [~ Dm7] ~".voicings('lefthand').superimpose(x=>x.add(.1)))
-  .s('sawtooth').gain(.5)
+  chord("[~ Gm7] ~ [~ Dm7] ~")
+  .dict('lefthand').voicing()
+  .add(note("0,.1"))
+  .s('sawtooth').gain(.8)
   .cutoff(perlin.range(400,3000).slow(8))
   .decay(perlin.range(0.05,.2)).sustain(0)
   .delay(.9).room(1),
@@ -695,7 +709,11 @@ setVoicingRange('lefthand', ['c3','a4'])
 stack(
 s('bass').loopAt(8).clip(1),
 s("bd*2, ~ sd,hh*4"),
-note("Abm7".voicings('lefthand').struct("x(3,8,1)".slow(2))),
+chord("Abm7")
+  .mode("below:G4")
+  .dict('lefthand')
+  .voicing()
+  .struct("x(3,8,1)".slow(2)),
 "0 1 2 3".scale('ab4 minor pentatonic')
 .superimpose(x=>x.add(.1))
 .sometimes(x=>x.add(12))
@@ -859,7 +877,7 @@ export const loungeSponge = `// "Lounge sponge"
 await loadOrc('github:kunstmusik/csound-live-code/master/livecode.orc')
 
 stack(
-  note("<C^7 A7 Dm7 Fm7>/2".voicings('lefthand'))
+  chord("<C^7 A7 Dm7 Fm7>/2").dict('lefthand').voicing()
   .cutoff(sine.range(500,2000).round().slow(16))
   .euclidLegato(3,8).csound('FM1')
   ,
@@ -878,9 +896,11 @@ export const arpoon = `// "Arpoon"
 
 await samples('github:tidalcycles/Dirt-Samples/master')
 
-note("<<Am7 C^7> C7 F^7 [Fm7 E7b9]>".voicings('lefthand'))
-  .arp("[0,3] 2 [1,3] 2".fast(3).lastOf(4, fast(2))).clip(2)
-  .add(perlin.range(0,0.2).add("<0 12>/8").note())
+n("[0,3] 2 [1,3] 2".fast(3).lastOf(4, fast(2))).clip(2)
+  .offset("<<1 2> 2 1 1>")
+  .chord("<<Am7 C^7> C7 F^7 [Fm7 E7b9]>")
+  .dict('lefthand').voicing()
+  .add(perlin.range(0,0.2).add("<-12 0>/8").note())
   .cutoff(perlin.range(500,4000)).resonance(12)
   .gain("<.5 .8>*16")
   .decay(.16).sustain(0.5)