add stepearly/steplate

* add itri / itri2 .. but should tri and itri be swapped??

* swap tri/tri2 with itri/itri2. Add some basic docs for bipolar signals

.eslintignore

@@ -1,24 +0,0 @@
-krill-parser.js
-krill.pegjs
-.eslintrc.json
-server.js
-tidal-sniffer.js
-*.jsx
-tunejs.js
-out/**
-postcss.config.js
-postcss.config.cjs
-tailwind.config.js
-tailwind.config.cjs
-vite.config.js
-/**/dist/**/*
-!**/*.mjs
-**/*.tsx
-**/*.ts
-**/*.json
-**/dev-dist
-**/dist
-/src-tauri/target/**/*
-reverbGen.mjs
-hydra.mjs
-jsdoc-synonyms.js

.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "env": {
+    "node": true,
     "browser": true,
     "es2021": true
   },
@@ -13,5 +14,6 @@
   "rules": {
     "no-unused-vars": ["warn", { "destructuredArrayIgnorePattern": ".", "ignoreRestSiblings": false }],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
-  }
+  },
+  "files": ["**/*.mjs", "**/*.js"]
 }

.github/workflows/deploy.yml

@@ -22,10 +22,10 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.11.0
-      - uses: actions/setup-node@v3
+          version: 9.12.2
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"
@@ -39,11 +39,11 @@ jobs:
         uses: actions/configure-pages@v2
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
           path: "./website/dist"
 
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -11,10 +11,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.11.0
-      - uses: actions/setup-node@v3
+          version: 9.12.2
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.prettierignore

@@ -11,3 +11,5 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 **/dev-dist
 website/.astro
+!tidal-drum-machines.json
+!tidal-drum-machines-alias.json

CONTRIBUTING.md

@@ -130,20 +130,26 @@ npx lerna version --no-private
 # publish all packages inside /packages using pnpm! don't use lerna to publish!!
 pnpm --filter "./packages/**" publish --dry-run
 
-# the last command was only a dry-run, make sure everything looks ok, if yes, run the same command without flag
+# the last command was only a dry-run. if everything looks ok, run this:
+
+pnpm --filter "./packages/**" publish --access public
 ```
 
 To manually publish a single package, increase the version in the `package.json`, then run `pnpm publish`.
 Important: Always publish with `pnpm`, as `npm` does not support overriding main files in `publishConfig`, which is done in all the packages.
 
-### New Packages
-
-To add a new package, you have to publish it manually the first time, using:
 
+## useful commands
 ```sh
-cd packages/<package-name> && pnpm publish --access public
-```
+#regenerate the test snapshots (ex: when updating or creating new pattern functions)
+pnpm snapshot 
 
+#start the OSC server
+pnpm run osc
+
+#build the standalone version
+pnpm tauri build
+```
 ## Have Fun
 
 Remember to have fun, and that this project is driven by the passion of volunteers!

README.md

@@ -1,6 +1,6 @@
 # strudel
 
-[![Strudel test status](https://github.com/tidalcycles/strudel/actions/workflows/test.yml/badge.svg)](https://github.com/tidalcycles/strudel/actions)
+[![Strudel test status](https://github.com/tidalcycles/strudel/actions/workflows/test.yml/badge.svg)](https://github.com/tidalcycles/strudel/actions) [![DOI](https://zenodo.org/badge/450927247.svg)](https://doi.org/10.5281/zenodo.6659278)
 
 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.
 
@@ -14,10 +14,16 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w
 
 After cloning the project, you can run the REPL locally:
 
-```bash
-pnpm i
-pnpm dev
-```
+1. Install [Node.js](https://nodejs.org/)
+2. Install [pnpm](https://pnpm.io/installation)
+3. Install dependencies by running the following command:
+   ```bash
+   pnpm i
+   ```
+4. Run the development server:
+   ```bash
+   pnpm dev
+   ```
 
 ## Using Strudel In Your Project
 

bench/tunes.bench.mjs

@@ -0,0 +1,22 @@
+import { queryCode, testCycles } from '../test/runtime.mjs';
+import * as tunes from '../website/src/repl/tunes.mjs';
+import { describe, bench } from 'vitest';
+import { calculateSteps } from '../packages/core/index.mjs';
+
+const tuneKeys = Object.keys(tunes);
+
+describe('renders tunes', () => {
+  tuneKeys.forEach((key) => {
+    describe(key, () => {
+      calculateSteps(true);
+      bench(`+steps`, async () => {
+        await queryCode(tunes[key], testCycles[key] || 1);
+      });
+      calculateSteps(false);
+      bench(`-steps`, async () => {
+        await queryCode(tunes[key], testCycles[key] || 1);
+      });
+      calculateSteps(true);
+    });
+  });
+});

eslint.config.mjs

@@ -0,0 +1,86 @@
+import _import from 'eslint-plugin-import';
+import { fixupPluginRules } from '@eslint/compat';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      '**/krill-parser.js',
+      '**/krill.pegjs',
+      '**/.eslintrc.json',
+      '**/server.js',
+      '**/tidal-sniffer.js',
+      '**/*.jsx',
+      '**/tunejs.js',
+      'out/**/*',
+      '**/postcss.config.js',
+      '**/postcss.config.cjs',
+      '**/tailwind.config.js',
+      '**/tailwind.config.cjs',
+      '**/vite.config.js',
+      '**/dist/**/*',
+      '!**/*.mjs',
+      '**/*.tsx',
+      '**/*.ts',
+      '**/*.json',
+      '**/dev-dist',
+      '**/dist',
+      'src-tauri/target/**/*',
+      '**/reverbGen.mjs',
+      '**/hydra.mjs',
+      '**/jsdoc-synonyms.js',
+      'packages/hs2js/src/hs2js.mjs',
+      '**/samples',
+    ],
+  },
+  ...compat.extends('eslint:recommended').map((config) => ({
+    ...config,
+    files: ['**/*.mjs', '**/*.js'],
+  })),
+  {
+    files: ['**/*.mjs', '**/*.js'],
+
+    plugins: {
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+
+    rules: {
+      'no-unused-vars': [
+        'warn',
+        {
+          destructuredArrayIgnorePattern: '.',
+          ignoreRestSiblings: false,
+        },
+      ],
+
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: true,
+        },
+      ],
+    },
+  },
+];

examples/buildless/headless-simple.html

@@ -1,9 +1,31 @@
 <!doctype html>
-<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
-<button id="play">play</button>
-<button id="stop">stop</button>
-<script>
-  strudel.initStrudel();
-  document.getElementById('play').addEventListener('click', () => evaluate('note("c a f e").jux(rev)'));
-  document.getElementById('play').addEventListener('stop', () => hush());
-</script>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <script src="../../packages/web/dist/index.js"></script> -->
+    <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
+  </head>
+  <body style="background: #222">
+    <button id="play">play</button>
+    <button id="stop">stop</button>
+    <script>
+      strudel.initStrudel();
+      document.getElementById('play').addEventListener('click', () =>
+        evaluate(`
+//@title washover @by Switch Angel 
+//@social https://www.instagram.com/_switch_angel/
+
+n("{0 1 3 5 2 }%16")
+  .add(n(tri.range(0, 6).slow(3)))
+  .scale("C4:pentatonic")
+  .sound("sawtooth").att(saw.range(0, 0.05).fast(6))
+  .release(3).pan(rand).decay(rand.range(0.1, 0.3))
+  .lpf(tri.range(200, 8000).slow(5)).lpq(0)
+  .gain(.4).vib(1).vibmod(.1)
+  .scope({pos:.5})
+`),
+      );
+      document.getElementById('stop').addEventListener('click', () => strudel.hush());
+    </script>
+  </body>
+</html>

examples/buildless/headless-with-samples.html

@@ -1,16 +1,24 @@
 <!doctype html>
-<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
-<button id="a">A</button>
-<button id="b">B</button>
-<button id="c">C</button>
-<button id="stop">stop</button>
-<script>
-  initStrudel({
-    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)`));
-  click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play());
-  click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play());
-  click('stop', () => hush());
-</script>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <script src="../../packages/web/dist/index.js"></script> -->
+    <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
+  </head>
+  <body style="background: #222">
+    <button id="a">A</button>
+    <button id="b">B</button>
+    <button id="c">C</button>
+    <button id="stop">stop</button>
+    <script>
+      initStrudel({
+        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)`));
+      click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play());
+      click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play());
+      click('stop', () => hush());
+    </script>
+  </body>
+</html>

examples/buildless/hs2js.html

@@ -0,0 +1,9 @@
+<script src="https://unpkg.com/hs2js@0.0.4"></script>
+<button id="hello">hello</button>
+<script>
+  hs2js.setBase('https://unpkg.com/hs2js@0.0.4/dist/');
+  hs2js.loadParser();
+  document.getElementById('hello').addEventListener('click', () => {
+    hs2js.evaluate('alert "hello from haskell!"');
+  });
+</script>

examples/buildless/tidal.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tidal.html</title>
+  </head>
+  <body style="margin: 0; padding: 0">
+    <textarea id="code" style="width: 100%; height: 200px"></textarea>
+    <pre id="result"></pre>
+    <script src="https://unpkg.com/hs2js@0.0.8"></script>
+    <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
+    <script>
+      const { initStrudel } = strudel;
+      const { run, parse, setBase, loadParser } = hs2js;
+      setBase('https://unpkg.com/hs2js@0.0.4/dist/');
+      const ready = loadParser();
+      initStrudel({
+        prebake: () => samples('github:tidalcycles/dirt-samples'),
+      });
+
+      const textarea = document.getElementById('code');
+      if (window.location.hash) {
+        textarea.value = atob(window.location.hash.slice(1));
+      } else {
+        textarea.value = 'd1 $ s "jvbass(3,8)"';
+      }
+      textarea.addEventListener('input', (e) => {
+        window.location.hash = btoa(e.target.value);
+        update();
+      });
+      update();
+
+      function getInfixOperators() {
+        let operators = {
+          '>': 'set',
+          '#': 'set',
+          '+': 'add',
+          '-': 'sub',
+          '*': 'mul',
+          '/': 'div',
+        };
+        let alignments = {
+          in: (s) => '|' + s,
+          out: (s) => s + '|',
+          mix: (s) => '|' + s + '|',
+        };
+        let ops = {};
+        Object.entries(operators).forEach(([o, name]) => {
+          // operator without alignment
+          ops[o] = (l, r) => reify(l)[name](reify(r));
+          Object.entries(alignments).forEach(([a, getSymbol]) => {
+            // get symbol with alignment
+            let symbol = getSymbol(o);
+            ops[symbol] = (l, r) => reify(l)[name][a](reify(r));
+          });
+        });
+        ops['~>'] = (l, r) => reify(l).late(reify(r));
+        ops['<~'] = (l, r) => reify(l).early(reify(r));
+        ops['<$>'] = (l, r) => reify(r).fmap(l).outerJoin(); // is this right?
+        return ops;
+      }
+      const ops = getInfixOperators();
+
+      async function update() {
+        let result, tree;
+        await ready;
+        try {
+          tree = parse(textarea.value);
+        } catch (err) {
+          console.warn('parse error');
+          console.error(err);
+        }
+        console.log('parsed tree');
+        console.log(tree.rootNode.toString());
+        try {
+          let patterns = {};
+          window.p = (name, pattern) => {
+            patterns[name] = pattern;
+          };
+          window.d1 = (pat) => window.p(1, pat);
+          window.d2 = (pat) => window.p(2, pat);
+          window.d3 = (pat) => window.p(3, pat);
+          window.rot = late;
+          result = run(tree.rootNode, window, ops);
+          if (Object.values(patterns).length) {
+            stack(...Object.values(patterns)).play();
+          }
+        } catch (err) {
+          console.warn('eval error');
+          console.error(err);
+          result = 'ERROR: ' + err.message;
+        }
+        document.getElementById('result').innerHTML = 'Result: ' + result;
+      }
+    </script>
+  </body>
+</html>

examples/codemirror-repl/main.js

@@ -1,6 +1,7 @@
 import { StrudelMirror } from '@strudel/codemirror';
 import { funk42 } from './tunes';
-import { drawPianoroll, evalScope } from '@strudel/core';
+import { evalScope } from '@strudel/core';
+import { drawPianoroll } from '@strudel/draw';
 import './style.css';
 import { initAudioOnFirstClick } from '@strudel/webaudio';
 import { transpiler } from '@strudel/transpiler';
@@ -26,6 +27,7 @@ const editor = new StrudelMirror({
     initAudioOnFirstClick(); // needed to make the browser happy (don't await this here..)
     const loadModules = evalScope(
       import('@strudel/core'),
+      import('@strudel/draw'),
       import('@strudel/mini'),
       import('@strudel/tonal'),
       import('@strudel/webaudio'),

examples/codemirror-repl/package.json

@@ -9,11 +9,12 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   },
   "dependencies": {
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "@strudel/mini": "workspace:*",
     "@strudel/soundfonts": "workspace:*",
     "@strudel/tonal": "workspace:*",

examples/headless-repl/package.json

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

examples/minimal-repl/package.json

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

examples/superdough/package.json

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

examples/tidal-repl/.gitignore

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

examples/tidal-repl/README.md

@@ -0,0 +1,10 @@
+# @strudel/tidal
+
+This is an experiment in implementing tree-sitter for parsing haskell.
+
+```sh
+pnpm i
+cd haskell
+pnpm copy-wasm
+pnpm dev
+```

examples/tidal-repl/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tree sitter test</title>
+    <style>
+      body {
+        background-color: #121213;
+        color: white;
+      }
+      textarea {
+        padding: 10px;
+        color: white;
+        background-color: transparent;
+        outline: none;
+      }
+      a {
+        color: white;
+      }
+    </style>
+  </head>
+  <body style="margin: 0; padding: 0">
+    <textarea id="code" style="width: 100%; height: 200px"></textarea>
+    <pre id="result"></pre>
+    <script
+      type="module"
+      src="/main.js
+    "
+    ></script>
+  </body>
+</html>

examples/tidal-repl/main.js

@@ -0,0 +1,83 @@
+import { run, parse, loadParser } from 'hs2js';
+import { initStrudel, reify, late, samples, stack } from '@strudel/web';
+
+initStrudel({
+  prebake: () => samples('github:tidalcycles/dirt-samples'),
+});
+
+const ready = loadParser();
+
+const textarea = document.getElementById('code');
+if (window.location.hash) {
+  textarea.value = atob(window.location.hash.slice(1));
+} else {
+  textarea.value = 'd1 $ s "jvbass(3,8)"';
+}
+textarea.addEventListener('input', (e) => {
+  window.location.hash = btoa(e.target.value);
+  update();
+});
+update();
+
+function getInfixOperators() {
+  let operators = {
+    '>': 'set',
+    '#': 'set',
+    '+': 'add',
+    '-': 'sub',
+    '*': 'mul',
+    '/': 'div',
+  };
+  let alignments = {
+    in: (s) => '|' + s,
+    out: (s) => s + '|',
+    mix: (s) => '|' + s + '|',
+  };
+  let ops = {};
+  Object.entries(operators).forEach(([o, name]) => {
+    // operator without alignment
+    ops[o] = (l, r) => reify(l)[name](reify(r));
+    Object.entries(alignments).forEach(([a, getSymbol]) => {
+      // get symbol with alignment
+      let symbol = getSymbol(o);
+      ops[symbol] = (l, r) => reify(l)[name][a](reify(r));
+    });
+  });
+  ops['~>'] = (l, r) => reify(l).late(reify(r));
+  ops['<~'] = (l, r) => reify(l).early(reify(r));
+  ops['<$>'] = (l, r) => reify(r).fmap(l).outerJoin(); // is this right?
+  return ops;
+}
+const ops = getInfixOperators();
+
+async function update() {
+  let result, tree;
+  await ready;
+  try {
+    tree = parse(textarea.value);
+  } catch (err) {
+    console.warn('parse error');
+    console.error(err);
+  }
+  console.log('parsed tree');
+  console.log(tree.rootNode.toString());
+  try {
+    let patterns = {};
+    window.p = (name, pattern) => {
+      patterns[name] = pattern;
+    };
+    window.d1 = (pat) => window.p(1, pat);
+    window.d2 = (pat) => window.p(2, pat);
+    window.d3 = (pat) => window.p(3, pat);
+    window.rot = late;
+    result = run(tree.rootNode, window, ops);
+    if (Object.values(patterns).length) {
+      stack(...Object.values(patterns)).play();
+    }
+  } catch (err) {
+    console.warn('eval error');
+    console.error(err);
+    result = 'ERROR: ' + err.message;
+  }
+  document.getElementById('result').innerHTML = 'Result: ' + result;
+}

examples/tidal-repl/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "tidal-repl",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm copy-wasm && vite build",
+    "preview": "vite preview",
+    "copy-wasm": "cp node_modules/hs2js/dist/tree-sitter.wasm public && cp node_modules/hs2js/dist/tree-sitter-haskell.wasm public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "titdalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel/web": "workspace:*",
+    "hs2js": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^6.0.11"
+  }
+}

examples/tidal-repl/public/README.md

@@ -0,0 +1,3 @@
+# public
+
+this file is just here to make sure the public folder exists

package.json

@@ -11,6 +11,7 @@
     "test": "npm run pretest && vitest run --version",
     "test-ui": "npm run pretest && vitest --ui",
     "test-coverage": "npm run pretest && vitest --coverage",
+    "bench": "npm run pretest && vitest bench",
     "snapshot": "npm run pretest && vitest run -u --silent",
     "repl": "npm run prestart && cd website && npm run dev",
     "start": "npm run prestart && cd website && npm run dev",
@@ -20,7 +21,7 @@
     "osc": "cd packages/osc && npm run server",
     "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",
+    "lint": "eslint . --quiet",
     "codeformat": "prettier --write .",
     "format-check": "prettier --check .",
     "report-undocumented": "npm run jsdoc-json && node jsdoc/undocumented.mjs > undocumented.json",
@@ -54,19 +55,21 @@
     "@strudel/xen": "workspace:*"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.5.9",
-    "@vitest/ui": "^1.1.0",
-    "acorn": "^8.11.3",
-    "dependency-tree": "^10.0.9",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.19.0",
+    "@tauri-apps/cli": "^2.2.7",
+    "@vitest/ui": "^3.0.4",
+    "acorn": "^8.14.0",
+    "dependency-tree": "^11.0.1",
+    "eslint": "^9.19.0",
+    "eslint-plugin-import": "^2.31.0",
     "events": "^3.3.0",
-    "jsdoc": "^4.0.2",
+    "globals": "^15.14.0",
+    "jsdoc": "^4.0.4",
     "jsdoc-json": "^2.0.2",
-    "jsdoc-to-markdown": "^8.0.0",
-    "lerna": "^8.0.1",
-    "prettier": "^3.1.1",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "vitest": "^1.1.0"
+    "lerna": "^8.1.9",
+    "prettier": "^3.4.2",
+    "vitest": "^3.0.4"
   }
 }

packages/codemirror/codemirror.mjs

@@ -1,4 +1,5 @@
 import { closeBrackets } from '@codemirror/autocomplete';
+export { toggleComment, toggleBlockComment, toggleLineComment, toggleBlockCommentByLine } from '@codemirror/commands';
 // import { search, highlightSelectionMatches } from '@codemirror/search';
 import { history } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
@@ -12,7 +13,7 @@ import {
   lineNumbers,
   drawSelection,
 } from '@codemirror/view';
-import { Pattern, repl } from '@strudel/core';
+import { repl, registerControl } from '@strudel/core';
 import { Drawer, cleanupDraw } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
@@ -98,10 +99,8 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
           },
           {
             key: 'Alt-.',
-            run: (_, e) => {
-              e.preventDefault();
-              onStop?.();
-            },
+            preventDefault: true,
+            run: () => onStop?.(),
           },
           /* {
           key: 'Ctrl-Shift-.',
@@ -134,57 +133,50 @@ export class StrudelMirror {
       autodraw,
       prebake,
       bgFill = true,
+      solo = true,
       ...replOptions
     } = options;
     this.code = initialCode;
     this.root = root;
     this.miniLocations = [];
     this.widgets = [];
-    this.painters = [];
     this.drawTime = drawTime;
     this.drawContext = drawContext;
     this.onDraw = onDraw || this.draw;
     this.id = id || s4();
+    this.solo = solo;
 
-    this.drawer = new Drawer((haps, time) => {
+    this.drawer = new Drawer((haps, time, _, painters) => {
       const currentFrame = haps.filter((hap) => hap.isActive(time));
       this.highlight(currentFrame, time);
-      this.onDraw(haps, time, this.painters);
+      this.onDraw(haps, time, painters);
     }, drawTime);
 
     this.prebaked = prebake();
     autodraw && this.drawFirstFrame();
-
     this.repl = repl({
       ...replOptions,
+      id,
       onToggle: (started) => {
         replOptions?.onToggle?.(started);
         if (started) {
-          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,
-            }),
-          );
+          if (this.solo) {
+            // 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);
+          cleanupDraw(true, id);
         }
       },
       beforeEval: async () => {
-        cleanupDraw();
-        this.painters = [];
-        const self = this;
-        // this is similar to repl.mjs > injectPatternMethods
-        // maybe there is a solution without prototype hacking, but hey, it works
-        // we need to do this befor every eval to make sure it works with multiple StrudelMirror's side by side
-        Pattern.prototype.onPaint = function (onPaint) {
-          self.painters.push(onPaint);
-          return this;
-        };
+        cleanupDraw(true, id);
         await this.prebaked;
         await replOptions?.beforeEval?.();
       },
@@ -198,8 +190,11 @@ export class StrudelMirror {
         updateWidgets(this.editor, widgets);
         updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
-        this.adjustDrawTime();
-        this.drawer.invalidate();
+        // if no painters are set (.onPaint was not called), then we only need the present moment (for highlighting)
+        const drawTime = options.pattern.getPainters().length ? this.drawTime : [0, 0];
+        this.drawer.setDrawTime(drawTime);
+        // invalidate drawer after we've set the appropriate drawTime
+        this.drawer.invalidate(this.repl.scheduler);
       },
     });
     this.editor = initEditor({
@@ -228,19 +223,14 @@ export class StrudelMirror {
 
     // stop this repl when another repl is started
     this.onStartRepl = (e) => {
-      if (e.detail !== this.id) {
+      if (this.solo && 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]);
-  }
-  draw(haps, time) {
-    this.painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
+  draw(haps, time, painters) {
+    painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
   }
   async drawFirstFrame() {
     if (!this.onDraw) {
@@ -252,7 +242,7 @@ export class StrudelMirror {
       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);
+      this.onDraw?.(this.drawer.visibleHaps, -0.001, this.drawer.painters);
     } catch (err) {
       console.warn('first frame could not be painted');
     }
@@ -345,6 +335,17 @@ export class StrudelMirror {
   clear() {
     this.onStartRepl && document.removeEventListener('start-repl', this.onStartRepl);
   }
+  getCursorLocation() {
+    return this.editor.state.selection.main.head;
+  }
+  setCursorLocation(col) {
+    return this.editor.dispatch({ selection: { anchor: col } });
+  }
+  appendCode(code) {
+    const cursor = this.getCursorLocation();
+    this.setCode(this.code + code);
+    this.setCursorLocation(cursor);
+  }
 }
 
 function parseBooleans(value) {
@@ -357,3 +358,12 @@ function s4() {
     .toString(16)
     .substring(1);
 }
+
+/**
+ * Overrides the css of highlighted events. Make sure to use single quotes!
+ * @name markcss
+ * @example
+ * note("c a f e")
+ * .markcss('text-decoration:underline')
+ */
+export const markcss = registerControl('markcss');

packages/codemirror/highlight.mjs

