add node-web-audio-api variant

.eslintignore

@@ -0,0 +1,25 @@
+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/node/pattern.mjs

.eslintrc.json

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

.forgejo/workflows/deploy.yml

@@ -1,37 +0,0 @@
-name: Build and Deploy
-
-on: [workflow_dispatch]
-
-# Allow one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: docker
-    env:
-      SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9.12.2
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          # cache: "pnpm"
-      - name: Install Dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Deploy
-        run: |
-          eval $(ssh-agent -s)
-          echo "$SSH_PRIVATE_KEY" | ssh-add -
-          apt update && apt install -y rsync
-          mkdir ~/.ssh
-          ssh-keyscan matrix.toplap.org  > ~/.ssh/known_hosts
-          rsync -atv --delete --delete-after --progress ./website/dist/ strudel@matrix.toplap.org:/home/strudel/deploy

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Build and Deploy
+
+on: [workflow_dispatch]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  deployments: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.11.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload entire repository
+          path: "./website/dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/tauri.yml

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

.github/workflows/test.yml

@@ -1,22 +1,20 @@
 name: Strudel tests
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build:
-    runs-on: docker
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [20]
 
     steps:
       - uses: actions/checkout@v4
-      - name: apt install ztd
-        run: apt update && apt install -y zstd
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         with:
-          version: 9.12.2
-      - uses: actions/setup-node@v4
+          version: 8.11.0
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.gitignore

@@ -130,4 +130,3 @@ fabric.properties
 
 samples/*
 !samples/README.md
-.idea/

.prettierignore

@@ -11,6 +11,4 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 **/dev-dist
 website/.astro
-!tidal-drum-machines.json
-!tidal-drum-machines-alias.json
-.pnpm-store
+packages/node/pattern.mjs

CONTRIBUTING.md

@@ -2,22 +2,12 @@
 
 Thanks for wanting to contribute!!! There are many ways you can add value to this project
 
-## Move to codeberg
-
-We are currently in the process of moving from github to codeberg -- not everything is working, please bear with us.
-
-To update your local clone, you can run this command:
-
-```
-git remote set-url origin git@codeberg.org:uzu/strudel.git
-```
-
-
 ## Communication Channels
 
 To get in touch with the contributors, either
 
