Merge branch 'main' into devicemotion

.eslintrc.json

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

.github/workflows/deploy.yml

@@ -22,10 +22,10 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.11.0
+          version: 9.12.2
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"

.github/workflows/test.yml

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

CONTRIBUTING.md

@@ -138,6 +138,18 @@ pnpm --filter "./packages/**" publish --access public
 To manually publish a single package, increase the version in the `package.json`, then run `pnpm publish`.
 Important: Always publish with `pnpm`, as `npm` does not support overriding main files in `publishConfig`, which is done in all the packages.
 
+
+## useful commands
+```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
+```
 ## Have Fun
 
 Remember to have fun, and that this project is driven by the passion of volunteers!

eslint.config.mjs

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

examples/codemirror-repl/package.json

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

examples/headless-repl/package.json

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

examples/minimal-repl/package.json

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

examples/superdough/package.json

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

examples/tidal-repl/package.json

@@ -31,6 +31,6 @@
     "hs2js": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.8"
+    "vite": "^6.0.11"
   }
 }

package.json

@@ -21,7 +21,7 @@
     "osc": "cd packages/osc && npm run server",
     "jsdoc": "jsdoc packages/ -c jsdoc/jsdoc.config.json",
     "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc/jsdoc.config.json",
-    "lint": "eslint . --ext mjs,js --quiet",
+    "lint": "eslint . --quiet",
     "codeformat": "prettier --write .",
     "format-check": "prettier --check .",
     "report-undocumented": "npm run jsdoc-json && node jsdoc/undocumented.mjs > undocumented.json",
@@ -55,19 +55,21 @@
     "@strudel/xen": "workspace:*"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.5.9",
+    "@eslint/compat": "^1.2.5",
-    "@vitest/ui": "^2.1.3",
+    "@eslint/eslintrc": "^3.2.0",
-    "acorn": "^8.13.0",
+    "@eslint/js": "^9.19.0",
-    "dependency-tree": "^10.0.9",
+    "@tauri-apps/cli": "^2.2.7",
-    "eslint": "^8.56.0",
+    "@vitest/ui": "^3.0.4",
+    "acorn": "^8.14.0",
+    "dependency-tree": "^11.0.1",
+    "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "events": "^3.3.0",
-    "jsdoc": "^4.0.3",
+    "globals": "^15.14.0",
+    "jsdoc": "^4.0.4",
     "jsdoc-json": "^2.0.2",
-    "jsdoc-to-markdown": "^8.0.0",
+    "lerna": "^8.1.9",
-    "lerna": "^8.1.8",
+    "prettier": "^3.4.2",
-    "prettier": "^3.3.3",
+    "vitest": "^3.0.4"
-    "rollup-plugin-visualizer": "^5.12.0",
-    "vitest": "^2.1.3"
   }
 }

packages/codemirror/package.json

@@ -32,26 +32,24 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/autocomplete": "^6.18.4",
-    "@codemirror/commands": "^6.3.3",
+    "@codemirror/commands": "^6.8.0",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.0",
+    "@codemirror/language": "^6.10.8",
-    "@codemirror/search": "^6.5.5",
+    "@codemirror/search": "^6.5.8",
-    "@codemirror/state": "^6.4.0",
+    "@codemirror/state": "^6.5.1",
-    "@codemirror/view": "^6.23.0",
+    "@codemirror/view": "^6.36.2",
-    "@lezer/highlight": "^1.2.0",
+    "@lezer/highlight": "^1.2.1",
-    "@nanostores/persistent": "^0.9.1",
+    "@nanostores/persistent": "^0.10.2",
-    "@replit/codemirror-emacs": "^6.0.1",
+    "@replit/codemirror-emacs": "^6.1.0",
-    "@replit/codemirror-vim": "^6.1.0",
+    "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "@uiw/codemirror-themes": "^4.21.21",
+    "nanostores": "^0.11.3"
-    "@uiw/codemirror-themes-all": "^4.21.21",
-    "nanostores": "^0.9.5"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/codemirror/themes.mjs

@@ -1,42 +1,41 @@
-import {
+import strudelTheme, { settings as strudelThemeSettings } from './themes/strudel-theme.mjs';
-  abcdef,
+import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen.mjs';
-  androidstudio,
+import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen.mjs';
-  atomone,
+import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen.mjs';
-  aura,
+import teletext, { settings as teletextSettings } from './themes/teletext.mjs';
-  bespin,
+import algoboy, { settings as algoboySettings } from './themes/algoboy.mjs';
-  darcula,
+import terminal, { settings as terminalSettings } from './themes/terminal.mjs';
-  dracula,
+import abcdef, { settings as abcdefSettings } from './themes/abcdef.mjs';
-  duotoneDark,
+import androidstudio, { settings as androidstudioSettings } from './themes/androidstudio.mjs';
-  eclipse,
+import atomone, { settings as atomOneSettings } from './themes/atomone.mjs';
-  githubDark,
+import aura, { settings as auraSettings } from './themes/aura.mjs';
-  gruvboxDark,
+import bespin, { settings as bespinSettings } from './themes/bespin.mjs';
-  materialDark,
+import darcula, { settings as darculaSettings } from './themes/darcula.mjs';
-  nord,
+import dracula, { settings as draculaSettings } from './themes/dracula.mjs';
-  okaidia,
+import duotoneDark, { settings as duotoneDarkSettings } from './themes/duotoneDark.mjs';
-  solarizedDark,
+import duotoneLight, { settings as duotoneLightSettings } from './themes/duotoneLight.mjs';
-  sublime,
+import eclipse, { settings as eclipseSettings } from './themes/eclipse.mjs';
-  tokyoNight,
+import githubDark, { settings as githubDarkSettings } from './themes/githubDark.mjs';
-  tokyoNightStorm,
+import githubLight, { settings as githubLightSettings } from './themes/githubLight.mjs';
-  vscodeDark,
+import gruvboxDark, { settings as gruvboxDarkSettings } from './themes/gruvboxDark.mjs';
-  xcodeDark,
+import gruvboxLight, { settings as gruvboxLightSettings } from './themes/gruvboxLight.mjs';
-  bbedit,
+import materialDark, { settings as materialDarkSettings } from './themes/materialDark.mjs';
-  duotoneLight,
+import materialLight, { settings as materialLightSettings } from './themes/materialLight.mjs';
-  githubLight,
+import nord, { settings as nordSettings } from './themes/nord.mjs';
-  gruvboxLight,
+import monokai, { settings as monokaiSettings } from './themes/monokai.mjs';
-  materialLight,
+import solarizedDark, { settings as solarizedDarkSettings } from './themes/solarizedDark.mjs';
-  noctisLilac,
+import solarizedLight, { settings as solarizedLightSettings } from './themes/solarizedLight.mjs';
-  solarizedLight,
+import sublime, { settings as sublimeSettings } from './themes/sublime.mjs';
-  tokyoNightDay,
+import tokyoNight, { settings as tokyoNightSettings } from './themes/tokyoNight.mjs';
-  xcodeLight,
+import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/tokioNightStorm.mjs';
-} from '@uiw/codemirror-themes-all';
+import tokyoNightDay, { settings as tokyoNightDaySettings } from './themes/tokyoNightDay.mjs';
+import vscodeDark, { settings as vscodeDarkSettings } from './themes/vscodeDark.mjs';
+import vscodeLight, { settings as vscodeLightSettings } from './themes/vscodeLight.mjs';
+// import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
+import xcodeLight, { settings as xcodeLightSettings } from './themes/xcodeLight.mjs';
+import bbedit, { settings as bbeditSettings } from './themes/bbedit.mjs';
+import noctisLilac, { settings as noctisLilacSettings } from './themes/noctisLilac.mjs';
 
