Merge branch 'main' into ziglets

fix: reset global fx on pattern change

.eslintignore

@@ -20,4 +20,5 @@ vite.config.js
 **/dist
 /src-tauri/target/**/*
 reverbGen.mjs
-hydra.mjs
+hydra.mjs
+jsdoc-synonyms.js

.github/workflows/deploy.yml

@@ -21,13 +21,13 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.11.0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
       - name: Install Dependencies
         run: pnpm install

.github/workflows/test.yml

@@ -7,13 +7,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.11.0
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}

.gitignore

@@ -43,4 +43,87 @@ dev-dist
 Dirt-Samples
 tidal-drum-machines
 webaudiofontdata
-src-tauri/target
+src-tauri/target
+
+# BEGIN JetBrains -> END JetBrains
+
+# for JetBrains IDE users, e.g. WebStorm. Source: https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+# END JetBrains -> BEGIN JetBrains

.prettierignore

@@ -9,4 +9,6 @@ packages/xen/tunejs.js
 paper
 pnpm-lock.yaml
 pnpm-workspace.yaml
-**/dev-dist
+**/dev-dist
+superdough-wasm
+website/.astro

CONTRIBUTING.md

@@ -66,7 +66,7 @@ To get the project up and running for development, make sure you have installed:
 
 - [git](https://git-scm.com/)
 - [node](https://nodejs.org/en/) >= 18
-- [pnpm](https://pnpm.io/) (`npm i pnpm -g`)
+- [pnpm](https://pnpm.io/) (`curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=8.11.0 sh -`)
 
 then, do the following:
 
@@ -114,7 +114,7 @@ You can run the same check with `pnpm check`
 ## Package Workflow
 
 The project is split into multiple [packages](https://github.com/tidalcycles/strudel/tree/main/packages) with independent versioning.
-When you run `pnpm i` on the root folder, [pnpm workspaces](https://pnpm.io/workspaces) will install all dependencies of all subpackages. This will allow any js file to import `@strudel.cycles/<package-name>` to get the local version,
+When you run `pnpm i` on the root folder, [pnpm workspaces](https://pnpm.io/workspaces) will install all dependencies of all subpackages. This will allow any js file to import `@strudel/<package-name>` to get the local version,
 allowing to develop multiple packages at the same time.
 
 ## Package Publishing

README.md

@@ -2,12 +2,13 @@
 
 [![Strudel test status](https://github.com/tidalcycles/strudel/actions/workflows/test.yml/badge.svg)](https://github.com/tidalcycles/strudel/actions)
 
-An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This software is slowly stabilising, but please continue to tread carefully.
+An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This software is a bit more stable now, but please continue to tread carefully.
 
 - Try it here: <https://strudel.cc>
 - Docs: <https://strudel.cc/learn>
 - Technical Blog Post: <https://loophole-letters.vercel.app/strudel>
 - 1 Year of Strudel Blog Post: <https://loophole-letters.vercel.app/strudel1year>
+- 2 Years of Strudel Blog Post: <https://strudel.cc/blog/#year-2>
 
 ## Running Locally
 
@@ -30,7 +31,6 @@ There are multiple npm packages you can use to use strudel, or only parts of it,
 - [`midi`](./packages/midi): webmidi bindings
 - [`serial`](./packages/serial): webserial bindings
 - [`tonal`](./packages/tonal): tonal functions
-- [`xen`](./packages/xen): microtonal / xenharmonic functions
 - ... [and there are more](./packages/)
 
 Click on the package names to find out more about each one.

examples/README.md

@@ -0,0 +1,3 @@
+# examples
+
+This folder contains usage examples for different scenarios.

examples/buildless/README.md

@@ -0,0 +1,5 @@
+# buildless examples
+
+These examples show you how strudel can be used in a regular html file, without the need for a build tool.
+
+Most examples are using [skypack](https://www.skypack.dev/)

examples/buildless/basic.html

@@ -7,7 +7,7 @@
 />
 <div id="output"></div>
 <script type="module">
-  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
+  const strudel = await import('https://cdn.skypack.dev/@strudel/core@0.6.8');
   Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
   const input = document.getElementById('text');
   const getEvents = () => {

examples/buildless/canvas.html

@@ -8,7 +8,7 @@
   />
   <canvas id="canvas"></canvas>
   <script type="module">
-    const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
+    const strudel = await import('https://cdn.skypack.dev/@strudel/core@0.6.8');
     // this adds all strudel functions to the global scope, to be used by eval
     Object.assign(window, strudel);
     // setup elements

examples/buildless/headless-simple.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <button id="play">play</button>
 <button id="stop">stop</button>
 <script type="module">

examples/buildless/headless-with-samples.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <button id="a">A</button>
 <button id="b">B</button>
 <button id="c">C</button>
@@ -6,7 +6,7 @@
 <script type="module">
   import { initStrudel } from 'https://cdn.skypack.dev/@strudel/web@0.8.2';
   initStrudel({
-    prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
+    prebake: () => samples('github:tidalcycles/dirt-samples'),
   });
   const click = (id, action) => document.getElementById(id).addEventListener('click', action);
   click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev)`));

examples/buildless/minimal-repl.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -16,37 +16,43 @@
     </div>
     <div id="output"></div>
     <script type="module">
-      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.6.8';
-      import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0';
-      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.6.0';
+      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel/core@0.11.0';
+      import { mini } from 'https://cdn.skypack.dev/@strudel/mini@0.11.0';
+      import { transpiler } from 'https://cdn.skypack.dev/@strudel/transpiler@0.11.0';
       import {
         getAudioContext,
         webaudioOutput,
         initAudioOnFirstClick,
-      } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0';
+        registerSynthSounds,
+      } from 'https://cdn.skypack.dev/@strudel/webaudio@0.11.0';
 
-      initAudioOnFirstClick();
       const ctx = getAudioContext();
       const input = document.getElementById('text');
       input.innerHTML = getTune();
 
-      evalScope(
+      const loadModules = evalScope(
         controls,
-        import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8'),
-        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0'),
-        import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.6.0'),
-        import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0'),
+        import('https://cdn.skypack.dev/@strudel/core@0.11.0'),
+        import('https://cdn.skypack.dev/@strudel/mini@0.11.0'),
+        import('https://cdn.skypack.dev/@strudel/tonal@0.11.0'),
+        import('https://cdn.skypack.dev/@strudel/webaudio@0.11.0'),
       );
 
+      const initAudio = Promise.all([initAudioOnFirstClick(), registerSynthSounds()]);
+
       const { evaluate } = repl({
         defaultOutput: webaudioOutput,
         getTime: () => ctx.currentTime,
         transpiler,
       });
-      document.getElementById('start').addEventListener('click', () => evaluate(input.value));
+      document.getElementById('start').addEventListener('click', async () => {
+        await loadModules;
+        await initAudio;
+        evaluate(input.value);
+      });
 
       function getTune() {
-        return `await samples('github:tidalcycles/Dirt-Samples/master')
+        return `samples('github:tidalcycles/dirt-samples')
 
 stack(
   // amen

examples/buildless/web-component-iframe.html

@@ -1,4 +1,4 @@
-<script src="https://unpkg.com/@strudel.cycles/embed@latest"></script>
+<script src="https://unpkg.com/@strudel/embed@0.11.0"></script>
 <!-- <script src="./embed.js"></script> -->
 <strudel-repl>
   <!--

examples/buildless/web-component-no-iframe.html

@@ -0,0 +1,31 @@
+<script src="https://unpkg.com/@strudel/repl@1.0.2"></script>
+<strudel-editor>
+  <!--
+// @date 23-08-15
+// "golf rolf" @by froos @license CC BY-NC-SA 4.0
+
+setcps(1)
+stack(
+  s("bd*2, ~ rim*<1!3 2>, hh*4").bank('RolandTR909')
+  .off(-1/8, set(speed("1.5").gain(.25)))
+  .mask("<0!16 1!64>")
+  ,
+  note("g1(3,8)")
+  .s("gm_synth_bass_2:<0 2>")
+  .delay(".8:.25:.25")
+  .clip("<.5!16 2!32>")
+  .off(1/8, add(note("12?0.7")))
+  .lpf(sine.range(500,2000).slow(32)).lpq(8)
+  .add(note("0,.05"))
+  .mask("<0!8 1!32>")
+  ,
+  n("<0 1 2 3 4>*8").scale('G4 minor')
+  .s("gm_lead_6_voice")
+  .clip(sine.range(.2,.8).slow(8))
+  .jux(rev)
+  .room(2)
+  .sometimes(add(note("12")))
+  .lpf(perlin.range(200,20000).slow(4))
+).reset("<x@15 x(5,8)>")
+-->
+</strudel-editor>

examples/buildless/web.html

@@ -0,0 +1,8 @@
+<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
+<button id="play">PLAY</button>
+<script>
+  initStrudel({
+    prebake: () => samples('github:tidalcycles/dirt-samples'),
+  });
+  document.getElementById('play').addEventListener('click', () => s('bd sd').play());
+</script>

examples/codemirror-repl/README.md

@@ -0,0 +1,8 @@
+# codemirror-repl example
+
+This folder demonstrates how to set up a full strudel repl with the `@strudel/codemirror` package. Run it using:
+
+```sh
+pnpm i
+pnpm dev
+```

examples/codemirror-repl/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/codemirror-repl/main.js

@@ -1,11 +1,11 @@
 import { StrudelMirror } from '@strudel/codemirror';
 import { funk42 } from './tunes';
-import { drawPianoroll, evalScope, controls } from '@strudel.cycles/core';
+import { drawPianoroll, evalScope, controls } from '@strudel/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';
+import { initAudioOnFirstClick } from '@strudel/webaudio';
+import { transpiler } from '@strudel/transpiler';
+import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel/webaudio';
+import { registerSoundfonts } from '@strudel/soundfonts';
 
 // init canvas
 const canvas = document.getElementById('roll');
@@ -26,10 +26,10 @@ const editor = new StrudelMirror({
     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'),
+      import('@strudel/core'),
+      import('@strudel/mini'),
+      import('@strudel/tonal'),
+      import('@strudel/webaudio'),
     );
     await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
   },

examples/codemirror-repl/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": "^5.0.10"
+  },
+  "dependencies": {
+    "@strudel/codemirror": "workspace:*",
+    "@strudel/core": "workspace:*",
+    "@strudel/mini": "workspace:*",
+    "@strudel/soundfonts": "workspace:*",
+    "@strudel/tonal": "workspace:*",
+    "@strudel/transpiler": "workspace:*",
+    "@strudel/webaudio": "workspace:*"
+  }
+}

examples/codemirror-repl/tunes.mjs

@@ -1,6 +1,6 @@
 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.cc/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+samples('github:felixroos/samples')
+samples('https://strudel.cc/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
@@ -33,8 +33,8 @@ await samples('https://strudel.cc/tidal-drum-machines.json', 'github:ritchse/tid
 
 export const trafficFlam = `// froos - "traffic flam", licensed with CC BY-NC-SA 4.0
 
-await samples('github:felixroos/samples/main')
-await samples('https://strudel.cc/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+samples('github:felixroos/samples')
+samples('https://strudel.cc/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
 
 addVoicings('hip', {
   m11: ['2M 3m 4P 7m'],
@@ -69,8 +69,8 @@ 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.cc/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
+samples('github:felixroos/samples')
+samples('https://strudel.cc/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
 
 setcps(.5)
 

examples/headless-repl/README.md

@@ -0,0 +1,13 @@
+# headless-repl demo
+
+This demo shows how to use strudel in "headless mode".
+Buttons A / B / C will switch between different patterns.
+It showcases the usage of the `@strudel/web` package, using [vite](https://vitejs.dev/) as the dev server.
+
+## Running
+
+```sh
+pnpm i && cd examples/headless-repl
+pnpm dev
+# open http://localhost:5173/
+```

examples/headless-repl/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,7 +15,7 @@
     <script type="module">
       import { initStrudel } from '@strudel/web';
       initStrudel({
-        prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
+        prebake: () => samples('github:tidalcycles/dirt-samples'),
       });
 
       const click = (id, action) => document.getElementById(id).addEventListener('click', action);

examples/headless-repl/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^4.3.2"
+    "vite": "^5.0.10"
   },
   "dependencies": {
     "@strudel/web": "workspace:*"

examples/minimal-repl/.gitignore

@@ -0,0 +1 @@
+dist

examples/minimal-repl/README.md

@@ -0,0 +1,10 @@
+# minimal repl
+
+This folder demonstrates how to set up a minimal strudel repl using vite and vanilla JS. Run it using:
+
+```sh
+npm i
+npm run dev
+```
+
+If you're looking for a more feature rich alternative, have a look at the [../codemirror-repl](codemirror-repl example)

examples/minimal-repl/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/minimal-repl/main.js

@@ -1,6 +1,6 @@
-import { controls, repl, evalScope } from '@strudel.cycles/core';
-import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel.cycles/webaudio';
-import { transpiler } from '@strudel.cycles/transpiler';
+import { controls, repl, evalScope } from '@strudel/core';
+import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
+import { transpiler } from '@strudel/transpiler';
 import tune from './tune.mjs';
 
 const ctx = getAudioContext();
@@ -10,10 +10,10 @@ initAudioOnFirstClick();
 
 evalScope(
   controls,
-  import('@strudel.cycles/core'),
-  import('@strudel.cycles/mini'),
-  import('@strudel.cycles/webaudio'),
-  import('@strudel.cycles/tonal'),
+  import('@strudel/core'),
+  import('@strudel/mini'),
+  import('@strudel/webaudio'),
+  import('@strudel/tonal'),
 );
 
 const { evaluate } = repl({

examples/minimal-repl/package.json

@@ -10,13 +10,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^5.0.10"
   },
   "dependencies": {
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/mini": "workspace:*",
-    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel.cycles/tonal": "workspace:*"
+    "@strudel/core": "workspace:*",
+    "@strudel/mini": "workspace:*",
+    "@strudel/transpiler": "workspace:*",
+    "@strudel/webaudio": "workspace:*",
+    "@strudel/tonal": "workspace:*"
   }
 }

examples/minimal-repl/tune.mjs

@@ -1,4 +1,4 @@
-export default `await samples('github:tidalcycles/Dirt-Samples/master')
+export default `samples('github:tidalcycles/dirt-samples')
 
 stack(
   // amen

examples/superdough/README.md

@@ -0,0 +1,11 @@
+# superdough demo
+
+This demo shows how to use [superdough](https://www.npmjs.com/package/superdough) with [vite](https://vitejs.dev/).
+
+## Running
+
+```sh
+pnpm i && cd examples/headless-repl
+pnpm dev
+# open http://localhost:5173/
+```

examples/superdough/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Superdough Example</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <button id="play">PLAAAAAAAY</button>
+    <script type="module">
+      import { superdough, samples, initAudioOnFirstClick, registerSynthSounds } from 'superdough';
+
+      const init = Promise.all([
+        initAudioOnFirstClick(),
+        samples('github:tidalcycles/dirt-samples'),
+        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++);
+        }
+      });
+    </script>
+  </body>
+</html>

examples/superdough/package.json

@@ -12,6 +12,6 @@
     "superdough": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^4.4.5"
+    "vite": "^5.0.10"
   }
 }

jsdoc/jsdoc-synonyms.js

@@ -1,12 +1,17 @@
 /*
-postcss.config.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/postcss.config.js>
+jsdoc-synonyms.js - Add support for @synonym tag
+Copyright (C) 2023 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/midi/midi.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/>.
 */
 
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+function defineTags(dictionary) {
+  dictionary.defineTag('synonyms', {
+    mustHaveValue: true,
+    onTagged: function (doclet, tag) {
+      doclet.synonyms_text = tag.value;
+      doclet.synonyms = doclet.synonyms_text.split(/[ ,]+/);
+    },
+  });
+}
+
+module.exports = { defineTags: defineTags };

jsdoc/jsdoc.config.json

@@ -3,7 +3,7 @@
     "includePattern": ".+\\.(js(doc|x)?|mjs)$",
     "excludePattern": "node_modules|shift-parser|shift-reducer|shift-traverser|dist"
   },
-  "plugins": ["plugins/markdown"],
+  "plugins": ["plugins/markdown", "jsdoc/jsdoc-synonyms"],
   "opts": {
     "destination": "./out/",
     "recurse": true

jsdoc/undocumented.mjs

@@ -65,7 +65,7 @@ async function getUndocumented(path, docs) {
 }
 
 // read doc.json file
-const { docs } = JSON.parse(await readFile(resolve(__dirname, 'doc.json'), 'utf8'));
+const { docs } = JSON.parse(await readFile(resolve(__dirname, '..', 'doc.json'), 'utf8'));
 
 const paths = dependencyTree.toList({
   filename: 'index.mjs',
@@ -76,7 +76,9 @@ const paths = dependencyTree.toList({
 // const paths = ['../packages/core/pattern.mjs', '../packages/core/hap.mjs'].map((rel) => resolve(__dirname, rel));
 
 const undocumented = Object.fromEntries(
-  await Promise.all(paths.map(async (path) => [path, await getUndocumented(path, docs)])),
+  await Promise.all(
+    paths.map(async (path) => [path.replace(resolve(__dirname, '..'), ''), await getUndocumented(path, docs)]),
+  ),
 );
 
 console.log(JSON.stringify(undocumented, null, 2));

lerna.json

@@ -1,8 +1,6 @@
 {
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "version": "independent",
   "npmClient": "pnpm",
-  "useWorkspaces": true
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@strudel.cycles/monorepo",
+  "name": "@strudel/monorepo",
   "version": "0.5.0",
   "private": true,
   "description": "Port of tidalcycles to javascript",
@@ -18,12 +18,12 @@
     "build": "npm run prebuild && cd website && npm run build",
     "preview": "cd website && npm run preview",
     "osc": "cd packages/osc && npm run server",
-    "jsdoc": "jsdoc packages/ -c jsdoc.config.json",
-    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json",
+    "jsdoc": "jsdoc packages/ -c jsdoc/jsdoc.config.json",
+    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc/jsdoc.config.json",
     "lint": "eslint . --ext mjs,js --quiet",
     "codeformat": "prettier --write .",
     "format-check": "prettier --check .",
-    "report-undocumented": "npm run jsdoc-json && node undocumented.mjs > undocumented.json",
+    "report-undocumented": "npm run jsdoc-json && node jsdoc/undocumented.mjs > undocumented.json",
     "check": "npm run format-check && npm run lint && npm run test",
     "iclc": "cd paper && pandoc --template=pandoc/iclc.html --citeproc  --number-sections iclc2023.md -o iclc2023.html && pandoc --template=pandoc/iclc.latex --citeproc --number-sections iclc2023.md -o iclc2023.pdf"
   },
@@ -45,28 +45,27 @@
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/mini": "workspace:*",
-    "@strudel.cycles/tonal": "workspace:*",
-    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel.cycles/xen": "workspace:*",
-    "acorn": "^8.8.1",
-    "dependency-tree": "^9.0.0"
+    "@strudel/core": "workspace:*",
+    "@strudel/mini": "workspace:*",
+    "@strudel/tonal": "workspace:*",
+    "@strudel/transpiler": "workspace:*",
+    "@strudel/webaudio": "workspace:*",
+    "@strudel/xen": "workspace:*"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.4.0",
-    "@vitest/ui": "^0.28.0",
+    "dependency-tree": "^10.0.9",
+    "@tauri-apps/cli": "^1.5.9",
+    "@vitest/ui": "^1.1.0",
     "canvas": "^2.11.2",
-    "eslint": "^8.39.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
     "events": "^3.3.0",
     "jsdoc": "^4.0.2",
     "jsdoc-json": "^2.0.2",
     "jsdoc-to-markdown": "^8.0.0",
-    "lerna": "^6.6.1",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.8.1",
-    "vitest": "^0.33.0"
+    "lerna": "^8.0.1",
+    "prettier": "^3.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "vitest": "^1.1.0"
   }
 }

packages/README.md

@@ -1,15 +1,5 @@
 # Packages
 
-Each folder represents one of the @strudel.cycles/* packages [published to npm](https://www.npmjs.com/org/strudel.cycles).
+Each folder represents one of the @strudel/* packages [published to npm](https://www.npmjs.com/org/strudel).
 
 To understand how those pieces connect, refer to the [Technical Manual](https://github.com/tidalcycles/strudel/wiki/Technical-Manual) or the individual READMEs.
-
-This is a graphical view of all the packages: [full screen](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
-
-![dependencies](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
-
-Generated with
-
-```sh
-npx depcruise --include-only "^packages" -X "node_modules" --output-type dot packages | dot -T svg > dependencygraph.svg
-```

packages/codemirror/autocomplete.mjs

@@ -1,5 +1,13 @@
-import { createRoot } from 'react-dom/client';
-import jsdoc from '../../../../doc.json';
+import jsdoc from '../../doc.json';
+// import { javascriptLanguage } from '@codemirror/lang-javascript';
+import { autocompletion } from '@codemirror/autocomplete';
+import { h } from './html';
+
+function plaintext(str) {
+  const div = document.createElement('div');
+  div.innerText = str;
+  return div.innerHTML;
+}
 
 const getDocLabel = (doc) => doc.name || doc.longname;
 const getInnerText = (html) => {
@@ -8,35 +16,32 @@ const getInnerText = (html) => {
   return div.textContent || div.innerText || '';
 };
 
-export function Autocomplete({ doc }) {
-  return (
-    <div className="prose dark:prose-invert  max-h-[400px] overflow-auto">
-      <h3 className="pt-0 mt-0">{getDocLabel(doc)}</h3>
-      <div dangerouslySetInnerHTML={{ __html: doc.description }} />
-      <ul>
-        {doc.params?.map(({ name, type, description }, i) => (
-          <li key={i}>
-            {name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
-          </li>
-        ))}
-      </ul>
-      <div>
-        {doc.examples?.map((example, i) => (
-          <div key={i}>
-            <pre
-              className="cursor-pointer"
-              onMouseDown={(e) => {
-                navigator.clipboard.writeText(example);
-                e.stopPropagation();
-              }}
-            >
-              {example}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+export function Autocomplete({ doc, label }) {
+  return h`<div class="prose dark:prose-invert max-h-[400px] overflow-auto p-2">
+<h1 class="pt-0 mt-0">${label || getDocLabel(doc)}</h1>
+${doc.description}
+<ul>
+  ${doc.params?.map(
+    ({ name, type, description }) =>
+      `<li>${name} : ${type.names?.join(' | ')} ${description ? ` - ${getInnerText(description)}` : ''}</li>`,
+  )}
+</ul>
+<div>
+  ${doc.examples?.map((example) => `<div><pre>${plaintext(example)}</pre></div>`)}
+</div>
+</div>`[0];
+  /*
+<pre
+className="cursor-pointer"
+onMouseDown={(e) => {
+  console.log('ola!');
+  navigator.clipboard.writeText(example);
+  e.stopPropagation();
+}}
+>
+{example}
+</pre>
+*/
 }
 
 const jsdocCompletions = jsdoc.docs
@@ -51,13 +56,7 @@ const jsdocCompletions = jsdoc.docs
   .map((doc) /*: Completion */ => ({
     label: getDocLabel(doc),
     // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
-    info: () => {
-      const node = document.createElement('div');
-      // if Autocomplete is non-interactive, it could also be rendered at build time..
-      // .. using renderToStaticMarkup
-      createRoot(node).render(<Autocomplete doc={doc} />);
-      return node;
-    },
+    info: () => Autocomplete({ doc }),
     type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type
   }));
 
@@ -74,3 +73,12 @@ export const strudelAutocomplete = (context /* : CompletionContext */) => {
     ], */
   };
 };
+
+export function isAutoCompletionEnabled(on) {
+  return on
+    ? [
+        autocompletion({ override: [strudelAutocomplete] }),
+        //javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
+      ]
+    : []; // autocompletion({ override: [] })
+}

packages/codemirror/codemirror.mjs

@@ -1,37 +1,114 @@
-import { defaultKeymap } from '@codemirror/commands';
+import { closeBrackets } from '@codemirror/autocomplete';
+// import { search, highlightSelectionMatches } from '@codemirror/search';
+import { history } 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';
+import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
+import { Compartment, EditorState, Prec } from '@codemirror/state';
+import {
+  EditorView,
+  highlightActiveLineGutter,
+  highlightActiveLine,
+  keymap,
+  lineNumbers,
+  drawSelection,
+} from '@codemirror/view';
+import { Pattern, Drawer, repl, cleanupDraw } from '@strudel/core';
+import { isAutoCompletionEnabled } from './autocomplete.mjs';
+import { isTooltipEnabled } from './tooltip.mjs';
+import { flash, isFlashEnabled } from './flash.mjs';
+import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
+import { keybindings } from './keybindings.mjs';
+import { initTheme, activateTheme, theme } from './themes.mjs';
+import { updateWidgets, sliderPlugin } from './slider.mjs';
+import { persistentAtom } from '@nanostores/persistent';
+
+const extensions = {
+  isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
+  isBracketMatchingEnabled: (on) => (on ? bracketMatching({ brackets: '()[]{}<>' }) : []),
+  isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []),
+  theme,
+  isAutoCompletionEnabled,
+  isTooltipEnabled,
+  isPatternHighlightingEnabled,
+  isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
+  isFlashEnabled,
+  keybindings,
+};
+const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
+
+export const defaultSettings = {
+  keybindings: 'codemirror',
+  isBracketMatchingEnabled: false,
+  isLineNumbersDisplayed: true,
+  isActiveLineHighlighted: false,
+  isAutoCompletionEnabled: false,
+  isPatternHighlightingEnabled: true,
+  isFlashEnabled: true,
+  isTooltipEnabled: false,
+  isLineWrappingEnabled: false,
+  theme: 'strudelTheme',
+  fontFamily: 'monospace',
+  fontSize: 18,
+};
+
+export const codemirrorSettings = persistentAtom('codemirror-settings', defaultSettings, {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+});
 
 // https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, theme = oneDark, root }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root }) {
+  const settings = codemirrorSettings.get();
+  const initialSettings = Object.keys(compartments).map((key) =>
+    compartments[key].of(extensions[key](parseBooleans(settings[key]))),
+  );
+  initTheme(settings.theme);
   let state = EditorState.create({
     doc: initialCode,
     extensions: [
-      theme,
+      /* search(),
+      highlightSelectionMatches(), */
+      ...initialSettings,
       javascript(),
-      lineNumbers(),
-      highlightExtension,
-      highlightActiveLineGutter(),
+      sliderPlugin,
+      // indentOnInput(), // works without. already brought with javascript extension?
+      // bracketMatching(), // does not do anything
+      closeBrackets(),
       syntaxHighlighting(defaultHighlightStyle),
-      keymap.of(defaultKeymap),
-      flashField,
+      history(),
       EditorView.updateListener.of((v) => onChange(v)),
-      keymap.of([
-        {
-          key: 'Ctrl-Enter',
-          run: () => onEvaluate(),
+      drawSelection({ cursorBlinkRate: 0 }),
+      Prec.highest(
+        keymap.of([
+          {
+            key: 'Ctrl-Enter',
+            run: () => onEvaluate?.(),
+          },
+          {
+            key: 'Alt-Enter',
+            run: () => onEvaluate?.(),
+          },
+          {
+            key: 'Ctrl-.',
+            run: () => onStop?.(),
+          },
+          {
+            key: 'Alt-.',
+            run: (_, e) => {
+              e.preventDefault();
+              onStop?.();
+            },
+          },
+          /* {
+          key: 'Ctrl-Shift-.',
+          run: () => (onPanic ? onPanic() : onStop?.()),
         },
         {
-          key: 'Ctrl-.',
-          run: () => onStop(),
-        },
-      ]),
+          key: 'Ctrl-Shift-Enter',
+          run: () => (onReEvaluate ? onReEvaluate() : onEvaluate?.()),
+        }, */
+        ]),
+      ),
     ],
   });
 
@@ -43,45 +120,76 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, the
 
 export class StrudelMirror {
   constructor(options) {
-    const { root, initialCode = '', onDraw, drawTime = [-2, 2], prebake, ...replOptions } = options;
+    const {
+      root,
+      id,
+      initialCode = '',
+      onDraw,
+      drawTime = [0, 0],
+      autodraw,
+      prebake,
+      bgFill = true,
+      ...replOptions
+    } = options;
     this.code = initialCode;
+    this.root = root;
+    this.miniLocations = [];
+    this.widgets = [];
+    this.painters = [];
+    this.drawTime = drawTime;
+    this.onDraw = onDraw;
+    const self = this;
+    this.id = id || s4();
 
     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);
+      this.onDraw?.(haps, time, currentFrame, this.painters);
     }, 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 approach does not work with multiple repls on screen
+    // TODO: refactor onPaint usages + find fix, maybe remove painters here?
+    Pattern.prototype.onPaint = function (onPaint) {
+      self.painters.push(onPaint);
+      return this;
+    };
+
+    this.prebaked = prebake();
+    autodraw && this.drawFirstFrame();
 
     this.repl = repl({
       ...replOptions,
-      onToggle: async (started) => {
+      onToggle: (started) => {
         replOptions?.onToggle?.(started);
-        const { scheduler } = await this.repl;
         if (started) {
-          this.drawer.start(scheduler);
+          this.adjustDrawTime();
+          this.drawer.start(this.repl.scheduler);
+          // stop other repls when this one is started
+          document.dispatchEvent(
+            new CustomEvent('start-repl', {
+              detail: this.id,
+            }),
+          );
         } else {
           this.drawer.stop();
+          updateMiniLocations(this.editor, []);
+          cleanupDraw(false);
         }
       },
       beforeEval: async () => {
-        await prebaked;
+        cleanupDraw();
+        this.painters = [];
+        await this.prebaked;
+        await replOptions?.beforeEval?.();
       },
       afterEval: (options) => {
+        // remember for when highlighting is toggled on
+        this.miniLocations = options.meta?.miniLocations;
+        this.widgets = options.meta?.widgets;
+        updateWidgets(this.editor, this.widgets);
+        updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
+        this.adjustDrawTime();
         this.drawer.invalidate();
       },
     });
@@ -89,25 +197,148 @@ export class StrudelMirror {
       root,
       initialCode,
       onChange: (v) => {
-        this.code = v.state.doc.toString();
+        if (v.docChanged) {
+          this.code = v.state.doc.toString();
+          this.repl.setCode?.(this.code);
+        }
       },
       onEvaluate: () => this.evaluate(),
       onStop: () => this.stop(),
     });
+    const cmEditor = this.root.querySelector('.cm-editor');
+    if (cmEditor) {
+      this.root.style.display = 'block';
+      if (bgFill) {
+        this.root.style.backgroundColor = 'var(--background)';
+      }
+      cmEditor.style.backgroundColor = 'transparent';
+    }
+    const settings = codemirrorSettings.get();
+    this.setFontSize(settings.fontSize);
+    this.setFontFamily(settings.fontFamily);
+
+    // stop this repl when another repl is started
+    this.onStartRepl = (e) => {
+      if (e.detail !== this.id) {
+        this.stop();
+      }
+    };
+    document.addEventListener('start-repl', this.onStartRepl);
+  }
+  // adjusts draw time depending on if there are painters
+  adjustDrawTime() {
+    // when no painters are set, [0,0] is enough (just highlighting)
+    this.drawer.setDrawTime(this.painters.length ? this.drawTime : [0, 0]);
+  }
+  async drawFirstFrame() {
+    if (!this.onDraw) {
+      return;
+    }
+    // draw first frame instantly
+    await this.prebaked;
+    try {
+      await this.repl.evaluate(this.code, false);
+      this.drawer.invalidate(this.repl.scheduler, -0.001);
+      // draw at -0.001 to avoid haps at 0 to be visualized as active
+      this.onDraw?.(this.drawer.visibleHaps, -0.001, [], this.painters);
+    } catch (err) {
+      console.warn('first frame could not be painted');
+    }
   }
   async evaluate() {
-    const { evaluate } = await this.repl;
     this.flash();
-    await evaluate(this.code);
+    await this.repl.evaluate(this.code);
   }
   async stop() {
-    const { scheduler } = await this.repl;
-    scheduler.stop();
+    this.repl.scheduler.stop();
+  }
+  async toggle() {
+    if (this.repl.scheduler.started) {
+      this.repl.stop();
+    } else {
+      this.evaluate();
+    }
   }
   flash(ms) {
     flash(this.editor, ms);
   }
   highlight(haps, time) {
-    highlightMiniLocations(this.editor.view, time, haps);
+    highlightMiniLocations(this.editor, time, haps);
+  }
+  setFontSize(size) {
+    this.root.style.fontSize = size + 'px';
+  }
+  setFontFamily(family) {
+    this.root.style.fontFamily = family;
+    const scroller = this.root.querySelector('.cm-scroller');
+    if (scroller) {
+      scroller.style.fontFamily = family;
+    }
+  }
+  reconfigureExtension(key, value) {
+    if (!extensions[key]) {
+      console.warn(`extension ${key} is not known`);
+      return;
+    }
+    value = parseBooleans(value);
+    const newValue = extensions[key](value, this);
+    this.editor.dispatch({
+      effects: compartments[key].reconfigure(newValue),
+    });
+    if (key === 'theme') {
+      activateTheme(value);
+    }
+  }
+  setLineWrappingEnabled(enabled) {
+    this.reconfigureExtension('isLineWrappingEnabled', enabled);
+  }
+  setBracketMatchingEnabled(enabled) {
+    this.reconfigureExtension('isBracketMatchingEnabled', enabled);
+  }
+  setLineNumbersDisplayed(enabled) {
+    this.reconfigureExtension('isLineNumbersDisplayed', enabled);
+  }
+  setTheme(theme) {
+    this.reconfigureExtension('theme', theme);
+  }
+  setAutocompletionEnabled(enabled) {
+    this.reconfigureExtension('isAutoCompletionEnabled', enabled);
+  }
+  updateSettings(settings) {
+    this.setFontSize(settings.fontSize);
+    this.setFontFamily(settings.fontFamily);
+    for (let key in extensions) {
+      this.reconfigureExtension(key, settings[key]);
+    }
+    const updated = { ...codemirrorSettings.get(), ...settings };
+    codemirrorSettings.set(updated);
+  }
+  changeSetting(key, value) {
+    if (extensions[key]) {
+      this.reconfigureExtension(key, value);
+      return;
+    } else if (key === 'fontFamily') {
+      this.setFontFamily(value);
+    } else if (key === 'fontSize') {
+      this.setFontSize(value);
+    }
+  }
+  setCode(code) {
+    const changes = { from: 0, to: this.editor.state.doc.length, insert: code };
+    this.editor.dispatch({ changes });
+  }
+  clear() {
+    this.onStartRepl && document.removeEventListener('start-repl', this.onStartRepl);
   }
 }
+
+function parseBooleans(value) {
+  return { true: true, false: false }[value] ?? value;
+}
+
+// helper function to generate repl ids
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}

packages/codemirror/flash.mjs

@@ -33,3 +33,5 @@ export const flash = (view, ms = 200) => {
     view.dispatch({ effects: setFlash.of(false) });
   }, ms);
 };
+
+export const isFlashEnabled = (on) => (on ? flashField : []);

packages/codemirror/highlight.mjs

@@ -57,6 +57,9 @@ const visibleMiniLocations = StateField.define({
         // 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) {
+          if (!hap.context?.locations || !hap.whole) {
+            continue;
+          }
           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)) {
@@ -64,7 +67,6 @@ const visibleMiniLocations = StateField.define({
             }
           }
         }
-
         visible = { atTime: e.value.atTime, haps };
       }
     }
@@ -124,3 +126,12 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
 });
 
 export const highlightExtension = [miniLocations, visibleMiniLocations, miniLocationHighlights];
+
+export const isPatternHighlightingEnabled = (on, config) => {
+  on &&
+    config &&
+    setTimeout(() => {
+      updateMiniLocations(config.editor, config.miniLocations);
+    }, 100);
+  return on ? highlightExtension : [];
+};

packages/codemirror/html.mjs

@@ -0,0 +1,17 @@
+const parser = typeof DOMParser !== 'undefined' ? new DOMParser() : null;
+export let html = (string) => {
+  return parser?.parseFromString(string, 'text/html').querySelectorAll('*');
+};
+let parseChunk = (chunk) => {
+  if (Array.isArray(chunk)) return chunk.flat().join('');
+  if (chunk === undefined) return '';
+  return chunk;
+};
+export let h = (strings, ...vars) => {
+  let string = '';
+  for (let i in strings) {
+    string += parseChunk(strings[i]);
+    string += parseChunk(vars[i]);
+  }
+  return html(string);
+};

packages/codemirror/index.mjs

@@ -2,3 +2,4 @@ export * from './codemirror.mjs';
 export * from './highlight.mjs';
 export * from './flash.mjs';
 export * from './slider.mjs';
+export * from './themes.mjs';

packages/codemirror/keybindings.mjs

@@ -0,0 +1,31 @@
+import { Prec } from '@codemirror/state';
+import { keymap, ViewPlugin } from '@codemirror/view';
+// import { searchKeymap } from '@codemirror/search';
+import { emacs } from '@replit/codemirror-emacs';
+import { vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+import { defaultKeymap, historyKeymap } from '@codemirror/commands';
+
+const vscodePlugin = ViewPlugin.fromClass(
+  class {
+    constructor() {}
+  },
+  {
+    provide: () => {
+      return Prec.highest(keymap.of([...vscodeKeymap]));
+    },
+  },
+);
+const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
+
+const keymaps = {
+  vim,
+  emacs,
+  vscode: vscodeExtension,
+};
+
+export function keybindings(name) {
+  const active = keymaps[name];
+  return [keymap.of(defaultKeymap), keymap.of(historyKeymap), active ? active() : []];
+  // keymap.of(searchKeymap),
+}

packages/codemirror/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@strudel/codemirror",
-  "version": "0.9.0",
+  "version": "1.0.1",
   "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
   "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
+    "main": "dist/index.mjs"
   },
   "scripts": {
     "build": "vite build",
@@ -33,15 +32,24 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@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:*"
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/search": "^6.5.5",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
+    "@lezer/highlight": "^1.2.0",
+    "@nanostores/persistent": "^0.9.1",
+    "@replit/codemirror-emacs": "^6.0.1",
+    "@replit/codemirror-vim": "^6.1.0",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@strudel/core": "workspace:*",
+    "@uiw/codemirror-themes": "^4.21.21",
+    "@uiw/codemirror-themes-all": "^4.21.21",
+    "nanostores": "^0.9.5"
   },
   "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^5.0.10"
   }
 }

packages/codemirror/slider.mjs

@@ -1,4 +1,4 @@
-import { ref, pure } from '@strudel.cycles/core';
+import { ref, pure } from '@strudel/core';
 import { WidgetType, ViewPlugin, Decoration } from '@codemirror/view';
 import { StateEffect, StateField } from '@codemirror/state';
 
@@ -111,6 +111,15 @@ export const sliderPlugin = ViewPlugin.fromClass(
   },
 );
 
+/**
+ * Displays a slider widget to allow the user manipulate a value
+ *
+ * @name slider
+ * @param {number} value Initial value
+ * @param {number} min Minimum value - optional, defaults to 0
+ * @param {number} max Maximum value - optional, defaults to 1
+ * @param {number} step Step size - optional
+ */
 export let slider = (value) => {
   console.warn('slider will only work when the transpiler is used... passing value as is');
   return pure(value);

packages/codemirror/themes.mjs

@@ -30,13 +30,13 @@ import {
   xcodeLight,
 } from '@uiw/codemirror-themes-all';
 
-import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
-import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
-import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
-import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
-import teletext, { settings as teletextSettings } from '@strudel.cycles/react/src/themes/teletext';
-import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
-import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
+import strudelTheme from './themes/strudel-theme';
+import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen';
+import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen';
+import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen';
+import teletext, { settings as teletextSettings } from './themes/teletext';
+import algoboy, { settings as algoboySettings } from './themes/algoboy';
+import terminal, { settings as terminalSettings } from './themes/terminal';
 
 export const themes = {
   strudelTheme,
@@ -473,6 +473,9 @@ function stringifySafe(json) {
   return JSON.stringify(json, getCircularReplacer());
 }
 
+export const theme = (theme) => themes[theme] || themes.strudelTheme;
+
+// css style injection helpers
 export function injectStyle(rule) {
   const newStyle = document.createElement('style');
   document.head.appendChild(newStyle);
@@ -480,3 +483,45 @@ export function injectStyle(rule) {
   const ruleIndex = styleSheet.insertRule(rule, 0);
   return () => styleSheet.deleteRule(ruleIndex);
 }
+
+let currentTheme,
+  resetThemeStyle,
+  themeStyle,
+  styleID = 'strudel-theme-vars';
+export function initTheme(theme) {
+  if (!document.getElementById(styleID)) {
+    themeStyle = document.createElement('style');
+    themeStyle.id = styleID;
+    document.head.append(themeStyle);
+  }
+  activateTheme(theme);
+}
+
+export function activateTheme(name) {
+  if (currentTheme === name) {
+    return;
+  }
+  currentTheme = name;
+  if (!settings[name]) {
+    console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
+  }
+  const themeSettings = settings[name] || settings.strudelTheme;
+  // set css variables
+  themeStyle.innerHTML = `:root {
+      ${Object.entries(themeSettings)
+        // important to override fallback
+        .map(([key, value]) => `--${key}: ${value} !important;`)
+        .join('\n')}
+    }`;
+  // tailwind dark mode
+  if (themeSettings.light) {
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+  }
+  resetThemeStyle?.();
+  resetThemeStyle = undefined;
+  if (themeSettings.customStyle) {
+    resetThemeStyle = injectStyle(themeSettings.customStyle);
+  }
+}

packages/codemirror/themes/one-dark.mjs

@@ -1,139 +0,0 @@
-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/codemirror/tooltip.mjs

@@ -1,36 +1,40 @@
-import { createRoot } from 'react-dom/client';
 import { hoverTooltip } from '@codemirror/view';
-import jsdoc from '../../../../doc.json';
-import { Autocomplete } from './Autocomplete';
+import jsdoc from '../../doc.json';
+import { Autocomplete } from './autocomplete.mjs';
 
 const getDocLabel = (doc) => doc.name || doc.longname;
 
 let ctrlDown = false;
 
-// Record Control key event to trigger or block the tooltip depending on the state
-window.addEventListener(
-  'keyup',
-  function (e) {
-    if (e.key == 'Control') {
-      ctrlDown = false;
-    }
-  },
-  true,
-);
+if (typeof window !== 'undefined') {
+  // Record Control key event to trigger or block the tooltip depending on the state
+  window.addEventListener(
+    'keyup',
+    function (e) {
+      if (e.key == 'Control') {
+        ctrlDown = false;
+      }
+    },
+    true,
+  );
 
-window.addEventListener(
-  'keydown',
-  function (e) {
-    if (e.key == 'Control') {
-      ctrlDown = true;
-    }
-  },
-  true,
-);
+  window.addEventListener(
+    'keydown',
+    function (e) {
+      if (e.key == 'Control') {
+        ctrlDown = true;
+      }
+    },
+    true,
+  );
+}
 
 export const strudelTooltip = hoverTooltip(
   (view, pos, side) => {
     // Word selection from CodeMirror Hover Tooltip example https://codemirror.net/examples/tooltip/#hover-tooltips
+    if (!ctrlDown) {
+      return null;
+    }
     let { from, to, text } = view.state.doc.lineAt(pos);
     let start = pos,
       end = pos;
@@ -47,11 +51,13 @@ export const strudelTooltip = hoverTooltip(
     // Get entry from Strudel documentation
     let entry = jsdoc.docs.filter((doc) => getDocLabel(doc) === word)[0];
     if (!entry) {
-      return null;
-    }
-    if (!ctrlDown) {
-      return null;
+      // Try for synonyms
+      entry = jsdoc.docs.filter((doc) => doc.synonyms && doc.synonyms.includes(word))[0];
+      if (!entry) {
+        return null;
+      }
     }
+
     return {
       pos: start,
       end,
@@ -60,10 +66,13 @@ export const strudelTooltip = hoverTooltip(
       create(view) {
         let dom = document.createElement('div');
         dom.className = 'strudel-tooltip';
-        createRoot(dom).render(<Autocomplete doc={entry} />);
+        const ac = Autocomplete({ doc: entry, label: word });
+        dom.appendChild(ac);
         return { dom };
       },
     };
   },
   { hoverTime: 10 },
 );
+
+export const isTooltipEnabled = (on) => (on ? strudelTooltip : []);

packages/codemirror/vite.config.js

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

packages/core/README.md

@@ -1,17 +1,17 @@
-# @strudel.cycles/core
+# @strudel/core
 
 This package contains the bare essence of strudel.
 
 ## Install
 
 ```sh
-npm i @strudel.cycles/core --save
+npm i @strudel/core --save
 ```
 
 ## Example
 
 ```js
-import { sequence } from '@strudel.cycles/core';
+import { sequence } from '@strudel/core';
 
 const pattern = sequence('a', ['b', 'c']);
 
@@ -33,7 +33,7 @@ b: 3/2 - 7/4
 c: 7/4 - 2
 ```
 
-- [play with @strudel.cycles/core on codesandbox](https://codesandbox.io/s/strudel-core-test-forked-9ywhv7?file=/src/index.js).
+- [play with @strudel/core on codesandbox](https://codesandbox.io/s/strudel-core-test-forked-9ywhv7?file=/src/index.js).
 - [open color pattern example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/canvas.html)
 - [open minimal repl example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/vanilla.html)
 - [open minimal vite example](./examples/vite-vanilla-repl/)

packages/core/controls.mjs

@@ -40,7 +40,7 @@ const generic_params = [
    * @name n
    * @param {number | Pattern} value sample index starting from 0
    * @example
-   * s("bd sd,hh*3").n("<0 1>")
+   * s("bd sd [~ bd] sd,hh*6").n("<0 1>")
    */
   // also see https://github.com/tidalcycles/strudel/pull/63
   ['n'],
@@ -82,7 +82,7 @@ const generic_params = [
    * @name gain
    * @param {number | Pattern} amount gain.
    * @example
-   * s("hh*8").gain(".4!2 1 .4!2 1 .4 1")
+   * s("hh*8").gain(".4!2 1 .4!2 1 .4 1").fast(2)
    *
    */
   ['gain'],
@@ -91,13 +91,13 @@ const generic_params = [
    *
    * @name postgain
    * @example
-   * s("bd sd,hh*4")
+   * s("bd sd [~ bd] sd,hh*8")
    * .compressor("-20:20:10:.002:.02").postgain(1.5)
    *
    */
   ['postgain'],
   /**
-   * Like {@link gain}, but linear.
+   * Like `gain`, but linear.
    *
    * @name amp
    * @param {number | Pattern} amount gain.
@@ -114,7 +114,7 @@ const generic_params = [
    * @param {number | Pattern} attack time in seconds.
    * @synonyms att
    * @example
-   * note("c3 e3").attack("<0 .1 .5>")
+   * note("c3 e3 f3 g3").attack("<0 .1 .5>")
    *
    */
   ['attack', 'att'],
@@ -128,7 +128,7 @@ const generic_params = [
    * @name fmh
    * @param {number | Pattern} harmonicity
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm(4)
    * .fmh("<1 2 1.5 1.61>")
    * .scope()
@@ -143,7 +143,7 @@ const generic_params = [
    * @param {number | Pattern} brightness modulation index
    * @synonyms fmi
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm("<0 1 2 8 32>")
    * .scope()
    *
@@ -156,7 +156,7 @@ const generic_params = [
    * @name fmenv
    * @param {number | Pattern} type lin | exp
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm(4)
    * .fmdecay(.2)
    * .fmsustain(0)
@@ -171,7 +171,7 @@ const generic_params = [
    * @name fmattack
    * @param {number | Pattern} time attack time
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm(4)
    * .fmattack("<0 .05 .1 .2>")
    * .scope()
@@ -184,7 +184,7 @@ const generic_params = [
    * @name fmdecay
    * @param {number | Pattern} time decay time
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm(4)
    * .fmdecay("<.01 .05 .1 .2>")
    * .fmsustain(.4)
@@ -198,7 +198,7 @@ const generic_params = [
    * @name fmsustain
    * @param {number | Pattern} level sustain level
    * @example
-   * note("c e g b")
+   * note("c e g b g e")
    * .fm(4)
    * .fmdecay(.1)
    * .fmsustain("<1 .75 .5 0>")
@@ -216,7 +216,7 @@ const generic_params = [
    * @name bank
    * @param {string | Pattern} bank the name of the bank
    * @example
-   * s("bd sd").bank('RolandTR909') // = s("RolandTR909_bd RolandTR909_sd")
+   * s("bd sd [~ bd] sd").bank('RolandTR909') // = s("RolandTR909_bd RolandTR909_sd")
    *
    */
   ['bank'],
@@ -231,10 +231,10 @@ const generic_params = [
    * @name decay
    * @param {number | Pattern} time decay time in seconds
    * @example
-   * note("c3 e3").decay("<.1 .2 .3 .4>").sustain(0)
+   * note("c3 e3 f3 g3").decay("<.1 .2 .3 .4>").sustain(0)
    *
    */
-  ['decay'],
+  ['decay', 'dec'],
   /**
    * Amplitude envelope sustain level: The level which is reached after attack / decay, being sustained until the offset.
    *
@@ -242,7 +242,7 @@ const generic_params = [
    * @param {number | Pattern} gain sustain level between 0 and 1
    * @synonyms sus
    * @example
-   * note("c3 e3").decay(.2).sustain("<0 .1 .4 .6 1>")
+   * note("c3 e3 f3 g3").decay(.2).sustain("<0 .1 .4 .6 1>")
    *
    */
   ['sustain', 'sus'],
@@ -267,10 +267,10 @@ const generic_params = [
    * @param {number | Pattern} frequency center frequency
    * @synonyms bandf, bp
    * @example
-   * s("bd sd,hh*3").bpf("<1000 2000 4000 8000>")
+   * s("bd sd [~ bd] sd,hh*6").bpf("<1000 2000 4000 8000>")
    *
    */
-  [['bandf', 'bandq'], 'bpf', 'bp'],
+  [['bandf', 'bandq', 'bpenv'], 'bpf', 'bp'],
   // TODO: in tidal, it seems to be normalized
   /**
    * Sets the **b**and-**p**ass **q**-factor (resonance).
@@ -279,7 +279,7 @@ const generic_params = [
    * @param {number | Pattern} q q factor
    * @synonyms bandq
    * @example
-   * s("bd sd").bpf(500).bpq("<0 1 2 3>")
+   * s("bd sd [~ bd] sd").bpf(500).bpq("<0 1 2 3>")
    *
    */
   // currently an alias of 'bandq' https://github.com/tidalcycles/strudel/issues/496
@@ -292,8 +292,8 @@ const generic_params = [
    * @name begin
    * @param {number | Pattern} amount between 0 and 1, where 1 is the length of the sample
    * @example
-   * samples({ rave: 'rave/AREUREADY.wav' }, 'github:tidalcycles/Dirt-Samples/master/')
-   * s("rave").begin("<0 .25 .5 .75>")
+   * samples({ rave: 'rave/AREUREADY.wav' }, 'github:tidalcycles/dirt-samples')
+   * s("rave").begin("<0 .25 .5 .75>").fast(2)
    *
    */
   ['begin'],
@@ -304,7 +304,7 @@ const generic_params = [
    * @name end
    * @param {number | Pattern} length 1 = whole sample, .5 = half sample, .25 = quarter sample etc..
    * @example
-   * s("bd*2,oh*4").end("<.1 .2 .5 1>")
+   * s("bd*2,oh*4").end("<.1 .2 .5 1>").fast(2)
    *
    */
   ['end'],
@@ -376,11 +376,24 @@ const generic_params = [
    * @name coarse
    * @param {number | Pattern} factor 1 for original 2 for half, 3 for a third and so on.
    * @example
-   * s("bd sd,hh*4").coarse("<1 4 8 16 32>")
+   * s("bd sd [~ bd] sd,hh*8").coarse("<1 4 8 16 32>")
    *
    */
   ['coarse'],
 
+  /**
+   * Allows you to set the output channels on the interface
+   *
+   * @name channels
+   * @synonyms ch
+   *
+   * @param {number | Pattern} channels pattern the output channels
+   * @example
+   * note("e a d b g").channels("3:4")
+   *
+   */
+  ['channels', 'ch'],
+
   ['phaserrate', 'phasr'], // superdirt only
 
   /**
@@ -450,7 +463,7 @@ const generic_params = [
    * @name cut
    * @param {number | Pattern} group cut group number
    * @example
-   * s("rd*4").cut(1)
+   * s("[oh hh]*4").cut(1)
    *
    */
   ['cut'],
@@ -463,12 +476,12 @@ const generic_params = [
    * @param {number | Pattern} frequency audible between 0 and 20000
    * @synonyms cutoff, ctf, lp
    * @example
-   * s("bd sd,hh*3").lpf("<4000 2000 1000 500 200 100>")
+   * s("bd sd [~ bd] sd,hh*6").lpf("<4000 2000 1000 500 200 100>")
    * @example
-   * s("bd*8").lpf("1000:0 1000:10 1000:20 1000:30")
+   * s("bd*16").lpf("1000:0 1000:10 1000:20 1000:30")
    *
    */
-  [['cutoff', 'resonance'], 'ctf', 'lpf', 'lp'],
+  [['cutoff', 'resonance', 'lpenv'], 'ctf', 'lpf', 'lp'],
 
   /**
    * Sets the lowpass filter envelope modulation depth.
@@ -476,7 +489,7 @@ const generic_params = [
    * @param {number | Pattern} modulation depth of the lowpass filter envelope between 0 and _n_
    * @synonyms lpe
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .lpf(500)
    * .lpa(.5)
@@ -489,7 +502,7 @@ const generic_params = [
    * @param {number | Pattern} modulation depth of the highpass filter envelope between 0 and _n_
    * @synonyms hpe
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .hpf(500)
    * .hpa(.5)
@@ -502,7 +515,7 @@ const generic_params = [
    * @param {number | Pattern} modulation depth of the bandpass filter envelope between 0 and _n_
    * @synonyms bpe
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .bpf(500)
    * .bpa(.5)
@@ -515,7 +528,7 @@ const generic_params = [
    * @param {number | Pattern} attack time of the filter envelope
    * @synonyms lpa
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .lpf(500)
    * .lpa("<.5 .25 .1 .01>/4")
@@ -528,7 +541,7 @@ const generic_params = [
    * @param {number | Pattern} attack time of the highpass filter envelope
    * @synonyms hpa
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .hpf(500)
    * .hpa("<.5 .25 .1 .01>/4")
@@ -541,7 +554,7 @@ const generic_params = [
    * @param {number | Pattern} attack time of the bandpass filter envelope
    * @synonyms bpa
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .bpf(500)
    * .bpa("<.5 .25 .1 .01>/4")
@@ -554,7 +567,7 @@ const generic_params = [
    * @param {number | Pattern} decay time of the filter envelope
    * @synonyms lpd
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .lpf(500)
    * .lpd("<.5 .25 .1 0>/4")
@@ -568,7 +581,7 @@ const generic_params = [
    * @param {number | Pattern} decay time of the highpass filter envelope
    * @synonyms hpd
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .hpf(500)
    * .hpd("<.5 .25 .1 0>/4")
@@ -582,7 +595,7 @@ const generic_params = [
    * @param {number | Pattern} decay time of the bandpass filter envelope
    * @synonyms bpd
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .bpf(500)
    * .bpd("<.5 .25 .1 0>/4")
@@ -596,7 +609,7 @@ const generic_params = [
    * @param {number | Pattern} sustain amplitude of the lowpass filter envelope
    * @synonyms lps
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .lpf(500)
    * .lpd(.5)
@@ -610,7 +623,7 @@ const generic_params = [
    * @param {number | Pattern} sustain amplitude of the highpass filter envelope
    * @synonyms hps
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .hpf(500)
    * .hpd(.5)
@@ -624,7 +637,7 @@ const generic_params = [
    * @param {number | Pattern} sustain amplitude of the bandpass filter envelope
    * @synonyms bps
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .bpf(500)
    * .bpd(.5)
@@ -638,7 +651,7 @@ const generic_params = [
    * @param {number | Pattern} release time of the filter envelope
    * @synonyms lpr
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .clip(.5)
    * .lpf(500)
@@ -653,7 +666,7 @@ const generic_params = [
    * @param {number | Pattern} release time of the highpass filter envelope
    * @synonyms hpr
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .clip(.5)
    * .hpf(500)
@@ -668,7 +681,7 @@ const generic_params = [
    * @param {number | Pattern} release time of the bandpass filter envelope
    * @synonyms bpr
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .clip(.5)
    * .bpf(500)
@@ -682,11 +695,11 @@ const generic_params = [
    * @name ftype
    * @param {number | Pattern} type 12db (default) or 24db
    * @example
-   * note("<c2 e2 f2 g2>")
+   * note("c2 e2 f2 g2")
    * .sound('sawtooth')
    * .lpf(500)
    * .bpenv(4)
-   * .ftype("<12db 24db>")
+   * .ftype("12db 24db")
    */
   ['ftype'],
   ['fanchor'],
@@ -699,9 +712,9 @@ const generic_params = [
    * @param {number | Pattern} frequency audible between 0 and 20000
    * @synonyms hp, hcutoff
    * @example
-   * s("bd sd,hh*4").hpf("<4000 2000 1000 500 200 100>")
+   * s("bd sd [~ bd] sd,hh*8").hpf("<4000 2000 1000 500 200 100>")
    * @example
-   * s("bd sd,hh*4").hpf("<2000 2000:25>")
+   * s("bd sd [~ bd] sd,hh*8").hpf("<2000 2000:25>")
    *
    */
   // currently an alias of 'hcutoff' https://github.com/tidalcycles/strudel/issues/496
@@ -713,11 +726,11 @@ const generic_params = [
    * @synonyms vibrato, v
    * @param {number | Pattern} frequency of the vibrato in hertz
    * @example
-   * note("a")
+   * note("a e")
    * .vib("<.5 1 2 4 8 16>")
    * @example
    * // change the modulation depth with ":"
-   * note("a")
+   * note("a e")
    * .vib("<.5 1 2 4 8 16>:12")
    */
   [['vib', 'vibmod'], 'vibrato', 'v'],
@@ -737,15 +750,15 @@ const generic_params = [
    * @synonyms vmod
    * @param {number | Pattern} depth of vibrato (in semitones)
    * @example
-   * note("a").vib(4)
+   * note("a e").vib(4)
    * .vibmod("<.25 .5 1 2 12>")
    * @example
    * // change the vibrato frequency with ":"
-   * note("a")
+   * note("a e")
    * .vibmod("<.25 .5 1 2 12>:8")
    */
   [['vibmod', 'vib'], 'vmod'],
-  [['hcutoff', 'hresonance'], 'hpf', 'hp'],
+  [['hcutoff', 'hresonance', 'hpenv'], 'hpf', 'hp'],
   /**
    * Controls the **h**igh-**p**ass **q**-value.
    *
@@ -753,7 +766,7 @@ const generic_params = [
    * @param {number | Pattern} q resonance factor between 0 and 50
    * @synonyms hresonance
    * @example
-   * s("bd sd,hh*4").hpf(2000).hpq("<0 10 20 30>")
+   * s("bd sd [~ bd] sd,hh*8").hpf(2000).hpq("<0 10 20 30>")
    *
    */
   ['hresonance', 'hpq'],
@@ -764,7 +777,7 @@ const generic_params = [
    * @param {number | Pattern} q resonance factor between 0 and 50
    * @synonyms resonance
    * @example
-   * s("bd sd,hh*4").lpf(2000).lpq("<0 10 20 30>")
+   * s("bd sd [~ bd] sd,hh*8").lpf(2000).lpq("<0 10 20 30>")
    *
    */
   // currently an alias of 'resonance' https://github.com/tidalcycles/strudel/issues/496
@@ -791,7 +804,7 @@ const generic_params = [
    * @name delay
    * @param {number | Pattern} level between 0 and 1
    * @example
-   * s("bd").delay("<0 .25 .5 1>")
+   * s("bd bd").delay("<0 .25 .5 1>")
    * @example
    * s("bd bd").delay("0.65:0.25:0.9 0.65:0.125:0.7")
    *
@@ -805,7 +818,7 @@ const generic_params = [
    * @param {number | Pattern} feedback between 0 and 1
    * @synonyms delayfb, dfb
    * @example
-   * s("bd").delay(.25).delayfeedback("<.25 .5 .75 1>").slow(2)
+   * s("bd").delay(.25).delayfeedback("<.25 .5 .75 1>")
    *
    */
   ['delayfeedback', 'delayfb', 'dfb'],
@@ -816,7 +829,7 @@ const generic_params = [
    * @param {number | Pattern} seconds between 0 and Infinity
    * @synonyms delayt, dt
    * @example
-   * s("bd").delay(.25).delaytime("<.125 .25 .5 1>").slow(2)
+   * s("bd bd").delay(.25).delaytime("<.125 .25 .5 1>")
    *
    */
   ['delaytime', 'delayt', 'dt'],
@@ -843,7 +856,7 @@ const generic_params = [
    */
   ['detune', 'det'],
   /**
-   * Set dryness of reverb. See {@link room} and {@link size} for more information about reverb.
+   * Set dryness of reverb. See `room` and `size` for more information about reverb.
    *
    * @name dry
    * @param {number | Pattern} dry 0 = wet, 1 = dry
@@ -855,7 +868,7 @@ const generic_params = [
   ['dry'],
   // TODO: does not seem to do anything
   /*
-   * Used when using {@link begin}/{@link end} or {@link chop}/{@link striate} and friends, to change the fade out time of the 'grain' envelope.
+   * Used when using `begin`/`end` or `chop`/`striate` and friends, to change the fade out time of the 'grain' envelope.
    *
    * @name fadeTime
    * @param {number | Pattern} time between 0 and 1
@@ -878,6 +891,82 @@ const generic_params = [
    *
    */
   ['freq'],
+  // pitch envelope
+  /**
+   * Attack time of pitch envelope.
+   *
+   * @name pattack
+   * @synonyms patt
+   * @param {number | Pattern} time time in seconds
+   * @example
+   * note("c eb g bb").pattack("0 .1 .25 .5").slow(2)
+   *
+   */
+  ['pattack', 'patt'],
+  /**
+   * Decay time of pitch envelope.
+   *
+   * @name pdecay
+   * @synonyms pdec
+   * @param {number | Pattern} time time in seconds
+   * @example
+   * note("<c eb g bb>").pdecay("<0 .1 .25 .5>")
+   *
+   */
+  ['pdecay', 'pdec'],
+  // TODO: how to use psustain?!
+  ['psustain', 'psus'],
+  /**
+   * Release time of pitch envelope
+   *
+   * @name prelease
+   * @synonyms prel
+   * @param {number | Pattern} time time in seconds
+   * @example
+   * note("<c eb g bb> ~")
+   * .release(.5) // to hear the pitch release
+   * .prelease("<0 .1 .25 .5>")
+   *
+   */
+  ['prelease', 'prel'],
+  /**
+   * Amount of pitch envelope. Negative values will flip the envelope.
+   * If you don't set other pitch envelope controls, `pattack:.2` will be the default.
+   *
+   * @name penv
+   * @param {number | Pattern} semitones change in semitones
+   * @example
+   * note("c")
+   * .penv("<12 7 1 .5 0 -1 -7 -12>")
+   *
+   */
+  ['penv'],
+  /**
+   * Curve of envelope. Defaults to linear. exponential is good for kicks
+   *
+   * @name pcurve
+   * @param {number | Pattern} type 0 = linear, 1 = exponential
+   * @example
+   * note("g1*4")
+   * .s("sine").pdec(.5)
+   * .penv(32)
+   * .pcurve("<0 1>")
+   *
+   */
+  ['pcurve'],
+  /**
+   * Sets the range anchor of the envelope:
+   * - anchor 0: range = [note, note + penv]
+   * - anchor 1: range = [note - penv, note]
+   * If you don't set an anchor, the value will default to the psustain value.
+   *
+   * @name panchor
+   * @param {number | Pattern} anchor anchor offset
+   * @example
+   * note("c c4").penv(12).panchor("<0 .5 1 .5>")
+   *
+   */
+  ['panchor'],
   // TODO: https://tidalcycles.org/docs/configuration/MIDIOSC/control-voltage/#gate
   ['gate', 'gat'],
   // ['hatgrain'],
@@ -973,8 +1062,8 @@ const generic_params = [
    * @param {number | Pattern} number
    * @example
    * stack(
-   *   s("hh*3").delay(.5).delaytime(.25).orbit(1),
-   *   s("~ sd").delay(.5).delaytime(.125).orbit(2)
+   *   s("hh*6").delay(.5).delaytime(.25).orbit(1),
+   *   s("~ sd ~ sd").delay(.5).delaytime(.125).orbit(2)
    * )
    */
   ['orbit'],
@@ -987,6 +1076,8 @@ const generic_params = [
    * @param {number | Pattern} pan between 0 and 1, from left to right (assuming stereo), once round a circle (assuming multichannel)
    * @example
    * s("[bd hh]*2").pan("<.5 1 .5 0>")
+   * @example
+   * s("bd rim sd rim bd ~ cp rim").pan(sine.slow(2))
    *
    */
   ['pan'],
@@ -1044,9 +1135,9 @@ const generic_params = [
    * @name room
    * @param {number | Pattern} level between 0 and 1
    * @example
-   * s("bd sd").room("<0 .2 .4 .6 .8 1>")
+   * s("bd sd [~ bd] sd").room("<0 .2 .4 .6 .8 1>")
    * @example
-   * s("bd sd").room("<0.9:1 0.9:4>")
+   * s("bd sd [~ bd] sd").room("<0.9:1 0.9:4>")
    *
    */
   [['room', 'size']],
@@ -1058,9 +1149,9 @@ const generic_params = [
    * @synonyms rlp
    * @param {number} frequency between 0 and 20000hz
    * @example
-   * s("bd sd").room(0.5).rlp(10000)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(10000)
    * @example
-   * s("bd sd").room(0.5).rlp(5000)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(5000)
    */
   ['roomlp', 'rlp'],
   /**
@@ -1071,9 +1162,9 @@ const generic_params = [
    * @synonyms rdim
    * @param {number} frequency between 0 and 20000hz
    * @example
-   * s("bd sd").room(0.5).rlp(10000).rdim(8000)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(10000).rdim(8000)
    * @example
-   * s("bd sd").room(0.5).rlp(5000).rdim(400)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(5000).rdim(400)
    *
    */
   ['roomdim', 'rdim'],
@@ -1085,9 +1176,9 @@ const generic_params = [
    * @synonyms rfade
    * @param {number} seconds for the reverb to fade
    * @example
-   * s("bd sd").room(0.5).rlp(10000).rfade(0.5)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(10000).rfade(0.5)
    * @example
-   * s("bd sd").room(0.5).rlp(5000).rfade(4)
+   * s("bd sd [~ bd] sd").room(0.5).rlp(5000).rfade(4)
    *
    */
   ['roomfade', 'rfade'],
@@ -1097,25 +1188,25 @@ const generic_params = [
    * @param {string | Pattern} sample to use as an impulse response
    * @synonyms ir
    * @example
-   * s("bd sd").room(.8).ir("<shaker_large:0 shaker_large:2>")
+   * s("bd sd [~ bd] sd").room(.8).ir("<shaker_large:0 shaker_large:2>")
    *
    */
   [['ir', 'i'], 'iresponse'],
   /**
-   * Sets the room size of the reverb, see {@link room}.
+   * Sets the room size of the reverb, see `room`.
    * When this property is changed, the reverb will be recaculated, so only change this sparsely..
    *
    * @name roomsize
    * @param {number | Pattern} size between 0 and 10
    * @synonyms rsize, sz, size
    * @example
-   * s("bd sd").room(.8).rsize(1)
+   * s("bd sd [~ bd] sd").room(.8).rsize(1)
    * @example
-   * s("bd sd").room(.8).rsize(4)
+   * s("bd sd [~ bd] sd").room(.8).rsize(4)
    *
    */
   // TODO: find out why :
-  // s("bd sd").room(.8).roomsize("<0 .2 .4 .6 .8 [1,0]>").osc()
+  // s("bd sd [~ bd] sd").room(.8).roomsize("<0 .2 .4 .6 .8 [1,0]>").osc()
   // .. does not work. Is it because room is only one effect?
   ['roomsize', 'size', 'sz', 'rsize'],
   // ['sagogo'],
@@ -1128,7 +1219,7 @@ const generic_params = [
    * @name shape
    * @param {number | Pattern} distortion between 0 and 1
    * @example
-   * s("bd sd,hh*4").shape("<0 .2 .4 .6 .8>")
+   * s("bd sd [~ bd] sd,hh*8").shape("<0 .2 .4 .6 .8>")
    *
    */
   ['shape'],
@@ -1138,7 +1229,7 @@ const generic_params = [
    *
    * @name compressor
    * @example
-   * s("bd sd,hh*4")
+   * s("bd sd [~ bd] sd,hh*8")
    * .compressor("-20:20:10:.002:.02")
    *
    */
@@ -1153,14 +1244,14 @@ const generic_params = [
    * @name speed
    * @param {number | Pattern} speed -inf to inf, negative numbers play the sample backwards.
    * @example
-   * s("bd").speed("<1 2 4 1 -2 -4>")
+   * s("bd*6").speed("1 2 4 1 -2 -4")
    * @example
    * speed("1 1.5*2 [2 1.1]").s("piano").clip(1)
    *
    */
   ['speed'],
   /**
-   * Used in conjunction with {@link speed}, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`.
+   * Used in conjunction with `speed`, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`.
    *
    * @name unit
    * @param {number | string | Pattern} unit see description above
@@ -1196,10 +1287,12 @@ const generic_params = [
    * Formant filter to make things sound like vowels.
    *
    * @name vowel
-   * @param {string | Pattern} vowel You can use a e i o u.
+   * @param {string | Pattern} vowel You can use a e i o u ae aa oe ue y uh un en an on, corresponding to [a] [e] [i] [o] [u] [æ] [ɑ] [ø] [y] [ɯ] [ʌ] [œ̃] [ɛ̃] [ɑ̃] [ɔ̃]. Aliases: aa = å = ɑ, oe = ø = ö, y = ı, ae = æ.
    * @example
-   * note("c2 <eb2 <g2 g1>>").s('sawtooth')
+   * note("[c2 <eb2 <g2 g1>>]*2").s('sawtooth')
    * .vowel("<a e i <o u>>")
+   * @example
+   * s("bd sd mt ht bd [~ cp] ht lt").vowel("[a|e|i|o|u]")
    *
    */
   ['vowel'],
@@ -1214,6 +1307,16 @@ const generic_params = [
    * @name waveloss
    */
   ['waveloss'],
+  /*
+   * Noise crackle density
+   *
+   * @name density
+   * @param {number | Pattern} density between 0 and x
+   * @example
+   * s("crackle*4").density("<0.01 0.04 0.2 0.5>".slow(4))
+   *
+   */
+  ['density'],
   // TODO: midi effects?
   ['dur'],
   // ['modwheel'],
@@ -1364,17 +1467,27 @@ controls.createParams = (...names) =>
  * @param {number | Pattern} gain sustain level (0 to 1)
  * @param {number | Pattern} time release time in seconds
  * @example
- * note("<c3 bb2 f3 eb3>").sound("sawtooth").lpf(600).adsr(".1:.1:.5:.2")
+ * note("[c3 bb2 f3 eb3]*2").sound("sawtooth").lpf(600).adsr(".1:.1:.5:.2")
  */
 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;
+controls.ad = register('ad', (t, pat) => {
+  t = !Array.isArray(t) ? [t] : t;
+  const [attack, decay = attack] = t;
+  return pat.attack(attack).decay(decay);
+});
+controls.ds = register('ds', (t, pat) => {
+  t = !Array.isArray(t) ? [t] : t;
+  const [decay, sustain = 0] = t;
   return pat.set({ decay, sustain });
 });
+controls.ds = register('ar', (t, pat) => {
+  t = !Array.isArray(t) ? [t] : t;
+  const [attack, release = attack] = t;
+  return pat.set({ attack, release });
+});
 
 export default controls;

packages/core/cyclist.mjs

@@ -10,14 +10,15 @@ import { logger } from './logger.mjs';
 export class Cyclist {
   constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1 }) {
     this.started = false;
-    this.cps = 1;
+    this.cps = 0.5;
+    this.num_ticks_since_cps_change = 0;
     this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.lastBegin = 0; // query begin of last tick
     this.lastEnd = 0; // query end of last tick
     this.getTime = getTime; // get absolute time
+    this.num_cycles_since_last_cps_change = 0;
     this.onToggle = onToggle;
     this.latency = latency; // fixed trigger time offset
-    const round = (x) => Math.round(x * 1000) / 1000;
     this.clock = createClock(
       getTime,
       // called slightly before each cycle
@@ -25,14 +26,24 @@ export class Cyclist {
         if (tick === 0) {
           this.origin = phase;
         }
+        if (this.num_ticks_since_cps_change === 0) {
+          this.num_cycles_since_last_cps_change = this.lastEnd;
+        }
+        this.num_ticks_since_cps_change++;
         try {
           const time = getTime();
           const begin = this.lastEnd;
           this.lastBegin = begin;
-          const end = round(begin + duration * this.cps);
+
+          //convert ticks to cycles, so you can query the pattern for events
+          const eventLength = duration * this.cps;
+          const end = this.num_cycles_since_last_cps_change + this.num_ticks_since_cps_change * eventLength;
           this.lastEnd = end;
-          const haps = this.pattern.queryArc(begin, end);
-          const tickdeadline = phase - time; // time left till phase begins
+
+          // query the pattern for events
+          const haps = this.pattern.queryArc(begin, end, { _cps: this.cps });
+
+          const tickdeadline = phase - time; // time left until the phase is a whole number
           this.lastTick = time + tickdeadline;
 
           haps.forEach((hap) => {
@@ -59,6 +70,8 @@ export class Cyclist {
     this.onToggle?.(v);
   }
   start() {
+    this.num_ticks_since_cps_change = 0;
+    this.num_cycles_since_last_cps_change = 0;
     if (!this.pattern) {
       throw new Error('Scheduler: no pattern set! call .setPattern first.');
     }
@@ -83,8 +96,12 @@ export class Cyclist {
       this.start();
     }
   }
-  setCps(cps = 1) {
+  setCps(cps = 0.5) {
+    if (this.cps === cps) {
+      return;
+    }
     this.cps = cps;
+    this.num_ticks_since_cps_change = 0;
   }
   log(begin, end, haps) {
     const onsets = haps.filter((h) => h.hasOnset());

packages/core/draw.mjs

@@ -111,8 +111,6 @@ export class Framer {
 // 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;
@@ -122,6 +120,8 @@ export class Drawer {
           console.warn('Drawer: no scheduler');
           return;
         }
+        const lookbehind = Math.abs(this.drawTime[0]);
+        const lookahead = this.drawTime[1];
         // calculate current frame time (think right side of screen for pianoroll)
         const phase = this.scheduler.now() + lookahead;
         // first frame just captures the phase
@@ -134,7 +134,7 @@ export class Drawer {
         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)
+          .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;
@@ -145,12 +145,16 @@ export class Drawer {
       },
     );
   }
-  invalidate(scheduler = this.scheduler) {
+  setDrawTime(drawTime) {
+    this.drawTime = drawTime;
+  }
+  invalidate(scheduler = this.scheduler, t) {
     if (!scheduler) {
       return;
     }
+    // TODO: scheduler.now() seems to move even when it's stopped, this hints at a bug...
+    t = t ?? scheduler.now();
     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

packages/core/euclid.mjs

@@ -145,8 +145,10 @@ export const { euclidrot, euclidRot } = register(['euclidrot', 'euclidRot'], fun
  * so there will be no gaps.
  * @name euclidLegato
  * @memberof Pattern
+ * @param {number} pulses the number of onsets / beats
+ * @param {number} steps the number of steps to fill
  * @example
- * n("g2").decay(.1).sustain(.3).euclidLegato(3,8)
+ * note("c3").euclidLegato(3,8)
  */
 
 const _euclidLegato = function (pulses, steps, rotation, pat) {
@@ -166,6 +168,18 @@ export const euclidLegato = register(['euclidLegato'], function (pulses, steps,
   return _euclidLegato(pulses, steps, 0, pat);
 });
 
+/**
+ * Similar to `euclid`, but each pulse is held until the next pulse,
+ * so there will be no gaps, and has an additional parameter for 'rotating'
+ * the resulting sequence
+ * @name euclidLegatoRot
+ * @memberof Pattern
+ * @param {number} pulses the number of onsets / beats
+ * @param {number} steps the number of steps to fill
+ * @param {number} rotation offset in steps
+ * @example
+ * note("c3").euclidLegatoRot(3,5,2)
+ */
 export const euclidLegatoRot = register(['euclidLegatoRot'], function (pulses, steps, rotation, pat) {
   return _euclidLegato(pulses, steps, rotation, pat);
 });

packages/core/evaluate.mjs

@@ -47,10 +47,5 @@ export const evaluate = async (code, transpiler) => {
   // if no transpiler is given, we expect a single instruction (!wrapExpression)
   const options = { wrapExpression: !!transpiler };
   let evaluated = await safeEval(code, options);
-  if (!isPattern(evaluated)) {
-    console.log('evaluated', evaluated);
-    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, meta };
 };

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

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

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

@@ -1,23 +0,0 @@
-{
-  "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/.gitignore

@@ -1 +0,0 @@
-!dist

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

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

packages/core/examples/vite-vanilla-repl/dist/assets/index.211bbc68.js

@@ -1 +0,0 @@
-import{b as s,h as i,m,a as n,c as p,p as t}from"./index.4cbc0a10.js";export{s as SyntaxError,i as h,m as mini,n as minify,p as parse,t as patternifyAST};

packages/core/examples/vite-vanilla-repl/dist/assets/index.ecddf978.js

@@ -1 +0,0 @@
-import{g as s,f as d,i as t,n as r,l as u,j as o,d as f,k as p,r as g,s as i,w as l,e as m}from"./index.4cbc0a10.js";export{s as getAudioContext,d as getCachedBuffer,t as getLoadedBuffer,r as getLoadedSamples,u as loadBuffer,o as loadGithubSamples,f as panic,p as resetLoadedSamples,g as reverseBuffer,i as samples,l as webaudioOutput,m as webaudioOutputTrigger};

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

@@ -1,36 +0,0 @@
-<!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>
-    <script type="module" crossorigin src="/tidalcycles/strudel/use-acorn/packages/core/examples/vite-vanilla-repl/dist/assets/index.4cbc0a10.js"></script>
-  </head>
-  <body style="margin: 0; background: #222">
-    <div style="display: grid; height: 100vh">
-      <textarea
-        id="text"
-        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
-        spellcheck="false"
-      ></textarea>
-    </div>
-    <button
-      id="start"
-      style="
-        position: absolute;
-        border-radius: 10px;
-        top: 20px;
-        right: 20px;
-        padding: 20px;
-        border: 2px solid white;
-        background: transparent;
-        color: white;
-        cursor: pointer;
-      "
-    >
-      evaluate
-    </button>
-    <div id="output"></div>
-    
-  </body>
-</html>

packages/core/gist.js

@@ -1,12 +0,0 @@
-/*
-gist.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/gist.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/>.
-*/
-
-// this is a shortcut to eval code from a gist
-// why? to be able to shorten strudel code + e.g. be able to change instruments after links have been generated
-export default (route, cache = true) =>
-  fetch(`https://gist.githubusercontent.com/${route}?cachebust=${cache ? '' : Date.now()}`)
-    .then((res) => res.text())
-    .then((code) => eval(code));

packages/core/index.mjs

@@ -27,16 +27,15 @@ 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';
 // below won't work with runtime.mjs (json import fails)
 /* import * as p from './package.json';
 export const version = p.version; */
-logger('🌀 @strudel.cycles/core loaded 🌀');
+logger('🌀 @strudel/core loaded 🌀');
 if (globalThis._strudelLoaded) {
   console.warn(
-    `@strudel.cycles/core was loaded more than once...
+    `@strudel/core was loaded more than once...
 This might happen when you have multiple versions of strudel installed. 
-Please check with "npm ls @strudel.cycles/core".`,
+Please check with "npm ls @strudel/core".`,
   );
 }
 globalThis._strudelLoaded = true;

packages/core/package.json

@@ -1,12 +1,11 @@
 {
-  "name": "@strudel.cycles/core",
-  "version": "0.9.0",
+  "name": "@strudel/core",
+  "version": "1.0.1",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",
   "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
+    "main": "dist/index.mjs"
   },
   "scripts": {
     "test": "vitest run",
@@ -31,11 +30,11 @@
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "fraction.js": "^4.2.0"
+    "fraction.js": "^4.3.7"
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
-    "vite": "^4.3.3",
-    "vitest": "^0.33.0"
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
   }
 }

packages/core/pattern.mjs

@@ -26,7 +26,7 @@ export class Pattern {
   /**
    * Create a pattern. As an end user, you will most likely not create a Pattern directly.
    *
-   * @param {function} query - The function that maps a {@link State} to an array of {@link Hap}.
+   * @param {function} query - The function that maps a `State` to an array of `Hap`.
    * @noAutocomplete
    */
   constructor(query) {
@@ -39,7 +39,7 @@ export class Pattern {
 
   /**
    * Returns a new pattern, with the function applied to the value of
-   * each hap. It has the alias {@link Pattern#fmap}.
+   * each hap. It has the alias `fmap`.
    * @synonyms fmap
    * @param {Function} func to to apply to the value
    * @returns Pattern
@@ -51,7 +51,7 @@ export class Pattern {
   }
 
   /**
-   * see {@link Pattern#withValue}
+   * see `withValue`
    * @noAutocomplete
    */
   fmap(func) {
@@ -115,7 +115,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#appBoth}, but the `whole` timespan is not the intersection,
+   * As with `appBoth`, but the `whole` timespan is not the intersection,
    * but the timespan from the function of patterns that this method is called
    * on. In practice, this means that the pattern structure, including onsets,
    * are preserved from the pattern of functions (often referred to as the left
@@ -148,7 +148,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#appLeft}, but `whole` timespans are instead taken from the
+   * As with `appLeft`, but `whole` timespans are instead taken from the
    * pattern of values, i.e. structure is preserved from the right hand/outer
    * pattern.
    * @param {Pattern} pat_val
@@ -340,9 +340,9 @@ export class Pattern {
    * silence
    * @noAutocomplete
    */
-  queryArc(begin, end) {
+  queryArc(begin, end, controls = {}) {
     try {
-      return this.query(new State(new TimeSpan(begin, end)));
+      return this.query(new State(new TimeSpan(begin, end), controls));
     } catch (err) {
       logger(`[query]: ${err.message}`, 'error');
       return [];
@@ -387,7 +387,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#withQuerySpan}, but the function is applied to both the
+   * As with `withQuerySpan`, but the function is applied to both the
    * begin and end time of the query timespan.
    * @param {Function} func the function to apply
    * @returns Pattern
@@ -398,7 +398,7 @@ export class Pattern {
   }
 
   /**
-   * Similar to {@link Pattern#withQuerySpan}, but the function is applied to the timespans
+   * Similar to `withQuerySpan`, but the function is applied to the timespans
    * of all haps returned by pattern queries (both `part` timespans, and where
    * present, `whole` timespans).
    * @param {Function} func
@@ -410,7 +410,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#withHapSpan}, but the function is applied to both the
+   * As with `withHapSpan`, but the function is applied to both the
    * begin and end time of the hap timespans.
    * @param {Function} func the function to apply
    * @returns Pattern
@@ -427,11 +427,11 @@ export class Pattern {
    * @noAutocomplete
    */
   withHaps(func) {
-    return new Pattern((state) => func(this.query(state)));
+    return new Pattern((state) => func(this.query(state), state));
   }
 
   /**
-   * As with {@link Pattern#withHaps}, but applies the function to every hap, rather than every list of haps.
+   * As with `withHaps`, but applies the function to every hap, rather than every list of haps.
    * @param {Function} func
    * @returns Pattern
    * @noAutocomplete
@@ -499,7 +499,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#filterHaps}, but the function is applied to values
+   * As with `filterHaps`, but the function is applied to values
    * inside haps.
    * @param {Function} value_test
    * @returns Pattern
@@ -621,7 +621,7 @@ export class Pattern {
   }
 
   /**
-   * More human-readable version of the {@link Pattern#firstCycleValues} accessor.
+   * More human-readable version of the `firstCycleValues` accessor.
    * @noAutocomplete
    */
   get showFirstCycle() {
@@ -691,13 +691,13 @@ export class Pattern {
   // Methods without corresponding toplevel functions
 
   /**
-   * Layers the result of the given function(s). Like {@link Pattern.superimpose}, but without the original pattern:
+   * Layers the result of the given function(s). Like `superimpose`, but without the original pattern:
    * @name layer
    * @memberof Pattern
    * @synonyms apply
    * @returns Pattern
    * @example
-   * "<0 2 4 6 ~ 4 ~ 2 0!3 ~!5>*4"
+   * "<0 2 4 6 ~ 4 ~ 2 0!3 ~!5>*8"
    *   .layer(x=>x.add("0,2"))
    *   .scale('C minor').note()
    */
@@ -711,7 +711,7 @@ export class Pattern {
    * @memberof Pattern
    * @returns Pattern
    * @example
-   * "<0 2 4 6 ~ 4 ~ 2 0!3 ~!5>*4"
+   * "<0 2 4 6 ~ 4 ~ 2 0!3 ~!5>*8"
    *   .superimpose(x=>x.add(2))
    *   .scale('C minor').note()
    */
@@ -727,8 +727,8 @@ export class Pattern {
    * @name stack
    * @memberof Pattern
    * @example
-   * s("hh*2").stack(
-   *   note("c2(3,8)")
+   * s("hh*4").stack(
+   *   note("c4(5,8)")
    * )
    */
   stack(...pats) {
@@ -745,8 +745,8 @@ export class Pattern {
    * @memberof Pattern
    * @synonyms sequence, fastcat
    * @example
-   * s("hh*2").seq(
-   *   note("c2(3,8)")
+   * s("hh*4").seq(
+   *   note("c4(5,8)")
    * )
    */
   seq(...pats) {
@@ -759,8 +759,8 @@ export class Pattern {
    * @memberof Pattern
    * @synonyms slowcat
    * @example
-   * s("hh*2").cat(
-   *   note("c2(3,8)")
+   * s("hh*4").cat(
+   *   note("c4(5,8)")
    * )
    */
   cat(...pats) {
@@ -858,7 +858,7 @@ Pattern.prototype.arpWith = function (func) {
  * Selects indices in in stacked notes.
  * @example
  * note("<[c,eb,g]!2 [c,f,ab] [d,f,ab]>")
- * .arp("0 [0,2] 1 [0,2]").slow(2)
+ * .arp("0 [0,2] 1 [0,2]")
  * */
 Pattern.prototype.arp = function (pat) {
   return this.arpWith((haps) => pat.fmap((i) => haps[i % haps.length]));
@@ -929,14 +929,14 @@ function _composeOp(a, b, func) {
      * @memberof Pattern
      * @example
      * // Here, the triad 0, 2, 4 is shifted by different amounts
-     * "0 2 4".add("<0 3 4 0>").scale('C major').note()
+     * n("0 2 4".add("<0 3 4 0>")).scale("C:major")
      * // Without add, the equivalent would be:
-     * // "<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>".scale('C major').note()
+     * // n("<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>").scale("C:major")
      * @example
      * // You can also use add with notes:
-     * "c3 e3 g3".add("<0 5 7 0>").note()
+     * note("c3 e3 g3".add("<0 5 7 0>"))
      * // Behind the scenes, the notes are converted to midi numbers:
-     * // "48 52 55".add("<0 5 7 0>").note()
+     * // note("48 52 55".add("<0 5 7 0>"))
      */
     add: [numeralArgs((a, b) => a + b)], // support string concatenation
     /**
@@ -945,7 +945,7 @@ function _composeOp(a, b, func) {
      * @name sub
      * @memberof Pattern
      * @example
-     * "0 2 4".sub("<0 1 2 3>").scale('C4 minor').note()
+     * n("0 2 4".sub("<0 1 2 3>")).scale("C4:minor")
      * // See add for more information.
      */
     sub: [numeralArgs((a, b) => a - b)],
@@ -955,7 +955,7 @@ function _composeOp(a, b, func) {
      * @name mul
      * @memberof Pattern
      * @example
-     * "1 1.5 [1.66, <2 2.33>]".mul(150).freq()
+     * "<1 1.5 [1.66, <2 2.33>]>*4".mul(150).freq()
      */
     mul: [numeralArgs((a, b) => a * b)],
     /**
@@ -1049,9 +1049,9 @@ function _composeOp(a, b, func) {
    * Applies the given structure to the pattern:
    *
    * @example
-   * note("c3,eb3,g3")
+   * note("c,eb,g")
    *   .struct("x ~ x ~ ~ x ~ x ~ ~ ~ x ~ x ~ ~")
-   *   .slow(4)
+   *   .slow(2)
    */
   Pattern.prototype.struct = function (...args) {
     return this.keepif.out(...args);
@@ -1063,7 +1063,7 @@ function _composeOp(a, b, func) {
    * Returns silence when mask is 0 or "~"
    *
    * @example
-   * note("c [eb,g] d [eb,g]").mask("<1 [0 1]>").slow(2)
+   * note("c [eb,g] d [eb,g]").mask("<1 [0 1]>")
    */
   Pattern.prototype.mask = function (...args) {
     return this.keepif.in(...args);
@@ -1075,7 +1075,7 @@ function _composeOp(a, b, func) {
    * Resets the pattern to the start of the cycle for each onset of the reset pattern.
    *
    * @example
-   * s("<bd lt> sd, hh*4").reset("<x@3 x(3,8)>")
+   * s("[<bd lt> sd]*2, hh*8").reset("<x@3 x(5,8)>")
    */
   Pattern.prototype.reset = function (...args) {
     return this.keepif.trig(...args);
@@ -1088,7 +1088,7 @@ function _composeOp(a, b, func) {
    * While reset will only reset the current cycle, restart will start from cycle 0.
    *
    * @example
-   * s("<bd lt> sd, hh*4").restart("<x@3 x(3,8)>")
+   * s("[<bd lt> sd]*2, hh*8").restart("<x@3 x(5,8)>")
    */
   Pattern.prototype.restart = function (...args) {
     return this.keepif.trigzero(...args);
@@ -1154,8 +1154,8 @@ export function isPattern(thing) {
   /* if (!thing instanceof Pattern) {
     console.warn(
       `Found Pattern that fails "instanceof Pattern" check.
-      This may happen if you are using multiple versions of @strudel.cycles/core. 
-      Please check by running "npm ls @strudel.cycles/core".`,
+      This may happen if you are using multiple versions of @strudel/core.
+      Please check by running "npm ls @strudel/core".`,
     );
     console.log(thing);
   } */
@@ -1178,7 +1178,8 @@ export function reify(thing) {
  * @return {Pattern}
  * @synonyms polyrhythm, pr
  * @example
- * stack(g3, b3, [e4, d4]).note() // "g3,b3,[e4,d4]".note()
+ * stack("g3", "b3", ["e4", "d4"]).note()
+ * // "g3,b3,[e4,d4]".note()
  */
 export function stack(...pats) {
   // Array test here is to avoid infinite recursions..
@@ -1189,11 +1190,11 @@ export function stack(...pats) {
 
 /** Concatenation: combines a list of patterns, switching between them successively, one per cycle:
  *
- * synonyms: {@link cat}
+ * synonyms: `cat`
  *
  * @return {Pattern}
  * @example
- * slowcat(e5, b4, [d5, c5])
+ * slowcat("e5", "b4", ["d5", "c5"])
  *
  */
 export function slowcat(...pats) {
@@ -1237,17 +1238,19 @@ export function slowcatPrime(...pats) {
  * @synonyms slowcat
  * @return {Pattern}
  * @example
- * cat(e5, b4, [d5, c5]).note() // "<e5 b4 [d5 c5]>".note()
+ * cat("e5", "b4", ["d5", "c5"]).note()
+ * // "<e5 b4 [d5 c5]>".note()
  *
  */
 export function cat(...pats) {
   return slowcat(...pats);
 }
 
-/** Like {@link Pattern.seq}, but each step has a length, relative to the whole.
+/** Like `seq`, but each step has a length, relative to the whole.
  * @return {Pattern}
  * @example
- * timeCat([3,e3],[1, g3]).note() // "e3@3 g3".note()
+ * timeCat([3,"e3"],[1, "g3"]).note()
+ * // "e3@3 g3".note()
  */
 export function timeCat(...timepats) {
   const total = timepats.map((a) => a[0]).reduce((a, b) => a.add(b), Fraction(0));
@@ -1267,7 +1270,10 @@ export function timeCat(...timepats) {
  *
  * @return {Pattern}
  * @example
- * arrange([4, "<c a f e>(3,8)"],[2, "<g a>(5,8)"]).note()
+ * arrange(
+ *   [4, "<c a f e>(3,8)"],
+ *   [2, "<g a>(5,8)"]
+ * ).note()
  */
 export function arrange(...sections) {
   const total = sections.reduce((sum, [cycles]) => sum + cycles, 0);
@@ -1279,7 +1285,7 @@ export function fastcat(...pats) {
   return slowcat(...pats)._fast(pats.length);
 }
 
-/** See {@link fastcat} */
+/** See `fastcat` */
 export function sequence(...pats) {
   return fastcat(...pats);
 }
@@ -1287,7 +1293,8 @@ export function sequence(...pats) {
 /** Like **cat**, but the items are crammed into one cycle.
  * @synonyms fastcat, sequence
  * @example
- * seq(e5, b4, [d5, c5]).note() // "e5 b4 [d5 c5]".note()
+ * seq("e5", "b4", ["d5", "c5"]).note()
+ * // "e5 b4 [d5 c5]".note()
  *
  */
 export function seq(...pats) {
@@ -1313,9 +1320,9 @@ function _sequenceCount(x) {
  * @param  {number} steps how many items are placed in one cycle
  * @param  {any[]} sequences one or more arrays of Patterns / values
  * @example
- * polymeterSteps(2, ["c", "d", "e", "f", "g", "f", "e", "d"])
- * .note().stack(s("bd")) // 1 cycle = 1 bd = 2 notes
- * // note("{c d e f g f e d}%2").stack(s("bd"))
+ * polymeterSteps(4, ["c", "d", "e"])
+ * .note().stack(s("bd"))
+ * // note("{c d e}%4").stack(s("bd"))
  */
 export function polymeterSteps(steps, ...args) {
   const seqs = args.map((a) => _sequenceCount(a));
@@ -1463,7 +1470,7 @@ export function register(name, func, patternify = true) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "0.5 1.5 2.5".round().scale('C major').note()
+ * n("0.5 1.5 2.5".round()).scale("C:major")
  */
 export const round = register('round', function (pat) {
   return pat.asNumber().fmap((v) => Math.round(v));
@@ -1477,7 +1484,7 @@ export const round = register('round', function (pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "42 42.1 42.5 43".floor().note()
+ * note("42 42.1 42.5 43".floor())
  */
 export const floor = register('floor', function (pat) {
   return pat.asNumber().fmap((v) => Math.floor(v));
@@ -1491,7 +1498,7 @@ export const floor = register('floor', function (pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "42 42.1 42.5 43".ceil().note()
+ * note("42 42.1 42.5 43".ceil())
  */
 export const ceil = register('ceil', function (pat) {
   return pat.asNumber().fmap((v) => Math.ceil(v));
@@ -1524,7 +1531,8 @@ export const fromBipolar = register('fromBipolar', function (pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * s("bd sd,hh*4").cutoff(sine.range(500,2000).slow(4))
+ * s("[bd sd]*2,hh*8")
+ * .cutoff(sine.range(500,4000))
  */
 export const range = register('range', function (min, max, pat) {
   return pat.mul(max - min).add(min);
@@ -1538,7 +1546,8 @@ export const range = register('range', function (min, max, pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * s("bd sd,hh*4").cutoff(sine.rangex(500,2000).slow(4))
+ * s("[bd sd]*2,hh*8")
+ * .cutoff(sine.rangex(500,4000))
  */
 export const rangex = register('rangex', function (min, max, pat) {
   return pat._range(Math.log(min), Math.log(max)).fmap(Math.exp);
@@ -1551,7 +1560,8 @@ export const rangex = register('rangex', function (min, max, pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * s("bd sd,hh*4").cutoff(sine2.range2(500,2000).slow(4))
+ * s("[bd sd]*2,hh*8")
+ * .cutoff(sine2.range2(500,4000))
  */
 export const range2 = register('range2', function (min, max, pat) {
   return pat.fromBipolar()._range(min, max);
@@ -1564,7 +1574,8 @@ export const range2 = register('range2', function (min, max, pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * ratio("1, 5:4, 3:2").mul(110).freq().s("piano").slow(2)
+ * ratio("1, 5:4, 3:2").mul(110)
+ * .freq().s("piano")
  */
 export const ratio = register('ratio', (pat) =>
   pat.fmap((v) => {
@@ -1636,7 +1647,7 @@ export const { fastGap, fastgap } = register(['fastGap', 'fastgap'], function (f
 });
 
 /**
- * Similar to compress, but doesn't leave gaps, and the 'focus' can be bigger than a cycle
+ * Similar to `compress`, but doesn't leave gaps, and the 'focus' can be bigger than a cycle
  * @example
  * s("bd hh sd hh").focus(1/4, 3/4)
  */
@@ -1667,7 +1678,7 @@ export const ply = register('ply', function (factor, pat) {
  * @param {number | Pattern} factor speed up factor
  * @returns Pattern
  * @example
- * s("<bd sd> hh").fast(2) // s("[<bd sd> hh]*2")
+ * s("bd hh sd hh").fast(2) // s("[bd hh sd hh]*2")
  */
 export const { fast, density } = register(['fast', 'density'], function (factor, pat) {
   if (factor === 0) {
@@ -1696,7 +1707,7 @@ export const hurry = register('hurry', function (r, pat) {
  * @param {number | Pattern} factor slow down factor
  * @returns Pattern
  * @example
- * s("<bd sd> hh").slow(2) // s("[<bd sd> hh]/2")
+ * s("bd hh sd hh").slow(2) // s("[bd hh sd hh]/2")
  */
 export const { slow, sparsity } = register(['slow', 'sparsity'], function (factor, pat) {
   if (factor === 0) {
@@ -1753,7 +1764,7 @@ export const lastOf = register('lastOf', function (n, func, pat) {
  */
 
 /**
- * An alias for {@link firstOf}
+ * An alias for `firstOf`
  * @name every
  * @memberof Pattern
  * @param {number} n how many cycles
@@ -1785,9 +1796,9 @@ export const apply = register('apply', function (func, pat) {
  * @example
  * s("<bd sd>,hh*2").cpm(90) // = 90 bpm
  */
-// TODO - global clock
+// this is redefined in repl.mjs, using the current cps as divisor
 export const cpm = register('cpm', function (cpm, pat) {
-  return pat._fast(cpm / 60);
+  return pat._fast(cpm / 60 / 1);
 });
 
 /**
@@ -1860,7 +1871,7 @@ export const linger = register('linger', function (t, pat) {
  * Samples the pattern at a rate of n events per cycle. Useful for turning a continuous pattern into a discrete one.
  * @param {number} segments number of segments per cycle
  * @example
- * note(saw.range(0,12).segment(24)).add(40)
+ * note(saw.range(40,52).segment(24))
  */
 export const segment = register('segment', function (rate, pat) {
   return pat.struct(pure(true)._fast(rate));
@@ -1886,7 +1897,7 @@ export const { invert, inv } = register(['invert', 'inv'], function (pat) {
  * @param {function} func
  * @returns Pattern
  * @example
- * "c3 eb3 g3".when("<0 1>/2", x=>x.sub(5)).note()
+ * "c3 eb3 g3".when("<0 1>/2", x=>x.sub("5")).note()
  */
 export const when = register('when', function (on, func, pat) {
   return on ? func(pat) : pat;
@@ -1923,7 +1934,7 @@ export const brak = register('brak', function (pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * note("c3 d3 e3 g3").rev()
+ * note("c d e g").rev()
  */
 export const rev = register('rev', function (pat) {
   const query = function (state) {
@@ -1975,9 +1986,9 @@ export const press = register('press', function (pat) {
  *   s("hh*3")
  * )
  */
-export const hush = register('hush', function (pat) {
+Pattern.prototype.hush = function () {
   return silence;
-});
+};
 
 /**
  * Applies `rev` to a pattern every other cycle, so that the pattern alternates between forwards and backwards.
@@ -1985,7 +1996,7 @@ export const hush = register('hush', function (pat) {
  * note("c d e g").palindrome()
  */
 export const palindrome = register('palindrome', function (pat) {
-  return pat.every(2, rev);
+  return pat.lastOf(2, rev);
 });
 
 /**
@@ -1993,7 +2004,7 @@ export const palindrome = register('palindrome', function (pat) {
  * @name juxBy
  * @synonyms juxby
  * @example
- * s("lt ht mt ht hh").juxBy("<0 .5 1>/2", rev)
+ * s("bd lt [~ ht] mt cp ~ bd hh").juxBy("<0 .5 1>/2", rev)
  */
 export const { juxBy, juxby } = register(['juxBy', 'juxby'], function (by, func, pat) {
   by /= 2;
@@ -2012,7 +2023,11 @@ export const { juxBy, juxby } = register(['juxBy', 'juxby'], function (by, func,
 /**
  * The jux function creates strange stereo effects, by applying a function to a pattern, but only in the right-hand channel.
  * @example
- * s("lt ht mt ht hh").jux(rev)
+ * s("bd lt [~ ht] mt cp ~ bd hh").jux(rev)
+ * @example
+ * s("bd lt [~ ht] mt cp ~ bd hh").jux(press)
+ * @example
+ * s("bd lt [~ ht] mt cp ~ bd hh").jux(iter(4))
  */
 export const jux = register('jux', function (func, pat) {
   return pat._juxBy(1, func, pat);
@@ -2028,7 +2043,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().clip(.2)
+ * .scale("C:minor").note()
  */
 export const { echoWith, echowith, stutWith, stutwith } = register(
   ['echoWith', 'echowith', 'stutWith', 'stutwith'],
@@ -2121,7 +2136,8 @@ const { repeatCycles } = register('repeatCycles', _repeatCycles);
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "0 1 2 3".chunk(4, x=>x.add(7)).scale('A minor').note()
+ * "0 1 2 3".chunk(4, x=>x.add(7))
+ * .scale("A:minor").note()
  */
 const _chunk = function (n, func, pat, back = false, fast = false) {
   const binary = Array(n - 1).fill(false);
@@ -2146,7 +2162,8 @@ const { chunk, slowchunk, slowChunk } = register(['chunk', 'slowchunk', 'slowChu
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "0 1 2 3".chunkBack(4, x=>x.add(7)).scale('A minor').note()
+ * "0 1 2 3".chunkBack(4, x=>x.add(7))
+ * .scale("A:minor").note()
  */
 export const { chunkBack, chunkback } = register(['chunkBack', 'chunkback'], function (n, func, pat) {
   return _chunk(n, func, pat, true);
@@ -2160,10 +2177,11 @@ export const { chunkBack, chunkback } = register(['chunkBack', 'chunkback'], fun
  * @memberof Pattern
  * @returns Pattern
  * @example
- * "<0 8> 1 2 3 4 5 6 7".fastChunk(4, x => x.color('red')).slow(4).scale("C2:major").note()
-  .s("folkharp")
+ * "<0 8> 1 2 3 4 5 6 7"
+ * .fastChunk(4, x => x.color('red')).slow(2)
+ * .scale("C2:major").note()
  */
-const { fastchunk, fastChunk } = register(['fastchunk', 'fastChunk'], function (n, func, pat) {
+export const { fastchunk, fastChunk } = register(['fastchunk', 'fastChunk'], function (n, func, pat) {
   return _chunk(n, func, pat, false, true);
 });
 
@@ -2178,6 +2196,8 @@ export const bypass = register('bypass', function (on, pat) {
  * @param {number} offset start point of loop in cycles
  * @param {number} cycles loop length in cycles
  * @example
+ * note("<c d e f>").ribbon(1, 2).fast(2)
+ * @example
  * // Looping a portion of randomness
  * note(irand(8).segment(4).scale('C3 minor')).ribbon(1337, 2)
  */
@@ -2189,6 +2209,14 @@ export const duration = register('duration', function (value, pat) {
   return pat.withHapSpan((span) => new TimeSpan(span.begin, span.begin.add(value)));
 });
 
+export const hsla = register('hsla', (h, s, l, a, pat) => {
+  return pat.color(`hsla(${h}turn,${s * 100}%,${l * 100}%,${a})`);
+});
+
+export const hsl = register('hsl', (h, s, l, pat) => {
+  return pat.color(`hsl(${h}turn,${s * 100}%,${l * 100}%)`);
+});
+
 /**
  * Sets the color of the hap in visualizations like pianoroll or highlighting.
  * @name color
@@ -2243,7 +2271,7 @@ export const legato = register('legato', function (value, pat) {
  * s("rhodes")
  *  .chop(4)
  *  .rev() // reverse order of chops
- *  .loopAt(4) // fit sample into 4 cycles
+ *  .loopAt(2) // fit sample into 2 cycles
  *
  */
 export const chop = register('chop', function (n, pat) {
@@ -2261,7 +2289,7 @@ export const chop = register('chop', function (n, pat) {
  * @memberof Pattern
  * @returns Pattern
  * @example
- * s("numbers:0 numbers:1 numbers:2").striate(6).slow(6)
+ * s("numbers:0 numbers:1 numbers:2").striate(6).slow(3)
  */
 export const striate = register('striate', function (n, pat) {
   const slices = Array.from({ length: n }, (x, i) => i);
@@ -2277,10 +2305,10 @@ export const striate = register('striate', function (n, pat) {
  * @returns Pattern
  * @example
  * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
- * s("rhodes").loopAt(4)
+ * s("rhodes").loopAt(2)
  */
 // TODO - global cps clock
-const _loopAt = function (factor, pat, cps = 1) {
+const _loopAt = function (factor, pat, cps = 0.5) {
   return pat
     .speed((1 / factor) * cps)
     .unit('c')
@@ -2294,11 +2322,11 @@ const _loopAt = function (factor, pat, cps = 1) {
  * @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)
+ * samples('github:tidalcycles/dirt-samples')
+ * s("breaks165").slice(8, "0 1 <2 2*2> 3 [4 0] 5 6 7".every(3, rev)).slow(0.75)
  * @example
- * await samples('github:tidalcycles/Dirt-Samples/master')
- * s("breaks125/2").fit().slice([0,.25,.5,.75], "0 1 1 <2 3>")
+ * samples('github:tidalcycles/dirt-samples')
+ * s("breaks125").fit().slice([0,.25,.5,.75], "0 1 1 <2 3>")
  */
 
 export const slice = register(
@@ -2323,53 +2351,54 @@ export const slice = register(
  * Works the same as slice, but changes the playback speed of each slice to match the duration of its step.
  * @name splice
  * @example
- * await samples('github:tidalcycles/Dirt-Samples/master')
+ * samples('github:tidalcycles/dirt-samples')
  * s("breaks165")
  * .splice(8,  "0 1 [2 3 0]@2 3 0@2 7")
- * .hurry(0.65)
  */
 
 export const splice = register(
   'splice',
   function (npat, ipat, opat) {
     const sliced = slice(npat, ipat, opat);
-    return sliced.withHap(function (hap) {
-      return hap.withValue((v) => ({
-        ...{
-          speed: (1 / v._slices / hap.whole.duration) * (v.speed || 1),
-          unit: 'c',
-        },
-        ...v,
-      }));
+    return new Pattern((state) => {
+      // TODO - default cps to 0.5
+      const cps = state.controls._cps || 1;
+      const haps = sliced.query(state);
+      return haps.map((hap) =>
+        hap.withValue((v) => ({
+          ...{
+            speed: (cps / v._slices / hap.whole.duration) * (v.speed || 1),
+            unit: 'c',
+          },
+          ...v,
+        })),
+      );
     });
   },
   false, // turns off auto-patternification
 );
 
-// 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);
+  return new Pattern((state) => _loopAt(factor, pat, state.controls._cps).query(state));
 });
 
-// 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.
+ * Similar to `loopAt`.
  * @name fit
  * @example
  * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
- * s("rhodes/4").fit()
+ * s("rhodes/2").fit()
  */
 export const fit = register('fit', (pat) =>
-  pat.withHap((hap) =>
-    hap.withValue((v) => ({
-      ...v,
-      speed: 1 / hap.whole.duration,
-      unit: 'c',
-    })),
+  pat.withHaps((haps, state) =>
+    haps.map((hap) =>
+      hap.withValue((v) => ({
+        ...v,
+        speed: (state.controls._cps || 1) / hap.whole.duration,
+        unit: 'c',
+      })),
+    ),
   ),
 );
 

packages/core/pianoroll.mjs

@@ -160,8 +160,13 @@ export function pianoroll({
     maxMidi = max;
     valueExtent = maxMidi - minMidi + 1;
   }
-  // foldValues = values.sort((a, b) => a - b);
-  foldValues = values.sort((a, b) => String(a).localeCompare(String(b)));
+  foldValues = values.sort((a, b) =>
+    typeof a === 'number' && typeof b === 'number'
+      ? a - b
+      : typeof a === 'number'
+        ? 1
+        : String(a).localeCompare(String(b)),
+  );
   barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
   ctx.fillStyle = background;
   ctx.globalAlpha = 1; // reset!
@@ -256,12 +261,21 @@ export function getDrawOptions(drawTime, options = {}) {
   return { fold: 1, ...options, cycles, playhead };
 }
 
+export const getPunchcardPainter =
+  (options = {}) =>
+  (ctx, time, haps, drawTime, paintOptions = {}) =>
+    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { ...paintOptions, ...options }) });
+
 Pattern.prototype.punchcard = function (options) {
-  return this.onPaint((ctx, time, haps, drawTime, paintOptions = {}) =>
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { ...paintOptions, ...options }) }),
-  );
+  return this.onPaint(getPunchcardPainter(options));
 };
 
+/**
+ * Displays a vertical pianoroll with event labels.
+ * Supports all the same options as pianoroll.
+ *
+ * @name wordfall
+ */
 Pattern.prototype.wordfall = function (options) {
   return this.punchcard({ vertical: 1, labels: 1, stroke: 0, fillActive: 1, active: 'white', ...options });
 };

packages/core/repl.mjs

@@ -3,7 +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';
+import { register, Pattern, isPattern, silence, stack } from './pattern.mjs';
 
 export function repl({
   interval,
@@ -16,78 +16,146 @@ export function repl({
   transpiler,
   onToggle,
   editPattern,
+  onUpdateState,
 }) {
+  const state = {
+    schedulerError: undefined,
+    evalError: undefined,
+    code: '// LOADING',
+    activeCode: '// LOADING',
+    pattern: undefined,
+    miniLocations: [],
+    widgets: [],
+    pending: false,
+    started: false,
+  };
+
+  const updateState = (update) => {
+    Object.assign(state, update);
+    state.isDirty = state.code !== state.activeCode;
+    state.error = state.evalError || state.schedulerError;
+    onUpdateState?.(state);
+  };
+
   const scheduler = new Cyclist({
     interval,
     onTrigger: getTrigger({ defaultOutput, getTime }),
     onError: onSchedulerError,
     getTime,
-    onToggle,
+    onToggle: (started) => {
+      updateState({ started });
+      onToggle?.(started);
+    },
   });
-  let playPatterns = [];
+  let pPatterns = {};
+  let allTransform;
+
+  const hush = function () {
+    pPatterns = {};
+    allTransform = undefined;
+    return silence;
+  };
+
   const setPattern = (pattern, autostart = true) => {
     pattern = editPattern?.(pattern) || pattern;
     scheduler.setPattern(pattern, autostart);
   };
   setTime(() => scheduler.now()); // TODO: refactor?
-  const evaluate = async (code, autostart = true) => {
+
+  const stop = () => scheduler.stop();
+  const start = () => scheduler.start();
+  const pause = () => scheduler.pause();
+  const toggle = () => scheduler.toggle();
+  const setCps = (cps) => scheduler.setCps(cps);
+  const setCpm = (cpm) => scheduler.setCps(cpm / 60);
+  const all = function (transform) {
+    allTransform = transform;
+    return silence;
+  };
+
+  // set pattern methods that use this repl via closure
+  const injectPatternMethods = () => {
+    Pattern.prototype.p = function (id) {
+      pPatterns[id] = this;
+      return this;
+    };
+    Pattern.prototype.q = function (id) {
+      return silence;
+    };
+    try {
+      for (let i = 1; i < 10; ++i) {
+        Object.defineProperty(Pattern.prototype, `d${i}`, {
+          get() {
+            return this.p(i);
+          },
+          configurable: true,
+        });
+        Object.defineProperty(Pattern.prototype, `p${i}`, {
+          get() {
+            return this.p(i);
+          },
+          configurable: true,
+        });
+        Pattern.prototype[`q${i}`] = silence;
+      }
+    } catch (err) {
+      console.warn('injectPatternMethods: error:', err);
+    }
+    const cpm = register('cpm', function (cpm, pat) {
+      return pat._fast(cpm / 60 / scheduler.cps);
+    });
+    evalScope({
+      all,
+      hush,
+      cpm,
+      setCps,
+      setcps: setCps,
+      setCpm,
+      setcpm: setCpm,
+    });
+  };
+
+  const evaluate = async (code, autostart = true, shouldHush = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
     try {
+      updateState({ code, pending: true });
+      injectPatternMethods();
       await beforeEval?.({ code });
-      playPatterns = [];
+      shouldHush && hush();
       let { pattern, meta } = await _evaluate(code, transpiler);
-      if (playPatterns.length) {
-        pattern = pattern.stack(...playPatterns);
+      if (Object.keys(pPatterns).length) {
+        pattern = stack(...Object.values(pPatterns));
+      }
+      if (allTransform) {
+        pattern = allTransform(pattern);
+      }
+      if (!isPattern(pattern)) {
+        const message = `got "${typeof evaluated}" instead of pattern`;
+        throw new Error(message + (typeof evaluated === 'function' ? ', did you forget to call a function?' : '.'));
       }
       logger(`[eval] code updated`);
       setPattern(pattern, autostart);
+      updateState({
+        miniLocations: meta?.miniLocations || [],
+        widgets: meta?.widgets || [],
+        activeCode: code,
+        pattern,
+        evalError: undefined,
+        schedulerError: undefined,
+        pending: false,
+      });
       afterEval?.({ code, pattern, meta });
       return pattern;
     } catch (err) {
-      // console.warn(`[repl] eval error: ${err.message}`);
       logger(`[eval] error: ${err.message}`, 'error');
+      updateState({ evalError: err, pending: false });
       onEvalError?.(err);
     }
   };
-  const stop = () => scheduler.stop();
-  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 play = register('play', (pat) => {
-    playPatterns.push(pat);
-    return pat;
-  });
-
-  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,
-    play,
-    setCps,
-    setcps: setCps,
-    setCpm,
-    setcpm: setCpm,
-  });
-
-  return { scheduler, evaluate, start, stop, pause, setCps, setPattern };
+  const setCode = (code) => updateState({ code });
+  return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle, state };
 }
 
 export const getTrigger =

packages/core/signal.mjs

@@ -7,7 +7,7 @@ This program is free software: you can redistribute it and/or modify it under th
 import { Hap } from './hap.mjs';
 import { Pattern, fastcat, reify, silence, stack, register } from './pattern.mjs';
 import Fraction from './fraction.mjs';
-import { id, _mod, clamp } from './util.mjs';
+import { id, _mod, clamp, objectMap } from './util.mjs';
 
 export function steady(value) {
   // A continuous value
@@ -27,9 +27,11 @@ export const isaw2 = isaw.toBipolar();
  *
  * @return {Pattern}
  * @example
- * "c3 [eb3,g3] g2 [g3,bb3]".note().clip(saw.slow(4))
+ * note("<c3 [eb3,g3] g2 [g3,bb3]>*8")
+ * .clip(saw.slow(2))
  * @example
- * saw.range(0,8).segment(8).scale('C major').slow(4).note()
+ * n(saw.range(0,8).segment(8))
+ * .scale('C major')
  *
  */
 export const saw = signal((t) => t % 1);
@@ -42,7 +44,8 @@ export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
  *
  * @return {Pattern}
  * @example
- * sine.segment(16).range(0,15).slow(2).scale('C minor').note()
+ * n(sine.segment(16).range(0,15))
+ * .scale("C:minor")
  *
  */
 export const sine = sine2.fromBipolar();
@@ -52,7 +55,8 @@ export const sine = sine2.fromBipolar();
  *
  * @return {Pattern}
  * @example
- * stack(sine,cosine).segment(16).range(0,15).slow(2).scale('C minor').note()
+ * n(stack(sine,cosine).segment(16).range(0,15))
+ * .scale("C:minor")
  *
  */
 export const cosine = sine._early(Fraction(1).div(4));
@@ -63,7 +67,7 @@ export const cosine2 = sine2._early(Fraction(1).div(4));
  *
  * @return {Pattern}
  * @example
- * square.segment(2).range(0,7).scale('C minor').note()
+ * n(square.segment(4).range(0,7)).scale("C:minor")
  *
  */
 export const square = signal((t) => Math.floor((t * 2) % 2));
@@ -74,7 +78,7 @@ export const square2 = square.toBipolar();
  *
  * @return {Pattern}
  * @example
- * tri.segment(8).range(0,7).scale('C minor').note()
+ * n(tri.segment(8).range(0,7)).scale("C:minor")
  *
  */
 export const tri = fastcat(isaw, saw);
@@ -101,6 +105,7 @@ const timeToRand = (x) => Math.abs(intSeedToRand(timeToIntSeed(x)));
 
 const timeToRandsPrime = (seed, n) => {
   const result = [];
+  // eslint-disable-next-line
   for (let i = 0; i < n; ++n) {
     result.push(intSeedToRand(seed));
     seed = xorwise(seed);
@@ -117,8 +122,8 @@ const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);
 /**
  * A discrete pattern of numbers from 0 to n-1
  * @example
- * run(4).scale('C4 major').note()
- * // "0 1 2 3".scale('C4 major').note()
+ * n(run(4)).scale("C4:pentatonic")
+ * // n("0 1 2 3").scale("C4:pentatonic")
  */
 export const run = (n) => saw.range(0, n).floor().segment(n);
 
@@ -128,7 +133,7 @@ export const run = (n) => saw.range(0, n).floor().segment(n);
  * @name rand
  * @example
  * // randomly change the cutoff
- * s("bd sd,hh*4").cutoff(rand.range(500,2000))
+ * s("bd*4,hh*8").cutoff(rand.range(500,8000))
  *
  */
 export const rand = signal(timeToRand);
@@ -150,36 +155,127 @@ export const _irand = (i) => rand.fmap((x) => Math.trunc(x * i));
  * @param {number} n max value (exclusive)
  * @example
  * // randomly select scale notes from 0 - 7 (= C to C)
- * irand(8).struct("x(3,8)").scale('C minor').note()
+ * n(irand(8)).struct("x x*2 x x*3").scale("C:minor")
  *
  */
 export const irand = (ipat) => reify(ipat).fmap(_irand).innerJoin();
 
-/**
- * pick from the list of values (or patterns of values) via the index using the given
- * pattern of integers
+const _pick = function (lookup, pat, modulo = true) {
+  const array = Array.isArray(lookup);
+  const len = Object.keys(lookup).length;
+
+  lookup = objectMap(lookup, reify);
+
+  if (len === 0) {
+    return silence;
+  }
+  return pat.fmap((i) => {
+    let key = i;
+    if (array) {
+      key = modulo ? Math.round(key) % len : clamp(Math.round(key), 0, lookup.length - 1);
+    }
+    return lookup[key];
+  });
+};
+
+/** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
+ * Similar to `inhabit`, but maintains the structure of the original patterns.
  * @param {Pattern} pat
  * @param {*} xs
  * @returns {Pattern}
  * @example
- * note(pick("<0 1 [2!2] 3>", ["g a", "e f", "f g f g" , "g a c d"]))
+ * note("<0 1 2!2 3>".pick(["g a", "e f", "f g f g" , "g c d"]))
+ * @example
+ * sound("<0 1 [2,0]>".pick(["bd sd", "cp cp", "hh hh"]))
+ * @example
+ * sound("<0!2 [0,1] 1>".pick(["bd(3,8)", "sd sd"]))
+ * @example
+ * s("<a!2 [a,b] b>".pick({a: "bd(3,8)", b: "sd sd"}))
  */
 
-export const pick = (pat, xs) => {
-  xs = xs.map(reify);
-  if (xs.length == 0) {
-    return silence;
+export const pick = function (lookup, pat) {
+  // backward compatibility - the args used to be flipped
+  if (Array.isArray(pat)) {
+    [pat, lookup] = [lookup, pat];
   }
-  return pat
-    .fmap((i) => {
-      const key = clamp(Math.round(i), 0, xs.length - 1);
-      return xs[key];
-    })
-    .innerJoin();
+  return __pick(lookup, pat);
 };
 
+const __pick = register('pick', function (lookup, pat) {
+  return _pick(lookup, pat, false).innerJoin();
+});
+
+/** * The same as `pick`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * For example, if you pick the fifth pattern of a list of three, you'll get the
+ * second one.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+
+export const pickmod = register('pickmod', function (lookup, pat) {
+  return _pick(lookup, pat, true).innerJoin();
+});
+
+/** * pickF lets you use a pattern of numbers to pick which function to apply to another pattern.
+ * @param {Pattern} pat
+ * @param {Pattern} lookup a pattern of indices
+ * @param {function[]} funcs the array of functions from which to pull
+ * @returns {Pattern}
+ * @example
+ * s("bd [rim hh]").pickF("<0 1 2>", [rev,jux(rev),fast(2)])
+ * @example
+ * note("<c2 d2>(3,8)").s("square")
+ *     .pickF("<0 2> 1", [jux(rev),fast(2),x=>x.lpf(800)])
+ */
+export const pickF = register('pickF', function (lookup, funcs, pat) {
+  return pat.apply(pick(lookup, funcs));
+});
+
+/** * The same as `pickF`, but if you pick a number greater than the size of the functions list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {Pattern} lookup a pattern of indices
+ * @param {function[]} funcs the array of functions from which to pull
+ * @returns {Pattern}
+ */
+export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
+  return pat.apply(pickmod(lookup, funcs));
+});
+
 /**
- * pick from the list of values (or patterns of values) via the index using the given
+/** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
+ * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ * @example
+ * "<a b [a,b]>".inhabit({a: s("bd(3,8)"),
+                          b: s("cp sd")
+                         })
+ * @example
+ * s("a@2 [a b] a".inhabit({a: "bd(3,8)", b: "sd sd"})).slow(4)
+ */
+export const inhabit = register('inhabit', function (lookup, pat) {
+  return _pick(lookup, pat, true).squeezeJoin();
+});
+
+/** * The same as `inhabit`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * For example, if you pick the fifth pattern of a list of three, you'll get the
+ * second one.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+
+export const inhabitmod = register('inhabit', function (lookup, pat) {
+  return _pick(lookup, pat, false).squeezeJoin();
+});
+
+/**
+ * Pick from the list of values (or patterns of values) via the index using the given
  * pattern of integers. The selected pattern will be compressed to fit the duration of the selecting event
  * @param {Pattern} pat
  * @param {*} xs
@@ -268,9 +364,9 @@ Pattern.prototype.choose2 = function (...xs) {
  * Picks one of the elements at random each cycle.
  * @returns {Pattern}
  * @example
- * chooseCycles("bd", "hh", "sd").s().fast(4)
+ * chooseCycles("bd", "hh", "sd").s().fast(8)
  * @example
- * "bd | hh | sd".s().fast(4)
+ * s("bd | hh | sd").fast(8)
  */
 export const chooseCycles = (...xs) => chooseInWith(rand.segment(1), xs);
 
@@ -313,7 +409,7 @@ export const perlinWith = (pat) => {
  * @name perlin
  * @example
  * // randomly change the cutoff
- * s("bd sd,hh*4").cutoff(perlin.range(500,2000))
+ * s("bd*4,hh*8").cutoff(perlin.range(500,8000))
  *
  */
 export const perlin = perlinWith(time.fmap((v) => Number(v)));
@@ -355,7 +451,7 @@ export const degradeBy = register('degradeBy', function (x, pat) {
 export const degrade = register('degrade', (pat) => pat._degradeBy(0.5));
 
 /**
- * Inverse of {@link Pattern#degradeBy}: Randomly removes events from the pattern by a given amount.
+ * Inverse of `degradeBy`: Randomly removes events from the pattern by a given amount.
  * 0 = 100% chance of removal
  * 1 = 0% chance of removal
  * Events that would be removed by degradeBy are let through by undegradeBy and vice versa (see second example).
@@ -379,7 +475,7 @@ export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5));
 /**
  *
  * Randomly applies the given function by the given probability.
- * Similar to {@link Pattern#someCyclesBy}
+ * Similar to `someCyclesBy`
  *
  * @name sometimesBy
  * @memberof Pattern
@@ -387,7 +483,7 @@ export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5));
  * @param {function} function - the transformation to apply
  * @returns Pattern
  * @example
- * s("hh(3,8)").sometimesBy(.4, x=>x.speed("0.5"))
+ * s("hh*8").sometimesBy(.4, x=>x.speed("0.5"))
  */
 
 export const sometimesBy = register('sometimesBy', function (patx, func, pat) {
@@ -405,7 +501,7 @@ export const sometimesBy = register('sometimesBy', function (patx, func, pat) {
  * @param {function} function - the transformation to apply
  * @returns Pattern
  * @example
- * s("hh*4").sometimes(x=>x.speed("0.5"))
+ * s("hh*8").sometimes(x=>x.speed("0.5"))
  */
 export const sometimes = register('sometimes', function (func, pat) {
   return pat._sometimesBy(0.5, func);
@@ -414,7 +510,7 @@ export const sometimes = register('sometimes', function (func, pat) {
 /**
  *
  * Randomly applies the given function by the given probability on a cycle by cycle basis.
- * Similar to {@link Pattern#sometimesBy}
+ * Similar to `sometimesBy`
  *
  * @name someCyclesBy
  * @memberof Pattern
@@ -422,7 +518,7 @@ export const sometimes = register('sometimes', function (func, pat) {
  * @param {function} function - the transformation to apply
  * @returns Pattern
  * @example
- * s("hh(3,8)").someCyclesBy(.3, x=>x.speed("0.5"))
+ * s("bd,hh*8").someCyclesBy(.3, x=>x.speed("0.5"))
  */
 
 export const someCyclesBy = register('someCyclesBy', function (patx, func, pat) {
@@ -444,7 +540,7 @@ export const someCyclesBy = register('someCyclesBy', function (patx, func, pat)
  * @memberof Pattern
  * @returns Pattern
  * @example
- * s("hh(3,8)").someCycles(x=>x.speed("0.5"))
+ * s("bd,hh*8").someCycles(x=>x.speed("0.5"))
  */
 export const someCycles = register('someCycles', function (func, pat) {
   return pat._someCyclesBy(0.5, func);

packages/core/test/pattern.test.mjs

@@ -20,6 +20,7 @@ import {
   slowcat,
   cat,
   sequence,
+  palindrome,
   polymeter,
   polymeterSteps,
   polyrhythm,
@@ -45,6 +46,7 @@ import {
   rev,
   time,
   run,
+  pick,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -182,13 +184,17 @@ describe('Pattern', () => {
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).add.trig(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .add.trig(20, 30)
+          .early(2),
         sequence(26, 27, 36, 37),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).add.trigzero(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .add.trigzero(20, 30)
+          .early(2),
         sequence(21, 22, 31, 32),
       );
     });
@@ -230,13 +236,17 @@ describe('Pattern', () => {
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keep.trig(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .keep.trig(20, 30)
+          .early(2),
         sequence(6, 7, 6, 7),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keep.trigzero(20, 30).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .keep.trigzero(20, 30)
+          .early(2),
         sequence(1, 2, 1, 2),
       );
     });
@@ -272,13 +282,17 @@ describe('Pattern', () => {
     });
     it('can Trig() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepif.trig(false, true).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .keepif.trig(false, true)
+          .early(2),
         sequence(silence, silence, 6, 7),
       );
     });
     it('can Trigzero() structure', () => {
       sameFirst(
-        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10).keepif.trigzero(false, true).early(2),
+        slowcat(sequence(1, 2, 3, 4), 5, sequence(6, 7, 8, 9), 10)
+          .keepif.trigzero(false, true)
+          .early(2),
         sequence(silence, silence, 1, 2),
       );
     });
@@ -571,6 +585,18 @@ describe('Pattern', () => {
       expect(sequence(1, 2, 3).firstCycle()).toStrictEqual(fastcat(1, 2, 3).firstCycle());
     });
   });
+  describe('palindrome()', () => {
+    it('Can create palindrome', () => {
+      expect(
+        fastcat('a', 'b', 'c')
+          .palindrome()
+          .fast(2)
+          .firstCycle()
+          .sort((a, b) => a.part.begin.sub(b.part.begin))
+          .map((a) => a.value),
+      ).toStrictEqual(['a', 'b', 'c', 'c', 'b', 'a']);
+    });
+  });
   describe('polyrhythm()', () => {
     it('Can layer up cycles', () => {
       expect(polyrhythm(['a', 'b'], ['c']).firstCycle()).toStrictEqual(
@@ -638,7 +664,11 @@ describe('Pattern', () => {
   });
   describe('struct()', () => {
     it('Can restructure a discrete pattern', () => {
-      expect(sequence('a', 'b').struct(sequence(true, true, true)).firstCycle()).toStrictEqual([
+      expect(
+        sequence('a', 'b')
+          .struct(sequence(true, true, true))
+          .firstCycle(),
+      ).toStrictEqual([
         hap(ts(0, third), ts(0, third), 'a'),
         hap(ts(third, twothirds), ts(third, 0.5), 'a'),
         hap(ts(third, twothirds), ts(0.5, twothirds), 'b'),
@@ -669,7 +699,11 @@ describe('Pattern', () => {
   });
   describe('mask()', () => {
     it('Can fragment a pattern', () => {
-      expect(sequence('a', 'b').mask(sequence(true, true, true)).firstCycle()).toStrictEqual([
+      expect(
+        sequence('a', 'b')
+          .mask(sequence(true, true, true))
+          .firstCycle(),
+      ).toStrictEqual([
         hap(ts(0, 0.5), ts(0, third), 'a'),
         hap(ts(0, 0.5), ts(third, 0.5), 'a'),
         hap(ts(0.5, 1), ts(0.5, twothirds), 'b'),
@@ -938,9 +972,11 @@ describe('Pattern', () => {
       expect(stack(pure('a').mask(1, 0), pure('a').mask(0, 1)).defragmentHaps().firstCycle().length).toStrictEqual(1);
     });
     it('Doesnt merge two overlapping haps', () => {
-      expect(stack(pure('a').mask(1, 1, 0), pure('a').mask(0, 1)).defragmentHaps().firstCycle().length).toStrictEqual(
-        2,
-      );
+      expect(
+        stack(pure('a').mask(1, 1, 0), pure('a').mask(0, 1))
+          .defragmentHaps()
+          .firstCycle().length,
+      ).toStrictEqual(2);
     });
     it('Doesnt merge two touching haps with different values', () => {
       expect(stack(pure('a').mask(1, 0), pure('b').mask(0, 1)).defragmentHaps().firstCycle().length).toStrictEqual(2);
@@ -1022,4 +1058,63 @@ describe('Pattern', () => {
       expect(slowcat(0, 1).repeatCycles(2).fast(6).firstCycleValues).toStrictEqual([0, 0, 1, 1, 0, 0]);
     });
   });
+  describe('inhabit', () => {
+    it('Can pattern named patterns', () => {
+      expect(
+        sameFirst(
+          sequence('a', 'b', stack('a', 'b')).inhabit({ a: sequence(1, 2), b: sequence(10, 20, 30) }),
+          sequence([1, 2], [10, 20, 30], stack([1, 2], [10, 20, 30])),
+        ),
+      );
+    });
+    it('Can pattern indexed patterns', () => {
+      expect(
+        sameFirst(
+          sequence('0', '1', stack('0', '1')).inhabit([sequence(1, 2), sequence(10, 20, 30)]),
+          sequence([1, 2], [10, 20, 30], stack([1, 2], [10, 20, 30])),
+        ),
+      );
+    });
+  });
+  describe('pick', () => {
+    it('Can pattern named patterns', () => {
+      expect(
+        sameFirst(
+          sequence('a', 'b', 'a', stack('a', 'b')).pick({ a: sequence(1, 2, 3, 4), b: sequence(10, 20, 30, 40) }),
+          sequence(1, 20, 3, stack(4, 40)),
+        ),
+      );
+    });
+    it('Can pattern indexed patterns', () => {
+      expect(
+        sameFirst(
+          sequence(0, 1, 0, stack(0, 1)).pick([sequence(1, 2, 3, 4), sequence(10, 20, 30, 40)]),
+          sequence(1, 20, 3, stack(4, 40)),
+        ),
+      );
+    });
+    it('Clamps indexes', () => {
+      expect(
+        sameFirst(sequence(0, 1, 2, 3).pick([sequence(1, 2, 3, 4), sequence(10, 20, 30, 40)]), sequence(1, 20, 30, 40)),
+      );
+    });
+    it('Is backwards compatible', () => {
+      expect(
+        sameFirst(
+          pick([sequence('a', 'b'), sequence('c', 'd')], sequence(0, 1)),
+          pick(sequence(0, 1), [sequence('a', 'b'), sequence('c', 'd')]),
+        ),
+      );
+    });
+  });
+  describe('pickmod', () => {
+    it('Wraps indexes', () => {
+      expect(
+        sameFirst(
+          sequence(0, 1, 2, 3).pickmod([sequence(1, 2, 3, 4), sequence(10, 20, 30, 40)]),
+          sequence(1, 20, 3, 40),
+        ),
+      );
+    });
+  });
 });

packages/core/util.mjs

@@ -4,6 +4,8 @@ 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 { logger } from './logger.mjs';
+
 // 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][#bsf]*[0-9]?$/.test(name);
@@ -84,6 +86,18 @@ export const midi2note = (n) => {
 // modulo that works with negative numbers e.g. _mod(-1, 3) = 2. Works on numbers (rather than patterns of numbers, as @mod@ from pattern.mjs does)
 export const _mod = (n, m) => ((n % m) + m) % m;
 
+export function nanFallback(value, fallback = 0) {
+  if (isNaN(Number(value))) {
+    logger(`"${value}" is not a number, falling back to ${fallback}`, 'warning');
+    return fallback;
+  }
+  return value;
+}
+// round to nearest int, negative numbers will output a subtracted index
+export const getSoundIndex = (n, numSounds) => {
+  return _mod(Math.round(nanFallback(n ?? 0, 0)), numSounds);
+};
+
 export const getPlayableNoteValue = (hap) => {
   let { value, context } = hap;
   let note = value;
@@ -262,15 +276,50 @@ export const sol2note = (n, notation = 'letters') => {
     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*/
+        ? 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;
 };
+
+// code hashing helpers
+
+export function unicodeToBase64(text) {
+  const utf8Bytes = new TextEncoder().encode(text);
+  const base64String = btoa(String.fromCharCode(...utf8Bytes));
+  return base64String;
+}
+
+export function base64ToUnicode(base64String) {
+  const utf8Bytes = new Uint8Array(
+    atob(base64String)
+      .split('')
+      .map((char) => char.charCodeAt(0)),
+  );
+  const decodedText = new TextDecoder().decode(utf8Bytes);
+  return decodedText;
+}
+
+export function code2hash(code) {
+  return encodeURIComponent(unicodeToBase64(code));
+  //return '#' + encodeURIComponent(btoa(code));
+}
+
+export function hash2code(hash) {
+  return base64ToUnicode(decodeURIComponent(hash));
+  //return atob(decodeURIComponent(codeParam || ''));
+}
+
+export function objectMap(obj, fn) {
+  if (Array.isArray(obj)) {
+    return obj.map(fn);
+  }
+  return Object.fromEntries(Object.entries(obj).map(([k, v], i) => [k, fn(v, k, i)]));
+}

packages/core/vite.config.js

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

packages/csound/README.md

@@ -0,0 +1 @@
+# @strudel/csound

packages/csound/index.mjs

@@ -1,5 +1,5 @@
-import { getFrequency, logger, register } from '@strudel.cycles/core';
-import { getAudioContext } from '@strudel.cycles/webaudio';
+import { getFrequency, logger, register } from '@strudel/core';
+import { getAudioContext } from '@strudel/webaudio';
 import csd from './project.csd?raw';
 // import livecodeOrc from './livecode.orc?raw';
 import presetsOrc from './presets.orc?raw';

packages/csound/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@strudel.cycles/csound",
-  "version": "0.9.0",
+  "name": "@strudel/csound",
+  "version": "1.0.1",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
+  "type": "module",
   "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
+    "main": "dist/index.mjs"
   },
   "scripts": {
     "build": "vite build",
@@ -33,10 +33,10 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@csound/browser": "6.18.7",
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*"
+    "@strudel/core": "workspace:*",
+    "@strudel/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^5.0.10"
   }
 }

packages/csound/vite.config.js

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

packages/desktopbridge/midibridge.mjs

@@ -1,16 +1,16 @@
 import { Invoke } from './utils.mjs';
-import { Pattern, noteToMidi } from '@strudel.cycles/core';
+import { Pattern, noteToMidi } from '@strudel/core';
 
 const ON_MESSAGE = 0x90;
 const OFF_MESSAGE = 0x80;
 const CC_MESSAGE = 0xb0;
 
 Pattern.prototype.midi = function (output) {
-  return this.onTrigger((time, hap, currentTime) => {
+  return this.onTrigger((time, hap, currentTime, cps) => {
     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 duration = Math.floor((hap.duration.valueOf() / cps) * 1000 - 10);
     const roundedOffset = Math.round(offset);
     const midichan = (hap.value.midichan ?? 1) - 1;
     const requestedport = output ?? 'IAC';

packages/desktopbridge/oscbridge.mjs

@@ -1,4 +1,4 @@
-import { parseNumeral, Pattern } from '@strudel.cycles/core';
+import { parseNumeral, Pattern } from '@strudel/core';
 import { Invoke } from './utils.mjs';
 
 Pattern.prototype.osc = function () {

packages/desktopbridge/package.json

@@ -22,8 +22,8 @@
       "url": "https://github.com/tidalcycles/strudel/issues"
     },
     "dependencies": {
-        "@strudel.cycles/core": "workspace:*",
-        "@tauri-apps/api": "^1.4.0"
+        "@strudel/core": "workspace:*",
+        "@tauri-apps/api": "^1.5.3"
       },
     "homepage": "https://github.com/tidalcycles/strudel#readme"
   }

packages/embed/README.md

@@ -1,13 +1,13 @@
-# @strudel.cycles/embed
+# @strudel/embed
 
 This package contains a embeddable web component for the Strudel REPL.
 
 ## Usage
 
-Either install with `npm i @strudel.cycles/embed` or just use a cdn to import the script:
+Either install with `npm i @strudel/embed` or just use a cdn to import the script:
 
 ```html
-<script src="https://unpkg.com/@strudel.cycles/embed@latest"></script>
+<script src="https://unpkg.com/@strudel/embed@latest"></script>
 <strudel-repl>
   <!--
 note(`[[e5 [b4 c5] d5 [c5 b4]]

packages/embed/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@strudel.cycles/embed",
-  "version": "0.2.0",
+  "name": "@strudel/embed",
+  "version": "1.0.0",
   "description": "Embeddable Web Component to load a Strudel REPL into an iframe",
   "main": "embed.js",
   "type": "module",

packages/hydra/README.md

@@ -12,6 +12,12 @@ await initHydra();
 
 Then you can use hydra below!
 
+### options
+
+You can also pass options to the `initHydra` function. These can be used to set [hydra options](https://github.com/hydra-synth/hydra-synth#api) + these strudel specific options:
+
+- `feedStrudel`: sends the strudel canvas to `s0`. The strudel canvas is used to draw `pianoroll`, `spiral`, `scope` etc..
+
 ## Usage via npm
 
 ```sh
@@ -21,7 +27,7 @@ npm i @strudel/hydra
 Then add the import to your evalScope:
 
 ```js
-import { evalScope } from '@strudel.cycles/core';
+import { evalScope } from '@strudel/core';
 
 evalScope(
   import('@strudel/hydra')