Publish

- @strudel/codemirror@0.9.0
 - @strudel.cycles/core@0.9.0
 - @strudel.cycles/csound@0.9.0
 - @strudel.cycles/midi@0.9.0
 - @strudel.cycles/mini@0.9.0
 - @strudel.cycles/osc@0.9.0
 - @strudel.cycles/react@0.9.0
 - @strudel.cycles/serial@0.9.0
 - @strudel.cycles/soundfonts@0.9.0
 - superdough@0.9.8
 - @strudel.cycles/tonal@0.9.0
 - @strudel.cycles/transpiler@0.9.0
 - @strudel/web@0.9.0
 - @strudel.cycles/webaudio@0.9.0
 - @strudel.cycles/xen@0.9.0

.eslintignore

@@ -17,4 +17,5 @@ vite.config.js
 **/*.ts
 **/*.json
 **/dev-dist
-**/dist
+**/dist
+/src-tauri/target/**/*

.github/workflows/tauri.yml

@@ -0,0 +1,62 @@
+name: Tauri Builder
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+jobs:
+  release:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, ubuntu-latest, windows-latest]
+        include:
+          - os: ubuntu-latest
+            rust_target: x86_64-unknown-linux-gnu
+          - os: macos-latest
+            rust_target: x86_64-apple-darwin
+          - os: macos-latest
+            rust_target: aarch64-apple-darwin
+          - os: windows-latest
+            rust_target: x86_64-pc-windows-msvc
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.2
+
+      - name: Node.js setup
+        uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          # node-version-file: '.nvmrc'
+
+      - name: Install Rust (Stable)
+        run:
+          curl https://sh.rustup.rs -sSf | sh -s -- -y
+
+      - name: Install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Install app dependencies from lockfile and build web
+        run: pnpm install
+
+      - name: Build the app
+        uses: tauri-apps/tauri-action@v0
+
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          # tauri-action replaces \_\_VERSION\_\_ with the app version
+          tagName: ${{ github.ref_name }}
+          releaseName: "Strudel v__VERSION__"
+          releaseBody: |
+            See the assets to download this version and install.
+          releaseDraft: true
+          prerelease: false

.gitignore

@@ -39,4 +39,8 @@ server/samples/old
 repl/stats.html
 coverage
 public/icons/apple-splash-*
-dev-dist
+dev-dist
+Dirt-Samples
+tidal-drum-machines
+webaudiofontdata
+src-tauri/target

CONTRIBUTING.md

@@ -31,7 +31,7 @@ Use one of the Communication Channels listed above.
 
 ## Improve the Docs
 
-If you find some weak spots in the [docs](https://strudel.tidalcycles.org/learn/getting-started),
+If you find some weak spots in the [docs](https://strudel.tidalcycles.org/workshop/getting-started/),
 you can edit each file directly on github via the "Edit this page" link located in the right sidebar.
 
 ## Propose a Feature
@@ -123,7 +123,14 @@ To publish all packages that have been changed since the last release, run:
 
 ```sh
 npm login
-npx lerna publish
+
+# this will increment all the versions in package.json files of non private packages to selected versions
+npx lerna version --no-private
+
+# publish all packages inside /packages using pnpm! don't use lerna to publish!!
+pnpm --filter "./packages/**" publish --dry-run
+
+# the last command was only a dry-run, make sure everything looks ok, if yes, run the same command without flag
 ```
 
 To manually publish a single package, increase the version in the `package.json`, then run `pnpm publish`.

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,7 @@
 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/desktopbridge/index.mjs';
 export * from './packages/midi/index.mjs';
 export * from './packages/mini/index.mjs';
 export * from './packages/osc/index.mjs';
@@ -10,8 +10,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

@@ -18,7 +18,6 @@
     "build": "npm run prebuild && cd website && npm run build",
     "preview": "cd website && npm run preview",
     "osc": "cd packages/osc && npm run server",
-    "deploy": "NODE_DEBUG=gh-pages gh-pages -d out",
     "jsdoc": "jsdoc packages/ -c jsdoc.config.json",
     "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json",
     "lint": "eslint . --ext mjs,js --quiet",
@@ -53,22 +52,21 @@
     "@strudel.cycles/webaudio": "workspace:*",
     "@strudel.cycles/xen": "workspace:*",
     "acorn": "^8.8.1",
-    "dependency-tree": "^9.0.0",
-    "vitest": "^0.25.7"
+    "dependency-tree": "^9.0.0"
   },
   "devDependencies": {
-    "@vitest/ui": "^0.25.7",
-    "c8": "^7.12.0",
-    "canvas": "^2.11.0",
-    "eslint": "^8.28.0",
+    "@tauri-apps/cli": "^1.4.0",
+    "@vitest/ui": "^0.28.0",
+    "canvas": "^2.11.2",
+    "eslint": "^8.39.0",
     "eslint-plugin-import": "^2.27.5",
     "events": "^3.3.0",
-    "gh-pages": "^4.0.0",
-    "jsdoc": "^3.6.10",
+    "jsdoc": "^4.0.2",
     "jsdoc-json": "^2.0.2",
-    "jsdoc-to-markdown": "^7.1.1",
-    "lerna": "^6.5.1",
-    "prettier": "^2.8.1",
-    "rollup-plugin-visualizer": "^5.8.1"
+    "jsdoc-to-markdown": "^8.0.0",
+    "lerna": "^6.6.1",
+    "prettier": "^2.8.8",
+    "rollup-plugin-visualizer": "^5.8.1",
+    "vitest": "^0.33.0"
   }
 }

packages/codemirror/README.md

@@ -0,0 +1,3 @@
+# @strudel/codemirror
+
+This package contains helpers and extensions to use codemirror6. See [vite-vanilla-repl-cm6](../core/examples/vite-vanilla-repl-cm6/main.js) as an example of using it.

packages/codemirror/codemirror.mjs

@@ -0,0 +1,113 @@
+import { defaultKeymap } from '@codemirror/commands';
+import { javascript } from '@codemirror/lang-javascript';
+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';
+
+// https://codemirror.net/docs/guide/
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, theme = oneDark, root }) {
+  let state = EditorState.create({
+    doc: initialCode,
+    extensions: [
+      theme,
+      javascript(),
+      lineNumbers(),
+      highlightExtension,
+      highlightActiveLineGutter(),
+      syntaxHighlighting(defaultHighlightStyle),
+      keymap.of(defaultKeymap),
+      flashField,
+      EditorView.updateListener.of((v) => onChange(v)),
+      keymap.of([
+        {
+          key: 'Ctrl-Enter',
+          run: () => onEvaluate(),
+        },
+        {
+          key: 'Ctrl-.',
+          run: () => onStop(),
+        },
+      ]),
+    ],
+  });
+
+  return new EditorView({
+    state,
+    parent: root,
+  });
+}
+
+export class StrudelMirror {
+  constructor(options) {
+    const { root, initialCode = '', onDraw, drawTime = [-2, 2], prebake, ...replOptions } = options;
+    this.code = initialCode;
+
+    this.drawer = new Drawer((haps, time) => {
+      const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.endClipped);
+      this.highlight(currentFrame, time);
+      onDraw?.(haps, time, currentFrame);
+    }, drawTime);
+
+    const prebaked = prebake();
+    prebaked.then(async () => {
+      if (!onDraw) {
+        return;
+      }
+      const { scheduler, evaluate } = await this.repl;
+      // draw first frame instantly
+      prebaked.then(async () => {
+        await evaluate(this.code, false);
+        this.drawer.invalidate(scheduler);
+        onDraw?.(this.drawer.visibleHaps, 0, []);
+      });
+    });
+
+    this.repl = repl({
+      ...replOptions,
+      onToggle: async (started) => {
+        replOptions?.onToggle?.(started);
+        const { scheduler } = await this.repl;
+        if (started) {
+          this.drawer.start(scheduler);
+        } else {
+          this.drawer.stop();
+        }
+      },
+      beforeEval: async () => {
+        await prebaked;
+      },
+      afterEval: (options) => {
+        replOptions?.afterEval?.(options);
+        this.drawer.invalidate();
+      },
+    });
+    this.editor = initEditor({
+      root,
+      initialCode,
+      onChange: (v) => {
+        this.code = v.state.doc.toString();
+      },
+      onEvaluate: () => this.evaluate(),
+      onStop: () => this.stop(),
+    });
+  }
+  async evaluate() {
+    const { evaluate } = await this.repl;
+    this.flash();
+    await evaluate(this.code);
+  }
+  async stop() {
+    const { scheduler } = await this.repl;
+    scheduler.stop();
+  }
+  flash(ms) {
+    flash(this.editor, ms);
+  }
+  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

@@ -1,9 +1,8 @@
 {
-  "name": "@strudel.cycles/webdirt",
-  "version": "0.7.0",
-  "description": "WebDirt integration for Strudel",
+  "name": "@strudel/codemirror",
+  "version": "0.9.0",
+  "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
-  "type": "module",
   "publishConfig": {
     "main": "dist/index.js",
     "module": "dist/index.mjs"
@@ -12,6 +11,7 @@
     "build": "vite build",
     "prepublishOnly": "npm run build"
   },
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tidalcycles/strudel.git"
@@ -24,18 +24,24 @@
     "algorave"
   ],
   "author": "Felix Roos <flix91@gmail.com>",
+  "contributors": [
+    "Alex McLean <alex@slab.org>"
+  ],
   "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"
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.10.0",
+    "@lezer/highlight": "^1.1.4",
+    "@strudel.cycles/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^3.2.2",
-    "vitest": "^0.25.7"
+    "vite": "^4.3.3"
   }
 }

packages/codemirror/themes/one-dark.mjs

@@ -0,0 +1,139 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+
+const chalky = '#e5c07b',
+  coral = '#e06c75',
+  cyan = '#56b6c2',
+  invalid = '#ffffff',
+  ivory = '#abb2bf',
+  stone = '#7d8799', // Brightened compared to original to increase contrast
+  malibu = '#61afef',
+  sage = '#98c379',
+  whiskey = '#d19a66',
+  violet = '#c678dd',
+  darkBackground = '#21252b',
+  highlightBackground = '#2c313a',
+  background = '#282c34',
+  tooltipBackground = '#353a42',
+  selection = '#3E4451',
+  cursor = '#528bff';
+
+/// The colors used in the theme, as CSS color strings.
+export const color = {
+  chalky,
+  coral,
+  cyan,
+  invalid,
+  ivory,
+  stone,
+  malibu,
+  sage,
+  whiskey,
+  violet,
+  darkBackground,
+  highlightBackground,
+  background,
+  tooltipBackground,
+  selection,
+  cursor,
+};
+
+/// The editor theme styles for One Dark.
+export const oneDarkTheme = EditorView.theme(
+  {
+    '&': {
+      color: ivory,
+      backgroundColor: background,
+    },
+
+    '.cm-content': {
+      caretColor: cursor,
+    },
+
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+      { backgroundColor: selection },
+
+    '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+
+    '.cm-searchMatch': {
+      backgroundColor: '#72a1ff59',
+      outline: '1px solid #457dff',
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: '#6199ff2f',
+    },
+
+    '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: '#bad0f847',
+    },
+
+    '.cm-gutters': {
+      backgroundColor: background,
+      color: stone,
+      border: 'none',
+    },
+
+    '.cm-activeLineGutter': {
+      backgroundColor: highlightBackground,
+    },
+
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: '#ddd',
+    },
+
+    '.cm-tooltip': {
+      border: 'none',
+      backgroundColor: tooltipBackground,
+    },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true },
+);
+
+/// The highlighting style for code in the One Dark theme.
+export const oneDarkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: chalky },
+  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: cyan },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.link, color: stone, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+]);
+
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+export const oneDark = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)];

packages/core/animate.mjs

@@ -1,4 +1,5 @@
-import { controls, Pattern, getDrawContext, silence, register, pure } from './index.mjs';
+import { Pattern, getDrawContext, silence, register, pure } from './index.mjs';
+import controls from './controls.mjs'; // do not import from index.mjs as it breaks for some reason..
 const { createParams } = controls;
 
 let clearColor = '#22222210';

packages/core/controls.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, sequence } from './pattern.mjs';
+import { Pattern, register, sequence } from './pattern.mjs';
 import { zipWith } from './util.mjs';
 
 const controls = {};