-- [join the Tidal Discord Channel](https://discord.com/invite/HGEdXmRkzT) and go to the #strudel channel
+- open a [github discussion](https://github.com/tidalcycles/strudel/discussions) or
+- [join the Tidal Discord Channel](https://discord.gg/remJ6gQA) and go to the #strudel channel
 - Find related discussions on the [tidal club forum](https://club.tidalcycles.org/)
 
 ## Ask a Question
@@ -42,7 +32,7 @@ Use one of the Communication Channels listed above.
 ## Improve the Docs
 
 If you find some weak spots in the [docs](https://strudel.cc/workshop/getting-started/),
-you can edit each file directly on codeburg. (we are currently fixing the "Edit this page" links in the right sidebar)
+you can edit each file directly on github via the "Edit this page" link located in the right sidebar.
 
 ## Propose a Feature
 
@@ -51,7 +41,7 @@ Maybe you even want to help with the implementation of that feature!
 
 ## Report a Bug
 
-If you've found a bug, or some behaviour that does not seem right, you are welcome to file an [issue](https://codeberg.org/uzu/strudel/issues).
+If you've found a bug, or some behaviour that does not seem right, you are welcome to file an [issue](https://github.com/tidalcycles/strudel/issues).
 Please check that it has not been reported before.
 
 ## Fix a Bug
@@ -81,7 +71,7 @@ To get the project up and running for development, make sure you have installed:
 then, do the following:
 
 ```sh
-git clone https://codeberg.org/uzu/strudel.git && cd strudel
+git clone https://github.com/tidalcycles/strudel.git && cd strudel
 pnpm i # install at root to symlink packages
 pnpm start # start repl
 ```
@@ -123,7 +113,7 @@ You can run the same check with `pnpm check`
 
 ## Package Workflow
 
-The project is split into multiple [packages](https://codeberg.org/uzu/strudel/src/branch/main/packages) with independent versioning.
+The project is split into multiple [packages](https://github.com/tidalcycles/strudel/tree/main/packages) with independent versioning.
 When you run `pnpm i` on the root folder, [pnpm workspaces](https://pnpm.io/workspaces) will install all dependencies of all subpackages. This will allow any js file to import `@strudel/<package-name>` to get the local version,
 allowing to develop multiple packages at the same time.
 
@@ -140,102 +130,20 @@ 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. if everything looks ok, run this:
-
-pnpm --filter "./packages/**" publish --access public
+# the last command was only a dry-run, make sure everything looks ok, if yes, run the same command without flag
 ```
 
 To manually publish a single package, increase the version in the `package.json`, then run `pnpm publish`.
 Important: Always publish with `pnpm`, as `npm` does not support overriding main files in `publishConfig`, which is done in all the packages.
 
+### New Packages
 
-## useful commands
+To add a new package, you have to publish it manually the first time, using:
 
 ```sh
-#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
+cd packages/<package-name> && pnpm publish --access public
 ```
 
-## version tag patching
-
-here's a little guide on how to patch patterns in the database to prevent breaking old patterns due to breaking changes in newer versions.
-
-the general tactic is to use `// @version x.y` to tag a pattern with a specific strudel version. when a pattern is evaluated, this metadata will de-activate any breaking changes that came after the specified version. 
-for example, in version 1.1, the default value for `fanchor` was changed from `0.5` to `0`.
-if play a pattern that was made before that change, sounds that use filter evenlopes can sound very different, so by adding `// @version 1.0` will make it sound like it used to.
-before releasing a new version with breaking changes, we can edit all patterns in the database, inserting the version tag they were created under:
-
-as an example, to release version 1.2, do the following:
-
-1. get date range
-
-```sh
-# get date of last version:
-git log -1 --format=%aI @strudel/core@1.1.0
-# 2024-05-31T23:07:26+02:00
-
-# get date of current version:
-git log -1 --format=%aI @strudel/core@1.2.0
-# 2025-05-01T12:39:24+02:00
-# might also use todays timestamp if version is not yet released
-```
-
-now we know, all patterns between these 2 dates have to receive a version tag (unless they already have one).
-
-2. get patterns in question
-
-```sql
-SELECT *
-FROM code_v1
-WHERE code NOT LIKE '%@version%'
-AND created_at > '2024-05-31T23:07:26+02:00'
-AND created_at < '2025-05-01T12:39:24+02:00'
-ORDER BY created_at ASC;
-```
-
-this gives us all unversioned patterns that were saved between 1.1.0 and 1.2.0. in this case, it's 9373 patterns!
-
-3. insert version tags
-
-we are now ready to insert the version tag to these patterns.
-before updating thousands of patterns, it's probably a good idea to test if a single one gets udpated:
-
-```sql
-UPDATE code_v1
-SET code = code || E'\n// @version 1.1'
-WHERE hash = 'Ns2sMB40yIw4';
-```
-
-after [verifying](https://strudel.cc/?Ns2sMB40yIw4) that the version tag has been added, let's insert it everywhere:
-
-```sql
-UPDATE code_v1
-SET code = code || E'\n// @version 1.1'
-WHERE code NOT LIKE '%@version%'
-AND created_at > '2024-05-31T23:07:26+02:00'
-AND created_at < '2025-05-01T12:39:24+02:00'
-```
-
-4. verify
-
-we can verify that the edits worked by querying all patterns that contain the new version tag:
-
-```sql
-SELECT *
-FROM code_v1
-WHERE code LIKE '%@version 1.1%'
-AND created_at > '2024-05-31T23:07:26+02:00'
-AND created_at < '2025-05-01T12:39:24+02:00'
-ORDER BY created_at ASC;
-```
-
-
 ## Have Fun
 
 Remember to have fun, and that this project is driven by the passion of volunteers!

README.md

@@ -1,9 +1,8 @@
 # strudel
 
-Live coding patterns on the web
-https://strudel.cc/
+[![Strudel test status](https://github.com/tidalcycles/strudel/actions/workflows/test.yml/badge.svg)](https://github.com/tidalcycles/strudel/actions)
 
-Development is moving to https://codeberg.org/uzu/strudel
+An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This software is a bit more stable now, but please continue to tread carefully.
 
 - Try it here: <https://strudel.cc>
 - Docs: <https://strudel.cc/learn>
@@ -15,16 +14,10 @@ Development is moving to https://codeberg.org/uzu/strudel
 
 After cloning the project, you can run the REPL locally:
 
-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
-   ```
+```bash
+pnpm i
+pnpm dev
+```
 
 ## Using Strudel In Your Project
 
@@ -32,13 +25,15 @@ This project is organized into many [packages](./packages), which are also avail
 
 Read more about how to use these in your own project [here](https://strudel.cc/technical-manual/project-start).
 
-You will need to abide by the terms of the [GNU Affero Public Licence v3](LICENSE). As such, Strudel code can only be shared within free/open source projects under the same license -- see the license for details.
-
-Licensing info for the default sound banks can be found over on the [dough-samples](https://github.com/felixroos/dough-samples/blob/main/README.md) repository.
-
 ## Contributing
 
-There are many ways to contribute to this project! See [contribution guide](./CONTRIBUTING.md). You can find the full list of contributors [here](https://codeberg.org/uzu/strudel/activity/contributors).
+There are many ways to contribute to this project! See [contribution guide](./CONTRIBUTING.md).
+
+<a href="https://github.com/tidalcycles/strudel/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tidalcycles/strudel" />
+</a>
+
+Made with [contrib.rocks](https://contrib.rocks).
 
 ## Community
 

bench/tunes.bench.mjs

@@ -1,22 +0,0 @@
-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);
-    });
-  });
-});

docs/iclc2023-paper/iclc2023.html

@@ -1,954 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="Content-Style-Type" content="text/css" />
-    <meta name="generator" content="pandoc" />
-    <meta name="date" content="2022-12-14" />
-    <title>Strudel: live coding patterns on the Web</title>
-    <style type="text/css">
-      code {
-        white-space: pre;
-      }
-    </style>
-    <style type="text/css">
-      pre > code.sourceCode {
-        white-space: pre;
-        position: relative;
-      }
-      pre > code.sourceCode > span {
-        display: inline-block;
-        line-height: 1.25;
-      }
-      pre > code.sourceCode > span:empty {
-        height: 1.2em;
-      }
-      .sourceCode {
-        overflow: visible;
-      }
-      code.sourceCode > span {
-        color: inherit;
-        text-decoration: inherit;
-      }
-      div.sourceCode {
-        margin: 1em 0;
-      }
-      pre.sourceCode {
-        margin: 0;
-      }
-      @media screen {
-        div.sourceCode {
-          overflow: auto;
-        }
-      }
-      @media print {
-        pre > code.sourceCode {
-          white-space: pre-wrap;
-        }
-        pre > code.sourceCode > span {
-          text-indent: -5em;
-          padding-left: 5em;
-        }
-      }
-      pre.numberSource code {
-        counter-reset: source-line 0;
-      }
-      pre.numberSource code > span {
-        position: relative;
-        left: -4em;
-        counter-increment: source-line;
-      }
-      pre.numberSource code > span > a:first-child::before {
-        content: counter(source-line);
-        position: relative;
-        left: -1em;
-        text-align: right;
-        vertical-align: baseline;
-        border: none;
-        display: inline-block;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        padding: 0 4px;
-        width: 4em;
-        color: #aaaaaa;
-      }
-      pre.numberSource {
-        margin-left: 3em;
-        border-left: 1px solid #aaaaaa;
-        padding-left: 4px;
-      }
-      div.sourceCode {
-      }
-      @media screen {
-        pre > code.sourceCode > span > a:first-child::before {
-          text-decoration: underline;
-        }
-      }
-      code span.al {
-        color: #ff0000;
-        font-weight: bold;
-      } /* Alert */
-      code span.an {
-        color: #60a0b0;
-        font-weight: bold;
-        font-style: italic;
-      } /* Annotation */
-      code span.at {
-        color: #7d9029;
-      } /* Attribute */
-      code span.bn {
-        color: #40a070;
-      } /* BaseN */
-      code span.bu {
-        color: #008000;
-      } /* BuiltIn */
-      code span.cf {
-        color: #007020;
-        font-weight: bold;
-      } /* ControlFlow */
-      code span.ch {
-        color: #4070a0;
-      } /* Char */
-      code span.cn {
-        color: #880000;
-      } /* Constant */
-      code span.co {
-        color: #60a0b0;
-        font-style: italic;
-      } /* Comment */
-      code span.cv {
-        color: #60a0b0;
-        font-weight: bold;
-        font-style: italic;
-      } /* CommentVar */
-      code span.do {
-        color: #ba2121;
-        font-style: italic;
-      } /* Documentation */
-      code span.dt {
-        color: #902000;
-      } /* DataType */
-      code span.dv {
-        color: #40a070;
-      } /* DecVal */
-      code span.er {
-        color: #ff0000;
-        font-weight: bold;
-      } /* Error */
-      code span.ex {
-      } /* Extension */
-      code span.fl {
-        color: #40a070;
-      } /* Float */
-      code span.fu {
-        color: #06287e;
-      } /* Function */
-      code span.im {
-        color: #008000;
-        font-weight: bold;
-      } /* Import */
-      code span.in {
-        color: #60a0b0;
-        font-weight: bold;
-        font-style: italic;
-      } /* Information */
-      code span.kw {
-        color: #007020;
-        font-weight: bold;
-      } /* Keyword */
-      code span.op {
-        color: #666666;
-      } /* Operator */
-      code span.ot {
-        color: #007020;
-      } /* Other */
-      code span.pp {
-        color: #bc7a00;
-      } /* Preprocessor */
-      code span.sc {
-        color: #4070a0;
-      } /* SpecialChar */
-      code span.ss {
-        color: #bb6688;
-      } /* SpecialString */
-      code span.st {
-        color: #4070a0;
-      } /* String */
-      code span.va {
-        color: #19177c;
-      } /* Variable */
-      code span.vs {
-        color: #4070a0;
-      } /* VerbatimString */
-      code span.wa {
-        color: #60a0b0;
-        font-weight: bold;
-        font-style: italic;
-      } /* Warning */
-    </style>
-    <link rel="stylesheet" href="css/iclc.css" />
-  </head>
-  <body>
-    <div id="header">
-      <h1 class="title">Strudel: live coding patterns on the Web</h1>
-      <ul id="authorlist">
-        <li>true</li>
-        <li>true</li>
-      </ul>
-      <h3 class="date">2022-12-14</h3>
-    </div>
-
-    <h2 class="abstract">Abstract</h2>
-    <div id="abstract">
-      <p>
-        This paper introduces Strudel, which brings the TidalCycles approach to live coding algorithmic patterns to
-        native JavaScript and the web. We begin by giving a little background of the first year of development, before
-        sharing some detail about its implementation and examples of use. We go on to outline the wide range of
-        synthesis and other outputs available in Strudel, including WebAudio, MIDI, OSC (for SuperDirt), WebSerial and
-        CSound, and introduce Strudel’s REPL live editor, including its built-in visualisations. We then compare Strudel
-        with Tidal, the trade-offs involved between JavaScript and Haskell, and the unique capabilities offered by
-        Strudel for aligning patterns.
-      </p>
-    </div>
-
-    <h1 data-number="1" id="introduction"><span class="header-section-number">1</span> Introduction</h1>
-    <p>
-      In the following paper, we introduce <em>Strudel</em>, an alternative implementation of the TidalCycles (or
-      ‘Tidal’ for short) live coding system, using the JavaScript programming language. Strudel is an attempt to make
-      live coding more accessible, by creating a system that runs entirely in the browser, while opening Tidal’s
-      approach to algorithmic patterns
-      <span class="citation" data-cites="mcleanAlgorithmicPattern2020a">(Mclean 2020)</span> up to modern audio/visual
-      web technologies. The Strudel REPL is a live code editor dedicated to manipulating patterns while they play, with
-      builtin visual feedback. While Strudel is written in JavaScript, the API is optimized for simplicity and
-      readability by applying code transformations on the syntax tree level, allowing language operations that would
-      otherwise be impossible. The application supports multiple ways to output sound, including Tone.js, Web Audio
-      Nodes, OSC (Open Sound Control) messages, Web Serial, Web MIDI and Csound. The project is split into multiple
-      packages, allowing granular reuse in other applications. Apart from TidalCycles, Strudel draws inspiration from
-      many prior existing projects like TidalVortex
-      <span class="citation" data-cites="mcleanTidalVortexZero2022">(McLean et al. 2022)</span>, Gibber
-      <span class="citation" data-cites="robertsGibberLiveCoding2012">(Roberts and Kuchera-morin 2012)</span>, Estuary
-      <span class="citation" data-cites="ogbornEstuaryBrowserbasedCollaborative2017">(Ogborn et al. 2017)</span>, Hydra
-      <span class="citation" data-cites="jackHydra2022">(Jack [2022] 2022)</span>, Ocarina
-      <span class="citation" data-cites="solomonPurescriptocarina2022">(Solomon [2021] 2022)</span> and Feedforward
-      <span class="citation" data-cites="mcleanFeedforward2020">(McLean 2020)</span>. This paper expands the Strudel
-      Demo paper for the Web Audio Conference 2022
-      <span class="citation" data-cites="StrudelWAC2022">(Roos and McLean 2022)</span>.
-    </p>
-    <p>
-      The first tentative commit to the Strudel project was on 22nd January 2022 by Alex McLean, with the core
-      representation implemented over the following few days. Although this was his first attempt at a JavaScript-based
-      application, by 27th January, Alex had managed to upload the initial version to the ‘npm’ javascript package
-      database, sharing with the wider community for comment. By 4th February, Felix Roos had discovered Strudel and
-      contributed a ‘REPL’ user interface to it, and then contributed a scheduler the next day, so that Strudel could
-      already make sound. At this point, Alex and Felix shared ownership to the repository, and the project has since
-      proved to be a productive confluence of Felix’s own work into music representation and visualisation, with Alex’s
-      experience with making Tidal. Felix has since become the primary contributor to Strudel, with Alex continuing to
-      jump between developing both Strudel and Tidal. Aspects of Strudel’s development have therefore fed back into
-      TidalCycles, and both systems have maintained a shared conceptual underpinning. We plan to continue working
-      towards feature parity between these systems, although within the syntactical trade-offs and library ecosystems of
-      JavaScript and Haskell, some divergence is inevitable and healthy.
-    </p>
-    <p>
-      Over the first year of its life, Strudel is now a fully-fledged live coding environment, porting Tidal’s core
-      represention of patterns, pattern transformations, and mininotation for polymetric sequences, combined with a
-      wealth of features for synthesising and visualising those patterns.
-    </p>
-    <h1 data-number="2" id="from-tidal-to-strudel-and-back">
-      <span class="header-section-number">2</span> From Tidal to Strudel and back
-    </h1>
-    <p>
-      As mentioned above, the original Tidal is implemented as a domain specific language (DSL) embedded in the Haskell
-      pure functional programming language, and takes advantage of Haskell’s terse syntax and advanced, ‘strong’ type
-      system. JavaScript on the other hand, is a multi-paradigm programming language, with a dynamic type system.
-      Because Tidal leans heavily on many of Haskell’s more unique features, it was not always clear that it could
-      meaningfully be ported to a multi-paradigm scripting language. However, this possibility was already demonstrated
-      with an earlier port to Python [TidalVortex;
-      <span class="citation" data-cites="mcleanTidalVortexZero2022">McLean et al. (2022)</span>], and we have now
-      successfully implemented Tidal’s pure functional representation of patterns in Strudel, including partial
-      application, currying, and the functor, applicative and monadic structures that underlie Tidal’s expressive
-      pattern transformations. The result is a terse and highly composable system, where everything is either a pattern,
-      or a function for combining and manipulating patterns, offering a rich creative ground for exploration.
-    </p>
-    <p>
-      This development process has been far from a one-way port, however. The process of porting Tidal’s concepts has
-      also opened up new possibilities, some just from revisiting every design decision, and some from the particular
-      affordances and constraints offered by JavaScript. This has lead to new features (and indeed bugfixes) that have
-      found their way back to Tidal where appropriate, and ongoing work that we will return to in the conclusion of this
-      paper.
-    </p>
-    <h1 data-number="3" id="representing-patterns">
-      <span class="header-section-number">3</span> Representing Patterns
-    </h1>
-    <p>
-      Patterns are the essence of Tidal. Its patterns are abstract entities that represent flows of time as functions,
-      adapting a technique called pure functional reactive programming. Taking a time span as its input, a Pattern can
-      output a set of events that happen within that time span. It depends on the structure of the Pattern how the
-      events are located in time. From now on, this process of generating events from a time span will be called
-      <strong>querying</strong>. Example:
-    </p>
-    <div class="sourceCode" id="cb1">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> pattern <span class="op">=</span> <span class="fu">sequence</span>(c3<span class="op">,</span> [e3<span class="op">,</span> g3])</span>
-<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> events <span class="op">=</span> pattern<span class="op">.</span><span class="fu">queryArc</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>)</span>
-<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(events<span class="op">.</span><span class="fu">map</span>(e <span class="kw">=&gt;</span> e<span class="op">.</span><span class="fu">show</span>()))</span></code></pre>
-    </div>
-    <p>
-      In this example, we create a pattern using the <code>sequence</code> function and <strong>query</strong> it for
-      the time span from <code>0</code> to <code>1</code>. Those numbers represent units of time called
-      <strong>cycles</strong>. The length of one cycle depends on the tempo, which defaults to one cycle per second. The
-      resulting events are:
-    </p>
-    <div class="sourceCode" id="cb2">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>[{ <span class="dt">value</span><span class="op">:</span> <span class="st">&#39;c3&#39;</span><span class="op">,</span> <span class="dt">begin</span><span class="op">:</span> <span class="dv">0</span><span class="op">,</span> <span class="dt">end</span><span class="op">:</span> <span class="dv">1</span><span class="op">/</span><span class="dv">2</span> }<span class="op">,</span></span>
-<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>{ <span class="dt">value</span><span class="op">:</span> <span class="st">&#39;e3&#39;</span><span class="op">,</span> <span class="dt">begin</span><span class="op">:</span> <span class="dv">1</span><span class="op">/</span><span class="dv">2</span><span class="op">,</span> <span class="dt">end</span><span class="op">:</span> <span class="dv">3</span><span class="op">/</span><span class="dv">4</span> }<span class="op">,</span></span>
-<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>{ <span class="dt">value</span><span class="op">:</span> <span class="st">&#39;g3&#39;</span><span class="op">,</span> <span class="dt">begin</span><span class="op">:</span> <span class="dv">3</span><span class="op">/</span><span class="dv">4</span><span class="op">,</span> <span class="dt">end</span><span class="op">:</span> <span class="dv">1</span> }]</span></code></pre>
-    </div>
-    <p>
-      Each event has a value, a begin time and an end time, where time is represented as a fraction. In the above case,
-      the events are placed in sequential order, where c3 takes the first half, and e3 and g3 together take the second
-      half. This temporal placement is the result of the <code>sequence</code> function, which divides its arguments
-      equally over one cycle. If an argument is an array, the same rule applies to that part of the cycle. In the
-      example, e3 and g3 are divided equally over the second half of the whole cycle.
-    </p>
-    <p>
-      The above examples do not represent how Strudel is used in practice. In the live coding editor, the user only has
-      to type in the pattern itself, the querying will be handled by the scheduler. The scheduler will repeatedly query
-      the pattern for events, which are then scheduled as sound synthesis or other event triggers. Also, the above event
-      data structure has been simplified for readability.
-    </p>
-    <figure>
-      <img
-        src="images/strudel-screenshot2.png"
-        style="width: 60%"
-        alt="Screenshot of the Strudel ‘REPL’ live coding editor, including piano-roll visualisation."
-      />
-      <figcaption aria-hidden="true">
-        Screenshot of the Strudel ‘REPL’ live coding editor, including piano-roll visualisation.
-      </figcaption>
-    </figure>
-    <h1 data-number="4" id="making-patterns"><span class="header-section-number">4</span> Making Patterns</h1>
-    <p>
-      In practice, the end-user live coder will not deal with constructing patterns directly, but will rather build
-      patterns using Strudel’s extensive combinator library to create, combine and transform patterns.
-    </p>
-    <p>
-      The live coder will rarely use the <code>sequence</code> function as seen above, as sequencing is implicit in many
-      functions. For example in the following, the <code>note</code> function constructs a pattern of notes, sequencing
-      its arguments in the same manner as the previous example.
-    </p>
-    <div class="sourceCode" id="cb3">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">note</span>(c3<span class="op">,</span> [e3<span class="op">,</span> g3])</span></code></pre>
-    </div>
-    <p>
-      Perhaps more often, they will use the mini-notation for even terser notation of rhythmic sequences: [^This last
-      example is also valid Tidal code, albeit the parenthesis is not required in its Haskell syntax in this case. Tidal
-      does not support passing sequences as lists directly to the <code>note</code> function, however.].
-    </p>
-    <div class="sourceCode" id="cb4">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="fu">note</span>(<span class="st">&quot;c3 [e3 g3]&quot;</span>)</span></code></pre>
-    </div>
-    <p>
-      Such sequences are often treated only a starting point for manipulation, where they then undergo pattern
-      transformations such as repetition, symmetry, interference/combination or randomisation, potentially at multiple
-      timescales. Because Strudel patterns are represented as pure functions of time rather than as data structures,
-      very long and complex generative results can be represented and manipulated without having to store the resulting
-      sequences in memory.
-    </p>
-    <h1 data-number="5" id="pattern-example"><span class="header-section-number">5</span> Pattern Example</h1>
-    <p>
-      The following example showcases how patterns can be utilized to create musical complexity from simple parts, using
-      repetition and interference:
-    </p>
-    <div class="sourceCode" id="cb5">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;&lt;0 2 [4 6](3,4,1) 3&gt;&quot;</span></span>
-<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">off</span>(<span class="dv">1</span><span class="op">/</span><span class="dv">4</span><span class="op">,</span> <span class="fu">add</span>(<span class="dv">2</span>))</span>
-<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">off</span>(<span class="dv">1</span><span class="op">/</span><span class="dv">2</span><span class="op">,</span> <span class="fu">add</span>(<span class="dv">6</span>))</span>
-<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">scale</span>(<span class="st">&#39;D minor&#39;</span>)</span>
-<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">legato</span>(<span class="op">.</span><span class="dv">25</span>)</span>
-<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">note</span>()<span class="op">.</span><span class="fu">s</span>(<span class="st">&quot;sawtooth square&quot;</span>)</span>
-<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a><span class="op">.</span><span class="fu">delay</span>(<span class="op">.</span><span class="dv">8</span>)<span class="op">.</span><span class="fu">delaytime</span>(<span class="op">.</span><span class="dv">125</span>)</span></code></pre>
-    </div>
-    <p>
-      The pattern starts with a rhythm of numbers in mini notation, which are later interpreted inside the scale of D
-      minor. The first line could also be expressed without mini notation:
-    </p>
-    <div class="sourceCode" id="cb6">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="fu">cat</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> [<span class="dv">4</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">.</span><span class="fu">euclid</span>(<span class="dv">3</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">1</span>)<span class="op">,</span> <span class="dv">3</span>)</span></code></pre>
-    </div>
-    <p>
-      These numbers then undergo various pattern transformations. Here is a short description of all the functions used:
-    </p>
-    <ul>
-      <li><code>cat</code>: play elements sequentially, where each lasts one cycle</li>
-      <li><code>brackets</code>: elements inside brackets are divided equally over the time of their parent</li>
-      <li>
-        <code>.euclid(p, s, o)</code>: place p pulses evenly over s steps, with offset o
-        <span class="citation" data-cites="toussaintEuclideanAlgorithmGenerates2005">(Toussaint 2005)</span>
-      </li>
-      <li>
-        <code>.off(n, f)</code>: layers a pattern on top of itself, with the new layer offset by n cycles, and with
-        function f applied
-      </li>
-      <li><code>.legato(n)</code>: multiply the duration of all events in a pattern by a factor of n</li>
-      <li>
-        <code>.echo(t, n, v)</code>: copy each event t times, with n cycles in between each copy, decreasing velocity by
-        v
-      </li>
-      <li><code>.note()</code>: interpretes values as notes</li>
-      <li><code>.s(name)</code>: play back each event with the given sound</li>
-      <li><code>.delay(wet)</code>: add delay</li>
-      <li><code>.delaytime(t)</code>: set delay time</li>
-    </ul>
-    <p>Much of the above will be familiar to Tidal users.</p>
-    <!-- This example shows some of Strudel's unique support for chords and transposition familiar to students of Western music theory. This differs a little from Tidal's approach and thanks to the integration of the javascript library XXX (*TODO* ? or is this all your work Felix?), Strudel's support for tonal transformations such as voice leading is perhaps respects more advanced than Tidal. -->
-    <h1 data-number="6" id="ways-to-make-sound-and-other-events">
-      <span class="header-section-number">6</span> Ways to make Sound (and other events)
-    </h1>
-    <p>To generate sound, Strudel supports bindings for different outputs:</p>
-    <ul>
-      <li>Tone.js (deprecated)</li>
-      <li>Web Audio API</li>
-      <li>WebDirt, a js recreation of Tidal’s <em>Dirt</em> sample engine (deprecated)</li>
-      <li>OSC via osc-js, compatible with superdirt</li>
-      <li>Csound via the Csound WebAssembly build</li>
-      <li>MIDI via WebMIDI</li>
-      <li>Serial via WebSerial</li>
-    </ul>
-    <p>
-      At first, we used Tone.js as sound output, but it proved to be limited for the use case of Strudel, where each
-      individual event could potentially have a completely different audio graph. While the Web Audio API takes a
-      <em>fire-and-forget</em> approach, creating a lot of Tone.js instruments and effects causes performance issues
-      quickly. For that reason, we chose to search for alternatives.
-    </p>
-    <p>
-      Strudel’s new default output uses the Web Audio API to create a new audio graph for each event. It currently
-      supports basic oscillators, sample playback, various effects and an experimental support for soundfonts.
-    </p>
-    <p>
-      WebDirt <span class="citation" data-cites="ogbornDktr0WebDirt2022">(Ogborn [2016] 2022)</span> was created as part
-      of the Estuary Live Coding System
-      <span class="citation" data-cites="ogbornEstuaryBrowserbasedCollaborative2017">(Ogborn et al. 2017)</span>, and
-      proved to be a solid choice for handling samples in Strudel as well. We are however focused on working more
-      directly with the Web Audio API to be able to integrate new features more tightly.
-    </p>
-    <p>
-      Using the OSC protocol via Strudel’s provided Node.js-based OSC proxy server, it is possible to send network
-      messages to trigger events. This is mainly used to render sound using SuperDirt
-      <span class="citation" data-cites="SuperDirt2022">(<em>SuperDirt</em> [2015] 2022)</span>, which is the
-      well-developed Supercollider-based synthesis framework that Tidal live coders generally use as standard.
-    </p>
-    <p>
-      Recently, the experimental integration of Csound proved to bring a new dimension of sound design capabilities to
-      Strudel. Thanks to the WebAssembly distribution of this classic system
-      <span class="citation" data-cites="CsoundWebAssembly">(Yi, Lazzarini, and Costello 2018)</span>, Csound
-      ‘orchestra’ synthesisers can be embedded in and then patterned with Strudel code.
-    </p>
-    <p>
-      MIDI output can also be used to send MIDI messages to either external instruments or to other programs on the same
-      device. Unlike OSC, Strudel is able to send MIDI directly without requiring additional proxy software, but only
-      from web browsers that support it (at the time of writing, this means Chromium-based browsers).
-    </p>
-    <p>
-      Finally, Strudel supports Serial output, for example to trigger events via microcontrollers. This has already been
-      explored for robot choreography by Kate Sicchio and Alex McLean, via a performance presented at the International
-      Conference on Live Interfaces 2022.
-    </p>
-    <h1 data-number="7" id="the-strudel-repl"><span class="header-section-number">7</span> The Strudel REPL</h1>
-    <p>
-      While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the
-      Strudel REPL[^REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive
-      programming interface from computing heritage, usually for a commandline interface but also applied to live coding
-      editors.], which is a browser-based live coding environment. This live code editor is dedicated to manipulating
-      Strudel patterns while they play. The REPL features built-in visual feedback, which highlights which elements in
-      the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is
-      designed to support both learning and live use of Strudel.
-    </p>
-    <p>
-      Besides a UI for playback control and meta information, the main part of the REPL interface is the code editor
-      powered by CodeMirror. In it, the user can edit and evaluate pattern code live, using one of the available
-      synthesis outputs to create music and/or sound art. The control flow of the REPL follows 3 basic steps:
-    </p>
-    <ol type="1">
-      <li>
-        The user writes and updates code. Each update transpiles and evaluates it to create a
-        <code>Pattern</code> instance
-      </li>
-      <li>
-        While the REPL is running, the <code>Scheduler</code> queries the active <code>Pattern</code> by a regular
-        interval, generating <code>Events</code> (also known as <code>Haps</code> in Strudel) for the next time span.
-      </li>
-      <li>
-        For each scheduling tick, all generated <code>Events</code> are triggered by calling their
-        <code>onTrigger</code> method, which is set by the output.
-      </li>
-    </ol>
-    <figure>
-      <img
-        src="https://github.com/tidalcycles/strudel/raw/talk/talk/public/strudelflow.png?raw=true"
-        style="width: 43%"
-        alt="REPL control flow"
-      />
-      <figcaption aria-hidden="true">REPL control flow</figcaption>
-    </figure>
-    <h2 data-number="7.1" id="user-code"><span class="header-section-number">7.1</span> User Code</h2>
-    <p>To create a <code>Pattern</code> from the user code, two steps are needed:</p>
-    <ol type="1">
-      <li>Transpile the JS input code to make it functional</li>
-      <li>Evaluate the transpiled code</li>
-    </ol>
-    <h3 data-number="7.1.1" id="transpilation-evaluation">
-      <span class="header-section-number">7.1.1</span> Transpilation &amp; Evaluation
-    </h3>
-    <p>
-      In the JavaScript world, using transpilation is a common practise to be able to use language features that are not
-      supported by the base language. Tools like <code>babel</code> will transpile code that contains unsupported
-      language features into a version of the code without those features.
-    </p>
-    <p>
-      In the same tradition, Strudel can add a transpilation step to simplify the user code in the context of live
-      coding. For example, the Strudel REPL lets the user create mini notation patterns using just double quoted
-      strings, while single quoted strings remain what they are:
-    </p>
-    <div class="sourceCode" id="cb7">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;c3 [e3 g3]*2&quot;</span></span></code></pre>
-    </div>
-    <p>is transpiled to:</p>
-    <div class="sourceCode" id="cb8">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="fu">mini</span>(<span class="st">&quot;c3 [e3 g3]*2&quot;</span>)<span class="op">.</span><span class="fu">withMiniLocation</span>([<span class="dv">1</span><span class="op">,</span><span class="dv">0</span><span class="op">,</span><span class="dv">0</span>]<span class="op">,</span>[<span class="dv">1</span><span class="op">,</span><span class="dv">14</span><span class="op">,</span><span class="dv">14</span>])</span></code></pre>
-    </div>
-    <p>
-      Here, the string is wrapped in <code>mini</code>, which will create a pattern from a mini notation string.
-      Additionally, the <code>withMiniLocation</code> method passes the original source code location of the string to
-      the pattern, which enables highlighting active events.
-    </p>
-    <p>
-      Other convenient features like pseudo variables, operator overloading and top level await are possible with
-      transpilation.
-    </p>
-    <p>After the transpilation, the code is ready to be evaluated into a <code>Pattern</code>.</p>
-    <p>
-      Behind the scenes, the user code string is parsed with <code>acorn</code>, turning it into an Abstract Syntax Tree
-      (AST). The AST allows changing the structure of the code before generating the transpiled version using
-      <code>escodegen</code>.
-    </p>
-    <h3 data-number="7.1.2" id="mini-notation"><span class="header-section-number">7.1.2</span> Mini Notation</h3>
-    <p>
-      While the transpilation allows JavaScript to express Patterns in a less verbose way, it is still preferable to use
-      the Mini Notation as a more compact way to express rhythm. Strudel aims to provide the same Mini Notation features
-      and syntax as used in Tidal.
-    </p>
-    <p>
-      The Mini Notation parser is implemented using <code>peggy</code>, which allows generating performant parsers for
-      Domain Specific Languages (DSLs) using a concise grammar notation. The generated parser turns the Mini Notation
-      string into an AST which is used to call the respective Strudel functions with the given structure. For example,
-      <code>"c3 [e3 g3]*2"</code> will result in the following calls:
-    </p>
-    <div class="sourceCode" id="cb9">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="fu">seq</span>(</span>
-<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>  <span class="fu">reify</span>(<span class="st">&#39;c3&#39;</span>)<span class="op">.</span><span class="fu">withLocation</span>([<span class="dv">1</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">1</span>]<span class="op">,</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">4</span><span class="op">,</span><span class="dv">4</span>])<span class="op">,</span></span>
-<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a>  <span class="fu">seq</span>(</span>
-<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a>    <span class="fu">reify</span>(<span class="st">&#39;e3&#39;</span>)<span class="op">.</span><span class="fu">withLocation</span>([<span class="dv">1</span><span class="op">,</span><span class="dv">5</span><span class="op">,</span><span class="dv">5</span>]<span class="op">,</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">8</span><span class="op">,</span><span class="dv">8</span>])<span class="op">,</span></span>
-<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a>    <span class="fu">reify</span>(<span class="st">&#39;g3&#39;</span>)<span class="op">.</span><span class="fu">withLocation</span>([<span class="dv">1</span><span class="op">,</span><span class="dv">8</span><span class="op">,</span><span class="dv">8</span>]<span class="op">,</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">10</span><span class="op">,</span><span class="dv">10</span>])<span class="op">,</span></span>
-<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a>  )<span class="op">.</span><span class="fu">fast</span>(<span class="dv">2</span>)</span>
-<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a>)</span></code></pre>
-    </div>
-    <h3 data-number="7.1.3" id="highlighting-locations">
-      <span class="header-section-number">7.1.3</span> Highlighting Locations
-    </h3>
-    <p>
-      As seen in the examples above, both the JS and the Mini Notation parser add source code locations using
-      <code>withMiniLocation</code> and <code>withLocation</code> methods. While the JS parser adds locations relative
-      to the user code as a whole, the Mini Notation adds locations relative to the position of the mini notation
-      string. The absolute location of elements within Mini Notation can be calculated by simply adding both locations
-      together. This absolute location can be used to highlight active events in real time.
-    </p>
-    <h2 data-number="7.2" id="scheduling-events"><span class="header-section-number">7.2</span> Scheduling Events</h2>
-    <p>
-      After an instance of <code>Pattern</code> is obtained from the user code, it is used by the scheduler to get
-      queried for events. Once started, the scheduler runs at a fixed interval to query active pattern for events
-      withing the current interval’s time span. A simplified implementation looks like this:
-    </p>
-    <div class="sourceCode" id="cb10">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> pattern <span class="op">=</span> <span class="fu">seq</span>(<span class="st">&#39;c3&#39;</span><span class="op">,</span> [<span class="st">&#39;e3&#39;</span><span class="op">,</span> <span class="st">&#39;g3&#39;</span>])<span class="op">;</span> <span class="co">// pattern from user</span></span>
-<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> interval <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span> <span class="co">// query interval in seconds</span></span>
-<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> time <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> <span class="co">// beginning of current time span</span></span>
-<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> minLatency <span class="op">=</span> <span class="op">.</span><span class="dv">1</span><span class="op">;</span> <span class="co">// min time before a hap should trigger</span></span>
-<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a><span class="pp">setInterval</span>(() <span class="kw">=&gt;</span> {</span>
-<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> haps <span class="op">=</span> pattern<span class="op">.</span><span class="fu">queryArc</span>(time<span class="op">,</span> time <span class="op">+</span> interval)<span class="op">;</span></span>
-<span id="cb10-7"><a href="#cb10-7" aria-hidden="true" tabindex="-1"></a>  time <span class="op">+=</span> interval<span class="op">;</span> <span class="co">// increment time</span></span>
-<span id="cb10-8"><a href="#cb10-8" aria-hidden="true" tabindex="-1"></a>  haps<span class="op">.</span><span class="fu">forEach</span>((hap) <span class="kw">=&gt;</span> {</span>
-<span id="cb10-9"><a href="#cb10-9" aria-hidden="true" tabindex="-1"></a>    <span class="kw">const</span> deadline <span class="op">=</span> hap<span class="op">.</span><span class="at">whole</span><span class="op">.</span><span class="at">begin</span> <span class="op">-</span> time <span class="op">+</span> minLatency<span class="op">;</span></span>
-<span id="cb10-10"><a href="#cb10-10" aria-hidden="true" tabindex="-1"></a>    <span class="fu">onTrigger</span>(hap<span class="op">,</span> deadline<span class="op">,</span> duration)<span class="op">;</span></span>
-<span id="cb10-11"><a href="#cb10-11" aria-hidden="true" tabindex="-1"></a>  })<span class="op">;</span></span>
-<span id="cb10-12"><a href="#cb10-12" aria-hidden="true" tabindex="-1"></a>}<span class="op">,</span> interval <span class="op">*</span> <span class="dv">1000</span>)<span class="op">;</span> <span class="co">// query each &quot;interval&quot; seconds</span></span></code></pre>
-    </div>
-    <p>
-      Note that the above code is simplified for illustrative purposes. The actual implementation has to work around
-      imprecise callbacks of <code>setInterval</code>. More about the implementation details can be read in
-      <a href="https://loophole-letters.vercel.app/web-audio-scheduling">this blog post</a>.
-    </p>
-    <p>
-      The fact that <code>Pattern.queryArc</code> is a pure function that maps a time span to a set of events allows us
-      to choose any interval we like without changing the resulting output. It also means that when the pattern is
-      changed from outside, the next scheduling callback will work with the new pattern, keeping its clock running.
-    </p>
-    <p>
-      The latency between the time the pattern is evaluated and the change is heard is between
-      <code>minLatency</code> and <code>interval + minLatency</code>, in our example between 100ms and 600ms. In
-      Strudel, the current query interval is 50ms with a minLatency of 100ms, meaning the latency is between 50ms and
-      150ms.
-    </p>
-    <h2 data-number="7.3" id="output"><span class="header-section-number">7.3</span> Output</h2>
-    <p>
-      The last step is to trigger each event in the chosen output. This is where the given time and value of each event
-      is used to generate audio or any other form of time based output. The default output of the Strudel REPL is the
-      WebAudio output. To understand what an output does, we first have to understand what control parameters are.
-    </p>
-    <h3 data-number="7.3.1" id="control-parameters">
-      <span class="header-section-number">7.3.1</span> Control Parameters
-    </h3>
-    <p>
-      To be able to manipulate multiple aspects of sound in parallel, so called control parameters are used to shape the
-      value of each event. Example:
-    </p>
-    <div class="sourceCode" id="cb11">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">note</span>(<span class="st">&quot;c3 e3&quot;</span>)<span class="op">.</span><span class="fu">cutoff</span>(<span class="dv">1000</span>)<span class="op">.</span><span class="fu">s</span>(<span class="st">&#39;sawtooth&#39;</span>)</span>
-<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a>  <span class="op">.</span><span class="fu">queryArc</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>)<span class="op">.</span><span class="fu">map</span>(hap <span class="kw">=&gt;</span> hap<span class="op">.</span><span class="at">value</span>)</span>
-<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a><span class="co">/* [</span></span>
-<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a><span class="co">  { note: &#39;c3&#39;, cutoff: 1000, s: &#39;sawtooth&#39; }</span></span>
-<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a><span class="co">  { note: &#39;e3&#39;, cutoff: 1000, s: &#39;sawtooth&#39; }</span></span>
-<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a><span class="co">] */</span></span></code></pre>
-    </div>
-    <p>
-      Here, the control parameter functions <code>note</code>, <code>cutoff</code> and <code>s</code> are used, where
-      each controls a different property in the value object. Each control parameter function accepts a primitive value,
-      a list of values to be sequenced into a <code>Pattern</code>, or a <code>Pattern</code>. In the example,
-      <code>note</code> gets a <code>Pattern</code> from a Mini Notation expression (double quoted), while
-      <code>cutoff</code> and <code>s</code> are given a <code>Number</code> and a (single quoted)
-      <code>String</code> respectively.
-    </p>
-    <p>
-      Strudel comes with a large default set of control parameter functions that are based on the ones used by Tidal and
-      SuperDirt, focusing on music and audio terminology. It is however possible to create custom control paramters for
-      any purpose:
-    </p>
-    <div class="sourceCode" id="cb12">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> { x<span class="op">,</span> y } <span class="op">=</span> <span class="fu">createParams</span>(<span class="st">&#39;x&#39;</span><span class="op">,</span> <span class="st">&#39;y&#39;</span>)</span>
-<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a><span class="fu">x</span>(sine<span class="op">.</span><span class="fu">range</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">200</span>))<span class="op">.</span><span class="fu">y</span>(cosine<span class="op">.</span><span class="fu">range</span>(<span class="dv">0</span><span class="op">,</span><span class="dv">200</span>))</span></code></pre>
-    </div>
-    <p>
-      This example creates the custom control parameters <code>x</code> and <code>y</code> which are then used to form a
-      pattern that descibes the coordinates of a circle.
-    </p>
-    <h3 data-number="7.3.2" id="outputs"><span class="header-section-number">7.3.2</span> Outputs</h3>
-    <p>
-      Now that we know how the value of an event is manipulated using control parameters, we can look at how outputs can
-      use that value to generate anything. The scheduler above was calling the <code>onTrigger</code> function which is
-      used to implement the output. A very simple version of the web audio output could look like this:
-    </p>
-    <div class="sourceCode" id="cb13">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">onTrigger</span>(hap<span class="op">,</span> deadline<span class="op">,</span> duration) {</span>
-<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> { note } <span class="op">=</span> hap<span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
-<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> time <span class="op">=</span> <span class="fu">getAudioContext</span>()<span class="op">.</span><span class="at">currentTime</span> <span class="op">+</span> deadline<span class="op">;</span></span>
-<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> o <span class="op">=</span> <span class="fu">getAudioContext</span>()<span class="op">.</span><span class="fu">createOscillator</span>()<span class="op">;</span></span>
-<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a>  o<span class="op">.</span><span class="at">frequency</span><span class="op">.</span><span class="at">value</span> <span class="op">=</span> <span class="fu">getFreq</span>(note)<span class="op">;</span></span>
-<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a>  o<span class="op">.</span><span class="fu">start</span>(time)<span class="op">;</span></span>
-<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a>  o<span class="op">.</span><span class="fu">stop</span>(time <span class="op">+</span> <span class="bu">event</span><span class="op">.</span><span class="at">duration</span>)<span class="op">;</span></span>
-<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a>  o<span class="op">.</span><span class="fu">connect</span>(<span class="fu">getAudioContext</span>()<span class="op">.</span><span class="at">destination</span>)<span class="op">;</span></span>
-<span id="cb13-9"><a href="#cb13-9" aria-hidden="true" tabindex="-1"></a>}</span></code></pre>
-    </div>
-    <p>
-      The above example will create an <code>OscillatorNode</code> for each event, where the frequency is controlled by
-      the <code>note</code> param. In essence, this is how the WebAudio API output of Strudel works, only with many more
-      parameters to control synths, samples and effects.
-    </p>
-    <h1 data-number="8" id="pattern-alignment-and-combination">
-      <span class="header-section-number">8</span> Pattern alignment and combination
-    </h1>
-    <p>
-      One core aspect of Strudel, inherited from Tidal, is the flexible way that patterns can be combined, irrespective
-      of their structure. Its declarative approach means a live coder does not have to think about the details of
-      <em>how</em> this is done, only <em>what</em> is to be done.
-    </p>
-    <p>
-      As a simple example, consider two number patterns <code>"0 [1 2] 3"</code>, and <code>"10 20"</code>. The first
-      has three contiguous steps of equal lengths, with the second step broken down into two substeps, giving four
-      events in total. There are a very large number of ways in which the structure of these two patterns could be
-      combined, but the default method in both Strudel and Tidal is to line up the cycles of the two patterns, and then
-      take events from the first pattern and match them with those in the second pattern. Therefore, the following two
-      lines are equivalent:
-    </p>
-    <div class="sourceCode" id="cb14">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;0 [1 2] 3&quot;</span><span class="op">.</span><span class="fu">add</span>(<span class="st">&quot;10 20&quot;</span>)</span>
-<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;10 [11 22] 23&quot;</span></span></code></pre>
-    </div>
-    <p>
-      Where the events only partially overlap, they are treated as fragments of the event in the first pattern. This is
-      a little difficult to conceptualise, but lets start by comparing the two patterns in the following example:
-    </p>
-    <div class="sourceCode" id="cb15">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;0 1 2&quot;</span><span class="op">.</span><span class="fu">add</span>(<span class="st">&quot;10 20&quot;</span>)</span>
-<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;10 [11 21] 20&quot;</span></span></code></pre>
-    </div>
-    <p>
-      They are similar to the previous example in that the number <code>1</code> is split in two, with its two halves
-      added to <code>10</code> and <code>20</code> respectively. However, the <code>11</code> ‘remembers’ that it is a
-      fragment of that original <code>1</code> event, and so is treated as having a duration of a third of a cycle,
-      despite only being active for a sixth of a cycle. Likewise, the <code>21</code> is also a fragment of that
-      original <code>1</code> event, but a fragment of its second half. Because the start of its event is missing, it
-      wouldn’t actually trigger a sound (unless it underwent further pattern transformations/combinations).
-    </p>
-    <p>
-      In practice, the effect of this default, implicit method for combining two patterns is that the second pattern is
-      added <em>in</em> to the first one, and indeed this can be made explicit:
-    </p>
-    <div class="sourceCode" id="cb16">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;0 1 2&quot;</span><span class="op">.</span><span class="at">add</span><span class="op">.</span><span class="fu">in</span>(<span class="st">&quot;10 20&quot;</span>)</span></code></pre>
-    </div>
-    <p>This makes way for other ways to align the pattern, and several are already defined, in particular:</p>
-    <ul>
-      <li>
-        <code>in</code> - as explained above, aligns cycles, and applies values from the pattern on the right
-        <em>in</em> to the pattern on the left.
-      </li>
-      <li>
-        <code>out</code> - as with <code>in</code>, but values are applied <em>out</em> of the pattern on the left
-        (i.e. <em>in</em> to the one on the right).
-      </li>
-      <li>
-        <code>mix</code> - structures from both patterns are combined, so that the new events are not fragments but are
-        created at intersections of events from both sides.
-      </li>
-      <li>
-        <code>squeeze</code> - cycles from the pattern on the right are squeezed into events on the left. So that
-        e.g. <code>"0 1 2".add.squeeze("10 20")</code> is equivalent to <code>"[10 20] [11 21] [12 22]"</code>.
-      </li>
-      <li>
-        <code>squeezeout</code> - as with <code>squeeze</code>, but cycles from the left are squeezed into events on the
-        right. So, <code>"0 1 2".add.squeezeout("10 20")</code> is equivalent to <code>[10 11 12] [20 21 22]</code>.
-      </li>
-      <li>
-        <code>trig</code> is similar to <code>squeezeout</code> in that cycles from the right are aligned with events on
-        the left. However those cycles are not ‘squeezed’, rather they are truncated to fit the event. So
-        <code>"0 1 2 3 4 5 6 7".add.trig("10 [20 30]")</code> would be equivalent to
-        <code>10 11 12 13 20 21 30 31</code>. In effect, events on the right ‘trigger’ cycles on the left.
-      </li>
-      <li>
-        <code>trigzero</code> is similar to <code>trig</code>, but the pattern is ‘triggered’ from its very first cycle,
-        rather than from the current cycle. <code>trig</code> and <code>trigzero</code> therefore only give different
-        results where the leftmost pattern differs from one cycle to the next.
-      </li>
-    </ul>
-    <p>
-      We will save going deeper into the background, design and practicalities of these alignment functions for future
-      publications. However in the next section, we take them as a case study for looking at the different design
-      affordances offered by Haskell to Tidal, and JavaScript to Strudel.
-    </p>
-    <h1 data-number="9" id="comparing-strudel-and-haskell-in-use">
-      <span class="header-section-number">9</span> Comparing Strudel and Haskell in use
-    </h1>
-    <p>
-      Unlike Haskell, JavaScript lacks the ability to define custom infix operators, or change the meaning of existing
-      ones. So the above Strudel example of <code>"0 1 2".add.out("10 20")</code> is equivalent to the Tidal expression
-      <code>"0 1 2" +| "10 20"</code>, where the vertical bar in the operator <code>+|</code> stands for
-      <code>out</code> (where <code>a |+ b</code> would be equivalent of <code>a.add.in(b)</code>).
-    </p>
-    <p>
-      From this we can already see that Tidal tends towards brevity through mixing infix operators with functions, and
-      Strudel tends towards spelling out operations which are joined together with the <code>.</code> operator. This
-      then is the design trade-off of Tidal’s tersity, versus Strudel’s simplicity.
-    </p>
-    <p>To demonstrate this, consider the following Tidal pattern:</p>
-    <pre
-      class="tidal"
-    ><code>iter 4 $ every 3 (||+ n &quot;10 20&quot;) $ (n &quot;0 1 3&quot;) # s &quot;triangle&quot; # crush 4</code></pre>
-    <p>This can be directly translated to the Strudel equivalent:</p>
-    <div class="sourceCode" id="cb18">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="fu">iter</span>(<span class="dv">4</span><span class="op">,</span> <span class="fu">every</span>(<span class="dv">3</span><span class="op">,</span> add<span class="op">.</span><span class="fu">squeeze</span>(<span class="st">&quot;10 20&quot;</span>)<span class="op">,</span> <span class="fu">n</span>(<span class="st">&quot;0 1 3&quot;</span>)<span class="op">.</span><span class="fu">s</span>(<span class="st">&quot;triangle&quot;</span>)<span class="op">.</span><span class="fu">crush</span>(<span class="dv">4</span>)))</span></code></pre>
-    </div>
-    <p>Although for a more canonical Strudel expression, we would reorder it as:</p>
-    <div class="sourceCode" id="cb19">
-      <pre
-        class="sourceCode js"
-      ><code class="sourceCode javascript"><span id="cb19-1"><a href="#cb19-1" aria-hidden="true" tabindex="-1"></a><span class="fu">n</span>(<span class="st">&quot;0 1 3&quot;</span>)<span class="op">.</span><span class="fu">every</span>(<span class="dv">3</span><span class="op">,</span> add<span class="op">.</span><span class="fu">squeeze</span>(<span class="st">&quot;10 20&quot;</span>))<span class="op">.</span><span class="fu">iter</span>(<span class="dv">4</span>)<span class="op">.</span><span class="fu">s</span>(<span class="st">&quot;triangle&quot;</span>)<span class="op">.</span><span class="fu">crush</span>(<span class="dv">4</span>)</span></code></pre>
-    </div>
-    <p>
-      The Strudel example uses the <code>.</code> method call operator for all operations and combinations, whereas the
-      Tidal example has <code>#</code> for the default method for combining patterns and uses infix operators for other
-      methods. The lack of parenthesis in the Tidal example is partly due to the way that arguments are applied to
-      Haskell’s functions, and partly due to the use of the <code>$</code> operator as an alternative way to establish
-      precedence and control the order of evaluation.
-    </p>
-    <p>
-      Considering the above, we argue that the Haskell syntax is a little cleaner, but that the Strudel syntax is easier
-      to learn. Our informal observation is that while Haskell’s dollar <code>$</code> operator is very useful in making
-      code easier to work with, it is one of the most difficult aspects of Tidal use for beginners to learn. On the
-      other hand, the deeper levels of parenthesis in Strudel code can be difficult to keep track of, especially while
-      coding under pressure of live musical performance. However this difficulty can be largely be mitigated by
-      reordering expressions, and further mitigated by supporting editor features.
-    </p>
-    <p>
-      With Strudel, we have little choice but to embrace the affordances and constraints offered by JavaScript, and
-      while designing a domain-specific language entirely based on method calls is a challenge, through creative
-      adoption of functional programming techniques like partial application, we are so far very happy with the results.
-      Tidal’s functional reactive approach to pattern-making has in general translated well to JavaScript, and
-      opportunities and constraints have overall traded off to create a very approachable and useable live coding
-      environment.
-    </p>
-    <h2 data-number="9.1" id="the-trade-off-of-flexible-typing">
-      <span class="header-section-number">9.1</span> The trade-off of flexible typing
-    </h2>
-    <p>
-      We have identified one problem with porting Tidal to JavaScript where we have missed Haskell’s strict typing and
-      type inference. In both Tidal and Strudel, time is rational, where any point in time is represented as the ratio
-      of two integers. This allows representation of musical ratios such that are impossible to represent accurately
-      using the more common floating point numbers. However while libraries are available that support rational numbers
-      in JavaScript, the lack of strict typing means that it is easy to implement pattern methods where computationally
-      expensive conversion from floating point to rational numbers are performed late, and therefore often enough to
-      overload the CPUs, due to the large number of iterative calculations required to estimate a ratio for a given
-      floating point number. To mitigate this problem, we might consider moving to TypeScript in the future.
-    </p>
-    <h1 data-number="10" id="future-outlook"><span class="header-section-number">10</span> Future Outlook</h1>
-    <p>
-      The project is still young, with many features on the horizon. As general guiding principles, Strudel aims to be
-    </p>
-    <ol type="1">
-      <li>accessible</li>
-      <li>consistent with Tidal’s approach to pattern</li>
-      <li>modular and extensible</li>
-    </ol>
-    <p>
-      While Haskell’s type system makes it a great language for the ongoing development of Tidal’s inner representation
-      of pattern, JavaScript’s vibrant ecosystem, flexibility and accessibility makes it a great host for more ad-hoc
-      experiments, including interface design. For the future, it is planned to integrate additional alternative sound
-      engines such as Glicol <span class="citation" data-cites="lanChaosprintGlicol2022">(Lan [2020] 2022)</span> and
-      Faust
-      <span class="citation" data-cites="FaustProgrammingLanguage2022"
-        >(<em>Faust - Programming Language for Audio Applications and Plugins</em> [2016] 2022)</span
-      >. Strudel is already approaching feature parity with Tidal, but there are more Tidal functions to be ported, and
-      work to be done to improve compatibility with Tidal’s mininotation. Tidal version 2.0 is under development, which
-      brings a new representation for sequences to its patterns, which will then be brought to Strudel. Besides sound,
-      other ways to render events are being explored, such as graphical, and choreographic output. We are also looking
-      into alternative ways of editing patterns, including multi-user editing for network music, parsing a novel syntax
-      to escape the constraints of javascript, and developing hardware/e-textile interfaces. In summary, there is a lot
-      of fun ahead.
-    </p>
-    <h1 data-number="11" id="links"><span class="header-section-number">11</span> Links</h1>
-    <p>
-      The Strudel REPL is available at <a href="https://strudel.cc" class="uri">https://strudel.cc</a>, including an
-      interactive tutorial. The repository is at
-      <a href="https://github.com/tidalcycles/strudel" class="uri">https://github.com/tidalcycles/strudel</a>, all the
-      code is open source under the AGPL-3.0 License.
-    </p>
-    <h1 data-number="12" id="acknowledgments"><span class="header-section-number">12</span> Acknowledgments</h1>
-    <p>
-      Thanks to the Strudel and wider Tidal, live coding, WebAudio and free/open source software communities for
-      inspiration and support. Alex McLean’s work on this project is supported by a UKRI Future Leaders Fellowship
-      [grant number MR/V025260/1].
-    </p>
-    <h1 class="unnumbered" id="references">References</h1>
-    <div id="refs" class="references csl-bib-body hanging-indent" role="doc-bibliography">
-      <div id="ref-FaustProgrammingLanguage2022" class="csl-entry" role="doc-biblioentry">
-        <em>Faust - Programming Language for Audio Applications and Plugins</em>. (2016) 2022. C++. GRAME.
-        <a href="https://github.com/grame-cncm/faust">https://github.com/grame-cncm/faust</a>.
-      </div>
-      <div id="ref-jackHydra2022" class="csl-entry" role="doc-biblioentry">
-        Jack, Olivia. (2022) 2022. <em>Hydra</em>.
-        <a href="https://github.com/ojack/hydra">https://github.com/ojack/hydra</a>.
-      </div>
-      <div id="ref-lanChaosprintGlicol2022" class="csl-entry" role="doc-biblioentry">
-        Lan, Qichao. (2020) 2022. <em>Chaosprint/Glicol</em>. Rust.
-        <a href="https://github.com/chaosprint/glicol">https://github.com/chaosprint/glicol</a>.
-      </div>
-      <div id="ref-mcleanAlgorithmicPattern2020a" class="csl-entry" role="doc-biblioentry">
-        Mclean, Alex. 2020. <span>“Algorithmic Pattern.”</span> In
-        <em>Proceedings of the International Conference on New Interfaces for Musical Expression</em>, 265--270.
-        Birmingham, UK. <a href="https://zenodo.org/record/4813352">https://zenodo.org/record/4813352</a>.
-      </div>
-      <div id="ref-mcleanFeedforward2020" class="csl-entry" role="doc-biblioentry">
-        McLean, Alex. 2020. <span>“Feedforward.”</span> In
-        <em>Proceedings of New Interfaces for Musical Expression</em>. Birmingham.
-        <a href="https://zenodo.org/record/6353969">https://zenodo.org/record/6353969</a>.
-      </div>
-      <div id="ref-mcleanTidalVortexZero2022" class="csl-entry" role="doc-biblioentry">
-        McLean, Alex, Raphaël Forment, Sylvain Le Beux, and Damián Silvani. 2022. <span>“TidalVortex Zero.”</span> In
-        <em>Proceedings of the 7th International Conference on Live Coding</em>. Limerick, Ireland: Zenodo.
-        <a href="https://doi.org/10.5281/zenodo.6456380">https://doi.org/10.5281/zenodo.6456380</a>.
-      </div>
-      <div id="ref-ogbornDktr0WebDirt2022" class="csl-entry" role="doc-biblioentry">
-        Ogborn, David. (2016) 2022. <em>Dktr0/WebDirt</em>. JavaScript.
-        <a href="https://github.com/dktr0/WebDirt">https://github.com/dktr0/WebDirt</a>.
-      </div>
-      <div id="ref-ogbornEstuaryBrowserbasedCollaborative2017" class="csl-entry" role="doc-biblioentry">
-        Ogborn, David, Jamie Beverley, Luis Navarro del Angel, Eldad Tsabary, and Alex McLean. 2017.
-        <span>“Estuary: Browser-Based Collaborative Projectional Live Coding of Musical Patterns.”</span> In
-        <em>Proceedings of the International Conference on Live Coding</em>, 11. Morelia.
-      </div>
-      <div id="ref-robertsGibberLiveCoding2012" class="csl-entry" role="doc-biblioentry">
-        Roberts, Charles, and Joann Kuchera-morin. 2012. <span>“Gibber: Live Coding Audio in the Browser.”</span> In
-        <em>In Proceedings of the 2012 International Computer Music Conference</em>.
-      </div>
-      <div id="ref-StrudelWAC2022" class="csl-entry" role="doc-biblioentry">
-        Roos, Felix, and Alex McLean. 2022. <span>“Strudel: Algorithmic Patterns for the Web.”</span> In. Zenodo.
-        <a href="https://doi.org/10.5281/zenodo.6768844">https://doi.org/10.5281/zenodo.6768844</a>.
-      </div>
-      <div id="ref-solomonPurescriptocarina2022" class="csl-entry" role="doc-biblioentry">
-        Solomon, Mike. (2021) 2022. <em>Purescript-Ocarina</em>. PureScript.
-        <a href="https://github.com/mikesol/purescript-ocarina">https://github.com/mikesol/purescript-ocarina</a>.
-      </div>
-      <div id="ref-SuperDirt2022" class="csl-entry" role="doc-biblioentry">
-        <em>SuperDirt</em>. (2015) 2022. SuperCollider. musikinformatik.
-        <a href="https://github.com/musikinformatik/SuperDirt">https://github.com/musikinformatik/SuperDirt</a>.
-      </div>
-      <div id="ref-toussaintEuclideanAlgorithmGenerates2005" class="csl-entry" role="doc-biblioentry">
-        Toussaint, Godfried. 2005. <span>“The Euclidean Algorithm Generates Traditional Musical Rhythms.”</span> In
-        <em>In Proceedings of BRIDGES: Mathematical Connections in Art, Music and Science</em>, 47–56.
-        <a href="http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.62.231"
-          >http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.62.231</a
-        >.
-      </div>
-      <div id="ref-CsoundWebAssembly" class="csl-entry" role="doc-biblioentry">
-        Yi, Steven, Victor Lazzarini, and Edward Costello. 2018.
-        <span>“WebAssembly AudioWorklet Csound.”</span> In. Berlin, Germany.
-        <a href="https://mural.maynoothuniversity.ie/16018/">https://mural.maynoothuniversity.ie/16018/</a>.
-      </div>
-    </div>
-  </body>
-</html>

docs/iclc2023-paper/pandoc/iclc.html

@@ -1,63 +0,0 @@
-$if(false)$ This is a pandoc template and should not be edited. $endif$
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" $if(lang)$ lang="$lang$" xml:lang="$lang$" $endif$>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="Content-Style-Type" content="text/css" />
-    <meta name="generator" content="pandoc" />
-    $for(author-meta)$
-    <meta name="author" content="$author-meta$" />
-    $endfor$ $if(date-meta)$
-    <meta name="date" content="$date-meta$" />
-    $endif$
-    <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
-    <style type="text/css">
-      code {
-        white-space: pre;
-      }
-    </style>
-    $if(quotes)$
-    <style type="text/css">
-      q {
-        quotes: '“' '”' '‘' '’';
-      }
-    </style>
-    $endif$ $if(highlighting-css)$
-    <style type="text/css">
-      $highlighting-css$
-    </style>
-    $endif$
-    <link rel="stylesheet" href="css/iclc.css" $if(html5)$$else$type="text/css" $endif$ />
-    $for(css)$
-    <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$ />
-    $endfor$ $if(math)$ $math$ $endif$ $for(header-includes)$ $header-includes$ $endfor$
-  </head>
-  <body>
-    $for(include-before)$ $include-before$ $endfor$ $if(title)$
-    <div id="$idprefix$header">
-      <h1 class="title">$title$</h1>
-      $if(subtitle)$
-      <h1 class="subtitle">$subtitle$</h1>
-      $endif$
-      <ul id="authorlist">
-        $for(author)$
-        <li>$author$</li>
-        $endfor$
-      </ul>
-      $if(date)$
-      <h3 class="date">$date$</h3>
-      $endif$
-    </div>
-    $endif$ $if(toc)$
-    <div id="$idprefix$TOC">$toc$</div>
-    $endif$
-
-    <h2 class="abstract">Abstract</h2>
-    <div id="abstract">
-      $if(abstract)$ $abstract$ $else$ Please provide an abstract in the metadata block at the top of your markdown
-      document. Refer to template.txt for details. $endif$
-    </div>
-
-    $body$ $for(include-after)$ $include-after$ $endfor$
-  </body>
-</html>

docs/technical-manual/index.md

@@ -1,197 +0,0 @@
-This document introduces you to Strudel in a technical sense. 
-
-It is rather out of date, but there might still be useful info below.
-
-If you just want to *use* Strudel, have a look at the [Tutorial](https://strudel.tidalcycles.org/tutorial/).
-
-## Strudel Packages
-
-There are different packages for different purposes. They..
-
-- split up the code into smaller chunks
-- can be selectively used to implement some sort of time based system
-
-Please refer to the individual README files in the [packages folder](https://codeberg.org/uzu/strudel/src/branch/main/packages)
-
-## REPL
-
-The [REPL](https://strudel.tidalcycles.org/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library.
-
-More info in the [REPL README](https://codeberg.org/uzu/strudel/src/branch/main/packages/repl/README.md)
-
-# High Level Overview
-
-<img src="strudelflow.png" width="600" />
-
-## 1. End User Code
-
-The End User Code is written in JavaScript with added syntax sugar. The [eval package](https://github.com/tidalcycles/strudel/tree/main/packages/eval#strudelcycleseval) evaluates the user code
-after a transpilation step, which resolves the syntax sugar. If you don't want the syntax sugar, you can omit the eval package and call the native javascript `eval` instead.
-
-### 🍭 Syntax Sugar
-
-JavaScript Transpilation = converting valid JavaScript to valid JavaScript:
-
-```js
-"c3 [e3 g3]".fast(2)
-```
-
-becomes
-
-```js
-mini('c3 [e3 g3]')
-  .withMiniLocation([1, 0, 0], [1, 11, 11]) // source location
-  .fast(2);
-```
-
-- double quoted strings and backtick strings are turned into `mini` calls (single quoted strings are left as is)
-- The source location is added by chaining `withMiniLocation`, which enables the real time highlighting later
-- (psuedo) variable names that look like notes (like `c4`, `bb2` or `fs3`) are turned into strings
-- support for top level await
-- operator overloading could be implemented in the future
-
-This is how it works:
-
-<img src="https://github.com/tidalcycles/strudel/blob/talk/talk/public/shiftflow.png?raw=true" width="800" />
-
-- The user code is parsed with a [shift parser](https://github.com/shapesecurity/shift-parser-js), generating an AST
-- The AST is transformed to resolve the syntax sugar
-- The AST is used to generate code again (shift-codegen)
-
-Shift will most likely be replaced with acorn in the future, see https://github.com/tidalcycles/strudel/issues/174
-
-### Mini Notation
-
-Another important part of the user code is the mini notation, which allows to express rhythms in a short manner.
-
-- the mini notation is [implemented as a PEG grammar](https://github.com/tidalcycles/strudel/blob/main/packages/mini/krill.pegjs), living in the [mini package](https://github.com/tidalcycles/strudel/tree/main/packages/mini)
-- it is based on [krill](https://github.com/Mdashdotdashn/krill) by Mdashdotdashn
-- the peg grammar is used to generate a parser with [peggyjs](https://peggyjs.org/)
-- the generated parser takes a mini notation string and outputs an AST
-- the AST can then be used to construct a pattern using the regular Strudel API
-
-Here's an example AST:
-
-```json
-{
-  "type_": "pattern",
-  "arguments_": { "alignment": "h" },
-  "source_": [
-    {
-      "type_": "element", "source_": "c3",
-      "location_": { "start": { "offset": 1, "line": 1, "column": 2 }, "end": { "offset": 4, "line": 1, "column": 5 } }
-    },
-    {
-      "type_": "element",
-      "location_": { "start": { "offset": 4, "line": 1, "column": 5 }, "end": { "offset": 11, "line": 1, "column": 12 } }
-      "source_": {
-        "type_": "pattern", "arguments_": { "alignment": "h" },
-        "source_": [
-          {
-            "type_": "element", "source_": "e3",
-            "location_": { "start": { "offset": 5, "line": 1, "column": 6 }, "end": { "offset": 8, "line": 1, "column": 9 } }
-          },
-          {
-            "type_": "element", "source_": "g3",
-            "location_": { "start": { "offset": 8, "line": 1, "column": 9 }, "end": { "offset": 10, "line": 1, "column": 11 } }
-          }
-        ]
-      },
-    }
-  ]
-}
-```
-
-which translates to `seq(c3, seq(e3, g3))`
-
-## 2. Querying & Scheduling
-
-When the user code has been evaluated, we hopefully get a Pattern instance, which we can use to query events from. 
-These events can then be used to trigger side effects in the real world. On that note, Events are mostly called Hap(s) in the codebase, because JS already has a built in `Event` class.
-
-### Querying
-
-> Querying = Asking a Pattern for Events within a certain time span
-
-```js
-seq('c3', ['e3', 'g3']) // <--- Pattern
-  .queryArc(0, 2) // query events within 0 and 2 cycles
-  .map((hap) => hap.showWhole()); // make readable
-```
-
-yields 
-
-```js
-[
-  '0/1 -> 1/2: c3', // cycle 0
-  '1/2 -> 3/4: e3',
-  '3/4 -> 1/1: g3',
-  '1/1 -> 3/2: c3', // cycle 1
-  '3/2 -> 7/4: e3',
-  '7/4 -> 2/1: g3',
-];
-```
-
-### 🗓️ Scheduling
-
-The scheduler will query events repeatedly, creating a possibly endless loop of time slices.
-Here is a simplified example of how it works 
-
-```js
-let step = 0.5; // query interval in seconds
-let tick = 0; // how many intervals have passed
-let pattern = seq('c3', ['e3', 'g3']); // pattern from user
-setInterval(() => {
-  const events = pattern.queryArc(tick * step, ++tick * step);
-  events.forEach((event) => {
-    console.log(event.showWhole());
-    const o = getAudioContext().createOscillator();
-    o.frequency.value = getFreq(event.value);
-    o.start(event.whole.begin);
-    o.stop(event.whole.begin + event.duration);
-    o.connect(getAudioContext().destination);
-  });
-}, step * 1000); // query each "step" seconds
-```
-
-## 3. Sound Output
-
-The third and last step is to use the scheduled events to make sound. 
-Patterns are wrapped with param functions to compose different properties of the sound.
-
-```js
-note("[c2(3,8) [<eb2 g1> bb1]]") // sets frequency
-  .s("<sawtooth square>") // sound source
-  .gain(.5) // turn down volume
-  .cutoff(sine.range(200,1000).slow(4)) // modulated cutoff
-  .slow(2)
-  .out().logValues()`,
-  ]}
-/>
-```
-
-Here is an example Hap value with different properties:
-
-```js
-{ note: 'a4', s: 'sawtooth', gain: 0.5, cutoff: 267 }
-```
-<img src="waa-nodes.png" width="600" />
-
-<div className="text-left">
-
-- Patterns represent just values in time!
-- Suitable for any time based output (music, visuals, movement, .. ?)
-
-### Supported Outputs
-
-At the time of writing this doc, the following outputs are supported:
-
-- Web Audio API `.out()` see [/webaudio](https://github.com/tidalcycles/strudel/tree/main/packages/webaudio)
-- MIDI `.midi()` see [/midi](https://github.com/tidalcycles/strudel/tree/main/packages/midi)
-- OSC `.osc()` see [/osc](https://github.com/tidalcycles/strudel/tree/main/packages/osc)
-- Serial `.serial()` see [/serial](https://github.com/tidalcycles/strudel/tree/main/packages/serial)
-- Tone.js `.tone()` (deprecated?) [/tone](https://github.com/tidalcycles/strudel/tree/main/packages/tone)
-- WebDirt `.webdirt()` (deprecated?) [/webdirt](https://github.com/tidalcycles/strudel/tree/main/packages/webdirt)
-- Speech `.speak()` (experimental) part of [/core](https://github.com/tidalcycles/strudel/tree/main/packages/core)
-
-These could change, so make sure to check the [packages folder](https://github.com/tidalcycles/strudel/tree/main/packages).

eslint.config.mjs

@@ -1,86 +0,0 @@
-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,31 +1,9 @@
 <!doctype html>
-<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>
+<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>

examples/buildless/headless-with-samples.html

@@ -1,24 +1,16 @@
 <!doctype html>
-<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>
+<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>

examples/buildless/hs2js.html

@@ -1,9 +0,0 @@
-<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

@@ -1,98 +0,0 @@
-<!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,7 +1,6 @@
 import { StrudelMirror } from '@strudel/codemirror';
 import { funk42 } from './tunes';
-import { evalScope } from '@strudel/core';
-import { drawPianoroll } from '@strudel/draw';
+import { drawPianoroll, evalScope } from '@strudel/core';
 import './style.css';
 import { initAudioOnFirstClick } from '@strudel/webaudio';
 import { transpiler } from '@strudel/transpiler';
@@ -27,7 +26,6 @@ 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,12 +9,11 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^6.0.11"
+    "vite": "^5.0.10"
   },
   "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": "^6.0.11"
+    "vite": "^5.0.10"
   },
   "dependencies": {
     "@strudel/web": "workspace:*"

examples/minimal-repl/package.json

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

examples/superdough/package.json

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

examples/tidal-repl/.gitignore

@@ -1,27 +0,0 @@
-# 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

@@ -1,10 +0,0 @@
-# @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

@@ -1,32 +0,0 @@
-<!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

@@ -1,83 +0,0 @@
-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

@@ -1,36 +0,0 @@
-{
-  "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://codeberg.org/uzu/strudel.git"
-  },
-  "keywords": [
-    "titdalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://codeberg.org/uzu/strudel/issues"
-  },
-  "homepage": "https://codeberg.org/uzu/strudel#readme",
-  "dependencies": {
-    "@strudel/web": "workspace:*",
-    "hs2js": "workspace:*"
-  },
-  "devDependencies": {
-    "vite": "^6.0.11"
-  }
-}

examples/tidal-repl/public/README.md

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

jsdoc/jsdoc-synonyms.js

@@ -1,6 +1,6 @@
 /*
-jsdoc-synonyms.js - Add support for @synonyms tag
-Copyright (C) 2023 Strudel contributors - see <https://codeberg.org/uzu/strudel/activity/contributors>
+jsdoc-synonyms.js - Add support for @synonym tag
+Copyright (C) 2023 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/midi/midi.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 

my-patterns/README.md

@@ -5,24 +5,22 @@ made into a pattern swatch.
 
 Example: <https://felixroos.github.io/strudel/swatch/>
 
-Please note: These instructions have not been fully tested/adapted since strudel moved to codeberg from github. PRs welcome!
-
 ## deploy
 
-### 1. fork the [strudel repo on codeberg](https://codeberg.org/uzu/strudel.git)
+### 1. fork the [strudel repo on github](https://github.com/tidalcycles/strudel.git)
 
-### 2. clone your fork to your machine `git clone https://codeberg.org/<your-username>/strudel.git strudel && cd strudel`
+### 2. clone your fork to your machine `git clone https://github.com/<your-username>/strudel.git strudel && cd strudel`
 
 ### 3. create a separate branch like `git branch patternuary && git checkout patternuary`
 
 ### 4. save one or more .txt files in the my-patterns folder
 
-### 5. edit `website/public/CNAME` to contain `<your-username>.codeberg.page/strudel`
+### 5. edit `website/public/CNAME` to contain `<your-username>.github.io/strudel`
 
-### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.codeberg.page` and base `/strudel`, like this
+### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.github.io` and base `/strudel`, like this
 
 ```js
-const site = 'https://<your-username>.codeberg.page';
+const site = 'https://<your-username>.github.io';
 const base = '/strudel';
 ```
 
@@ -32,9 +30,15 @@ const base = '/strudel';
 git add . && git commit -m "site config" && git push --set-upstream origin
 ```
 
-### 8. deploy to codeberg pages
+### 8. deploy to github pages
 
-### 9. view your patterns at `<your-username>.codeberg.page/strudel/swatch/`
+- go to settings -> pages and select "Github Actions" as source
+- go to settings -> environments -> github-pages and press the edit button next to `main` and type in `patternuary` (under "Deployment branches")
+- go to Actions -> `Build and Deploy` and click `Run workflow` with branch `patternuary`
+
+### 9. view your patterns at `<your-username>.github.io/strudel/swatch/`
+
+Alternatively, github pages allows you to use a custom domain, like https://mycooldomain.org/swatch/. [See their documentation for details](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site).
 
 ### 10. optional: automatic deployment
 

package.json

@@ -11,7 +11,6 @@
     "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",
@@ -21,7 +20,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 . --quiet",
+    "lint": "eslint . --ext mjs,js --quiet",
     "codeformat": "prettier --write .",
     "format-check": "prettier --check .",
     "report-undocumented": "npm run jsdoc-json && node jsdoc/undocumented.mjs > undocumented.json",
@@ -31,7 +30,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://codeberg.org/uzu/strudel.git"
+    "url": "git+https://github.com/tidalcycles/strudel.git"
   },
   "keywords": [
     "tidalcycles",
@@ -43,7 +42,7 @@
   "author": "Alex McLean <alex@slab.org> (https://slab.org)",
   "license": "AGPL-3.0-or-later",
   "bugs": {
-    "url": "https://codeberg.org/uzu/strudel/issues"
+    "url": "https://github.com/tidalcycles/strudel/issues"
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
@@ -55,23 +54,19 @@
     "@strudel/xen": "workspace:*"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.5",
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.19.0",
-    "@tauri-apps/cli": "^2.2.7",
-    "@vitest/coverage-v8": "3.0.4",
-    "@vitest/ui": "^3.0.4",
-    "acorn": "^8.14.0",
-    "dependency-tree": "^11.0.1",
-    "eslint": "^9.19.0",
-    "eslint-plugin-import": "^2.31.0",
+    "@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",
     "events": "^3.3.0",
-    "globals": "^15.14.0",
-    "jsdoc": "^4.0.4",
+    "jsdoc": "^4.0.2",
     "jsdoc-json": "^2.0.2",
-    "lerna": "^8.1.9",
-    "prettier": "^3.4.2",
-    "vitest": "^3.0.4",
-    "vite-plugin-bundle-audioworklet": "workspace:*"
+    "jsdoc-to-markdown": "^8.0.0",
+    "lerna": "^8.0.1",
+    "prettier": "^3.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "vitest": "^1.1.0"
   }
-}
+}

packages/README.md

@@ -2,4 +2,4 @@
 
 Each folder represents one of the @strudel/* packages [published to npm](https://www.npmjs.com/org/strudel).
 
-To understand how those pieces connect, refer to the [Technical Manual](https://codeberg.org/uzu/strudel/wiki/Technical-Manual) or the individual READMEs.
+To understand how those pieces connect, refer to the [Technical Manual](https://github.com/tidalcycles/strudel/wiki/Technical-Manual) or the individual READMEs.

packages/codemirror/codemirror.mjs

@@ -1,7 +1,6 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-export { toggleComment, toggleBlockComment, toggleLineComment, toggleBlockCommentByLine } from '@codemirror/commands';
 // import { search, highlightSelectionMatches } from '@codemirror/search';
-import { history, indentWithTab } from '@codemirror/commands';
+import { history } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -13,7 +12,7 @@ import {
   lineNumbers,
   drawSelection,
 } from '@codemirror/view';
-import { repl, registerControl } from '@strudel/core';
+import { Pattern, repl } from '@strudel/core';
 import { Drawer, cleanupDraw } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
@@ -37,14 +36,6 @@ const extensions = {
   isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
   isFlashEnabled,
   keybindings,
-  isTabIndentationEnabled: (on) => (on ? keymap.of([indentWithTab]) : []),
-  isMultiCursorEnabled: (on) =>
-    on
-      ? [
-          EditorState.allowMultipleSelections.of(true),
-          EditorView.clickAddsSelectionRange.of((ev) => ev.metaKey || ev.ctrlKey),
-        ]
-      : [],
 };
 const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
 
@@ -59,8 +50,6 @@ export const defaultSettings = {
   isFlashEnabled: true,
   isTooltipEnabled: false,
   isLineWrappingEnabled: false,
-  isTabIndentationEnabled: false,
-  isMultiCursorEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -72,12 +61,11 @@ export const codemirrorSettings = persistentAtom('codemirror-settings', defaultS
 });
 
 // https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root, mondo }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root }) {
   const settings = codemirrorSettings.get();
   const initialSettings = Object.keys(compartments).map((key) =>
     compartments[key].of(extensions[key](parseBooleans(settings[key]))),
   );
-
   initTheme(settings.theme);
   let state = EditorState.create({
     doc: initialCode,
@@ -85,7 +73,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       /* search(),
       highlightSelectionMatches(), */
       ...initialSettings,
-      mondo ? [] : javascript(),
+      javascript(),
       sliderPlugin,
       widgetPlugin,
       // indentOnInput(), // works without. already brought with javascript extension?
@@ -110,8 +98,10 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
           },
           {
             key: 'Alt-.',
-            preventDefault: true,
-            run: () => onStop?.(),
+            run: (_, e) => {
+              e.preventDefault();
+              onStop?.();
+            },
           },
           /* {
           key: 'Ctrl-Shift-.',
@@ -144,50 +134,57 @@ 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, _, painters) => {
+    this.drawer = new Drawer((haps, time) => {
       const currentFrame = haps.filter((hap) => hap.isActive(time));
       this.highlight(currentFrame, time);
-      this.onDraw(haps, time, painters);
+      this.onDraw(haps, time, this.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);
-          if (this.solo) {
-            // stop other repls when this one is started
-            document.dispatchEvent(
-              new CustomEvent('start-repl', {
-                detail: this.id,
-              }),
-            );
-          }
+          // 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(true, id);
+          cleanupDraw(false);
         }
       },
       beforeEval: async () => {
-        cleanupDraw(true, id);
+        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;
+        };
         await this.prebaked;
         await replOptions?.beforeEval?.();
       },
@@ -201,11 +198,8 @@ export class StrudelMirror {
         updateWidgets(this.editor, widgets);
         updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
-        // 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.adjustDrawTime();
+        this.drawer.invalidate();
       },
     });
     this.editor = initEditor({
@@ -219,7 +213,6 @@ export class StrudelMirror {
       },
       onEvaluate: () => this.evaluate(),
       onStop: () => this.stop(),
-      mondo: replOptions.mondo,
     });
     const cmEditor = this.root.querySelector('.cm-editor');
     if (cmEditor) {
@@ -235,14 +228,19 @@ export class StrudelMirror {
 
     // stop this repl when another repl is started
     this.onStartRepl = (e) => {
-      if (this.solo && e.detail !== this.id) {
+      if (e.detail !== this.id) {
         this.stop();
       }
     };
     document.addEventListener('start-repl', this.onStartRepl);
   }
-  draw(haps, time, painters) {
-    painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
+  // 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));
   }
   async drawFirstFrame() {
     if (!this.onDraw) {
@@ -254,7 +252,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.drawer.painters);
+      this.onDraw?.(this.drawer.visibleHaps, -0.001, this.painters);
     } catch (err) {
       console.warn('first frame could not be painted');
     }
@@ -347,17 +345,6 @@ 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) {
@@ -370,12 +357,3 @@ 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/flash.mjs

@@ -11,9 +11,7 @@ export const flashField = StateField.define({
       for (let e of tr.effects) {
         if (e.is(setFlash)) {
           if (e.value && tr.newDoc.length > 0) {
-            const mark = Decoration.mark({
-              attributes: { style: `background-color: rgba(255,255,255, .4); filter: invert(10%)` },
-            });
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
             flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
           } else {
             flash = Decoration.set([]);

packages/codemirror/highlight.mjs

@@ -1,4 +1,4 @@
-import { RangeSetBuilder, StateEffect, StateField, Prec } from '@codemirror/state';
+import { RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
 import { Decoration, EditorView } from '@codemirror/view';
 
 export const setMiniLocations = StateEffect.define();
@@ -93,7 +93,6 @@ 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');
@@ -115,7 +114,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
         to,
         Decoration.mark({
           // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
-          attributes: { style },
+          attributes: { style: `outline: solid 2px ${color}` },
         }),
       );
     }
@@ -134,5 +133,5 @@ export const isPatternHighlightingEnabled = (on, config) => {
     setTimeout(() => {
       updateMiniLocations(config.editor, config.miniLocations);
     }, 100);
-  return on ? Prec.highest(highlightExtension) : [];
+  return on ? highlightExtension : [];
 };

packages/codemirror/keybindings.mjs

@@ -21,11 +21,11 @@ const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
 const keymaps = {
   vim,
   emacs,
-  codemirror: () => keymap.of(defaultKeymap),
   vscode: vscodeExtension,
 };
 
 export function keybindings(name) {
   const active = keymaps[name];
-  return [active ? active() : [], keymap.of(historyKeymap)];
+  return [keymap.of(defaultKeymap), keymap.of(historyKeymap), active ? active() : []];
+  // keymap.of(searchKeymap),
 }

packages/codemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/codemirror",
-  "version": "1.2.2",
+  "version": "1.0.1",
   "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -13,7 +13,7 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://codeberg.org/uzu/strudel.git"
+    "url": "git+https://github.com/tidalcycles/strudel.git"
   },
   "keywords": [
     "tidalcycles",
@@ -28,28 +28,30 @@
   ],
   "license": "AGPL-3.0-or-later",
   "bugs": {
-    "url": "https://codeberg.org/uzu/strudel/issues"
+    "url": "https://github.com/tidalcycles/strudel/issues"
   },
-  "homepage": "https://codeberg.org/uzu/strudel#readme",
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@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",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/search": "^6.5.5",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
+    "@lezer/highlight": "^1.2.0",
+    "@nanostores/persistent": "^0.9.1",
+    "@replit/codemirror-emacs": "^6.0.1",
+    "@replit/codemirror-vim": "^6.1.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "nanostores": "^0.11.3"
+    "@uiw/codemirror-themes": "^4.21.21",
+    "@uiw/codemirror-themes-all": "^4.21.21",
+    "nanostores": "^0.9.5"
   },
   "devDependencies": {
-    "vite": "^6.0.11"
+    "vite": "^5.0.10"
   }
 }

packages/codemirror/themes.mjs

@@ -1,129 +1,440 @@
-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 CutiePi, { settings as CutiePiSettings } from './themes/CutiePi.mjs';
-import sonicPink, { settings as sonicPinkSettings } from './themes/sonic-pink.mjs';
-import redText, { settings as redTextSettings } from './themes/red-text.mjs';
-import greenText, { settings as greenTextSettings } from './themes/green-text.mjs';
-import archBtw, { settings as archBtwSettings } from './themes/archBtw.mjs';
-import fruitDaw, { settings as fruitDawSettings } from './themes/fruitDaw.mjs';
-
-import bluescreenlight, { settings as bluescreenlightsettings } from './themes/bluescreenlight.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 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 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 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 { setTheme } from '@strudel/draw';
-export const themes = {
-  strudelTheme,
-  algoboy,
-  archBtw,
+import {
+  abcdef,
   androidstudio,
   atomone,
   aura,
-  bbedit,
-  blackscreen,
-  bluescreen,
-  bluescreenlight,
-  CutiePi,
+  bespin,
   darcula,
   dracula,
   duotoneDark,
   eclipse,
-  fruitDaw,
   githubDark,
-  githubLight,
-  greenText,
   gruvboxDark,
-  gruvboxLight,
-  sonicPink,
   materialDark,
-  materialLight,
-  monokai,
-  noctisLilac,
   nord,
-  redText,
+  okaidia,
   solarizedDark,
-  solarizedLight,
   sublime,
-  teletext,
   tokyoNight,
-  tokyoNightDay,
   tokyoNightStorm,
   vscodeDark,
-  vscodeLight,
+  xcodeDark,
+  bbedit,
+  duotoneLight,
+  githubLight,
+  gruvboxLight,
+  materialLight,
+  noctisLilac,
+  solarizedLight,
+  tokyoNightDay,
+  xcodeLight,
+} from '@uiw/codemirror-themes-all';
+
+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 = {
+  strudelTheme,
+  bluescreen,
+  blackscreen,
   whitescreen,
+  teletext,
+  algoboy,
+  terminal,
+  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,
 };
 
+// lineBackground is background with 50% opacity, to make sure the selection below is visible
+
 export const settings = {
-  strudelTheme: strudelThemeSettings,
+  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',
+  },
   bluescreen: bluescreenSettings,
-  bluescreenlight: bluescreenlightsettings,
   blackscreen: blackscreenSettings,
   whitescreen: whitescreenSettings,
   teletext: teletextSettings,
   algoboy: algoboySettings,
-  archBtw: archBtwSettings,
-  androidstudio: androidstudioSettings,
-  atomone: atomOneSettings,
-  aura: auraSettings,
-  bbedit: bbeditSettings,
-  darcula: darculaSettings,
-  dracula: draculaSettings,
-  duotoneDark: duotoneDarkSettings,
-  eclipse: eclipseSettings,
-  CutiePi: CutiePiSettings,
-  sonicPink: sonicPinkSettings,
-  fruitDaw: fruitDawSettings,
-  githubLight: githubLightSettings,
-  githubDark: githubDarkSettings,
-  greenText: greenTextSettings,
-
-  gruvboxDark: gruvboxDarkSettings,
-  gruvboxLight: gruvboxLightSettings,
-  materialDark: materialDarkSettings,
-  materialLight: materialLightSettings,
-  noctisLilac: noctisLilacSettings,
-  nord: nordSettings,
-  monokai: monokaiSettings,
-  redText: redTextSettings,
-  solarizedLight: solarizedLightSettings,
-  solarizedDark: solarizedDarkSettings,
-  sublime: sublimeSettings,
-  tokyoNight: tokyoNightSettings,
-  tokyoNightStorm: tokyoNightStormSettings,
-  vscodeDark: vscodeDarkSettings,
-  vscodeLight: vscodeLightSettings,
-  xcodeLight: xcodeLightSettings,
-  tokyoNightDay: tokyoNightDaySettings,
+  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',
+  },
 };
 
 function getColors(str) {

packages/codemirror/themes/CutiePi.mjs

@@ -1,45 +0,0 @@
-/*
- * Cutie Pi
- * by Switch Angel
- */
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-const deepPurple = '#5c019a';
-const yellowPink = '#fbeffc';
-const grey = '#272C35';
-const pinkAccent = '#fee1ff';
-const lightGrey = '#465063';
-const bratGreen = '#9acd3f';
-const lighterGrey = '#97a1b7';
-const pink = '#f6a6fd';
-
-export const settings = {
-  background: 'white',
-  lineBackground: 'transparent',
-  foreground: deepPurple,
-  caret: '#797977',
-  selection: yellowPink,
-  selectionMatch: '#2B323D',
-  gutterBackground: grey,
-  gutterForeground: lightGrey,
-  gutterBorder: 'transparent',
-  lineHighlight: pinkAccent,
-};
-
-export default createTheme({
-  theme: 'light',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: deepPurple,
-    },
-    { tag: [t.tagName, t.heading], color: settings.foreground },
-    { tag: t.comment, color: lighterGrey },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: pink },
-    { tag: [t.attributeName, t.number], color: '#d19a66' },
-    { tag: t.className, color: grey },
-    { tag: t.keyword, color: deepPurple },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: bratGreen },
-  ],
-});

packages/codemirror/themes/algoboy.mjs

@@ -1,61 +1,42 @@
 import { tags as t } from '@lezer/highlight';
-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'];
+import { createTheme } from '@uiw/codemirror-themes';
 export const settings = {
-  background: palette[3],
-  foreground: palette[1],
-  caret: palette[0],
-  selection: palette[0],
-  selectionMatch: palette[1],
-  lineHighlight: palette[3],
-  lineBackground: palette[3] + '90',
+  background: '#9bbc0f',
+  foreground: '#0f380f', // whats that?
+  caret: '#0f380f',
+  selection: '#306230',
+  selectionMatch: '#ffffff26',
+  lineHighlight: '#8bac0f',
+  lineBackground: '#9bbc0f50',
   //lineBackground: 'transparent',
   gutterBackground: 'transparent',
-  gutterForeground: palette[0],
-  light: false,
-  // customStyle: '.cm-line { line-height: 1 }',
+  gutterForeground: '#0f380f',
+  light: true,
+  customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
-  theme: 'dark',
+  theme: 'light',
   settings,
   styles: [
-    { 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.atom, t.bool, t.special(t.variableName)], color: palette[0] },
-    { tag: [t.function(t.variableName), t.propertyName], color: palette[0] },
-    { tag: t.atom, color: palette[1] },
+    { 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' },
   ],
 });

packages/codemirror/themes/androidstudio.mjs

@@ -1,43 +0,0 @@
-/*
- * 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/archBtw.mjs

@@ -1,38 +0,0 @@
-/*
- * Arch Btw
- * Modern terminal inspired theme
- * made by Jade
- */
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-const hex = ['rgb(0, 0, 0)', 'rgb(82, 208, 250)', 'rgba(113, 208, 250, .4)', 'rgba(113, 208, 250, .15)'];
-
-export const settings = {
-  background: hex[0],
-  lineBackground: 'transparent',
-  foreground: hex[1],
-  selection: hex[2],
-  selectionMatch: hex[0],
-  gutterBackground: hex[0],
-  gutterForeground: hex[2],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[0],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[1],
-    },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[1] },
-    { tag: [t.comment, t.brace, t.bracket], color: hex[2] },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[1] },
-    { tag: [t.attributeName, t.number], color: hex[1] },
-    { tag: t.keyword, color: hex[1] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[1] },
-  ],
-});

packages/codemirror/themes/atomone.mjs

@@ -1,51 +0,0 @@
-/*
- * 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.atom, t.bool, t.special(t.variableName)], color: 'hsl( 29, 54%, 61%)' },
-    { 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

@@ -1,51 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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/blackscreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
+import { createTheme } from '@uiw/codemirror-themes';
 export const settings = {
   background: 'black',
   foreground: 'white', // whats that?
@@ -15,25 +15,25 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { 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' },
+    { 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' },
   ],
 });

packages/codemirror/themes/bluescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
+import { createTheme } from '@uiw/codemirror-themes';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',
@@ -18,25 +18,25 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { 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' },
+    { 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' },
   ],
 });

packages/codemirror/themes/bluescreenlight.mjs

@@ -1,37 +0,0 @@
-/*
- * A lighter blue screen theme
- * made by Jade
- */
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-const hex = ['rgb(75, 130, 247)', 'rgb(47, 108, 246)', 'rgb(255, 255, 255)', 'rgba(255, 255, 255,.3)'];
-
-export const settings = {
-  background: hex[0],
-  lineBackground: 'transparent',
-  foreground: hex[2],
-  selection: hex[3],
-  selectionMatch: hex[0],
-  gutterBackground: hex[0],
-  gutterForeground: hex[2],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[1],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[2],
-    },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[2] },
-    { tag: [t.comment, t.bracket, t.brace, t.compareOperator], color: hex[3] },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[2] },
-    { tag: [t.attributeName, t.number], color: hex[2] },
-    { tag: t.keyword, color: hex[2] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[2] },
-  ],
-});

packages/codemirror/themes/darcula.mjs

@@ -1,47 +0,0 @@
-/*
- * 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

@@ -1,50 +0,0 @@
-/*
- * @name 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

@@ -1,42 +0,0 @@
-/*
- * 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

@@ -1,45 +0,0 @@
-/*
- * 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

@@ -1,46 +0,0 @@
-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/fruitDaw.mjs

@@ -1,50 +0,0 @@
-/*
- * Fruit Daw
- * made by Jade
- */
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-const hex = [
-  'rgb(84, 93, 98)',
-  'rgb(255, 255, 255)',
-  'rgba(255, 255, 255, .25)',
-  'rgb(67, 76, 81)',
-  'rgb(186, 230, 115)',
-  'rgb(252, 184, 67)',
-  'rgb(124, 206, 254)',
-  'rgb(83, 101, 102)',
-  'rgba(46, 62, 72,.5)',
-  'rgb(94, 100, 108)',
-  'rgb(167, 216, 177)',
-];
-
-export const settings = {
-  background: hex[0],
-  lineBackground: 'transparent',
-  foreground: hex[10],
-  selection: hex[8],
-  selectionMatch: hex[0],
-  gutterBackground: hex[3],
-  gutterForeground: hex[2],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[3],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[1],
-    },
-    { tag: [t.bool, t.special(t.variableName)], color: hex[1] },
-    { tag: [t.comment, t.brace, t.bracket], color: hex[2] },
-    { tag: [t.variableName], color: hex[1] },
-    { tag: [t.labelName, t.propertyName, t.self, t.atom], color: hex[5] },
-    { tag: [t.attributeName, t.number], color: hex[6] },
-    { tag: t.keyword, color: hex[5] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[4] },
-  ],
-});