@@ -93,6 +93,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
     if (haps.has(id)) {
       const hap = haps.get(id);
       const color = hap.value?.color ?? 'var(--foreground)';
+      const style = hap.value?.markcss || `outline: solid 2px ${color}`;
       // Get explicit channels for color values
       /* 
       const swatch = document.createElement('div');
@@ -114,7 +115,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
         to,
         Decoration.mark({
           // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
-          attributes: { style: `outline: solid 2px ${color}` },
+          attributes: { style },
         }),
       );
     }

packages/codemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/codemirror",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -32,26 +32,24 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@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",
+    "@codemirror/autocomplete": "^6.18.4",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/search": "^6.5.8",
+    "@codemirror/state": "^6.5.1",
+    "@codemirror/view": "^6.36.2",
+    "@lezer/highlight": "^1.2.1",
+    "@nanostores/persistent": "^0.10.2",
+    "@replit/codemirror-emacs": "^6.1.0",
+    "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "@uiw/codemirror-themes": "^4.21.21",
-    "@uiw/codemirror-themes-all": "^4.21.21",
-    "nanostores": "^0.9.5"
+    "nanostores": "^0.11.3"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/codemirror/themes.mjs

@@ -1,42 +1,41 @@
-import {
-  abcdef,
-  androidstudio,
-  atomone,
-  aura,
-  bespin,
-  darcula,
-  dracula,
-  duotoneDark,
-  eclipse,
-  githubDark,
-  gruvboxDark,
-  materialDark,
-  nord,
-  okaidia,
-  solarizedDark,
-  sublime,
-  tokyoNight,
-  tokyoNightStorm,
-  vscodeDark,
-  xcodeDark,
-  bbedit,
-  duotoneLight,
-  githubLight,
-  gruvboxLight,
-  materialLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
-  xcodeLight,
-} from '@uiw/codemirror-themes-all';
+import strudelTheme, { settings as strudelThemeSettings } from './themes/strudel-theme.mjs';
+import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen.mjs';
+import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen.mjs';
+import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen.mjs';
+import teletext, { settings as teletextSettings } from './themes/teletext.mjs';
+import algoboy, { settings as algoboySettings } from './themes/algoboy.mjs';
+import terminal, { settings as terminalSettings } from './themes/terminal.mjs';
+import abcdef, { settings as abcdefSettings } from './themes/abcdef.mjs';
+import androidstudio, { settings as androidstudioSettings } from './themes/androidstudio.mjs';
+import atomone, { settings as atomOneSettings } from './themes/atomone.mjs';
+import aura, { settings as auraSettings } from './themes/aura.mjs';
+import bespin, { settings as bespinSettings } from './themes/bespin.mjs';
+import darcula, { settings as darculaSettings } from './themes/darcula.mjs';
+import dracula, { settings as draculaSettings } from './themes/dracula.mjs';
+import duotoneDark, { settings as duotoneDarkSettings } from './themes/duotoneDark.mjs';
+import duotoneLight, { settings as duotoneLightSettings } from './themes/duotoneLight.mjs';
+import eclipse, { settings as eclipseSettings } from './themes/eclipse.mjs';
+import githubDark, { settings as githubDarkSettings } from './themes/githubDark.mjs';
+import githubLight, { settings as githubLightSettings } from './themes/githubLight.mjs';
+import gruvboxDark, { settings as gruvboxDarkSettings } from './themes/gruvboxDark.mjs';
+import gruvboxLight, { settings as gruvboxLightSettings } from './themes/gruvboxLight.mjs';
+import materialDark, { settings as materialDarkSettings } from './themes/materialDark.mjs';
+import materialLight, { settings as materialLightSettings } from './themes/materialLight.mjs';
+import nord, { settings as nordSettings } from './themes/nord.mjs';
+import monokai, { settings as monokaiSettings } from './themes/monokai.mjs';
+import solarizedDark, { settings as solarizedDarkSettings } from './themes/solarizedDark.mjs';
+import solarizedLight, { settings as solarizedLightSettings } from './themes/solarizedLight.mjs';
+import sublime, { settings as sublimeSettings } from './themes/sublime.mjs';
+import tokyoNight, { settings as tokyoNightSettings } from './themes/tokyoNight.mjs';
+import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/tokioNightStorm.mjs';
+import tokyoNightDay, { settings as tokyoNightDaySettings } from './themes/tokyoNightDay.mjs';
+import vscodeDark, { settings as vscodeDarkSettings } from './themes/vscodeDark.mjs';
+import vscodeLight, { settings as vscodeLightSettings } from './themes/vscodeLight.mjs';
+// import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
+import xcodeLight, { settings as xcodeLightSettings } from './themes/xcodeLight.mjs';
+import bbedit, { settings as bbeditSettings } from './themes/bbedit.mjs';
+import noctisLilac, { settings as noctisLilacSettings } from './themes/noctisLilac.mjs';
 
-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';
 import { setTheme } from '@strudel/draw';
 
 export const themes = {
@@ -46,395 +45,78 @@ export const themes = {
   whitescreen,
   teletext,
   algoboy,
-  terminal,
-  abcdef,
-  androidstudio,
   atomone,
   aura,
-  bespin,
   darcula,
   dracula,
+  // todo: optimize
+  // bespin,
+  //abcdef,
+  androidstudio,
   duotoneDark,
-  eclipse,
   githubDark,
   gruvboxDark,
   materialDark,
   nord,
-  okaidia,
+  monokai,
   solarizedDark,
   sublime,
   tokyoNight,
   tokyoNightStorm,
   vscodeDark,
-  xcodeDark,
+  //xcodeDark,
+  // LIGHT
   bbedit,
-  duotoneLight,
+  //duotoneLight,
+  eclipse,
   githubLight,
   gruvboxLight,
   materialLight,
+  vscodeLight,
   noctisLilac,
   solarizedLight,
   tokyoNightDay,
   xcodeLight,
 };
 
-// lineBackground is background with 50% opacity, to make sure the selection below is visible
-
 export const settings = {
-  strudelTheme: {
-    background: '#222',
-    lineBackground: '#22222299',
-    foreground: '#fff',
-    // foreground: '#75baff',
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
+  strudelTheme: strudelThemeSettings,
   bluescreen: bluescreenSettings,
   blackscreen: blackscreenSettings,
   whitescreen: whitescreenSettings,
   teletext: teletextSettings,
   algoboy: algoboySettings,
   terminal: terminalSettings,
-  abcdef: {
-    background: '#0f0f0f',
-    lineBackground: '#0f0f0f99',
-    foreground: '#defdef',
-    caret: '#00FF00',
-    selection: '#515151',
-    selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
-    lineHighlight: '#314151',
-  },
-  androidstudio: {
-    background: '#282b2e',
-    lineBackground: '#282b2e99',
-    foreground: '#a9b7c6',
-    caret: '#00FF00',
-    selection: '#343739',
-    selectionMatch: '#343739',
-    lineHighlight: '#343739',
-  },
-  atomone: {
-    background: '#272C35',
-    lineBackground: '#272C3599',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#ffffff30',
-    selectionMatch: '#2B323D',
-    gutterBackground: '#272C35',
-    gutterForeground: '#465063',
-    gutterBorder: 'transparent',
-    lineHighlight: '#2B323D',
-  },
-  aura: {
-    background: '#21202e',
-    lineBackground: '#21202e99',
-    foreground: '#edecee',
-    caret: '#a277ff',
-    selection: '#3d375e7f',
-    selectionMatch: '#3d375e7f',
-    gutterBackground: '#21202e',
-    gutterForeground: '#edecee',
-    gutterBorder: 'transparent',
-    lineHighlight: '#a394f033',
-  },
-  bbedit: {
-    light: true,
-    background: '#FFFFFF',
-    lineBackground: '#FFFFFF99',
-    foreground: '#000000',
-    caret: '#FBAC52',
-    selection: '#FFD420',
-    selectionMatch: '#FFD420',
-    gutterBackground: '#f5f5f5',
-    gutterForeground: '#4D4D4C',
-    gutterBorder: 'transparent',
-    lineHighlight: '#00000012',
-  },
-  bespin: {
-    background: '#28211c',
-    lineBackground: '#28211c99',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#36312e',
-    selectionMatch: '#4f382b',
-    gutterBackground: '#28211c',
-    gutterForeground: '#666666',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  darcula: {
-    background: '#2B2B2B',
-    lineBackground: '#2B2B2B99',
-    foreground: '#f8f8f2',
-    caret: '#FFFFFF',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: 'rgba(255, 255, 255, 0.1)',
-    gutterForeground: '#999',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  dracula: {
-    background: '#282a36',
-    lineBackground: '#282a3699',
-    foreground: '#f8f8f2',
-    caret: '#f8f8f0',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  duotoneLight: {
-    light: true,
-    background: '#faf8f5',
-    lineBackground: '#faf8f599',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    gutterBorder: 'transparent',
-    lineHighlight: '#EFEFEF',
-  },
-  duotoneDark: {
-    background: '#2a2734',
-    lineBackground: '#2a273499',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280',
-  },
-  eclipse: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#000',
-    caret: '#FFFFFF',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#f7f7f7',
-    gutterForeground: '#999',
-    lineHighlight: '#e8f2ff',
-    gutterBorder: 'transparent',
-  },
-  githubLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#24292e',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#6e7781',
-  },
-  githubDark: {
-    background: '#0d1117',
-    lineBackground: '#0d111799',
-    foreground: '#c9d1d9',
-    caret: '#c9d1d9',
-    selection: '#003d73',
-    selectionMatch: '#003d73',
-    lineHighlight: '#36334280',
-  },
-  gruvboxDark: {
-    background: '#282828',
-    lineBackground: '#28282899',
-    foreground: '#ebdbb2',
-    caret: '#ebdbb2',
-    selection: '#bdae93',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#3c3836',
-    gutterBackground: '#282828',
-    gutterForeground: '#7c6f64',
-  },
-  gruvboxLight: {
-    light: true,
-    background: '#fbf1c7',
-    lineBackground: '#fbf1c799',
-    foreground: '#3c3836',
-    caret: '#af3a03',
-    selection: '#ebdbb2',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#ebdbb2',
-    gutterBackground: '#ebdbb2',
-    gutterForeground: '#665c54',
-    gutterBorder: 'transparent',
-  },
-  materialDark: {
-    background: '#2e3235',
-    lineBackground: '#2e323599',
-    foreground: '#bdbdbd',
-    caret: '#a0a4ae',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#2e3235',
-    gutterForeground: '#999',
-    gutterActiveForeground: '#4f5b66',
-    lineHighlight: '#545b61',
-  },
-  materialLight: {
-    light: true,
-    background: '#FAFAFA',
-    lineBackground: '#FAFAFA99',
-    foreground: '#90A4AE',
-    caret: '#272727',
-    selection: '#80CBC440',
-    selectionMatch: '#FAFAFA',
-    gutterBackground: '#FAFAFA',
-    gutterForeground: '#90A4AE',
-    gutterBorder: 'transparent',
-    lineHighlight: '#CCD7DA50',
-  },
-  noctisLilac: {
-    light: true,
-    background: '#f2f1f8',
-    lineBackground: '#f2f1f899',
-    foreground: '#0c006b',
-    caret: '#5c49e9',
-    selection: '#d5d1f2',
-    selectionMatch: '#d5d1f2',
-    gutterBackground: '#f2f1f8',
-    gutterForeground: '#0c006b70',
-    lineHighlight: '#e1def3',
-  },
-  nord: {
-    background: '#2e3440',
-    lineBackground: '#2e344099',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#3b4252',
-    selectionMatch: '#e5e9f0',
-    gutterBackground: '#2e3440',
-    gutterForeground: '#4c566a',
-    gutterActiveForeground: '#d8dee9',
-    lineHighlight: '#4c566a',
-  },
-  okaidia: {
-    background: '#272822',
-    lineBackground: '#27282299',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#49483E',
-    selectionMatch: '#49483E',
-    gutterBackground: '#272822',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  solarizedLight: {
-    light: true,
-    background: '#fdf6e3',
-    lineBackground: '#fdf6e399',
-    foreground: '#657b83',
-    caret: '#586e75',
-    selection: '#dfd9c8',
-    selectionMatch: '#dfd9c8',
-    gutterBackground: '#00000010',
-    gutterForeground: '#657b83',
-    lineHighlight: '#dfd9c8',
-  },
-  solarizedDark: {
-    background: '#002b36',
-    lineBackground: '#002b3699',
-    foreground: '#93a1a1',
-    caret: '#839496',
-    selection: '#173541',
-    selectionMatch: '#aafe661a',
-    gutterBackground: '#00252f',
-    gutterForeground: '#839496',
-    lineHighlight: '#173541',
-  },
-  sublime: {
-    background: '#303841',
-    lineBackground: '#30384199',
-    foreground: '#FFFFFF',
-    caret: '#FBAC52',
-    selection: '#4C5964',
-    selectionMatch: '#3A546E',
-    gutterBackground: '#303841',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  tokyoNightDay: {
-    light: true,
-    background: '#e1e2e7',
-    lineBackground: '#e1e2e799',
-    foreground: '#3760bf',
-    caret: '#3760bf',
-    selection: '#99a7df',
-    selectionMatch: '#99a7df',
-    gutterBackground: '#e1e2e7',
-    gutterForeground: '#3760bf',
-    gutterBorder: 'transparent',
-    lineHighlight: '#5f5faf11',
-  },
-  tokyoNightStorm: {
-    background: '#24283b',
-    lineBackground: '#24283b99',
-    foreground: '#7982a9',
-    caret: '#c0caf5',
-    selection: '#6f7bb630',
-    selectionMatch: '#1f2335',
-    gutterBackground: '#24283b',
-    gutterForeground: '#7982a9',
-    gutterBorder: 'transparent',
-    lineHighlight: '#292e42',
-  },
-  tokyoNight: {
-    background: '#1a1b26',
-    lineBackground: '#1a1b2699',
-    foreground: '#787c99',
-    caret: '#c0caf5',
-    selection: '#515c7e40',
-    selectionMatch: '#16161e',
-    gutterBackground: '#1a1b26',
-    gutterForeground: '#787c99',
-    gutterBorder: 'transparent',
-    lineHighlight: '#1e202e',
-  },
-  vscodeDark: {
-    background: '#1e1e1e',
-    lineBackground: '#1e1e1e99',
-    foreground: '#9cdcfe',
-    caret: '#c6c6c6',
-    selection: '#6199ff2f',
-    selectionMatch: '#72a1ff59',
-    lineHighlight: '#ffffff0f',
-    gutterBackground: '#1e1e1e',
-    gutterForeground: '#838383',
-    gutterActiveForeground: '#fff',
-  },
-  xcodeLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#3D3D3D',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#AFAFAF',
-    lineHighlight: '#EDF4FF',
-  },
-  xcodeDark: {
-    background: '#292A30',
-    lineBackground: '#292A3099',
-    foreground: '#CECFD0',
-    caret: '#fff',
-    selection: '#727377',
-    selectionMatch: '#727377',
-    lineHighlight: '#2F3239',
-  },
+  abcdef: abcdefSettings,
+  androidstudio: androidstudioSettings,
+  atomone: atomOneSettings,
+  aura: auraSettings,
+  bbedit: bbeditSettings,
+  bespin: bespinSettings,
+  darcula: darculaSettings,
+  dracula: draculaSettings,
+  duotoneLight: duotoneLightSettings,
+  duotoneDark: duotoneDarkSettings,
+  eclipse: eclipseSettings,
+  githubLight: githubLightSettings,
+  githubDark: githubDarkSettings,
+  gruvboxDark: gruvboxDarkSettings,
+  gruvboxLight: gruvboxLightSettings,
+  materialDark: materialDarkSettings,
+  materialLight: materialLightSettings,
+  noctisLilac: noctisLilacSettings,
+  nord: nordSettings,
+  monokai: monokaiSettings,
+  solarizedLight: solarizedLightSettings,
+  solarizedDark: solarizedDarkSettings,
+  sublime: sublimeSettings,
+  tokyoNight: tokyoNightSettings,
+  tokyoNightStorm: tokyoNightStormSettings,
+  vscodeDark: vscodeDarkSettings,
+  vscodeLight: vscodeLightSettings,
+  xcodeLight: xcodeLightSettings,
+  //xcodeDark: xcodeDarkSettings,
+  tokyoNightDay: tokyoNightDaySettings,
 };
 
 function getColors(str) {

packages/codemirror/themes/abcdef.mjs

@@ -0,0 +1,55 @@
+/**
+ * @name abcdef
+ * @author codemirror.net
+ * https://codemirror.net/5/theme/abcdef.css
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#0f0f0f',
+  lineBackground: '#0f0f0f99',
+  foreground: '#defdef',
+  caret: '#00FF00',
+  selection: '#515151',
+  selectionMatch: '#515151',
+  gutterBackground: '#555',
+  gutterForeground: '#FFFFFF',
+  lineHighlight: '#314151',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#0f0f0f',
+    foreground: '#defdef',
+    caret: '#00FF00',
+    selection: '#515151',
+    selectionMatch: '#515151',
+    // gutterBackground: '#555',
+    gutterBackground: 'transparent',
+    /* gutterForeground: '#FFFFFF', */
+    gutterForeground: '#7a7b7c',
+    lineHighlight: '#0a6bcb3d',
+  },
+  styles: [
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
+    { tag: t.atom, color: '#77F' },
+    { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
+    { tag: t.number, color: 'violet' },
+    { tag: t.definition(t.variableName), color: '#fffabc' },
+    { tag: t.variableName, color: '#abcdef' },
+    { tag: t.function(t.variableName), color: '#fffabc' },
+    { tag: t.typeName, color: '#FFDD44' },
+    { tag: t.tagName, color: '#def' },
+    { tag: t.string, color: '#2b4' },
+    { tag: t.meta, color: '#C9F' },
+    // { tag: t.qualifier, color: '#FFF700' },
+    // { tag: t.builtin, color: '#30aabc' },
+    { tag: t.bracket, color: '#8a8a8a' },
+    { tag: t.attributeName, color: '#DDFF00' },
+    { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
+    { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
+  ],
+});

packages/codemirror/themes/algoboy.mjs

@@ -1,42 +1,60 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
+
+const palettes = {
+  // https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-09-920495662
+  'Central Florida A': ['#FFF630', '#B3AC22', '#666213', '#191905'],
+  'Central Florida B': ['#38CEBA', '#279082', '#16524A', '#061513'],
+  'Central Florida C': ['#FF8836', '#B35F26', '#663616', '#190E05'],
+  'Central Florida D': ['#E07070', '#9D4E4E', '#5A2D2D', '#160B0B'],
+  'Central Florida E': ['#7AA4CB', '#55738E', '#314251', '#0C1014'],
+  'Feminine Energy A': ['#DC5686', '#9A415E', '#582536', '#16090D'],
+  'Feminine Energy B': ['#D0463C', '#92312A', '#531c18', '#150706'],
+  'Feminine Energy C': ['#D86918', '#974A11', '#562A0A', '#160A02'],
+  'Feminine Energy D': ['#EFC54F', '#A78A36', '#604F20', '#181408'],
+  'Feminine Energy E': ['#866399', '#5e456b', '#36283d', '#0d0a0f'],
+  'Sour Watermelon A': ['#993366', '#6B2447', '#3D1429', '#0F050A'],
+  'Sour Watermelon B': ['#996666', '#6B4747', '#3D2929', '#0F0A0A'],
+  'Sour Watermelon C': ['#999966', '#686B47', '#3d3d29', '#0f0f0A'],
+  'Sour Watermelon D': ['#99cc66', '#6b8f47', '#3d5229', '#0f140a'],
+  'Sour Watermelon E': ['#99ff66', '#6bb347', '#3d6629', '#0f190a'],
+  //https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-02-920073260
+  'Peri Peaceful A': ['#909BE9', '#656DA3', '#3A3E5D', '#0e0f17'],
+  'Peri Peaceful B': ['#68628d', '#494563', '#2a2738', '#0a0a0e'], // pretty dim
+  'Peri Peaceful E': ['#b5a0a9', '#7f7076', '#484044', '#121011'],
+  'Hichem Palette B': ['#4fa3a5', '#377273', '#204142', '#081010'],
+  'Hichem Palette C': ['#Fe6f9b', '#b24e6d', '#662c3e', '#190b0f'],
+  'Hichem Palette D': ['#ffbb5a', '#b3833f', '#664b24', '#191309'],
+  'JSR2 A': ['#E0EFC0', '#9da786', '#5a604d', '#161813'],
+};
+const palette = palettes['Sour Watermelon B'];
 export const settings = {
-  background: '#9bbc0f',
-  foreground: '#0f380f', // whats that?
-  caret: '#0f380f',
-  selection: '#306230',
-  selectionMatch: '#ffffff26',
-  lineHighlight: '#8bac0f',
-  lineBackground: '#9bbc0f50',
+  background: palette[3],
+  foreground: palette[1],
+  caret: palette[0],
+  selection: palette[0],
+  selectionMatch: palette[1],
+  lineHighlight: palette[3],
+  lineBackground: palette[3] + '90',
   //lineBackground: 'transparent',
   gutterBackground: 'transparent',
-  gutterForeground: '#0f380f',
-  light: true,
-  customStyle: '.cm-line { line-height: 1 }',
+  gutterForeground: palette[0],
+  light: false,
+  // customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
-  theme: 'light',
+  theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: '#0f380f' },
-    { tag: t.keyword, color: '#0f380f' },
-    { tag: t.operator, color: '#0f380f' },
-    { tag: t.special(t.variableName), color: '#0f380f' },
-    { tag: t.typeName, color: '#0f380f' },
-    { tag: t.atom, color: '#0f380f' },
-    { tag: t.number, color: '#0f380f' },
-    { tag: t.definition(t.variableName), color: '#0f380f' },
-    { tag: t.string, color: '#0f380f' },
-    { tag: t.special(t.string), color: '#0f380f' },
-    { tag: t.comment, color: '#0f380f' },
-    { tag: t.variableName, color: '#0f380f' },
-    { tag: t.tagName, color: '#0f380f' },
-    { tag: t.bracket, color: '#0f380f' },
-    { tag: t.meta, color: '#0f380f' },
-    { tag: t.attributeName, color: '#0f380f' },
-    { tag: t.propertyName, color: '#0f380f' },
-    { tag: t.className, color: '#0f380f' },
-    { tag: t.invalid, color: '#0f380f' },
-    { tag: [t.unit, t.punctuation], color: '#0f380f' },
+    { tag: t.comment, color: palette[2] },
+    { tag: t.string, color: palette[1] },
+    { tag: [t.atom, t.number], color: palette[1] },
+    { tag: [t.meta, t.labelName, t.variableName], color: palette[0] },
+    {
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: palette[1],
+    },
+    { tag: [t.function(t.variableName), t.propertyName], color: palette[0] },
+    { tag: t.atom, color: palette[1] },
   ],
 });

packages/codemirror/themes/androidstudio.mjs