@@ -109,6 +109,97 @@ const generic_params = [
    */
   ['attack', 'att'],
 
+  /**
+   * Sets the Frequency Modulation Harmonicity Ratio.
+   * Controls the timbre of the sound.
+   * Whole numbers and simple ratios sound more natural,
+   * while decimal numbers and complex ratios sound metallic.
+   *
+   * @name fmh
+   * @param {number | Pattern} harmonicity
+   * @example
+   * note("c e g b")
+   * .fm(4)
+   * .fmh("<1 2 1.5 1.61>")
+   * .scope()
+   *
+   */
+  [['fmh', 'fmi'], 'fmh'],
+  /**
+   * Sets the Frequency Modulation of the synth.
+   * Controls the modulation index, which defines the brightness of the sound.
+   *
+   * @name fm
+   * @param {number | Pattern} brightness modulation index
+   * @synonyms fmi
+   * @example
+   * note("c e g b")
+   * .fm("<0 1 2 8 32>")
+   * .scope()
+   *
+   */
+  [['fmi', 'fmh'], 'fm'],
+  // fm envelope
+  /**
+   * Ramp type of fm envelope. Exp might be a bit broken..
+   *
+   * @name fmenv
+   * @param {number | Pattern} type lin | exp
+   * @example
+   * note("c e g b")
+   * .fm(4)
+   * .fmdecay(.2)
+   * .fmsustain(0)
+   * .fmenv("<exp lin>")
+   * .scope()
+   *
+   */
+  ['fmenv'],
+  /**
+   * Attack time for the FM envelope: time it takes to reach maximum modulation
+   *
+   * @name fmattack
+   * @param {number | Pattern} time attack time
+   * @example
+   * note("c e g b")
+   * .fm(4)
+   * .fmattack("<0 .05 .1 .2>")
+   * .scope()
+   *
+   */
+  ['fmattack'],
+  /**
+   * Decay time for the FM envelope: seconds until the sustain level is reached after the attack phase.
+   *
+   * @name fmdecay
+   * @param {number | Pattern} time decay time
+   * @example
+   * note("c e g b")
+   * .fm(4)
+   * .fmdecay("<.01 .05 .1 .2>")
+   * .fmsustain(.4)
+   * .scope()
+   *
+   */
+  ['fmdecay'],
+  /**
+   * Sustain level for the FM envelope: how much modulation is applied after the decay phase
+   *
+   * @name fmsustain
+   * @param {number | Pattern} level sustain level
+   * @example
+   * note("c e g b")
+   * .fm(4)
+   * .fmdecay(.1)
+   * .fmsustain("<1 .75 .5 0>")
+   * .scope()
+   *
+   */
+  ['fmsustain'],
+  // these are not really useful... skipping for now
+  ['fmrelease'],
+  ['fmvelocity'],
+
   /**
    * Select the sound bank to use. To be used together with `s`. The bank name (+ "_") will be prepended to the value of `s`.
    *
@@ -120,6 +211,9 @@ const generic_params = [
    */
   ['bank'],
 
+  ['analyze'], // analyser node send amount 0 - 1 (used by scope)
+  ['fft'], // fftSize of analyser
+
   /**
    * Amplitude envelope decay time: the time it takes after the attack time to reach the sustain level.
    * Note that the decay is only audible if the sustain value is lower than 1.
@@ -205,29 +299,43 @@ const generic_params = [
    */
   ['end'],
   /**
-   * Loops the sample (from `begin` to `end`) the specified number of times.
+   * Loops the sample.
    * Note that the tempo of the loop is not synced with the cycle tempo.
+   * To change the loop region, use loopBegin / loopEnd.
    *
    * @name loop
-   * @param {number | Pattern} times How often the sample is looped
+   * @param {number | Pattern} on If 1, the sample is looped
    * @example
-   * s("bd").loop("<1 2 3 4>").osc()
+   * s("casio").loop(1)
    *
    */
   ['loop'],
-  // TODO: currently duplicated with "native" legato
-  // TODO: superdirt legato will do more: https://youtu.be/dQPmE1WaD1k?t=419
   /**
-   * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
+   * Begin to loop at a specific point in the sample (inbetween `begin` and `end`).
+   * Note that the loop point must be inbetween `begin` and `end`, and before `loopEnd`!
+   * Note: Samples starting with wt_ will automatically loop! (wt = wavetable)
    *
-   * @name legato
-   * @param {number | Pattern} duration between 0 and 1, where 1 is the length of the whole hap time
+   * @name loopBegin
+   * @param {number | Pattern} time between 0 and 1, where 1 is the length of the sample
+   * @synonyms loopb
    * @example
-   * "c4 eb4 g4 bb4".legato("<0.125 .25 .5 .75 1 2 4>")
-   *
+   * s("space").loop(1)
+   * .loopBegin("<0 .125 .25>").scope()
    */
-  // ['legato'],
-  // ['clhatdecay'],
+  ['loopBegin', 'loopb'],
+  /**
+   *
+   * End the looping section at a specific point in the sample (inbetween `begin` and `end`).
+   * Note that the loop point must be inbetween `begin` and `end`, and after `loopBegin`!
+   *
+   * @name loopEnd
+   * @param {number | Pattern} time between 0 and 1, where 1 is the length of the sample
+   * @synonyms loope
+   * @example
+   * s("space").loop(1)
+   * .loopEnd("<1 .75 .5 .25>").scope()
+   */
+  ['loopEnd', 'loope'],
   /**
    * bit crusher effect.
    *
@@ -237,6 +345,20 @@ const generic_params = [
    * s("<bd sd>,hh*3").fast(2).crush("<16 8 7 6 5 4 3 2>")
    *
    */
+  // TODO: currently duplicated with "native" legato
+  // TODO: superdirt legato will do more: https://youtu.be/dQPmE1WaD1k?t=419
+  /**
+   * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
+   *
+   * @name legato
+   * @param {number | Pattern} duration between 0 and 1, where 1 is the length of the whole hap time
+   * @noAutocomplete
+   * @example
+   * "c4 eb4 g4 bb4".legato("<0.125 .25 .5 .75 1 2 4>")
+   *
+   */
+  // ['legato'],
+  // ['clhatdecay'],
   ['crush'],
   /**
    * fake-resampling for lowering the sample rate. Caution: This effect seems to only work in chromium based browsers
@@ -248,7 +370,6 @@ const generic_params = [
    *
    */
   ['coarse'],
-
   /**
    * choose the channel the pattern is sent to in superdirt
    *
@@ -282,6 +403,227 @@ const generic_params = [
    *
    */
   [['cutoff', 'resonance'], 'ctf', 'lpf', 'lp'],
+
+  /**
+   * Sets the lowpass filter envelope modulation depth.
+   * @name lpenv
+   * @param {number | Pattern} modulation depth of the lowpass filter envelope between 0 and _n_
+   * @synonyms lpe
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .lpf(500)
+   * .lpa(.5)
+   * .lpenv("<4 2 1 0 -1 -2 -4>/4")
+   */
+  ['lpenv', 'lpe'],
+  /**
+   * Sets the highpass filter envelope modulation depth.
+   * @name hpenv
+   * @param {number | Pattern} modulation depth of the highpass filter envelope between 0 and _n_
+   * @synonyms hpe
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .hpf(500)
+   * .hpa(.5)
+   * .hpenv("<4 2 1 0 -1 -2 -4>/4")
+   */
+  ['hpenv', 'hpe'],
+  /**
+   * Sets the bandpass filter envelope modulation depth.
+   * @name bpenv
+   * @param {number | Pattern} modulation depth of the bandpass filter envelope between 0 and _n_
+   * @synonyms bpe
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .bpf(500)
+   * .bpa(.5)
+   * .bpenv("<4 2 1 0 -1 -2 -4>/4")
+   */
+  ['bpenv', 'bpe'],
+  /**
+   * Sets the attack duration for the lowpass filter envelope.
+   * @name lpattack
+   * @param {number | Pattern} attack time of the filter envelope
+   * @synonyms lpa
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .lpf(500)
+   * .lpa("<.5 .25 .1 .01>/4")
+   * .lpenv(4)
+   */
+  ['lpattack', 'lpa'],
+  /**
+   * Sets the attack duration for the highpass filter envelope.
+   * @name hpattack
+   * @param {number | Pattern} attack time of the highpass filter envelope
+   * @synonyms hpa
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .hpf(500)
+   * .hpa("<.5 .25 .1 .01>/4")
+   * .hpenv(4)
+   */
+  ['hpattack', 'hpa'],
+  /**
+   * Sets the attack duration for the bandpass filter envelope.
+   * @name bpattack
+   * @param {number | Pattern} attack time of the bandpass filter envelope
+   * @synonyms bpa
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .bpf(500)
+   * .bpa("<.5 .25 .1 .01>/4")
+   * .bpenv(4)
+   */
+  ['bpattack', 'bpa'],
+  /**
+   * Sets the decay duration for the lowpass filter envelope.
+   * @name lpdecay
+   * @param {number | Pattern} decay time of the filter envelope
+   * @synonyms lpd
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .lpf(500)
+   * .lpd("<.5 .25 .1 0>/4")
+   * .lps(0.2)
+   * .lpenv(4)
+   */
+  ['lpdecay', 'lpd'],
+  /**
+   * Sets the decay duration for the highpass filter envelope.
+   * @name hpdecay
+   * @param {number | Pattern} decay time of the highpass filter envelope
+   * @synonyms hpd
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .hpf(500)
+   * .hpd("<.5 .25 .1 0>/4")
+   * .hps(0.2)
+   * .hpenv(4)
+   */
+  ['hpdecay', 'hpd'],
+  /**
+   * Sets the decay duration for the bandpass filter envelope.
+   * @name bpdecay
+   * @param {number | Pattern} decay time of the bandpass filter envelope
+   * @synonyms bpd
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .bpf(500)
+   * .bpd("<.5 .25 .1 0>/4")
+   * .bps(0.2)
+   * .bpenv(4)
+   */
+  ['bpdecay', 'bpd'],
+  /**
+   * Sets the sustain amplitude for the lowpass filter envelope.
+   * @name lpsustain
+   * @param {number | Pattern} sustain amplitude of the lowpass filter envelope
+   * @synonyms lps
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .lpf(500)
+   * .lpd(.5)
+   * .lps("<0 .25 .5 1>/4")
+   * .lpenv(4)
+   */
+  ['lpsustain', 'lps'],
+  /**
+   * Sets the sustain amplitude for the highpass filter envelope.
+   * @name hpsustain
+   * @param {number | Pattern} sustain amplitude of the highpass filter envelope
+   * @synonyms hps
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .hpf(500)
+   * .hpd(.5)
+   * .hps("<0 .25 .5 1>/4")
+   * .hpenv(4)
+   */
+  ['hpsustain', 'hps'],
+  /**
+   * Sets the sustain amplitude for the bandpass filter envelope.
+   * @name bpsustain
+   * @param {number | Pattern} sustain amplitude of the bandpass filter envelope
+   * @synonyms bps
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .bpf(500)
+   * .bpd(.5)
+   * .bps("<0 .25 .5 1>/4")
+   * .bpenv(4)
+   */
+  ['bpsustain', 'bps'],
+  /**
+   * Sets the release time for the lowpass filter envelope.
+   * @name lprelease
+   * @param {number | Pattern} release time of the filter envelope
+   * @synonyms lpr
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .clip(.5)
+   * .lpf(500)
+   * .lpenv(4)
+   * .lpr("<.5 .25 .1 0>/4")
+   * .release(.5)
+   */
+  ['lprelease', 'lpr'],
+  /**
+   * Sets the release time for the highpass filter envelope.
+   * @name hprelease
+   * @param {number | Pattern} release time of the highpass filter envelope
+   * @synonyms hpr
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .clip(.5)
+   * .hpf(500)
+   * .hpenv(4)
+   * .hpr("<.5 .25 .1 0>/4")
+   * .release(.5)
+   */
+  ['hprelease', 'hpr'],
+  /**
+   * Sets the release time for the bandpass filter envelope.
+   * @name bprelease
+   * @param {number | Pattern} release time of the bandpass filter envelope
+   * @synonyms bpr
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .clip(.5)
+   * .bpf(500)
+   * .bpenv(4)
+   * .bpr("<.5 .25 .1 0>/4")
+   * .release(.5)
+   */
+  ['bprelease', 'bpr'],
+  /**
+   * Sets the filter type. The 24db filter is more aggressive. More types might be added in the future.
+   * @name ftype
+   * @param {number | Pattern} type 12db (default) or 24db
+   * @example
+   * note("<c2 e2 f2 g2>")
+   * .sound('sawtooth')
+   * .lpf(500)
+   * .bpenv(4)
+   * .ftype("<12db 24db>")
+   */
+  ['ftype'],
+  ['fanchor'],
   /**
    * Applies the cutoff frequency of the **h**igh-**p**ass **f**ilter.
    *
@@ -298,6 +640,36 @@ const generic_params = [
    */
   // currently an alias of 'hcutoff' https://github.com/tidalcycles/strudel/issues/496
   // ['hpf'],
+  /**
+   * Applies a vibrato to the frequency of the oscillator.
+   *
+   * @name vib
+   * @synonyms vibrato, v
+   * @param {number | Pattern} frequency of the vibrato in hertz
+   * @example
+   * note("a")
+   * .vib("<.5 1 2 4 8 16>")
+   * @example
+   * // change the modulation depth with ":"
+   * note("a")
+   * .vib("<.5 1 2 4 8 16>:12")
+   */
+  [['vib', 'vibmod'], 'vibrato', 'v'],
+  /**
+   * Sets the vibrato depth in semitones. Only has an effect if `vibrato` | `vib` | `v` is is also set
+   *
+   * @name vibmod
+   * @synonyms vmod
+   * @param {number | Pattern} depth of vibrato (in semitones)
+   * @example
+   * note("a").vib(4)
+   * .vibmod("<.25 .5 1 2 12>")
+   * @example
+   * // change the vibrato frequency with ":"
+   * note("a")
+   * .vibmod("<.25 .5 1 2 12>:8")
+   */
+  [['vibmod', 'vib'], 'vmod'],
   [['hcutoff', 'hresonance'], 'hpf', 'hp'],
   /**
    * Controls the **h**igh-**p**ass **q**-value.
@@ -476,6 +848,9 @@ const generic_params = [
    *
    */
   ['lsize'],
+  // label for pianoroll
+  ['activeLabel'],
+  [['label', 'activeLabel']],
   // ['lfo'],
   // ['lfocutoffint'],
   // ['lfodelay'],
@@ -508,7 +883,7 @@ const generic_params = [
    * @superDirtOnly
    */
   ['octave'],
-  ['offset'], // TODO: what is this? not found in tidal doc
+
   // ['ophatdecay'],
   // TODO: example
   /**
@@ -572,6 +947,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.
    *
@@ -749,18 +1133,33 @@ const generic_params = [
   ['val'],
   ['cps'],
   /**
-   * If set to 1, samples will be cut to the duration of their event.
-   * In tidal, this would be done with legato, which [is about to land in strudel too](https://github.com/tidalcycles/strudel/issues/111)
+   * Multiplies the duration with the given number. Also cuts samples off at the end if they exceed the duration.
+   * In tidal, this would be done with legato, [which has a complicated history in strudel](https://github.com/tidalcycles/strudel/issues/111).
+   * For now, if you're coming from tidal, just think clip = legato.
    *
    * @name clip
-   * @param {number | Pattern} active 1 or 0
+   * @param {number | Pattern} factor >= 0
    * @example
-   * note("c a f e ~").s("piano").clip(1)
+   * note("c a f e").s("piano").clip("<.5 1 2>")
    *
    */
   ['clip'],
-];
 
+  // ZZFX
+  ['zrand'],
+  ['curve'],
+  ['slide'], // superdirt duplicate
+  ['deltaSlide'],
+  ['pitchJump'],
+  ['pitchJumpTime'],
+  ['lfo', 'repeatTime'],
+  ['noise'],
+  ['zmod'],
+  ['zcrush'], // like crush but scaled differently
+  ['zdelay'],
+  ['tremolo'],
+  ['zzfx'],
+];
 // TODO: slice / splice https://www.youtube.com/watch?v=hKhPdO0RKDQ&list=PL2lW1zNIIwj3bDkh-Y3LUGDuRcoUigoDs&index=13
 
 controls.createParam = function (names) {
@@ -810,4 +1209,15 @@ generic_params.forEach(([names, ...aliases]) => {
 controls.createParams = (...names) =>
   names.reduce((acc, name) => Object.assign(acc, { [name]: controls.createParam(name) }), {});
 
+controls.adsr = register('adsr', (adsr, pat) => {
+  adsr = !Array.isArray(adsr) ? [adsr] : adsr;
+  const [attack, decay, sustain, release] = adsr;
+  return pat.set({ attack, decay, sustain, release });
+});
+controls.ds = register('ds', (ds, pat) => {
+  ds = !Array.isArray(ds) ? [ds] : ds;
+  const [decay, sustain] = ds;
+  return pat.set({ decay, sustain });
+});
+
 export default controls;

packages/core/cyclist.mjs

@@ -74,6 +74,7 @@ export class Cyclist {
   stop() {
     logger('[cyclist] stop');
     this.clock.stop();
+    this.lastEnd = 0;
     this.setStarted(false);
   }
   setPattern(pat, autostart = false) {

packages/core/draw.mjs

@@ -1,6 +1,6 @@
 /*
 draw.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/draw.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/draw.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/>.
 */
 
@@ -9,17 +9,29 @@ import { Pattern, getTime, State, TimeSpan } from './index.mjs';
 export const getDrawContext = (id = 'test-canvas') => {
   let canvas = document.querySelector('#' + id);
   if (!canvas) {
+    const scale = 2; // 2 = crisp on retina screens
     canvas = document.createElement('canvas');
     canvas.id = id;
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:5';
+    canvas.width = window.innerWidth * scale;
+    canvas.height = window.innerHeight * scale;
+    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 * scale;
+        canvas.height = window.innerHeight * scale;
+      }, 200);
+    });
   }
   return canvas.getContext('2d');
 };
 
-Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
+Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
+  if (typeof window === 'undefined') {
+    return this;
+  }
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
@@ -51,7 +63,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
 
 export const cleanupDraw = (clearScreen = true) => {
   const ctx = getDrawContext();
-  clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
@@ -65,3 +77,97 @@ Pattern.prototype.onPaint = function (onPaint) {
   this.context = { onPaint };
   return this;
 };
+
+// const round = (x) => Math.round(x * 1000) / 1000;
+
+// encapsulates starting and stopping animation frames
+export class Framer {
+  constructor(onFrame, onError) {
+    this.onFrame = onFrame;
+    this.onError = onError;
+  }
+  start() {
+    const self = this;
+    let frame = requestAnimationFrame(function updateHighlights(time) {
+      try {
+        self.onFrame(time);
+      } catch (err) {
+        self.onError(err);
+      }
+      frame = requestAnimationFrame(updateHighlights);
+    });
+    self.cancel = () => {
+      cancelAnimationFrame(frame);
+    };
+  }
+  stop() {
+    if (this.cancel) {
+      this.cancel();
+    }
+  }
+}
+
+// syncs animation frames to a cyclist scheduler
+// see vite-vanilla-repl-cm6 for an example
+export class Drawer {
+  constructor(onDraw, drawTime) {
+    let [lookbehind, lookahead] = drawTime; // e.g. [-2, 2]
+    lookbehind = Math.abs(lookbehind);
+    this.visibleHaps = [];
+    this.lastFrame = null;
+    this.drawTime = drawTime;
+    this.framer = new Framer(
+      () => {
+        if (!this.scheduler) {
+          console.warn('Drawer: no scheduler');
+          return;
+        }
+        // calculate current frame time (think right side of screen for pianoroll)
+        const phase = this.scheduler.now() + lookahead;
+        // first frame just captures the phase
+        if (this.lastFrame === null) {
+          this.lastFrame = phase;
+          return;
+        }
+        // query haps from last frame till now. take last 100ms max
+        const haps = this.scheduler.pattern.queryArc(Math.max(this.lastFrame, phase - 1 / 10), phase);
+        this.lastFrame = phase;
+        this.visibleHaps = (this.visibleHaps || [])
+          // filter out haps that are too far in the past (think left edge of screen for pianoroll)
+          .filter((h) => h.whole.end >= phase - lookbehind - lookahead)
+          // add new haps with onset (think right edge bars scrolling in)
+          .concat(haps.filter((h) => h.hasOnset()));
+        const time = phase - lookahead;
+        onDraw(this.visibleHaps, time, this);
+      },
+      (err) => {
+        console.warn('draw error', err);
+      },
+    );
+  }
+  invalidate(scheduler = this.scheduler) {
+    if (!scheduler) {
+      return;
+    }
+    this.scheduler = scheduler;
+    const t = scheduler.now();
+    let [_, lookahead] = this.drawTime;
+    const [begin, end] = [Math.max(t, 0), t + lookahead + 0.1];
+    // remove all future haps
+    this.visibleHaps = this.visibleHaps.filter((h) => h.whole.begin < t);
+    // query future haps
+    const futureHaps = scheduler.pattern.queryArc(begin, end); // +0.1 = workaround for weird holes in query..
+    // append future haps
+    this.visibleHaps = this.visibleHaps.concat(futureHaps);
+  }
+  start(scheduler) {
+    this.scheduler = scheduler;
+    this.invalidate();
+    this.framer.start();
+  }
+  stop() {
+    if (this.framer) {
+      this.framer.stop();
+    }
+  }
+}

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/examples/vite-vanilla-repl-cm6/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/core/examples/vite-vanilla-repl-cm6/README.md

@@ -0,0 +1,8 @@
+# vite-vanilla-repl-cm6
+
+This folder demonstrates how to set up a strudel repl using vite and vanilla JS + codemirror. Run it using:
+
+```sh
+npm i
+npm run dev
+```

packages/core/examples/vite-vanilla-repl-cm6/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Vanilla Strudel REPL</title>
+  </head>
+  <body>
+    <main>
+      <nav>
+        <button id="play">eval</button>
+        <button id="stop">stop</button>
+      </nav>
+      <div class="container">
+        <div id="editor"></div>
+        <div id="output"></div>
+      </div>
+      <canvas id="roll"></canvas>
+    </main>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

packages/core/examples/vite-vanilla-repl-cm6/main.js

@@ -0,0 +1,39 @@
+import { StrudelMirror } from '@strudel/codemirror';
+import { funk42 } from './tunes';
+import { drawPianoroll, evalScope, controls } from '@strudel.cycles/core';
+import './style.css';
+import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+import { transpiler } from '@strudel.cycles/transpiler';
+import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
+import { registerSoundfonts } from '@strudel.cycles/soundfonts';
+
+// init canvas
+const canvas = document.getElementById('roll');
+canvas.width = canvas.width * 2;
+canvas.height = canvas.height * 2;
+const drawContext = canvas.getContext('2d');
+const drawTime = [-2, 2]; // time window of drawn haps
+
+const editor = new StrudelMirror({
+  defaultOutput: webaudioOutput,
+  getTime: () => getAudioContext().currentTime,
+  transpiler,
+  root: document.getElementById('editor'),
+  initialCode: funk42,
+  drawTime,
+  onDraw: (haps, time) => drawPianoroll({ haps, time, ctx: drawContext, drawTime, fold: 0 }),
+  prebake: async () => {
+    initAudioOnFirstClick(); // needed to make the browser happy (don't await this here..)
+    const loadModules = evalScope(
+      controls,
+      import('@strudel.cycles/core'),
+      import('@strudel.cycles/mini'),
+      import('@strudel.cycles/tonal'),
+      import('@strudel.cycles/webaudio'),
+    );
+    await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
+  },
+});
+
+document.getElementById('play').addEventListener('click', () => editor.evaluate());
+document.getElementById('stop').addEventListener('click', () => editor.stop());

packages/core/examples/vite-vanilla-repl-cm6/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "vite-vanilla-repl-cm6",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^4.3.2"
+  },
+  "dependencies": {
+    "@strudel/codemirror": "workspace:*",
+    "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/mini": "workspace:*",
+    "@strudel.cycles/soundfonts": "workspace:*",
+    "@strudel.cycles/tonal": "workspace:*",
+    "@strudel.cycles/transpiler": "workspace:*",
+    "@strudel.cycles/webaudio": "workspace:*"
+  }
+}

packages/core/examples/vite-vanilla-repl-cm6/style.css

@@ -0,0 +1,31 @@
+body,
+html {
+  margin: 0;
+  height: 100%;
+  background: #282c34;
+}
+
+main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  flex-grow: 1;
+  max-height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+#editor {
+  overflow: auto;
+}
+
+.cm-editor {
+  height: 100%;
+}
+
+#roll {
+  height: 300px;
+}