packages/codemirror/themes/githubDark.mjs

@@ -1,42 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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/green-text.mjs

@@ -1,39 +0,0 @@
-/*
- * 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';
-
-const hex = ['#000000', '#8ed675', '#56bd2a', '#54636D', '#171717'];
-
-export const settings = {
-  background: hex[0],
-  lineBackground: 'transparent',
-  foreground: hex[2],
-  selection: hex[4],
-  selectionMatch: hex[0],
-  gutterBackground: hex[0],
-  gutterForeground: hex[3],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[0],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[2],
-    },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[1] },
-    { tag: t.comment, color: hex[3] },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[2] },
-    { tag: [t.attributeName, t.number], color: hex[1] },
-    { tag: t.keyword, color: hex[2] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[1] },
-  ],
-});

packages/codemirror/themes/gruvboxDark.mjs

@@ -1,82 +0,0 @@
-/*
- * gruvbox-dark
- * author morhetz
- * 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

@@ -1,130 +0,0 @@
-/*
- * gruvbox-light
- * author morhetz
- * 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

@@ -1,77 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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/red-text.mjs

@@ -1,39 +0,0 @@
-/*
- * 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';
-
-const hex = ['#000000', '#ff5356', '#bd312a', '#54636D', '#171717'];
-
-export const settings = {
-  background: hex[0],
-  lineBackground: 'transparent',
-  foreground: hex[2],
-  selection: hex[4],
-  selectionMatch: hex[0],
-  gutterBackground: hex[0],
-  gutterForeground: hex[3],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[0],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[2],
-    },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[1] },
-    { tag: t.comment, color: hex[3] },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[2] },
-    { tag: [t.attributeName, t.number], color: hex[1] },
-    { tag: t.keyword, color: hex[2] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[1] },
-  ],
-});

packages/codemirror/themes/solarizedDark.mjs

@@ -1,79 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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/sonic-pink.mjs

@@ -1,39 +0,0 @@
-/*
- * 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';
-
-const hex = ['#1e1e1e', '#fbde2d', '#ff1493', '#4c83ff', '#ededed', '#cccccc', '#ffffff30', '#dc2f8c'];
-
-export const settings = {
-  background: '#000000',
-  lineBackground: 'transparent',
-  foreground: hex[4],
-  selection: hex[6],
-  gutterBackground: hex[0],
-  gutterForeground: hex[5],
-  gutterBorder: 'transparent',
-  lineHighlight: hex[0],
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: hex[4],
-    },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[3] },
-
-    { tag: t.comment, color: '#54636D' },
-    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[4] },
-    { tag: [t.attributeName, t.number], color: hex[3] },
-    { tag: t.keyword, color: hex[1] },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[2] },
-  ],
-});

packages/codemirror/themes/strudel-theme.mjs

@@ -1,23 +1,20 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-export const settings = {
-  background: '#222',
-  lineBackground: '#22222299',
-  foreground: '#fff',
-  caret: '#ffcc00',
-  selection: 'rgba(128, 203, 196, 0.5)',
-  selectionMatch: '#036dd626',
-  lineHighlight: '#00000050',
-  gutterBackground: 'transparent',
-  gutterForeground: '#8a919966',
-};
-
+import { createTheme } from '@uiw/codemirror-themes';
 export default createTheme({
   theme: 'dark',
-  settings,
+  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',
+  },
   styles: [
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#89ddff' },
     { tag: t.labelName, color: '#89ddff' },
     { tag: t.keyword, color: '#c792ea' },
     { tag: t.operator, color: '#89ddff' },

packages/codemirror/themes/sublime.mjs

@@ -1,43 +0,0 @@
-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 './theme-helper.mjs';
+import { createTheme } from '@uiw/codemirror-themes';
 
 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 './theme-helper.mjs';
+import { createTheme } from '@uiw/codemirror-themes';
 export const settings = {
   background: 'black',
   foreground: '#41FF00', // whats that?
@@ -14,24 +14,24 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
-    { 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.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' },
   ],
 });

packages/codemirror/themes/theme-helper.mjs

@@ -1,42 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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 './theme-helper.mjs';
+import { createTheme } from '@uiw/codemirror-themes';
 export const settings = {
   background: 'white',
   foreground: 'black', // whats that?
@@ -16,24 +16,24 @@ export default createTheme({
   theme: 'light',
   settings,
   styles: [
-    { 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.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' },
   ],
 });

packages/codemirror/themes/xcodeLight.mjs

@@ -1,38 +0,0 @@
-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,10 +133,3 @@ 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

@@ -1,46 +0,0 @@
-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 seconds = performance.now() * 0.001;
-  return seconds;
-  // return Math.round(seconds * precision) / precision;
+  const precision = 10 ** 4;
+  const seconds = performance.now() / 1000;
+  return Math.round(seconds * precision) / precision;
 }
 
 let num_cycles_at_cps_change = 0;
@@ -24,20 +24,27 @@ 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,
-    time,
+    tickdeadline,
+    num_cycles_at_cps_change,
+    num_seconds_at_cps_change,
+    num_seconds_since_cps_change,
     cycle,
   });
   num_ticks_since_cps_change++;
@@ -113,7 +120,7 @@ self.onconnect = function (e) {
   port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
 };
 
-// used to consistently schedule events, for use in a service worker - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/clockworker.mjs>
+// used to consistently schedule events, for use in a service worker - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/clockworker.mjs>
 function createClock(
   getTime,
   callback, // called slightly before each cycle

packages/core/controls.mjs

@@ -1,17 +1,16 @@
 /*
-controls.mjs - Registers audio controls for pattern manipulation and effects.
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/controls.mjs>
+controls.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/controls.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, register, reify } from './pattern.mjs';
+import { Pattern, register, sequence } from './pattern.mjs';
 
 export function createParam(names) {
   let isMulti = Array.isArray(names);
   names = !isMulti ? [names] : names;
   const name = names[0];
 
-  // todo: make this less confusing
   const withVal = (xs) => {
     let bag;
     // check if we have an object with an unnamed control (.value)
@@ -36,37 +35,24 @@ export function createParam(names) {
     }
   };
 
-  // todo: make this less confusing
-  const func = function (value, pat) {
-    if (!pat) {
-      return reify(value).withValue(withVal);
+  const func = (...pats) => sequence(...pats).withValue(withVal);
+
+  const setter = function (...pats) {
+    if (!pats.length) {
+      return this.fmap(withVal);
     }
-    if (typeof value === 'undefined') {
-      return pat.fmap(withVal);
-    }
-    return pat.set(reify(value).withValue(withVal));
-  };
-  Pattern.prototype[name] = function (value) {
-    return func(value, this);
+    return this.set(func(...pats));
   };
+  Pattern.prototype[name] = setter;
   return func;
 }
 
-// maps control alias names to the "main" control name
-const controlAlias = new Map();
-
-export function isControlName(name) {
-  return controlAlias.has(name);
-}
-
-export function registerControl(names, ...aliases) {
+function registerControl(names, ...aliases) {
   const name = Array.isArray(names) ? names[0] : names;
   let bag = {};
   bag[name] = createParam(names);
-  controlAlias.set(name, name);
   aliases.forEach((alias) => {
     bag[alias] = bag[name];
-    controlAlias.set(alias, name);
     Pattern.prototype[alias] = Pattern.prototype[name];
   });
   return bag;
@@ -106,7 +92,7 @@ export const { source, src } = registerControl('source', 'src');
  * @example
  * s("bd sd [~ bd] sd,hh*6").n("<0 1>")
  */