@@ -0,0 +1,43 @@
+/**
+ * @name androidstudio
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#282b2e',
+  lineBackground: '#282b2e99',
+  foreground: '#a9b7c6',
+  caret: '#00FF00',
+  selection: '#343739',
+  selectionMatch: '#343739',
+  lineHighlight: '#343739',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#282b2e',
+    foreground: '#a9b7c6',
+    caret: '#00FF00',
+    selection: '#4e5254',
+    selectionMatch: '#4e5254',
+    gutterForeground: '#cccccc50',
+    lineHighlight: '#7f85891f',
+  },
+  styles: [
+    { tag: t.labelName, color: 'inherit' },
+    { tag: [t.keyword, t.deleted, t.className], color: '#a9b7c6' },
+    { tag: [t.number, t.literal], color: '#6897bb' },
+    //{ tag: [t.link, t.variableName], color: '#629755' },
+    { tag: [t.link, t.variableName], color: '#a9b7c6' },
+    { tag: [t.comment, t.quote], color: 'grey' },
+    { tag: [t.meta, t.documentMeta], color: '#bbb529' },
+    //{ tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+    { tag: [t.propertyName, t.attributeValue], color: '#a9b7c6' },
+    { tag: [t.string], color: '#6a8759' },
+    { tag: [t.heading, t.typeName], color: '#ffc66d' },
+    { tag: [t.attributeName], color: '#a9b7c6' },
+    { tag: [t.emphasis], fontStyle: 'italic' },
+  ],
+});

packages/codemirror/themes/atomone.mjs

@@ -0,0 +1,49 @@
+/**
+ * @name Atom One
+ * Atom One dark syntax theme
+ *
+ * https://github.com/atom/one-dark-syntax
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#272C35',
+  lineBackground: '#272C3599',
+  foreground: 'hsl(220, 14%, 71%)',
+  caret: '#797977',
+  selection: '#ffffff30',
+  selectionMatch: '#2B323D',
+  gutterBackground: '#272C35',
+  gutterForeground: '#465063',
+  gutterBorder: 'transparent',
+  lineHighlight: '#2B323D',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#272C35',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#3d4c64',
+    selectionMatch: '#3d4c64',
+    gutterBackground: '#272C35',
+    gutterForeground: '#465063',
+    gutterBorder: 'transparent',
+    lineHighlight: '#2e3f5940',
+  },
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: 'hsl(207, 82%, 66%)',
+    },
+    { tag: [t.tagName, t.heading], color: '#e06c75' },
+    { tag: t.comment, color: '#54636D' },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: 'hsl(220, 14%, 71%)' },
+    { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
+    { tag: t.className, color: 'hsl( 39, 67%, 69%)' },
+    { tag: t.keyword, color: 'hsl(286, 60%, 67%)' },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
+  ],
+});

packages/codemirror/themes/aura.mjs

@@ -0,0 +1,51 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#21202e',
+  lineBackground: '#21202e99',
+  foreground: '#edecee',
+  caret: '#a277ff',
+  selection: '#3d375e7f',
+  selectionMatch: '#3d375e7f',
+  gutterBackground: '#21202e',
+  gutterForeground: '#edecee',
+  gutterBorder: 'transparent',
+  lineHighlight: '#a394f033',
+};
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#21202e',
+    foreground: '#edecee',
+    caret: '#a277ff',
+    selection: '#5a51898f',
+    selectionMatch: '#5a51898f',
+    gutterBackground: '#21202e',
+    gutterForeground: '#edecee',
+    gutterBorder: 'transparent',
+    lineHighlight: '#a394f033',
+  },
+  styles: [
+    { tag: t.keyword, color: '#a277ff' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#edecee' },
+    { tag: [t.propertyName], color: '#ffca85' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#61ffca' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#ffca85' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#61ffca' },
+    { tag: [t.definition(t.name), t.separator], color: '#edecee' },
+    { tag: [t.className], color: '#82e2ff' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#61ffca' },
+    { tag: [t.typeName], color: '#82e2ff' },
+    { tag: [t.operator, t.operatorKeyword], color: '#a277ff' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#61ffca' },
+    { tag: [t.meta, t.comment], color: '#6d6d6d' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#a277ff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#edecee' },
+    { tag: t.invalid, color: '#ff6767' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/bbedit.mjs

@@ -0,0 +1,46 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#FFFFFF',
+  lineBackground: '#FFFFFF99',
+  foreground: '#000000',
+  caret: '#FBAC52',
+  selection: '#FFD420',
+  selectionMatch: '#FFD420',
+  gutterBackground: '#f5f5f5',
+  gutterForeground: '#4D4D4C',
+  gutterBorder: 'transparent',
+  lineHighlight: '#00000012',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#FFFFFF',
+    foreground: '#000000',
+    caret: '#FBAC52',
+    selection: '#FFD420',
+    selectionMatch: '#FFD420',
+    gutterBackground: '#f5f5f5',
+    gutterForeground: '#4D4D4C',
+    gutterBorder: 'transparent',
+    lineHighlight: '#00000012',
+  },
+  styles: [
+    { tag: [t.meta, t.comment], color: '#804000' },
+    { tag: [t.keyword, t.strong], color: '#0000FF' },
+    { tag: [t.number], color: '#FF0080' },
+    { tag: [t.string], color: '#FF0080' },
+    { tag: [t.variableName], color: '#006600' },
+    { tag: [t.escape], color: '#33CC33' },
+    { tag: [t.tagName], color: '#1C02FF' },
+    { tag: [t.heading], color: '#0C07FF' },
+    { tag: [t.quote], color: '#000000' },
+    { tag: [t.list], color: '#B90690' },
+    { tag: [t.documentMeta], color: '#888888' },
+    { tag: [t.function(t.variableName)], color: '#0000A2' },
+    { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
+  ],
+});

packages/codemirror/themes/bespin.mjs

@@ -0,0 +1,39 @@
+// this is different from https://thememirror.net/bespin
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#28211c',
+  lineBackground: '#28211c99',
+  foreground: '#9d9b97',
+  caret: '#797977',
+  selection: '#36312e',
+  selectionMatch: '#4f382b',
+  gutterBackground: '#28211c',
+  gutterForeground: '#666666',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#28211c',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#4f382b',
+    selectionMatch: '#4f382b',
+    gutterBackground: '#28211c',
+    gutterForeground: '#666666',
+    lineHighlight: '#ffffff1a',
+  },
+  styles: [
+    { tag: [t.atom, t.number, t.link, t.bool], color: '#9b859d' },
+    { tag: t.comment, color: '#937121' },
+    { tag: [t.keyword, t.tagName], color: '#cf6a4c' },
+    { tag: t.string, color: '#f9ee98' },
+    { tag: t.bracket, color: '#9d9b97' },
+    { tag: [t.variableName], color: '#5ea6ea' },
+    { tag: t.definition(t.variableName), color: '#cf7d34' },
+    { tag: [t.function(t.variableName), t.className], color: '#cf7d34' },
+    { tag: [t.propertyName, t.attributeName], color: '#54be0d' },
+  ],
+});

packages/codemirror/themes/blackscreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: 'white', // whats that?
@@ -15,25 +15,25 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: 'white' },
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
+    { tag: [t.unit, t.punctuation], color: 'inherit' },
   ],
 });

packages/codemirror/themes/bluescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',
@@ -18,25 +18,25 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: 'white' },
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
+    { tag: [t.unit, t.punctuation], color: 'inherit' },
   ],
 });

packages/codemirror/themes/darcula.mjs

@@ -0,0 +1,48 @@
+/**
+ * @name darcula
+ * @author darcula
+ * Name: IntelliJ IDEA darcula theme
+ * From IntelliJ IDEA by JetBrains
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+export const settings = {
+  background: '#242424',
+  lineBackground: '#24242499',
+  foreground: '#f8f8f2',
+  caret: '#FFFFFF',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  selectionMatch: 'rgba(255, 255, 255, 0.2)',
+  gutterBackground: 'rgba(255, 255, 255, 0.1)',
+  gutterForeground: '#999',
+  gutterBorder: 'transparent',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#242424',
+    foreground: '#f8f8f2',
+    caret: '#FFFFFF',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: 'transparent',
+    gutterForeground: '#999',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  styles: [
+    { tag: t.labelName, color: '#CCCCCC' },
+    { tag: [t.atom, t.number], color: '#7A9EC2' },
+    { tag: [t.comment], color: '#707070' },
+    { tag: [t.string], color: '#6A8759' },
+    { tag: [t.variableName, t.operator], color: '#CCCCCC' },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#FFC66D' },
+    { tag: [t.meta, t.className], color: '#FFC66D' },
+    { tag: [t.propertyName], color: '#FFC66D' },
+    { tag: [t.keyword], color: '#CC7832' },
+    { tag: [t.tagName], color: '#ff79c6' },
+    { tag: [t.typeName], color: '#ffb86c' },
+  ],
+});

packages/codemirror/themes/dracula.mjs

@@ -0,0 +1,51 @@
+/**
+ * @name dracula
+ * @author dracula
+ * Michael Kaminsky (http://github.com/mkaminsky11)
+ * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
+ */
+// this is different from https://thememirror.net/dracula
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#282a36',
+  lineBackground: '#282a3699',
+  foreground: '#f8f8f2',
+  caret: '#f8f8f0',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  selectionMatch: 'rgba(255, 255, 255, 0.2)',
+  gutterBackground: '#282a36',
+  gutterForeground: '#6272a4',
+  gutterBorder: 'transparent',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+
+const purple = '#BD93F9';
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#282a36',
+    foreground: '#f8f8f2',
+    caret: '#f8f8f0',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: '#282a36',
+    gutterForeground: '#6272a4',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  styles: [
+    { tag: t.comment, color: '#6272a4' },
+    { tag: t.string, color: '#f1fa8c' },
+    { tag: [t.atom, t.number], color: purple },
+    { tag: [t.meta, t.labelName, t.variableName], color: '#f8f8f2' },
+    {
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: '#ff79c6',
+    },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#50fa7b' },
+    { tag: t.atom, color: '#bd93f9' },
+  ],
+});

packages/codemirror/themes/duotoneDark.mjs

@@ -0,0 +1,42 @@
+/**
+ * @name duotone
+ * @author Bram de Haan
+ * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#2a2734',
+  lineBackground: '#2a273499',
+  foreground: '#eeebff',
+  caret: '#ffad5c',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  gutterBackground: '#2a2734',
+  gutterForeground: '#545167',
+  lineHighlight: '#36334280',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#2a2734',
+    foreground: '#6c6783',
+    caret: '#ffad5c',
+    selection: '#9a86fd',
+    selectionMatch: '#9a86fd',
+    gutterBackground: '#2a2734',
+    gutterForeground: '#545167',
+    lineHighlight: '#36334280',
+  },
+  styles: [
+    { tag: [t.comment, t.bracket, t.operator], color: '#6c6783' },
+    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
+    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
+    { tag: [t.typeName, t.url], color: '#eeebff' },
+    { tag: t.string, color: '#ffb870' },
+    /* { tag: [t.propertyName], color: '#9a86fd' }, */
+    { tag: [t.propertyName], color: '#eeebff' },
+    { tag: t.labelName, color: '#eeebff' },
+  ],
+});

packages/codemirror/themes/duotoneLight.mjs