packages/core/examples/vite-vanilla-repl-cm6/tunes.mjs

@@ -0,0 +1,112 @@
+export const bumpStreet = `// froos - "22 bump street", licensed with CC BY-NC-SA 4.0
+await samples('github:felixroos/samples/main')
+await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+
+"<[0,<6 7 9>,13,<17 20 22 26>]!2>/2"
+  // make it 22 edo
+  .fmap(v => Math.pow(2,v/22))
+  // mess with the base frequency
+  .mul("<300 [300@3 200]>/8").freq()
+  .layer(
+    // chords
+    x=>x.div(freq(2)).s("flute").euclidLegato("<3 2>",8)
+      .shape(.4).lpf(sine.range(800,4000).slow(8)),
+    // adlibs
+    x=>x.arp("{0 3 2 [1 3]}%1.5")
+      .s('xylo').mul(freq(2))
+      .delay(.5).delayfeedback(.4).juxBy(.5, rev)
+      .hpf(sine.range(200,3000).slow(8)),
+    // bass
+    x=>x.arp("[0 [2 1?]](5,8)").s('sawtooth').div(freq(4))
+      .lpf(sine.range(400,2000).slow(8)).lpq(8).shape(.4)
+      .off(1/8, x=>x.mul(freq(2)).degradeBy(.5)).gain(.3)
+  ).clip(1).release(.2)
+.stack(
+  // drums
+  s("bd sd:<2 1>, [~ hh]*2, [~ rim]").bank('RolandTR909')
+  .off(1/8, x=>x.speed(2).gain(.4)).sometimes(ply(2)).gain(.8)
+  .mask("<0@4 1@12>/4")
+  .reset("<x@15 [x(3,8) x*[4 8]]>")
+  // wait for it...
+).fast(2/3)
+  //.crush(6) // remove "//" if you dare`;
+
+export const trafficFlam = `// froos - "traffic flam", licensed with CC BY-NC-SA 4.0
+
+await samples('github:felixroos/samples/main')
+await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+
+addVoicings('hip', {
+  m11: ['2M 3m 4P 7m'],
+  '^7#11': ['3M 4A 5P 7M'],
+}, ['C4', 'C6'])
+
+stack(
+  stack(
+    "<Bbm11 A^7#11>/2".voicings('hip').note()
+    .s("gm_epiano1:2")
+    .arp("[<[0 1 2 3] [3 2 1 0]> ~@5]/2")
+    .release(2).late(.25).lpf(2000),
+    "<Bb1 A1>/2".note().s('gm_acoustic_bass'),
+    n("<0 2 3>(3,8)".off(1/8, add(4)))
+    .scale("<Bb4:minor A4:lydian>/2")
+    .s('gm_electric_guitar_jazz')
+    .decay(sine.range(.05, .2).slow(32)).sustain(0)
+    .delay(.5).lpf(sine.range(100,5000).slow(64))
+    .gain(.7).room(.5).pan(sine.range(0,1).slow(11))
+  ).add(perlin.range(0,.25).note()),
+  stack(
+    s("bd:1(3,8) rim").bank('RolandTR707').slow(2).room("<0 <.1 .6>>")
+    .when("<0@7 1>",x=>x.echoWith(3, .0625, (x,i) => x.speed(1+i*.24))),
+    s("rim*4").end(.05).bank('RolandTR808').speed(.8).room(.2)
+  )
+)
+  .late("[0 .05]*2").late(12)
+
+`;
+
+export const funk42 = `// froos - how to funk in 42 lines of code
+// adapted from "how to funk in two minutes" by marc rebillet https://www.youtube.com/watch?v=3vBwRfQbXkg
+// thanks to peach for the transcription: https://www.youtube.com/watch?v=8eiPXvIgda4
+
+await samples('github:felixroos/samples/main')
+await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+
+setcps(.5)
+
+let drums = stack(
+  s("bd*2, ~ sd").bank('RolandTR707').room("0 .1"),
+  s("hh*4").begin(.2).release(.02).end(.25).release(.02)
+  .gain(.3).bank('RolandTR707').late(.02).room(.5),
+  //s("shaker_small").struct("[x x*2]*2").speed(".8,.9").release(.02)
+).fast(2)
+
+let wurli = note(\`<
+[[a2,g3,[b3 c4],e4] ~ [g3,c4,e4](3,8)@4 ~@2]!3 
+[[e2,e3,a3,b3,e4]@3 [e2,e3,ab3,b3,e4]@5]>\`)
+  .s("gm_epiano1:5").decay(.2).sustain("<[1 0@7]!3 1>")
+  .gain("<[.8@2 .4@14]!3 .7>").room(.3)
+
+let organ = note("<[~@3 [a3,d4,f#4]@2 [[a3,c4,e4]@2 ~] ~@2]!3 ~>".add(12))
+    .s("gm_percussive_organ:2").gain(.6).lpf(1800).pan(.2).room(.3);
+
+let clav = note(\`<
+[~@3 a2 [g3,[b3 c4],e4]@2 ~ a2 [g3,b3,e4] ~@2 [g3,c4,e4] ~@4]!3
+[~@3 e3 [[a3 b3],c3,e3]@2 ~ e2 [e3,a3]@3 [b3,e3] ~@2 [b3,e3]@2]>\`)
+  .s("gm_clavinet:1").decay("<.25!3 [.25 .4]>").sustain(0)
+  .gain(.7).pan(.8).room(.2);
+
+let bass = note(\`<
+[a1 [~ [g2 a2]] [g1 g#1] [a1 [g2 a2]]] 
+[a1 [~ [g2 a2]] [e3 d3] [c3 [g3 a3]]] 
+[a1 [~ [g2 a2]] [g1 g#1] [a1 [g2 a2]]] 
+[e2@6 e1@5 e1 [[d2 e3] g1]@4]
+>\`).s("gm_electric_bass_pick:1").release(.1)
+
+stack(
+  drums
+  ,wurli
+  ,organ
+  ,clav
+  ,bass
+)`;

packages/core/examples/vite-vanilla-repl/README.md