-// also see https://codeberg.org/uzu/strudel/pulls/63
+// also see https://github.com/tidalcycles/strudel/pull/63
 export const { n } = registerControl('n');
 /**
  * Plays the given note name or midi number. A note name consists of
@@ -205,7 +191,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');
@@ -219,7 +205,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');
@@ -235,7 +221,7 @@ export const { fmi, fm } = registerControl(['fmi', 'fmh'], 'fm');
  * .fmdecay(.2)
  * .fmsustain(0)
  * .fmenv("<exp lin>")
- * ._scope()
+ * .scope()
  *
  */
 export const { fmenv } = registerControl('fmenv');
@@ -248,7 +234,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');
@@ -262,7 +248,7 @@ export const { fmattack } = registerControl('fmattack');
  * .fm(4)
  * .fmdecay("<.01 .05 .1 .2>")
  * .fmsustain(.4)
- * ._scope()
+ * .scope()
  *
  */
 export const { fmdecay } = registerControl('fmdecay');
@@ -276,7 +262,7 @@ export const { fmdecay } = registerControl('fmdecay');
  * .fm(4)
  * .fmdecay(.1)
  * .fmsustain("<1 .75 .5 0>")
- * ._scope()
+ * .scope()
  *
  */
 export const { fmsustain } = registerControl('fmsustain');