@@ -0,0 +1,45 @@
+/**
+ * @name duotone
+ * @author Bram de Haan
+ * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#faf8f5',
+  lineBackground: '#faf8f599',
+  foreground: '#b29762',
+  caret: '#93abdc',
+  selection: '#e3dcce',
+  selectionMatch: '#e3dcce',
+  gutterBackground: '#faf8f5',
+  gutterForeground: '#cdc4b1',
+  gutterBorder: 'transparent',
+  lineHighlight: '#EFEFEF',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#faf8f5',
+    foreground: '#b29762',
+    caret: '#93abdc',
+    selection: '#e3dcce',
+    selectionMatch: '#e3dcce',
+    gutterBackground: '#faf8f5',
+    gutterForeground: '#cdc4b1',
+    gutterBorder: 'transparent',
+    lineHighlight: '#ddceb154',
+  },
+  styles: [
+    { tag: [t.comment, t.bracket], color: '#b6ad9a' },
+    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
+    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
+    { tag: [t.typeName, t.url, t.string], color: '#896724' },
+    { tag: [t.operator, t.string], color: '#1659df' },
+    { tag: [t.propertyName], color: '#b29762' },
+    { tag: [t.unit, t.punctuation], color: '#063289' },
+  ],
+});

packages/codemirror/themes/eclipse.mjs

@@ -0,0 +1,46 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#fff',
+  lineBackground: '#ffffff99',
+  foreground: '#000',
+  caret: '#FFFFFF',
+  selection: '#d7d4f0',
+  selectionMatch: '#d7d4f0',
+  gutterBackground: '#f7f7f7',
+  gutterForeground: '#999',
+  lineHighlight: '#e8f2ff',
+  gutterBorder: 'transparent',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#fff',
+    foreground: '#000',
+    caret: '#FFFFFF',
+    selection: '#d7d4f0',
+    selectionMatch: '#d7d4f0',
+    gutterBackground: '#f7f7f7',
+    gutterForeground: '#999',
+    lineHighlight: '#006fff1c',
+    gutterBorder: 'transparent',
+  },
+  styles: [
+    { tag: [t.comment], color: '#3F7F5F' },
+    { tag: [t.documentMeta], color: '#FF1717' },
+    { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' },
+    { tag: t.atom, color: '#00f' },
+    { tag: t.number, color: '#164' },
+    { tag: t.propertyName, color: '#164' },
+    { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' },
+    { tag: t.function(t.variableName), color: '#0000C0' },
+    { tag: t.string, color: '#2A00FF' },
+    { tag: t.operator, color: 'black' },
+    { tag: t.tagName, color: '#170' },
+    { tag: t.attributeName, color: '#00c' },
+    { tag: t.link, color: '#219' },
+  ],
+});

packages/codemirror/themes/githubDark.mjs

@@ -0,0 +1,45 @@
+/**
+ * @name github
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#0d1117',
+  lineBackground: '#0d111799',
+  foreground: '#c9d1d9',
+  caret: '#c9d1d9',
+  selection: '#003d73',
+  selectionMatch: '#003d73',
+  lineHighlight: '#36334280',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#0d1117',
+    foreground: '#c9d1d9',
+    caret: '#c9d1d9',
+    selection: '#003d73',
+    selectionMatch: '#003d73',
+    lineHighlight: '#36334280',
+  },
+  styles: [
+    { tag: t.labelName, color: '#d2a8ff' },
+    { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
+    { tag: [t.comment, t.bracket], color: '#8b949e' },
+    { tag: [t.className, t.propertyName], color: '#d2a8ff' },
+    { tag: [t.variableName, t.attributeName], color: '#d2a8ff' },
+    { tag: [t.number, t.operator], color: '#79c0ff' },
+    { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
+    { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
+    { tag: [t.name, t.quote], color: '#7ee787' },
+    { tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' },
+    { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
+    { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.invalid, color: '#f97583' },
+  ],
+});

packages/codemirror/themes/githubLight.mjs

@@ -0,0 +1,45 @@
+/**
+ * @name github
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#fff',
+  lineBackground: '#ffffff99',
+  foreground: '#24292e',
+  selection: '#BBDFFF',
+  selectionMatch: '#BBDFFF',
+  gutterBackground: '#fff',
+  gutterForeground: '#6e7781',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#fff',
+    foreground: '#24292e',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#6e7781',
+  },
+  styles: [
+    { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
+    { tag: [t.comment, t.bracket], color: '#6a737d' },
+    { tag: [t.className, t.propertyName], color: '#6f42c1' },
+    { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
+    { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
+    { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
+    { tag: [t.name, t.quote], color: '#22863a' },
+    { tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' },
+    { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
+    { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.invalid, color: '#cb2431' },
+  ],
+});

packages/codemirror/themes/gruvboxDark.mjs

@@ -0,0 +1,83 @@
+/**
+ * @name gruvbox-dark
+ * @author morhetz
+ * Name: Gruvbox
+ * From github.com/codemirror/codemirror5/blob/master/theme/gruvbox-dark.css
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#282828',
+  lineBackground: '#28282899',
+  foreground: '#ebdbb2',
+  caret: '#ebdbb2',
+  selection: '#bdae93',
+  selectionMatch: '#bdae93',
+  lineHighlight: '#3c3836',
+  gutterBackground: '#282828',
+  gutterForeground: '#7c6f64',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#282828',
+    foreground: '#ebdbb2',
+    caret: '#ebdbb2',
+    selection: '#b99d555c',
+    selectionMatch: '#b99d555c',
+    lineHighlight: '#baa1602b',
+    gutterBackground: '#282828',
+    gutterForeground: '#7c6f64',
+  },
+  styles: [
+    { tag: t.keyword, color: '#fb4934' },
+    { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#8ec07c' },
+    { tag: [t.variableName], color: '#83a598' },
+    { tag: [t.function(t.variableName)], color: '#8ec07c', fontStyle: 'bold' },
+    { tag: [t.labelName], color: '#ebdbb2' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#d3869b' },
+    { tag: [t.definition(t.name), t.separator], color: '#ebdbb2' },
+    { tag: [t.brace], color: '#ebdbb2' },
+    { tag: [t.annotation], color: '#fb4934d' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#d3869b' },
+    { tag: [t.typeName, t.className], color: '#fabd2f' },
+    { tag: [t.operatorKeyword], color: '#fb4934' },
+    {
+      tag: [t.tagName],
+      color: '#8ec07c',
+      fontStyle: 'bold',
+    },
+    { tag: [t.squareBracket], color: '#fe8019' },
+    { tag: [t.angleBracket], color: '#83a598' },
+    { tag: [t.attributeName], color: '#8ec07c' },
+    { tag: [t.regexp], color: '#8ec07c' },
+    { tag: [t.quote], color: '#928374' },
+    { tag: [t.string], color: '#ebdbb2' },
+    {
+      tag: t.link,
+      color: '#a89984',
+      textDecoration: 'underline',
+      textUnderlinePosition: 'under',
+    },
+    { tag: [t.url, t.escape, t.special(t.string)], color: '#d3869b' },
+    { tag: [t.meta], color: '#fabd2f' },
+    { tag: [t.comment], color: '#928374', fontStyle: 'italic' },
+    { tag: t.strong, fontWeight: 'bold', color: '#fe8019' },
+    { tag: t.emphasis, fontStyle: 'italic', color: '#b8bb26' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.heading, fontWeight: 'bold', color: '#b8bb26' },
+    { tag: [t.heading1, t.heading2], fontWeight: 'bold', color: '#b8bb26' },
+    {
+      tag: [t.heading3, t.heading4],
+      fontWeight: 'bold',
+      color: '#fabd2f',
+    },
+    { tag: [t.heading5, t.heading6], color: '#fabd2f' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d3869b' },
+    { tag: [t.processingInstruction, t.inserted], color: '#83a598' },
+    { tag: [t.contentSeparator], color: '#fb4934' },
+    { tag: t.invalid, color: '#fe8019', borderBottom: `1px dotted #fb4934d` },
+  ],
+});

packages/codemirror/themes/gruvboxLight.mjs

@@ -0,0 +1,131 @@
+/**
+ * @name gruvbox-light
+ * @author morhetz
+ * Name: Gruvbox
+ * From github.com/codemirror/codemirror5/blob/master/theme/gruvbox-light.css
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#fbf1c7',
+  lineBackground: '#fbf1c799',
+  foreground: '#3c3836',
+  caret: '#af3a03',
+  selection: '#ebdbb2',
+  selectionMatch: '#bdae93',
+  lineHighlight: '#ebdbb2',
+  gutterBackground: '#ebdbb2',
+  gutterForeground: '#665c54',
+  gutterBorder: 'transparent',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#fbf1c7',
+    foreground: '#3c3836',
+    caret: '#af3a03',
+    selection: '#bdae9391',
+    selectionMatch: '#bdae9391',
+    lineHighlight: '#a37f2238',
+    gutterBackground: '#ebdbb2',
+    gutterForeground: '#665c54',
+    gutterBorder: 'transparent',
+  },
+  styles: [
+    { tag: t.keyword, color: '#9d0006' },
+    {
+      tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+      color: '#427b58',
+    },
+    { tag: [t.variableName], color: '#076678' },
+    { tag: [t.function(t.variableName)], color: '#79740e', fontStyle: 'bold' },
+    { tag: [t.labelName], color: '#3c3836' },
+    {
+      tag: [t.color, t.constant(t.name), t.standard(t.name)],
+      color: '#8f3f71',
+    },
+    { tag: [t.definition(t.name), t.separator], color: '#3c3836' },
+    { tag: [t.brace], color: '#3c3836' },
+    {
+      tag: [t.annotation],
+      color: '#9d0006',
+    },
+    {
+      tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+      color: '#8f3f71',
+    },
+    {
+      tag: [t.typeName, t.className],
+      color: '#b57614',
+    },
+    {
+      tag: [t.operator, t.operatorKeyword],
+      color: '#9d0006',
+    },
+    {
+      tag: [t.tagName],
+      color: '#427b58',
+      fontStyle: 'bold',
+    },
+    {
+      tag: [t.squareBracket],
+      color: '#af3a03',
+    },
+    {
+      tag: [t.angleBracket],
+      color: '#076678',
+    },
+    {
+      tag: [t.attributeName],
+      color: '#427b58',
+    },
+    {
+      tag: [t.regexp],
+      color: '#427b58',
+    },
+    {
+      tag: [t.quote],
+      color: '#928374',
+    },
+    { tag: [t.string], color: '#3c3836' },
+    {
+      tag: t.link,
+      color: '#7c6f64',
+      textDecoration: 'underline',
+      textUnderlinePosition: 'under',
+    },
+    {
+      tag: [t.url, t.escape, t.special(t.string)],
+      color: '#8f3f71',
+    },
+    { tag: [t.meta], color: '#b57614' },
+    { tag: [t.comment], color: '#928374', fontStyle: 'italic' },
+    { tag: t.strong, fontWeight: 'bold', color: '#af3a03' },
+    { tag: t.emphasis, fontStyle: 'italic', color: '#79740e' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.heading, fontWeight: 'bold', color: '#79740e' },
+    { tag: [t.heading1, t.heading2], fontWeight: 'bold', color: '#79740e' },
+    {
+      tag: [t.heading3, t.heading4],
+      fontWeight: 'bold',
+      color: '#b57614',
+    },
+    {
+      tag: [t.heading5, t.heading6],
+      color: '#b57614',
+    },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8f3f71' },
+    {
+      tag: [t.processingInstruction, t.inserted],
+      color: '#076678',
+    },
+    {
+      tag: [t.contentSeparator],
+      color: '#9d0006',
+    },
+    { tag: t.invalid, color: '#af3a03', borderBottom: `1px dotted #9d0006` },
+  ],
+});

packages/codemirror/themes/materialDark.mjs

@@ -0,0 +1,77 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#212121',
+  lineBackground: '#21212199',
+  foreground: '#bdbdbd',
+  caret: '#a0a4ae',
+  selection: '#d7d4f0',
+  selectionMatch: '#d7d4f0',
+  gutterBackground: '#212121',
+  gutterForeground: '#999',
+  gutterActiveForeground: '#4f5b66',
+  lineHighlight: '#111111',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#212121',
+    foreground: '#bdbdbd',
+    caret: '#a0a4ae',
+    selection: '#d7d4f063',
+    selectionMatch: '#d7d4f063',
+    gutterBackground: '#212121',
+    gutterForeground: '#999',
+    gutterActiveForeground: '#4f5b66',
+    lineHighlight: '#333333',
+  },
+  styles: [
+    { tag: t.keyword, color: '#cf6edf' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#56c8d8' },
+    { tag: [t.propertyName], color: '#82AAFF' },
+    { tag: [t.variableName], color: '#bdbdbd' },
+    { tag: [t.function(t.variableName)], color: '#82AAFF' },
+    { tag: [t.labelName], color: '#cf6edf' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#facf4e' },
+    { tag: [t.definition(t.name), t.separator], color: '#56c8d8' },
+    { tag: [t.brace], color: '#cf6edf' },
+    { tag: [t.annotation], color: '#f07178' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#f07178' },
+    { tag: [t.typeName, t.className], color: '#f07178' },
+    { tag: [t.operator, t.operatorKeyword], color: '#82AAFF' },
+    { tag: [t.tagName], color: '#99d066' },
+    { tag: [t.squareBracket], color: '#f07178' },
+    { tag: [t.angleBracket], color: '#606f7a' },
+    { tag: [t.attributeName], color: '#bdbdbd' },
+    { tag: [t.regexp], color: '#f07178' },
+    { tag: [t.quote], color: '#6abf69' },
+    { tag: [t.string], color: '#99d066' },
+    {
+      tag: t.link,
+      color: '#56c8d8',
+      textDecoration: 'underline',
+      textUnderlinePosition: 'under',
+    },
+    { tag: [t.url, t.escape, t.special(t.string)], color: '#facf4e' },
+    { tag: [t.meta], color: '#707d8b' },
+    { tag: [t.comment], color: '#707d8b', fontStyle: 'italic' },
+    { tag: t.monospace, color: '#bdbdbd' },
+    { tag: t.strong, fontWeight: 'bold', color: '#f07178' },
+    { tag: t.emphasis, fontStyle: 'italic', color: '#99d066' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.heading, fontWeight: 'bold', color: '#facf4e' },
+    { tag: t.heading1, fontWeight: 'bold', color: '#facf4e' },
+    {
+      tag: [t.heading2, t.heading3, t.heading4],
+      fontWeight: 'bold',
+      color: '#facf4e',
+    },
+    { tag: [t.heading5, t.heading6], color: '#facf4e' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#56c8d8' },
+    { tag: [t.processingInstruction, t.inserted], color: '#f07178' },
+    { tag: [t.contentSeparator], color: '#56c8d8' },
+    { tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #f07178` },
+  ],
+});

packages/codemirror/themes/materialLight.mjs

@@ -0,0 +1,52 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#FAFAFA',
+  lineBackground: '#FAFAFA99',
+  foreground: '#90A4AE',
+  caret: '#272727',
+  selection: '#80CBC440',
+  selectionMatch: '#FAFAFA',
+  gutterBackground: '#FAFAFA',
+  gutterForeground: '#90A4AE',
+  gutterBorder: 'transparent',
+  lineHighlight: '#CCD7DA50',
+};
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#FAFAFA',
+    foreground: '#90A4AE',
+    caret: '#272727',
+    selection: '#80CBC440',
+    selectionMatch: '#80CBC440',
+    gutterBackground: '#FAFAFA',
+    gutterForeground: '#90A4AE',
+    gutterBorder: 'transparent',
+    lineHighlight: '#CCD7DA50',
+  },
+  styles: [
+    { tag: t.keyword, color: '#39ADB5' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
+    { tag: [t.propertyName], color: '#6182B8' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
+    { tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
+    { tag: [t.className], color: '#E2931D' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
+    { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
+    { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
+    { tag: [t.meta, t.comment], color: '#90A4AE' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
+    { tag: t.invalid, color: '#E5393570' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/monokai.mjs

@@ -0,0 +1,45 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#272822',
+  lineBackground: '#27282299',
+  foreground: '#FFFFFF',
+  caret: '#FFFFFF',
+  selection: '#49483E',
+  selectionMatch: '#49483E',
+  gutterBackground: '#272822',
+  gutterForeground: '#FFFFFF70',
+  lineHighlight: '#00000059',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#272822',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#49483E',
+    selectionMatch: '#49483E',
+    gutterBackground: '#272822',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#0000003b',
+  },
+  styles: [
+    { tag: t.labelName, color: '#bababa' },
+    { tag: [t.comment, t.documentMeta], color: '#8292a2' },
+    { tag: [t.number, t.bool, t.null, t.atom], color: '#ae81ff' },
+    { tag: [t.attributeValue, t.className, t.name], color: '#e6db74' },
+    { tag: [t.propertyName, t.attributeName], color: '#a6e22e' },
+    { tag: [t.variableName], color: '#9effff' },
+    { tag: [t.squareBracket], color: '#bababa' },
+    { tag: [t.string, t.special(t.brace)], color: '#e6db74' },
+    { tag: [t.regexp, t.className, t.typeName, t.definition(t.typeName)], color: '#66d9ef' },
+    {
+      tag: [t.definition(t.variableName), t.definition(t.propertyName), t.function(t.variableName)],
+      color: '#a6e22e',
+    },
+    // { tag: t.keyword, color: '#f92672' },
+    { tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket], color: '#f92672' },
+  ],
+});

packages/codemirror/themes/noctisLilac.mjs

@@ -0,0 +1,50 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#f2f1f8',
+  lineBackground: '#f2f1f899',
+  foreground: '#0c006b',
+  caret: '#5c49e9',
+  selection: '#d5d1f2',
+  selectionMatch: '#d5d1f2',
+  gutterBackground: '#f2f1f8',
+  gutterForeground: '#0c006b70',
+  lineHighlight: '#e1def3',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#f2f1f8',
+    foreground: '#0c006b',
+    caret: '#5c49e9',
+    selection: '#d5d1f2',
+    selectionMatch: '#d5d1f2',
+    gutterBackground: '#f2f1f8',
+    gutterForeground: '#0c006b70',
+    lineHighlight: '#16067911',
+  },
+  styles: [
+    { tag: t.comment, color: '#9995b7' },
+    {
+      tag: t.keyword,
+      color: '#ff5792',
+      fontWeight: 'bold',
+    },
+    { tag: [t.definitionKeyword, t.modifier], color: '#ff5792' },
+    { tag: [t.className, t.tagName, t.definition(t.typeName)], color: '#0094f0' },
+    { tag: [t.number, t.bool, t.null, t.special(t.brace)], color: '#5842ff' },
+    { tag: [t.definition(t.propertyName), t.function(t.variableName)], color: '#0095a8' },
+    { tag: t.typeName, color: '#b3694d' },
+    { tag: [t.propertyName, t.variableName], color: '#fa8900' },
+    { tag: t.operator, color: '#ff5792' },
+    { tag: t.self, color: '#e64100' },
+    { tag: [t.string, t.regexp], color: '#00b368' },
+    { tag: [t.paren, t.bracket], color: '#0431fa' },
+    { tag: t.labelName, color: '#00bdd6' },
+    { tag: t.attributeName, color: '#e64100' },
+    { tag: t.angleBracket, color: '#9995b7' },
+  ],
+});

packages/codemirror/themes/nord.mjs

@@ -0,0 +1,78 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#2e3440',
+  lineBackground: '#2e344099',
+  foreground: '#FFFFFF',
+  caret: '#FFFFFF',
+  selection: '#3b4252',
+  selectionMatch: '#e5e9f0',
+  gutterBackground: '#2e3440',
+  gutterForeground: '#4c566a',
+  gutterActiveForeground: '#d8dee9',
+  lineHighlight: '#4c566a',
+};
+
+// Colors from https://www.nordtheme.com/docs/colors-and-palettes
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#2e3440',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#00000073',
+    selectionMatch: '#00000073',
+    gutterBackground: '#2e3440',
+    gutterForeground: '#4c566a',
+    gutterActiveForeground: '#d8dee9',
+    lineHighlight: '#4c566a29',
+  },
+  styles: [
+    { tag: t.keyword, color: '#5e81ac' },
+    { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#88c0d0' },
+    { tag: [t.variableName], color: '#8fbcbb' },
+    { tag: [t.function(t.variableName)], color: '#8fbcbb' },
+    { tag: [t.labelName], color: '#81a1c1' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#5e81ac' },
+    { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
+    { tag: [t.brace], color: '#8fbcbb' },
+    { tag: [t.annotation], color: '#d30102' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b48ead' },
+    { tag: [t.typeName, t.className], color: '#ebcb8b' },
+    { tag: [t.operator, t.operatorKeyword], color: '#a3be8c' },
+    { tag: [t.tagName], color: '#b48ead' },
+    { tag: [t.squareBracket], color: '#bf616a' },
+    { tag: [t.angleBracket], color: '#d08770' },
+    { tag: [t.attributeName], color: '#ebcb8b' },
+    { tag: [t.regexp], color: '#5e81ac' },
+    { tag: [t.quote], color: '#b48ead' },
+    { tag: [t.string], color: '#a3be8c' },
+    {
+      tag: t.link,
+      color: '#a3be8c',
+      textDecoration: 'underline',
+      textUnderlinePosition: 'under',
+    },
+    { tag: [t.url, t.escape, t.special(t.string)], color: '#8fbcbb' },
+    { tag: [t.meta], color: '#88c0d0' },
+    { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' },
+    { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' },
+    { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
+    { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
+    { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
+    { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
+    {
+      tag: [t.heading2, t.heading3, t.heading4],
+      fontWeight: 'bold',
+      color: '#5e81ac',
+    },
+    { tag: [t.heading5, t.heading6], color: '#5e81ac' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
+    { tag: [t.processingInstruction, t.inserted], color: '#8fbcbb' },
+    { tag: [t.contentSeparator], color: '#ebcb8b' },
+    { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` },
+  ],
+});

packages/codemirror/themes/solarizedDark.mjs

@@ -0,0 +1,79 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#002b36',
+  lineBackground: '#002b3699',
+  foreground: '#93a1a1',
+  caret: '#839496',
+  selection: '#173541',
+  selectionMatch: '#aafe661a',
+  gutterBackground: '#00252f',
+  gutterForeground: '#839496',
+  lineHighlight: '#173541',
+};
+
+const c = {
+  background: '#002B36',
+  foreground: '#839496',
+  selection: '#004454AA',
+  selectionMatch: '#005A6FAA',
+  cursor: '#D30102',
+  dropdownBackground: '#00212B',
+  dropdownBorder: '#2AA19899',
+  activeLine: '#00cafe11',
+  matchingBracket: '#073642',
+  keyword: '#859900',
+  storage: '#93A1A1',
+  variable: '#268BD2',
+  parameter: '#268BD2',
+  function: '#268BD2',
+  string: '#2AA198',
+  constant: '#CB4B16',
+  type: '#859900',
+  class: '#268BD2',
+  number: '#D33682',
+  comment: '#586E75',
+  heading: '#268BD2',
+  invalid: '#DC322F',
+  regexp: '#DC322F',
+  tag: '#268BD2',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: c.background,
+    foreground: c.foreground,
+    caret: c.cursor,
+    selection: c.selection,
+    selectionMatch: c.selection,
+    gutterBackground: c.background,
+    gutterForeground: c.foreground,
+    gutterBorder: 'transparent',
+    lineHighlight: c.activeLine,
+  },
+  styles: [
+    { tag: t.keyword, color: c.keyword },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+    { tag: [t.propertyName], color: c.function },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+    { tag: [t.function(t.variableName), t.labelName], color: c.function },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+    { tag: [t.definition(t.name), t.separator], color: c.variable },
+    { tag: [t.className], color: c.class },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+    { tag: [t.typeName], color: c.type, fontStyle: c.type },
+    { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+    { tag: [t.meta, t.comment], color: c.comment },
+    { tag: t.tagName, color: c.tag },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: c.heading },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+    { tag: t.invalid, color: c.invalid },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/solarizedLight.mjs

@@ -0,0 +1,82 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+// this is slightly different from https://thememirror.net/solarized-light
+
+export const settings = {
+  light: true,
+  background: '#fdf6e3',
+  lineBackground: '#fdf6e399',
+  foreground: '#657b83',
+  caret: '#586e75',
+  selection: '#dfd9c8',
+  selectionMatch: '#dfd9c8',
+  gutterBackground: '#00000010',
+  gutterForeground: '#657b83',
+  lineHighlight: '#dfd9c8',
+};
+
+const c = {
+  background: '#FDF6E3',
+  foreground: '#657B83',
+  selection: '#EEE8D5',
+  selectionMatch: '#EEE8D5',
+  cursor: '#657B83',
+  dropdownBackground: '#EEE8D5',
+  dropdownBorder: '#D3AF86',
+  activeLine: '#3d392d11',
+  matchingBracket: '#EEE8D5',
+  keyword: '#859900',
+  storage: '#586E75',
+  variable: '#268BD2',
+  parameter: '#268BD2',
+  function: '#268BD2',
+  string: '#2AA198',
+  constant: '#CB4B16',
+  type: '#859900',
+  class: '#268BD2',
+  number: '#D33682',
+  comment: '#93A1A1',
+  heading: '#268BD2',
+  invalid: '#DC322F',
+  regexp: '#DC322F',
+  tag: '#268BD2',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: c.background,
+    foreground: c.foreground,
+    caret: c.cursor,
+    selection: c.selection,
+    selectionMatch: c.selectionMatch,
+    gutterBackground: c.background,
+    gutterForeground: c.foreground,
+    gutterBorder: 'transparent',
+    lineHighlight: c.activeLine,
+  },
+  styles: [
+    { tag: t.keyword, color: c.keyword },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+    { tag: [t.propertyName], color: c.function },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+    { tag: [t.function(t.variableName), t.labelName], color: c.function },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+    { tag: [t.definition(t.name), t.separator], color: c.variable },
+    { tag: [t.className], color: c.class },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+    { tag: [t.typeName], color: c.type, fontStyle: c.type },
+    { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+    { tag: [t.meta, t.comment], color: c.comment },
+    { tag: t.tagName, color: c.tag },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: c.heading },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+    { tag: t.invalid, color: c.invalid },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/strudel-theme.mjs

@@ -1,19 +1,24 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#222',
+  lineBackground: '#22222299',
+  foreground: '#fff',
+  // foreground: '#75baff',
+  caret: '#ffcc00',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#036dd626',
+  // lineHighlight: '#8a91991a', // original
+  lineHighlight: '#00000050',
+  gutterBackground: 'transparent',
+  // gutterForeground: '#8a919966',
+  gutterForeground: '#8a919966',
+};
+
 export default createTheme({
   theme: 'dark',
-  settings: {
-    background: '#222',
-    foreground: '#75baff', // whats that?
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
+  settings,
   styles: [
     { tag: t.labelName, color: '#89ddff' },
     { tag: t.keyword, color: '#c792ea' },

packages/codemirror/themes/sublime.mjs

@@ -0,0 +1,43 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#303841',
+  lineBackground: '#30384199',
+  foreground: '#FFFFFF',
+  caret: '#FBAC52',
+  selection: '#4C5964',
+  selectionMatch: '#3A546E',
+  gutterBackground: '#303841',
+  gutterForeground: '#FFFFFF70',
+  lineHighlight: '#00000059',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#303841',
+    foreground: '#FFFFFF',
+    caret: '#FBAC52',
+    selection: '#4C5964',
+    selectionMatch: '#3A546E',
+    gutterBackground: '#303841',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  styles: [
+    { tag: t.labelName, color: '#A2A9B5' },
+    { tag: [t.meta, t.comment], color: '#A2A9B5' },
+    { tag: [t.attributeName, t.keyword], color: '#B78FBA' },
+    { tag: t.function(t.variableName), color: '#5AB0B0' },
+    { tag: [t.string, t.regexp, t.attributeValue], color: '#99C592' },
+    { tag: t.operator, color: '#f47954' },
+    // { tag: t.moduleKeyword, color: 'red' },
+    { tag: [t.tagName, t.modifier], color: '#E35F63' },
+    { tag: [t.number, t.definition(t.tagName), t.className, t.definition(t.variableName)], color: '#fbac52' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#E35F63' },
+    { tag: t.variableName, color: '#539ac4' },
+    { tag: [t.propertyName, t.typeName], color: '#629ccd' },
+    { tag: t.propertyName, color: '#36b7b5' },
+  ],
+});

packages/codemirror/themes/teletext.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 
 let colorA = '#6edee4';
 //let colorB = 'magenta';
@@ -17,7 +17,7 @@ export const settings = {
   lineBackground: '#00000040',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
-  customStyle: '.cm-line { line-height: 1 }',
+  // customStyle: '.cm-line { line-height: 1 }',
 };
 
 let punctuation = colorD;

packages/codemirror/themes/terminal.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: '#41FF00', // whats that?
@@ -14,24 +14,24 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: '#41FF00' },
-    { tag: t.keyword, color: '#41FF00' },
-    { tag: t.operator, color: '#41FF00' },
-    { tag: t.special(t.variableName), color: '#41FF00' },
-    { tag: t.typeName, color: '#41FF00' },
-    { tag: t.atom, color: '#41FF00' },
-    { tag: t.number, color: '#41FF00' },
-    { tag: t.definition(t.variableName), color: '#41FF00' },
-    { tag: t.string, color: '#41FF00' },
-    { tag: t.special(t.string), color: '#41FF00' },
-    { tag: t.comment, color: '#41FF00' },
-    { tag: t.variableName, color: '#41FF00' },
-    { tag: t.tagName, color: '#41FF00' },
-    { tag: t.bracket, color: '#41FF00' },
-    { tag: t.meta, color: '#41FF00' },
-    { tag: t.attributeName, color: '#41FF00' },
-    { tag: t.propertyName, color: '#41FF00' },
-    { tag: t.className, color: '#41FF00' },
-    { tag: t.invalid, color: '#41FF00' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
   ],
 });

packages/codemirror/themes/theme-helper.mjs

@@ -0,0 +1,42 @@
+import { EditorView } from '@codemirror/view';
+import { syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle } from '@codemirror/language';
+
+export const createTheme = ({ theme, settings, styles }) => {
+  const _theme = EditorView.theme(
+    {
+      '&': {
+        color: settings.foreground,
+        backgroundColor: settings.background,
+      },
+      '.cm-gutters': {
+        backgroundColor: settings.gutterBackground,
+        color: settings.gutterForeground,
+        //borderRightColor: settings.gutterBorder
+      },
+      '.cm-content': {
+        caretColor: settings.caret,
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: settings.caret,
+      },
+      '.cm-activeLineGutter': {
+        // color: settings.gutterActiveForeground
+        backgroundColor: settings.lineHighlight,
+      },
+      '.cm-activeLine': {
+        backgroundColor: settings.lineHighlight,
+      },
+      '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':
+        {
+          background: settings.selection + ' !important',
+        },
+      '& .cm-selectionMatch': {
+        backgroundColor: settings.selectionMatch,
+      },
+    },
+    { dark: theme === 'dark' },
+  );
+  const highlightStyle = HighlightStyle.define(styles);
+  return [_theme, syntaxHighlighting(highlightStyle)];
+};

packages/codemirror/themes/tokioNightStorm.mjs

@@ -0,0 +1,52 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#24283b',
+  lineBackground: '#24283b99',
+  foreground: '#7982a9',
+  caret: '#c0caf5',
+  selection: '#6f7bb630',
+  selectionMatch: '#1f2335',
+  gutterBackground: '#24283b',
+  gutterForeground: '#7982a9',
+  gutterBorder: 'transparent',
+  lineHighlight: '#292e42',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#24283b',
+    foreground: '#7982a9',
+    caret: '#c0caf5',
+    selection: '#6f7bb630',
+    selectionMatch: '#343b5f',
+    gutterBackground: '#24283b',
+    gutterForeground: '#7982a9',
+    gutterBorder: 'transparent',
+    lineHighlight: '#292e427a',
+  },
+  styles: [
+    { tag: t.keyword, color: '#bb9af7' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' },
+    { tag: [t.propertyName], color: '#7aa2f7' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' },
+    { tag: [t.definition(t.name), t.separator], color: '#c0caf5' },
+    { tag: [t.className], color: '#c0caf5' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' },
+    { tag: [t.typeName], color: '#2ac3de', fontStyle: '#2ac3de' },
+    { tag: [t.operator, t.operatorKeyword], color: '#bb9af7' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' },
+    { tag: [t.meta, t.comment], color: '#565f89' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#89ddff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' },
+    { tag: t.invalid, color: '#ff5370' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/tokyoNight.mjs

@@ -0,0 +1,52 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#1a1b26',
+  lineBackground: '#1a1b2699',
+  foreground: '#787c99',
+  caret: '#c0caf5',
+  selection: '#515c7e40',
+  selectionMatch: '#16161e',
+  gutterBackground: '#1a1b26',
+  gutterForeground: '#787c99',
+  gutterBorder: 'transparent',
+  lineHighlight: '#1e202e',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#1a1b26',
+    foreground: '#787c99',
+    caret: '#c0caf5',
+    selection: '#515c7e40',
+    selectionMatch: '#16161e',
+    gutterBackground: '#1a1b26',
+    gutterForeground: '#787c99',
+    gutterBorder: 'transparent',
+    lineHighlight: '#474b6611',
+  },
+  styles: [
+    { tag: t.keyword, color: '#bb9af7' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' },
+    { tag: [t.propertyName], color: '#7aa2f7' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' },
+    { tag: [t.definition(t.name), t.separator], color: '#c0caf5' },
+    { tag: [t.className], color: '#c0caf5' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' },
+    { tag: [t.typeName], color: '#0db9d7' },
+    { tag: [t.operator, t.operatorKeyword], color: '#bb9af7' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' },
+    { tag: [t.meta, t.comment], color: '#444b6a' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#89ddff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' },
+    { tag: t.invalid, color: '#ff5370' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/tokyoNightDay.mjs

@@ -0,0 +1,53 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#e1e2e7',
+  lineBackground: '#e1e2e799',
+  foreground: '#3760bf',
+  caret: '#3760bf',
+  selection: '#99a7df',
+  selectionMatch: '#99a7df',
+  gutterBackground: '#e1e2e7',
+  gutterForeground: '#3760bf',
+  gutterBorder: 'transparent',
+  lineHighlight: '#5f5faf11',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#e1e2e7',
+    foreground: '#3760bf',
+    caret: '#3760bf',
+    selection: '#99a7df',
+    selectionMatch: '#99a7df',
+    gutterBackground: '#e1e2e7',
+    gutterForeground: '#3760bf',
+    gutterBorder: 'transparent',
+    lineHighlight: '#5f5faf11',
+  },
+  styles: [
+    { tag: t.keyword, color: '#007197' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' },
+    { tag: [t.propertyName], color: '#3760bf' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#3760bf' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' },
+    { tag: [t.definition(t.name), t.separator], color: '#3760bf' },
+    { tag: [t.className], color: '#3760bf' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' },
+    { tag: [t.typeName], color: '#007197', fontStyle: '#007197' },
+    { tag: [t.operator, t.operatorKeyword], color: '#007197' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' },
+    { tag: [t.meta, t.comment], color: '#848cb5' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#b15c00' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' },
+    { tag: t.invalid, color: '#f52a65' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});

packages/codemirror/themes/vscodeDark.mjs

@@ -0,0 +1,80 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#1e1e1e',
+  lineBackground: '#1e1e1e99',
+  foreground: '#fff',
+  caret: '#c6c6c6',
+  selection: '#6199ff2f',
+  selectionMatch: '#72a1ff59',
+  lineHighlight: '#ffffff0f',
+  gutterBackground: '#1e1e1e',
+  gutterForeground: '#838383',
+  gutterActiveForeground: '#fff',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#1e1e1e',
+    foreground: '#fff',
+    caret: '#c6c6c6',
+    selection: '#6199ff2f',
+    selectionMatch: '#72a1ff59',
+    lineHighlight: '#ffffff0f',
+    gutterBackground: '#1e1e1e',
+    gutterForeground: '#838383',
+    gutterActiveForeground: '#fff',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+  },
+  styles: [
+    {
+      tag: [
+        t.keyword,
+        t.operatorKeyword,
+        t.modifier,
+        t.color,
+        t.constant(t.name),
+        t.standard(t.name),
+        t.standard(t.tagName),
+        t.special(t.brace),
+        t.atom,
+        t.bool,
+        t.special(t.variableName),
+      ],
+      color: '#569cd6',
+    },
+    { tag: [t.controlKeyword, t.moduleKeyword], color: '#c586c0' },
+    {
+      tag: [
+        t.name,
+        t.deleted,
+        t.character,
+        t.macroName,
+        t.propertyName,
+        t.variableName,
+        t.labelName,
+        t.definition(t.name),
+      ],
+      color: '#9cdcfe',
+    },
+    { tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' },
+    {
+      tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
+      color: '#4ec9b0',
+    },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#dcdcaa' },
+    { tag: [t.number], color: '#b5cea8' },
+    { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], color: '#d4d4d4' },
+    { tag: [t.regexp], color: '#d16969' },
+    { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: '#ce9178' },
+    { tag: [t.angleBracket], color: '#808080' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: [t.meta, t.comment], color: '#6a9955' },
+    { tag: t.link, color: '#6a9955', textDecoration: 'underline' },
+    { tag: t.invalid, color: '#ff0000' },
+  ],
+});

packages/codemirror/themes/vscodeLight.mjs

@@ -0,0 +1,81 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#ffffff',
+  lineBackground: '#ffffff50',
+  foreground: '#383a42',
+  caret: '#000',
+  selection: '#add6ff',
+  selectionMatch: '#a8ac94',
+  lineHighlight: '#99999926',
+  gutterBackground: '#fff',
+  gutterForeground: '#237893',
+  gutterActiveForeground: '#0b216f',
+  fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#ffffff',
+    foreground: '#383a42',
+    caret: '#000',
+    selection: '#add6ff',
+    selectionMatch: '#a8ac94',
+    lineHighlight: '#99999926',
+    gutterBackground: '#fff',
+    gutterForeground: '#237893',
+    gutterActiveForeground: '#0b216f',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+  },
+  styles: [
+    {
+      tag: [
+        t.keyword,
+        t.operatorKeyword,
+        t.modifier,
+        t.color,
+        t.constant(t.name),
+        t.standard(t.name),
+        t.standard(t.tagName),
+        t.special(t.brace),
+        t.atom,
+        t.bool,
+        t.special(t.variableName),
+      ],
+      color: '#0000ff',
+    },
+    { tag: [t.moduleKeyword, t.controlKeyword], color: '#af00db' },
+    {
+      tag: [
+        t.name,
+        t.deleted,
+        t.character,
+        t.macroName,
+        t.propertyName,
+        t.variableName,
+        t.labelName,
+        t.definition(t.name),
+      ],
+      color: '#0070c1',
+    },
+    { tag: t.heading, fontWeight: 'bold', color: '#0070c1' },
+    {
+      tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
+      color: '#267f99',
+    },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#795e26' },
+    { tag: [t.number], color: '#098658' },
+    { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], color: '#383a42' },
+    { tag: [t.regexp], color: '#af00db' },
+    { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: '#a31515' },
+    { tag: [t.angleBracket], color: '#383a42' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: [t.meta, t.comment], color: '#008000' },
+    { tag: t.link, color: '#4078f2', textDecoration: 'underline' },
+    { tag: t.invalid, color: '#e45649' },
+  ],
+});

packages/codemirror/themes/whitescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'white',
   foreground: 'black', // whats that?
@@ -16,24 +16,24 @@ export default createTheme({
   theme: 'light',
   settings,
   styles: [
-    { tag: t.labelName, color: 'black' },
-    { tag: t.keyword, color: 'black' },
-    { tag: t.operator, color: 'black' },
-    { tag: t.special(t.variableName), color: 'black' },
-    { tag: t.typeName, color: 'black' },
-    { tag: t.atom, color: 'black' },
-    { tag: t.number, color: 'black' },
-    { tag: t.definition(t.variableName), color: 'black' },
-    { tag: t.string, color: 'black' },
-    { tag: t.special(t.string), color: 'black' },
-    { tag: t.comment, color: 'black' },
-    { tag: t.variableName, color: 'black' },
-    { tag: t.tagName, color: 'black' },
-    { tag: t.bracket, color: 'black' },
-    { tag: t.meta, color: 'black' },
-    { tag: t.attributeName, color: 'black' },
-    { tag: t.propertyName, color: 'black' },
-    { tag: t.className, color: 'black' },
-    { tag: t.invalid, color: 'black' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
   ],
 });

packages/codemirror/themes/xcodeDark.mjs

@@ -0,0 +1,34 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#292A30',
+  lineBackground: '#292A3099',
+  foreground: '#CECFD0',
+  caret: '#fff',
+  selection: '#727377',
+  selectionMatch: '#727377',
+  lineHighlight: '#2F3239',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#292A30',
+    foreground: '#CECFD0',
+    caret: '#fff',
+    selection: '#727377',
+    selectionMatch: '#727377',
+    lineHighlight: '#ffffff0f',
+  },
+  styles: [
+    { tag: [t.comment, t.quote], color: '#7F8C98' },
+    { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
+    { tag: [t.string, t.meta], color: '#FF8170' },
+    { tag: [t.typeName], color: '#DABAFF' },
+    { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
+    { tag: [t.name], color: '#6BAA9F' },
+    { tag: [t.variableName], color: '#ACF2E4' },
+    { tag: [t.regexp, t.link], color: '#FF8170' },
+  ],
+});

packages/codemirror/themes/xcodeLight.mjs

@@ -0,0 +1,38 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  light: true,
+  background: '#fff',
+  lineBackground: '#ffffff99',
+  foreground: '#3D3D3D',
+  selection: '#BBDFFF',
+  selectionMatch: '#BBDFFF',
+  gutterBackground: '#fff',
+  gutterForeground: '#AFAFAF',
+  lineHighlight: '#EDF4FF',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#fff',
+    foreground: '#3D3D3D',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#AFAFAF',
+    lineHighlight: '#d5e6ff69',
+  },
+  styles: [
+    { tag: [t.comment, t.quote], color: '#707F8D' },
+    { tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
+    { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' },
+    { tag: [t.string, t.meta], color: '#D23423' },
+    { tag: [t.name], color: '#032f62' },
+    { tag: [t.typeName], color: '#522BB2' },
+    { tag: [t.variableName], color: '#23575C' },
+    { tag: [t.definition(t.variableName)], color: '#327A9E' },
+    { tag: [t.regexp, t.link], color: '#0e0eff' },
+  ],
+});

packages/codemirror/widget.mjs

@@ -133,3 +133,10 @@ registerWidget('_pitchwheel', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
   return pat.pitchwheel({ ...options, ctx, id });
 });
+
+registerWidget('_spectrum', (id, options = {}, pat) => {
+  let _size = options.size || 200;
+  options = { width: _size, height: _size, ...options, size: _size / 5 };
+  const ctx = getCanvasWidget(id, options).getContext('2d');
+  return pat.spectrum({ ...options, ctx, id });
+});

packages/core/bench/pattern.bench.mjs

@@ -0,0 +1,46 @@
+import { describe, bench } from 'vitest';
+
+import { calculateTactus, sequence, stack } from '../index.mjs';
+
+const pat64 = sequence(...Array(64).keys());
+
+describe('steps', () => {
+  calculateTactus(true);
+  bench(
+    '+tactus',
+    () => {
+      pat64.iter(64).fast(64).firstCycle();
+    },
+    { time: 1000 },
+  );
+
+  calculateTactus(false);
+  bench(
+    '-tactus',
+    () => {
+      pat64.iter(64).fast(64).firstCycle();
+    },
+    { time: 1000 },
+  );
+});
+
+describe('stack', () => {
+  calculateTactus(true);
+  bench(
+    '+tactus',
+    () => {
+      stack(pat64, pat64, pat64, pat64, pat64, pat64, pat64, pat64).fast(64).firstCycle();
+    },
+    { time: 1000 },
+  );
+
+  calculateTactus(false);
+  bench(
+    '-tactus',
+    () => {
+      stack(pat64, pat64, pat64, pat64, pat64, pat64, pat64, pat64).fast(64).firstCycle();
+    },
+    { time: 1000 },
+  );
+});
+calculateTactus(true);

packages/core/clockworker.js

@@ -4,9 +4,9 @@
 // import createClock from './zyklus.mjs';
 
 function getTime() {
-  const precision = 10 ** 4;
-  const seconds = performance.now() / 1000;
-  return Math.round(seconds * precision) / precision;
+  const seconds = performance.now() * 0.001;
+  return seconds;
+  // return Math.round(seconds * precision) / precision;
 }
 
 let num_cycles_at_cps_change = 0;
@@ -24,27 +24,20 @@ const sendMessage = (type, payload) => {
 
 const sendTick = (phase, duration, tick, time) => {
   const num_seconds_since_cps_change = num_ticks_since_cps_change * duration;
-
   const tickdeadline = phase - time;
   const lastTick = time + tickdeadline;
   const num_cycles_since_cps_change = num_seconds_since_cps_change * cps;
-
   const begin = num_cycles_at_cps_change + num_cycles_since_cps_change;
   const secondsSinceLastTick = time - lastTick - duration;
-
   const eventLength = duration * cps;
   const end = begin + eventLength;
-
   const cycle = begin + secondsSinceLastTick * cps;
 
   sendMessage('tick', {
     begin,
     end,
     cps,
-    tickdeadline,
-    num_cycles_at_cps_change,
-    num_seconds_at_cps_change,
-    num_seconds_since_cps_change,
+    time,
     cycle,
   });
   num_ticks_since_cps_change++;

packages/core/controls.mjs

@@ -47,12 +47,16 @@ export function createParam(names) {
   return func;
 }
 
-function registerControl(names, ...aliases) {
+// maps control alias names to the "main" control name
+const controlAlias = new Map();
+
+export function registerControl(names, ...aliases) {
   const name = Array.isArray(names) ? names[0] : names;
   let bag = {};
   bag[name] = createParam(names);
   aliases.forEach((alias) => {
     bag[alias] = bag[name];
+    controlAlias.set(alias, name);
     Pattern.prototype[alias] = Pattern.prototype[name];
   });
   return bag;
@@ -191,7 +195,7 @@ export const { attack, att } = registerControl('attack', 'att');
  * note("c e g b g e")
  * .fm(4)
  * .fmh("<1 2 1.5 1.61>")
- * .scope()
+ * ._scope()
  *
  */
 export const { fmh } = registerControl(['fmh', 'fmi'], 'fmh');