@@ -6,5 +6,3 @@ This folder demonstrates how to set up a strudel repl using vite and vanilla JS.
 npm i
 npm run dev
 ```
-
-or view it [live on githack](https://rawcdn.githack.com/tidalcycles/strudel/5fb36acb046ead7cd6ad3cd10f532e7f585f536a/packages/core/examples/vite-vanilla-repl/dist/index.html)

packages/core/examples/vite-vanilla-repl/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^3.2.0"
+    "vite": "^4.3.3"
   },
   "dependencies": {
     "@strudel.cycles/core": "workspace:*",

packages/core/hap.mjs

@@ -32,7 +32,11 @@ export class Hap {
   }
 
   get duration() {
-    return this.whole.end.sub(this.whole.begin);
+    return this.whole.end.sub(this.whole.begin).mul(typeof this.value?.clip === 'number' ? this.value?.clip : 1);
+  }
+
+  get endClipped() {
+    return this.whole.begin.add(this.duration);
   }
 
   wholeOrPart() {

packages/core/index.mjs

@@ -18,11 +18,13 @@ export * from './util.mjs';
 export * from './speak.mjs';
 export * from './evaluate.mjs';
 export * from './repl.mjs';
+export * from './cyclist.mjs';
 export * from './logger.mjs';
 export * from './time.mjs';
 export * from './draw.mjs';
 export * from './animate.mjs';
 export * from './pianoroll.mjs';
+export * from './spiral.mjs';
 export * from './ui.mjs';
 export { default as drawLine } from './drawLine.mjs';
 export { default as gist } from './gist.js';

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/core",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",
@@ -35,7 +35,7 @@
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
-    "vite": "^3.2.2",
-    "vitest": "^0.25.7"
+    "vite": "^4.3.3",
+    "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,
       }),
     );
   }
@@ -1582,6 +1557,24 @@ export const range2 = register('range2', function (min, max, pat) {
   return pat.fromBipolar()._range(min, max);
 });
 
+/**
+ * Allows dividing numbers via list notation using ":".
+ * Returns a new pattern with just numbers.
+ * @name ratio
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * ratio("1, 5:4, 3:2").mul(110).freq().s("piano").slow(2)
+ */
+export const ratio = register('ratio', (pat) =>
+  pat.fmap((v) => {
+    if (!Array.isArray(v)) {
+      return v;
+    }
+    return v.slice(1).reduce((acc, n) => acc / n, v[0]);
+  }),
+);
+
 //////////////////////////////////////////////////////////////////////
 // Structural and temporal transformations
 
@@ -1677,6 +1670,9 @@ export const ply = register('ply', function (factor, pat) {
  * s("<bd sd> hh").fast(2) // s("[<bd sd> hh]*2")
  */
 export const { fast, density } = register(['fast', 'density'], function (factor, pat) {
+  if (factor === 0) {
+    return silence;
+  }
   factor = Fraction(factor);
   const fastQuery = pat.withQueryTime((t) => t.mul(factor));
   return fastQuery.withHapTime((t) => t.div(factor));
@@ -1703,6 +1699,9 @@ export const hurry = register('hurry', function (r, pat) {
  * s("<bd sd> hh").slow(2) // s("[<bd sd> hh]/2")
  */
 export const { slow, sparsity } = register(['slow', 'sparsity'], function (factor, pat) {
+  if (factor === 0) {
+    return silence;
+  }
   return pat._fast(Fraction(1).div(factor));
 });
 
@@ -2029,7 +2028,7 @@ export const jux = register('jux', function (func, pat) {
  * @example
  * "<0 [2 4]>"
  * .echoWith(4, 1/8, (p,n) => p.add(n*2))
- * .scale('C minor').note().legato(.2)
+ * .scale('C minor').note().clip(.2)
  */
 export const { echoWith, echowith, stutWith, stutwith } = register(
   ['echoWith', 'echowith', 'stutWith', 'stutwith'],
@@ -2179,6 +2178,7 @@ export const velocity = register('velocity', function (velocity, pat) {
 /**
  *
  * Multiplies the hap duration with the given factor.
+ * With samples, `clip` might be a better function to use ([more info](https://github.com/tidalcycles/strudel/pull/598))
  * @name legato
  * @memberof Pattern
  * @example
@@ -2241,17 +2241,21 @@ 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>")
  */
 
-const slice = register(
+export const slice = register(
   'slice',
   function (npat, ipat, opat) {
     return npat.innerBind((n) =>
@@ -2259,9 +2263,9 @@ 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 });
         }),
       ),
     );
@@ -2269,17 +2273,17 @@ const slice = register(
   false, // turns off auto-patternification
 );
 
-/*
+/**
  * Works the same as slice, but changes the playback speed of each slice to match the duration of its step.
  * @name splice
- * @memberof Pattern
- * @returns Pattern
  * @example
  * await samples('github:tidalcycles/Dirt-Samples/master')
- * s("breaks165").splice(8,  "0 1 [2 3 0]@2 3 0@2 7").hurry(0.65)
+ * s("breaks165")
+ * .splice(8,  "0 1 [2 3 0]@2 3 0@2 7")
+ * .hurry(0.65)
  */
 
-const splice = register(
+export const splice = register(
   'splice',
   function (npat, ipat, opat) {
     const sliced = slice(npat, ipat, opat);
@@ -2296,10 +2300,33 @@ const splice = register(
   false, // turns off auto-patternification
 );
 
-const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
+// 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 { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
   return _loopAt(factor, pat, 1);
 });
 
+// the fit 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
+/**
+ * Makes the sample fit its event duration. Good for rhythmical loops like drum breaks.
+ * Similar to loopAt.
+ * @name fit
+ * @example
+ * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
+ * s("rhodes/4").fit()
+ */
+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
@@ -2313,6 +2340,6 @@ const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat)
  * s("rhodes").loopAtCps(4,1.5).cps(1.5)
  */
 // TODO - global cps clock
-const { loopAtCps, loopatcps } = register(['loopAtCps', 'loopatcps'], function (factor, cps, pat) {
+export const { loopAtCps, loopatcps } = register(['loopAtCps', 'loopatcps'], function (factor, cps, pat) {
   return _loopAt(factor, pat, cps);
 });

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/>.
 */
 
@@ -29,129 +29,26 @@ const getValue = (e) => {
   return value;
 };
 
-Pattern.prototype.pianoroll = function ({
-  cycles = 4,
-  playhead = 0.5,
-  overscan = 1,
-  flipTime = 0,
-  flipValues = 0,
-  hideNegative = false,
-  // inactive = '#C9E597',
-  // inactive = '#FFCA28',
-  inactive = '#7491D2',
-  active = '#FFCA28',
-  // background = '#2A3236',
-  background = 'transparent',
-  smear = 0,
-  playheadColor = 'white',
-  minMidi = 10,
-  maxMidi = 90,
-  autorange = 0,
-  timeframe: timeframeProp,
-  fold = 0,
-  vertical = 0,
-} = {}) {
-  const ctx = getDrawContext();
-  const w = ctx.canvas.width;
-  const h = ctx.canvas.height;
+Pattern.prototype.pianoroll = function (options = {}) {
+  let { cycles = 4, playhead = 0.5, overscan = 1, hideNegative = false } = options;
+
   let from = -cycles * playhead;
   let to = cycles * (1 - playhead);
 
-  if (timeframeProp) {
-    console.warn('timeframe is deprecated! use from/to instead');
-    from = 0;
-    to = timeframeProp;
-  }
-  const timeAxis = vertical ? h : w;
-  const valueAxis = vertical ? w : h;
-  let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time
-  const timeExtent = to - from; // number of seconds that fit inside the canvas frame
-  const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values
-  let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true
-  let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true
-  let foldValues = [];
-  flipTime && timeRange.reverse();
-  flipValues && valueRange.reverse();
-
   this.draw(
-    (ctx, events, t) => {
-      ctx.fillStyle = background;
-      ctx.globalAlpha = 1; // reset!
-      if (!smear) {
-        ctx.clearRect(0, 0, w, h);
-        ctx.fillRect(0, 0, w, h);
-      }
+    (ctx, haps, t) => {
       const inFrame = (event) =>
-        (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
-      events.filter(inFrame).forEach((event) => {
-        const isActive = event.whole.begin <= t && event.whole.end > t;
-        ctx.fillStyle = event.context?.color || inactive;
-        ctx.strokeStyle = event.context?.color || active;
-        ctx.globalAlpha = event.context.velocity ?? 1;
-        const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
-        let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
-        const value = getValue(event);
-        const valuePx = scale(
-          fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
-          ...valueRange,
-        );
-        let margin = 0;
-        const offset = scale(t / timeExtent, ...timeRange);
-        let coords;
-        if (vertical) {
-          coords = [
-            valuePx + 1 - (flipValues ? barThickness : 0), // x
-            timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
-            barThickness - 2, // width
-            durationPx - 2, // height
-          ];
-        } else {
-          coords = [
-            timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
-            valuePx + 1 - (flipValues ? 0 : barThickness), // y
-            durationPx - 2, // widith
-            barThickness - 2, // height
-          ];
-        }
-        isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
+        (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.endClipped >= t + from;
+      pianoroll({
+        ...options,
+        time: t,
+        ctx,
+        haps: haps.filter(inFrame),
       });
-      ctx.globalAlpha = 1; // reset!
-      const playheadPosition = scale(-from / timeExtent, ...timeRange);
-      // draw playhead
-      ctx.strokeStyle = playheadColor;
-      ctx.beginPath();
-      if (vertical) {
-        ctx.moveTo(0, playheadPosition);
-        ctx.lineTo(valueAxis, playheadPosition);
-      } else {
-        ctx.moveTo(playheadPosition, 0);
-        ctx.lineTo(playheadPosition, valueAxis);
-      }
-      ctx.stroke();
     },
     {
       from: from - overscan,
       to: to + overscan,
-      onQuery: (events) => {
-        const { min, max, values } = events.reduce(
-          ({ min, max, values }, e) => {
-            const v = getValue(e);
-            return {
-              min: v < min ? v : min,
-              max: v > max ? v : max,
-              values: values.includes(v) ? values : [...values, v],
-            };
-          },
-          { min: Infinity, max: -Infinity, values: [] },
-        );
-        if (autorange) {
-          minMidi = min;
-          maxMidi = max;
-          valueExtent = maxMidi - minMidi + 1;
-        }
-        foldValues = values.sort((a, b) => String(a).localeCompare(String(b)));
-        barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
-      },
     },
   );
   return this;
@@ -181,6 +78,14 @@ export function pianoroll({
   timeframe: timeframeProp,
   fold = 0,
   vertical = 0,
+  labels = false,
+  fill = 1,
+  fillActive = false,
+  strokeActive = true,
+  stroke,
+  hideInactive = 0,
+  colorizeInactive = 1,
+  fontFamily,
   ctx,
 } = {}) {
   const w = ctx.canvas.width;
@@ -224,50 +129,75 @@ export function pianoroll({
   // foldValues = values.sort((a, b) => a - b);
   foldValues = values.sort((a, b) => String(a).localeCompare(String(b)));
   barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
-
   ctx.fillStyle = background;
   ctx.globalAlpha = 1; // reset!
   if (!smear) {
     ctx.clearRect(0, 0, w, h);
     ctx.fillRect(0, 0, w, h);
   }
-  /*   const inFrame = (event) =>
-    (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= time + to && event.whole.end >= time + from; */
-  haps
-    // .filter(inFrame)
-    .forEach((event) => {
-      const isActive = event.whole.begin <= time && event.whole.end > time;
-      const color = event.value?.color || event.context?.color;
-      ctx.fillStyle = color || inactive;
-      ctx.strokeStyle = color || active;
-      ctx.globalAlpha = event.context.velocity ?? 1;
-      const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
-      let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
-      const value = getValue(event);
-      const valuePx = scale(
-        fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
-        ...valueRange,
-      );
-      let margin = 0;
-      const offset = scale(time / timeExtent, ...timeRange);
-      let coords;
-      if (vertical) {
-        coords = [
-          valuePx + 1 - (flipValues ? barThickness : 0), // x
-          timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
-          barThickness - 2, // width
-          durationPx - 2, // height
-        ];
-      } else {
-        coords = [
-          timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
-          valuePx + 1 - (flipValues ? 0 : barThickness), // y
-          durationPx - 2, // widith
-          barThickness - 2, // height
-        ];
-      }
-      isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
-    });
+  haps.forEach((event) => {
+    const isActive = event.whole.begin <= time && event.endClipped > time;
+    let strokeCurrent = stroke ?? (strokeActive && isActive);
+    let fillCurrent = (!isActive && fill) || (isActive && fillActive);
+    if (hideInactive && !isActive) {
+      return;
+    }
+    let color = event.value?.color || event.context?.color;
+    active = color || active;
+    inactive = colorizeInactive ? color || inactive : inactive;
+    color = isActive ? active : inactive;
+    ctx.fillStyle = fillCurrent ? color : 'transparent';
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
+    const timeProgress = (event.whole.begin - (flipTime ? to : from)) / timeExtent;
+    const timePx = scale(timeProgress, ...timeRange);
+    let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
+    const value = getValue(event);
+    const valueProgress = fold
+      ? foldValues.indexOf(value) / foldValues.length
+      : (Number(value) - minMidi) / valueExtent;
+    const valuePx = scale(valueProgress, ...valueRange);
+    let margin = 0;
+    const offset = scale(time / timeExtent, ...timeRange);
+    let coords;
+    if (vertical) {
+      coords = [
+        valuePx + 1 - (flipValues ? barThickness : 0), // x
+        timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
+        barThickness - 2, // width
+        durationPx - 2, // height
+      ];
+    } else {
+      coords = [
+        timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
+        valuePx + 1 - (flipValues ? 0 : barThickness), // y
+        durationPx - 2, // widith
+        barThickness - 2, // height
+      ];
+    }
+    /* const xFactor = Math.sin(performance.now() / 500) + 1;
+      coords[0] *= xFactor; */
+
+    if (strokeCurrent) {
+      ctx.strokeRect(...coords);
+    }
+    if (fillCurrent) {
+      ctx.fillRect(...coords);
+    }
+    //ctx.ellipse(...ellipseFromRect(...coords))
+    if (labels) {
+      const defaultLabel = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
+      const { label: inactiveLabel, activeLabel } = event.value;
+      const customLabel = isActive ? activeLabel || inactiveLabel : inactiveLabel;
+      const label = customLabel ?? defaultLabel;
+      let measure = vertical ? durationPx : barThickness * 0.75;
+      ctx.font = `${measure}px ${fontFamily || 'monospace'}`;
+      // font color
+      ctx.fillStyle = /* isActive &&  */ !fillCurrent ? color : 'black';
+      ctx.textBaseline = 'top';
+      ctx.fillText(label, ...coords);
+    }
+  });
   ctx.globalAlpha = 1; // reset!
   const playheadPosition = scale(-from / timeExtent, ...timeRange);
   // draw playhead
@@ -284,7 +214,7 @@ export function pianoroll({
   return this;
 }
 
-function getOptions(drawTime, options = {}) {
+export function getDrawOptions(drawTime, options = {}) {
   let [lookbehind, lookahead] = drawTime;
   lookbehind = Math.abs(lookbehind);
   const cycles = lookahead + lookbehind;
@@ -293,5 +223,22 @@ function getOptions(drawTime, options = {}) {
 }
 
 Pattern.prototype.punchcard = function (options) {
-  return this.onPaint((ctx, time, haps, drawTime) => pianoroll({ ctx, time, haps, ...getOptions(drawTime, options) }));
+  return this.onPaint((ctx, time, haps, drawTime, paintOptions = {}) =>
+    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { ...paintOptions, ...options }) }),
+  );
 };
+
+Pattern.prototype.wordfall = function (options) {
+  return this.punchcard({ vertical: 1, labels: 1, stroke: 0, fillActive: 1, active: 'white', ...options });
+};
+
+/* Pattern.prototype.pianoroll = function (options) {
+  return this.onPaint((ctx, time, haps, drawTime) =>
+    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0, ...options }) }),
+  );
+}; */
+
+export function drawPianoroll(options) {
+  const { drawTime, ...rest } = options;
+  pianoroll({ ...getDrawOptions(drawTime), ...rest });
+}

packages/core/repl.mjs

@@ -3,6 +3,7 @@ import { evaluate as _evaluate } from './evaluate.mjs';
 import { logger } from './logger.mjs';
 import { setTime } from './time.mjs';
 import { evalScope } from './evaluate.mjs';
+import { register } from './pattern.mjs';
 
 export function repl({
   interval,
@@ -18,47 +19,26 @@ export function repl({
 }) {
   const scheduler = new Cyclist({
     interval,
-    onTrigger: async (hap, deadline, duration, cps) => {
-      try {
-        if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
-          await defaultOutput(hap, deadline, duration, cps);
-        }
-        if (hap.context.onTrigger) {
-          // call signature of output / onTrigger is different...
-          await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
-        }
-      } catch (err) {
-        logger(`[cyclist] error: ${err.message}`, 'error');
-      }
-    },
+    onTrigger: getTrigger({ defaultOutput, getTime }),
     onError: onSchedulerError,
     getTime,
     onToggle,
   });
+  const setPattern = (pattern, autostart = true) => {
+    pattern = editPattern?.(pattern) || pattern;
+    scheduler.setPattern(pattern, autostart);
+  };
   setTime(() => scheduler.now()); // TODO: refactor?
   const evaluate = async (code, autostart = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
     try {
-      beforeEval?.({ code });
-      scheduler.setCps(1); // reset cps in case the code does not contain a setCps call
-      // problem: when the code does contain a setCps after an awaited promise,
-      // the cps will be 1 until the promise resolves
-      // example:
-      /*
-      await new Promise(resolve => setTimeout(resolve,1000))
-      setCps(.5)
-      note("c a f e")
-      */
-      // to make sure the setCps inside the code is called immediately,
-      // it has to be placed first
-      let { pattern } = await _evaluate(code, transpiler);
-
+      await beforeEval?.({ code });
+      let { pattern, meta } = await _evaluate(code, transpiler);
       logger(`[eval] code updated`);
-      pattern = editPattern?.(pattern) || pattern;
-      scheduler.setPattern(pattern, autostart);
-      afterEval?.({ code, pattern });
+      setPattern(pattern, autostart);
+      afterEval?.({ code, pattern, meta });
       return pattern;
     } catch (err) {
       // console.warn(`[repl] eval error: ${err.message}`);
@@ -70,9 +50,47 @@ export function repl({
   const start = () => scheduler.start();
   const pause = () => scheduler.pause();
   const setCps = (cps) => scheduler.setCps(cps);
+  const setCpm = (cpm) => scheduler.setCps(cpm / 60);
+
+  // the following functions use the cps value, which is why they are defined here..
+  const loopAt = register('loopAt', (cycles, pat) => {
+    return pat.loopAtCps(cycles, scheduler.cps);
+  });
+
+  const fit = register('fit', (pat) =>
+    pat.withHap((hap) =>
+      hap.withValue((v) => ({
+        ...v,
+        speed: scheduler.cps / hap.whole.duration, // overwrite speed completely?
+        unit: 'c',
+      })),
+    ),
+  );
+
   evalScope({
+    loopAt,
+    fit,
     setCps,
     setcps: setCps,
+    setCpm,
+    setcpm: setCpm,
   });
-  return { scheduler, evaluate, start, stop, pause, setCps };
+
+  return { scheduler, evaluate, start, stop, pause, setCps, setPattern };
 }
+
+export const getTrigger =
+  ({ getTime, defaultOutput }) =>
+  async (hap, deadline, duration, cps) => {
+    try {
+      if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
+        await defaultOutput(hap, deadline, duration, cps);
+      }
+      if (hap.context.onTrigger) {
+        // call signature of output / onTrigger is different...
+        await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
+      }
+    } catch (err) {
+      logger(`[cyclist] error: ${err.message}`, 'error');
+    }
+  };

packages/core/signal.mjs

@@ -27,7 +27,7 @@ export const isaw2 = isaw.toBipolar();
  *
  * @return {Pattern}
  * @example
- * "c3 [eb3,g3] g2 [g3,bb3]".legato(saw.slow(4)).note()
+ * "c3 [eb3,g3] g2 [g3,bb3]".note().clip(saw.slow(4))
  * @example
  * saw.range(0,8).segment(8).scale('C major').slow(4).note()
  *

packages/core/spiral.mjs

@@ -0,0 +1,118 @@
+import { Pattern } from './index.mjs';
+
+// polar coords -> xy
+function fromPolar(angle, radius, cx, cy) {
+  const radians = ((angle - 90) * Math.PI) / 180;
+  return [cx + Math.cos(radians) * radius, cy + Math.sin(radians) * radius];
+}
+
+const xyOnSpiral = (angle, margin, cx, cy, rotate = 0) => fromPolar((angle + rotate) * 360, margin * angle, cx, cy); // TODO: logSpiral
+
+// draw spiral / segment of spiral
+function spiralSegment(options) {
+  let {
+    ctx,
+    from = 0,
+    to = 3,
+    margin = 50,
+    cx = 100,
+    cy = 100,
+    rotate = 0,
+    thickness = margin / 2,
+    color = '#0000ff30',
+    cap = 'round',
+    stretch = 1,
+    fromOpacity = 1,
+    toOpacity = 1,
+  } = options;
+  from *= stretch;
+  to *= stretch;
+  rotate *= stretch;
+  ctx.lineWidth = thickness;
+  ctx.lineCap = cap;
+  ctx.strokeStyle = color;
+  ctx.globalAlpha = fromOpacity;
+
+  ctx.beginPath();
+  let [sx, sy] = xyOnSpiral(from, margin, cx, cy, rotate);
+  ctx.moveTo(sx, sy);
+
+  const increment = 1 / 60;
+  let angle = from;
+  while (angle <= to) {
+    const [x, y] = xyOnSpiral(angle, margin, cx, cy, rotate);
+    //ctx.lineWidth = angle*thickness;
+    ctx.globalAlpha = ((angle - from) / (to - from)) * toOpacity;
+    ctx.lineTo(x, y);
+    angle += increment;
+  }
+  ctx.stroke();
+}
+
+Pattern.prototype.spiral = function (options = {}) {
+  const {
+    stretch = 1,
+    size = 80,
+    thickness = size / 2,
+    cap = 'butt', // round butt squar,
+    inset = 3, // start angl,
+    playheadColor = '#ffffff90',
+    playheadLength = 0.02,
+    playheadThickness = thickness,
+    padding = 0,
+    steady = 1,
+    inactiveColor = '#ffffff20',
+    colorizeInactive = 0,
+    fade = true,
+    // logSpiral = true,
+  } = options;
+
+  function spiral({ ctx, time, haps, drawTime }) {
+    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,
+      cy,
+      stretch,
+      cap,
+      thickness,
+    };
+
+    const playhead = {
+      ...settings,
+      thickness: playheadThickness,
+      from: inset - playheadLength,
+      to: inset,
+      color: playheadColor,
+    };
+
+    const [min] = drawTime;
+    const rotate = steady * time;
+    haps.forEach((hap) => {
+      const isActive = hap.whole.begin <= time && hap.endClipped > time;
+      const from = hap.whole.begin - time + inset;
+      const to = hap.endClipped - time + inset - padding;
+      const { color } = hap.context;
+      const opacity = fade ? 1 - Math.abs((hap.whole.begin - time) / min) : 1;
+      spiralSegment({
+        ctx,
+        ...settings,
+        from,
+        to,
+        rotate,
+        color: colorizeInactive || isActive ? color : inactiveColor,
+        fromOpacity: opacity,
+        toOpacity: opacity,
+      });
+    });
+    spiralSegment({
+      ctx,
+      ...playhead,
+      rotate,
+    });
+  }
+
+  return this.onPaint((ctx, time, haps, drawTime) => spiral({ ctx, time, haps, drawTime }));
+};

packages/core/test/solmization.test.js

@@ -0,0 +1,40 @@
+/*test for issue 302 support alternative solmization types */
+import { sol2note } from '../util.mjs';
+import { test } from 'vitest';
+import assert from 'assert';
+
+test('solmization - letters', () => {
+  const result = sol2note(60, 'letters');
+  const expected = 'C4';
+  assert.equal(result, expected);
+});
+
+test('solmization - solfeggio', () => {
+  const result = sol2note(60, 'solfeggio');
+  const expected = 'Do4';
+  assert.equal(result, expected);
+});
+
+test('solmization - indian', () => {
+  const result = sol2note(60, 'indian');
+  const expected = 'Sa4';
+  assert.equal(result, expected);
+});
+
+test('solmization - german', () => {
+  const result = sol2note(60, 'german');
+  const expected = 'C4';
+  assert.equal(result, expected);
+});
+
+test('solmization - byzantine', () => {
+  const result = sol2note(60, 'byzantine');
+  const expected = 'Ni4';
+  assert.equal(result, expected);
+});
+
+test('solmization - japanese', () => {
+  const result = sol2note(60, 'japanese');
+  const expected = 'I4';
+  assert.equal(result, expected);
+});

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

@@ -6,26 +6,29 @@ This program is free software: you can redistribute it and/or modify it under th
 
 // returns true if the given string is a note
 export const isNoteWithOctave = (name) => /^[a-gA-G][#bs]*[0-9]$/.test(name);
-export const isNote = (name) => /^[a-gA-G][#bs]*[0-9]?$/.test(name);
+export const isNote = (name) => /^[a-gA-G][#bsf]*[0-9]?$/.test(name);
 export const tokenizeNote = (note) => {
   if (typeof note !== 'string') {
     return [];
   }
-  const [pc, acc = '', oct] = note.match(/^([a-gA-G])([#bs]*)([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 }[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) => {
@@ -67,13 +70,14 @@ export const getFreq = (noteOrMidi) => {
   return midiToFreq(noteToMidi(noteOrMidi));
 };
 
+const pcs = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
 /**
- * @deprecated does not appear to be referenced or invoked anywhere in the codebase
+ * @deprecated only used in workshop (first-notes)
  * @noAutocomplete
  */
 export const midi2note = (n) => {
   const oct = Math.floor(n / 12) - 1;
-  const pc = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'][n % 12];
+  const pc = pcs[n % 12];
   return pc + oct;
 };
 
@@ -212,3 +216,61 @@ export const splitAt = function (index, value) {
 };
 
 export const zipWith = (f, xs, ys) => xs.map((n, i) => f(n, ys[i]));
+
+export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+/* solmization, not used yet */
+const solfeggio = ['Do', 'Reb', 'Re', 'Mib', 'Mi', 'Fa', 'Solb', 'Sol', 'Lab', 'La', 'Sib', 'Si']; /*solffegio notes*/
+const indian = [
+  'Sa',
+  'Re',
+  'Ga',
+  'Ma',
+  'Pa',
+  'Dha',
+  'Ni',
+]; /*indian musical notes,  seems like they do not use flats or sharps*/
+const german = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Hb', 'H']; /*german & dutch musical notes*/
+const byzantine = [
+  'Ni',
+  'Pab',
+  'Pa',
+  'Voub',
+  'Vou',
+  'Ga',
+  'Dib',
+  'Di',
+  'Keb',
+  'Ke',
+  'Zob',
+  'Zo',
+]; /*byzantine musical notes*/
+const japanese = [
+  'I',
+  'Ro',
+  'Ha',
+  'Ni',
+  'Ho',
+  'He',
+  'To',
+]; /*traditional japanese musical notes, seems like they do not use falts or sharps*/
+
+const english = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
+
+export const sol2note = (n, notation = 'letters') => {
+  const pc =
+    notation === 'solfeggio'
+      ? solfeggio /*check if its is any of the following*/
+      : notation === 'indian'
+      ? indian
+      : notation === 'german'
+      ? german
+      : notation === 'byzantine'
+      ? byzantine
+      : notation === 'japanese'
+      ? japanese
+      : english; /*if not use standard version*/
+  const note = pc[n % 12]; /*calculating the midi value to the note*/
+  const oct = Math.floor(n / 12) - 1;
+  return note + oct;
+};

packages/csound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/csound",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -32,11 +32,11 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@csound/browser": "6.18.5",
+    "@csound/browser": "6.18.7",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^3.2.2"
+    "vite": "^4.3.3"
   }
 }

packages/desktopbridge/README.md

@@ -0,0 +1,3 @@
+# @strudel/desktopbridge
+
+This package contains utilities used to communicate with the Tauri backend

packages/desktopbridge/index.mjs

@@ -1,12 +1,9 @@
 /*
-evaluate.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/evaluate.mjs>
+index.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/desktopbridge/index.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);
-};
+export * from './midibridge.mjs';
+export * from './utils.mjs';
+export * from './oscbridge.mjs';

packages/desktopbridge/loggerbridge.mjs

@@ -0,0 +1,11 @@
+import { listen } from '@tauri-apps/api/event';
+import { logger } from '../core/logger.mjs';
+
+// listen for log events from the Tauri backend and log in the UI
+await listen('log-event', (e) => {
+  if (e.payload == null) {
+    return;
+  }
+  const { message, message_type } = e.payload;
+  logger(message, message_type);
+});

packages/desktopbridge/midibridge.mjs

@@ -0,0 +1,52 @@
+import { Invoke } from './utils.mjs';
+import { Pattern, noteToMidi } from '@strudel.cycles/core';
+
+const ON_MESSAGE = 0x90;
+const OFF_MESSAGE = 0x80;
+const CC_MESSAGE = 0xb0;
+
+Pattern.prototype.midi = function (output) {
+  return this.onTrigger((time, hap, currentTime) => {
+    const { note, nrpnn, nrpv, ccn, ccv } = hap.value;
+    const offset = (time - currentTime) * 1000;
+    const velocity = Math.floor((hap.context?.velocity ?? 0.9) * 100); // TODO: refactor velocity
+    const duration = Math.floor(hap.duration.valueOf() * 1000 - 10);
+    const roundedOffset = Math.round(offset);
+    const midichan = (hap.value.midichan ?? 1) - 1;
+    const requestedport = output ?? 'IAC';
+    const messagesfromjs = [];
+    if (note != null) {
+      const midiNumber = typeof note === 'number' ? note : noteToMidi(note);
+      messagesfromjs.push({
+        requestedport,
+        message: [ON_MESSAGE + midichan, midiNumber, velocity],
+        offset: roundedOffset,
+      });
+      messagesfromjs.push({
+        requestedport,
+        message: [OFF_MESSAGE + midichan, midiNumber, velocity],
+        offset: roundedOffset + duration,
+      });
+    }
+    if (ccv && ccn) {
+      if (typeof ccv !== 'number' || ccv < 0 || ccv > 1) {
+        throw new Error('expected ccv to be a number between 0 and 1');
+      }
+      if (!['string', 'number'].includes(typeof ccn)) {
+        throw new Error('expected ccn to be a number or a string');
+      }
+      const scaled = Math.round(ccv * 127);
+      messagesfromjs.push({
+        requestedport,
+        message: [CC_MESSAGE + midichan, ccn, scaled],
+        offset: roundedOffset,
+      });
+    }
+    // invoke is temporarily blocking, run in an async process
+    if (messagesfromjs.length) {
+      setTimeout(() => {
+        Invoke('sendmidi', { messagesfromjs });
+      });
+    }
+  });
+};

packages/desktopbridge/oscbridge.mjs

@@ -0,0 +1,43 @@
+import { parseNumeral, Pattern } from '@strudel.cycles/core';
+import { Invoke } from './utils.mjs';
+
+Pattern.prototype.osc = function () {
+  return this.onTrigger(async (time, hap, currentTime, cps = 1) => {
+    hap.ensureObjectValue();
+    const cycle = hap.wholeOrPart().begin.valueOf();
+    const delta = hap.duration.valueOf();
+    const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
+    // make sure n and note are numbers
+    controls.n && (controls.n = parseNumeral(controls.n));
+    controls.note && (controls.note = parseNumeral(controls.note));
+
+    const params = [];
+
+    const timestamp = Math.round(Date.now() + (time - currentTime) * 1000);
+
+    Object.keys(controls).forEach((key) => {
+      const val = controls[key];
+      const value = typeof val === 'number' ? val.toString() : val;
+
+      if (value == null) {
+        return;
+      }
+      params.push({
+        name: key,
+        value,
+        valueisnumber: typeof val === 'number',
+      });
+    });
+
+    const messagesfromjs = [];
+    if (params.length) {
+      messagesfromjs.push({ target: '/dirt/play', timestamp, params });
+    }
+
+    if (messagesfromjs.length) {
+      setTimeout(() => {
+        Invoke('sendosc', { messagesfromjs });
+      });
+    }
+  });
+};

packages/desktopbridge/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@strudel/desktopbridge",
+    "version": "0.1.0",
+    "private": true,
+    "description": "tools/shims for communicating between the JS and Tauri (Rust) sides of the Studel desktop app",
+    "main": "index.mjs",
+    "type": "module",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/tidalcycles/strudel.git"
+    },
+    "keywords": [
+      "tidalcycles",
+      "strudel",
+      "pattern",
+      "livecoding",
+      "algorave"
+    ],
+    "author": "Jade Rowland <jaderowlanddev@gmail.com>",
+    "license": "AGPL-3.0-or-later",
+    "bugs": {
+      "url": "https://github.com/tidalcycles/strudel/issues"
+    },
+    "dependencies": {
+        "@strudel.cycles/core": "workspace:*",
+        "@tauri-apps/api": "^1.4.0"
+      },
+    "homepage": "https://github.com/tidalcycles/strudel#readme"
+  }

packages/desktopbridge/utils.mjs

@@ -0,0 +1,4 @@
+import { invoke } from '@tauri-apps/api/tauri';
+
+export const Invoke = invoke;
+export const isTauri = () => window.__TAURI_IPC__ != null;

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

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

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

@@ -6,9 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import * as _WebMidi from 'webmidi';
 import { Pattern, isPattern, logger } from '@strudel.cycles/core';
-import { getAudioContext } from '@strudel.cycles/webaudio';
 import { noteToMidi } from '@strudel.cycles/core';
-
+import { Note } from 'webmidi';
 // if you use WebMidi from outside of this package, make sure to import that instance:
 export const { WebMidi } = _WebMidi;
 
@@ -16,12 +15,28 @@ function supportsMidi() {
   return typeof navigator.requestMIDIAccess === 'function';
 }
 
-export function enableWebMidi(options = {}) {
-  const { onReady, onConnected, onDisconnected } = options;
+function getMidiDeviceNamesString(outputs) {
+  return outputs.map((o) => `'${o.name}'`).join(' | ');
+}
 
+export function enableWebMidi(options = {}) {
+  const { onReady, onConnected, onDisconnected, onEnabled } = options;
+  if (WebMidi.enabled) {
+    return;
+  }
   if (!supportsMidi()) {
     throw new Error('Your Browser does not support WebMIDI.');
   }
+  WebMidi.addListener('connected', () => {
+    onConnected?.(WebMidi);
+  });
+  WebMidi.addListener('enabled', () => {
+    onEnabled?.(WebMidi);
+  });
+  // Reacting when a device becomes unavailable
+  WebMidi.addListener('disconnected', (e) => {
+    onDisconnected?.(WebMidi, e);
+  });
   return new Promise((resolve, reject) => {
     if (WebMidi.enabled) {
       // if already enabled, just resolve WebMidi
@@ -32,13 +47,6 @@ export function enableWebMidi(options = {}) {
       if (err) {
         reject(err);
       }
-      WebMidi.addListener('connected', (e) => {
-        onConnected?.(WebMidi);
-      });
-      // Reacting when a device becomes unavailable
-      WebMidi.addListener('disconnected', (e) => {
-        onDisconnected?.(WebMidi, e);
-      });
       onReady?.(WebMidi);
       resolve(WebMidi);
     });
@@ -47,8 +55,6 @@ export function enableWebMidi(options = {}) {
 // const outputByName = (name: string) => WebMidi.getOutputByName(name);
 const outputByName = (name) => WebMidi.getOutputByName(name);
 
-let midiReady;
-
 // output?: string | number, outputs: typeof WebMidi.outputs
 function getDevice(output, outputs) {
   if (!outputs.length) {
@@ -60,29 +66,19 @@ function getDevice(output, outputs) {
   if (typeof output === 'string') {
     return outputByName(output);
   }
-  return outputs[0];
+  // attempt to default to first IAC device if none is specified
+  const IACOutput = outputs.find((output) => output.name.includes('IAC'));
+  const device = IACOutput ?? outputs[0];
+  if (!device) {
+    throw new Error(
+      `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${getMidiDeviceNamesString(WebMidi.outputs)}`,
+    );
+  }
+
+  return IACOutput ?? outputs[0];
 }
 
-// Pattern.prototype.midi = function (output: string | number, channel = 1) {
 Pattern.prototype.midi = function (output) {
-  if (!supportsMidi()) {
-    throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
-  }
-  /* await */ enableWebMidi({
-    onConnected: ({ outputs }) =>
-      logger(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
-    onDisconnected: ({ outputs }) =>
-      logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
-    onReady: ({ outputs }) => {
-      const device = getDevice(output, outputs);
-      const otherOutputs = outputs
-        .filter((o) => o.name !== device.name)
-        .map((o) => `'${o.name}'`)
-        .join(' | ');
-      midiReady = true;
-      logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`);
-    },
-  });
   if (isPattern(output)) {
     throw new Error(
       `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${
@@ -90,35 +86,43 @@ Pattern.prototype.midi = function (output) {
       }')`,
     );
   }