@@ -358,7 +344,7 @@ export const { bandf, bpf, bp } = registerControl(['bandf', 'bandq', 'bpenv'], '
  * s("bd sd [~ bd] sd").bpf(500).bpq("<0 1 2 3>")
  *
  */
-// currently an alias of 'bandq' https://codeberg.org/uzu/strudel/issues/496
+// currently an alias of 'bandq' https://github.com/tidalcycles/strudel/issues/496
 // ['bpq'],
 export const { bandq, bpq } = registerControl('bandq', 'bpq');
 /**
@@ -406,7 +392,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');
 /**
@@ -419,7 +405,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');
 /**
@@ -444,139 +430,6 @@ export const { crush } = registerControl('crush');
  */
 export const { coarse } = registerControl('coarse');
 
-/**
- * modulate the amplitude of a sound with a continuous waveform
- *
- * @name tremolo
- * @synonyms trem
- * @param {number | Pattern} speed modulation speed in HZ
- * @example
- * note("d d d# d".fast(4)).s("supersaw").tremolo("<3 2 100> ").tremoloskew("<.5>")
- *
- */
-export const { tremolo } = registerControl(['tremolo', 'tremolodepth', 'tremoloskew', 'tremolophase'], 'trem');
-
-/**
- * modulate the amplitude of a sound with a continuous waveform
- *
- * @name tremolosync
- * @synonyms tremsync
- * @param {number | Pattern} cycles modulation speed in cycles
- * @example
- * note("d d d# d".fast(4)).s("supersaw").tremolosync("4").tremoloskew("<1 .5 0>")
- *
- */
-export const { tremolosync } = registerControl(
-  ['tremolosync', 'tremolodepth', 'tremoloskew', 'tremolophase'],
-  'tremsync',
-);
-
-/**
- * depth of amplitude modulation
- *
- * @name tremolodepth
- * @synonyms tremdepth
- * @param {number | Pattern} depth
- * @example
- * note("a1 a1 a#1 a1".fast(4)).s("pulse").tremsync(4).tremolodepth("<1 2 .7>")
- *
- */
-export const { tremolodepth } = registerControl('tremolodepth', 'tremdepth');
-/**
- * alter the shape of the modulation waveform
- *
- * @name tremoloskew
- * @synonyms tremskew
- * @param {number | Pattern} amount between 0 & 1, the shape of the waveform
- * @example
- * note("{f a c e}%16").s("sawtooth").tremsync(4).tremoloskew("<.5 0 1>")
- *
- */
-export const { tremoloskew } = registerControl('tremoloskew', 'tremskew');
-
-/**
- * alter the phase of the modulation waveform
- *
- * @name tremolophase
- * @synonyms tremphase
- * @param {number | Pattern} offset the offset in cycles of the modulation
- * @example
- * note("{f a c e}%16").s("sawtooth").tremsync(4).tremolophase("<0 .25 .66>")
- *
- */
-export const { tremolophase } = registerControl('tremolophase', 'tremphase');
-
-/**
- * shape of amplitude modulation
- *
- * @name tremoloshape
- * @param {number | Pattern} shape tri | square | sine | saw | ramp
- * @example
- * note("{f g c d}%16").tremsync(4).tremoloshape("<sine tri square>").s("sawtooth")
- *
- */
-export const { tremoloshape } = registerControl('tremoloshape', 'tremshape');
-/**
- * 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>")
- *
- */
-
-// TODO: SUPRADOUGH implement post orbit "pump" sidechain effect
-// /**
-//  * modulate the amplitude of an orbit to create a "sidechain" like effect
-//  *
-//  * @name pump
-//  * @param {number | Pattern} speed modulation speed in cycles
-//  * @example
-//  * note("{f g c d}%16").s("sawtooth").pump(".25:.75")
-//  *
-//  */
-// export const { pump } = registerControl(['pump', 'pumpdepth']);
-
-// /**
-//  * modulate the amplitude of an orbit to create a "sidechain" like effect
-//  *
-//  * @name pumpdepth
-//  * @param {number | Pattern} depth depth of modulation from 0 to 1
-//  * @example
-//  * note("{f g c d}%16").s("sawtooth").pump(".25").depth("<.25 .5 .75 1>")
-//  *
-//  */
-// export const { pumpdepth } = registerControl('pumpdepth');
-
-export const { drive } = registerControl('drive');
-
-/**
- * Create byte beats with custom expressions
- *
- * @name byteBeatExpression
- * @synonyms bbexpr
- *
- * @param {number | Pattern} byteBeatExpression bitwise expression for creating bytebeat
- * @example
- * s("bytebeat").bbexpr('t*(t>>15^t>>66)')
- *
- */
-export const { byteBeatExpression, bbexpr } = registerControl('byteBeatExpression', 'bbexpr');
-
-/**
- * Create byte beats with custom expressions
- *
- * @name byteBeatStartTime
- * @synonyms bbst
- *
- * @param {number | Pattern} byteBeatStartTime in samples (t)
- * @example
- * note("c3!8".add("{0 0 12 0 7 5 3}%8")).s("bytebeat:5").bbst("<3 1>".mul(10000))._scope()
- *
- */
-export const { byteBeatStartTime, bbst } = registerControl('byteBeatStartTime', 'bbst');
-
 /**
  * Allows you to set the output channels on the interface
  *
@@ -590,40 +443,8 @@ export const { byteBeatStartTime, bbst } = registerControl('byteBeatStartTime',
  */
 export const { channels, ch } = registerControl('channels', 'ch');
 
-/**
- * controls the pulsewidth of the pulse oscillator
- *
- * @name pw
- * @param {number | Pattern} pulsewidth
- * @example
- * note("{f a c e}%16").s("pulse").pw(".8:1:.2")
- * @example
- * n(run(8)).scale("D:pentatonic").s("pulse").pw("0 .75 .5 1")
- */
-export const { pw } = registerControl(['pw', 'pwrate', 'pwsweep']);
-
-/**
- * controls the lfo rate for the pulsewidth of the pulse oscillator
- *
- * @name pwrate
- * @param {number | Pattern} rate
- * @example
- * n(run(8)).scale("D:pentatonic").s("pulse").pw("0.5").pwrate("<5 .1 25>").pwsweep("<0.3 .8>")
-
- *
- */
-export const { pwrate } = registerControl('pwrate');
-
-/**
- * controls the lfo sweep for the pulsewidth of the pulse oscillator
- *
- * @name pwsweep
- * @param {number | Pattern} sweep
- * @example
- * n(run(8)).scale("D:pentatonic").s("pulse").pw("0.5").pwrate("<5 .1 25>").pwsweep("<0.3 .8>")
- *
- */
-export const { pwsweep } = registerControl('pwsweep');
+// superdirt only
+export const { phaserrate, phasr } = registerControl('phaserrate', 'phasr');
 
 /**
  * Phaser audio effect that approximates popular guitar pedals.
@@ -636,11 +457,7 @@ export const { pwsweep } = registerControl('pwsweep');
  * .phaser("<1 2 4 8>")
  *
  */
-export const { phaserrate, ph, phaser } = registerControl(
-  ['phaserrate', 'phaserdepth', 'phasercenter', 'phasersweep'],
-  'ph',
-  'phaser',
-);
+export const { phaser, ph } = registerControl(['phaser', 'phaserdepth', 'phasercenter', 'phasersweep'], 'ph');
 
 /**
  * The frequency sweep range of the lfo for the phaser effect. Defaults to 2000
@@ -725,7 +542,7 @@ export const { cutoff, ctf, lpf, lp } = registerControl(['cutoff', 'resonance',
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(300)
+ * .lpf(500)
  * .lpa(.5)
  * .lpenv("<4 2 1 0 -1 -2 -4>/4")
  */
@@ -764,7 +581,7 @@ export const { bpenv, bpe } = registerControl('bpenv', 'bpe');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(300)
+ * .lpf(500)
  * .lpa("<.5 .25 .1 .01>/4")
  * .lpenv(4)
  */
@@ -803,8 +620,9 @@ export const { bpattack, bpa } = registerControl('bpattack', 'bpa');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(300)
+ * .lpf(500)
  * .lpd("<.5 .25 .1 0>/4")
+ * .lps(0.2)
  * .lpenv(4)
  */
 export const { lpdecay, lpd } = registerControl('lpdecay', 'lpd');
@@ -844,7 +662,7 @@ export const { bpdecay, bpd } = registerControl('bpdecay', 'bpd');
  * @example
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(300)
+ * .lpf(500)
  * .lpd(.5)
  * .lps("<0 .25 .5 1>/4")
  * .lpenv(4)
@@ -887,7 +705,7 @@ export const { bpsustain, bps } = registerControl('bpsustain', 'bps');
  * note("c2 e2 f2 g2")
  * .sound('sawtooth')
  * .clip(.5)
- * .lpf(300)
+ * .lpf(500)
  * .lpenv(4)
  * .lpr("<.5 .25 .1 0>/4")
  * .release(.5)
@@ -924,28 +742,17 @@ export const { hprelease, hpr } = registerControl('hprelease', 'hpr');
  */
 export const { bprelease, bpr } = registerControl('bprelease', 'bpr');
 /**
- * Sets the filter type. The ladder filter is more aggressive. More types might be added in the future.
+ * Sets the filter type. The 24db filter is more aggressive. More types might be added in the future.
  * @name ftype
- * @param {number | Pattern} type 12db (0), ladder (1), or 24db (2)
+ * @param {number | Pattern} type 12db (default) or 24db
  * @example
- * 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)
+ * note("c2 e2 f2 g2")
  * .sound('sawtooth')
- * .lpf(200).fanchor(0)
- * .lpenv(3).lpq(1)
- * .ftype("<ladder 12db 24db>")
+ * .lpf(500)
+ * .bpenv(4)
+ * .ftype("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.
@@ -961,7 +768,7 @@ export const { fanchor } = registerControl('fanchor');
  * s("bd sd [~ bd] sd,hh*8").hpf("<2000 2000:25>")
  *
  */
-// currently an alias of 'hcutoff' https://codeberg.org/uzu/strudel/issues/496
+// currently an alias of 'hcutoff' https://github.com/tidalcycles/strudel/issues/496
 // ['hpf'],
 /**
  * Applies a vibrato to the frequency of the oscillator.
@@ -972,12 +779,10 @@ 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');
 /**
@@ -998,12 +803,10 @@ 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');
@@ -1028,7 +831,7 @@ export const { hresonance, hpq } = registerControl('hresonance', 'hpq');
  * s("bd sd [~ bd] sd,hh*8").lpf(2000).lpq("<0 10 20 30>")
  *
  */
-// currently an alias of 'resonance' https://codeberg.org/uzu/strudel/issues/496
+// currently an alias of 'resonance' https://github.com/tidalcycles/strudel/issues/496
 export const { resonance, lpq } = registerControl('resonance', 'lpq');
 /**
  * DJ filter, below 0.5 is low pass filter, above is high pass filter.
@@ -1081,31 +884,15 @@ export const { delayfeedback, delayfb, dfb } = registerControl('delayfeedback',
  *
  */
 export const { delaytime, delayt, dt } = registerControl('delaytime', 'delayt', 'dt');
-
-/**
- * Sets the time of the delay effect in cycles.
- *
- * @name delaysync
- * @param {number | Pattern} cycles delay length in cycles
- * @synonyms delayt, dt
- * @example
- * s("bd bd").delay(.25).delaysync("<1 2 3 5>".div(8))
- *
- */
-export const { delaysync } = registerControl('delaysync');
-
-/**
+/* // TODO: test
  * Specifies whether delaytime is calculated relative to cps.
  *
  * @name lock
  * @param {number | Pattern} enable When set to 1, delaytime is a direct multiple of a cycle.
- * @superdirtOnly
  * @example
  * s("sd").delay().lock(1).osc()
  *
- *
  */
-
 export const { lock } = registerControl('lock');
 /**
  * Set detune for stacked voices of supported oscillators
@@ -1410,7 +1197,7 @@ export const { semitone } = registerControl('semitone');
 
 // TODO: synth param
 export const { voice } = registerControl('voice');
-// voicings // https://codeberg.org/uzu/strudel/issues/506
+// voicings // https://github.com/tidalcycles/strudel/issues/506
 // chord to voice, like C Eb Fm7 G7. the symbols can be defined via addVoicings
 export const { chord } = registerControl('chord');
 // which dictionary to use for the voicings
@@ -1571,17 +1358,6 @@ 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`.
  *
@@ -1592,7 +1368,6 @@ export const { stretch } = registerControl('stretch');
  * @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:
@@ -1644,7 +1419,7 @@ export const { vowel } = registerControl('vowel');
  * @name waveloss
  */
 export const { waveloss } = registerControl('waveloss');
-/**
+/*
  * Noise crackle density
  *
  * @name density
@@ -1657,6 +1432,18 @@ export const { density } = registerControl('density');
 // ['modwheel'],
 export const { expression } = registerControl('expression');
 export const { sustainpedal } = registerControl('sustainpedal');
+/* // TODO: doesn't seem to do anything
+ *
+ * Tremolo Audio DSP effect
+ *
+ * @name tremolodepth
+ * @param {number | Pattern} depth between 0 and 1
+ * @example
+ * n("0,4,7").tremolodepth("<0 .3 .6 .9>").osc()
+ *
+ */
+export const { tremolodepth, tremdp } = registerControl('tremolodepth', 'tremdp');
+export const { tremolorate, tremr } = registerControl('tremolorate', 'tremr');
 
 export const { fshift } = registerControl('fshift');
 export const { fshiftnote } = registerControl('fshiftnote');
@@ -1684,11 +1471,20 @@ export const { scram } = registerControl('scram');
 export const { binshift } = registerControl('binshift');
 export const { hbrick } = registerControl('hbrick');
 export const { lbrick } = registerControl('lbrick');
-
+export const { midichan } = registerControl('midichan');
+export const { control } = registerControl('control');
+export const { ccn } = registerControl('ccn');
+export const { ccv } = registerControl('ccv');
+export const { polyTouch } = registerControl('polyTouch');
+export const { midibend } = registerControl('midibend');
+export const { miditouch } = registerControl('miditouch');
+export const { ctlNum } = registerControl('ctlNum');
 export const { frameRate } = registerControl('frameRate');
 export const { frames } = registerControl('frames');
 export const { hours } = registerControl('hours');
+export const { midicmd } = registerControl('midicmd');
 export const { minutes } = registerControl('minutes');
+export const { progNum } = registerControl('progNum');
 export const { seconds } = registerControl('seconds');
 export const { songPtr } = registerControl('songPtr');
 export const { uid } = registerControl('uid');
@@ -1733,6 +1529,7 @@ export const { zmod } = registerControl('zmod');
 // like crush but scaled differently
 export const { zcrush } = registerControl('zcrush');
 export const { zdelay } = registerControl('zdelay');
+export const { tremolo } = registerControl('tremolo');
 export const { zzfx } = registerControl('zzfx');
 
 /**
@@ -1779,203 +1576,3 @@ export const ar = register('ar', (t, pat) => {
   const [attack, release = attack] = t;
   return pat.set({ attack, release });
 });
-
-//MIDI
-
-/**
- * MIDI channel: Sets the MIDI channel for the event.
- *
- * @name midichan
- * @param {number | Pattern} channel MIDI channel number (0-15)
- * @example
- * note("c4").midichan(1).midi()
- */
-export const { midichan } = registerControl('midichan');
-
-export const { midimap } = registerControl('midimap');
-
-/**
- * MIDI port: Sets the MIDI port for the event.
- *
- * @name midiport
- * @param {number | Pattern} port MIDI port
- * @example
- * note("c a f e").midiport("<0 1 2 3>").midi()
- */
-export const { midiport } = registerControl('midiport');
-
-/**
- * MIDI command: Sends a MIDI command message.
- *
- * @name midicmd
- * @param {number | Pattern} command MIDI command
- * @example
- * midicmd("clock*48,<start stop>/2").midi()
- */
-export const { midicmd } = registerControl('midicmd');
-
-/**
- * MIDI control: Sends a MIDI control change message.
- *
- * @name control
- * @param {number | Pattern}  MIDI control number (0-127)
- * @param {number | Pattern}  MIDI controller value (0-127)
- */
-export const control = register('control', (args, pat) => {
-  if (!Array.isArray(args)) {
-    throw new Error('control expects an array of [ccn, ccv]');
-  }
-  const [_ccn, _ccv] = args;
-  return pat.ccn(_ccn).ccv(_ccv);
-});
-
-/**
- * MIDI control number: Sends a MIDI control change message.
- *
- * @name ccn
- * @param {number | Pattern}  MIDI control number (0-127)
- */
-export const { ccn } = registerControl('ccn');
-/**
- * MIDI control value: Sends a MIDI control change message.
- *
- * @name ccv
- * @param {number | Pattern}  MIDI control value (0-127)
- */
-export const { ccv } = registerControl('ccv');
-export const { ctlNum } = registerControl('ctlNum');
-// TODO: ctlVal?
-
-/**
- * MIDI NRPN non-registered parameter number: Sends a MIDI NRPN non-registered parameter number message.
- * @name nrpnn
- * @param {number | Pattern} nrpnn MIDI NRPN non-registered parameter number (0-127)
- * @example
- * note("c4").nrpnn("1:8").nrpv("123").midichan(1).midi()
- */
-export const { nrpnn } = registerControl('nrpnn');
-/**
- * MIDI NRPN non-registered parameter value: Sends a MIDI NRPN non-registered parameter value message.
- * @name nrpv
- * @param {number | Pattern} nrpv MIDI NRPN non-registered parameter value (0-127)
- * @example
- * note("c4").nrpnn("1:8").nrpv("123").midichan(1).midi()
- */
-export const { nrpv } = registerControl('nrpv');
-
-/**
- * MIDI program number: Sends a MIDI program change message.
- *
- * @name progNum
- * @param {number | Pattern} program MIDI program number (0-127)
- * @example
- * note("c4").progNum(10).midichan(1).midi()
- */
-export const { progNum } = registerControl('progNum');
-
-/**
- * MIDI sysex: Sends a MIDI sysex message.
- * @name sysex
- * @param {number | Pattern} id Sysex ID
- * @param {number | Pattern} data Sysex data
- * @example
- * note("c4").sysex(["0x77", "0x01:0x02:0x03:0x04"]).midichan(1).midi()
- */
-export const sysex = register('sysex', (args, pat) => {
-  if (!Array.isArray(args)) {
-    throw new Error('sysex expects an array of [id, data]');
-  }
-  const [id, data] = args;
-  return pat.sysexid(id).sysexdata(data);
-});
-/**
- * MIDI sysex ID: Sends a MIDI sysex identifier message.
- * @name sysexid
- * @param {number | Pattern} id Sysex ID
- * @example
- * note("c4").sysexid("0x77").sysexdata("0x01:0x02:0x03:0x04").midichan(1).midi()
- */
-export const { sysexid } = registerControl('sysexid');
-/**
- * MIDI sysex data: Sends a MIDI sysex message.
- * @name sysexdata
- * @param {number | Pattern} data Sysex data
- * @example
- * note("c4").sysexid("0x77").sysexdata("0x01:0x02:0x03:0x04").midichan(1).midi()
- */
-export const { sysexdata } = registerControl('sysexdata');
-
-/**
- * MIDI pitch bend: Sends a MIDI pitch bend message.
- * @name midibend
- * @param {number | Pattern} midibend MIDI pitch bend (-1 - 1)
- * @example
- * note("c4").midibend(sine.slow(4).range(-0.4,0.4)).midi()
- */
-export const { midibend } = registerControl('midibend');
-/**
- * MIDI key after touch: Sends a MIDI key after touch message.
- * @name miditouch
- * @param {number | Pattern} miditouch MIDI key after touch (0-1)
- * @example
- * note("c4").miditouch(sine.slow(4).range(0,1)).midi()
- */
-export const { miditouch } = registerControl('miditouch');
-
-// TODO: what is this?
-export const { polyTouch } = registerControl('polyTouch');
-
-export const getControlName = (alias) => {
-  if (controlAlias.has(alias)) {
-    return controlAlias.get(alias);
-  }
-  return alias;
-};
-
-/**
- * Sets properties in a batch.
- *
- * @name as
- * @param {String | Array} mapping the control names that are set
- * @example
- * "c:.5 a:1 f:.25 e:.8".as("note:clip")
- * @example
- * "{0@2 0.25 0 0.5 .3 .5}%8".as("begin").s("sax_vib").clip(1)
- */
-export const as = register('as', (mapping, pat) => {
-  mapping = Array.isArray(mapping) ? mapping : [mapping];
-  return pat.fmap((v) => {
-    v = Array.isArray(v) ? v : [v];
-    v = Object.fromEntries(mapping.map((prop, i) => [getControlName(prop), v[i]]));
-    return v;
-  });
-});
-
-/**
- * Allows you to scrub an audio file like a tape loop by passing values that represents the position in the audio file
- * in the optional array syntax ex: "0.5:2", the second value controls the speed of playback
- * @name scrub
- * @memberof Pattern
- * @returns Pattern
- * @example
- * samples('github:switchangel/pad')
- * s("swpad:0").scrub("{0.1!2 .25@3 0.7!2 <0.8:1.5>}%8")
- * @example
- * samples('github:yaxu/clean-breaks/main');
- * s("amen/4").fit().scrub("{0@3 0@2 4@3}%8".div(16))
- */
-
-export const scrub = register(
-  'scrub',
-  (beginPat, pat) => {
-    return beginPat.outerBind((v) => {
-      if (!Array.isArray(v)) {
-        v = [v];
-      }
-      const [beginVal, speedMultiplier = 1] = v;
-
-      return pat.begin(beginVal).mul(speed(speedMultiplier)).clip(1);
-    });
-  },
-  false,
-);

packages/core/cyclist.mjs

@@ -1,26 +1,15 @@
 /*
-cyclist.mjs - event scheduler for a single strudel instance. for multi-instance scheduler, see - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/neocyclist.mjs>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/cyclist.mjs>
+cyclist.mjs - event scheduler for a single strudel instance. for multi-instance scheduler, see - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/neocyclist.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/cyclist.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 createClock from './zyklus.mjs';
-import { errorLogger, logger } from './logger.mjs';
+import { logger } from './logger.mjs';
 
 export class Cyclist {
-  constructor({
-    interval,
-    onTrigger,
-    onToggle,
-    onError,
-    getTime,
-    latency = 0.1,
-    setInterval,
-    clearInterval,
-    beforeStart,
-  }) {
+  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1, setInterval, clearInterval }) {
     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
@@ -65,18 +54,13 @@ export class Cyclist {
                 (hap.whole.begin - this.num_cycles_at_cps_change) / this.cps + this.seconds_at_cps_change + latency;
               const duration = hap.duration / this.cps;
               // the following line is dumb and only here for backwards compatibility
-              // see https://codeberg.org/uzu/strudel/pulls/1004
+              // see https://github.com/tidalcycles/strudel/pull/1004
               const deadline = targetTime - phase;
-              // this onTrigger has another signature
               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) {
-          errorLogger(e);
+          logger(`[cyclist] error: ${e.message}`);
           onError?.(e);
         }
       },
@@ -98,8 +82,7 @@ export class Cyclist {
     this.started = v;
     this.onToggle?.(v);
   }
-  async start() {
-    await this.beforeStart?.();
+  start() {
     this.num_ticks_since_cps_change = 0;
     this.num_cycles_at_cps_change = 0;
     if (!this.pattern) {
@@ -120,10 +103,10 @@ export class Cyclist {
     this.lastEnd = 0;
     this.setStarted(false);
   }
-  async setPattern(pat, autostart = false) {
+  setPattern(pat, autostart = false) {
     this.pattern = pat;
     if (autostart && !this.started) {
-      await this.start();
+      this.start();
     }
   }
   setCps(cps = 0.5) {

packages/core/drawLine.mjs

@@ -1,6 +1,6 @@
 /*
 drawLine.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/drawLine.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/drawLine.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 

packages/core/euclid.mjs

@@ -2,7 +2,7 @@
 euclid.mjs - Bjorklund/Euclidean/Diaspora rhythms
 Copyright (C) 2023 Rohan Drape and strudel contributors
 
-See <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/euclid.mjs> for authors of this file.
+See <https://github.com/tidalcycles/strudel/blob/main/packages/core/euclid.mjs> for authors of this file.
 
 The Bjorklund algorithm implementation is ported from the Haskell Music Theory Haskell module by Rohan Drape -
 https://rohandrape.net/?t=hmt
@@ -10,9 +10,9 @@ https://rohandrape.net/?t=hmt
 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 { timeCat, register, silence } from './pattern.mjs';
+import { Pattern, timeCat, register, silence } from './pattern.mjs';
 import { rotate, flatten, splitAt, zipWith } from './util.mjs';
-import Fraction, { lcm } from './fraction.mjs';
+import Fraction from './fraction.mjs';
 
 const left = function (n, x) {
   const [ons, offs] = n;
@@ -42,26 +42,29 @@ const _bjork = function (n, x) {
 
 export const bjork = function (ons, steps) {
   const inverted = ons < 0;
-  const absOns = Math.abs(ons);
-  const offs = steps - absOns;
-  const ones = Array(absOns).fill([1]);
-  const zeros = Array(offs).fill([0]);
-  const result = _bjork([absOns, offs], [ones, zeros]);
-  const pattern = flatten(result[1][0]).concat(flatten(result[1][1]));
-  return inverted ? pattern.map((x) => 1 - x) : pattern;
+  ons = Math.abs(ons);
+  const offs = steps - ons;
+  const x = Array(ons).fill([1]);
+  const y = Array(offs).fill([0]);
+  const result = _bjork([ons, offs], [x, y]);
+  const p = flatten(result[1][0]).concat(flatten(result[1][1]));
+  if (inverted) {
+    return p.map((x) => (x === 0 ? 1 : 0));
+  }
+  return p;
 };
 
 /**
- * Changes the structure of the pattern to form an Euclidean rhythm.
- * Euclidean rhythms are rhythms obtained using the greatest common
+ * Changes the structure of the pattern to form an euclidean rhythm.
+ * Euclidian rhythms are rhythms obtained using the greatest common
  * divisor of two numbers.  They were described in 2004 by Godfried
- * Toussaint, a Canadian computer scientist.  Euclidean rhythms are
+ * Toussaint, a canadian computer scientist.  Euclidian rhythms are
  * really useful for computer/algorithmic music because they can
  * describe a large number of rhythms with a couple of numbers.
  *
  * @memberof Pattern
  * @name euclid
- * @param {number} pulses the number of onsets/beats
+ * @param {number} pulses the number of onsets / beats
  * @param {number} steps the number of steps to fill
  * @returns Pattern
  * @example
@@ -73,7 +76,7 @@ export const bjork = function (ons, steps) {
  * Like `euclid`, but has an additional parameter for 'rotating' the resulting sequence.
  * @memberof Pattern
  * @name euclidRot
- * @param {number} pulses the number of onsets/beats
+ * @param {number} pulses the number of onsets / beats
  * @param {number} steps the number of steps to fill
  * @param {number} rotation offset in steps
  * @returns Pattern
@@ -83,13 +86,13 @@ export const bjork = function (ons, steps) {
  */
 
 /**
- * @example // A thirteenth-century Persian rhythm called Khafif-e-ramal.
+ * @example // A thirteenth century Persian rhythm called Khafif-e-ramal.
  * note("c3").euclid(2,5)
  * @example // The archetypal pattern of the Cumbia from Colombia, as well as a Calypso rhythm from Trinidad.
  * note("c3").euclid(3,4)
  * @example // Another thirteenth century Persian rhythm by the name of Khafif-e-ramal, as well as a Rumanian folk-dance rhythm.
  * note("c3").euclidRot(3,5,2)
- * @example // A Ruchenitza rhythm used in a Bulgarian folk dance.
+ * @example // A Ruchenitza rhythm used in a Bulgarian folk-dance.
  * note("c3").euclid(3,7)
  * @example // The Cuban tresillo pattern.
  * note("c3").euclid(3,8)
@@ -139,14 +142,6 @@ export const euclid = register('euclid', function (pulses, steps, pat) {
   return pat.struct(_euclidRot(pulses, steps, 0));
 });
 
-export const e = register('e', function (euc, pat) {
-  if (!Array.isArray(euc)) {
-    euc = [euc];
-  }
-  const [pulses, steps = pulses, rot = 0] = euc;
-  return pat.struct(_euclidRot(pulses, steps, rot));
-});
-
 export const { euclidrot, euclidRot } = register(['euclidrot', 'euclidRot'], function (pulses, steps, rotation, pat) {
   return pat.struct(_euclidRot(pulses, steps, rotation));
 });
@@ -156,10 +151,8 @@ export const { euclidrot, euclidRot } = register(['euclidrot', 'euclidRot'], fun
  * so there will be no gaps.
  * @name euclidLegato
  * @memberof Pattern
- * @param {number} pulses the number of onsets/beats
+ * @param {number} pulses the number of onsets / beats
  * @param {number} steps the number of steps to fill
- * @param rotation offset in steps
- * @param pat
  * @example
  * note("c3").euclidLegato(3,8)
  */
@@ -168,13 +161,13 @@ const _euclidLegato = function (pulses, steps, rotation, pat) {
   if (pulses < 1) {
     return silence;
   }
-  const bin_pat = _euclidRot(pulses, steps, 0);
+  const bin_pat = _euclidRot(pulses, steps, rotation);
   const gapless = bin_pat
     .join('')
     .split('1')
     .slice(1)
     .map((s) => [s.length + 1, true]);
-  return pat.struct(timeCat(...gapless)).late(Fraction(rotation).div(steps));
+  return pat.struct(timeCat(...gapless));
 };
 
 export const euclidLegato = register(['euclidLegato'], function (pulses, steps, pat) {
@@ -187,7 +180,7 @@ export const euclidLegato = register(['euclidLegato'], function (pulses, steps,
  * the resulting sequence
  * @name euclidLegatoRot
  * @memberof Pattern
- * @param {number} pulses the number of onsets/beats
+ * @param {number} pulses the number of onsets / beats
  * @param {number} steps the number of steps to fill
  * @param {number} rotation offset in steps
  * @example

packages/core/evaluate.mjs

@@ -1,10 +1,10 @@
 /*
 evaluate.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/evaluate.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/evaluate.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export const strudelScope = {};
+import { isPattern } from './index.mjs';
 
 export const evalScope = async (...args) => {
   const results = await Promise.allSettled(args);
@@ -20,7 +20,6 @@ export const evalScope = async (...args) => {
   modules.forEach((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
-      strudelScope[name] = value;
     });
   });
   return modules;
@@ -38,12 +37,11 @@ function safeEval(str, options = {}) {
   return Function(body)();
 }
 
-export const evaluate = async (code, transpiler, transpilerOptions) => {
+export const evaluate = async (code, transpiler) => {
   let meta = {};
-
   if (transpiler) {
     // transform syntactically correct js code to semantically usable code
-    const transpiled = transpiler(code, transpilerOptions);
+    const transpiled = transpiler(code);
     code = transpiled.output;
     meta = transpiled;
   }

packages/core/fraction.mjs

@@ -1,6 +1,6 @@
 /*
 fraction.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/fraction.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/fraction.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/>.
 */
 
@@ -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)),
-    x,
+    fraction(1),
   );
 };
 

packages/core/hap.mjs

@@ -1,6 +1,6 @@
 /*
 hap.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/hap.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/hap.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 Fraction from './fraction.mjs';

packages/core/index.mjs

@@ -1,6 +1,6 @@
 /*
 index.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/index.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/index.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
@@ -14,7 +14,6 @@ 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/logger.mjs

@@ -4,12 +4,6 @@ let debounce = 1000,
   lastMessage,
   lastTime;
 
-export function errorLogger(e, origin = 'cyclist') {
-  //TODO: add some kind of debug flag that enables this  while in dev mode
-  // console.error(e)
-  logger(`[${origin}] error: ${e.message}`);
-}
-
 export function logger(message, type, data = {}) {
   let t = performance.now();
   if (lastMessage === message && t - lastTime < debounce) {

packages/core/neocyclist.mjs

@@ -1,50 +1,91 @@
 /*
 neocyclist.mjs - event scheduler like cyclist, except recieves clock pulses from clockworker in order to sync across multiple instances.
-Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/core/neocyclist.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/neocyclist.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 { logger } from './logger.mjs';
-import { ClockCollator, cycleToSeconds } from './util.mjs';
 
 export class NeoCyclist {
   constructor({ onTrigger, onToggle, getTime }) {
     this.started = false;
     this.cps = 0.5;
+    this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.getTime = getTime; // get absolute time
     this.time_at_last_tick_message = 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.num_cycles_at_cps_change = 0;
     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');
-    const tickCallback = (payload) => {
-      const { cps, begin, end, cycle, time } = payload;
-      this.cps = cps;
-      this.cycle = cycle;
-      const currentTime = this.collator.calculateOffset(time) + time;
-      processHaps(begin, end, currentTime);
-      this.time_at_last_tick_message = currentTime;
+    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 processHaps = (begin, end, currentTime) => {
+    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;
+      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 processHaps = (begin, end, num_cycles_at_cps_change, seconds_at_cps_change) => {
       if (this.started === false) {
         return;
       }
 
       const haps = this.pattern.queryArc(begin, end, { _cps: this.cps });
+
       haps.forEach((hap) => {
         if (hap.hasOnset()) {
-          const timeUntilTrigger = cycleToSeconds(hap.whole.begin - this.cycle, this.cps);
-          const targetTime = timeUntilTrigger + currentTime + this.latency;
-          const duration = cycleToSeconds(hap.duration, this.cps);
+          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;
           onTrigger?.(hap, 0, duration, this.cps, targetTime);
         }
       });
@@ -88,8 +129,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.2.2",
+  "version": "1.0.1",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",
@@ -9,13 +9,12 @@
   },
   "scripts": {
     "test": "vitest run",
-    "bench": "vitest bench",
     "build": "vite build",
     "prepublishOnly": "pnpm build"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://codeberg.org/uzu/strudel.git"
+    "url": "git+https://github.com/tidalcycles/strudel.git"
   },
   "keywords": [
     "tidalcycles",
@@ -27,15 +26,15 @@
   "author": "Alex McLean <alex@slab.org> (https://slab.org)",
   "license": "AGPL-3.0-or-later",
   "bugs": {
-    "url": "https://codeberg.org/uzu/strudel/issues"
+    "url": "https://github.com/tidalcycles/strudel/issues"
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "fraction.js": "^5.2.1"
+    "fraction.js": "^4.3.7"
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
-    "vite": "^6.0.11",
-    "vitest": "^3.0.4"
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
   }
 }