-import strudelTheme from './themes/strudel-theme';
-import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen';
-import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen';
-import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen';
-import teletext, { settings as teletextSettings } from './themes/teletext';
-import algoboy, { settings as algoboySettings } from './themes/algoboy';
-import terminal, { settings as terminalSettings } from './themes/terminal';
 import { setTheme } from '@strudel/draw';
 
 export const themes = {
@@ -46,395 +45,78 @@ export const themes = {
   whitescreen,
   teletext,
   algoboy,
-  terminal,
-  abcdef,
-  androidstudio,
   atomone,
   aura,
-  bespin,
   darcula,
   dracula,
+  // todo: optimize
+  // bespin,
+  //abcdef,
+  androidstudio,
   duotoneDark,
-  eclipse,
   githubDark,
   gruvboxDark,
   materialDark,
   nord,
-  okaidia,
+  monokai,
   solarizedDark,
   sublime,
   tokyoNight,
   tokyoNightStorm,
   vscodeDark,
-  xcodeDark,
+  //xcodeDark,
+  // LIGHT
   bbedit,
-  duotoneLight,
+  //duotoneLight,
+  eclipse,
   githubLight,
   gruvboxLight,
   materialLight,
+  vscodeLight,
   noctisLilac,
   solarizedLight,
   tokyoNightDay,
   xcodeLight,
 };
 
-// lineBackground is background with 50% opacity, to make sure the selection below is visible
-
 export const settings = {
-  strudelTheme: {
+  strudelTheme: strudelThemeSettings,
-    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,
   blackscreen: blackscreenSettings,
   whitescreen: whitescreenSettings,
   teletext: teletextSettings,
   algoboy: algoboySettings,
   terminal: terminalSettings,
-  abcdef: {
+  abcdef: abcdefSettings,
-    background: '#0f0f0f',
+  androidstudio: androidstudioSettings,
-    lineBackground: '#0f0f0f99',
+  atomone: atomOneSettings,
-    foreground: '#defdef',
+  aura: auraSettings,
-    caret: '#00FF00',
+  bbedit: bbeditSettings,
-    selection: '#515151',
+  bespin: bespinSettings,
-    selectionMatch: '#515151',
+  darcula: darculaSettings,
-    gutterBackground: '#555',
+  dracula: draculaSettings,
-    gutterForeground: '#FFFFFF',
+  duotoneLight: duotoneLightSettings,
-    lineHighlight: '#314151',
+  duotoneDark: duotoneDarkSettings,
-  },
+  eclipse: eclipseSettings,
-  androidstudio: {
+  githubLight: githubLightSettings,
-    background: '#282b2e',
+  githubDark: githubDarkSettings,
-    lineBackground: '#282b2e99',
+  gruvboxDark: gruvboxDarkSettings,
-    foreground: '#a9b7c6',
+  gruvboxLight: gruvboxLightSettings,
-    caret: '#00FF00',
+  materialDark: materialDarkSettings,
-    selection: '#343739',
+  materialLight: materialLightSettings,
-    selectionMatch: '#343739',
+  noctisLilac: noctisLilacSettings,
-    lineHighlight: '#343739',
+  nord: nordSettings,
-  },
+  monokai: monokaiSettings,
-  atomone: {
+  solarizedLight: solarizedLightSettings,
-    background: '#272C35',
+  solarizedDark: solarizedDarkSettings,
-    lineBackground: '#272C3599',
+  sublime: sublimeSettings,
-    foreground: '#9d9b97',
+  tokyoNight: tokyoNightSettings,
-    caret: '#797977',
+  tokyoNightStorm: tokyoNightStormSettings,
-    selection: '#ffffff30',
+  vscodeDark: vscodeDarkSettings,
-    selectionMatch: '#2B323D',
+  vscodeLight: vscodeLightSettings,
-    gutterBackground: '#272C35',
+  xcodeLight: xcodeLightSettings,
-    gutterForeground: '#465063',
+  //xcodeDark: xcodeDarkSettings,
-    gutterBorder: 'transparent',
+  tokyoNightDay: tokyoNightDaySettings,
-    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/abcdef.mjs

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

packages/codemirror/themes/algoboy.mjs

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

packages/codemirror/themes/androidstudio.mjs

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

packages/codemirror/themes/atomone.mjs

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

packages/codemirror/themes/aura.mjs

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

packages/codemirror/themes/bbedit.mjs

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

packages/codemirror/themes/bespin.mjs

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

packages/codemirror/themes/blackscreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: 'white', // whats that?

packages/codemirror/themes/bluescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',

packages/codemirror/themes/darcula.mjs

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

packages/codemirror/themes/dracula.mjs

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

packages/codemirror/themes/duotoneDark.mjs

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

packages/codemirror/themes/duotoneLight.mjs

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

packages/codemirror/themes/eclipse.mjs

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

packages/codemirror/themes/githubDark.mjs

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

packages/codemirror/themes/githubLight.mjs

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

packages/codemirror/themes/gruvboxDark.mjs

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

packages/codemirror/themes/gruvboxLight.mjs

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

packages/codemirror/themes/materialDark.mjs

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

packages/codemirror/themes/materialLight.mjs

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

packages/codemirror/themes/monokai.mjs

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

packages/codemirror/themes/noctisLilac.mjs

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

packages/codemirror/themes/nord.mjs

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

packages/codemirror/themes/solarizedDark.mjs

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

packages/codemirror/themes/solarizedLight.mjs

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

packages/codemirror/themes/strudel-theme.mjs

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

packages/codemirror/themes/sublime.mjs

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

packages/codemirror/themes/teletext.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 
 let colorA = '#6edee4';
 //let colorB = 'magenta';

packages/codemirror/themes/terminal.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: '#41FF00', // whats that?

packages/codemirror/themes/theme-helper.mjs

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

packages/codemirror/themes/tokioNightStorm.mjs

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

packages/codemirror/themes/tokyoNight.mjs

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

packages/codemirror/themes/tokyoNightDay.mjs

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

packages/codemirror/themes/vscodeDark.mjs

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

packages/codemirror/themes/vscodeLight.mjs

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

packages/codemirror/themes/whitescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'white',
   foreground: 'black', // whats that?

packages/codemirror/themes/xcodeDark.mjs

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

packages/codemirror/themes/xcodeLight.mjs

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

packages/codemirror/widget.mjs

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

packages/core/controls.mjs

@@ -47,12 +47,16 @@ export function createParam(names) {
   return func;
 }
 
+// maps control alias names to the "main" control name
+const controlAlias = new Map();
+
 export function registerControl(names, ...aliases) {
   const name = Array.isArray(names) ? names[0] : names;
   let bag = {};
   bag[name] = createParam(names);
   aliases.forEach((alias) => {
     bag[alias] = bag[name];
+    controlAlias.set(alias, name);
     Pattern.prototype[alias] = Pattern.prototype[name];
   });
   return bag;
@@ -1614,3 +1618,26 @@ export const ar = register('ar', (t, pat) => {
   const [attack, release = attack] = t;
   return pat.set({ attack, release });
 });
+
+export const getControlName = (alias) => {
+  if (controlAlias.has(alias)) {
+    return controlAlias.get(alias);
+  }
+  return alias;
+};
+
+/**
+ * Sets properties in a batch.
+ *
+ * @name as
+ * @param {Array} mapping the control names that are set
+ * @example
+ * "c:.5 a:1 f:.25 e:.8".as("note:clip")
+ */
+export const as = register('as', (mapping, pat) => {
+  return pat.fmap((v) => {
+    v = Array.isArray(v) ? v : [v];
+    v = Object.fromEntries(mapping.map((prop, i) => [getControlName(prop), v[i]]));
+    return v;
+  });
+});

packages/core/package.json

@@ -31,11 +31,11 @@
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "fraction.js": "^4.3.7"
+    "fraction.js": "^5.2.1"
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
   "devDependencies": {
-    "vite": "^5.0.10",
+    "vite": "^6.0.11",
-    "vitest": "^2.1.3"
+    "vitest": "^3.0.4"
   }
 }

packages/core/pattern.mjs

@@ -1023,6 +1023,7 @@ function _composeOp(a, b, func) {
     div: [numeralArgs((a, b) => a / b)],
     mod: [numeralArgs(_mod)],
     pow: [numeralArgs(Math.pow)],
+    log2: [numeralArgs(Math.log2)],
     band: [numeralArgs((a, b) => a & b)],
     bor: [numeralArgs((a, b) => a | b)],
     bxor: [numeralArgs((a, b) => a ^ b)],
@@ -1491,6 +1492,14 @@ function _sequenceCount(x) {
 export const mask = curry((a, b) => reify(b).mask(a));
 export const struct = curry((a, b) => reify(b).struct(a));
 export const superimpose = curry((a, b) => reify(b).superimpose(...a));
+export const withValue = curry((a, b) => reify(b).withValue(a));
+
+export const bind = curry((a, b) => reify(b).bind(a));
+export const innerBind = curry((a, b) => reify(b).innerBind(a));
+export const outerBind = curry((a, b) => reify(b).outerBind(a));
+export const squeezeBind = curry((a, b) => reify(b).squeezeBind(a));
+export const stepBind = curry((a, b) => reify(b).stepBind(a));
+export const polyBind = curry((a, b) => reify(b).polyBind(a));
 
 // operators
 export const set = curry((a, b) => reify(b).set(a));
@@ -2539,6 +2548,10 @@ Pattern.prototype.stepJoin = function () {
   return new Pattern(q, first_t);
 };
 
+Pattern.prototype.stepBind = function (func) {
+  return this.fmap(func).stepJoin();
+};
+
 export function _retime(timedHaps) {
   const occupied_perc = timedHaps.filter((t, pat) => pat.hasTactus).reduce((a, b) => a.add(b), Fraction(0));
   const occupied_tactus = removeUndefineds(timedHaps.map((t, pat) => pat.tactus)).reduce(
@@ -3100,3 +3113,25 @@ export let xfade = (a, pos, b) => {
 Pattern.prototype.xfade = function (pos, b) {
   return xfade(this, pos, b);
 };
+
+/**
+ * creates a structure pattern from divisions of a cycle
+ * especially useful for creating rhythms
+ * @name beat
+ * @example
+ * s("bd").beat("0,7,10", 16)
+ * @example
+ * s("sd").beat("4,12", 16)
+ */
+const __beat = (join) => (t, div, pat) => {
+  t = Fraction(t).mod(div);
+  div = Fraction(div);
+  const b = t.div(div);
+  const e = t.add(1).div(div);
+  return join(pat.fmap((x) => pure(x)._compress(b, e)));
+};
+
+export const { beat } = register(
+  ['beat'],
+  __beat((x) => x.innerJoin()),
+);

packages/core/repl.mjs

@@ -63,11 +63,13 @@ export function repl({
   let pPatterns = {};
   let anonymousIndex = 0;
   let allTransform;
+  let eachTransform;
 
   const hush = function () {
     pPatterns = {};
     anonymousIndex = 0;
     allTransform = undefined;
+    eachTransform = undefined;
     return silence;
   };
 
@@ -84,15 +86,42 @@ export function repl({
   const toggle = () => scheduler.toggle();
   const setCps = (cps) => scheduler.setCps(cps);
   const setCpm = (cpm) => scheduler.setCps(cpm / 60);
+
+  // TODO - not documented as jsdoc examples as the test framework doesn't simulate enough context for `each` and `all`..
+
+  /** Applies a function to all the running patterns. Note that the patterns are groups together into a single `stack` before the function is applied. This is probably what you want, but see `each` for
+   * a version that applies the function to each pattern separately.
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * all(fast("<2 3>"))
+   * ```
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * all(x => x.pianoroll())
+   * ```
+   */
   const all = function (transform) {
     allTransform = transform;
     return silence;
   };
+  /** Applies a function to each of the running patterns separately. This is intended for future use with upcoming 'stepwise' features. See `all` for a version that applies the function to all the patterns stacked together into a single pattern.
+   * ```
+   * $: sound("bd - cp sd")
+   * $: sound("hh*8")
+   * each(fast("<2 3>"))
+   * ```
+   */
+  const each = function (transform) {
+    eachTransform = transform;
+    return silence;
+  };
 
   // set pattern methods that use this repl via closure
   const injectPatternMethods = () => {
     Pattern.prototype.p = function (id) {
-      if (id.startsWith('_') || id.endsWith('_')) {
+      if (typeof id === 'string' && (id.startsWith('_') || id.endsWith('_'))) {
         // allows muting a pattern x with x_ or _x
         return silence;
       }
@@ -131,6 +160,7 @@ export function repl({
     });
     return evalScope({
       all,
+      each,
       hush,
       cpm,
       setCps,
@@ -153,11 +183,15 @@ export function repl({
       let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
       if (Object.keys(pPatterns).length) {
         let patterns = Object.values(pPatterns);
-        if (allTransform) {
+        if (eachTransform) {
-          patterns = patterns.map(allTransform);
+          // Explicit lambda so only element (not index and array) are passed
+          patterns = patterns.map((x) => eachTransform(x));
         }
         pattern = stack(...patterns);
-      } else if (allTransform) {
+      } else if (eachTransform) {
+        pattern = eachTransform(pattern);
+      }
+      if (allTransform) {
         pattern = allTransform(pattern);
       }
       if (!isPattern(pattern)) {

packages/core/signal.mjs

@@ -5,9 +5,10 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { Hap } from './hap.mjs';
-import { Pattern, fastcat, reify, silence, stack, register } from './pattern.mjs';
+import { Pattern, fastcat, pure, register, reify, silence, stack } from './pattern.mjs';
 import Fraction from './fraction.mjs';
-import { id, _mod } from './util.mjs';
+
+import { id, keyAlias, getCurrentKeyboardState } from './util.mjs';
 
 export function steady(value) {
   // A continuous value
@@ -159,6 +160,37 @@ const timeToRands = (t, n) => timeToRandsPrime(timeToIntSeed(t), n);
  */
 export const run = (n) => saw.range(0, n).floor().segment(n);
 
+/**
+ * Creates a pattern from a binary number.
+ *
+ * @name binary
+ * @param {number} n - input number to convert to binary
+ * @example
+ * "hh".s().struct(binary(5))
+ * // "hh".s().struct("1 0 1")
+ */
+export const binary = (n) => {
+  const nBits = reify(n).log2(0).floor().add(1);
+  return binaryN(n, nBits);
+};
+
+/**
+ * Creates a pattern from a binary number, padded to n bits long.
+ *
+ * @name binaryN
+ * @param {number} n - input number to convert to binary
+ * @param {number} nBits - pattern length, defaults to 16
+ * @example
+ * "hh".s().struct(binaryN(55532, 16))
+ * // "hh".s().struct("1 1 0 1 1 0 0 0 1 1 1 0 1 1 0 0")
+ */
+export const binaryN = (n, nBits = 16) => {
+  nBits = reify(nBits);
+  // Shift and mask, putting msb on the right-side
+  const bitPos = run(nBits).mul(-1).add(nBits.sub(1));
+  return reify(n).segment(nBits).brshift(bitPos).band(pure(1));
+};
+
 export const randrun = (n) => {
   return signal((t) => {
     // Without adding 0.5, the first cycle is always 0,1,2,3,...
@@ -639,3 +671,48 @@ export const never = register('never', function (_, pat) {
 export const always = register('always', function (func, pat) {
   return func(pat);
 });
+
+//keyname: string | Array<string>
+//keyname reference: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+export function _keyDown(keyname) {
+  if (Array.isArray(keyname) === false) {
+    keyname = [keyname];
+  }
+  const keyState = getCurrentKeyboardState();
+  return keyname.every((x) => {
+    const keyName = keyAlias.get(x) ?? x;
+    return keyState[keyName];
+  });
+}
+
+/**
+ *
+ * Do something on a keypress, or array of keypresses
+ * [Key name reference](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
+ *
+ * @name whenKey
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * s("bd(5,8)").whenKey("Control:j", x => x.segment(16).color("red")).whenKey("Control:i", x => x.fast(2).color("blue"))
+ */
+
+export const whenKey = register('whenKey', function (input, func, pat) {
+  return pat.when(_keyDown(input), func);
+});
+
+/**
+ *
+ * returns true when a key or array of keys is held
+ * [Key name reference](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
+ *
+ * @name keyDown
+ * @memberof Pattern
+ * @returns Pattern
+ * @example
+ * keyDown("Control:j").pick([s("bd(5,8)"), s("cp(3,8)")])
+ */
+
+export const keyDown = register('keyDown', function (pat) {
+  return pat.fmap(_keyDown);
+});

packages/core/test/controls.test.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2023 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { s, pan } from '../controls.mjs';
+import { s, pan, getControlName } from '../controls.mjs';
 import { mini } from '../../mini/mini.mjs';
 import { describe, it, expect } from 'vitest';
 import Fraction from '../fraction.mjs';
@@ -39,4 +39,8 @@ describe('controls', () => {
   it('combines tactus of the pattern for .mix as lcm', () => {
     expect(s(mini('bd cp mt').set.mix(pan(mini('1 2 3 4')))).tactus).toEqual(Fraction(12));
   });
+  it('finds control name by alias', () => {
+    expect(getControlName('lpf')).toEqual('cutoff');
+    expect(getControlName('cutoff')).toEqual('cutoff');
+  });
 });

packages/core/test/pattern.test.mjs

@@ -46,6 +46,7 @@ import {
   rev,
   time,
   run,
+  binaryN,
   pick,
   stackLeft,
   stackRight,
@@ -958,6 +959,18 @@ describe('Pattern', () => {
       expect(run(4).firstCycle()).toStrictEqual(sequence(0, 1, 2, 3).firstCycle());
     });
   });
+  describe('binaryN', () => {
+    it('Can make a binary pattern from a decimal', () => {
+      expect(binaryN(55532).firstCycle()).toStrictEqual(
+        sequence(1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0).firstCycle(),
+      );
+    });
+    it('Can make a binary pattern from patterned inputs', () => {
+      expect(binaryN(pure(0x1337), pure(14)).firstCycle()).toStrictEqual(
+        sequence(0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1).firstCycle(),
+      );
+    });
+  });
   describe('ribbon', () => {
     it('Can ribbon', () => {
       expect(cat(0, 1, 2, 3, 4, 5, 6, 7).ribbon(2, 4).fast(4).firstCycle()).toStrictEqual(

packages/core/util.mjs

@@ -434,6 +434,38 @@ function getUnixTimeSeconds() {
   return Date.now() * 0.001;
 }
 
+export const keyAlias = new Map([
+  ['control', 'Control'],
+  ['ctrl', 'Control'],
+  ['alt', 'Alt'],
+  ['shift', 'Shift'],
+  ['down', 'ArrowDown'],
+  ['up', 'ArrowUp'],
+  ['left', 'ArrowLeft'],
+  ['right', 'ArrowRight'],
+]);
+let keyState;
+
+export function getCurrentKeyboardState() {
+  if (keyState == null) {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    keyState = {};
+    // Listen for the keydown event to mark the key as pressed
+    window.addEventListener('keydown', (event) => {
+      keyState[event.key] = true; // Mark the key as pressed
+    });
+
+    // Listen for the keyup event to mark the key as released
+    window.addEventListener('keyup', (event) => {
+      keyState[event.key] = false; // Mark the key as released
+    });
+  }
+
+  return { ...keyState }; // Return a shallow copy of the key state object
+}
+
 // Floating point versions, see Fraction for rational versions
 // // greatest common divisor
 // export const gcd = function (x, y, ...z) {

packages/csound/package.json

@@ -37,6 +37,6 @@
     "@strudel/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/desktopbridge/package.json

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

packages/desktopbridge/utils.mjs

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

packages/draw/draw.mjs

@@ -26,7 +26,7 @@ export const getDrawContext = (id = 'test-canvas', options) => {
       }, 200);
     });
   }
-  return canvas.getContext(contextType);
+  return canvas.getContext(contextType, { willReadFrequently: true });
 };
 
 let animationFrames = {};

packages/draw/package.json

@@ -32,6 +32,6 @@
     "@strudel/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/draw/pianoroll.mjs

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

packages/hs2js/package.json

@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel",
   "dependencies": {
-    "web-tree-sitter": "^0.20.8"
+    "web-tree-sitter": "^0.24.7"
   },
   "devDependencies": {
-    "tree-sitter-haskell": "^0.21.0",
+    "tree-sitter-haskell": "^0.23.1",
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/hydra/package.json

@@ -39,6 +39,6 @@
   },
   "devDependencies": {
     "pkg": "^5.8.1",
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/midi/package.json

@@ -31,9 +31,9 @@
   "dependencies": {
     "@strudel/core": "workspace:*",
     "@strudel/webaudio": "workspace:*",
-    "webmidi": "^3.1.8"
+    "webmidi": "^3.1.12"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/mini/package.json

@@ -35,8 +35,8 @@
     "@strudel/core": "workspace:*"
   },
   "devDependencies": {
-    "peggy": "^3.0.2",
+    "peggy": "^4.2.0",
-    "vite": "^5.0.10",
+    "vite": "^6.0.11",
-    "vitest": "^2.1.3"
+    "vitest": "^3.0.4"
   }
 }

packages/mqtt/mqtt.mjs

@@ -23,6 +23,9 @@ function onMessageArrived(message) {
 
 function onFailure(err) {
   console.error('Connection failed: ', err);
+  if (typeof window !== 'undefined') {
+    document.cookie = 'mqtt_pass=';
+  }
 }
 
 Pattern.prototype.mqtt = function (
@@ -35,12 +38,17 @@ Pattern.prototype.mqtt = function (
 ) {
   const key = host + '-' + client;
   let connected = false;
+  let password_entered = false;
+
   if (!client) {
     client = 'strudel-' + String(Math.floor(Math.random() * 1000000));
   }
   function onConnect() {
     console.log('Connected to mqtt broker');
     connected = true;
+    if (password_entered) {
+      document.cookie = 'mqtt_pass=' + password;
+    }
   }
 
   let cx;
@@ -58,6 +66,17 @@ Pattern.prototype.mqtt = function (
 
     if (username) {
       props.userName = username;
+      if (typeof password === 'undefined' && typeof window !== 'undefined') {
+        const cookie = /mqtt_pass=(\w+)/.exec(window.document.cookie);
+        if (cookie) {
+          password = cookie[1];
+        }
+        if (typeof password === 'undefined') {
+          password = prompt('Please enter MQTT server password');
+          password_entered = true;
+        }
+      }
+
       props.password = password;
     }
     cx.connect(props);

packages/mqtt/package.json

@@ -33,6 +33,6 @@
     "paho-mqtt": "^1.1.0"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/osc/package.json

@@ -37,10 +37,10 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel/core": "workspace:*",
-    "osc-js": "^2.4.0"
+    "osc-js": "^2.4.1"
   },
   "devDependencies": {
     "pkg": "^5.8.1",
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/reference/README.md

@@ -0,0 +1,8 @@
+# @strudel/reference
+
+this package contains metadata for all documented strudel functions, useful to implement a reference.
+
+```js
+import { reference } from '@strudel/reference';
+console.log(reference)
+```

packages/reference/index.mjs

@@ -0,0 +1,2 @@
+import jsdoc from '../../doc.json';
+export const reference = jsdoc;

packages/reference/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@strudel/reference",
+  "version": "1.1.0",
+  "description": "Headless reference of all strudel functions",
+  "main": "index.mjs",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.mjs"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "tidalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "contributors": [
+    "Alex McLean <alex@slab.org>"
+  ],
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "vite": "^6.0.11"
+  }
+}

packages/reference/vite.config.js

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

packages/repl/package.json

@@ -45,8 +45,7 @@
     "@strudel/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^6.0.2",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "vite": "^6.0.11"
-    "vite": "^5.0.10"
   }
 }

packages/repl/vite.config.js

@@ -1,7 +1,5 @@
 import { defineConfig } from 'vite';
-import { dependencies } from './package.json';
 import { resolve } from 'path';
-// import { visualizer } from 'rollup-plugin-visualizer';
 import replace from '@rollup/plugin-replace';
 
 // https://vitejs.dev/config/

packages/serial/package.json

@@ -32,6 +32,6 @@
     "@strudel/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/soundfonts/package.json

@@ -32,10 +32,10 @@
     "@strudel/core": "workspace:*",
     "@strudel/webaudio": "workspace:*",
     "sfumato": "^0.1.2",
-    "soundfont2": "^0.4.0"
+    "soundfont2": "^0.5.0"
   },
   "devDependencies": {
     "node-fetch": "^3.3.2",
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/superdough/package.json

@@ -32,9 +32,9 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   },
   "dependencies": {
-    "nanostores": "^0.9.5"
+    "nanostores": "^0.11.3"
   }
 }

packages/superdough/superdough.mjs

@@ -270,11 +270,12 @@ function getReverb(orbit, duration, fade, lp, dim, ir) {
 export let analysers = {},
   analysersData = {};
 
-export function getAnalyserById(id, fftSize = 1024) {
+export function getAnalyserById(id, fftSize = 1024, smoothingTimeConstant = 0.5) {
   if (!analysers[id]) {
     // make sure this doesn't happen too often as it piles up garbage
     const analyserNode = getAudioContext().createAnalyser();
     analyserNode.fftSize = fftSize;
+    analyserNode.smoothingTimeConstant = smoothingTimeConstant;
     // getDestination().connect(analyserNode);
     analysers[id] = analyserNode;
     analysersData[id] = new Float32Array(analysers[id].frequencyBinCount);

packages/tidal/package.json

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

packages/tonal/package.json

@@ -31,12 +31,12 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@strudel/core": "workspace:*",
-    "@tonaljs/tonal": "^4.7.2",
+    "@tonaljs/tonal": "^4.10.0",
     "chord-voicings": "^0.0.1",
-    "webmidi": "^3.1.8"
+    "webmidi": "^3.1.12"
   },
   "devDependencies": {
-    "vite": "^5.0.10",
+    "vite": "^6.0.11",
-    "vitest": "^2.1.3"
+    "vitest": "^3.0.4"
   }
 }

packages/transpiler/package.json

@@ -32,12 +32,12 @@
   "dependencies": {
     "@strudel/core": "workspace:*",
     "@strudel/mini": "workspace:*",
-    "acorn": "^8.11.3",
+    "acorn": "^8.14.0",
     "escodegen": "^2.1.0",
-    "estree-walker": "^3.0.1"
+    "estree-walker": "^3.0.3"
   },
   "devDependencies": {
-    "vite": "^5.0.10",
+    "vite": "^6.0.11",
-    "vitest": "^2.1.3"
+    "vitest": "^3.0.4"
   }
 }

packages/web/package.json

@@ -40,7 +40,7 @@
     "@strudel/webaudio": "workspace:*"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^6.0.2",
-    "vite": "^5.0.10"
+    "vite": "^6.0.11"
   }
 }

packages/webaudio/index.mjs

@@ -6,4 +6,5 @@ This program is free software: you can redistribute it and/or modify it under th
 
 export * from './webaudio.mjs';
 export * from './scope.mjs';
+export * from './spectrum.mjs';
 export * from 'superdough';

packages/webaudio/package.json

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

packages/webaudio/spectrum.mjs

@@ -0,0 +1,69 @@
+import { Pattern, clamp } from '@strudel/core';
+import { getDrawContext, getTheme } from '@strudel/draw';
+import { analysers, getAnalyzerData } from 'superdough';
+
+/**
+ * Renders a spectrum analyzer for the incoming audio signal.
+ * @name spectrum
+ * @param {object} config optional config with options:
+ * @param {integer} thickness line thickness in px (default 3)
+ * @param {integer} speed scroll speed (default 1)
+ * @param {integer} min min db (default -80)
+ * @param {integer} max max db (default 0)
+ * @example
+ * n("<0 4 <2 3> 1>*3")
+ * .off(1/8, add(n(5)))
+ * .off(1/5, add(n(7)))
+ * .scale("d3:minor:pentatonic")
+ * .s('sine')
+ * .dec(.3).room(.5)
+ * ._spectrum()
+ */
+let latestColor = {};
+Pattern.prototype.spectrum = function (config = {}) {
+  let id = config.id ?? 1;
+  return this.analyze(id).draw(
+    (haps) => {
+      config.color = haps[0]?.value?.color || latestColor[id] || getTheme().foreground;
+      latestColor[id] = config.color;
+      drawSpectrum(analysers[id], config);
+    },
+    { id },
+  );
+};
+
+Pattern.prototype.scope = Pattern.prototype.tscope;
+
+const lastFrames = new Map();
+
+function drawSpectrum(
+  analyser,
+  { thickness = 3, speed = 1, min = -80, max = 0, ctx = getDrawContext(), id = 1, color } = {},
+) {
+  ctx.lineWidth = thickness;
+  ctx.strokeStyle = color;
+
+  if (!analyser) {
+    // if analyser is undefined, draw straight line
+    // it may be undefined when no sound has been played yet
+    return;
+  }
+  const scrollSize = speed;
+  const dataArray = getAnalyzerData('frequency', id);
+  const canvas = ctx.canvas;
+  ctx.fillStyle = color;
+  const bufferSize = analyser.frequencyBinCount;
+  let imageData = lastFrames.get(id) || ctx.getImageData(0, 0, canvas.width, canvas.height);
+  lastFrames.set(id, imageData);
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.putImageData(imageData, -scrollSize, 0);
+  let q = canvas.width - speed;
+  for (let i = 0; i < bufferSize; i++) {
+    const normalized = clamp((dataArray[i] - min) / (max - min), 0, 1);
+    ctx.globalAlpha = normalized;
+    const next = (Math.log(i + 1) / Math.log(bufferSize)) * canvas.height;
+    const size = 2; //next - pos;
+    ctx.fillRect(q, canvas.height - next, scrollSize, size);
+  }
+  lastFrames.set(id, ctx.getImageData(0, 0, canvas.width, canvas.height));
+}

packages/xen/package.json

@@ -33,7 +33,7 @@
     "@strudel/core": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.10",
+    "vite": "^6.0.11",
-    "vitest": "^2.1.3"
+    "vitest": "^3.0.4"
   }
 }

src-tauri/Cargo.toml

@@ -21,6 +21,7 @@ tauri = { version = "1.4.0", features = [ "dialog-all", "clipboard-write-text",
 midir = "0.9.1"
 tokio = { version = "1.29.0", features = ["full"] }
 rosc = "0.10.1"
+tauri-plugin-clipboard-manager = "2"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

test/__snapshots__/examples.test.mjs.snap

@@ -912,6 +912,27 @@ exports[`runs examples > example "arrange" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "as" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c clip:0.5 ]",
+  "[ 1/4 → 1/2 | note:a clip:1 ]",
+  "[ 1/2 → 3/4 | note:f clip:0.25 ]",
+  "[ 3/4 → 1/1 | note:e clip:0.8 ]",
+  "[ 1/1 → 5/4 | note:c clip:0.5 ]",
+  "[ 5/4 → 3/2 | note:a clip:1 ]",
+  "[ 3/2 → 7/4 | note:f clip:0.25 ]",
+  "[ 7/4 → 2/1 | note:e clip:0.8 ]",
+  "[ 2/1 → 9/4 | note:c clip:0.5 ]",
+  "[ 9/4 → 5/2 | note:a clip:1 ]",
+  "[ 5/2 → 11/4 | note:f clip:0.25 ]",
+  "[ 11/4 → 3/1 | note:e clip:0.8 ]",
+  "[ 3/1 → 13/4 | note:c clip:0.5 ]",
+  "[ 13/4 → 7/2 | note:a clip:1 ]",
+  "[ 7/2 → 15/4 | note:f clip:0.25 ]",
+  "[ 15/4 → 4/1 | note:e clip:0.8 ]",
+]
+`;
+
 exports[`runs examples > example "attack" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:c3 attack:0 ]",
@@ -954,6 +975,36 @@ exports[`runs examples > example "bank" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "beat" example index 0 1`] = `
+[
+  "[ 0/1 → 1/16 | s:bd ]",
+  "[ 7/16 → 1/2 | s:bd ]",
+  "[ 5/8 → 11/16 | s:bd ]",
+  "[ 1/1 → 17/16 | s:bd ]",
+  "[ 23/16 → 3/2 | s:bd ]",
+  "[ 13/8 → 27/16 | s:bd ]",
+  "[ 2/1 → 33/16 | s:bd ]",
+  "[ 39/16 → 5/2 | s:bd ]",
+  "[ 21/8 → 43/16 | s:bd ]",
+  "[ 3/1 → 49/16 | s:bd ]",
+  "[ 55/16 → 7/2 | s:bd ]",
+  "[ 29/8 → 59/16 | s:bd ]",
+]
+`;
+
+exports[`runs examples > example "beat" example index 1 1`] = `
+[
+  "[ 1/4 → 5/16 | s:sd ]",
+  "[ 3/4 → 13/16 | s:sd ]",
+  "[ 5/4 → 21/16 | s:sd ]",
+  "[ 7/4 → 29/16 | s:sd ]",
+  "[ 9/4 → 37/16 | s:sd ]",
+  "[ 11/4 → 45/16 | s:sd ]",
+  "[ 13/4 → 53/16 | s:sd ]",
+  "[ 15/4 → 61/16 | s:sd ]",
+]
+`;
+
 exports[`runs examples > example "begin" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:rave begin:0 ]",
@@ -967,6 +1018,60 @@ exports[`runs examples > example "begin" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "binary" example index 0 1`] = `
+[
+  "[ 0/1 → 1/3 | s:hh ]",
+  "[ 2/3 → 1/1 | s:hh ]",
+  "[ 1/1 → 4/3 | s:hh ]",
+  "[ 5/3 → 2/1 | s:hh ]",
+  "[ 2/1 → 7/3 | s:hh ]",
+  "[ 8/3 → 3/1 | s:hh ]",
+  "[ 3/1 → 10/3 | s:hh ]",
+  "[ 11/3 → 4/1 | s:hh ]",
+]
+`;
+
+exports[`runs examples > example "binaryN" example index 0 1`] = `
+[
+  "[ 0/1 → 1/16 | s:hh ]",
+  "[ 1/16 → 1/8 | s:hh ]",
+  "[ 3/16 → 1/4 | s:hh ]",
+  "[ 1/4 → 5/16 | s:hh ]",
+  "[ 1/2 → 9/16 | s:hh ]",
+  "[ 9/16 → 5/8 | s:hh ]",
+  "[ 5/8 → 11/16 | s:hh ]",
+  "[ 3/4 → 13/16 | s:hh ]",
+  "[ 13/16 → 7/8 | s:hh ]",
+  "[ 1/1 → 17/16 | s:hh ]",
+  "[ 17/16 → 9/8 | s:hh ]",
+  "[ 19/16 → 5/4 | s:hh ]",
+  "[ 5/4 → 21/16 | s:hh ]",
+  "[ 3/2 → 25/16 | s:hh ]",
+  "[ 25/16 → 13/8 | s:hh ]",
+  "[ 13/8 → 27/16 | s:hh ]",
+  "[ 7/4 → 29/16 | s:hh ]",
+  "[ 29/16 → 15/8 | s:hh ]",
+  "[ 2/1 → 33/16 | s:hh ]",
+  "[ 33/16 → 17/8 | s:hh ]",
+  "[ 35/16 → 9/4 | s:hh ]",
+  "[ 9/4 → 37/16 | s:hh ]",
+  "[ 5/2 → 41/16 | s:hh ]",
+  "[ 41/16 → 21/8 | s:hh ]",
+  "[ 21/8 → 43/16 | s:hh ]",
+  "[ 11/4 → 45/16 | s:hh ]",
+  "[ 45/16 → 23/8 | s:hh ]",
+  "[ 3/1 → 49/16 | s:hh ]",
+  "[ 49/16 → 25/8 | s:hh ]",
+  "[ 51/16 → 13/4 | s:hh ]",
+  "[ 13/4 → 53/16 | s:hh ]",
+  "[ 7/2 → 57/16 | s:hh ]",
+  "[ 57/16 → 29/8 | s:hh ]",
+  "[ 29/8 → 59/16 | s:hh ]",
+  "[ 15/4 → 61/16 | s:hh ]",
+  "[ 61/16 → 31/8 | s:hh ]",
+]
+`;
+
 exports[`runs examples > example "bite" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | note:Bb3 ]",
@@ -4065,6 +4170,8 @@ exports[`runs examples > example "juxBy" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "keyDown" example index 0 1`] = `[]`;
+
 exports[`runs examples > example "lastOf" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:c3 ]",
@@ -7508,6 +7615,75 @@ exports[`runs examples > example "sometimesBy" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "spectrum" example index 0 1`] = `
+[
+  "[ -5/24 ⇜ (0/1 → 1/8) | note:F4 s:sine decay:0.3 room:0.5 ]",
+  "[ -2/15 ⇜ (0/1 → 1/5) | note:A4 s:sine decay:0.3 room:0.5 ]",
+  "[ -1/120 ⇜ (0/1 → 1/5) ⇝ 13/40 | note:A5 s:sine decay:0.3 room:0.5 ]",
+  "[ 0/1 → 1/3 | note:D3 s:sine decay:0.3 room:0.5 ]",
+  "[ 1/8 → 11/24 | note:D4 s:sine decay:0.3 room:0.5 ]",
+  "[ -1/120 ⇜ (1/5 → 13/40) | note:A5 s:sine decay:0.3 room:0.5 ]",
+  "[ 1/5 → 8/15 | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ 13/40 → 79/120 | note:G5 s:sine decay:0.3 room:0.5 ]",
+  "[ 1/3 → 2/3 | note:C4 s:sine decay:0.3 room:0.5 ]",
+  "[ 11/24 → 19/24 | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ 8/15 → 13/15 | note:F5 s:sine decay:0.3 room:0.5 ]",
+  "[ 79/120 → 119/120 | note:F6 s:sine decay:0.3 room:0.5 ]",
+  "[ 2/3 → 1/1 | note:G3 s:sine decay:0.3 room:0.5 ]",
+  "[ (19/24 → 1/1) ⇝ 9/8 | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ (13/15 → 1/1) ⇝ 6/5 | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ (119/120 → 1/1) ⇝ 53/40 | note:C6 s:sine decay:0.3 room:0.5 ]",
+  "[ 19/24 ⇜ (1/1 → 9/8) | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ 13/15 ⇜ (1/1 → 6/5) | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ 119/120 ⇜ (1/1 → 6/5) ⇝ 53/40 | note:C6 s:sine decay:0.3 room:0.5 ]",
+  "[ 1/1 → 4/3 | note:F3 s:sine decay:0.3 room:0.5 ]",
+  "[ 9/8 → 35/24 | note:F4 s:sine decay:0.3 room:0.5 ]",
+  "[ 119/120 ⇜ (6/5 → 53/40) | note:C6 s:sine decay:0.3 room:0.5 ]",
+  "[ 6/5 → 23/15 | note:A4 s:sine decay:0.3 room:0.5 ]",
+  "[ 53/40 → 199/120 | note:A5 s:sine decay:0.3 room:0.5 ]",
+  "[ 4/3 → 5/3 | note:D3 s:sine decay:0.3 room:0.5 ]",
+  "[ 35/24 → 43/24 | note:D4 s:sine decay:0.3 room:0.5 ]",
+  "[ 23/15 → 28/15 | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ 199/120 → 239/120 | note:G5 s:sine decay:0.3 room:0.5 ]",
+  "[ 5/3 → 2/1 | note:C4 s:sine decay:0.3 room:0.5 ]",
+  "[ (43/24 → 2/1) ⇝ 17/8 | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ (28/15 → 2/1) ⇝ 11/5 | note:F5 s:sine decay:0.3 room:0.5 ]",
+  "[ (239/120 → 2/1) ⇝ 93/40 | note:F6 s:sine decay:0.3 room:0.5 ]",
+  "[ 43/24 ⇜ (2/1 → 17/8) | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ 28/15 ⇜ (2/1 → 11/5) | note:F5 s:sine decay:0.3 room:0.5 ]",
+  "[ 239/120 ⇜ (2/1 → 11/5) ⇝ 93/40 | note:F6 s:sine decay:0.3 room:0.5 ]",
+  "[ 2/1 → 7/3 | note:A3 s:sine decay:0.3 room:0.5 ]",
+  "[ 17/8 → 59/24 | note:A4 s:sine decay:0.3 room:0.5 ]",
+  "[ 239/120 ⇜ (11/5 → 93/40) | note:F6 s:sine decay:0.3 room:0.5 ]",
+  "[ 11/5 → 38/15 | note:D5 s:sine decay:0.3 room:0.5 ]",
+  "[ 93/40 → 319/120 | note:D6 s:sine decay:0.3 room:0.5 ]",
+  "[ 7/3 → 8/3 | note:F3 s:sine decay:0.3 room:0.5 ]",
+  "[ 59/24 → 67/24 | note:F4 s:sine decay:0.3 room:0.5 ]",
+  "[ 38/15 → 43/15 | note:A4 s:sine decay:0.3 room:0.5 ]",
+  "[ 319/120 → 359/120 | note:A5 s:sine decay:0.3 room:0.5 ]",
+  "[ 8/3 → 3/1 | note:D3 s:sine decay:0.3 room:0.5 ]",
+  "[ (67/24 → 3/1) ⇝ 25/8 | note:D4 s:sine decay:0.3 room:0.5 ]",
+  "[ (43/15 → 3/1) ⇝ 16/5 | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ (359/120 → 3/1) ⇝ 133/40 | note:G5 s:sine decay:0.3 room:0.5 ]",
+  "[ 67/24 ⇜ (3/1 → 25/8) | note:D4 s:sine decay:0.3 room:0.5 ]",
+  "[ 43/15 ⇜ (3/1 → 16/5) | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ 359/120 ⇜ (3/1 → 16/5) ⇝ 133/40 | note:G5 s:sine decay:0.3 room:0.5 ]",
+  "[ 3/1 → 10/3 | note:C4 s:sine decay:0.3 room:0.5 ]",
+  "[ 25/8 → 83/24 | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ 359/120 ⇜ (16/5 → 133/40) | note:G5 s:sine decay:0.3 room:0.5 ]",
+  "[ 16/5 → 53/15 | note:F5 s:sine decay:0.3 room:0.5 ]",
+  "[ 133/40 → 439/120 | note:F6 s:sine decay:0.3 room:0.5 ]",
+  "[ 10/3 → 11/3 | note:G3 s:sine decay:0.3 room:0.5 ]",
+  "[ 83/24 → 91/24 | note:G4 s:sine decay:0.3 room:0.5 ]",
+  "[ 53/15 → 58/15 | note:C5 s:sine decay:0.3 room:0.5 ]",
+  "[ 439/120 → 479/120 | note:C6 s:sine decay:0.3 room:0.5 ]",
+  "[ 11/3 → 4/1 | note:F3 s:sine decay:0.3 room:0.5 ]",
+  "[ (91/24 → 4/1) ⇝ 33/8 | note:F4 s:sine decay:0.3 room:0.5 ]",
+  "[ (58/15 → 4/1) ⇝ 21/5 | note:A4 s:sine decay:0.3 room:0.5 ]",
+  "[ (479/120 → 4/1) ⇝ 173/40 | note:A5 s:sine decay:0.3 room:0.5 ]",
+]
+`;
+
 exports[`runs examples > example "speed" example index 0 1`] = `
 [
   "[ 0/1 → 1/6 | s:bd speed:1 ]",
@@ -8763,6 +8939,8 @@ exports[`runs examples > example "when" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "whenKey" example index 0 1`] = `[]`;
+
 exports[`runs examples > example "withValue" example index 0 1`] = `
 [
   "[ 0/1 → 1/3 | 10 ]",

test/runtime.mjs

@@ -134,6 +134,9 @@ strudel.Pattern.prototype._pitchwheel = function () {
 strudel.Pattern.prototype._pianoroll = function () {
   return this;
 };
+strudel.Pattern.prototype._spectrum = function () {
+  return this;
+};
 strudel.Pattern.prototype.markcss = function () {
   return this;
 };

tools/dbpatch/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "csv": "^6.3.6"
+    "csv": "^6.3.11"
   }
 }

website/astro.config.mjs

@@ -1,7 +1,6 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import mdx from '@astrojs/mdx';
-
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
@@ -9,7 +8,6 @@ import rehypeUrls from 'rehype-urls';
 
 import tailwind from '@astrojs/tailwind';
 import AstroPWA from '@vite-pwa/astro';
-// import { visualizer } from 'rollup-plugin-visualizer';
 
 const site = `https://strudel.cc/`; // root url without a path
 const base = '/'; // base path of the strudel site
@@ -69,6 +67,7 @@ export default defineConfig({
       registerType: 'autoUpdate',
       injectRegister: 'auto',
       workbox: {
+        maximumFileSizeToCacheInBytes: 4194304, // 4MB
         globPatterns: ['**/*.{js,css,html,ico,png,svg,json,wav,mp3,ogg,ttf,woff2,TTF,otf}'],
         runtimeCaching: [
           {

website/package.json

@@ -6,25 +6,24 @@
   "scripts": {
     "dev": "astro dev --host 0.0.0.0",
     "start": "astro dev",
-    "check": "astro check && tsc",
     "build": "astro build",
     "preview": "astro preview --port 3009 --host 0.0.0.0",
     "astro": "astro",
     "postinstall": "cp node_modules/hs2js/dist/tree-sitter.wasm public && cp node_modules/hs2js/dist/tree-sitter-haskell.wasm public"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.22.0",
+    "@algolia/client-search": "^5.20.0",
-    "@astro-community/astro-embed-youtube": "^0.4.4",
+    "@astro-community/astro-embed-youtube": "^0.5.6",
-    "@astrojs/mdx": "^2.0.3",
+    "@astrojs/mdx": "^4.0.7",
-    "@astrojs/react": "^3.0.9",
+    "@astrojs/react": "^4.1.6",
-    "@astrojs/rss": "^4.0.2",
+    "@astrojs/rss": "^4.0.11",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^5.1.5",
-    "@docsearch/css": "^3.5.2",
+    "@docsearch/css": "^3.8.3",
-    "@docsearch/react": "^3.5.2",
+    "@docsearch/react": "^3.8.3",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.1.1",
+    "@heroicons/react": "^2.2.0",
-    "@nanostores/persistent": "^0.9.1",
+    "@nanostores/persistent": "^0.10.2",
-    "@nanostores/react": "^0.7.1",
+    "@nanostores/react": "^0.8.4",
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
     "@strudel/csound": "workspace:*",
@@ -43,35 +42,36 @@
     "@strudel/transpiler": "workspace:*",
     "@strudel/webaudio": "workspace:*",
     "@strudel/xen": "workspace:*",
-    "@supabase/supabase-js": "^2.39.1",
+    "@supabase/supabase-js": "^2.48.1",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/postcss": "^4.0.0",
-    "@tauri-apps/api": "^1.5.3",
+    "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^20.10.6",
+    "@tauri-apps/api": "^2.2.0",
-    "@types/react": "^18.2.46",
+    "@tauri-apps/plugin-clipboard-manager": "^2.2.0",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^22.10.10",
-    "astro": "^4.0.8",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "astro": "^5.1.9",
     "claviature": "^0.1.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^4.1.0",
-    "hs2js": "0.0.8",
+    "hs2js": "0.1.0",
-    "nanoid": "^5.0.4",
+    "nanoid": "^5.0.9",
-    "nanostores": "^0.9.5",
+    "nanostores": "^0.11.3",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
-    "react-hook-inview": "^4.5.0",
+    "react-hook-inview": "^4.5.1",
     "react-lite-youtube-embed": "^2.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-urls": "^1.2.0",
     "remark-toc": "^9.0.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.17",
-    "worker-timers": "^7.1.4"
+    "worker-timers": "^8.0.13"
   },
   "devDependencies": {
-    "@vite-pwa/astro": "^0.2.0",
+    "@vite-pwa/astro": "^0.5.0",
     "html-escaper": "^3.0.3",
-    "sharp": "^0.33.1",
+    "sharp": "^0.33.5",
-    "vite-plugin-pwa": "^0.17.4",
+    "workbox-window": "^7.3.0"
-    "workbox-window": "^7.0.0"
   }
 }

website/src/components/Claviature.jsx

@@ -13,8 +13,9 @@ export default function Claviature({ options, onClick, onMouseDown, onMouseUp, o
     <svg {...svg.attributes}>
       {svg.children.map((el, i) => {
         const TagName = el.name;
+        const { key, ...attributes } = el.attributes;
         return (
-          <TagName key={`${el.name}-${i}`} {...el.attributes}>
+          <TagName key={`${el.name}-${i}`} {...attributes}>
             {el.value}
           </TagName>
         );

website/src/components/HeadCommon.astro

@@ -1,4 +1,5 @@
 ---
+// @ts-ignore
 import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';