@@ -205,7 +209,7 @@ export const { fmh } = registerControl(['fmh', 'fmi'], 'fmh');
  * @example
  * note("c e g b g e")
  * .fm("<0 1 2 8 32>")
- * .scope()
+ * ._scope()
  *
  */
 export const { fmi, fm } = registerControl(['fmi', 'fmh'], 'fm');
@@ -221,7 +225,7 @@ export const { fmi, fm } = registerControl(['fmi', 'fmh'], 'fm');
  * .fmdecay(.2)
  * .fmsustain(0)
  * .fmenv("<exp lin>")
- * .scope()
+ * ._scope()
  *
  */
 export const { fmenv } = registerControl('fmenv');
@@ -234,7 +238,7 @@ export const { fmenv } = registerControl('fmenv');
  * note("c e g b g e")
  * .fm(4)
  * .fmattack("<0 .05 .1 .2>")
- * .scope()
+ * ._scope()
  *
  */
 export const { fmattack } = registerControl('fmattack');
@@ -248,7 +252,7 @@ export const { fmattack } = registerControl('fmattack');
  * .fm(4)
  * .fmdecay("<.01 .05 .1 .2>")
  * .fmsustain(.4)
- * .scope()
+ * ._scope()
  *
  */
 export const { fmdecay } = registerControl('fmdecay');
@@ -262,7 +266,7 @@ export const { fmdecay } = registerControl('fmdecay');
  * .fm(4)
  * .fmdecay(.1)
  * .fmsustain("<1 .75 .5 0>")
- * .scope()
+ * ._scope()
  *
  */
 export const { fmsustain } = registerControl('fmsustain');
@@ -392,7 +396,7 @@ export const { loop } = registerControl('loop');
  * @synonyms loopb
  * @example
  * s("space").loop(1)
- * .loopBegin("<0 .125 .25>").scope()
+ * .loopBegin("<0 .125 .25>")._scope()
  */
 export const { loopBegin, loopb } = registerControl('loopBegin', 'loopb');
 /**
@@ -405,7 +409,7 @@ export const { loopBegin, loopb } = registerControl('loopBegin', 'loopb');
  * @synonyms loope
  * @example
  * s("space").loop(1)
- * .loopEnd("<1 .75 .5 .25>").scope()
+ * .loopEnd("<1 .75 .5 .25>")._scope()
  */
 export const { loopEnd, loope } = registerControl('loopEnd', 'loope');
 /**
@@ -430,6 +434,17 @@ export const { crush } = registerControl('crush');
  */
 export const { coarse } = registerControl('coarse');
 
+/**
+ * filter overdrive for supported filter types
+ *
+ * @name drive
+ * @param {number | Pattern} amount
+ * @example
+ * note("{f g g c d a a#}%16".sub(17)).s("supersaw").lpenv(8).lpf(150).lpq(.8).ftype('ladder').drive("<.5 4>")
+ *
+ */
+export const { drive } = registerControl('drive');
+
 /**
  * Allows you to set the output channels on the interface
  *
@@ -443,9 +458,6 @@ export const { coarse } = registerControl('coarse');
  */
 export const { channels, ch } = registerControl('channels', 'ch');
 
-// superdirt only
-export const { phaserrate, phasr } = registerControl('phaserrate', 'phasr');
-
 /**
  * Phaser audio effect that approximates popular guitar pedals.
  *
@@ -457,7 +469,11 @@ export const { phaserrate, phasr } = registerControl('phaserrate', 'phasr');
  * .phaser("<1 2 4 8>")
  *
  */
-export const { phaser, ph } = registerControl(['phaser', 'phaserdepth', 'phasercenter', 'phasersweep'], 'ph');
+export const { phaserrate, ph, phaser } = registerControl(
+  ['phaserrate', 'phaserdepth', 'phasercenter', 'phasersweep'],
+  'ph',
+  'phaser',
+);
 
 /**
  * The frequency sweep range of the lfo for the phaser effect. Defaults to 2000
@@ -542,7 +558,7 @@ export const { cutoff, ctf, lpf, lp } = registerControl(['cutoff', 'resonance',
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(500)
+ * .lpf(300)
  * .lpa(.5)
  * .lpenv("<4 2 1 0 -1 -2 -4>/4")
  */
@@ -581,7 +597,7 @@ export const { bpenv, bpe } = registerControl('bpenv', 'bpe');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(500)
+ * .lpf(300)
  * .lpa("<.5 .25 .1 .01>/4")
  * .lpenv(4)
  */
@@ -620,9 +636,8 @@ export const { bpattack, bpa } = registerControl('bpattack', 'bpa');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(500)
+ * .lpf(300)
  * .lpd("<.5 .25 .1 0>/4")
- * .lps(0.2)
  * .lpenv(4)
  */
 export const { lpdecay, lpd } = registerControl('lpdecay', 'lpd');
@@ -662,7 +677,7 @@ export const { bpdecay, bpd } = registerControl('bpdecay', 'bpd');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(500)
+ * .lpf(300)
  * .lpd(.5)
  * .lps("<0 .25 .5 1>/4")
  * .lpenv(4)
@@ -705,7 +720,7 @@ export const { bpsustain, bps } = registerControl('bpsustain', 'bps');
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
  * .clip(.5)
- * .lpf(500)
+ * .lpf(300)
  * .lpenv(4)
  * .lpr("<.5 .25 .1 0>/4")
  * .release(.5)
@@ -742,17 +757,28 @@ export const { hprelease, hpr } = registerControl('hprelease', 'hpr');
  */
 export const { bprelease, bpr } = registerControl('bprelease', 'bpr');
 /**
- * Sets the filter type. The 24db filter is more aggressive. More types might be added in the future.
+ * Sets the filter type. The ladder filter is more aggressive. More types might be added in the future.
  * @name ftype
- * @param {number | Pattern} type 12db (default) or 24db
+ * @param {number | Pattern} type 12db (0), ladder (1), or 24db (2)
  * @example
- * note("c2 e2 f2 g2")
+ * note("{f g g c d a a#}%8").s("sawtooth").lpenv(4).lpf(500).ftype("<0 1 2>").lpq(1)
+ * @example
+ * note("c f g g a c d4").fast(2)
  * .sound('sawtooth')
- * .lpf(500)
- * .bpenv(4)
- * .ftype("12db 24db")
+ * .lpf(200).fanchor(0)
+ * .lpenv(3).lpq(1)
+ * .ftype("<ladder 12db 24db>")
  */
 export const { ftype } = registerControl('ftype');
+
+/**
+ * controls the center of the filter envelope. 0 is unipolar positive, .5 is bipolar, 1 is unipolar negative
+ * @name fanchor
+ * @param {number | Pattern} center 0 to 1
+ * @example
+ * note("{f g g c d a a#}%8").s("sawtooth").lpf("{1000}%2")
+ * .lpenv(8).fanchor("<0 .5 1>")
+ */
 export const { fanchor } = registerControl('fanchor');
 /**
  * Applies the cutoff frequency of the **h**igh-**p**ass **f**ilter.
@@ -779,10 +805,12 @@ export const { fanchor } = registerControl('fanchor');
  * @example
  * note("a e")
  * .vib("<.5 1 2 4 8 16>")
+ * ._scope()
  * @example
  * // change the modulation depth with ":"
  * note("a e")
  * .vib("<.5 1 2 4 8 16>:12")
+ * ._scope()
  */
 export const { vib, vibrato, v } = registerControl(['vib', 'vibmod'], 'vibrato', 'v');
 /**
@@ -803,10 +831,12 @@ export const { noise } = registerControl('noise');
  * @example
  * note("a e").vib(4)
  * .vibmod("<.25 .5 1 2 12>")
+ * ._scope()
  * @example
  * // change the vibrato frequency with ":"
  * note("a e")
  * .vibmod("<.25 .5 1 2 12>:8")
+ * ._scope()
  */
 export const { vibmod, vmod } = registerControl(['vibmod', 'vib'], 'vmod');
 export const { hcutoff, hpf, hp } = registerControl(['hcutoff', 'hresonance', 'hpenv'], 'hpf', 'hp');
@@ -1358,6 +1388,17 @@ export const { compressorRelease } = registerControl('compressorRelease');
  *
  */
 export const { speed } = registerControl('speed');
+
+/**
+ * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
+ *
+ * @name stretch
+ * @param {number | Pattern} factor -inf to inf, negative numbers play the sample backwards.
+ * @example
+ * s("gm_flute").stretch("1 2 .5")
+ *
+ */
+export const { stretch } = registerControl('stretch');
 /**
  * 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`.
  *
@@ -1368,6 +1409,7 @@ export const { speed } = registerControl('speed');
  * @superdirtOnly
  *
  */
+
 export const { unit } = registerControl('unit');
 /**
  * Made by Calum Gunn. Reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter. The SuperCollider manual defines Squiz as:
@@ -1472,6 +1514,8 @@ export const { binshift } = registerControl('binshift');
 export const { hbrick } = registerControl('hbrick');
 export const { lbrick } = registerControl('lbrick');
 export const { midichan } = registerControl('midichan');
+export const { midimap } = registerControl('midimap');
+export const { midiport } = registerControl('midiport');
 export const { control } = registerControl('control');
 export const { ccn } = registerControl('ccn');
 export const { ccv } = registerControl('ccv');
@@ -1576,3 +1620,26 @@ export const ar = register('ar', (t, pat) => {
   const [attack, release = attack] = t;
   return pat.set({ attack, release });
 });
+
+export const getControlName = (alias) => {
+  if (controlAlias.has(alias)) {
+    return controlAlias.get(alias);
+  }
+  return alias;
+};
+
+/**
+ * Sets properties in a batch.
+ *
+ * @name as
+ * @param {Array} mapping the control names that are set
+ * @example
+ * "c:.5 a:1 f:.25 e:.8".as("note:clip")
+ */
+export const as = register('as', (mapping, pat) => {
+  return pat.fmap((v) => {
+    v = Array.isArray(v) ? v : [v];
+    v = Object.fromEntries(mapping.map((prop, i) => [getControlName(prop), v[i]]));
+    return v;
+  });
+});

packages/core/cyclist.mjs