-  return this.onTrigger((time, hap) => {
-    if (!midiReady) {
+
+  enableWebMidi({
+    onEnabled: ({ outputs }) => {
+      const device = getDevice(output, outputs);
+      const otherOutputs = outputs.filter((o) => o.name !== device.name);
+      logger(
+        `Midi enabled! Using "${device.name}". ${
+          otherOutputs?.length ? `Also available: ${getMidiDeviceNamesString(otherOutputs)}` : ''
+        }`,
+      );
+    },
+    onDisconnected: ({ outputs }) =>
+      logger(`Midi device disconnected! Available: ${getMidiDeviceNamesString(outputs)}`),
+  });
+
+  return this.onTrigger((time, hap, currentTime, cps) => {
+    if (!WebMidi.enabled) {
       return;
     }
     const device = getDevice(output, WebMidi.outputs);
-    if (!device) {
-      throw new Error(
-        `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs
-          .map((o) => `'${o.name}'`)
-          .join(' | ')}`,
-      );
-    }
     hap.ensureObjectValue();
 
-    // calculate time
-    const timingOffset = WebMidi.time - getAudioContext().currentTime * 1000;
-    time = time * 1000 + timingOffset;
+    const offset = (time - currentTime) * 1000;
+    // passing a string with a +num into the webmidi api adds an offset to the current time https://webmidijs.org/api/classes/Output
+    const timeOffsetString = `+${offset}`;
 
     // destructure value
     const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value;
     const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
-    const duration = hap.duration.valueOf() * 1000 - 5;
 
-    if (note) {
-      const midiNumber = noteToMidi(note);
-      device.playNote(midiNumber, midichan, {
-        time,
-        duration,
-        attack: velocity,
+    // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length
+    const duration = Math.floor(hap.duration.valueOf() * 1000 - 10);
+    if (note != null) {
+      const midiNumber = typeof note === 'number' ? note : noteToMidi(note);
+      const midiNote = new Note(midiNumber, { attack: velocity, duration });
+      device.playNote(midiNote, midichan, {
+        time: timeOffsetString,
       });
     }
     if (ccv && ccn) {
@@ -129,7 +133,7 @@ Pattern.prototype.midi = function (output) {
         throw new Error('expected ccn to be a number or a string');
       }
       const scaled = Math.round(ccv * 127);
-      device.sendControlChange(ccn, scaled, midichan, { time });
+      device.sendControlChange(ccn, scaled, midichan, { time: timeOffsetString });
     }
   });
 };

packages/midi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/midi",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Midi API for strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -31,9 +31,9 @@
   "dependencies": {
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
-    "webmidi": "^3.0.21"
+    "webmidi": "^3.1.5"
   },
   "devDependencies": {
-    "vite": "^3.2.2"
+    "vite": "^4.3.3"
   }
 }

packages/mini/krill-parser.js

@@ -1,4 +1,4 @@
-// Generated by Peggy 2.0.1.
+// Generated by Peggy 3.0.2.
 //
 // https://peggyjs.org/
 
@@ -43,16 +43,19 @@ peg$SyntaxError.prototype.format = function(sources) {
       }
     }
     var s = this.location.start;
-    var loc = this.location.source + ":" + s.line + ":" + s.column;
+    var offset_s = (this.location.source && (typeof this.location.source.offset === "function"))
+      ? this.location.source.offset(s)
+      : s;
+    var loc = this.location.source + ":" + offset_s.line + ":" + offset_s.column;
     if (src) {
       var e = this.location.end;
-      var filler = peg$padEnd("", s.line.toString().length, ' ');
+      var filler = peg$padEnd("", offset_s.line.toString().length, ' ');
       var line = src[s.line - 1];
       var last = s.line === e.line ? e.column : line.length + 1;
       var hatLen = (last - s.column) || 1;
       str += "\n --> " + loc + "\n"
           + filler + " |\n"
-          + s.line + " | " + line + "\n"
+          + offset_s.line + " | " + line + "\n"
           + filler + " | " + peg$padEnd("", s.column - 1, ' ')
           + peg$padEnd("", hatLen, "^");
     } else {
@@ -422,11 +425,11 @@ function peg$parse(input, options) {
     }
   }
 
-  function peg$computeLocation(startPos, endPos) {
+  function peg$computeLocation(startPos, endPos, offset) {
     var startPosDetails = peg$computePosDetails(startPos);
     var endPosDetails = peg$computePosDetails(endPos);
 
-    return {
+    var res = {
       source: peg$source,
       start: {
         offset: startPos,
@@ -439,6 +442,11 @@ function peg$parse(input, options) {
         column: endPosDetails.column
       }
     };
+    if (offset && peg$source && (typeof peg$source.offset === "function")) {
+      res.start = peg$source.offset(res.start);
+      res.end = peg$source.offset(res.end);
+    }
+    return res;
   }
 
   function peg$fail(expected) {
@@ -1511,18 +1519,20 @@ function peg$parse(input, options) {
   }
 
   function peg$parsemini() {
-    var s0, s1, s2, s3, s4;
+    var s0, s1, s2, s3, s4, s5, s6;
 
     s0 = peg$currPos;
     s1 = peg$parsews();
     s2 = peg$parsequote();
     if (s2 !== peg$FAILED) {
-      s3 = peg$parsestack_or_choose();
-      if (s3 !== peg$FAILED) {
-        s4 = peg$parsequote();
-        if (s4 !== peg$FAILED) {
+      s3 = peg$parsews();
+      s4 = peg$parsestack_or_choose();
+      if (s4 !== peg$FAILED) {
+        s5 = peg$parsews();
+        s6 = peg$parsequote();
+        if (s6 !== peg$FAILED) {
           peg$savedPos = s0;
-          s0 = peg$f19(s3);
+          s0 = peg$f19(s4);
         } else {
           peg$currPos = s0;
           s0 = peg$FAILED;

packages/mini/krill.pegjs

@@ -182,7 +182,7 @@ polymeter_stack = head:sequence tail:stack_tail?
 // Experimental haskellish parser begins
 
 // mini-notation = a quoted stack
-mini = ws quote sc:stack_or_choose quote
+mini = ws quote ws sc:stack_or_choose ws quote
   { return sc; }
 
 // ------------------ operators ---------------------------

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);
 };
 
@@ -190,3 +205,8 @@ export function minify(thing) {
   }
   return strudel.reify(thing);
 }
+
+// calling this function will cause patterns to parse strings as mini notation by default
+export function miniAllStrings() {
+  strudel.setStringParser(mini);
+}

packages/mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/mini",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Mini notation for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -35,8 +35,8 @@
     "@strudel.cycles/core": "workspace:*"
   },
   "devDependencies": {
-    "peggy": "^2.0.1",
-    "vite": "^3.2.2",
-    "vitest": "^0.25.7"
+    "peggy": "^3.0.2",
+    "vite": "^4.3.3",
+    "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/osc/osc.mjs

@@ -5,6 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import OSC from 'osc-js';
+
 import { logger, parseNumeral, Pattern } from '@strudel.cycles/core';
 
 let connection; // Promise<OSC>
@@ -33,9 +34,6 @@ function connect() {
   return connection;
 }
 
-const latency = 0.1;
-let startedAt = -1;
-
 /**
  *
  * Sends each hap as an OSC message, which can be picked up by SuperCollider or any other OSC-enabled software.
@@ -51,17 +49,16 @@ Pattern.prototype.osc = function () {
     const osc = await connect();
     const cycle = hap.wholeOrPart().begin.valueOf();
     const delta = hap.duration.valueOf();
-    // time should be audio time of onset
-    // currentTime should be current time of audio context (slightly before time)
-    if (startedAt < 0) {
-      startedAt = Date.now() - currentTime * 1000;
-    }
     const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
     // make sure n and note are numbers
     controls.n && (controls.n = parseNumeral(controls.n));
     controls.note && (controls.note = parseNumeral(controls.note));
     const keyvals = Object.entries(controls).flat();
-    const ts = Math.floor(startedAt + (time + latency) * 1000);
+    // time should be audio time of onset
+    // currentTime should be current time of audio context (slightly before time)
+    const offset = (time - currentTime) * 1000;
+    // timestamp in milliseconds used to trigger the osc bundle at a precise moment
+    const ts = Math.floor(Date.now() + offset);
     const message = new OSC.Message('/dirt/play', ...keyvals);
     const bundle = new OSC.Bundle([message], ts);
     bundle.timestamp(ts); // workaround for https://github.com/adzialocha/osc-js/issues/60

packages/osc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/osc",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "OSC messaging for strudel",
   "main": "osc.mjs",
   "publishConfig": {
@@ -40,7 +40,7 @@
     "osc-js": "^2.4.0"
   },
   "devDependencies": {
-    "pkg": "^5.7.0",
-    "vite": "^3.2.2"
+    "pkg": "^5.8.1",
+    "vite": "^4.3.3"
   }
 }

packages/react/examples/nano-repl/package.json

@@ -15,17 +15,18 @@
     "@strudel.cycles/osc": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
+    "@strudel.cycles/soundfonts": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
     "@strudel.cycles/tonal": "workspace:*",
     "@strudel.cycles/react": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.16",
-    "tailwindcss": "^3.1.8",
-    "vite": "^3.0.7"
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
+    "vite": "^4.3.3"
   }
 }

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

@@ -1,22 +1,34 @@
 import { controls, evalScope } from '@strudel.cycles/core';
 import { CodeMirror, useHighlighting, useKeydown, useStrudel, flash } from '@strudel.cycles/react';
-import { getAudioContext, initAudioOnFirstClick, panic, webaudioOutput } from '@strudel.cycles/webaudio';
+import {
+  getAudioContext,
+  initAudioOnFirstClick,
+  panic,
+  webaudioOutput,
+  registerSynthSounds,
+} from '@strudel.cycles/webaudio';
+import { registerSoundfonts } from '@strudel.cycles/soundfonts';
 import { useCallback, useState } from 'react';
 import './style.css';
 // import { prebake } from '../../../../../repl/src/prebake.mjs';
 
 initAudioOnFirstClick();
 
-// TODO: only import stuff when play is pressed?
-evalScope(
-  controls,
-  import('@strudel.cycles/core'),
-  import('@strudel.cycles/tonal'),
-  import('@strudel.cycles/mini'),
-  import('@strudel.cycles/xen'),
-  import('@strudel.cycles/webaudio'),
-  import('@strudel.cycles/osc'),
-);
+async function init() {
+  // TODO: only import stuff when play is pressed?
+  const loadModules = evalScope(
+    controls,
+    import('@strudel.cycles/core'),
+    import('@strudel.cycles/tonal'),
+    import('@strudel.cycles/mini'),
+    import('@strudel.cycles/xen'),
+    import('@strudel.cycles/webaudio'),
+    import('@strudel.cycles/osc'),
+  );
+
+  await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
+}
+init();
 
 const defaultTune = `samples({
   bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
@@ -31,7 +43,7 @@ stack(
   .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
   .add(perlin.range(0,.5)) // random pitch variation
   .superimpose(add(.05)) // add second, slightly detuned voice
-  .n() // wrap in "n"
+  .note() // wrap in "note"
   .decay(.15).sustain(0) // make each note of equal length
   .s('sawtooth') // waveform
   .gain(.4) // turn down
@@ -40,7 +52,7 @@ stack(
   ,"<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
-  .n() // wrap in "n"
+  .note() // wrap in "n"
   .s('square') // waveform
   .gain(.16) // turn down
   .cutoff(500) // fixed cutoff
@@ -49,7 +61,7 @@ stack(
   ,"a4 c5 <e6 a6>".struct("x(5,8)")
   .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
   .add(perlin.range(0,.5)) // random pitch variation
-  .n() // wrap in "n"
+  .note() // wrap in "note"
   .decay(.1).sustain(0) // make notes short
   .s('triangle') // waveform
   .degradeBy(perlin.range(0,.5)) // randomly controlled random removal :)
@@ -70,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'),
@@ -103,7 +116,7 @@ function App() {
           }
         }
       },
-      [scheduler, evaluate, view],
+      [scheduler, evaluate, view, code],
     ),
   );
   return (

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "React components for strudel",
   "main": "src/index.js",
   "publishConfig": {
@@ -32,18 +32,19 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/autocomplete": "^6.6.0",
+    "@codemirror/lang-javascript": "^6.1.7",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.7.3",
-    "@lezer/highlight": "^1.1.3",
-    "@replit/codemirror-emacs": "^6.0.0",
-    "@replit/codemirror-vim": "^6.0.6",
+    "@codemirror/view": "^6.10.0",
+    "@lezer/highlight": "^1.1.4",
+    "@replit/codemirror-emacs": "^6.0.1",
+    "@replit/codemirror-vim": "^6.0.14",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
-    "@uiw/codemirror-themes": "^4.12.4",
-    "@uiw/react-codemirror": "^4.12.4",
+    "@strudel/codemirror": "workspace:*",
+    "@uiw/codemirror-themes": "^4.19.16",
+    "@uiw/react-codemirror": "^4.19.16",
     "react-hook-inview": "^4.5.0"
   },
   "peerDependencies": {
@@ -51,14 +52,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^2.2.0",
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.0.24",
-    "vite": "^3.2.2"
+    "tailwindcss": "^3.3.2",
+    "vite": "^4.3.3"
   }
 }

packages/react/src/components/CodeMirror6.jsx

@@ -1,109 +1,38 @@
-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 } 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';
-
-export const setFlash = StateEffect.define();
-const flashField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(flash, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setFlash)) {
-          if (e.value) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
-            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
-          } else {
-            flash = Decoration.set([]);
-          }
-        }
-      }
-      return flash;
-    } catch (err) {
-      console.warn('flash error', err);
-      return flash;
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-export const flash = (view) => {
-  view.dispatch({ effects: setFlash.of(true) });
-  setTimeout(() => {
-    view.dispatch({ effects: setFlash.of(false) });
-  }, 200);
-};
-
-export const setHighlights = StateEffect.define();
-const highlightField = StateField.define({
-  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 ${color};` } });
-                  const 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,
+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,
-  // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
-  // autocompletion({ override: [strudelAutocomplete] }),
-  autocompletion({ override: [] }), // wait for https://github.com/uiwjs/react-codemirror/pull/458
-];
+  flash,
+  highlightMiniLocations,
+  updateMiniLocations,
+} from '@strudel/codemirror';
+import './style.css';
+
+export { flash, highlightMiniLocations, updateMiniLocations };
+
+const staticExtensions = [javascript(), flashField, highlightExtension];
 
 export default function CodeMirror({
   value,
   onChange,
   onViewChanged,
   onSelectionChange,
+  onDocChange,
   theme,
   keybindings,
+  isLineNumbersDisplayed,
+  isAutoCompletionEnabled,
+  isLineWrappingEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
-  options,
-  editorDidMount,
 }) {
   const handleOnChange = useCallback(
     (value) => {
@@ -111,30 +40,52 @@ export default function CodeMirror({
     },
     [onChange],
   );
+
   const handleOnCreateEditor = useCallback(
     (view) => {
       onViewChanged?.(view);
     },
     [onViewChanged],
   );
+
   const handleOnUpdate = useCallback(
     (viewUpdate) => {
+      if (viewUpdate.docChanged && onDocChange) {
+        onDocChange?.(viewUpdate);
+      }
       if (viewUpdate.selectionSet && onSelectionChange) {
         onSelectionChange?.(viewUpdate.state.selection);
       }
     },
     [onSelectionChange],
   );
+
   const extensions = useMemo(() => {
+    let _extensions = [...staticExtensions];
     let bindings = {
       vim,
       emacs,
     };
+
     if (bindings[keybindings]) {
-      return [...staticExtensions, bindings[keybindings]()];
+      _extensions.push(bindings[keybindings]());
     }
-    return staticExtensions;
-  }, [keybindings]);
+
+    if (isAutoCompletionEnabled) {
+      _extensions.push(javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }));
+    } else {
+      _extensions.push(autocompletion({ override: [] }));
+    }
+
+    if (isLineWrappingEnabled) {
+      _extensions.push(EditorView.lineWrapping);
+    }
+
+    return _extensions;
+  }, [keybindings, isAutoCompletionEnabled, isLineWrappingEnabled]);
+
+  const basicSetup = useMemo(() => ({ lineNumbers: isLineNumbersDisplayed }), [isLineNumbersDisplayed]);
+
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
@@ -144,107 +95,8 @@ export default function CodeMirror({
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
+        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

@@ -18,16 +18,24 @@ export function MiniRepl({
   tune,
   hideOutsideView = false,
   enableKeyboard,
+  onTrigger,
   drawTime,
   punchcard,
+  punchcardLabels,
+  onPaint,
   canvasHeight = 200,
+  fontSize = 18,
+  fontFamily,
+  hideHeader = false,
   theme,
+  keybindings,
+  isLineNumbersDisplayed,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
   const drawContext = useCallback(
-    !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
-    [drawTime],
+    punchcard ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+    [punchcard],
   );
   const {
     code,
@@ -47,11 +55,23 @@ export function MiniRepl({
   } = useStrudel({
     initialCode: tune,
     defaultOutput: webaudioOutput,
-    editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
+    editPattern: (pat, id) => {
+      //pat = pat.withContext((ctx) => ({ ...ctx, id }));
+      if (onTrigger) {
+        pat = pat.onTrigger(onTrigger, false);
+      }
+      if (onPaint) {
+        pat = pat.onPaint(onPaint);
+      } else if (punchcard) {
+        pat = pat.punchcard({ labels: punchcardLabels });
+      }
+      return pat;
+    },
     getTime,
     evalOnMount,
     drawContext,
     drawTime,
+    afterEval: ({ meta }) => setMiniLocations(meta.miniLocations),
   });
 
   const [view, setView] = useState();
@@ -65,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'),
@@ -82,7 +102,7 @@ export function MiniRepl({
               e.preventDefault();
               flash(view);
               await activateCode();
-            } else if (e.code === 'Period') {
+            } else if (e.key === '.' || e.code === 'Period') {
               stop();
               e.preventDefault();
             }
@@ -93,26 +113,6 @@ export function MiniRepl({
     ),
   );
 
-  // set active pattern on ctrl+enter
-  useLayoutEffect(() => {
-    if (enableKeyboard) {
-      const handleKeyPress = async (e) => {
-        if (e.ctrlKey || e.altKey) {
-          if (e.code === 'Enter') {
-            e.preventDefault();
-            flash(view);
-            await activateCode();
-          } else if (e.code === 'Period') {
-            stop();
-            e.preventDefault();
-          }
-        }
-      };
-      window.addEventListener('keydown', handleKeyPress, true);
-      return () => window.removeEventListener('keydown', handleKeyPress, true);
-    }
-  }, [enableKeyboard, pattern, code, evaluate, stop, view]);
-
   const [log, setLog] = useState([]);
   useLogger(
     useCallback((e) => {
@@ -121,7 +121,7 @@ export function MiniRepl({
       // const logId = data?.pattern?.meta?.id;
       if (logId === replId) {
         setLog((l) => {
-          return l.concat([e.detail]).slice(-10);
+          return l.concat([e.detail]).slice(-8);
         });
       }
     }, []),
@@ -129,33 +129,46 @@ export function MiniRepl({
 
   return (
     <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
-      <div className="flex justify-between bg-lineHighlight">
-        <div className="flex">
-          <button
-            className={cx(
-              'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
-              started ? 'animate-pulse' : '',
-            )}
-            onClick={() => togglePlay()}
-          >
-            <Icon type={started ? 'stop' : 'play'} />
-          </button>
-          <button
-            className={cx(
-              'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
-              isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
-            )}
-            onClick={() => activateCode()}
-          >
-            <Icon type="refresh" />
-          </button>
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => togglePlay()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => activateCode()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
         </div>
-        {error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
-      </div>
+      )}
       <div className="overflow-auto relative">
-        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
+        {show && (
+          <CodeMirror6
+            value={code}
+            onChange={setCode}
+            onViewChanged={setView}
+            theme={theme}
+            fontFamily={fontFamily}
+            fontSize={fontSize}
+            keybindings={keybindings}
+            isLineNumbersDisplayed={isLineNumbersDisplayed}
+          />
+        )}
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
       </div>
-      {drawTime && (
+      {punchcard && (
         <canvas
           id={canvasId}
           className="w-full pointer-events-none"

packages/react/src/components/style.css

@@ -1,6 +1,6 @@
 :root {
   --background: #222;
-  --lineBackground: #22222250;
+  --lineBackground: #22222299;
   --foreground: #fff;
   --caret: #ffcc00;
   --selection: rgba(128, 203, 196, 0.5);
@@ -24,3 +24,7 @@
 .cm-theme-light {
   width: 100%;
 }
+
+footer {
+  z-index: 0 !important;
+}

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) {
@@ -17,12 +25,12 @@ function useHighlighting({ view, pattern, active, getTime }) {
             const begin = Math.max(lastEnd.current ?? audioTime, audioTime - 1 / 10, -0.01); // negative time seems buggy
             const span = [round(begin), round(audioTime + 1 / 60)];
             lastEnd.current = span[1];
-            highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
+            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/hooks/usePatternFrame.mjs

@@ -25,10 +25,10 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2]
       const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase);
       lastFrame.current = phase;
       visibleHaps.current = (visibleHaps.current || [])
-        .filter((h) => h.whole.end >= phase - lookbehind - lookahead) // in frame
+        .filter((h) => h.endClipped >= phase - lookbehind - lookahead) // in frame
         .concat(haps.filter((h) => h.hasOnset()));
       onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime);
-    }, [pattern]),
+    }, [pattern, onDraw]),
   );
   useEffect(() => {
     if (started) {

packages/react/src/hooks/useStrudel.mjs

@@ -18,6 +18,7 @@ function useStrudel({
   canvasId,
   drawContext,
   drawTime = [-2, 2],
+  paintOptions = {},
 }) {
   const id = useMemo(() => s4(), []);
   canvasId = canvasId || `canvas-${id}`;
@@ -29,7 +30,8 @@ function useStrudel({
   const [pattern, setPattern] = useState();
   const [started, setStarted] = useState(false);
   const isDirty = code !== activeCode;
-  const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);
+  //const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);
+  const shouldPaint = useCallback((pat) => !!pat?.context?.onPaint, []);
 
   // TODO: make sure this hook reruns when scheduler.started changes
   const { scheduler, evaluate, start, stop, pause, setCps } = useMemo(
@@ -46,9 +48,9 @@ function useStrudel({
         drawContext,
         transpiler,
         editPattern,
-        beforeEval: ({ code }) => {
+        beforeEval: async ({ code }) => {
           setCode(code);
-          beforeEval?.();
+          await beforeEval?.();
         },
         afterEval: (res) => {
           const { pattern: _pattern, code } = res;
@@ -84,9 +86,9 @@ function useStrudel({
     (pattern, time, haps, drawTime) => {
       const { onPaint } = pattern.context || {};
       const ctx = typeof drawContext === 'function' ? drawContext(canvasId) : drawContext;
-      onPaint?.(ctx, time, haps, drawTime);
+      onPaint?.(ctx, time, haps, drawTime, paintOptions);
     },
-    [drawContext, canvasId],
+    [drawContext, canvasId, paintOptions],
   );
 
   const drawFirstFrame = useCallback(

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
@@ -8,4 +8,5 @@ export { default as usePostMessage } from './hooks/usePostMessage';
 export { default as useKeydown } from './hooks/useKeydown';
 export { default as useEvent } from './hooks/useEvent';
 export { default as strudelTheme } from './themes/strudel-theme';
+export { default as teletext } from './themes/teletext';
 export { default as cx } from './cx';

packages/react/src/themes/algoboy.js

@@ -12,6 +12,7 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: '#0f380f',
   light: true,
+  customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
   theme: 'light',
@@ -35,5 +36,6 @@ export default createTheme({
     { tag: t.propertyName, color: '#0f380f' },
     { tag: t.className, color: '#0f380f' },
     { tag: t.invalid, color: '#0f380f' },
+    { tag: [t.unit, t.punctuation], color: '#0f380f' },
   ],
 });

packages/react/src/themes/blackscreen.js

@@ -33,5 +33,6 @@ export default createTheme({
     { tag: t.propertyName, color: 'white' },
     { tag: t.className, color: 'white' },
     { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
   ],
 });

packages/react/src/themes/bluescreen.js

@@ -36,5 +36,6 @@ export default createTheme({
     { tag: t.propertyName, color: 'white' },
     { tag: t.className, color: 'white' },
     { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
   ],
 });

packages/react/src/themes/strudel-theme.js

@@ -40,5 +40,6 @@ export default createTheme({
 
     { tag: t.className, color: '#decb6b' },
     { tag: t.invalid, color: '#ffffff' },
+    { tag: [t.unit, t.punctuation], color: '#82aaff' },
   ],
 });

packages/react/src/themes/teletext.js

@@ -0,0 +1,50 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+let colorA = '#6edee4';
+//let colorB = 'magenta';
+let colorB = 'white';
+let colorC = 'red';
+let colorD = '#f8fc55';
+
+export const settings = {
+  background: '#000000',
+  foreground: colorA, // whats that?
+  caret: colorC,
+  selection: colorD,
+  selectionMatch: colorA,
+  lineHighlight: '#6edee440', // panel bg
+  lineBackground: '#00000040',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+  customStyle: '.cm-line { line-height: 1 }',
+};
+
+let punctuation = colorD;
+let mini = colorB;
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: colorA },
+    { tag: t.operator, color: mini },
+    { tag: t.special(t.variableName), color: colorA },
+    { tag: t.typeName, color: colorA },
+    { tag: t.atom, color: colorA },
+    { tag: t.number, color: mini },
+    { tag: t.definition(t.variableName), color: colorA },
+    { tag: t.string, color: mini },
+    { tag: t.special(t.string), color: mini },
+    { tag: t.comment, color: punctuation },
+    { tag: t.variableName, color: colorA },
+    { tag: t.tagName, color: colorA },
+    { tag: t.bracket, color: punctuation },
+    { tag: t.meta, color: colorA },
+    { tag: t.attributeName, color: colorA },
+    { tag: t.propertyName, color: colorA }, // methods
+    { tag: t.className, color: colorA },
+    { tag: t.invalid, color: colorC },
+    { tag: [t.unit, t.punctuation], color: punctuation },
+  ],
+});

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/serial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/serial",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Webserial API for strudel",
   "main": "serial.mjs",
   "publishConfig": {
@@ -32,6 +32,6 @@
     "@strudel.cycles/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^3.2.2"
+    "vite": "^4.3.3"
   }
 }

packages/soundfonts/fontloader.mjs

@@ -153,5 +153,3 @@ export function registerSoundfonts() {
     );
   });
 }
-
-registerSoundfonts();

packages/soundfonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/soundfonts",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Soundsfont support for strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -36,7 +36,7 @@
     "soundfont2": "^0.4.0"
   },
   "devDependencies": {
-    "node-fetch": "^3.2.6",
-    "vite": "^3.2.2"
+    "node-fetch": "^3.3.1",
+    "vite": "^4.3.3"
   }
 }

packages/superdough/README.md

@@ -0,0 +1,166 @@
+# superdough
+
+superdough is a simple web audio sampler and synth, intended for live coding.
+It is the default output of [strudel](https://strudel.tidalcycles.org/).
+This package has no ties to strudel and can be used to quickly bake your own music system on the web.
+
+## Install
+
+via npm:
+
+```js
+npm i superdough --save
+```
+
+## Use
+
+```js
+import { superdough, samples, initAudioOnFirstClick, registerSynthSounds } from 'superdough';
+
+const init = Promise.all([
+  initAudioOnFirstClick(),
+  samples('github:tidalcycles/Dirt-Samples/master'),
+  registerSynthSounds(),
+]);
+
+const loop = (t = 0) => {
+  // superdough(value, time, duration)
+  superdough({ s: 'bd', delay: 0.5 }, t);
+  superdough({ note: 'g1', s: 'sawtooth', cutoff: 600, resonance: 8 }, t, 0.125);
+  superdough({ note: 'g2', s: 'sawtooth', cutoff: 600, resonance: 8 }, t + 0.25, 0.125);
+  superdough({ s: 'hh' }, t + 0.25);
+  superdough({ s: 'sd', room: 0.5 }, t + 0.5);
+  superdough({ s: 'hh' }, t + 0.75);
+};
+
+document.getElementById('play').addEventListener('click', async () => {
+  await init;
+  let t = 0.1;
+  while (t < 16) {
+    loop(t++);
+  }
+});
+```
+
+[Open this in Codesandbox](https://codesandbox.io/s/superdough-demo-forked-sf8djh?file=/src/index.js)
+
+## API
+
+### superdough(value, deadline, duration)
+
+```js
+superdough({ s: 'bd', delay: 0.5 }, 0, 1);
+```
+
+- `value`: the sound properties:
+  - `s`: the name of the sound as loaded via `samples` or `registerSound`
+  - `n`: selects sample with given index
+  - `bank`: prefix_ that is attached to the sound, e.g. `{ s: 'bd', bank: 'RolandTR909' }` = `{ s: 'RolandTR909_bd' }`
+  - `gain`: gain from 0 to 1 (higher values also work but might clip)
+  - `velocity`: additional gain multiplier
+  - `cutoff`: low pass filter cutoff
+  - `resonance`: low pass filter resonance
+  - `hcutoff`: high pass filter cutoff
+  - `hresonance`: high pass filter resonance
+  - `bandf`: band pass filter cutoff
+  - `bandq`: band pass  filter resonance
+  - `crush`: amplitude bit crusher using given number of bits
+  - `shape`: distortion effect from 0 (none) to 1 (full). might get loud!
+  - `pan`: stereo panning from 0 (left) to 1 (right)
+  - `vowel`: vowel filter. possible values: "a", "e", "i", "o", "u"
+  - `delay`: delay mix
+  - `delayfeedback`: delay feedback
+  - `delaytime`: delay time
+  - `room`: reverb mix
+  - `size`: reverb room size
+  - `orbit`: bus name for global effects `delay` and `room`. same orbits will get the same effects
+  - `freq`: repitches sound to given frequency in Hz
+  - `note`: repitches sound to given note or midi number
+  - `cut`: sets cut group. Sounds of same group will cut each other off
+  - `clip`: multiplies duration with given number
+  - `speed`: repitches sound by given factor
+  - `begin`: moves beginning of sample to given factor (between 0 and 1)
+  - `end`: moves end of sample to given factor (between 0 and 1)
+  - `attack`: seconds of attack phase
+  - `decay`: seconds of decay phase
+  - `sustain`: gain of sustain phase
+  - `release`: seconds of release phase
+- `deadline`: seconds until the sound should play (0 = immediate)
+- `duration`: seconds the sound should last. optional for one shot samples, required for synth sounds
+
+### registerSynthSounds()
+
+Loads the default waveforms `sawtooth`, `square`, `triangle` and `sine`. Use them like this:
+
+```js
+superdough({ s:'sawtooth' }, 0, 1)
+```
+
+The duration needs to be set for these sounds!
+
+### samples(sampleMap)
+
+allows you to load samples from URLs. There are 3 ways to load samples
+
+1. sample map object
+2. url of sample map json file
+3. github repo
+
+#### sample map object
+
+You can pass a sample map like this:
+
+```js
+samples({
+  '_base': 'https://raw.githubusercontent.com/felixroos/samples/main/',
+  'bd': 'president/president_bd.mp3',
+  'sd': ['president/president_sd.mp3', 'president/president_sd2.mp3'],
+  'hh': ['president/president_hh.mp3'],
+})
+```
+
+The `_base` property defines the root url while the others declare one or more sample paths for each sound.
+
+For example the full URL for `bd` would then be `https://raw.githubusercontent.com/felixroos/samples/main/president/president_bd.mp3`
+
+A loaded sound can then be played with `superdough({ s: 'bd' }, 0)`.
+
+If you declare multiple sounds, you can select them with `n`: `superdough({ s: 'sd', n: 1 }, 0)`
+
+The duration property is not needed for samples.
+
+#### loading samples from a json file
+
+Instead of passing an object as a sample map, you can also pass a URL to a json that contains a sample map:
+
+```js
+samples('https://raw.githubusercontent.com/felixroos/samples/main/strudel.json')
+```
+
+The json file is expected to have the same format as described above.
+
+#### loading samples from a github repo
+
+Because it is common to use github for samples, there is a short way to load a sample map from github:
+
+```js
+samples('github:tidalcycles/Dirt-Samples/master')
+```
+
+The format is `github:<user>/<repo>/<branch>`.
+
+It expects a `strudel.json` file to be present at the root of the given repository, which declares the sample paths in the repo.
+
+The format is also expected to be the same as explained above.
+
+### initAudioOnFirstClick()
+
+Initializes audio and makes sure it is playable after the first click in the document. A click is needed because of the [Autoplay Policy](https://www.w3.org/TR/autoplay-detection/).
+You can call this function when the document loads.
+Then just make sure your first call of `superdough` happens after a click of something.
+
+## Credits
+
+- [ZZFX](https://github.com/KilledByAPixel/ZzFX) used for synths starting with z
+- [SuperDirt](https://github.com/musikinformatik/SuperDirt)
+- [WebDirt](https://github.com/dktr0/WebDirt)

packages/superdough/example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/superdough/example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Superdough Example</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <button id="play">PLAAAAAAAY</button>
+    <script src="/main.js" type="module"></script>
+  </body>
+</html>

packages/superdough/example/main.js

@@ -0,0 +1,25 @@
+import { superdough, samples, initAudioOnFirstClick, registerSynthSounds } from 'superdough';
+
+const init = Promise.all([
+  initAudioOnFirstClick(),
+  samples('github:tidalcycles/Dirt-Samples/master'),
+  registerSynthSounds(),
+]);
+
+const loop = (t = 0) => {
+  // superdough(value, time, duration)
+  superdough({ s: 'bd', delay: 0.5 }, t);
+  superdough({ note: 'g1', s: 'sawtooth', cutoff: 600, resonance: 8 }, t, 0.125);
+  superdough({ note: 'g2', s: 'sawtooth', cutoff: 600, resonance: 8 }, t + 0.25, 0.125);
+  superdough({ s: 'hh' }, t + 0.25);
+  superdough({ s: 'sd', room: 0.5 }, t + 0.5);
+  superdough({ s: 'hh' }, t + 0.75);
+};
+
+document.getElementById('play').addEventListener('click', async () => {
+  await init;
+  let t = 0.1;
+  while (t < 16) {
+    loop(t++);
+  }
+});

packages/superdough/example/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "superdough-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "superdough": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^4.4.5"
+  }
+}

packages/superdough/helpers.mjs

@@ -1,4 +1,5 @@
-import { getAudioContext } from './webaudio.mjs';
+import { getAudioContext } from './superdough.mjs';
+import { clamp } from './util.mjs';
 
 export function gainNode(value) {
   const node = getAudioContext().createGain();
@@ -6,17 +7,6 @@ export function gainNode(value) {
   return node;
 }
 
-export const getOscillator = ({ s, freq, t }) => {
-  // make oscillator
-  const o = getAudioContext().createOscillator();
-  o.type = s || 'triangle';
-  o.frequency.value = Number(freq);
-  o.start(t);
-  //o.stop(t + duration + release);
-  const stop = (time) => o.stop(time);
-  return { node: o, stop };
-};
-
 // alternative to getADSR returning the gain node and a stop handle to trigger the release anytime in the future
 export const getEnvelope = (attack, decay, sustain, release, velocity, begin) => {
   const gainNode = getAudioContext().createGain();
@@ -39,6 +29,22 @@ export const getEnvelope = (attack, decay, sustain, release, velocity, begin) =>
   };
 };
 
+export const getExpEnvelope = (attack, decay, sustain, release, velocity, begin) => {
+  sustain = Math.max(0.001, sustain);
+  velocity = Math.max(0.001, velocity);
+  const gainNode = getAudioContext().createGain();
+  gainNode.gain.setValueAtTime(0.0001, begin);
+  gainNode.gain.exponentialRampToValueAtTime(velocity, begin + attack);
+  gainNode.gain.exponentialRampToValueAtTime(sustain * velocity, begin + attack + decay);
+  return {
+    node: gainNode,
+    stop: (t) => {
+      // similar to getEnvelope, this will glitch if sustain level has not been reached
+      gainNode.gain.exponentialRampToValueAtTime(0.0001, t + release);
+    },
+  };
+};
+
 export const getADSR = (attack, decay, sustain, release, velocity, begin, end) => {
   const gainNode = getAudioContext().createGain();
   gainNode.gain.setValueAtTime(0, begin);
@@ -61,10 +67,48 @@ export const getADSR = (attack, decay, sustain, release, velocity, begin, end) =
   return gainNode;
 };
 
-export const getFilter = (type, frequency, Q) => {
-  const filter = getAudioContext().createBiquadFilter();
-  filter.type = type;
-  filter.frequency.value = frequency;
-  filter.Q.value = Q;
-  return filter;
+export const getParamADSR = (param, attack, decay, sustain, release, min, max, begin, end) => {
+  const range = max - min;
+  const peak = min + range;
+  const sustainLevel = min + sustain * range;
+  param.setValueAtTime(min, begin);
+  param.linearRampToValueAtTime(peak, begin + attack);
+  param.linearRampToValueAtTime(sustainLevel, begin + attack + decay);
+  param.setValueAtTime(sustainLevel, end);
+  param.linearRampToValueAtTime(min, end + Math.max(release, 0.1));
 };
+
+export function createFilter(
+  context,
+  type,
+  frequency,
+  Q,
+  attack,
+  decay,
+  sustain,
+  release,
+  fenv,
+  start,
+  end,
+  fanchor = 0.5,
+) {
+  const filter = context.createBiquadFilter();
+  filter.type = type;
+  filter.Q.value = Q;
+  filter.frequency.value = frequency;
+
+  // Apply ADSR to filter frequency
+  if (!isNaN(fenv) && fenv !== 0) {
+    const offset = fenv * fanchor;
+
+    const min = clamp(2 ** -offset * frequency, 0, 20000);
+    const max = clamp(2 ** (fenv - offset) * frequency, 0, 20000);
+
+    // console.log('min', min, 'max', max);
+
+    getParamADSR(filter.frequency, attack, decay, sustain, release, min, max, start, end);
+    return filter;
+  }
+
+  return filter;
+}

packages/superdough/index.mjs

@@ -1,18 +1,12 @@
 /*
-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>
+index.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/superdough/index.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']);
-  });
-});
+export * from './superdough.mjs';
+export * from './sampler.mjs';
+export * from './helpers.mjs';
+export * from './synth.mjs';
+export * from './zzfx.mjs';
+export * from './logger.mjs';

packages/superdough/logger.mjs

@@ -0,0 +1,7 @@
+let log = (msg) => console.log(msg);
+
+export const logger = (...args) => log(...args);
+
+export const setLogger = (fn) => {
+  log = fn;
+};

packages/superdough/package.json

@@ -1,13 +1,16 @@
 {
-  "name": "@strudel.cycles/tone",
-  "version": "0.7.0",
-  "description": "Tone.js API for strudel",
+  "name": "superdough",
+  "version": "0.9.8",
+  "description": "simple web audio synth and sampler intended for live coding. inspired by superdirt and webdirt.",
   "main": "index.mjs",
   "type": "module",
   "publishConfig": {
-    "main": "dist/index.js",
+    "main": "dist/index.cjs",
     "module": "dist/index.mjs"
   },
+  "directories": {
+    "example": "examples"
+  },
   "scripts": {
     "build": "vite build",
     "prepublishOnly": "npm run build"
@@ -29,12 +32,10 @@
     "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": "^3.2.2",
-    "vitest": "^0.25.7"
+    "vite": "^4.3.3"
+  },
+  "dependencies": {
+    "nanostores": "^0.8.1"
   }
 }

packages/superdough/sampler.mjs

@@ -1,6 +1,7 @@
-import { logger, noteToMidi, valueToMidi } from '@strudel.cycles/core';
+import { noteToMidi, valueToMidi } from './util.mjs';
 import { getAudioContext, registerSound } from './index.mjs';
 import { getEnvelope } from './helpers.mjs';
+import { logger } from './logger.mjs';
 
 const bufferCache = {}; // string: Promise<ArrayBuffer>
 const loadCache = {}; // string: Promise<ArrayBuffer>
@@ -21,7 +22,7 @@ function humanFileSize(bytes, si) {
   return bytes.toFixed(1) + ' ' + units[u];
 }
 
-export const getSampleBufferSource = async (s, n, note, speed, freq, bank) => {
+export const getSampleBufferSource = async (s, n, note, speed, freq, bank, resolveUrl) => {
   let transpose = 0;
   if (freq !== undefined && note !== undefined) {
     logger('[sampler] hap has note and freq. ignoring note', 'warning');
@@ -45,6 +46,9 @@ export const getSampleBufferSource = async (s, n, note, speed, freq, bank) => {
     transpose = -midiDiff(closest); // semitones to repitch
     sampleUrl = bank[closest][n % bank[closest].length];
   }
+  if (resolveUrl) {
+    sampleUrl = await resolveUrl(sampleUrl);
+  }
   let buffer = await loadBuffer(sampleUrl, ac, s, n);
   if (speed < 0) {
     // should this be cached?
@@ -91,6 +95,46 @@ export const getLoadedBuffer = (url) => {
   return bufferCache[url];
 };
 
+export const processSampleMap = (sampleMap, fn, baseUrl = sampleMap._base || '') => {
+  return Object.entries(sampleMap).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      value = [value];
+    }
+    if (typeof value !== 'object') {
+      throw new Error('wrong sample map format for ' + key);
+    }
+    baseUrl = value._base || baseUrl;
+    const replaceUrl = (v) => (baseUrl + v).replace('github:', 'https://raw.githubusercontent.com/');
+    if (Array.isArray(value)) {
+      //return [key, value.map(replaceUrl)];
+      value = value.map(replaceUrl);
+    } else {
+      // must be object
+      value = Object.fromEntries(
+        Object.entries(value).map(([note, samples]) => {
+          return [note, (typeof samples === 'string' ? [samples] : samples).map(replaceUrl)];
+        }),
+      );
+    }
+    fn(key, value);
+  });
+};
+
+// allows adding a custom url prefix handler
+// for example, it is used by the desktop app to load samples starting with '~/music'
+let resourcePrefixHandlers = {};
+export function registerSamplesPrefix(prefix, resolve) {
+  resourcePrefixHandlers[prefix] = resolve;
+}
+// finds a prefix handler for the given url (if any)
+function getSamplesPrefixHandler(url) {
+  const handler = Object.entries(resourcePrefixHandlers).find(([key]) => url.startsWith(key));
+  if (handler) {
+    return handler[1];
+  }
+  return;
+}
+
 /**
  * Loads a collection of samples to use with `s`
  * @example
@@ -107,6 +151,11 @@ export const getLoadedBuffer = (url) => {
 
 export const samples = async (sampleMap, baseUrl = sampleMap._base || '', options = {}) => {
   if (typeof sampleMap === 'string') {
+    // check if custom prefix handler
+    const handler = getSamplesPrefixHandler(sampleMap);
+    if (handler) {
+      return handler(sampleMap);
+    }
     if (sampleMap.startsWith('github:')) {
       let [_, path] = sampleMap.split('github:');
       path = path.endsWith('/') ? path.slice(0, -1) : path;
@@ -130,51 +179,37 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '', option
       });
   }
   const { prebake, tag } = options;
-  Object.entries(sampleMap).forEach(([key, value]) => {
-    if (typeof value === 'string') {
-      value = [value];
-    }
-    if (typeof value !== 'object') {
-      throw new Error('wrong sample map format for ' + key);
-    }
-    baseUrl = value._base || baseUrl;
-    const replaceUrl = (v) => (baseUrl + v).replace('github:', 'https://raw.githubusercontent.com/');
-    if (Array.isArray(value)) {
-      //return [key, value.map(replaceUrl)];
-      value = value.map(replaceUrl);
-    } else {
-      // must be object
-      value = Object.fromEntries(
-        Object.entries(value).map(([note, samples]) => {
-          return [note, (typeof samples === 'string' ? [samples] : samples).map(replaceUrl)];
-        }),
-      );
-    }
-    registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
-      type: 'sample',
-      samples: value,
-      baseUrl,
-      prebake,
-      tag,
-    });
-  });
+  processSampleMap(
+    sampleMap,
+    (key, value) =>
+      registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+        type: 'sample',
+        samples: value,
+        baseUrl,
+        prebake,
+        tag,
+      }),
+    baseUrl,
+  );
 };
 
 const cutGroups = [];
 
-export async function onTriggerSample(t, value, onended, bank) {
-  const {
+export async function onTriggerSample(t, value, onended, bank, resolveUrl) {
+  let {
     s,
     freq,
     unit,
     nudge = 0, // TODO: is this in seconds?
     cut,
     loop,
-    clip = 0, // if 1, samples will be cut off when the hap ends
+    clip = undefined, // if 1, samples will be cut off when the hap ends
     n = 0,
     note,
     speed = 1, // sample playback speed
+    loopBegin = 0,
     begin = 0,
+    loopEnd = 1,
     end = 1,
   } = value;
   // load sample
@@ -182,13 +217,14 @@ export async function onTriggerSample(t, value, onended, bank) {
     // no playback
     return;
   }
+  loop = s.startsWith('wt_') ? 1 : value.loop;
   const ac = getAudioContext();
   // destructure adsr here, because the default should be different for synths and samples
   const { attack = 0.001, decay = 0.001, sustain = 1, release = 0.001 } = value;
   //const soundfont = getSoundfontKey(s);
   const time = t + nudge;
 
-  const bufferSource = await getSampleBufferSource(s, n, note, speed, freq, bank);
+  const bufferSource = await getSampleBufferSource(s, n, note, speed, freq, bank, resolveUrl);
 
   // asny stuff above took too long?
   if (ac.currentTime > t) {
@@ -209,19 +245,12 @@ export async function onTriggerSample(t, value, onended, bank) {
   // rather than the current playback rate, so even if the sound is playing at twice its normal speed,
   // the midway point through a 10-second audio buffer is still 5."
   const offset = begin * bufferSource.buffer.duration;
-  bufferSource.start(time, offset);
-  const bufferDuration = bufferSource.buffer.duration / bufferSource.playbackRate.value;
-  /*if (loop) {
-    // TODO: idea for loopBegin / loopEnd
-    // if one of [loopBegin,loopEnd] is <= 1, interpret it as normlized
-    // if [loopBegin,loopEnd] is bigger >= 1, interpret it as sample number
-    // this will simplify perfectly looping things, while still keeping the normalized option
-    // the only drawback is that looping between samples 0 and 1 is not possible (which is not real use case)
+  if (loop) {
     bufferSource.loop = true;
-    bufferSource.loopStart = offset;
-    bufferSource.loopEnd = offset + duration;
-    duration = loop * duration;
-  }*/
+    bufferSource.loopStart = loopBegin * bufferSource.buffer.duration - offset;
+    bufferSource.loopEnd = loopEnd * bufferSource.buffer.duration - offset;
+  }
+  bufferSource.start(time, offset);
   const { node: envelope, stop: releaseEnvelope } = getEnvelope(attack, decay, sustain, release, 1, t);
   bufferSource.connect(envelope);
   const out = ac.createGain(); // we need a separate gain for the cutgroups because firefox...
@@ -232,9 +261,10 @@ export async function onTriggerSample(t, value, onended, bank) {
     out.disconnect();
     onended();
   };
-  const stop = (endTime, playWholeBuffer = !clip) => {
+  const stop = (endTime, playWholeBuffer = clip === undefined && loop === undefined) => {
     let releaseTime = endTime;
     if (playWholeBuffer) {
+      const bufferDuration = bufferSource.buffer.duration / bufferSource.playbackRate.value;
       releaseTime = t + (end - begin) * bufferDuration;
     }
     bufferSource.stop(releaseTime + release);

packages/superdough/superdough.mjs

@@ -0,0 +1,376 @@
+/*
+superdough.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/superdough/superdough.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 './feedbackdelay.mjs';
+import './reverb.mjs';
+import './vowel.mjs';
+import { clamp } from './util.mjs';
+import workletsUrl from './worklets.mjs?url';
+import { createFilter, gainNode } from './helpers.mjs';
+import { map } from 'nanostores';
+import { logger } from './logger.mjs';
+
+export const soundMap = map();
+export function registerSound(key, onTrigger, data = {}) {
+  soundMap.setKey(key, { onTrigger, data });
+}
+export function getSound(s) {
+  return soundMap.get()[s];
+}
+export const resetLoadedSounds = () => soundMap.set({});
+
+let audioContext;
+export const getAudioContext = () => {
+  if (!audioContext) {
+    audioContext = new AudioContext();
+  }
+  return audioContext;
+};
+
+let destination;
+const getDestination = () => {
+  const ctx = getAudioContext();
+  if (!destination) {
+    destination = ctx.createGain();
+    destination.connect(ctx.destination);
+  }
+  return destination;
+};
+
+export const panic = () => {
+  getDestination().gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
+  destination = null;
+};
+
+let workletsLoading;
+function loadWorklets() {
+  if (workletsLoading) {
+    return workletsLoading;
+  }
+  workletsLoading = getAudioContext().audioWorklet.addModule(workletsUrl);
+  return workletsLoading;
+}
+
+function getWorklet(ac, processor, params) {
+  const node = new AudioWorkletNode(ac, processor);
+  Object.entries(params).forEach(([key, value]) => {
+    node.parameters.get(key).value = value;
+  });
+  return node;
+}
+
+// this function should be called on first user interaction (to avoid console warning)
+export async function initAudio(options = {}) {
+  const { disableWorklets = false } = options;
+  if (typeof window !== 'undefined') {
+    await getAudioContext().resume();
+    if (!disableWorklets) {
+      await loadWorklets().catch((err) => {
+        console.warn('could not load AudioWorklet effects coarse, crush and shape', err);
+      });
+    } else {
+      console.log('disableWorklets: AudioWorklet effects coarse, crush and shape are skipped!');
+    }
+  }
+}
+
+export async function initAudioOnFirstClick(options) {
+  return new Promise((resolve) => {
+    document.addEventListener('click', async function listener() {
+      await initAudio(options);
+      resolve();
+      document.removeEventListener('click', listener);
+    });
+  });
+}
+
+let delays = {};
+const maxfeedback = 0.98;
+function getDelay(orbit, delaytime, delayfeedback, t) {
+  if (delayfeedback > maxfeedback) {
+    //logger(`delayfeedback was clamped to ${maxfeedback} to save your ears`);
+  }
+  delayfeedback = clamp(delayfeedback, 0, 0.98);
+  if (!delays[orbit]) {
+    const ac = getAudioContext();
+    const dly = ac.createFeedbackDelay(1, delaytime, delayfeedback);
+    dly.start?.(t); // for some reason, this throws when audion extension is installed..
+    dly.connect(getDestination());
+    delays[orbit] = dly;
+  }
+  delays[orbit].delayTime.value !== delaytime && delays[orbit].delayTime.setValueAtTime(delaytime, t);
+  delays[orbit].feedback.value !== delayfeedback && delays[orbit].feedback.setValueAtTime(delayfeedback, t);
+  return delays[orbit];
+}
+
+let reverbs = {};
+function getReverb(orbit, duration = 2) {
+  if (!reverbs[orbit]) {
+    const ac = getAudioContext();
+    const reverb = ac.createReverb(duration);
+    reverb.connect(getDestination());
+    reverbs[orbit] = reverb;
+  }
+  if (reverbs[orbit].duration !== duration) {
+    reverbs[orbit] = reverbs[orbit].setDuration(duration);
+    reverbs[orbit].duration = duration;
+  }
+  return reverbs[orbit];
+}
+
+export let analyser, analyserData /* s = {} */;
+export function getAnalyser(/* orbit,  */ fftSize = 2048) {
+  if (!analyser /*s [orbit] */) {
+    const analyserNode = getAudioContext().createAnalyser();
+    analyserNode.fftSize = fftSize;
+    // getDestination().connect(analyserNode);
+    analyser /* s[orbit] */ = analyserNode;
+    //analyserData = new Uint8Array(analyser.frequencyBinCount);
+    analyserData = new Float32Array(analyser.frequencyBinCount);
+  }
+  if (analyser /* s[orbit] */.fftSize !== fftSize) {
+    analyser /* s[orbit] */.fftSize = fftSize;
+    //analyserData = new Uint8Array(analyser.frequencyBinCount);
+    analyserData = new Float32Array(analyser.frequencyBinCount);
+  }
+  return analyser /* s[orbit] */;
+}
+
+export function getAnalyzerData(type = 'time') {
+  const getter = {
+    time: () => analyser?.getFloatTimeDomainData(analyserData),
+    frequency: () => analyser?.getFloatFrequencyData(analyserData),
+  }[type];
+  if (!getter) {
+    throw new Error(`getAnalyzerData: ${type} not supported. use one of ${Object.keys(getter).join(', ')}`);
+  }
+  getter();
+  return analyserData;
+}
+
+function effectSend(input, effect, wet) {
+  const send = gainNode(wet);
+  input.connect(send);
+  send.connect(effect);
+  return send;
+}
+
+export const superdough = async (value, deadline, hapDuration) => {
+  const ac = getAudioContext();
+  if (typeof value !== 'object') {
+    throw new Error(
+      `expected hap.value to be an object, but got "${value}". Hint: append .note() or .s() to the end`,
+      'error',
+    );
+  }
+
+  // duration is passed as value too..
+  value.duration = hapDuration;
+  // calculate absolute time
+  let t = ac.currentTime + deadline;
+  // destructure
+  let {
+    s = 'triangle',
+    bank,
+    source,
+    gain = 0.8,
+    // filters
+    ftype = '12db',
+    fanchor = 0.5,
+    // low pass
+    cutoff,
+    lpenv,
+    lpattack = 0.01,
+    lpdecay = 0.01,
+    lpsustain = 1,
+    lprelease = 0.01,
+    resonance = 1,
+    // high pass
+    hpenv,
+    hcutoff,
+    hpattack = 0.01,
+    hpdecay = 0.01,
+    hpsustain = 1,
+    hprelease = 0.01,
+    hresonance = 1,
+    // band pass
+    bpenv,
+    bandf,
+    bpattack = 0.01,
+    bpdecay = 0.01,
+    bpsustain = 1,
+    bprelease = 0.01,
+    bandq = 1,
+    //
+    coarse,
+    crush,
+    shape,
+    pan,
+    vowel,
+    delay = 0,
+    delayfeedback = 0.5,
+    delaytime = 0.25,
+    orbit = 1,
+    room,
+    size = 2,
+    velocity = 1,
+    analyze, // analyser wet
+    fft = 8, // fftSize 0 - 10
+  } = value;
+  gain *= velocity; // legacy fix for velocity
+  let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
+  const onended = () => {
+    toDisconnect.forEach((n) => n?.disconnect());
+  };
+  if (bank && s) {
+    s = `${bank}_${s}`;
+  }
+  // get source AudioNode
+  let sourceNode;
+  if (source) {
+    sourceNode = source(t, value, hapDuration);
+  } else if (getSound(s)) {
+    const { onTrigger } = getSound(s);
+    const soundHandle = await onTrigger(t, value, onended);
+    if (soundHandle) {
+      sourceNode = soundHandle.node;
+      soundHandle.stop(t + hapDuration);
+    }
+  } else {
+    throw new Error(`sound ${s} not found! Is it loaded?`);
+  }
+  if (!sourceNode) {
+    // if onTrigger does not return anything, we will just silently skip
+    // this can be used for things like speed(0) in the sampler
+    return;
+  }
+  if (ac.currentTime > t) {
+    logger('[webaudio] skip hap: still loading', ac.currentTime - t);
+    return;
+  }
+  const chain = []; // audio nodes that will be connected to each other sequentially
+  chain.push(sourceNode);
+
+  // gain stage
+  chain.push(gainNode(gain));
+
+  if (cutoff !== undefined) {
+    let lp = () =>
+      createFilter(
+        ac,
+        'lowpass',
+        cutoff,
+        resonance,
+        lpattack,
+        lpdecay,
+        lpsustain,
+        lprelease,
+        lpenv,
+        t,
+        t + hapDuration,
+        fanchor,
+      );
+    chain.push(lp());
+    if (ftype === '24db') {
+      chain.push(lp());
+    }
+  }
+
+  if (hcutoff !== undefined) {
+    let hp = () =>
+      createFilter(
+        ac,
+        'highpass',
+        hcutoff,
+        hresonance,
+        hpattack,
+        hpdecay,
+        hpsustain,
+        hprelease,
+        hpenv,
+        t,
+        t + hapDuration,
+        fanchor,
+      );
+    chain.push(hp());
+    if (ftype === '24db') {
+      chain.push(hp());
+    }
+  }
+
+  if (bandf !== undefined) {
+    let bp = () =>
+      createFilter(
+        ac,
+        'bandpass',
+        bandf,
+        bandq,
+        bpattack,
+        bpdecay,
+        bpsustain,
+        bprelease,
+        bpenv,
+        t,
+        t + hapDuration,
+        fanchor,
+      );
+    chain.push(bp());
+    if (ftype === '24db') {
+      chain.push(bp());
+    }
+  }
+
+  if (vowel !== undefined) {
+    const vowelFilter = ac.createVowelFilter(vowel);
+    chain.push(vowelFilter);
+  }
+
+  // effects
+  coarse !== undefined && chain.push(getWorklet(ac, 'coarse-processor', { coarse }));
+  crush !== undefined && chain.push(getWorklet(ac, 'crush-processor', { crush }));
+  shape !== undefined && chain.push(getWorklet(ac, 'shape-processor', { shape }));
+
+  // panning
+  if (pan !== undefined) {
+    const panner = ac.createStereoPanner();
+    panner.pan.value = 2 * pan - 1;
+    chain.push(panner);
+  }
+
+  // last gain
+  const post = gainNode(1);
+  chain.push(post);
+  post.connect(getDestination());
+
+  // delay
+  let delaySend;
+  if (delay > 0 && delaytime > 0 && delayfeedback > 0) {
+    const delyNode = getDelay(orbit, delaytime, delayfeedback, t);
+    delaySend = effectSend(post, delyNode, delay);
+  }
+  // reverb
+  let reverbSend;
+  if (room > 0 && size > 0) {
+    const reverbNode = getReverb(orbit, size);
+    reverbSend = effectSend(post, reverbNode, room);
+  }
+
+  // analyser
+  let analyserSend;
+  if (analyze) {
+    const analyserNode = getAnalyser(/* orbit,  */ 2 ** (fft + 5));
+    analyserSend = effectSend(post, analyserNode, analyze);
+  }
+
+  // connect chain elements together
+  chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
+
+  // toDisconnect = all the node that should be disconnected in onended callback
+  // this is crucial for performance
+  toDisconnect = chain.concat([delaySend, reverbSend, analyserSend]);
+};
+
+export const superdoughTrigger = (t, hap, ct, cps) => superdough(hap, t - ct, hap.duration / cps, cps);

packages/superdough/synth.mjs

@@ -0,0 +1,181 @@
+import { midiToFreq, noteToMidi } from './util.mjs';
+import { registerSound, getAudioContext } from './superdough.mjs';
+import { gainNode, getEnvelope, getExpEnvelope } from './helpers.mjs';
+
+const mod = (freq, range = 1, type = 'sine') => {
+  const ctx = getAudioContext();
+  const osc = ctx.createOscillator();
+  osc.type = type;
+  osc.frequency.value = freq;
+  osc.start();
+  const g = new GainNode(ctx, { gain: range });
+  osc.connect(g); // -range, range
+  return { node: g, stop: (t) => osc.stop(t) };
+};
+
+const fm = (osc, harmonicityRatio, modulationIndex, wave = 'sine') => {
+  const carrfreq = osc.frequency.value;
+  const modfreq = carrfreq * harmonicityRatio;
+  const modgain = modfreq * modulationIndex;
+  return mod(modfreq, modgain, wave);
+};
+
+export function registerSynthSounds() {
+  ['sine', 'square', 'triangle', 'sawtooth'].forEach((wave) => {
+    registerSound(
+      wave,
+      (t, value, onended) => {
+        // destructure adsr here, because the default should be different for synths and samples
+        let {
+          attack = 0.001,
+          decay = 0.05,
+          sustain = 0.6,
+          release = 0.01,
+          fmh: fmHarmonicity = 1,
+          fmi: fmModulationIndex,
+          fmenv: fmEnvelopeType = 'lin',
+          fmattack: fmAttack,
+          fmdecay: fmDecay,
+          fmsustain: fmSustain,
+          fmrelease: fmRelease,
+          fmvelocity: fmVelocity,
+          fmwave: fmWaveform = 'sine',
+          vib = 0,
+          vibmod = 0.5,
+        } = value;
+        let { n, note, freq } = value;
+        // with synths, n and note are the same thing
+        note = note || 36;
+        if (typeof note === 'string') {
+          note = noteToMidi(note); // e.g. c3 => 48
+        }
+        // get frequency
+        if (!freq && typeof note === 'number') {
+          freq = midiToFreq(note); // + 48);
+        }
+        // maybe pull out the above frequency resolution?? (there is also getFrequency but it has no default)
+        // make oscillator
+        const { node: o, stop } = getOscillator({
+          t,
+          s: wave,
+          freq,
+          vib,
+          vibmod,
+          partials: n,
+        });
+
+        // FM + FM envelope
+        let stopFm, fmEnvelope;
+        if (fmModulationIndex) {
+          const { node: modulator, stop } = fm(o, fmHarmonicity, fmModulationIndex, fmWaveform);
+          if (![fmAttack, fmDecay, fmSustain, fmRelease, fmVelocity].find((v) => v !== undefined)) {
+            // no envelope by default
+            modulator.connect(o.frequency);
+          } else {
+            fmAttack = fmAttack ?? 0.001;
+            fmDecay = fmDecay ?? 0.001;
+            fmSustain = fmSustain ?? 1;
+            fmRelease = fmRelease ?? 0.001;
+            fmVelocity = fmVelocity ?? 1;
+            fmEnvelope = getEnvelope(fmAttack, fmDecay, fmSustain, fmRelease, fmVelocity, t);
+            if (fmEnvelopeType === 'exp') {
+              fmEnvelope = getExpEnvelope(fmAttack, fmDecay, fmSustain, fmRelease, fmVelocity, t);
+              fmEnvelope.node.maxValue = fmModulationIndex * 2;
+              fmEnvelope.node.minValue = 0.00001;
+            }
+            modulator.connect(fmEnvelope.node);
+            fmEnvelope.node.connect(o.frequency);
+          }
+          stopFm = stop;
+        }
+
+        // turn down
+        const g = gainNode(0.3);
+
+        // gain envelope
+        const { node: envelope, stop: releaseEnvelope } = getEnvelope(attack, decay, sustain, release, 1, t);
+
+        o.onended = () => {
+          o.disconnect();
+          g.disconnect();
+          onended();
+        };
+        return {
+          node: o.connect(g).connect(envelope),
+          stop: (releaseTime) => {
+            releaseEnvelope(releaseTime);
+            fmEnvelope?.stop(releaseTime);
+            let end = releaseTime + release;
+            stop(end);
+            stopFm?.(end);
+          },
+        };
+      },
+      { type: 'synth', prebake: true },
+    );
+  });
+}
+
+export function waveformN(partials, type) {
+  const real = new Float32Array(partials + 1);
+  const imag = new Float32Array(partials + 1);
+  const ac = getAudioContext();
+  const osc = ac.createOscillator();
+
+  const amplitudes = {
+    sawtooth: (n) => 1 / n,
+    square: (n) => (n % 2 === 0 ? 0 : 1 / n),
+    triangle: (n) => (n % 2 === 0 ? 0 : 1 / (n * n)),
+  };
+
+  if (!amplitudes[type]) {
+    throw new Error(`unknown wave type ${type}`);
+  }
+
+  real[0] = 0; // dc offset
+  imag[0] = 0;
+  let n = 1;
+  while (n <= partials) {
+    real[n] = amplitudes[type](n);
+    imag[n] = 0;
+    n++;
+  }
+
+  const wave = ac.createPeriodicWave(real, imag);
+  osc.setPeriodicWave(wave);
+  return osc;
+}
+
+export function getOscillator({ s, freq, t, vib, vibmod, partials }) {
+  // Make oscillator with partial count
+  let o;
+  if (!partials || s === 'sine') {
+    o = getAudioContext().createOscillator();
+    o.type = s || 'triangle';
+  } else {
+    o = waveformN(partials, s);
+  }
+  o.frequency.value = Number(freq);
+  o.start(t);
+
+  // Additional oscillator for vibrato effect
+  let vibrato_oscillator;
+  if (vib > 0) {
+    vibrato_oscillator = getAudioContext().createOscillator();
+    vibrato_oscillator.frequency.value = vib;
+    const gain = getAudioContext().createGain();
+    // Vibmod is the amount of vibrato, in semitones
+    gain.gain.value = vibmod * 100;
+    vibrato_oscillator.connect(gain);
+    gain.connect(o.detune);
+    vibrato_oscillator.start(t);
+  }
+
+  return {
+    node: o,
+    stop: (time) => {
+      vibrato_oscillator?.stop(time);
+      o.stop(time);
+    },
+  };
+}

packages/superdough/util.mjs

@@ -0,0 +1,53 @@
+// currently duplicate with core util.mjs to skip dependency
+// TODO: add separate util module?
+
+export const tokenizeNote = (note) => {
+  if (typeof note !== 'string') {
+    return [];
+  }
+  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 };
+
+export const noteToMidi = (note, defaultOctave = 3) => {
+  const [pc, acc, oct = defaultOctave] = tokenizeNote(note);
+  if (!pc) {
+    throw new Error('not a note: "' + note + '"');
+  }
+  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) => {
+  return Math.pow(2, (n - 69) / 12) * 440;
+};
+export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+export const freqToMidi = (freq) => {
+  return (12 * Math.log(freq / 440)) / Math.LN2 + 69;
+};
+
+export const valueToMidi = (value, fallbackValue) => {
+  if (typeof value !== 'object') {
+    throw new Error('valueToMidi: expected object value');
+  }
+  let { freq, note } = value;
+  if (typeof freq === 'number') {
+    return freqToMidi(freq);
+  }
+  if (typeof note === 'string') {
+    return noteToMidi(note);
+  }
+  if (typeof note === 'number') {
+    return note;
+  }
+  if (!fallbackValue) {
+    throw new Error('valueToMidi: expected freq or note to be set');
+  }
+  return fallbackValue;
+};

packages/superdough/vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'index.mjs'),
       formats: ['es', 'cjs'],
-      fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.js' }[ext]),
+      fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.cjs' }[ext]),
     },
     rollupOptions: {
       external: [...Object.keys(dependencies)],