@@ -8,8 +8,19 @@ import createClock from './zyklus.mjs';
 import { logger } from './logger.mjs';
 
 export class Cyclist {
-  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1, setInterval, clearInterval }) {
+  constructor({
+    interval,
+    onTrigger,
+    onToggle,
+    onError,
+    getTime,
+    latency = 0.1,
+    setInterval,
+    clearInterval,
+    beforeStart,
+  }) {
     this.started = false;
+    this.beforeStart = beforeStart;
     this.cps = 0.5;
     this.num_ticks_since_cps_change = 0;
     this.lastTick = 0; // absolute time when last tick (clock callback) happened
@@ -57,6 +68,10 @@ export class Cyclist {
               // see https://github.com/tidalcycles/strudel/pull/1004
               const deadline = targetTime - phase;
               onTrigger?.(hap, deadline, duration, this.cps, targetTime);
+              if (hap.value.cps !== undefined && this.cps != hap.value.cps) {
+                this.cps = hap.value.cps;
+                this.num_ticks_since_cps_change = 0;
+              }
             }
           });
         } catch (e) {
@@ -82,7 +97,8 @@ export class Cyclist {
     this.started = v;
     this.onToggle?.(v);
   }
-  start() {
+  async start() {
+    await this.beforeStart?.();
     this.num_ticks_since_cps_change = 0;
     this.num_cycles_at_cps_change = 0;
     if (!this.pattern) {
@@ -103,10 +119,10 @@ export class Cyclist {
     this.lastEnd = 0;
     this.setStarted(false);
   }
-  setPattern(pat, autostart = false) {
+  async setPattern(pat, autostart = false) {
     this.pattern = pat;
     if (autostart && !this.started) {
-      this.start();
+      await this.start();
     }
   }
   setCps(cps = 0.5) {

packages/core/evaluate.mjs

@@ -4,8 +4,6 @@ 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 { isPattern } from './index.mjs';
-
 export const evalScope = async (...args) => {
   const results = await Promise.allSettled(args);
   const modules = results.filter((result) => result.status === 'fulfilled').map((r) => r.value);
@@ -37,11 +35,12 @@ function safeEval(str, options = {}) {
   return Function(body)();
 }
 
-export const evaluate = async (code, transpiler) => {
+export const evaluate = async (code, transpiler, transpilerOptions) => {
   let meta = {};
+
   if (transpiler) {
     // transform syntactically correct js code to semantically usable code
-    const transpiled = transpiler(code);
+    const transpiled = transpiler(code, transpilerOptions);
     code = transpiled.output;
     meta = transpiled;
   }

packages/core/fraction.mjs

@@ -119,10 +119,10 @@ export const lcm = (...fractions) => {
   if (fractions.length === 0) {
     return undefined;
   }
-
+  const x = fractions.pop();
   return fractions.reduce(
     (lcm, fraction) => (lcm === undefined || fraction === undefined ? undefined : lcm.lcm(fraction)),
-    fraction(1),
+    x,
   );
 };
 

packages/core/index.mjs

@@ -14,6 +14,7 @@ export * from './controls.mjs';
 export * from './hap.mjs';
 export * from './pattern.mjs';
 export * from './signal.mjs';
+export * from './pick.mjs';
 export * from './state.mjs';
 export * from './timespan.mjs';
 export * from './util.mjs';

packages/core/neocyclist.mjs

@@ -5,6 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { logger } from './logger.mjs';
+import { ClockCollator, cycleToSeconds } from './util.mjs';
 
 export class NeoCyclist {
   constructor({ onTrigger, onToggle, getTime }) {
@@ -13,79 +14,38 @@ export class NeoCyclist {
     this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.getTime = getTime; // get absolute time
     this.time_at_last_tick_message = 0;
-
-    this.num_cycles_at_cps_change = 0;
+    // the clock of the worker and the audio context clock can drift apart over time
+    // aditionally, the message time of the worker pinging the callback to process haps can be inconsistent.
+    // we need to keep a rolling average of the time difference between the worker clock and audio context clock
+    // in order to schedule events consistently.
+    this.collator = new ClockCollator({ getTargetClockTime: getTime });
     this.onToggle = onToggle;
     this.latency = 0.1; // fixed trigger time offset
     this.cycle = 0;
     this.id = Math.round(Date.now() * Math.random());
-    this.worker_time_dif;
     this.worker = new SharedWorker(new URL('./clockworker.js', import.meta.url));
     this.worker.port.start();
-
     this.channel = new BroadcastChannel('strudeltick');
-    let weight = 0; // the amount of weight that is applied to the current average when averaging a new time dif
-    const maxWeight = 20;
-    const precision = 10 ** 3; //round off time diff to prevent accumulating outliers
-
-    // the clock of the worker and the audio context clock can drift apart over time
-    // aditionally, the message time of the worker pinging the callback to process haps can be inconsistent.
-    // we need to keep a rolling weighted average of the time difference between the worker clock and audio context clock
-    // in order to schedule events consistently.
-    const setTimeReference = (num_seconds_at_cps_change, num_seconds_since_cps_change, tickdeadline) => {
-      const time_dif = getTime() - (num_seconds_at_cps_change + num_seconds_since_cps_change) + tickdeadline;
-      if (this.worker_time_dif == null) {
-        this.worker_time_dif = time_dif;
-      } else {
-        const w = 1; //weight of new time diff;
-        const new_dif =
-          Math.round(((this.worker_time_dif * weight + time_dif * w) / (weight + w)) * precision) / precision;
-
-        if (new_dif != this.worker_time_dif) {
-          // reset the weight so the clock recovers faster from an audio context freeze/dropout if it happens
-          weight = 4;
-        }
-        this.worker_time_dif = new_dif;
-      }
-      weight = Math.min(weight + 1, maxWeight);
-    };
-
     const tickCallback = (payload) => {
-      const {
-        num_cycles_at_cps_change,
-        cps,
-        num_seconds_at_cps_change,
-        num_seconds_since_cps_change,
-        begin,
-        end,
-        tickdeadline,
-        cycle,
-      } = payload;
+      const { cps, begin, end, cycle, time } = payload;
       this.cps = cps;
       this.cycle = cycle;
-
-      setTimeReference(num_seconds_at_cps_change, num_seconds_since_cps_change, tickdeadline);
-
-      processHaps(begin, end, num_cycles_at_cps_change, num_seconds_at_cps_change);
-
-      this.time_at_last_tick_message = this.getTime();
+      const currentTime = this.collator.calculateOffset(time) + time;
+      processHaps(begin, end, currentTime);
+      this.time_at_last_tick_message = currentTime;
     };
 
-    const processHaps = (begin, end, num_cycles_at_cps_change, seconds_at_cps_change) => {
+    const processHaps = (begin, end, currentTime) => {
       if (this.started === false) {
         return;
       }
 
       const haps = this.pattern.queryArc(begin, end, { _cps: this.cps });
-
       haps.forEach((hap) => {
         if (hap.hasOnset()) {
-          const targetTime =
-            (hap.whole.begin - num_cycles_at_cps_change) / this.cps +
-            seconds_at_cps_change +
-            this.latency +
-            this.worker_time_dif;
-          const duration = hap.duration / this.cps;
+          const timeUntilTrigger = cycleToSeconds(hap.whole.begin - this.cycle, this.cps);
+          const targetTime = timeUntilTrigger + currentTime + this.latency;
+          const duration = cycleToSeconds(hap.duration, this.cps);
           onTrigger?.(hap, 0, duration, this.cps, targetTime);
         }
       });
@@ -129,8 +89,8 @@ export class NeoCyclist {
     this.setStarted(true);
   }
   stop() {
-    this.worker_time_dif = null;
     logger('[cyclist] stop');
+    this.collator.reset();
     this.setStarted(false);
   }
   setPattern(pat, autostart = false) {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/core",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",
@@ -9,6 +9,7 @@
   },
   "scripts": {
     "test": "vitest run",
+    "bench": "vitest bench",
     "build": "vite build",
     "prepublishOnly": "pnpm build"
   },
@@ -30,11 +31,11 @@
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "fraction.js": "^4.3.7"
+    "fraction.js": "^5.2.1"
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
-    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   }
 }

packages/core/pick.mjs

@@ -0,0 +1,214 @@
+/*
+pick.mjs - methods that use one pattern to pick events from other patterns.
+Copyright (C) 2024 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Pattern, reify, silence, register } from './pattern.mjs';
+
+import { _mod, clamp, objectMap } from './util.mjs';
+
+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("<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 = function (lookup, pat) {
+  // backward compatibility - the args used to be flipped
+  if (Array.isArray(pat)) {
+    [pat, lookup] = [lookup, pat];
+  }
+  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));
+});
+
+/** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickOut = register('pickOut', function (lookup, pat) {
+  return _pick(lookup, pat, false).outerJoin();
+});
+
+/** * The same as `pickOut`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodOut = register('pickmodOut', function (lookup, pat) {
+  return _pick(lookup, pat, true).outerJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is restarted when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickRestart = register('pickRestart', function (lookup, pat) {
+  return _pick(lookup, pat, false).restartJoin();
+});
+
+/** * The same as `pickRestart`, but if you pick a number greater than the size of the list,
+   * it wraps around, rather than sticking at the maximum value.
+   * @param {Pattern} pat
+   * @param {*} xs
+   * @returns {Pattern}
+   * @example
+   * "<a@2 b@2 c@2 d@2>".pickRestart({
+        a: n("0 1 2 0"),
+        b: n("2 3 4 ~"),
+        c: n("[4 5] [4 3] 2 0"),
+        d: n("0 -3 0 ~")
+      }).scale("C:major").s("piano")
+   */
+export const pickmodRestart = register('pickmodRestart', function (lookup, pat) {
+  return _pick(lookup, pat, true).restartJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is reset when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickReset = register('pickReset', function (lookup, pat) {
+  return _pick(lookup, pat, false).resetJoin();
+});
+
+/** * The same as `pickReset`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodReset = register('pickmodReset', function (lookup, pat) {
+  return _pick(lookup, pat, true).resetJoin();
+});
+
+/**
+  /** * 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.
+   * @name inhabit
+   * @synonyms pickSqueeze
+   * @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, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, false).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.
+ * @name inhabitmod
+ * @synonyms pickmodSqueeze
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+
+export const { inhabitmod, pickmodSqueeze } = register(['inhabitmod', 'pickmodSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, true).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
+ * @returns {Pattern}
+ * @example
+ * note(squeeze("<0@2 [1!2] 2>", ["g a", "f g f g" , "g a c d"]))
+ */
+
+export const squeeze = (pat, xs) => {
+  xs = xs.map(reify);
+  if (xs.length == 0) {
+    return silence;
+  }
+  return pat
+    .fmap((i) => {
+      const key = _mod(Math.round(i), xs.length);
+      return xs[key];
+    })
+    .squeezeJoin();
+};

packages/core/repl.mjs

@@ -10,6 +10,7 @@ export function repl({
   defaultOutput,
   onEvalError,
   beforeEval,
+  beforeStart,
   afterEval,
   getTime,
   transpiler,
@@ -19,6 +20,7 @@ export function repl({
   sync = false,
   setInterval,
   clearInterval,
+  id,
 }) {
   const state = {
     schedulerError: undefined,
@@ -32,6 +34,10 @@ export function repl({
     started: false,
   };
 
+  const transpilerOptions = {
+    id,
+  };
+
   const updateState = (update) => {
     Object.assign(state, update);
     state.isDirty = state.code !== state.activeCode;
@@ -48,6 +54,7 @@ export function repl({
     },
     setInterval,
     clearInterval,
+    beforeStart,
   };
 
   // NeoCyclist uses a shared worker to communicate between instances, which is not supported on mobile chrome
@@ -56,17 +63,20 @@ export function repl({
   let pPatterns = {};
   let anonymousIndex = 0;
   let allTransform;
+  let eachTransform;
 
   const hush = function () {
     pPatterns = {};
     anonymousIndex = 0;
     allTransform = undefined;
+    eachTransform = undefined;
     return silence;
   };
 
-  const setPattern = (pattern, autostart = true) => {
+  const setPattern = async (pattern, autostart = true) => {
     pattern = editPattern?.(pattern) || pattern;
-    scheduler.setPattern(pattern, autostart);
+    await scheduler.setPattern(pattern, autostart);
+    return pattern;
   };
   setTime(() => scheduler.now()); // TODO: refactor?
 
@@ -76,15 +86,42 @@ export function repl({
   const toggle = () => scheduler.toggle();
   const setCps = (cps) => scheduler.setCps(cps);
   const setCpm = (cpm) => scheduler.setCps(cpm / 60);
+
+  // TODO - not documented as jsdoc examples as the test framework doesn't simulate enough context for `each` and `all`..
+
+  /** Applies a function to all the running patterns. Note that the patterns are groups together into a single `stack` before the function is applied. This is probably what you want, but see `each` for
+   * a version that applies the function to each pattern separately.
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * all(fast("<2 3>"))
+   * ```
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * all(x => x.pianoroll())
+   * ```
+   */
   const all = function (transform) {
     allTransform = transform;
     return silence;
   };
+  /** Applies a function to each of the running patterns separately. This is intended for future use with upcoming 'stepwise' features. See `all` for a version that applies the function to all the patterns stacked together into a single pattern.
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * each(fast("<2 3>"))
+   * ```
+   */
+  const each = function (transform) {
+    eachTransform = transform;
+    return silence;
+  };
 
   // set pattern methods that use this repl via closure
   const injectPatternMethods = () => {
     Pattern.prototype.p = function (id) {
-      if (id.startsWith('_') || id.endsWith('_')) {
+      if (typeof id === 'string' && (id.startsWith('_') || id.endsWith('_'))) {
         // allows muting a pattern x with x_ or _x
         return silence;
       }
@@ -123,6 +160,7 @@ export function repl({
     });
     return evalScope({
       all,
+      each,
       hush,
       cpm,
       setCps,
@@ -139,11 +177,19 @@ export function repl({
     try {
       updateState({ code, pending: true });
       await injectPatternMethods();
+      setTime(() => scheduler.now()); // TODO: refactor?
       await beforeEval?.({ code });
       shouldHush && hush();
-      let { pattern, meta } = await _evaluate(code, transpiler);
+      let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
       if (Object.keys(pPatterns).length) {
-        pattern = stack(...Object.values(pPatterns));
+        let patterns = Object.values(pPatterns);
+        if (eachTransform) {
+          // Explicit lambda so only element (not index and array) are passed
+          patterns = patterns.map((x) => eachTransform(x));
+        }
+        pattern = stack(...patterns);
+      } else if (eachTransform) {
+        pattern = eachTransform(pattern);
       }
       if (allTransform) {
         pattern = allTransform(pattern);
@@ -153,7 +199,7 @@ export function repl({
         throw new Error(message + (typeof evaluated === 'function' ? ', did you forget to call a function?' : '.'));
       }
       logger(`[eval] code updated`);
-      setPattern(pattern, autostart);
+      pattern = await setPattern(pattern, autostart);
       updateState({
         miniLocations: meta?.miniLocations || [],
         widgets: meta?.widgets || [],

packages/core/signal.mjs

@@ -1,13 +1,14 @@
 /*
-signal.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
+signal.mjs - continuous patterns
+Copyright (C) 2024 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
 import { Hap } from './hap.mjs';
-import { Pattern, fastcat, reify, silence, stack, register } from './pattern.mjs';
+import { Pattern, fastcat, pure, register, reify, silence, stack } from './pattern.mjs';
 import Fraction from './fraction.mjs';
-import { id, _mod, clamp, objectMap } from './util.mjs';
+
+import { id, keyAlias, getCurrentKeyboardState } from './util.mjs';
 
 export function steady(value) {
   // A continuous value
@@ -15,13 +16,10 @@ export function steady(value) {
 }
 
 export const signal = (func) => {
-  const query = (state) => [new Hap(undefined, state.span, func(state.span.midpoint()))];
+  const query = (state) => [new Hap(undefined, state.span, func(state.span.begin))];
   return new Pattern(query);
 };
 
-export const isaw = signal((t) => 1 - (t % 1));
-export const isaw2 = isaw.toBipolar();
-
 /**
  *  A sawtooth signal between 0 and 1.
  *
@@ -35,8 +33,40 @@ export const isaw2 = isaw.toBipolar();
  *
  */
 export const saw = signal((t) => t % 1);
+
+/**
+ *  A sawtooth signal between -1 and 1 (like `saw`, but bipolar).
+ *
+ * @return {Pattern}
+ */
 export const saw2 = saw.toBipolar();
 
+/**
+ *  A sawtooth signal between 1 and 0 (like `saw`, but flipped).
+ *
+ * @return {Pattern}
+ * @example
+ * note("<c3 [eb3,g3] g2 [g3,bb3]>*8")
+ * .clip(isaw.slow(2))
+ * @example
+ * n(isaw.range(0,8).segment(8))
+ * .scale('C major')
+ *
+ */
+export const isaw = signal((t) => 1 - (t % 1));
+
+/**
+ *  A sawtooth signal between 1 and -1 (like `saw2`, but flipped).
+ *
+ * @return {Pattern}
+ */
+export const isaw2 = isaw.toBipolar();
+
+/**
+ *  A sine signal between -1 and 1 (like `sine`, but bipolar).
+ *
+ * @return {Pattern}
+ */
 export const sine2 = signal((t) => Math.sin(Math.PI * 2 * t));
 
 /**
@@ -60,6 +90,12 @@ export const sine = sine2.fromBipolar();
  *
  */
 export const cosine = sine._early(Fraction(1).div(4));
+
+/**
+ *  A cosine signal between -1 and 1 (like `cosine`, but bipolar).
+ *
+ * @return {Pattern}
+ */
 export const cosine2 = sine2._early(Fraction(1).div(4));
 
 /**
@@ -71,6 +107,12 @@ export const cosine2 = sine2._early(Fraction(1).div(4));
  *
  */
 export const square = signal((t) => Math.floor((t * 2) % 2));
+
+/**
+ *  A square signal between -1 and 1 (like `square`, but bipolar).
+ *
+ * @return {Pattern}
+ */
 export const square2 = square.toBipolar();
 
 /**
@@ -81,11 +123,71 @@ export const square2 = square.toBipolar();
  * n(tri.segment(8).range(0,7)).scale("C:minor")
  *
  */
-export const tri = fastcat(isaw, saw);
-export const tri2 = fastcat(isaw2, saw2);
+export const tri = fastcat(saw, isaw);
 
+/**
+ *  A triangle signal between -1 and 1 (like `tri`, but bipolar).
+ *
+ * @return {Pattern}
+ */
+export const tri2 = fastcat(saw2, isaw2);
+
+/**
+ *  An inverted triangle signal between 1 and 0 (like `tri`, but flipped).
+ *
+ * @return {Pattern}
+ * @example
+ * n(itri.segment(8).range(0,7)).scale("C:minor")
+ *
+ */
+export const itri = fastcat(isaw, saw);
+
+/**
+ *  An inverted triangle signal between -1 and 1 (like `itri`, but bipolar).
+ *
+ * @return {Pattern}
+ */
+export const itri2 = fastcat(isaw2, saw2);
+
+/**
+ *  A signal representing the cycle time.
+ *
+ * @return {Pattern}
+ */
 export const time = signal(id);
 
+/**
+ *  The mouse's x position value ranges from 0 to 1.
+ * @name mousex
+ * @return {Pattern}
+ * @example
+ * n(mousex.segment(4).range(0,7)).scale("C:minor")
+ *
+ */
+
+/**
+ *  The mouse's y position value ranges from 0 to 1.
+ * @name mousey
+ * @return {Pattern}
+ * @example
+ * n(mousey.segment(4).range(0,7)).scale("C:minor")
+ *
+ */
+let _mouseY = 0,
+  _mouseX = 0;
+if (typeof window !== 'undefined') {
+  //document.onmousemove = (e) => {
+  document.addEventListener('mousemove', (e) => {
+    _mouseY = e.clientY / document.body.clientHeight;
+    _mouseX = e.clientX / document.body.clientWidth;
+  });
+}
+
+export const mousey = signal(() => _mouseY);
+export const mouseY = signal(() => _mouseY);
+export const mousex = signal(() => _mouseX);
+export const mouseX = signal(() => _mouseX);
+
 // random signals
 
 const xorwise = (x) => {
@@ -106,7 +208,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) {
+  for (let i = 0; i < n; ++i) {
     result.push(intSeedToRand(seed));
     seed = xorwise(seed);
   }
@@ -125,7 +227,82 @@ const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);
  * 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);
+export const run = (n) => saw.range(0, n).round().segment(n);
+
+/**
+ * Creates a pattern from a binary number.
+ *
+ * @name binary
+ * @param {number} n - input number to convert to binary
+ * @example
+ * "hh".s().struct(binary(5))
+ * // "hh".s().struct("1 0 1")
+ */
+export const binary = (n) => {
+  const nBits = reify(n).log2(0).floor().add(1);
+  return binaryN(n, nBits);
+};
+
+/**
+ * Creates a pattern from a binary number, padded to n bits long.
+ *
+ * @name binaryN
+ * @param {number} n - input number to convert to binary
+ * @param {number} nBits - pattern length, defaults to 16
+ * @example
+ * "hh".s().struct(binaryN(55532, 16))
+ * // "hh".s().struct("1 1 0 1 1 0 0 0 1 1 1 0 1 1 0 0")
+ */
+export const binaryN = (n, nBits = 16) => {
+  nBits = reify(nBits);
+  // Shift and mask, putting msb on the right-side
+  const bitPos = run(nBits).mul(-1).add(nBits.sub(1));
+  return reify(n).segment(nBits).brshift(bitPos).band(pure(1));
+};
+
+export const randrun = (n) => {
+  return signal((t) => {
+    // Without adding 0.5, the first cycle is always 0,1,2,3,...
+    const rands = timeToRands(t.floor().add(0.5), n);
+    const nums = rands
+      .map((n, i) => [n, i])
+      .sort((a, b) => a[0] > b[0] - a[0] < b[0])
+      .map((x) => x[1]);
+    const i = t.cyclePos().mul(n).floor() % n;
+    return nums[i];
+  })._segment(n);
+};
+
+const _rearrangeWith = (ipat, n, pat) => {
+  const pats = [...Array(n).keys()].map((i) => pat.zoom(Fraction(i).div(n), Fraction(i + 1).div(n)));
+  return ipat.fmap((i) => pats[i].repeatCycles(n)._fast(n)).innerJoin();
+};
+
+/**
+ * @name shuffle
+ * Slices a pattern into the given number of parts, then plays those parts in random order.
+ * Each part will be played exactly once per cycle.
+ * @example
+ * note("c d e f").sound("piano").shuffle(4)
+ * @example
+ * note("c d e f".shuffle(4), "g").sound("piano")
+ */
+export const shuffle = register('shuffle', (n, pat) => {
+  return _rearrangeWith(randrun(n), n, pat);
+});
+
+/**
+ * @name scramble
+ * Slices a pattern into the given number of parts, then plays those parts at random. Similar to `shuffle`,
+ * but parts might be played more than once, or not at all, per cycle.
+ * @example
+ * note("c d e f").sound("piano").scramble(4)
+ * @example
+ * note("c d e f".scramble(4), "g").sound("piano")
+ */
+export const scramble = register('scramble', (n, pat) => {
+  return _rearrangeWith(_irand(n)._segment(n), n, pat);
+});
 
 /**
  * A continuous pattern of random numbers, between 0 and 1.
@@ -177,204 +354,6 @@ export const _irand = (i) => rand.fmap((x) => Math.trunc(x * i));
  */
 export const irand = (ipat) => reify(ipat).fmap(_irand).innerJoin();
 
-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("<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 = function (lookup, pat) {
-  // backward compatibility - the args used to be flipped
-  if (Array.isArray(pat)) {
-    [pat, lookup] = [lookup, pat];
-  }
-  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));
-});
-
-/** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickOut = register('pickOut', function (lookup, pat) {
-  return _pick(lookup, pat, false).outerJoin();
-});
-
-/** * The same as `pickOut`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickmodOut = register('pickmodOut', function (lookup, pat) {
-  return _pick(lookup, pat, true).outerJoin();
-});
-
-/** * Similar to `pick`, but the choosen pattern is restarted when its index is triggered.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickRestart = register('pickRestart', function (lookup, pat) {
-  return _pick(lookup, pat, false).restartJoin();
-});
-
-/** * The same as `pickRestart`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickmodRestart = register('pickmodRestart', function (lookup, pat) {
-  return _pick(lookup, pat, true).restartJoin();
-});
-
-/** * Similar to `pick`, but the choosen pattern is reset when its index is triggered.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickReset = register('pickReset', function (lookup, pat) {
-  return _pick(lookup, pat, false).resetJoin();
-});
-
-/** * The same as `pickReset`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickmodReset = register('pickmodReset', function (lookup, pat) {
-  return _pick(lookup, pat, true).resetJoin();
-});
-
-/**
-/** * 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.
- * @name inhabit
- * @synonyms pickSqueeze
- * @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, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
-  return _pick(lookup, pat, false).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.
- * @name inhabitmod
- * @synonyms pickmodSqueeze
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-
-export const { inhabitmod, pickmodSqueeze } = register(['inhabitmod', 'pickmodSqueeze'], function (lookup, pat) {
-  return _pick(lookup, pat, true).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
- * @returns {Pattern}
- * @example
- * note(squeeze("<0@2 [1!2] 2>", ["g a", "f g f g" , "g a c d"]))
- */
-
-export const squeeze = (pat, xs) => {
-  xs = xs.map(reify);
-  if (xs.length == 0) {
-    return silence;
-  }
-  return pat
-    .fmap((i) => {
-      const key = _mod(Math.round(i), xs.length);
-      return xs[key];
-    })
-    .squeezeJoin();
-};
-
 export const __chooseWith = (pat, xs) => {
   xs = xs.map(reify);
   if (xs.length == 0) {
@@ -513,8 +492,11 @@ export const perlinWith = (pat) => {
  */
 export const perlin = perlinWith(time.fmap((v) => Number(v)));
 
-export const degradeByWith = register('degradeByWith', (withPat, x, pat) =>
-  pat.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x)),
+export const degradeByWith = register(
+  'degradeByWith',
+  (withPat, x, pat) => pat.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x)),
+  true,
+  true,
 );
 
 /**
@@ -531,9 +513,14 @@ export const degradeByWith = register('degradeByWith', (withPat, x, pat) =>
  * @example
  * s("[hh?0.2]*8")
  */
-export const degradeBy = register('degradeBy', function (x, pat) {
-  return pat._degradeByWith(rand, x);
-});
+export const degradeBy = register(
+  'degradeBy',
+  function (x, pat) {
+    return pat._degradeByWith(rand, x);
+  },
+  true,
+  true,
+);
 
 /**
  *
@@ -547,7 +534,7 @@ export const degradeBy = register('degradeBy', function (x, pat) {
  * @example
  * s("[hh?]*8")
  */
-export const degrade = register('degrade', (pat) => pat._degradeBy(0.5));
+export const degrade = register('degrade', (pat) => pat._degradeBy(0.5), true, true);
 
 /**
  * Inverse of `degradeBy`: Randomly removes events from the pattern by a given amount.
@@ -567,12 +554,17 @@ export const degrade = register('degrade', (pat) => pat._degradeBy(0.5));
  *   x => x.undegradeBy(0.8).pan(1)
  * )
  */
-export const undegradeBy = register('undegradeBy', function (x, pat) {
-  return pat._degradeByWith(
-    rand.fmap((r) => 1 - r),
-    x,
-  );
-});
+export const undegradeBy = register(
+  'undegradeBy',
+  function (x, pat) {
+    return pat._degradeByWith(
+      rand.fmap((r) => 1 - r),
+      x,
+    );
+  },
+  true,
+  true,
+);
 
 /**
  * Inverse of `degrade`: Randomly removes 50% of events from the pattern. Shorthand for `.undegradeBy(0.5)`
@@ -589,7 +581,7 @@ export const undegradeBy = register('undegradeBy', function (x, pat) {
  *   x => x.undegrade().pan(1)
  * )
  */
-export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5));
+export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5), true, true);
 
 /**
  *
@@ -748,3 +740,48 @@ export const never = register('never', function (_, pat) {
 export const always = register('always', function (func, pat) {
   return func(pat);
 });
+
+//keyname: string | Array<string>
+//keyname reference: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+export function _keyDown(keyname) {
+  if (Array.isArray(keyname) === false) {
+    keyname = [keyname];
+  }
+  const keyState = getCurrentKeyboardState();
+  return keyname.every((x) => {
+    const keyName = keyAlias.get(x) ?? x;
+    return keyState[keyName];
+  });
+}
+
+/**
+ *
+ * Do something on a keypress, or array of keypresses
+ * [Key name reference](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
+ *
+ * @name whenKey
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * s("bd(5,8)").whenKey("Control:j", x => x.segment(16).color("red")).whenKey("Control:i", x => x.fast(2).color("blue"))
+ */
+
+export const whenKey = register('whenKey', function (input, func, pat) {
+  return pat.when(_keyDown(input), func);
+});
+
+/**
+ *
+ * returns true when a key or array of keys is held
+ * [Key name reference](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
+ *
+ * @name keyDown
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * keyDown("Control:j").pick([s("bd(5,8)"), s("cp(3,8)")])
+ */
+
+export const keyDown = register('keyDown', function (pat) {
+  return pat.fmap(_keyDown);
+});

packages/core/test/controls.test.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2023 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 { s, pan } from '../controls.mjs';
+import { s, pan, getControlName } from '../controls.mjs';
 import { mini } from '../../mini/mini.mjs';
 import { describe, it, expect } from 'vitest';
 import Fraction from '../fraction.mjs';
@@ -30,13 +30,17 @@ describe('controls', () => {
     expect(s(mini('bd').pan(1)).firstCycleValues).toEqual([{ s: 'bd', pan: 1 }]);
     expect(s(mini('bd:1').pan(1)).firstCycleValues).toEqual([{ s: 'bd', n: 1, pan: 1 }]);
   });
-  it('preserves tactus of the left pattern', () => {
-    expect(s(mini('bd cp mt').pan(mini('1 2 3 4'))).tactus).toEqual(Fraction(3));
+  it('preserves step count of the left pattern', () => {
+    expect(s(mini('bd cp mt').pan(mini('1 2 3 4')))._steps).toEqual(Fraction(3));
   });
-  it('preserves tactus of the right pattern for .out', () => {
-    expect(s(mini('bd cp mt').set.out(pan(mini('1 2 3 4')))).tactus).toEqual(Fraction(4));
+  it('preserves step count of the right pattern for .out', () => {
+    expect(s(mini('bd cp mt').set.out(pan(mini('1 2 3 4'))))._steps).toEqual(Fraction(4));
   });
-  it('combines tactus of the pattern for .mix as lcm', () => {
-    expect(s(mini('bd cp mt').set.mix(pan(mini('1 2 3 4')))).tactus).toEqual(Fraction(12));
+  it('combines step count of the pattern for .mix as lcm', () => {
+    expect(s(mini('bd cp mt').set.mix(pan(mini('1 2 3 4'))))._steps).toEqual(Fraction(12));
+  });
+  it('finds control name by alias', () => {
+    expect(getControlName('lpf')).toEqual('cutoff');
+    expect(getControlName('cutoff')).toEqual('cutoff');
   });
 });

packages/core/test/pattern.test.mjs

@@ -21,8 +21,8 @@ import {
   cat,
   sequence,
   palindrome,
-  s_polymeter,
-  s_polymeterSteps,
+  polymeter,
+  polymeterSteps,
   polyrhythm,
   silence,
   fast,
@@ -46,12 +46,13 @@ import {
   rev,
   time,
   run,
+  binaryN,
   pick,
   stackLeft,
   stackRight,
   stackCentre,
-  s_cat,
-  calculateTactus,
+  stepcat,
+  sometimes,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -608,18 +609,18 @@ describe('Pattern', () => {
       );
     });
   });
-  describe('s_polymeter()', () => {
+  describe('polymeter()', () => {
     it('Can layer up cycles, stepwise, with lists', () => {
-      expect(s_polymeterSteps(3, ['d', 'e']).firstCycle()).toStrictEqual(
+      expect(polymeterSteps(3, ['d', 'e']).firstCycle()).toStrictEqual(
         fastcat(pure('d'), pure('e'), pure('d')).firstCycle(),
       );
 
-      expect(s_polymeter(['a', 'b', 'c'], ['d', 'e']).fast(2).firstCycle()).toStrictEqual(
+      expect(polymeter(['a', 'b', 'c'], ['d', 'e']).fast(2).firstCycle()).toStrictEqual(
         stack(sequence('a', 'b', 'c', 'a', 'b', 'c'), sequence('d', 'e', 'd', 'e', 'd', 'e')).firstCycle(),
       );
     });
     it('Can layer up cycles, stepwise, with weighted patterns', () => {
-      sameFirst(s_polymeterSteps(3, sequence('a', 'b')).fast(2), sequence('a', 'b', 'a', 'b', 'a', 'b'));
+      sameFirst(polymeterSteps(3, sequence('a', 'b')).fast(2), sequence('a', 'b', 'a', 'b', 'a', 'b'));
     });
   });
 
@@ -735,21 +736,15 @@ describe('Pattern', () => {
   describe('signal()', () => {
     it('Can make saw/saw2', () => {
       expect(saw.struct(true, true, true, true).firstCycle()).toStrictEqual(
-        sequence(1 / 8, 3 / 8, 5 / 8, 7 / 8).firstCycle(),
+        sequence(0, 1 / 4, 1 / 2, 3 / 4).firstCycle(),
       );
 
-      expect(saw2.struct(true, true, true, true).firstCycle()).toStrictEqual(
-        sequence(-3 / 4, -1 / 4, 1 / 4, 3 / 4).firstCycle(),
-      );
+      expect(saw2.struct(true, true, true, true).firstCycle()).toStrictEqual(sequence(-1, -0.5, 0, 0.5).firstCycle());
     });
     it('Can make isaw/isaw2', () => {
-      expect(isaw.struct(true, true, true, true).firstCycle()).toStrictEqual(
-        sequence(7 / 8, 5 / 8, 3 / 8, 1 / 8).firstCycle(),
-      );
+      expect(isaw.struct(true, true, true, true).firstCycle()).toStrictEqual(sequence(1, 0.75, 0.5, 0.25).firstCycle());
 
-      expect(isaw2.struct(true, true, true, true).firstCycle()).toStrictEqual(
-        sequence(3 / 4, 1 / 4, -1 / 4, -3 / 4).firstCycle(),
-      );
+      expect(isaw2.struct(true, true, true, true).firstCycle()).toStrictEqual(sequence(1, 0.5, 0, -0.5).firstCycle());
     });
   });
   describe('_setContext()', () => {
@@ -887,7 +882,7 @@ describe('Pattern', () => {
           .squeezeJoin()
           .queryArc(3, 4)
           .map((x) => x.value),
-      ).toStrictEqual([Fraction(3.5)]);
+      ).toStrictEqual([Fraction(3)]);
     });
   });
   describe('ply', () => {
@@ -937,6 +932,9 @@ describe('Pattern', () => {
           .firstCycle(),
       );
     });
+    it('Can chop chops', () => {
+      expect(pure({ s: 'bev' }).chop(2).chop(2).firstCycle()).toStrictEqual(pure({ s: 'bev' }).chop(4).firstCycle());
+    });
   });
   describe('range', () => {
     it('Can be patterned', () => {
@@ -955,6 +953,18 @@ describe('Pattern', () => {
       expect(run(4).firstCycle()).toStrictEqual(sequence(0, 1, 2, 3).firstCycle());
     });
   });
+  describe('binaryN', () => {
+    it('Can make a binary pattern from a decimal', () => {
+      expect(binaryN(55532).firstCycle()).toStrictEqual(
+        sequence(1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0).firstCycle(),
+      );
+    });
+    it('Can make a binary pattern from patterned inputs', () => {
+      expect(binaryN(pure(0x1337), pure(14)).firstCycle()).toStrictEqual(
+        sequence(0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1).firstCycle(),
+      );
+    });
+  });
   describe('ribbon', () => {
     it('Can ribbon', () => {
       expect(cat(0, 1, 2, 3, 4, 5, 6, 7).ribbon(2, 4).fast(4).firstCycle()).toStrictEqual(
@@ -1124,89 +1134,145 @@ describe('Pattern', () => {
       );
     });
   });
-  describe('tactus', () => {
+  describe('_steps', () => {
     it('Is correctly preserved/calculated through transformations', () => {
-      expect(sequence(0, 1, 2, 3).linger(4).tactus).toStrictEqual(Fraction(4));
-      expect(sequence(0, 1, 2, 3).iter(4).tactus).toStrictEqual(Fraction(4));
-      expect(sequence(0, 1, 2, 3).fast(4).tactus).toStrictEqual(Fraction(4));
-      expect(sequence(0, 1, 2, 3).hurry(4).tactus).toStrictEqual(Fraction(4));
-      expect(sequence(0, 1, 2, 3).rev().tactus).toStrictEqual(Fraction(4));
-      expect(sequence(1).segment(10).tactus).toStrictEqual(Fraction(10));
-      expect(sequence(1, 0, 1).invert().tactus).toStrictEqual(Fraction(3));
-      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).chop(4).tactus).toStrictEqual(Fraction(8));
-      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).striate(4).tactus).toStrictEqual(Fraction(8));
-      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).slice(4, sequence(0, 1, 2, 3)).tactus).toStrictEqual(
+      expect(sequence(0, 1, 2, 3).linger(4)._steps).toStrictEqual(Fraction(4));
+      expect(sequence(0, 1, 2, 3).iter(4)._steps).toStrictEqual(Fraction(4));
+      expect(sequence(0, 1, 2, 3).fast(4)._steps).toStrictEqual(Fraction(4));
+      expect(sequence(0, 1, 2, 3).hurry(4)._steps).toStrictEqual(Fraction(4));
+      expect(sequence(0, 1, 2, 3).rev()._steps).toStrictEqual(Fraction(4));
+      expect(sequence(1).segment(10)._steps).toStrictEqual(Fraction(10));
+      expect(sequence(1, 0, 1).invert()._steps).toStrictEqual(Fraction(3));
+      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).chop(4)._steps).toStrictEqual(Fraction(8));
+      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).striate(4)._steps).toStrictEqual(Fraction(8));
+      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).slice(4, sequence(0, 1, 2, 3))._steps).toStrictEqual(
         Fraction(4),
       );
-      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).splice(4, sequence(0, 1, 2, 3)).tactus).toStrictEqual(
+      expect(sequence({ s: 'bev' }, { s: 'amenbreak' }).splice(4, sequence(0, 1, 2, 3))._steps).toStrictEqual(
         Fraction(4),
       );
-      expect(sequence({ n: 0 }, { n: 1 }, { n: 2 }).chop(4).tactus).toStrictEqual(Fraction(12));
+      expect(sequence({ n: 0 }, { n: 1 }, { n: 2 }).chop(4)._steps).toStrictEqual(Fraction(12));
       expect(
         pure((x) => x + 1)
-          .setTactus(3)
-          .appBoth(pure(1).setTactus(2)).tactus,
+          .setSteps(3)
+          .appBoth(pure(1).setSteps(2))._steps,
       ).toStrictEqual(Fraction(6));
       expect(
         pure((x) => x + 1)
-          .setTactus(undefined)
-          .appBoth(pure(1).setTactus(2)).tactus,
+          .setSteps(undefined)
+          .appBoth(pure(1).setSteps(2))._steps,
       ).toStrictEqual(Fraction(2));
       expect(
         pure((x) => x + 1)
-          .setTactus(3)
-          .appBoth(pure(1).setTactus(undefined)).tactus,
+          .setSteps(3)
+          .appBoth(pure(1).setSteps(undefined))._steps,
       ).toStrictEqual(Fraction(3));
-      expect(stack(fastcat(0, 1, 2), fastcat(3, 4)).tactus).toStrictEqual(Fraction(6));
-      expect(stack(fastcat(0, 1, 2), fastcat(3, 4).setTactus(undefined)).tactus).toStrictEqual(Fraction(3));
-      expect(stackLeft(fastcat(0, 1, 2, 3), fastcat(3, 4)).tactus).toStrictEqual(Fraction(4));
-      expect(stackRight(fastcat(0, 1, 2), fastcat(3, 4)).tactus).toStrictEqual(Fraction(3));
+      expect(stack(fastcat(0, 1, 2), fastcat(3, 4))._steps).toStrictEqual(Fraction(6));
+      expect(stack(fastcat(0, 1, 2), fastcat(3, 4).setSteps(undefined))._steps).toStrictEqual(Fraction(3));
+      expect(stackLeft(fastcat(0, 1, 2, 3), fastcat(3, 4))._steps).toStrictEqual(Fraction(4));
+      expect(stackRight(fastcat(0, 1, 2), fastcat(3, 4))._steps).toStrictEqual(Fraction(3));
       // maybe this should double when they are either all even or all odd
-      expect(stackCentre(fastcat(0, 1, 2), fastcat(3, 4)).tactus).toStrictEqual(Fraction(3));
-      expect(fastcat(0, 1).ply(3).tactus).toStrictEqual(Fraction(6));
-      expect(fastcat(0, 1).setTactus(undefined).ply(3).tactus).toStrictEqual(undefined);
-      expect(fastcat(0, 1).fast(3).tactus).toStrictEqual(Fraction(2));
-      expect(fastcat(0, 1).setTactus(undefined).fast(3).tactus).toStrictEqual(undefined);
+      expect(stackCentre(fastcat(0, 1, 2), fastcat(3, 4))._steps).toStrictEqual(Fraction(3));
+      expect(fastcat(0, 1).ply(3)._steps).toStrictEqual(Fraction(6));
+      expect(fastcat(0, 1).setSteps(undefined).ply(3)._steps).toStrictEqual(undefined);
+      expect(fastcat(0, 1).fast(3)._steps).toStrictEqual(Fraction(2));
+      expect(fastcat(0, 1).setSteps(undefined).fast(3)._steps).toStrictEqual(undefined);
     });
   });
-  describe('s_cat', () => {
+  describe('stepcat', () => {
     it('can cat', () => {
-      expect(sameFirst(s_cat(fastcat(0, 1, 2, 3), fastcat(4, 5)), fastcat(0, 1, 2, 3, 4, 5)));
-      expect(sameFirst(s_cat(pure(1), pure(2), pure(3)), fastcat(1, 2, 3)));
+      expect(sameFirst(stepcat(fastcat(0, 1, 2, 3), fastcat(4, 5)), fastcat(0, 1, 2, 3, 4, 5)));
+      expect(sameFirst(stepcat(pure(1), pure(2), pure(3)), fastcat(1, 2, 3)));
     });
-    it('calculates undefined tactuses as the average', () => {
-      expect(sameFirst(s_cat(pure(1), pure(2), pure(3).setTactus(undefined)), fastcat(1, 2, 3)));
+    it('calculates undefined steps as the average', () => {
+      expect(sameFirst(stepcat(pure(1), pure(2), pure(3).setSteps(undefined)), fastcat(1, 2, 3)));
     });
   });
-  describe('s_taper', () => {
-    it('can taper', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_taper(1, 5), sequence(0, 1, 2, 3, 4, 0, 1, 2, 3, 0, 1, 2, 0, 1, 0)));
+  describe('shrink', () => {
+    it('can shrink', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).shrink(1), sequence(0, 1, 2, 3, 4, 1, 2, 3, 4, 2, 3, 4, 3, 4, 4)));
     });
-    it('can taper backwards', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_taper(-1, 5), sequence(0, 0, 1, 0, 1, 2, 0, 1, 2, 3, 0, 1, 2, 3, 4)));
+    it('can shrink backwards', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).shrink(-1), sequence(0, 1, 2, 3, 4, 0, 1, 2, 3, 0, 1, 2, 0, 1, 0)));
     });
   });
-  describe('s_add and s_sub', () => {
-    it('can add from the left', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_add(2), sequence(0, 1)));
+  describe('grow', () => {
+    it('can grow', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).grow(1), sequence(0, 0, 1, 0, 1, 2, 0, 1, 2, 3, 0, 1, 2, 3, 4)));
     });
-    it('can sub to the left', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_sub(2), sequence(0, 1, 2)));
+    it('can grow backwards', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).grow(-1), sequence(4, 3, 4, 2, 3, 4, 1, 2, 3, 4, 0, 1, 2, 3, 4)));
     });
-    it('can add from the right', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_add(-2), sequence(3, 4)));
+  });
+  describe('take and drop', () => {
+    it('can take from the left', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).take(2), sequence(0, 1)));
     });
-    it('can sub to the right', () => {
-      expect(sameFirst(sequence(0, 1, 2, 3, 4).s_sub(-2), sequence(2, 3, 4)));
+    it('can drop from the left', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).drop(2), sequence(2, 3, 4)));
     });
-    it('can subtract nothing', () => {
-      expect(sameFirst(pure('a').s_sub(0), pure('a')));
+    it('can take from the right', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).take(-2), sequence(3, 4)));
     });
-    it('can subtract nothing, repeatedly', () => {
-      expect(sameFirst(pure('a').s_sub(0, 0), fastcat('a', 'a')));
+    it('can drop from the right', () => {
+      expect(sameFirst(sequence(0, 1, 2, 3, 4).drop(-2), sequence(0, 1, 2)));
+    });
+    it('can drop nothing', () => {
+      expect(sameFirst(pure('a').drop(0), pure('a')));
+    });
+    it('can drop nothing, repeatedly', () => {
+      expect(sameFirst(pure('a').drop(0, 0), fastcat('a', 'a')));
       for (var i = 0; i < 100; ++i) {
-        expect(sameFirst(pure('a').s_sub(...Array(i).fill(0)), fastcat(...Array(i).fill('a'))));
+        expect(sameFirst(pure('a').drop(...Array(i).fill(0)), fastcat(...Array(i).fill('a'))));
       }
     });
   });
+  describe('expand', () => {
+    it('can expand four things in half', () => {
+      expect(
+        sameFirst(sequence(0, 1, 2, 3).expand(1, 0.5), stepcat(sequence(0, 1, 2, 3), sequence(0, 1, 2, 3).expand(0.5))),
+      );
+    });
+    it('can expand five things in half', () => {
+      expect(
+        sameFirst(
+          sequence(0, 1, 2, 3, 4).expand(1, 0.5),
+          stepcat(sequence(0, 1, 2, 3, 4), sequence(0, 1, 2, 3, 4).expand(0.5)),
+        ),
+      );
+    });
+  });
+  describe('stepJoin', () => {
+    it('can join a pattern with steps of 2', () => {
+      expect(
+        sameFirst(
+          sequence(pure(pure('a')), pure(pure('b').setSteps(2))).stepJoin(),
+          stepcat(pure('a'), pure('b').setSteps(2)),
+        ),
+      );
+    });
+    it('can join a pattern with steps of 0.5', () => {
+      expect(
+        sameFirst(
+          sequence(pure(pure('a')), pure(pure('b').setSteps(0.5))).stepJoin(),
+          stepcat(pure('a'), pure('b').setSteps(0.5)),
+        ),
+      );
+    });
+  });
+  describe('loopAt', () => {
+    it('maintains steps', () => {
+      expect(s('bev').chop(8).loopAt(2)._steps).toStrictEqual(Fraction(4));
+    });
+  });
+  describe('bite', () => {
+    it('works with uneven patterns', () => {
+      sameFirst(
+        fastcat(slowcat('a', 'b', 'c', 'd', 'e'), slowcat(1, 2, 3, 4, 5))
+          .bite(2, stepcat(pure(0), pure(1).expand(2)))
+          .fast(5),
+        stepcat(slowcat('a', 'b', 'c', 'd', 'e'), slowcat(1, 2, 3, 4, 5).expand(2)).fast(5),
+      );
+    });
+  });
 });

packages/core/util.mjs

@@ -91,6 +91,9 @@ 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;
 
+// average numbers in an array
+export const averageArray = (arr) => arr.reduce((a, b) => a + b) / arr.length;
+
 export function nanFallback(value, fallback = 0) {
   if (isNaN(Number(value))) {
     logger(`"${value}" is not a number, falling back to ${fallback}`, 'warning');
@@ -360,6 +363,108 @@ export function objectMap(obj, fn) {
   }
   return Object.fromEntries(Object.entries(obj).map(([k, v], i) => [k, fn(v, k, i)]));
 }
+export function cycleToSeconds(cycle, cps) {
+  return cycle / cps;
+}
+
+// utility for averaging two clocks together to account for drift
+export class ClockCollator {
+  constructor({
+    getTargetClockTime = getUnixTimeSeconds,
+    weight = 16,
+    offsetDelta = 0.005,
+    checkAfterTime = 2,
+    resetAfterTime = 8,
+  }) {
+    this.offsetTime;
+    this.timeAtPrevOffsetSample;
+    this.prevOffsetTimes = [];
+    this.getTargetClockTime = getTargetClockTime;
+    this.weight = weight;
+    this.offsetDelta = offsetDelta;
+    this.checkAfterTime = checkAfterTime;
+    this.resetAfterTime = resetAfterTime;
+    this.reset = () => {
+      this.prevOffsetTimes = [];
+      this.offsetTime = null;
+      this.timeAtPrevOffsetSample = null;
+    };
+  }
+  calculateOffset(currentTime) {
+    const targetClockTime = this.getTargetClockTime();
+    const diffBetweenTimeSamples = targetClockTime - this.timeAtPrevOffsetSample;
+    const newOffsetTime = targetClockTime - currentTime;
+    // recalcuate the diff from scratch if the clock has been paused for some time.
+    if (diffBetweenTimeSamples > this.resetAfterTime) {
+      this.reset();
+    }
+
+    if (this.offsetTime == null) {
+      this.offsetTime = newOffsetTime;
+    }
+    this.prevOffsetTimes.push(newOffsetTime);
+    if (this.prevOffsetTimes.length > this.weight) {
+      this.prevOffsetTimes.shift();
+    }
+
+    // after X time has passed, the average of the previous weight offset times is calculated and used as a stable reference
+    // for calculating the timestamp
+    if (this.timeAtPrevOffsetSample == null || diffBetweenTimeSamples > this.checkAfterTime) {
+      this.timeAtPrevOffsetSample = targetClockTime;
+      const rollingOffsetTime = averageArray(this.prevOffsetTimes);
+      //when the clock offsets surpass the delta, set the new reference time
+      if (Math.abs(rollingOffsetTime - this.offsetTime) > this.offsetDelta) {
+        this.offsetTime = rollingOffsetTime;
+      }
+    }
+
+    return this.offsetTime;
+  }
+
+  calculateTimestamp(currentTime, targetTime) {
+    return this.calculateOffset(currentTime) + targetTime;
+  }
+}
+
+export function getPerformanceTimeSeconds() {
+  return performance.now() * 0.001;
+}
+
+function getUnixTimeSeconds() {
+  return Date.now() * 0.001;
+}
+
+export const keyAlias = new Map([
+  ['control', 'Control'],
+  ['ctrl', 'Control'],
+  ['alt', 'Alt'],
+  ['shift', 'Shift'],
+  ['down', 'ArrowDown'],
+  ['up', 'ArrowUp'],
+  ['left', 'ArrowLeft'],
+  ['right', 'ArrowRight'],
+]);
+let keyState;
+
+export function getCurrentKeyboardState() {
+  if (keyState == null) {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    keyState = {};
+    // Listen for the keydown event to mark the key as pressed
+    window.addEventListener('keydown', (event) => {
+      keyState[event.key] = true; // Mark the key as pressed
+    });
+
+    // Listen for the keyup event to mark the key as released
+    window.addEventListener('keyup', (event) => {
+      keyState[event.key] = false; // Mark the key as released
+    });
+  }
+
+  return { ...keyState }; // Return a shallow copy of the key state object
+}
 
 // Floating point versions, see Fraction for rational versions
 // // greatest common divisor

packages/core/vite.config.js

@@ -4,6 +4,7 @@ import { resolve } from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './',
   plugins: [],
   build: {
     lib: {

packages/csound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/csound",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
   "type": "module",
@@ -37,6 +37,6 @@
     "@strudel/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/desktopbridge/oscbridge.mjs

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

packages/desktopbridge/package.json

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

packages/desktopbridge/utils.mjs

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

packages/draw/draw.mjs

@@ -26,7 +26,7 @@ export const getDrawContext = (id = 'test-canvas', options) => {
       }, 200);
     });
   }
-  return canvas.getContext(contextType);
+  return canvas.getContext(contextType, { willReadFrequently: true });
 };
 
 let animationFrames = {};
@@ -36,8 +36,8 @@ function stopAnimationFrame(id) {
     delete animationFrames[id];
   }
 }
-function stopAllAnimations() {
-  Object.keys(animationFrames).forEach((id) => stopAnimationFrame(id));
+function stopAllAnimations(replID) {
+  Object.keys(animationFrames).forEach((id) => (!replID || id.startsWith(replID)) && stopAnimationFrame(id));
 }
 
 let memory = {};
@@ -72,18 +72,25 @@ Pattern.prototype.draw = function (fn, options) {
   return this;
 };
 
-export const cleanupDraw = (clearScreen = true) => {
+export const cleanupDraw = (clearScreen = true, id) => {
   const ctx = getDrawContext();
-  clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
-  stopAllAnimations();
-  if (window.strudelScheduler) {
-    clearInterval(window.strudelScheduler);
-  }
+  clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  stopAllAnimations(id);
 };
 
-Pattern.prototype.onPaint = function () {
-  console.warn('[draw] onPaint was not overloaded. Some drawings might not work');
-  return this;
+Pattern.prototype.onPaint = function (painter) {
+  return this.withState((state) => {
+    if (!state.controls.painters) {
+      state.controls.painters = [];
+    }
+    state.controls.painters.push(painter);
+  });
+};
+
+Pattern.prototype.getPainters = function () {
+  let painters = [];
+  this.queryArc(0, 0, { painters });
+  return painters;
 };
 
 // const round = (x) => Math.round(x * 1000) / 1000;
@@ -122,6 +129,7 @@ export class Drawer {
     this.visibleHaps = [];
     this.lastFrame = null;
     this.drawTime = drawTime;
+    this.painters = [];
     this.framer = new Framer(
       () => {
         if (!this.scheduler) {
@@ -146,7 +154,7 @@ export class Drawer {
           // add new haps with onset (think right edge bars scrolling in)
           .concat(haps.filter((h) => h.hasOnset()));
         const time = phase - lookahead;
-        onDraw(this.visibleHaps, time, this);
+        onDraw(this.visibleHaps, time, this, this.painters);
       },
       (err) => {
         console.warn('draw error', err);
@@ -164,11 +172,13 @@ export class Drawer {
     t = t ?? scheduler.now();
     this.scheduler = scheduler;
     let [_, lookahead] = this.drawTime;
+    // +0.1 = workaround for weird holes in query..
     const [begin, end] = [Math.max(t, 0), t + lookahead + 0.1];
     // remove all future haps
     this.visibleHaps = this.visibleHaps.filter((h) => h.whole.begin < t);
+    this.painters = []; // will get populated by .onPaint calls attached to the pattern
     // query future haps
-    const futureHaps = scheduler.pattern.queryArc(begin, end); // +0.1 = workaround for weird holes in query..
+    const futureHaps = scheduler.pattern.queryArc(begin, end, { painters: this.painters });
     // append future haps
     this.visibleHaps = this.visibleHaps.concat(futureHaps);
   }
@@ -191,7 +201,16 @@ export function getComputedPropertyValue(name) {
   return getComputedStyle(document.documentElement).getPropertyValue(name);
 }
 
-let theme = {};
+let theme = {
+  background: '#222',
+  foreground: '#75baff',
+  caret: '#ffcc00',
+  selection: 'rgba(128, 203, 196, 0.5)',
+  selectionMatch: '#036dd626',
+  lineHighlight: '#00000050',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+};
 export function getTheme() {
   return theme;
 }

packages/draw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/draw",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Helpers for drawing with Strudel",
   "main": "index.mjs",
   "type": "module",
@@ -32,6 +32,6 @@
     "@strudel/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/draw/pianoroll.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, noteToMidi, freqToMidi } from '@strudel/core';
+import { Pattern, noteToMidi, freqToMidi, isPattern } from '@strudel/core';
 import { getTheme, getDrawContext } from './draw.mjs';
 
 const scale = (normalized, min, max) => normalized * (max - min) + min;
@@ -36,37 +36,12 @@ const getValue = (e) => {
   return value;
 };
 
-Pattern.prototype.pianoroll = function (options = {}) {
-  let { cycles = 4, playhead = 0.5, overscan = 0, hideNegative = false, ctx = getDrawContext(), id = 1 } = options;
-
-  let from = -cycles * playhead;
-  let to = cycles * (1 - playhead);
-  const inFrame = (hap, t) => (!hideNegative || hap.whole.begin >= 0) && hap.isWithinTime(t + from, t + to);
-  this.draw(
-    (haps, time) => {
-      pianoroll({
-        ...options,
-        time,
-        ctx,
-        haps: haps.filter((hap) => inFrame(hap, time)),
-      });
-    },
-    {
-      lookbehind: from - overscan,
-      lookahead: to + overscan,
-      id,
-    },
-  );
-  return this;
-};
-
-// this function allows drawing a pianoroll without ties to Pattern.prototype
-// it will probably replace the above in the future
-
 /**
- * Displays a midi-style piano roll
+ * Visualises a pattern as a scrolling 'pianoroll', displayed in the background of the editor. To show a pianoroll for all running patterns, use `all(pianoroll)`. To have a pianoroll appear below
+ * a pattern instead, prefix with `_`, e.g.: `sound("bd sd")._pianoroll()`.
  *
  * @name pianoroll
+ * @synonyms punchcard
  * @param {Object} options Object containing all the optional following parameters as key value pairs:
  * @param {integer} cycles number of cycles to be displayed at the same time - defaults to 4
  * @param {number} playhead location of the active notes on the time axis - 0 to 1, defaults to 0.5
@@ -92,11 +67,51 @@ Pattern.prototype.pianoroll = function (options = {}) {
  * @param {integer} minMidi minimum note value to display on the value axis - defaults to 10
  * @param {integer} maxMidi maximum note value to display on the value axis - defaults to 90
  * @param {boolean} autorange automatically calculate the minMidi and maxMidi parameters - 0 by default
- *
+ * @see _pianoroll
  * @example
- * note("C2 A2 G2").euclid(5,8).s('piano').clip(1).color('salmon').pianoroll({vertical:1, labels:1})
+ * note("c2 a2 eb2")
+ * .euclid(5,8)
+ * .s('sawtooth')
+ * .lpenv(4).lpf(300)
+ * .pianoroll({ labels: 1 })
  */
-export function pianoroll({
+
+Pattern.prototype.pianoroll = function (options = {}) {
+  let { cycles = 4, playhead = 0.5, overscan = 0, hideNegative = false, ctx = getDrawContext(), id = 1 } = options;
+
+  let from = -cycles * playhead;
+  let to = cycles * (1 - playhead);
+  const inFrame = (hap, t) => (!hideNegative || hap.whole.begin >= 0) && hap.isWithinTime(t + from, t + to);
+  this.draw(
+    (haps, time) => {
+      __pianoroll({
+        ...options,
+        time,
+        ctx,
+        haps: haps.filter((hap) => inFrame(hap, time)),
+      });
+    },
+    {
+      lookbehind: from - overscan,
+      lookahead: to + overscan,
+      id,
+    },
+  );
+  return this;
+};
+
+export function pianoroll(arg) {
+  if (isPattern(arg)) {
+    // Single argument as a pattern
+    // (to support `all(pianoroll)`)
+    return arg.pianoroll();
+  }
+  // Single argument with option - return function to get the pattern
+  // (to support `all(pianoroll(options))`)
+  return (pat) => pat.pianoroll(arg);
+}
+
+export function __pianoroll({
   time,
   haps,
   cycles = 4,
@@ -108,12 +123,12 @@ export function pianoroll({
   active = getTheme().foreground,
   background = 'transparent',
   smear = 0,
-  playheadColor = 'white',
+  playheadColor = getTheme().foreground,
   minMidi = 10,
   maxMidi = 90,
   autorange = 0,
   timeframe: timeframeProp,
-  fold = 0,
+  fold = 1,
   vertical = 0,
   labels = false,
   fill = 1,
@@ -266,14 +281,14 @@ export function getDrawOptions(drawTime, options = {}) {
   let [lookbehind, lookahead] = drawTime;
   lookbehind = Math.abs(lookbehind);
   const cycles = lookahead + lookbehind;
-  const playhead = lookbehind / cycles;
+  const playhead = cycles !== 0 ? lookbehind / cycles : 0;
   return { fold: 1, ...options, cycles, playhead };
 }
 
 export const getPunchcardPainter =
   (options = {}) =>
   (ctx, time, haps, drawTime) =>
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, options) });
+    __pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, options) });
 
 Pattern.prototype.punchcard = function (options) {
   return this.onPaint(getPunchcardPainter(options));
@@ -297,5 +312,5 @@ Pattern.prototype.wordfall = function (options) {
 
 export function drawPianoroll(options) {
   const { drawTime, ...rest } = options;
-  pianoroll({ ...getDrawOptions(drawTime), ...rest });
+  __pianoroll({ ...getDrawOptions(drawTime), ...rest });
 }

packages/draw/pitchwheel.mjs

@@ -113,6 +113,23 @@ export function pitchwheel({
   return;
 }
 
+/**
+ * Renders a pitch circle to visualize frequencies within one octave
+ * @name pitchwheel
+ * @param {number} hapcircles
+ * @param {number} circle
+ * @param {number} edo
+ * @param {string} root
+ * @param {number} thickness
+ * @param {number} hapRadius
+ * @param {string} mode
+ * @param {number} margin
+ * @example
+ * n("0 .. 12").scale("C:chromatic")
+ * .s("sawtooth")
+ * .lpf(500)
+ * ._pitchwheel()
+ */
 Pattern.prototype.pitchwheel = function (options = {}) {
   let { ctx = getDrawContext(), id = 1 } = options;
   return this.tag(id).onPaint((_, time, haps) =>

packages/draw/spiral.mjs

@@ -125,6 +125,33 @@ function drawSpiral(options) {
   });
 }
 
+/**
+ * Displays a spiral visual.
+ *
+ * @name spiral
+ * @param {Object} options Object containing all the optional following parameters as key value pairs:
+ * @param {number} stretch controls the rotations per cycle ratio, where 1 = 1 cycle / 360 degrees
+ * @param {number} size the diameter of the spiral
+ * @param {number} thickness line thickness
+ * @param {string} cap style of line ends: butt (default), round, square
+ * @param {string} inset number of rotations before spiral starts (default 3)
+ * @param {string} playheadColor color of playhead, defaults to white
+ * @param {number} playheadLength length of playhead in rotations, defaults to 0.02
+ * @param {number} playheadThickness thickness of playheadrotations, defaults to thickness
+ * @param {number} padding space around spiral
+ * @param {number} steady steadyness of spiral vs playhead. 1 = spiral doesn't move, playhead does.
+ * @param {number} activeColor color of active segment. defaults to foreground of theme
+ * @param {number} inactiveColor color of inactive segments. defaults to gutterForeground of theme
+ * @param {boolean} colorizeInactive wether or not to colorize inactive segments, defaults to 0
+ * @param {boolean} fade wether or not past and future should fade out. defaults to 1
+ * @param {boolean} logSpiral wether or not the spiral should be logarithmic. defaults to 0
+ * @example
+ * note("c2 a2 eb2")
+ * .euclid(5,8)
+ * .s('sawtooth')
+ * .lpenv(4).lpf(300)
+ * ._spiral({ steady: .96 })
+ */
 Pattern.prototype.spiral = function (options = {}) {
   return this.onPaint((ctx, time, haps, drawTime) => drawSpiral({ ctx, time, haps, drawTime, ...options }));
 };

packages/embed/package.json

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

packages/hs2js/.npmignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+vite.config.js

packages/hs2js/LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    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/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

packages/hs2js/README.md

@@ -0,0 +1,127 @@
+# hs2js
+
+Experimental haskell in javascript interpreter. Many haskell features are not implemented.
+This projects mainly exists to be able to write and interpret [Tidal Cycles](https://tidalcycles.org/) code in the browser,
+as part of [Strudel](https://github.com/tidalcycles/strudel). This project could only exist thanks to [tree-sitter-haskell](https://github.com/tree-sitter/tree-sitter-haskell).
+
+## Installation
+
+### Via Script Tag
+
+You can load the library directly from a script tag via unpkg:
+
+```html
+<script src="https://unpkg.com/hs2js@0.0.3"></script>
+<button id="hello">hello</button>
+<script>
+  hs2js.setBase('https://unpkg.com/hs2js@0.0.3/dist/');
+  hs2js.loadParser().then(()=>{
+    document.getElementById('hello').addEventListener('click', () => {
+      hs2js.evaluate('alert "hello from haskell!"');
+    });
+  })
+</script>
+```
+
+### Via npm
+
+You need to add `postinstall` to your `package.json` script to copy the parser to your `public` folder:
+
+```json
+{
+  "scripts": {
+    "postinstall": "cp node_modules/hs2js/dist/tree-sitter.wasm public && cp node_modules/hs2js/dist/tree-sitter-haskell.wasm public"
+  }
+}
+```
+
+Depending on your setup, replace `public` with the folder that will serve your assets to `/`. Then install the package:
+
+```sh
+npm i hs2js
+```
+
+and use it:
+
+```js
+import * as hs2js from 'hs2js';
+hs2js.loadParser();
+document.getElementById('hello').addEventListener('click', () => {
+  hs2js.evaluate('alert "hello from haskell!"');
+});
+```
+
+## API
+
+These are all functions exported by the package:
+
+### evaluate
+
+Evaluates a piece of haskell code
+
+- `code`: [valid](https://github.com/tree-sitter/tree-sitter-haskell?tab=readme-ov-file#supported-language-extensions) haskell code
+- `scope`: global scope, defaults to globalThis. Allows you to pass an object of your own functions / variables from JS to Haskell.
+- `ops`: mapping for custom infix operator
+
+Example:
+
+```js
+// simple
+hs2js.evaluate(`2 + 2`) // = 4
+// passing variables via scope:
+hs2js.evaluate(`a + b`, { a: 1, b: 2 }) // = 3
+// custom operator
+hs2js.evaluate(`2 |* 3`, {}, { '|*': (l, r) => l * r }) // = 6
+```
+
+### parse
+
+[Parses](https://github.com/tree-sitter/tree-sitter-haskell) a piece of haskell code, returning its AST representation.
+
+Example:
+
+```js
+const ast = hs2js.parse(`2 + 2`)
+console.log(ast.toString())
+// (haskell declarations: (declarations (top_splice (apply function: (variable) argument: (literal (integer))))))
+```
+
+### run
+
+Evaluates `rootNode` of haskell AST (used by evaluate internally).
+
+- `rootNode`: haskell AST root node, as returned by `parse`
+- `scope`: see evaluate
+- `ops`: see evaluate
+
+Example:
+
+```js
+const ast = hs2js.parse(`2 + 3`);
+const res = hs2js.run(ast.rootNode);
+console.log(res); // = 5
+```
+
+### loadParser
+
+Loads and caches the parser by fetching `tree-sitter.wasm` and `tree-sitter-haskell.wasm`.
+Make sure to call and await this function before calling `parse` or `evaluate`.
+
+```js
+hs2js.loadParser().then(() => hs2js.evaluate('alert "ready"'))
+```
+
+### setBase
+
+Sets the base path where the WASM files are expected by `loadParser`. Defaults to `/`.
+Expects `tree-sitter.wasm` and `tree-sitter-haskell.wasm` to be present.
+Can either be a relative path or a URL.
+
+```js
+hs2js.setBase('https://unpkg.com/hs2js@0.0.4/dist/');
+hs2js.loadParser(); 
+/* loads 
+- https://unpkg.com/hs2js@0.0.4/dist/tree-sitter.wasm
+- https://unpkg.com/hs2js@0.0.4/dist/tree-sitter-haskell.wasm
+*/
+```

packages/hs2js/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "hs2js",
+  "version": "0.1.0",
+  "description": "Experimental Haskell in JavaScript interpreter",
+  "main": "src/index.mjs",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs"
+  },
+  "scripts": {
+    "build-wasm": "tree-sitter build-wasm node_modules/tree-sitter-haskell && mv tree-sitter-haskell.wasm ./dist/ && cp node_modules/web-tree-sitter/tree-sitter.wasm ./dist/",
+    "build": "vite build && npm run build-wasm",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "haskell",
+    "javascript"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel",
+  "dependencies": {
+    "web-tree-sitter": "^0.24.7"
+  },
+  "devDependencies": {
+    "tree-sitter-haskell": "^0.23.1",
+    "vite": "^6.0.11"
+  }
+}

packages/hs2js/pnpm-lock.yaml

@@ -0,0 +1,520 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  web-tree-sitter:
+    specifier: ^0.20.8
+    version: 0.20.8
+
+devDependencies:
+  tree-sitter-haskell:
+    specifier: ^0.21.0
+    version: 0.21.0(tree-sitter@0.21.1)
+  vite:
+    specifier: ^5.0.10
+    version: 5.2.11
+
+packages:
+
+  /@esbuild/aix-ppc64@0.20.2:
+    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.20.2:
+    resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.20.2:
+    resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.20.2:
+    resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.20.2:
+    resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.20.2:
+    resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.20.2:
+    resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.20.2:
+    resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.20.2:
+    resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.20.2:
+    resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.20.2:
+    resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.20.2:
+    resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.20.2:
+    resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.20.2:
+    resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.20.2:
+    resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.20.2:
+    resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.20.2:
+    resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.20.2:
+    resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.20.2:
+    resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.20.2:
+    resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.20.2:
+    resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.20.2:
+    resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.20.2:
+    resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm-eabi@4.17.2:
+    resolution: {integrity: sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.17.2:
+    resolution: {integrity: sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.17.2:
+    resolution: {integrity: sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.17.2:
+    resolution: {integrity: sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.17.2:
+    resolution: {integrity: sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-musleabihf@4.17.2:
+    resolution: {integrity: sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.17.2:
+    resolution: {integrity: sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.17.2:
+    resolution: {integrity: sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-powerpc64le-gnu@4.17.2:
+    resolution: {integrity: sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.17.2:
+    resolution: {integrity: sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-s390x-gnu@4.17.2:
+    resolution: {integrity: sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.17.2:
+    resolution: {integrity: sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.17.2:
+    resolution: {integrity: sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.17.2:
+    resolution: {integrity: sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.17.2:
+    resolution: {integrity: sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.17.2:
+    resolution: {integrity: sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /esbuild@0.20.2:
+    resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.20.2
+      '@esbuild/android-arm': 0.20.2
+      '@esbuild/android-arm64': 0.20.2
+      '@esbuild/android-x64': 0.20.2
+      '@esbuild/darwin-arm64': 0.20.2
+      '@esbuild/darwin-x64': 0.20.2
+      '@esbuild/freebsd-arm64': 0.20.2
+      '@esbuild/freebsd-x64': 0.20.2
+      '@esbuild/linux-arm': 0.20.2
+      '@esbuild/linux-arm64': 0.20.2
+      '@esbuild/linux-ia32': 0.20.2
+      '@esbuild/linux-loong64': 0.20.2
+      '@esbuild/linux-mips64el': 0.20.2
+      '@esbuild/linux-ppc64': 0.20.2
+      '@esbuild/linux-riscv64': 0.20.2
+      '@esbuild/linux-s390x': 0.20.2
+      '@esbuild/linux-x64': 0.20.2
+      '@esbuild/netbsd-x64': 0.20.2
+      '@esbuild/openbsd-x64': 0.20.2
+      '@esbuild/sunos-x64': 0.20.2
+      '@esbuild/win32-arm64': 0.20.2
+      '@esbuild/win32-ia32': 0.20.2
+      '@esbuild/win32-x64': 0.20.2
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /node-addon-api@8.0.0:
+    resolution: {integrity: sha512-ipO7rsHEBqa9STO5C5T10fj732ml+5kLN1cAG8/jdHd56ldQeGj3Q7+scUS+VHK/qy1zLEwC4wMK5+yM0btPvw==}
+    engines: {node: ^18 || ^20 || >= 21}
+    dev: true
+
+  /node-gyp-build@4.8.1:
+    resolution: {integrity: sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==}
+    hasBin: true
+    dev: true
+
+  /picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+    dev: true
+
+  /postcss@8.4.38:
+    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+    dev: true
+
+  /rollup@4.17.2:
+    resolution: {integrity: sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.17.2
+      '@rollup/rollup-android-arm64': 4.17.2
+      '@rollup/rollup-darwin-arm64': 4.17.2
+      '@rollup/rollup-darwin-x64': 4.17.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.17.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.17.2
+      '@rollup/rollup-linux-arm64-gnu': 4.17.2
+      '@rollup/rollup-linux-arm64-musl': 4.17.2
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.17.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.17.2
+      '@rollup/rollup-linux-s390x-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-musl': 4.17.2
+      '@rollup/rollup-win32-arm64-msvc': 4.17.2
+      '@rollup/rollup-win32-ia32-msvc': 4.17.2
+      '@rollup/rollup-win32-x64-msvc': 4.17.2
+      fsevents: 2.3.3
+    dev: true
+
+  /source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /tree-sitter-haskell@0.21.0(tree-sitter@0.21.1):
+    resolution: {integrity: sha512-b2RLegPHuYPh7nJ3YKWgkWnFYxmYlQDE8TDJuNH+iuNuBcCMYyaA9JlJlMHfCvf7DmJNPtqqbO9Kh9NXEmbatQ==}
+    requiresBuild: true
+    peerDependencies:
+      tree-sitter: ^0.21.0
+      tree_sitter: '*'
+    peerDependenciesMeta:
+      tree_sitter:
+        optional: true
+    dependencies:
+      node-addon-api: 8.0.0
+      node-gyp-build: 4.8.1
+      tree-sitter: 0.21.1
+    dev: true
+
+  /tree-sitter@0.21.1:
+    resolution: {integrity: sha512-7dxoA6kYvtgWw80265MyqJlkRl4yawIjO7S5MigytjELkX43fV2WsAXzsNfO7sBpPPCF5Gp0+XzHk0DwLCq3xQ==}
+    requiresBuild: true
+    dependencies:
+      node-addon-api: 8.0.0
+      node-gyp-build: 4.8.1
+    dev: true
+
+  /vite@5.2.11:
+    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.17.2
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /web-tree-sitter@0.20.8:
+    resolution: {integrity: sha512-weOVgZ3aAARgdnb220GqYuh7+rZU0Ka9k9yfKtGAzEYMa6GgiCzW9JjQRJyCJakvibQW+dfjJdihjInKuuCAUQ==}
+    dev: false