add snapshot

fix: codeformat
added lowpass filter lfo
2026-09-21 21:01:01 -04:00 · 2025-01-18 15:23:00 +01:00 · 2025-01-18 15:19:33 +01:00 · 2025-01-18 15:06:07 +01:00 · 2025-01-17 19:27:00 +01:00 · 2025-01-16 11:18:33 +00:00
68 changed files with 13260 additions and 10289 deletions
@@ -23,3 +23,4 @@ reverbGen.mjs
 hydra.mjs
 jsdoc-synonyms.js
 packages/hs2js/src/hs2js.mjs
+samples
@@ -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!
@@ -14,10 +14,16 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w

 After cloning the project, you can run the REPL locally:

-```bash
-pnpm i
-pnpm dev
-```
+1. Install [Node.js](https://nodejs.org/)
+2. Install [pnpm](https://pnpm.io/installation)
+3. Install dependencies by running the following command:
+   ```bash
+   pnpm i
+   ```
+4. Run the development server:
+   ```bash
+   pnpm dev
+   ```

 ## Using Strudel In Your Project

@@ -56,18 +56,18 @@
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.5.9",
-    "@vitest/ui": "^1.1.0",
-    "acorn": "^8.11.3",
+    "@vitest/ui": "^2.1.3",
+    "acorn": "^8.13.0",
    "dependency-tree": "^10.0.9",
    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
    "events": "^3.3.0",
-    "jsdoc": "^4.0.2",
+    "jsdoc": "^4.0.3",
    "jsdoc-json": "^2.0.2",
    "jsdoc-to-markdown": "^8.0.0",
-    "lerna": "^8.0.1",
-    "prettier": "^3.1.1",
+    "lerna": "^8.1.8",
+    "prettier": "^3.3.3",
    "rollup-plugin-visualizer": "^5.12.0",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -13,7 +13,7 @@ import {
  lineNumbers,
  drawSelection,
 } from '@codemirror/view';
-import { Pattern, repl } from '@strudel/core';
+import { repl, registerControl } from '@strudel/core';
 import { Drawer, cleanupDraw } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
@@ -99,10 +99,8 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
          },
          {
            key: 'Alt-.',
-            run: (_, e) => {
-              e.preventDefault();
-              onStop?.();
-            },
+            preventDefault: true,
+            run: () => onStop?.(),
          },
          /* {
          key: 'Ctrl-Shift-.',
@@ -135,6 +133,7 @@ export class StrudelMirror {
      autodraw,
      prebake,
      bgFill = true,
+      solo = true,
      ...replOptions
    } = options;
    this.code = initialCode;
@@ -145,6 +144,7 @@ export class StrudelMirror {
    this.drawContext = drawContext;
    this.onDraw = onDraw || this.draw;
    this.id = id || s4();
+    this.solo = solo;

    this.drawer = new Drawer((haps, time, _, painters) => {
      const currentFrame = haps.filter((hap) => hap.isActive(time));
@@ -161,12 +161,14 @@ export class StrudelMirror {
        replOptions?.onToggle?.(started);
        if (started) {
          this.drawer.start(this.repl.scheduler);
-          // stop other repls when this one is started
-          document.dispatchEvent(
-            new CustomEvent('start-repl', {
-              detail: this.id,
-            }),
-          );
+          if (this.solo) {
+            // stop other repls when this one is started
+            document.dispatchEvent(
+              new CustomEvent('start-repl', {
+                detail: this.id,
+              }),
+            );
+          }
        } else {
          this.drawer.stop();
          updateMiniLocations(this.editor, []);
@@ -221,7 +223,7 @@ export class StrudelMirror {

    // stop this repl when another repl is started
    this.onStartRepl = (e) => {
-      if (e.detail !== this.id) {
+      if (this.solo && e.detail !== this.id) {
        this.stop();
      }
    };
@@ -356,3 +358,12 @@ function s4() {
    .toString(16)
    .substring(1);
 }
+
+/**
+ * Overrides the css of highlighted events. Make sure to use single quotes!
+ * @name markcss
+ * @example
+ * note("c a f e")
+ * .markcss('text-decoration:underline')
+ */
+export const markcss = registerControl('markcss');
@@ -93,6 +93,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
    if (haps.has(id)) {
      const hap = haps.get(id);
      const color = hap.value?.color ?? 'var(--foreground)';
+      const style = hap.value?.markcss || `outline: solid 2px ${color}`;
      // Get explicit channels for color values
      /* 
      const swatch = document.createElement('div');
@@ -114,7 +115,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
        to,
        Decoration.mark({
          // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
-          attributes: { style: `outline: solid 2px ${color}` },
+          attributes: { style },
        }),
      );
    }
@@ -18,25 +18,25 @@ export default createTheme({
  theme: 'light',
  settings,
  styles: [
-    { tag: t.labelName, color: '#0f380f' },
-    { tag: t.keyword, color: '#0f380f' },
-    { tag: t.operator, color: '#0f380f' },
-    { tag: t.special(t.variableName), color: '#0f380f' },
-    { tag: t.typeName, color: '#0f380f' },
-    { tag: t.atom, color: '#0f380f' },
-    { tag: t.number, color: '#0f380f' },
-    { tag: t.definition(t.variableName), color: '#0f380f' },
-    { tag: t.string, color: '#0f380f' },
-    { tag: t.special(t.string), color: '#0f380f' },
-    { tag: t.comment, color: '#0f380f' },
-    { tag: t.variableName, color: '#0f380f' },
-    { tag: t.tagName, color: '#0f380f' },
-    { tag: t.bracket, color: '#0f380f' },
-    { tag: t.meta, color: '#0f380f' },
-    { tag: t.attributeName, color: '#0f380f' },
-    { tag: t.propertyName, color: '#0f380f' },
-    { tag: t.className, color: '#0f380f' },
-    { tag: t.invalid, color: '#0f380f' },
-    { tag: [t.unit, t.punctuation], color: '#0f380f' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
+    { tag: [t.unit, t.punctuation], color: 'inherit' },
  ],
 });
@@ -15,25 +15,25 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: 'white' },
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
+    { tag: [t.unit, t.punctuation], color: 'inherit' },
  ],
 });
@@ -18,25 +18,25 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: 'white' },
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
+    { tag: [t.unit, t.punctuation], color: 'inherit' },
  ],
 });
@@ -14,24 +14,24 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: '#41FF00' },
-    { tag: t.keyword, color: '#41FF00' },
-    { tag: t.operator, color: '#41FF00' },
-    { tag: t.special(t.variableName), color: '#41FF00' },
-    { tag: t.typeName, color: '#41FF00' },
-    { tag: t.atom, color: '#41FF00' },
-    { tag: t.number, color: '#41FF00' },
-    { tag: t.definition(t.variableName), color: '#41FF00' },
-    { tag: t.string, color: '#41FF00' },
-    { tag: t.special(t.string), color: '#41FF00' },
-    { tag: t.comment, color: '#41FF00' },
-    { tag: t.variableName, color: '#41FF00' },
-    { tag: t.tagName, color: '#41FF00' },
-    { tag: t.bracket, color: '#41FF00' },
-    { tag: t.meta, color: '#41FF00' },
-    { tag: t.attributeName, color: '#41FF00' },
-    { tag: t.propertyName, color: '#41FF00' },
-    { tag: t.className, color: '#41FF00' },
-    { tag: t.invalid, color: '#41FF00' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
  ],
 });
@@ -16,24 +16,24 @@ export default createTheme({
  theme: 'light',
  settings,
  styles: [
-    { tag: t.labelName, color: 'black' },
-    { tag: t.keyword, color: 'black' },
-    { tag: t.operator, color: 'black' },
-    { tag: t.special(t.variableName), color: 'black' },
-    { tag: t.typeName, color: 'black' },
-    { tag: t.atom, color: 'black' },
-    { tag: t.number, color: 'black' },
-    { tag: t.definition(t.variableName), color: 'black' },
-    { tag: t.string, color: 'black' },
-    { tag: t.special(t.string), color: 'black' },
-    { tag: t.comment, color: 'black' },
-    { tag: t.variableName, color: 'black' },
-    { tag: t.tagName, color: 'black' },
-    { tag: t.bracket, color: 'black' },
-    { tag: t.meta, color: 'black' },
-    { tag: t.attributeName, color: 'black' },
-    { tag: t.propertyName, color: 'black' },
-    { tag: t.className, color: 'black' },
-    { tag: t.invalid, color: 'black' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: t.keyword, color: 'inherit' },
+    { tag: t.operator, color: 'inherit' },
+    { tag: t.special(t.variableName), color: 'inherit' },
+    { tag: t.typeName, color: 'inherit' },
+    { tag: t.atom, color: 'inherit' },
+    { tag: t.number, color: 'inherit' },
+    { tag: t.definition(t.variableName), color: 'inherit' },
+    { tag: t.string, color: 'inherit' },
+    { tag: t.special(t.string), color: 'inherit' },
+    { tag: t.comment, color: 'inherit' },
+    { tag: t.variableName, color: 'inherit' },
+    { tag: t.tagName, color: 'inherit' },
+    { tag: t.bracket, color: 'inherit' },
+    { tag: t.meta, color: 'inherit' },
+    { tag: t.attributeName, color: 'inherit' },
+    { tag: t.propertyName, color: 'inherit' },
+    { tag: t.className, color: 'inherit' },
+    { tag: t.invalid, color: 'inherit' },
  ],
 });
@@ -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 });
+});
@@ -546,6 +546,18 @@ export const { cut } = registerControl('cut');
 */
 export const { cutoff, ctf, lpf, lp } = registerControl(['cutoff', 'resonance', 'lpenv'], 'ctf', 'lpf', 'lp');

+/**
+ * Sets the lowpass filter lfo modulation depth.
+ * @name lplfo
+ * @param {number | Pattern} modulation depth of the lowpass filter lfo between 0 and _n_
+ * @example
+ * note("c2 e2 f2 g2")
+ * .sound('sawtooth')
+ * .lpf(300)
+ * .lplfo(2)
+ */
+export const { lplfo } = registerControl('lplfo');
+
 /**
 * Sets the lowpass filter envelope modulation depth.
 * @name lpenv
@@ -68,6 +68,10 @@ export class Cyclist {
              // see https://github.com/tidalcycles/strudel/pull/1004
              const deadline = targetTime - phase;
              onTrigger?.(hap, deadline, duration, this.cps, targetTime);
+              if (hap.value.cps !== undefined && this.cps != hap.value.cps) {
+                this.cps = hap.value.cps;
+                this.num_ticks_since_cps_change = 0;
+              }
            }
          });
        } catch (e) {
@@ -14,6 +14,7 @@ export * from './controls.mjs';
 export * from './hap.mjs';
 export * from './pattern.mjs';
 export * from './signal.mjs';
+export * from './pick.mjs';
 export * from './state.mjs';
 export * from './timespan.mjs';
 export * from './util.mjs';
@@ -36,6 +36,6 @@
  "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
  "devDependencies": {
    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -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(
@@ -2593,7 +2606,7 @@ export const steps = register('steps', function (targetTactus, pat) {
    // avoid divide by zero..
    return nothing;
  }
-  return pat.fast(Fraction(targetTactus).div(pat.tactus));
+  return pat._fast(Fraction(targetTactus).div(pat.tactus)).setTactus(targetTactus);
 });

 export function _polymeterListSteps(steps, ...args) {
@@ -2801,7 +2814,7 @@ export const s_sub = stepRegister('s_sub', function (i, pat) {
  return pat.s_add(pat.tactus.sub(i));
 });

-export const s_cycles = stepRegister('s_extend', function (factor, pat) {
+export const s_extend = stepRegister('s_extend', function (factor, pat) {
  return pat.fast(factor).s_expand(factor);
 });

@@ -2882,6 +2895,13 @@ export const s_tour = function (pat, ...many) {
  return pat.s_tour(...many);
 };

+const s_zip = function (...pats) {
+  pats = pats.filter((pat) => pat.hasTactus);
+  const zipped = slowcat(...pats.map((pat) => pat._slow(pat.tactus)));
+  // Should maybe use lcm or gcd for tactus?
+  return zipped._fast(pats[0].tactus).setTactus(pats[0].tactus);
+};
+
 //////////////////////////////////////////////////////////////////////
 // Control-related functions, i.e. ones that manipulate patterns of
 // objects
@@ -3093,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()),
+);
@@ -0,0 +1,214 @@
+/*
+pick.mjs - methods that use one pattern to pick events from other patterns.
+Copyright (C) 2024 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Pattern, reify, silence, register } from './pattern.mjs';
+
+import { _mod, clamp, objectMap } from './util.mjs';
+
+const _pick = function (lookup, pat, modulo = true) {
+  const array = Array.isArray(lookup);
+  const len = Object.keys(lookup).length;
+
+  lookup = objectMap(lookup, reify);
+
+  if (len === 0) {
+    return silence;
+  }
+  return pat.fmap((i) => {
+    let key = i;
+    if (array) {
+      key = modulo ? Math.round(key) % len : clamp(Math.round(key), 0, lookup.length - 1);
+    }
+    return lookup[key];
+  });
+};
+
+/** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
+ * Similar to `inhabit`, but maintains the structure of the original patterns.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ * @example
+ * note("<0 1 2!2 3>".pick(["g a", "e f", "f g f g" , "g c d"]))
+ * @example
+ * sound("<0 1 [2,0]>".pick(["bd sd", "cp cp", "hh hh"]))
+ * @example
+ * sound("<0!2 [0,1] 1>".pick(["bd(3,8)", "sd sd"]))
+ * @example
+ * s("<a!2 [a,b] b>".pick({a: "bd(3,8)", b: "sd sd"}))
+ */
+
+export const pick = function (lookup, pat) {
+  // backward compatibility - the args used to be flipped
+  if (Array.isArray(pat)) {
+    [pat, lookup] = [lookup, pat];
+  }
+  return __pick(lookup, pat);
+};
+
+const __pick = register('pick', function (lookup, pat) {
+  return _pick(lookup, pat, false).innerJoin();
+});
+
+/** * The same as `pick`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * For example, if you pick the fifth pattern of a list of three, you'll get the
+ * second one.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+
+export const pickmod = register('pickmod', function (lookup, pat) {
+  return _pick(lookup, pat, true).innerJoin();
+});
+
+/** * pickF lets you use a pattern of numbers to pick which function to apply to another pattern.
+ * @param {Pattern} pat
+ * @param {Pattern} lookup a pattern of indices
+ * @param {function[]} funcs the array of functions from which to pull
+ * @returns {Pattern}
+ * @example
+ * s("bd [rim hh]").pickF("<0 1 2>", [rev,jux(rev),fast(2)])
+ * @example
+ * note("<c2 d2>(3,8)").s("square")
+ *     .pickF("<0 2> 1", [jux(rev),fast(2),x=>x.lpf(800)])
+ */
+export const pickF = register('pickF', function (lookup, funcs, pat) {
+  return pat.apply(pick(lookup, funcs));
+});
+
+/** * The same as `pickF`, but if you pick a number greater than the size of the functions list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {Pattern} lookup a pattern of indices
+ * @param {function[]} funcs the array of functions from which to pull
+ * @returns {Pattern}
+ */
+export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
+  return pat.apply(pickmod(lookup, funcs));
+});
+
+/** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickOut = register('pickOut', function (lookup, pat) {
+  return _pick(lookup, pat, false).outerJoin();
+});
+
+/** * The same as `pickOut`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodOut = register('pickmodOut', function (lookup, pat) {
+  return _pick(lookup, pat, true).outerJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is restarted when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickRestart = register('pickRestart', function (lookup, pat) {
+  return _pick(lookup, pat, false).restartJoin();
+});
+
+/** * The same as `pickRestart`, but if you pick a number greater than the size of the list,
+   * it wraps around, rather than sticking at the maximum value.
+   * @param {Pattern} pat
+   * @param {*} xs
+   * @returns {Pattern}
+   * @example
+   * "<a@2 b@2 c@2 d@2>".pickRestart({
+        a: n("0 1 2 0"),
+        b: n("2 3 4 ~"),
+        c: n("[4 5] [4 3] 2 0"),
+        d: n("0 -3 0 ~")
+      }).scale("C:major").s("piano")
+   */
+export const pickmodRestart = register('pickmodRestart', function (lookup, pat) {
+  return _pick(lookup, pat, true).restartJoin();
+});
+
+/** * Similar to `pick`, but the choosen pattern is reset when its index is triggered.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickReset = register('pickReset', function (lookup, pat) {
+  return _pick(lookup, pat, false).resetJoin();
+});
+
+/** * The same as `pickReset`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+export const pickmodReset = register('pickmodReset', function (lookup, pat) {
+  return _pick(lookup, pat, true).resetJoin();
+});
+
+/**
+  /** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
+   * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
+   * @name inhabit
+   * @synonyms pickSqueeze
+   * @param {Pattern} pat
+   * @param {*} xs
+   * @returns {Pattern}
+   * @example
+   * "<a b [a,b]>".inhabit({a: s("bd(3,8)"),
+                            b: s("cp sd")
+                           })
+   * @example
+   * s("a@2 [a b] a".inhabit({a: "bd(3,8)", b: "sd sd"})).slow(4)
+   */
+export const { inhabit, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, false).squeezeJoin();
+});
+
+/** * The same as `inhabit`, but if you pick a number greater than the size of the list,
+ * it wraps around, rather than sticking at the maximum value.
+ * For example, if you pick the fifth pattern of a list of three, you'll get the
+ * second one.
+ * @name inhabitmod
+ * @synonyms pickmodSqueeze
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ */
+
+export const { inhabitmod, pickmodSqueeze } = register(['inhabitmod', 'pickmodSqueeze'], function (lookup, pat) {
+  return _pick(lookup, pat, true).squeezeJoin();
+});
+
+/**
+ * Pick from the list of values (or patterns of values) via the index using the given
+ * pattern of integers. The selected pattern will be compressed to fit the duration of the selecting event
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ * @example
+ * note(squeeze("<0@2 [1!2] 2>", ["g a", "f g f g" , "g a c d"]))
+ */
+
+export const squeeze = (pat, xs) => {
+  xs = xs.map(reify);
+  if (xs.length == 0) {
+    return silence;
+  }
+  return pat
+    .fmap((i) => {
+      const key = _mod(Math.round(i), xs.length);
+      return xs[key];
+    })
+    .squeezeJoin();
+};
@@ -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,
@@ -152,7 +182,14 @@ export function repl({
      shouldHush && hush();
      let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
      if (Object.keys(pPatterns).length) {
-        pattern = stack(...Object.values(pPatterns));
+        let patterns = Object.values(pPatterns);
+        if (eachTransform) {
+          // Explicit lambda so only element (not index and array) are passed
+          patterns = patterns.map((x) => eachTransform(x));
+        }
+        pattern = stack(...patterns);
+      } else if (eachTransform) {
+        pattern = eachTransform(pattern);
      }
      if (allTransform) {
        pattern = allTransform(pattern);
@@ -1,13 +1,14 @@
 /*
-signal.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
+signal.mjs - continuous patterns
+Copyright (C) 2024 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

 import { Hap } from './hap.mjs';
-import { Pattern, fastcat, reify, silence, stack, register } from './pattern.mjs';
+import { Pattern, fastcat, pure, register, reify, silence, stack } from './pattern.mjs';
 import Fraction from './fraction.mjs';
-import { id, _mod, clamp, objectMap } from './util.mjs';
+
+import { id, keyAlias, getCurrentKeyboardState } from './util.mjs';

 export function steady(value) {
  // A continuous value
@@ -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,...
@@ -253,211 +285,6 @@ export const _irand = (i) => rand.fmap((x) => Math.trunc(x * i));
 */
 export const irand = (ipat) => reify(ipat).fmap(_irand).innerJoin();

-const _pick = function (lookup, pat, modulo = true) {
-  const array = Array.isArray(lookup);
-  const len = Object.keys(lookup).length;
-
-  lookup = objectMap(lookup, reify);
-
-  if (len === 0) {
-    return silence;
-  }
-  return pat.fmap((i) => {
-    let key = i;
-    if (array) {
-      key = modulo ? Math.round(key) % len : clamp(Math.round(key), 0, lookup.length - 1);
-    }
-    return lookup[key];
-  });
-};
-
-/** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
- * Similar to `inhabit`, but maintains the structure of the original patterns.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- * @example
- * note("<0 1 2!2 3>".pick(["g a", "e f", "f g f g" , "g c d"]))
- * @example
- * sound("<0 1 [2,0]>".pick(["bd sd", "cp cp", "hh hh"]))
- * @example
- * sound("<0!2 [0,1] 1>".pick(["bd(3,8)", "sd sd"]))
- * @example
- * s("<a!2 [a,b] b>".pick({a: "bd(3,8)", b: "sd sd"}))
- */
-
-export const pick = function (lookup, pat) {
-  // backward compatibility - the args used to be flipped
-  if (Array.isArray(pat)) {
-    [pat, lookup] = [lookup, pat];
-  }
-  return __pick(lookup, pat);
-};
-
-const __pick = register('pick', function (lookup, pat) {
-  return _pick(lookup, pat, false).innerJoin();
-});
-
-/** * The same as `pick`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * For example, if you pick the fifth pattern of a list of three, you'll get the
- * second one.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-
-export const pickmod = register('pickmod', function (lookup, pat) {
-  return _pick(lookup, pat, true).innerJoin();
-});
-
-/** * pickF lets you use a pattern of numbers to pick which function to apply to another pattern.
- * @param {Pattern} pat
- * @param {Pattern} lookup a pattern of indices
- * @param {function[]} funcs the array of functions from which to pull
- * @returns {Pattern}
- * @example
- * s("bd [rim hh]").pickF("<0 1 2>", [rev,jux(rev),fast(2)])
- * @example
- * note("<c2 d2>(3,8)").s("square")
- *     .pickF("<0 2> 1", [jux(rev),fast(2),x=>x.lpf(800)])
- */
-export const pickF = register('pickF', function (lookup, funcs, pat) {
-  return pat.apply(pick(lookup, funcs));
-});
-
-/** * The same as `pickF`, but if you pick a number greater than the size of the functions list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {Pattern} lookup a pattern of indices
- * @param {function[]} funcs the array of functions from which to pull
- * @returns {Pattern}
- */
-export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
-  return pat.apply(pickmod(lookup, funcs));
-});
-
-/** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickOut = register('pickOut', function (lookup, pat) {
-  return _pick(lookup, pat, false).outerJoin();
-});
-
-/** * The same as `pickOut`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickmodOut = register('pickmodOut', function (lookup, pat) {
-  return _pick(lookup, pat, true).outerJoin();
-});
-
-/** * Similar to `pick`, but the choosen pattern is restarted when its index is triggered.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickRestart = register('pickRestart', function (lookup, pat) {
-  return _pick(lookup, pat, false).restartJoin();
-});
-
-/** * The same as `pickRestart`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- * @example
- * "<a@2 b@2 c@2 d@2>".pickRestart({
-      a: n("0 1 2 0"),
-      b: n("2 3 4 ~"),
-      c: n("[4 5] [4 3] 2 0"),
-      d: n("0 -3 0 ~")
-    }).scale("C:major").s("piano")
- */
-export const pickmodRestart = register('pickmodRestart', function (lookup, pat) {
-  return _pick(lookup, pat, true).restartJoin();
-});
-
-/** * Similar to `pick`, but the choosen pattern is reset when its index is triggered.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickReset = register('pickReset', function (lookup, pat) {
-  return _pick(lookup, pat, false).resetJoin();
-});
-
-/** * The same as `pickReset`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-export const pickmodReset = register('pickmodReset', function (lookup, pat) {
-  return _pick(lookup, pat, true).resetJoin();
-});
-
-/**
-/** * Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
- * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
- * @name inhabit
- * @synonyms pickSqueeze
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- * @example
- * "<a b [a,b]>".inhabit({a: s("bd(3,8)"),
-                          b: s("cp sd")
-                         })
- * @example
- * s("a@2 [a b] a".inhabit({a: "bd(3,8)", b: "sd sd"})).slow(4)
- */
-export const { inhabit, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
-  return _pick(lookup, pat, false).squeezeJoin();
-});
-
-/** * The same as `inhabit`, but if you pick a number greater than the size of the list,
- * it wraps around, rather than sticking at the maximum value.
- * For example, if you pick the fifth pattern of a list of three, you'll get the
- * second one.
- * @name inhabitmod
- * @synonyms pickmodSqueeze
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- */
-
-export const { inhabitmod, pickmodSqueeze } = register(['inhabitmod', 'pickmodSqueeze'], function (lookup, pat) {
-  return _pick(lookup, pat, true).squeezeJoin();
-});
-
-/**
- * Pick from the list of values (or patterns of values) via the index using the given
- * pattern of integers. The selected pattern will be compressed to fit the duration of the selecting event
- * @param {Pattern} pat
- * @param {*} xs
- * @returns {Pattern}
- * @example
- * note(squeeze("<0@2 [1!2] 2>", ["g a", "f g f g" , "g a c d"]))
- */
-
-export const squeeze = (pat, xs) => {
-  xs = xs.map(reify);
-  if (xs.length == 0) {
-    return silence;
-  }
-  return pat
-    .fmap((i) => {
-      const key = _mod(Math.round(i), xs.length);
-      return xs[key];
-    })
-    .squeezeJoin();
-};
-
 export const __chooseWith = (pat, xs) => {
  xs = xs.map(reify);
  if (xs.length == 0) {
@@ -596,8 +423,11 @@ export const perlinWith = (pat) => {
 */
 export const perlin = perlinWith(time.fmap((v) => Number(v)));

-export const degradeByWith = register('degradeByWith', (withPat, x, pat) =>
-  pat.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x)),
+export const degradeByWith = register(
+  'degradeByWith',
+  (withPat, x, pat) => pat.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x)),
+  true,
+  true,
 );

 /**
@@ -614,9 +444,14 @@ export const degradeByWith = register('degradeByWith', (withPat, x, pat) =>
 * @example
 * s("[hh?0.2]*8")
 */
-export const degradeBy = register('degradeBy', function (x, pat) {
-  return pat._degradeByWith(rand, x);
-});
+export const degradeBy = register(
+  'degradeBy',
+  function (x, pat) {
+    return pat._degradeByWith(rand, x);
+  },
+  true,
+  true,
+);

 /**
 *
@@ -630,7 +465,7 @@ export const degradeBy = register('degradeBy', function (x, pat) {
 * @example
 * s("[hh?]*8")
 */
-export const degrade = register('degrade', (pat) => pat._degradeBy(0.5));
+export const degrade = register('degrade', (pat) => pat._degradeBy(0.5), true, true);

 /**
 * Inverse of `degradeBy`: Randomly removes events from the pattern by a given amount.
@@ -650,12 +485,17 @@ export const degrade = register('degrade', (pat) => pat._degradeBy(0.5));
 *   x => x.undegradeBy(0.8).pan(1)
 * )
 */
-export const undegradeBy = register('undegradeBy', function (x, pat) {
-  return pat._degradeByWith(
-    rand.fmap((r) => 1 - r),
-    x,
-  );
-});
+export const undegradeBy = register(
+  'undegradeBy',
+  function (x, pat) {
+    return pat._degradeByWith(
+      rand.fmap((r) => 1 - r),
+      x,
+    );
+  },
+  true,
+  true,
+);

 /**
 * Inverse of `degrade`: Randomly removes 50% of events from the pattern. Shorthand for `.undegradeBy(0.5)`
@@ -672,7 +512,7 @@ export const undegradeBy = register('undegradeBy', function (x, pat) {
 *   x => x.undegrade().pan(1)
 * )
 */
-export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5));
+export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5), true, true);

 /**
 *
@@ -690,7 +530,7 @@ export const undegrade = register('undegrade', (pat) => pat._undegradeBy(0.5));

 export const sometimesBy = register('sometimesBy', function (patx, func, pat) {
  return reify(patx)
-    .fmap((x) => stack(pat._degradeBy(x), func(pat._undegradeBy(1 - x))))
+    .fmap((x) => stack(pat._degradeBy(x), func(pat)._undegradeBy(1 - x)))
    .innerJoin();
 });

@@ -831,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);
+});
@@ -46,12 +46,14 @@ import {
  rev,
  time,
  run,
+  binaryN,
  pick,
  stackLeft,
  stackRight,
  stackCentre,
  s_cat,
  calculateTactus,
+  sometimes,
 } from '../index.mjs';

 import { steady } from '../signal.mjs';
@@ -958,6 +960,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(
@@ -1253,4 +1267,13 @@ describe('Pattern', () => {
      expect(s('bev').chop(8).loopAt(2).tactus).toStrictEqual(Fraction(4));
    });
  });
+  describe('sometimes', () => {
+    it('works with constant functions', () => {
+      expect(
+        pure('a')
+          .sometimes((x) => pure('b'))
+          .fast(16).firstCycleValues.length,
+      ).toStrictEqual(16);
+    });
+  });
 });
@@ -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) {
@@ -26,7 +26,7 @@ export const getDrawContext = (id = 'test-canvas', options) => {
      }, 200);
    });
  }
-  return canvas.getContext(contextType);
+  return canvas.getContext(contextType, { willReadFrequently: true });
 };

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

+import * as krill from './krill-parser.js';
 import * as strudel from '@strudel/core';
+import Fraction, { lcm } from '@strudel/core/fraction.mjs';

-// "parser"
-let token_types = {
-  open_polyrhythm: /^\[/,
-  close_polyrhythm: /^\]/,
-  open_polymeter: /^\{/,
-  close_polymeter: /^\}/,
-  open_slowpolymeter: /^\</,
-  close_slowpolymeter: /^\>/,
-  subpat_delimiter: /^,/,
-  fast: /^\*/,
-  slow: /^\//,
-  // is there a better way without back-tracking for whole numbers?
-  // float: /^(\d*\.)?\d+/,
-  plain: /^[a-zA-Z0-9\.\#]+/,
-};
+const randOffset = 0.0003;

-let token_offset;
-function next_token(code, global_offset) {
-  for (let type in token_types) {
-    const match = code.match(token_types[type]);
-    if (match) {
-      const leftpad = match[0].length - match[0].trimLeft().length;
-      const rightpad = match[0].length - match[0].trimRight().length;
-      const result = {
-        type,
-        value: match[0],
-        location: [token_offset + leftpad + global_offset, token_offset + match[0].length + global_offset - rightpad],
-      };
-      token_offset += match[0].length;
-      return result;
-    }
-  }
-  throw new Error('could not match "' + code + '"');
-}
-
-function tokenize(code, global_offset) {
-  let tokens = [];
-  token_offset = 0;
-  while (code.length > 0) {
-    const trimmed = code.trim();
-    token_offset += code.length - trimmed.length;
-    code = trimmed;
-    const token = next_token(code, global_offset);
-    code = code.slice(token.value.length);
-    tokens.push(token);
-  }
-  return tokens;
-}
-
-class Parser {
-  parse(code, global_offset) {
-    this.tokens = tokenize(code, global_offset);
-    const subpats = this.parse_subpats();
-    return { type: 'polymeter', subpats };
-  }
-  consume(type) {
-    const token = this.tokens.shift();
-    this.offset += token.length;
-    if (token.type !== type) {
-      throw new Error('expected token type ' + type + ' got ' + token.type);
-    }
-    return token;
-  }
-  parse_step() {
-    let next = this.tokens[0]?.type;
-    if (next === 'open_polyrhythm') {
-      return this.parse_polyrhythm();
-    }
-    if (next === 'open_polymeter') {
-      return this.parse_polymeter();
-    }
-    if (next === 'open_slowpolymeter') {
-      return this.parse_slowpolymeter();
-    }
-    if (next === 'plain') {
-      return this.consume('plain');
-    }
-    throw new Error('unexpected token ' + this.tokens[0]?.value + ' of type ' + this.tokens[0]?.type);
-  }
-  parse_expr() {
-    let result = this.parse_step();
-    let looking = true;
-    while (looking) {
-      let next = this.tokens[0]?.type;
-      if (!next) {
-        looking = false;
-      } else {
-        switch (next) {
-          case 'fast':
-          case 'slow':
-            this.consume(next);
-            const factor = this.parse_step();
-            result = { type: next, factor, step: result };
-            break;
-          default:
-            looking = false;
+const applyOptions = (parent, enter) => (pat, i) => {
+  const ast = parent.source_[i];
+  const options = ast.options_;
+  const ops = options?.ops;
+  const tactus_source = pat.__tactus_source;
+  if (ops) {
+    for (const op of ops) {
+      switch (op.type_) {
+        case 'stretch': {
+          const legalTypes = ['fast', 'slow'];
+          const { type, amount } = op.arguments_;
+          if (!legalTypes.includes(type)) {
+            throw new Error(`mini: stretch: type must be one of ${legalTypes.join('|')} but got ${type}`);
+          }
+          pat = strudel.reify(pat)[type](enter(amount));
+          break;
+        }
+        case 'replicate': {
+          const { amount } = op.arguments_;
+          pat = strudel.reify(pat);
+          pat = pat._repeatCycles(amount)._fast(amount);
+          break;
+        }
+        case 'bjorklund': {
+          if (op.arguments_.rotation) {
+            pat = pat.euclidRot(enter(op.arguments_.pulse), enter(op.arguments_.step), enter(op.arguments_.rotation));
+          } else {
+            pat = pat.euclid(enter(op.arguments_.pulse), enter(op.arguments_.step));
+          }
+          break;
+        }
+        case 'degradeBy': {
+          pat = strudel
+            .reify(pat)
+            ._degradeByWith(strudel.rand.early(randOffset * op.arguments_.seed), op.arguments_.amount ?? 0.5);
+          break;
+        }
+        case 'tail': {
+          const friend = enter(op.arguments_.element);
+          pat = pat.fmap((a) => (b) => (Array.isArray(a) ? [...a, b] : [a, b])).appLeft(friend);
+          break;
+        }
+        case 'range': {
+          const friend = enter(op.arguments_.element);
+          pat = strudel.reify(pat);
+          const arrayRange = (start, stop, step = 1) =>
+            Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) =>
+              start < stop ? start + index * step : start - index * step,
+            );
+          let range = (apat, bpat) => apat.squeezeBind((a) => bpat.bind((b) => strudel.fastcat(...arrayRange(a, b))));
+          pat = range(pat, friend);
+          break;
+        }
+        default: {
+          console.warn(`operator "${op.type_}" not implemented`);
        }
      }
    }
-    return result;
  }
-  parse_seq(...close_types) {
-    const steps = [];
-    while (!close_types.includes(this.tokens[0]?.type)) {
-      steps.push(this.parse_expr());
-    }
-    return { type: 'seq', steps };
-  }
-  parse_subpats(close_type) {
-    const subpats = [];
-    while (true) {
-      subpats.push(this.parse_seq(close_type, 'subpat_delimiter'));
-      const next = this.tokens[0]?.type;
-      if (next) {
-        this.consume(next);
+  pat.__tactus_source = pat.__tactus_source || tactus_source;
+  return pat;
+};
+
+// expects ast from mini2ast + quoted mini string + optional callback when a node is entered
+export function patternifyAST(ast, code, onEnter, offset = 0) {
+  onEnter?.(ast);
+  const enter = (node) => patternifyAST(node, code, onEnter, offset);
+  switch (ast.type_) {
+    case 'pattern': {
+      // resolveReplications(ast);
+      const children = ast.source_.map((child) => enter(child)).map(applyOptions(ast, enter));
+      const alignment = ast.arguments_.alignment;
+      const with_tactus = children.filter((child) => child.__tactus_source);
+      let pat;
+      switch (alignment) {
+        case 'stack': {
+          pat = strudel.stack(...children);
+          if (with_tactus.length) {
+            pat.tactus = lcm(...with_tactus.map((x) => Fraction(x.tactus)));
+          }
+          break;
+        }
+        case 'polymeter_slowcat': {
+          pat = strudel.stack(...children.map((child) => child._slow(child.__weight)));
+          if (with_tactus.length) {
+            pat.tactus = lcm(...with_tactus.map((x) => Fraction(x.tactus)));
+          }
+          break;
+        }
+        case 'polymeter': {
+          // polymeter
+          const stepsPerCycle = ast.arguments_.stepsPerCycle
+            ? enter(ast.arguments_.stepsPerCycle).fmap((x) => strudel.Fraction(x))
+            : strudel.pure(strudel.Fraction(children.length > 0 ? children[0].__weight : 1));
+
+          const aligned = children.map((child) => child.fast(stepsPerCycle.fmap((x) => x.div(child.__weight))));
+          pat = strudel.stack(...aligned);
+          break;
+        }
+        case 'rand': {
+          pat = strudel.chooseInWith(strudel.rand.early(randOffset * ast.arguments_.seed).segment(1), children);
+          if (with_tactus.length) {
+            pat.tactus = lcm(...with_tactus.map((x) => Fraction(x.tactus)));
+          }
+          break;
+        }
+        case 'feet': {
+          pat = strudel.fastcat(...children);
+          break;
+        }
+        default: {
+          const weightedChildren = ast.source_.some((child) => !!child.options_?.weight);
+          if (weightedChildren) {
+            const weightSum = ast.source_.reduce(
+              (sum, child) => sum.add(child.options_?.weight || strudel.Fraction(1)),
+              strudel.Fraction(0),
+            );
+            pat = strudel.timeCat(
+              ...ast.source_.map((child, i) => [child.options_?.weight || strudel.Fraction(1), children[i]]),
+            );
+            pat.__weight = weightSum; // for polymeter
+            pat.tactus = weightSum;
+            if (with_tactus.length) {
+              pat.tactus = pat.tactus.mul(lcm(...with_tactus.map((x) => Fraction(x.tactus))));
+            }
+          } else {
+            pat = strudel.sequence(...children);
+            pat.tactus = children.length;
+          }
+          if (ast.arguments_.tactus) {
+            pat.__tactus_source = true;
+          }
+        }
      }
-      if (next === close_type) {
-        break;
+      if (with_tactus.length) {
+        pat.__tactus_source = true;
      }
+      return pat;
    }
-    return subpats;
-  }
-  parse_polymeter() {
-    this.consume('open_polymeter');
-    const subpats = this.parse_subpats('close_polymeter');
-    return { type: 'polymeter', subpats };
-  }
-  parse_polyrhythm() {
-    this.consume('open_polyrhythm');
-    const subpats = this.parse_subpats('close_polyrhythm');
-    return { type: 'polyrhythm', subpats };
-  }
-  parse_slowpolymeter() {
-    this.consume('open_slowpolymeter');
-    const subpats = this.parse_subpats('close_slowpolymeter');
-    return { type: 'slowpolymeter', subpats };
+    case 'element': {
+      1;
+      return enter(ast.source_);
+    }
+    case 'atom': {
+      if (ast.source_ === '~' || ast.source_ === '-') {
+        return strudel.silence;
+      }
+      if (!ast.location_) {
+        console.warn('no location for', ast);
+        return ast.source_;
+      }
+      const value = !isNaN(Number(ast.source_)) ? Number(ast.source_) : ast.source_;
+      if (offset === -1) {
+        // skip location handling (used when getting leaves to avoid confusion)
+        return strudel.pure(value);
+      }
+      const [from, to] = getLeafLocation(code, ast, offset);
+      return strudel.pure(value).withLoc(from, to);
+    }
+    case 'stretch':
+      return enter(ast.source_).slow(enter(ast.arguments_.amount));
+    default:
+      console.warn(`node type "${ast.type_}" not implemented -> returning silence`);
+      return strudel.silence;
  }
 }

-function patternifyTree(tree) {
-  if (tree.type === 'polyrhythm') {
-    const args = tree.subpats.map((arg) => patternifyTree(arg));
-    return strudel.polyrhythm(...args);
-  }
-  if (tree.type === 'slowpolymeter') {
-    const args = tree.subpats.map((arg) => patternifyTree(arg));
-    return strudel.s_polymeterSteps(1, ...args);
-  }
-  if (tree.type === 'polymeter') {
-    const args = tree.subpats.map((subpat) => patternifyTree(subpat));
-    return strudel.s_polymeter(...args);
-  }
-  if (tree.type === 'fast') {
-    const step = patternifyTree(tree.step);
-    const factor = patternifyTree(tree.factor);
-    return strudel.fast(factor, step);
-  }
-  if (tree.type === 'slow') {
-    const step = patternifyTree(tree.step);
-    const factor = patternifyTree(tree.factor);
-    return strudel.slow(factor, step);
-  }
-  if (tree.type === 'plain') {
-    return strudel.pure(tree.value).withLoc(tree.location[0], tree.location[1]);
-  }
-  if (tree.type === 'seq') {
-    const steps = tree.steps.map((step) => patternifyTree(step));
-    return strudel.fastcat(...steps);
-  }
-}
+// takes quoted mini string + leaf node within, returns source location of node (whitespace corrected)
+export const getLeafLocation = (code, leaf, globalOffset = 0) => {
+  // value is expected without quotes!
+  const { start, end } = leaf.location_;
+  const actual = code?.split('').slice(start.offset, end.offset).join('');
+  // make sure whitespaces are not part of the highlight
+  const [offsetStart = 0, offsetEnd = 0] = actual
+    ? actual.split(leaf.source_).map((p) => p.split('').filter((c) => c === ' ').length)
+    : [];
+  return [start.offset + offsetStart + globalOffset, end.offset - offsetEnd + globalOffset];
+};

-const parser = new Parser();
-export const m = (code, global_offset) => {
-  const tree = parser.parse(code, global_offset + 1);
-  const pat = patternifyTree(tree);
-  return strudel.reify(pat);
+// takes quoted mini string, returns ast
+export const mini2ast = (code, start = 0, userCode = code) => {
+  try {
+    return krill.parse(code);
+  } catch (error) {
+    const region = [error.location.start.offset + start, error.location.end.offset + start];
+    const line = userCode.slice(0, region[0]).split('\n').length;
+    throw new Error(`[mini] parse error at line ${line}: ${error.message}`);
+  }
 };

 // takes quoted mini string, returns all nodes that are leaves
-export const getLeafLocations = (code, start) => {
-  code = code.replace(/^"/, '');
-  code = code.replace(/"$/, '');
-  const leaves = tokenize(code, start).filter((x) => x.type == 'plain');
-  return leaves.map((x) => x.location.map((y) => y + 1));
+export const getLeaves = (code, start, userCode) => {
+  const ast = mini2ast(code, start, userCode);
+  let leaves = [];
+  patternifyAST(
+    ast,
+    code,
+    (node) => {
+      if (node.type_ === 'atom') {
+        leaves.push(node);
+      }
+    },
+    -1,
+  );
+  return leaves;
+};
+
+// takes quoted mini string, returns locations [fromCol,toCol] of all leaf nodes
+export const getLeafLocations = (code, start = 0, userCode) => {
+  return getLeaves(code, start, userCode).map((l) => getLeafLocation(code, l, start));
 };

 // mini notation only (wraps in "")
 export const mini = (...strings) => {
-  const pats = strings.map(m);
+  const pats = strings.map((str) => {
+    const code = `"${str}"`;
+    const ast = mini2ast(code);
+    return patternifyAST(ast, code);
+  });
  return strudel.sequence(...pats);
 };

+// turns str mini string (without quotes) into pattern
+// offset is the position of the mini string in the JS code
+// each leaf node will get .withLoc added
+// this function is used by the transpiler for double quoted strings
+export const m = (str, offset) => {
+  const code = `"${str}"`;
+  const ast = mini2ast(code);
+  return patternifyAST(ast, code, null, offset);
+};
+
+// includes haskell style (raw krill parsing)
+export const h = (string) => {
+  const ast = mini2ast(string);
+  return patternifyAST(ast, string);
+};
+
 export function minify(thing) {
  if (typeof thing === 'string') {
    return mini(thing);
@@ -37,6 +37,6 @@
  "devDependencies": {
    "peggy": "^3.0.2",
    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -221,6 +221,19 @@ describe('mini', () => {
  });
 });

+describe('getLeafLocation', () => {
+  it('gets location of leaf nodes', () => {
+    const code = '"bd sd"';
+    const ast = mini2ast(code);
+
+    const bd = ast.source_[0].source_;
+    expect(getLeafLocation(code, bd)).toEqual([1, 3]);
+
+    const sd = ast.source_[1].source_;
+    expect(getLeafLocation(code, sd)).toEqual([4, 6]);
+  });
+});
+
 describe('getLeafLocations', () => {
  it('gets locations of leaf nodes', () => {
    expect(getLeafLocations('"bd sd"')).toEqual([
@@ -229,9 +242,9 @@ describe('getLeafLocations', () => {
    ]);
    expect(getLeafLocations('"bd*2 [sd cp]"')).toEqual([
      [1, 3], // bd columns
-      [4, 5], // "2" columns
      [7, 9], // sd columns
      [10, 12], // cp columns
+      [4, 5], // "2" columns
    ]);
    expect(getLeafLocations('"bd*<2 3>"')).toEqual([
      [1, 3], // bd columns
@@ -0,0 +1,3 @@
+# @strudel/serial
+
+This package adds webserial functionality to strudel Patterns, for e.g. sending messages to arduino microcontrollers.
@@ -0,0 +1,87 @@
+/*
+mqtt.mjs - for patterning the internet of things from strudel
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/serial/serial.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Pattern, isPattern } from '@strudel/core';
+import Paho from 'paho-mqtt';
+
+const connections = {};
+
+// Handle connection loss
+function onConnectionLost(responseObject) {
+  if (responseObject.errorCode !== 0) {
+    console.error(' mqtt connection lost: ', responseObject.errorMessage);
+  }
+}
+
+// Handle received messages
+function onMessageArrived(message) {
+  console.log('incoming mqtt message: ', message.payloadString); // prettier-ignore
+}
+
+function onFailure(err) {
+  console.error('Connection failed: ', err);
+}
+
+Pattern.prototype.mqtt = function (
+  username = undefined,
+  password = undefined,
+  topic = undefined,
+  host = 'wss://localhost:8883/',
+  client = undefined,
+  latency = 0,
+) {
+  const key = host + '-' + client;
+  let connected = false;
+  if (!client) {
+    client = 'strudel-' + String(Math.floor(Math.random() * 1000000));
+  }
+  function onConnect() {
+    console.log('Connected to mqtt broker');
+    connected = true;
+  }
+
+  let cx;
+  if (connections[key]) {
+    cx = connections[key];
+  } else {
+    cx = new Paho.Client(host, client);
+    cx.onConnectionLost = onConnectionLost;
+    cx.onMessageArrived = onMessageArrived;
+    const props = {
+      onSuccess: onConnect,
+      onFailure: onFailure,
+      useSSL: true,
+    };
+
+    if (username) {
+      props.userName = username;
+      props.password = password;
+    }
+    cx.connect(props);
+  }
+  return this.withHap((hap) => {
+    const onTrigger = (t_deprecate, hap, currentTime, cps, targetTime) => {
+      if (!connected) {
+        return;
+      }
+      let message = '';
+      if (typeof hap.value === 'object') {
+        message = JSON.stringify(hap.value);
+      } else {
+        message = hap.value;
+      }
+      message = new Paho.Message(message);
+      message.destinationName = topic;
+
+      const offset = (targetTime - currentTime + latency) * 1000;
+
+      window.setTimeout(function () {
+        cx.send(message);
+      }, offset);
+    };
+    return hap.setContext({ ...hap.context, onTrigger, dominantTrigger: true });
+  });
+};
@@ -0,0 +1,38 @@
+{
+  "name": "@strudel/mqtt",
+  "version": "1.1.0",
+  "description": "MQTT API for strudel",
+  "main": "mqtt.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": [
+    "titdalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Alex McLean <alex@slab.org>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel/core": "workspace:*",
+    "paho-mqtt": "^1.1.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  }
+}
@@ -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, 'mqtt.mjs'),
+      formats: ['es'],
+      fileName: (ext) => ({ es: 'index.mjs' })[ext],
+    },
+    rollupOptions: {
+      external: [...Object.keys(dependencies)],
+    },
+    target: 'esnext',
+  },
+});
@@ -10,6 +10,8 @@ if (typeof HTMLElement !== 'undefined') {
    static observedAttributes = ['code'];
    settings = codemirrorSettings.get();
    editor = null;
+    sync = false;
+    solo = true;
    constructor() {
      super();
    }
@@ -49,6 +51,8 @@ if (typeof HTMLElement !== 'undefined') {
          });
          this.dispatchEvent(event);
        },
+        solo: this.solo,
+        sync: this.sync,
      });
      // init settings
      this.editor.updateSettings(this.settings);
@@ -112,11 +112,27 @@ export const getADSRValues = (params, curve = 'linear', defaultValues) => {
  return [Math.max(a ?? 0, envmin), Math.max(d ?? 0, envmin), Math.min(sustain, envmax), Math.max(r ?? 0, releaseMin)];
 };

-export function createFilter(context, type, frequency, Q, att, dec, sus, rel, fenv, start, end, fanchor, model, drive) {
+export function createFilter(
+  context,
+  type,
+  frequency,
+  Q,
+  att,
+  dec,
+  sus,
+  rel,
+  fenv,
+  start,
+  end,
+  fanchor,
+  model,
+  drive,
+  flfo,
+) {
  const curve = 'exponential';
  const [attack, decay, sustain, release] = getADSRValues([att, dec, sus, rel], curve, [0.005, 0.14, 0, 0.1]);
  let filter;
-  let frequencyParam;
+  let frequencyParam, detuneParam;
  if (model === 'ladder') {
    filter = getWorklet(context, 'ladder-processor', { frequency, q: Q, drive });
    frequencyParam = filter.parameters.get('frequency');
@@ -126,6 +142,7 @@ export function createFilter(context, type, frequency, Q, att, dec, sus, rel, fe
    filter.Q.value = Q;
    filter.frequency.value = frequency;
    frequencyParam = filter.frequency;
+    detuneParam = filter.detune;
  }

  // envelope is active when any of these values is set
@@ -140,7 +157,10 @@ export function createFilter(context, type, frequency, Q, att, dec, sus, rel, fe
    let max = clamp(2 ** (fenvAbs - offset) * frequency, 0, 20000);
    if (fenv < 0) [min, max] = [max, min];
    getParamADSR(frequencyParam, attack, decay, sustain, release, min, max, start, end, curve);
-    return filter;
+  }
+  const hasLFO = detuneParam && flfo !== undefined;
+  if (hasLFO !== undefined) {
+    let lfo = getVibratoOscillator(detuneParam, { vib: flfo, vibmod: 4 }, start);
  }
  return filter;
 }
@@ -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);
@@ -356,6 +357,7 @@ export const superdough = async (value, t, hapDuration) => {
    lpdecay,
    lpsustain,
    lprelease,
+    lplfo,
    resonance = getDefaultValue('resonance'),
    // high pass
    hpenv,
@@ -474,6 +476,7 @@ export const superdough = async (value, t, hapDuration) => {
        fanchor,
        ftype,
        drive,
+        lplfo,
      );
    chain.push(lp());
    if (ftype === '24db') {
@@ -37,6 +37,6 @@
  },
  "devDependencies": {
    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -38,6 +38,6 @@
  },
  "devDependencies": {
    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -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';
@@ -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));
+}
@@ -34,6 +34,6 @@
  },
  "devDependencies": {
    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "vitest": "^2.1.3"
  }
 }
@@ -954,6 +954,24 @@ exports[`runs examples > example "bank" example index 0 1`] = `
 ]
 `;

+exports[`runs examples > example "beat" example index 0 1`] = `
+[
+  "[ 0/1 → 1/16 | s:bd ]",
+  "[ 1/1 → 17/16 | s:bd ]",
+  "[ 2/1 → 33/16 | s:bd ]",
+  "[ 3/1 → 49/16 | s:bd ]",
+]
+`;
+
+exports[`runs examples > example "beat" example index 1 1`] = `
+[
+  "[ 1/48 → 1/12 | s:sd ]",
+  "[ 49/48 → 13/12 | s:sd ]",
+  "[ 97/48 → 25/12 | s:sd ]",
+  "[ 145/48 → 37/12 | s:sd ]",
+]
+`;
+
 exports[`runs examples > example "begin" example index 0 1`] = `
 [
  "[ 0/1 → 1/2 | s:rave begin:0 ]",
@@ -967,6 +985,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 +4137,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 ]",
@@ -4422,6 +4496,27 @@ exports[`runs examples > example "lpf" example index 1 1`] = `
 ]
 `;

+exports[`runs examples > example "lplfo" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 1/4 → 1/2 | note:e2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 1/2 → 3/4 | note:f2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 3/4 → 1/1 | note:g2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 1/1 → 5/4 | note:c2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 5/4 → 3/2 | note:e2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 3/2 → 7/4 | note:f2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 7/4 → 2/1 | note:g2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 2/1 → 9/4 | note:c2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 9/4 → 5/2 | note:e2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 5/2 → 11/4 | note:f2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 11/4 → 3/1 | note:g2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 3/1 → 13/4 | note:c2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 13/4 → 7/2 | note:e2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 7/2 → 15/4 | note:f2 s:sawtooth cutoff:300 lplfo:2 ]",
+  "[ 15/4 → 4/1 | note:g2 s:sawtooth cutoff:300 lplfo:2 ]",
+]
+`;
+
 exports[`runs examples > example "lpq" example index 0 1`] = `
 [
  "[ 0/1 → 1/8 | s:hh cutoff:2000 resonance:0 ]",
@@ -4551,6 +4646,27 @@ exports[`runs examples > example "lsize" example index 0 1`] = `
 ]
 `;

+exports[`runs examples > example "markcss" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c ]",
+  "[ 1/4 → 1/2 | note:a ]",
+  "[ 1/2 → 3/4 | note:f ]",
+  "[ 3/4 → 1/1 | note:e ]",
+  "[ 1/1 → 5/4 | note:c ]",
+  "[ 5/4 → 3/2 | note:a ]",
+  "[ 3/2 → 7/4 | note:f ]",
+  "[ 7/4 → 2/1 | note:e ]",
+  "[ 2/1 → 9/4 | note:c ]",
+  "[ 9/4 → 5/2 | note:a ]",
+  "[ 5/2 → 11/4 | note:f ]",
+  "[ 11/4 → 3/1 | note:e ]",
+  "[ 3/1 → 13/4 | note:c ]",
+  "[ 13/4 → 7/2 | note:a ]",
+  "[ 7/2 → 15/4 | note:f ]",
+  "[ 15/4 → 4/1 | note:e ]",
+]
+`;
+
 exports[`runs examples > example "mask" example index 0 1`] = `
 [
  "[ 0/1 → 1/4 | note:c ]",
@@ -7487,6 +7603,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 ]",
@@ -8742,6 +8927,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 ]",
@@ -8,6 +8,7 @@ exports[`renders tunes > tune: amensister 1`] = `
  "[ 0/1 → 1/4 | n:0 s:amencutup room:0.5 ]",
  "[ 1/16 → 1/8 | s:breath room:1 shape:0.6 begin:0.875 end:0.9375 ]",
  "[ 1/8 → 3/16 | s:breath room:1 shape:0.6 begin:0.8125 end:0.875 ]",
+  "[ 1/8 → 1/4 | n:0 s:amencutup room:0.5 ]",
  "[ 1/8 → 1/4 | note:45 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:300.174310575404 ]",
  "[ 1/8 → 1/4 | note:45 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:300.174310575404 ]",
  "[ 3/16 → 1/4 | s:breath room:1 shape:0.6 begin:0.75 end:0.8125 ]",
@@ -17,22 +18,20 @@ exports[`renders tunes > tune: amensister 1`] = `
  "[ 1/4 → 3/8 | note:A1 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:300.7878869297153 ]",
  "[ 5/16 → 3/8 | s:breath room:1 shape:0.6 begin:0.625 end:0.6875 ]",
  "[ 3/8 → 7/16 | s:breath room:1 shape:0.6 begin:0.5625 end:0.625 ]",
-  "[ 3/8 → 1/2 | n:1 s:amencutup room:0.5 ]",
  "[ 3/8 → 1/2 | note:F1 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:302.11020572391345 ]",
  "[ 3/8 → 1/2 | note:F1 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:302.11020572391345 ]",
  "[ 7/16 → 1/2 | s:breath room:1 shape:0.6 begin:0.5 end:0.5625 ]",
  "[ 1/2 → 9/16 | s:breath room:1 shape:0.6 begin:0.4375 end:0.5 ]",
+  "[ 1/2 → 5/8 | n:2 s:amencutup room:0.5 ]",
  "[ 1/2 → 3/4 | n:2 s:amencutup room:0.5 ]",
  "[ 9/16 → 5/8 | s:breath room:1 shape:0.6 begin:0.375 end:0.4375 ]",
  "[ 5/8 → 11/16 | s:breath room:1 shape:0.6 begin:0.3125 end:0.375 ]",
  "[ 11/16 → 3/4 | s:breath room:1 shape:0.6 begin:0.25 end:0.3125 ]",
  "[ 3/4 → 13/16 | s:breath room:1 shape:0.6 begin:0.1875 end:0.25 ]",
-  "[ 3/4 → 7/8 | n:3 s:amencutup room:0.5 ]",
  "[ 3/4 → 7/8 | note:Bb0 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:312.54769231985796 ]",
  "[ 3/4 → 7/8 | note:Bb0 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:312.54769231985796 ]",
  "[ 13/16 → 7/8 | s:breath room:1 shape:0.6 begin:0.125 end:0.1875 ]",
  "[ 7/8 → 15/16 | s:breath room:1 shape:0.6 begin:0.0625 end:0.125 ]",
-  "[ 7/8 → 1/1 | n:3 s:amencutup room:0.5 ]",
  "[ 7/8 → 1/1 | note:D1 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:318.7927796831686 ]",
  "[ 7/8 → 1/1 | note:D1 s:sawtooth gain:0.4 decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 resonance:10 cutoff:318.7927796831686 ]",
  "[ 15/16 → 1/1 | s:breath room:1 shape:0.6 begin:0 end:0.0625 ]",
@@ -6906,10 +6905,10 @@ exports[`renders tunes > tune: flatrave 1`] = `
  "[ 1/8 → 1/4 | s:hh n:1 speed:0.5 delay:0.5 end:0.020001936784171157 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 1/8 → 1/4 | s:hh n:1 speed:0.5 delay:0.5 end:0.020001936784171157 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 1/8 → 1/4 | note:G1 s:sawtooth decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 cutoff:800 resonance:8 ]",
-  "[ 1/4 → 3/8 | s:hh n:1 end:0.02000875429921906 bank:RolandTR909 room:0.5 gain:0.4 ]",
-  "[ 1/4 → 3/8 | s:hh n:1 end:0.02000875429921906 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 1/4 → 3/8 | note:G1 s:sawtooth decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 cutoff:800 resonance:8 ]",
  "[ 3/8 → 1/2 | s:hh n:1 end:0.020023446730265706 bank:RolandTR909 room:0.5 gain:0.4 ]",
+  "[ 1/2 → 5/8 | s:hh n:1 speed:0.5 delay:0.5 end:0.020048626493108724 bank:RolandTR909 room:0.5 gain:0.4 ]",
+  "[ 1/2 → 5/8 | s:hh n:1 speed:0.5 delay:0.5 end:0.020048626493108724 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 1/2 → 5/8 | note:G1 s:sawtooth decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 cutoff:800 resonance:8 ]",
  "[ 1/2 → 1/1 | s:bd bank:RolandTR909 ]",
  "[ 1/2 → 1/1 | s:cp bank:RolandTR909 ]",
@@ -6917,7 +6916,6 @@ exports[`renders tunes > tune: flatrave 1`] = `
  "[ 5/8 → 3/4 | s:hh n:1 end:0.020086608138500644 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 5/8 → 3/4 | s:hh n:1 end:0.020086608138500644 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 5/8 → 3/4 | note:G1 s:sawtooth decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 cutoff:800 resonance:8 ]",
-  "[ 3/4 → 7/8 | s:hh n:1 end:0.02013941880355398 bank:RolandTR909 room:0.5 gain:0.4 ]",
  "[ 7/8 → 1/1 | note:G1 s:sawtooth decay:0.1 sustain:0 lpattack:0.1 lpenv:-4 cutoff:800 resonance:8 ]",
 ]
 `;
@@ -134,6 +134,12 @@ 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;
+};

 const uiHelpersMocked = {
  backgroundImage: id,
@@ -3,11 +3,6 @@ import { configDefaults, defineConfig } from 'vitest/config';
 /// <reference types="vitest" />
 export default defineConfig({
  test: {
-    // ...
-    deps: {
-      registerNodeLoader: true,
-    },
-    threads: false,
    reporters: 'verbose',
    isolate: false,
    silent: true,
@@ -1,5 +0,0 @@
-{
-	"devToolbar": {
-		"enabled": false
-	}
-}
@@ -1,290 +0,0 @@
-declare module 'astro:content' {
-	interface Render {
-		'.mdx': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	interface Render {
-		'.md': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	export { z } from 'astro/zod';
-
-	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-
-	export type CollectionKey = keyof AnyEntryMap;
-	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
-
-	export type ContentCollectionKey = keyof ContentEntryMap;
-	export type DataCollectionKey = keyof DataEntryMap;
-
-	// This needs to be in sync with ImageMetadata
-	export type ImageFunction = () => import('astro/zod').ZodObject<{
-		src: import('astro/zod').ZodString;
-		width: import('astro/zod').ZodNumber;
-		height: import('astro/zod').ZodNumber;
-		format: import('astro/zod').ZodUnion<
-			[
-				import('astro/zod').ZodLiteral<'png'>,
-				import('astro/zod').ZodLiteral<'jpg'>,
-				import('astro/zod').ZodLiteral<'jpeg'>,
-				import('astro/zod').ZodLiteral<'tiff'>,
-				import('astro/zod').ZodLiteral<'webp'>,
-				import('astro/zod').ZodLiteral<'gif'>,
-				import('astro/zod').ZodLiteral<'svg'>,
-				import('astro/zod').ZodLiteral<'avif'>,
-			]
-		>;
-	}>;
-
-	type BaseSchemaWithoutEffects =
-		| import('astro/zod').AnyZodObject
-		| import('astro/zod').ZodUnion<[BaseSchemaWithoutEffects, ...BaseSchemaWithoutEffects[]]>
-		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
-		| import('astro/zod').ZodIntersection<BaseSchemaWithoutEffects, BaseSchemaWithoutEffects>;
-
-	type BaseSchema =
-		| BaseSchemaWithoutEffects
-		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
-
-	export type SchemaContext = { image: ImageFunction };
-
-	type DataCollectionConfig<S extends BaseSchema> = {
-		type: 'data';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type ContentCollectionConfig<S extends BaseSchema> = {
-		type?: 'content';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type CollectionConfig<S> = ContentCollectionConfig<S> | DataCollectionConfig<S>;
-
-	export function defineCollection<S extends BaseSchema>(
-		input: CollectionConfig<S>
-	): CollectionConfig<S>;
-
-	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
-	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
-		ContentEntryMap[C]
-	>['slug'];
-
-	export function getEntryBySlug<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		// Note that this has to accept a regular string too, for SSR
-		entrySlug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
-		collection: C,
-		entryId: E
-	): Promise<CollectionEntry<C>>;
-
-	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => entry is E
-	): Promise<E[]>;
-	export function getCollection<C extends keyof AnyEntryMap>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => unknown
-	): Promise<CollectionEntry<C>[]>;
-
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(entry: {
-		collection: C;
-		slug: E;
-	}): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(entry: {
-		collection: C;
-		id: E;
-	}): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		slug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(
-		collection: C,
-		id: E
-	): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	/** Resolve an array of entry references from the same collection */
-	export function getEntries<C extends keyof ContentEntryMap>(
-		entries: {
-			collection: C;
-			slug: ValidContentEntrySlug<C>;
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-	export function getEntries<C extends keyof DataEntryMap>(
-		entries: {
-			collection: C;
-			id: keyof DataEntryMap[C];
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-
-	export function reference<C extends keyof AnyEntryMap>(
-		collection: C
-	): import('astro/zod').ZodEffects<
-		import('astro/zod').ZodString,
-		C extends keyof ContentEntryMap
-			? {
-					collection: C;
-					slug: ValidContentEntrySlug<C>;
-				}
-			: {
-					collection: C;
-					id: keyof DataEntryMap[C];
-				}
-	>;
-	// Allow generic `string` to avoid excessive type errors in the config
-	// if `dev` is not running to update as you edit.
-	// Invalid collection names will be caught at build time.
-	export function reference<C extends string>(
-		collection: C
-	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
-
-	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
-	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
-		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
-	>;
-
-	type ContentEntryMap = {
-		"blog": {
-"release-0.0.2-schwindlig.mdx": {
-	id: "release-0.0.2-schwindlig.mdx";
-  slug: "release-002-schwindlig";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.2.1-stuermisch.mdx": {
-	id: "release-0.0.2.1-stuermisch.mdx";
-  slug: "release-0021-stuermisch";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.3-maelstrom.mdx": {
-	id: "release-0.0.3-maelstrom.mdx";
-  slug: "release-003-maelstrom";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.4-gischt.mdx": {
-	id: "release-0.0.4-gischt.mdx";
-  slug: "release-004-gischt";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.3.0-donauwelle.mdx": {
-	id: "release-0.3.0-donauwelle.mdx";
-  slug: "release-030-donauwelle";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.4.0-brandung.mdx": {
-	id: "release-0.4.0-brandung.mdx";
-  slug: "release-040-brandung";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.5.0-wirbel.mdx": {
-	id: "release-0.5.0-wirbel.mdx";
-  slug: "release-050-wirbel";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.6.0-zimtschnecke.mdx": {
-	id: "release-0.6.0-zimtschnecke.mdx";
-  slug: "release-060-zimtschnecke";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.7.0-zuckerguss.mdx": {
-	id: "release-0.7.0-zuckerguss.mdx";
-  slug: "release-070-zuckerguss";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.8.0-himbeermuffin.mdx": {
-	id: "release-0.8.0-himbeermuffin.mdx";
-  slug: "release-080-himbeermuffin";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.9.0-bananenbrot.mdx": {
-	id: "release-0.9.0-bananenbrot.mdx";
-  slug: "release-090-bananenbrot";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-1.0.0-geburtstagskuchen.mdx": {
-	id: "release-1.0.0-geburtstagskuchen.mdx";
-  slug: "release-100-geburtstagskuchen";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"year-2.mdx": {
-	id: "year-2.mdx";
-  slug: "year-2";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-};
-
-	};
-
-	type DataEntryMap = {
-		
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	type ContentConfig = typeof import("../src/content/config");
-}
@@ -1,3 +1,4 @@
+.astro
 # build output
 dist/

@@ -33,6 +33,7 @@
    "@strudel/hydra": "workspace:*",
    "@strudel/midi": "workspace:*",
    "@strudel/mini": "workspace:*",
+    "@strudel/mqtt": "workspace:*",
    "@strudel/osc": "workspace:*",
    "@strudel/serial": "workspace:*",
    "@strudel/soundfonts": "workspace:*",
@@ -26,15 +26,15 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
  title="Top Navigation"
 >
  <div class="flex overflow-visible items-center grow" style="overflow:visible">
-    <a href={`${baseNoTrailing}/`} class="flex items-center text-2xl space-x-2">
+    <div class="flex items-center text-2xl space-x-2">
      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
-        <span>🌀</span>
-        <div class="flex space-x-1 items-baseline">
+        <span class="block rotate-90 text-blue-500">꩜</span>
+        <div class="flex space-x-2 items-baseline">
          <span class="">strudel</span>
-          <span class="text-sm">DOCS</span>
+          <span class="text-sm font-medium">DOCS</span>
        </div>
      </h1>
-    </a>
+    </div>
  </div>
  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
  <div class="search-item h-10">
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
@@ -20,7 +20,7 @@ export default function UdelsEditor(Props) {
        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
      </div>
      <UserFacingErrorMessage error={error} />
-      <Panel context={context} />
+      <HorizontalPanel context={context} />
    </div>
  );
 }
@@ -1,7 +1,6 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Icon } from './Icon';
 import { silence, noteToMidi, _mod } from '@strudel/core';
-import { clearHydra } from '@strudel/hydra';
 import { getDrawContext, getPunchcardPainter } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
 import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
@@ -37,7 +36,7 @@ export function MiniRepl({
  const shouldShowCanvas = !!punchcard;
  const canvasId = shouldShowCanvas ? useMemo(() => `canvas-${id}`, [id]) : null;
  autodraw = !!punchcard || !!claviature || !!autodraw;
-  drawTime = drawTime ?? punchcard ? [0, 4] : [-2, 2];
+  drawTime = (drawTime ?? punchcard) ? [0, 4] : [-2, 2];
  if (claviature) {
    drawTime = [0, 0];
  }
@@ -82,18 +82,7 @@ To modify a parameter value, you can either:

  <MiniRepl client:only="react" tune={`note("50 60 70").room(.1).add(note("<0 1 2>")).log()`} />

- Modify _all_ numeral params:
-
-  <MiniRepl client:only="react" tune={`note("50 60 70").room(.1).add("<0 1 2>").log()`} />
-
-Which of these 3 ways to use strongly depends on the context!
-Note that the order of chaining param functions also matters!
-In the last example, the `room` value would not have changed if it was applied later:
-
-<MiniRepl client:only="react" tune={`note("50 60 70").add("<0 1 2>").room(.1).log()`} />
-
-This shows how the execution of the chained functions goes from left to right.
-In this case, the `.add` will only modify what's on the left side.
+Remember the execution of the chained functions goes from left to right.

 # Operators

@@ -55,6 +55,14 @@ These are the equivalents used by the Mini Notation:

 ## run

-<JsDoc client:idle name="run" h={0} punchcard />
+<JsDoc client:idle name="run" h={0} />
+
+## binary
+
+<JsDoc client:idle name="binary" h={0} />
+
+## binaryN
+
+<JsDoc client:idle name="binaryN" h={0} />

 After Pattern Constructors, let's see what [Time Modifiers](/learn/time-modifiers) are available.
@@ -1,19 +1,20 @@
 ---
-title: MIDI & OSC
+title: MIDI, OSC & MQTT
 layout: ../../layouts/MainLayout.astro
 ---

 import { MiniRepl } from '../../docs/MiniRepl';
 import { JsDoc } from '../../docs/JsDoc';

-# MIDI and OSC
+# MIDI, OSC and MQTT

-The default audio output of Strudel uses the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
-It is also possible to use Strudel with MIDI and OSC / [SuperDirt](https://github.com/musikinformatik/SuperDirt/) instead.
+Normally, Strudel is used to pattern sound, using its own '[web audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)'-based synthesiser called [SuperDough](https://github.com/tidalcycles/strudel/tree/main/packages/superdough).

-# MIDI API
+It is also possible to pattern other things with Strudel, such as software and hardware synthesisers with MIDI, other software using Open Sound Control/OSC (including the [SuperDirt](https://github.com/musikinformatik/SuperDirt/) synthesiser commonly used with Strudel's sibling [TidalCycles](https://tidalcycles.org/)), or the MQTT 'internet of things' protocol.

-Strudel also supports midi via [webmidi](https://npmjs.com/package/webmidi).
+# MIDI
+
+Strudel supports MIDI without any additional software (thanks to [webmidi](https://npmjs.com/package/webmidi)), just by adding methods to your pattern:

 ## midi(outputName?)

@@ -45,20 +46,22 @@ But you can also control cc messages separately like this:
 $: ccv(sine.segment(16).slow(4)).ccn(74).midi()`}
 />

-# OSC/SuperDirt API
+# OSC/SuperDirt/StrudelDirt

-In mainline tidal, the actual sound is generated via [SuperDirt](https://github.com/musikinformatik/SuperDirt/), which runs inside SuperCollider.
-Strudel also supports using [SuperDirt](https://github.com/musikinformatik/SuperDirt/) as a backend, although it requires some developer tooling to run.
+In TidalCycles, sound is usually generated using [SuperDirt](https://github.com/musikinformatik/SuperDirt/), which runs inside SuperCollider. Strudel also supports using SuperDirt, although it requires installing some additional software.
+
+There is also [StrudelDirt](https://github.com/daslyfe/StrudelDirt) which is SuperDirt with some optimisations for working with Strudel. (A longer term aim is to merge these optimisations back into mainline SuperDirt)

 ## Prequisites

-Getting [SuperDirt](https://github.com/musikinformatik/SuperDirt/) to work with Strudel, you need to
+To get SuperDirt to work with Strudel, you need to

 1. install SuperCollider + sc3 plugins, see [Tidal Docs](https://tidalcycles.org/docs/) (Install Tidal) for more info.
-2. install [node.js](https://nodejs.org/en/)
-3. download [Strudel Repo](https://github.com/tidalcycles/strudel/) (or git clone, if you have git installed)
-4. run `pnpm i` in the strudel directory
-5. run `pnpm run osc` to start the osc server, which forwards OSC messages from Strudel REPL to SuperCollider
+2. install SuperDirt, or the [StrudelDirt](https://github.com/daslyfe/StrudelDirt) fork which is optimised for use with Strudel
+3. install [node.js](https://nodejs.org/en/)
+4. download [Strudel Repo](https://github.com/tidalcycles/strudel/) (or git clone, if you have git installed)
+5. run `pnpm i` in the strudel directory
+6. run `pnpm run osc` to start the osc server, which forwards OSC messages from Strudel REPL to SuperCollider

 Now you're all set!

@@ -86,3 +89,67 @@ Please refer to [Tidal Docs](https://tidalcycles.org/) for more info.
 <br />

 But can we use Strudel [offline](/learn/pwa)?
+
+# MQTT
+
+MQTT is a lightweight network protocol, designed for 'internet of things' devices. For use with strudel, you will
+need access to an MQTT server known as a 'broker' configured to accept secure 'websocket' connections. You could
+run one yourself (e.g. by running [mosquitto](https://mosquitto.org/)), although getting an SSL certificate that
+your web browser will trust might be a bit tricky for those without systems administration experience.
+Alternatively, you can use [a public broker](https://www.hivemq.com/mqtt/public-mqtt-broker/).
+
+Strudel does not yet support receiving messages over MQTT, only sending them.
+
+## Usage
+
+The following example shows how to send a pattern to an MQTT broker:
+
+<MiniRepl
+  client:only="react"
+  tune={`"hello world"
+    .mqtt(undefined, // username (undefined for open/public servers)
+          undefined, // password 
+          '/strudel-pattern', // mqtt 'topic' 
+          'wss://mqtt.eclipseprojects.io:443/mqtt', // MQTT server address
+          'mystrudel', // MQTT client id - randomly generated if not supplied
+          0 // latency / delay before sending messages (0 = no delay)
+         )`}
+
+/>
+
+Other software can then receive the messages. For example using the [mosquitto](https://mosquitto.org/) commandline client tools:
+
+```
+> mosquitto_sub  -h mqtt.eclipseprojects.io -p 1883  -t "/strudel-pattern"
+hello
+world
+hello
+world
+...
+```
+
+Control patterns will be encoded as JSON, for example:
+
+<MiniRepl
+  client:only="react"
+  tune={`sound("sax(3,8)").speed("2 3")
+  .mqtt(undefined, // username (undefined for open/public servers)
+        undefined, // password
+        '/strudel-pattern', // mqtt 'topic'
+        'wss://mqtt.eclipseprojects.io:443/mqtt', // MQTT server address
+        'mystrudel', // MQTT client id - randomly generated if not supplied
+        0 // latency / delay before sending messages (0 = no delay)
+       )`}
+/>
+
+Will send messages like the following:
+
+```
+{"s":"sax","speed":2}
+{"s":"sax","speed":2}
+{"s":"sax","speed":3}
+{"s":"sax","speed":2}
+...
+```
+
+Libraries for receiving MQTT are available for many programming languages.
@@ -98,3 +98,11 @@ What follows is the API doc of all the options you can pass:
 ## Pitchwheel

 <JsDoc client:idle name="pitchwheel" h={0} />
+
+## Spectrum
+
+<JsDoc client:idle name="spectrum" h={0} />
+
+## markcss
+
+<JsDoc client:idle name="markcss" h={0} />
@@ -1,8 +1,4 @@
-import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
-import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
-import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
 import { useSettings, setIsZen } from '../../settings.mjs';
@@ -15,24 +11,19 @@ export function Header({ context, embedded = false }) {
  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
    context;
  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen } = useSettings();
+  const { isZen, isButtonRowHidden, isCSSAnimationDisabled } = useSettings();

  return (
    <header
      id="header"
      className={cx(
-        'flex-none text-black  z-[100] text-lg select-none',
+        'flex-none text-black  z-[100] text-lg select-none h-20 md:h-14',
        !isZen && !isEmbedded && 'bg-lineHighlight',
        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
        isEmbedded ? 'flex' : 'md:flex',
      )}
    >
      <div className="px-4 flex space-x-2 md:pt-0 select-none">
-        {/*             <img
-    src={logo}
-    className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
-    alt="logo"
-  /> */}
        <h1
          onClick={() => {
            if (isEmbedded) window.open(window.location.href.replace('embed', ''));
@@ -43,31 +34,46 @@ export function Header({ context, embedded = false }) {
          )}
        >
          <div
-            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer', isZen && 'fixed top-2 right-4')}
+            className={cx(
+              'mt-[1px]',
+              started && !isCSSAnimationDisabled && 'animate-spin',
+              'cursor-pointer text-blue-500',
+              isZen && 'fixed top-2 right-4',
+            )}
            onClick={() => {
              if (!isEmbedded) {
                setIsZen(!isZen);
              }
            }}
          >
-            🌀
+            <span className="block rotate-90">꩜</span>
          </div>
          {!isZen && (
-            <div className={cx(started && 'animate-pulse')}>
-              <span className="">strudel</span> <span className="text-sm">REPL</span>
+            <div className="space-x-2">
+              <span className="">strudel</span>
+              <span className="text-sm font-medium">REPL</span>
+              {!isEmbedded && isButtonRowHidden && (
+                <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
+                  DOCS
+                </a>
+              )}
            </div>
          )}
        </h1>
      </div>
-      {!isZen && (
-        <div className="flex max-w-full overflow-auto text-foreground">
+      {!isZen && !isButtonRowHidden && (
+        <div className="flex max-w-full overflow-auto text-foreground px-1 md:px-2">
          <button
            onClick={handleTogglePlay}
            title={started ? 'stop' : 'play'}
-            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:opacity-50', !started && 'animate-pulse')}
+            className={cx(
+              !isEmbedded ? 'p-2' : 'px-2',
+              'hover:opacity-50',
+              !started && !isCSSAnimationDisabled && 'animate-pulse',
+            )}
          >
            {!pending ? (
-              <span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
+              <span className={cx('flex items-center space-x-2')}>
                {started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
                {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
              </span>
@@ -84,8 +90,6 @@ export function Header({ context, embedded = false }) {
              !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
            )}
          >
-            {/*             <CommandLineIcon className="w-6 h-6" /> */}
-            <ArrowPathIcon className="w-6 h-6" />
            {!isEmbedded && <span>update</span>}
          </button>
          {!isEmbedded && (
@@ -94,7 +98,6 @@ export function Header({ context, embedded = false }) {
              className="hover:opacity-50 p-2 flex items-center space-x-1"
              onClick={handleShuffle}
            >
-              <SparklesIcon className="w-6 h-6" />
              <span> shuffle</span>
            </button>
          )}
@@ -107,7 +110,6 @@ export function Header({ context, embedded = false }) {
              )}
              onClick={handleShare}
            >
-              <LinkIcon className="w-6 h-6" />
              <span>share</span>
            </button>
          )}
@@ -117,7 +119,6 @@ export function Header({ context, embedded = false }) {
              href={`${baseNoTrailing}/workshop/getting-started/`}
              className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
            >
-              <AcademicCapIcon className="w-6 h-6" />
              <span>learn</span>
            </a>
          )}
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { Panel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
@@ -13,7 +13,7 @@ export default function ReplEditor(Props) {
  const { context } = Props;
  const { containerRef, editorRef, error, init, pending } = context;
  const settings = useSettings();
-  const { panelPosition } = settings;
+  const { panelPosition, isZen } = settings;

  return (
    <div className="h-full flex flex-col relative">
@@ -21,10 +21,10 @@ export default function ReplEditor(Props) {
      <Header context={context} />
      <div className="grow flex relative overflow-hidden">
        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        {panelPosition === 'right' && <Panel context={context} />}
+        {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
      </div>
      <UserFacingErrorMessage error={error} />
-      {panelPosition === 'bottom' && <Panel context={context} />}
+      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
    </div>
  );
 }
@@ -1,18 +1,48 @@
+import { logger } from '@strudel/core';
+import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
+import { nanoid } from 'nanoid';
+import { useCallback, useState } from 'react';
+import { useSettings } from '../../../settings.mjs';

-export function ConsoleTab({ log }) {
+export function ConsoleTab() {
+  const [log, setLog] = useState([]);
+  const { fontFamily, fontSize } = useSettings();
+  useLogger(
+    useCallback((e) => {
+      const { message, type, data } = e.detail;
+      setLog((l) => {
+        const lastLog = l.length ? l[l.length - 1] : undefined;
+        const id = nanoid(12);
+        // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
+        if (type === 'loaded-sample') {
+          // const loadIndex = l.length - 1;
+          const loadIndex = l.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
+          l[loadIndex] = { message, type, id, data };
+        } else if (lastLog && lastLog.message === message) {
+          l = l.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
+        } else {
+          l = l.concat([{ message, type, id, data }]);
+        }
+        return l.slice(-20);
+      });
+    }, []),
+  );
  return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
-      <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
-██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
-███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
-╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
-███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
-╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
+    <div
+      id="console-tab"
+      className="break-all px-4 dark:text-white text-stone-900 text-sm py-2 space-y-1"
+      style={{ fontFamily, fontSize }}
+    >
      {log.map((l, i) => {
        const message = linkify(l.message);
+        const color = l.data?.hap?.value?.color;
        return (
-          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
+          <div
+            key={l.id}
+            className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}
+            style={color ? { color } : {}}
+          >
            <span dangerouslySetInnerHTML={{ __html: message }} />
            {l.count ? ` (${l.count})` : ''}
          </div>
@@ -42,3 +72,7 @@ function linkify(inputText) {

  return replacedText;
 }
+
+function useLogger(onTrigger) {
+  useEvent(logger.key, onTrigger);
+}
@@ -6,6 +6,7 @@ export function ButtonGroup({ value, onChange, items }) {
      {Object.entries(items).map(([key, label], i, arr) => (
        <button
          key={key}
+          id={key}
          onClick={() => onChange(key)}
          className={cx(
            'px-2 border-b h-8 whitespace-nowrap',
@@ -1,10 +1,5 @@
-import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
-import { logger } from '@strudel/core';
-import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
-import { nanoid } from 'nanoid';
-import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
-import { setActiveFooter, useSettings } from '../../../settings.mjs';
+import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -12,117 +7,206 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import useClient from '@src/useClient.mjs';
-
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';

 const TAURI = typeof window !== 'undefined' && window.__TAURI__;

-export function Panel({ context }) {
-  const footerContent = useRef();
-  const [log, setLog] = useState([]);
-  const { activeFooter, isZen, panelPosition } = useSettings();
+export function HorizontalPanel({ context }) {
+  const settings = useSettings();
+  const { isPanelOpen, activeFooter: tab } = settings;

-  useIsomorphicLayoutEffect(() => {
-    if (footerContent.current && activeFooter === 'console') {
-      // scroll log box to bottom when log changes
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    }
-  }, [log, activeFooter]);
-  useIsomorphicLayoutEffect(() => {
-    if (!footerContent.current) {
-    } else if (activeFooter === 'console') {
-      footerContent.current.scrollTop = footerContent.current?.scrollHeight;
-    } else {
-      footerContent.current.scrollTop = 0;
-    }
-  }, [activeFooter]);
-
-  useLogger(
-    useCallback((e) => {
-      const { message, type, data } = e.detail;
-      setLog((l) => {
-        const lastLog = l.length ? l[l.length - 1] : undefined;
-        const id = nanoid(12);
-        // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
-        if (type === 'loaded-sample') {
-          // const loadIndex = l.length - 1;
-          const loadIndex = l.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
-          l[loadIndex] = { message, type, id, data };
-        } else if (lastLog && lastLog.message === message) {
-          l = l.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
-        } else {
-          l = l.concat([{ message, type, id, data }]);
-        }
-        return l.slice(-20);
-      });
-    }, []),
-  );
-
-  const PanelTab = ({ children, name, label }) => (
-    <>
-      <div
-        onClick={() => setActiveFooter(name)}
-        className={cx(
-          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-foreground' : 'border-transparent',
-        )}
-      >
-        {label || name}
-      </div>
-      {activeFooter === name && <>{children}</>}
-    </>
-  );
-  const client = useClient();
-  if (isZen) {
-    return null;
-  }
-
-  const isActive = activeFooter !== '';
-
-  let positions = {
-    right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
-    bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
-  };
-  if (!client) {
-    return null;
-  }
  return (
-    <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
-      <div className="flex justify-between px-2">
-        <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
-          <PanelTab name="intro" label="welcome" />
-          <PanelTab name="patterns" />
-          <PanelTab name="sounds" />
-          <PanelTab name="console" />
-          <PanelTab name="reference" />
-          <PanelTab name="settings" />
-          {TAURI && <PanelTab name="files" />}
-        </div>
-        {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
-            <XMarkIcon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-      {activeFooter !== '' && (
-        <div className="relative overflow-hidden">
-          <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
-            {activeFooter === 'intro' && <WelcomeTab context={context} />}
-            {activeFooter === 'patterns' && <PatternsTab context={context} />}
-            {activeFooter === 'console' && <ConsoleTab log={log} />}
-            {activeFooter === 'sounds' && <SoundsTab />}
-            {activeFooter === 'reference' && <Reference />}
-            {activeFooter === 'settings' && <SettingsTab started={context.started} />}
-            {activeFooter === 'files' && <FilesTab />}
-          </div>
+    <PanelNav
+      settings={settings}
+      className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}
+    >
+      {isPanelOpen && (
+        <div className="flex h-full overflow-auto pr-10 ">
+          <PanelContent context={context} tab={tab} />
        </div>
      )}
+
+      <div className="absolute right-4 pt-4">
+        <PanelActionButton settings={settings} />
+      </div>
+
+      <div className="flex  justify-between min-h-12 max-h-12 grid-cols-2 items-center">
+        <Tabs setTab={setTab} tab={tab} />
+      </div>
+    </PanelNav>
+  );
+}
+
+export function VerticalPanel({ context }) {
+  const settings = useSettings();
+  const { activeFooter: tab, isPanelOpen } = settings;
+
+  return (
+    <PanelNav
+      settings={settings}
+      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
+    >
+      {isPanelOpen ? (
+        <div className={cx('flex flex-col h-full')}>
+          <div className="flex justify-between w-full ">
+            <Tabs setTab={setTab} tab={tab} />
+            <PanelActionButton settings={settings} />
+          </div>
+
+          <div className="overflow-auto h-full">
+            <PanelContent context={context} tab={tab} />
+          </div>
+        </div>
+      ) : (
+        <button
+          onClick={(e) => {
+            setIsPanelOpened(true);
+          }}
+          aria-label="open menu panel"
+          className={cx(
+            'flex flex-col hover:bg-lineBackground items-center cursor-pointer justify-center w-full  h-full',
+          )}
+        >
+          <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
+        </button>
+      )}
+    </PanelNav>
+  );
+}
+
+const tabNames = {
+  welcome: 'intro',
+  patterns: 'patterns',
+  sounds: 'sounds',
+  reference: 'reference',
+  console: 'console',
+  settings: 'settings',
+};
+if (TAURI) {
+  tabNames.files = 'files';
+}
+
+function PanelNav({ children, className, settings, ...props }) {
+  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
+  return (
+    <nav
+      onClick={() => {
+        if (!settings.isPanelOpen) {
+          setIsPanelOpened(true);
+        }
+      }}
+      onMouseEnter={() => {
+        if (isHoverBehavior && !settings.isPanelOpen) {
+          setIsPanelOpened(true);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isHoverBehavior && !settings.isPanelPinned) {
+          setIsPanelOpened(false);
+        }
+      }}
+      aria-label="Menu Panel"
+      className={cx('bg-lineHighlight group overflow-x-auto', className)}
+      {...props}
+    >
+      {children}
    </nav>
  );
 }

-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
+function PanelContent({ context, tab }) {
+  switch (tab) {
+    case tabNames.patterns:
+      return <PatternsTab context={context} />;
+    case tabNames.console:
+      return <ConsoleTab />;
+    case tabNames.sounds:
+      return <SoundsTab />;
+    case tabNames.reference:
+      return <Reference />;
+    case tabNames.settings:
+      return <SettingsTab started={context.started} />;
+    case tabNames.files:
+      return <FilesTab />;
+    default:
+      return <WelcomeTab context={context} />;
+  }
+}
+
+function PanelTab({ label, isSelected, onClick }) {
+  return (
+    <>
+      <button
+        onClick={onClick}
+        className={cx(
+          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
+          isSelected ? 'border-foreground' : 'border-transparent',
+        )}
+      >
+        {label}
+      </button>
+    </>
+  );
+}
+function Tabs({ setTab, tab, className }) {
+  return (
+    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
+      {Object.keys(tabNames).map((key) => {
+        const val = tabNames[key];
+        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
+      })}
+    </div>
+  );
+}
+
+function PanelActionButton({ settings }) {
+  const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
+  const isHoverBehavior = togglePanelTrigger === 'hover';
+  if (!isPanelOpen) {
+    return;
+  }
+
+  if (isHoverBehavior) {
+    return <PinButton pinned={isPanelPinned} />;
+  }
+  return <CloseButton onClick={() => setIsPanelOpened(false)} />;
+}
+
+function PinButton({ pinned }) {
+  return (
+    <button
+      onClick={() => setPanelPinned(!pinned)}
+      className={cx(
+        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
+        pinned ? 'flex' : 'hidden',
+      )}
+      aria-label="Pin Menu Panel"
+    >
+      <svg
+        stroke="currentColor"
+        fill={'currentColor'}
+        strokeWidth="0"
+        className="w-full h-full"
+        opacity={pinned ? 1 : '.3'}
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"></path>
+      </svg>
+    </button>
+  );
+}
+
+function CloseButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cx(
+        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
+      )}
+      aria-label="Close Menu"
+    >
+      <XMarkIcon />
+    </button>
+  );
 }
@@ -77,7 +77,7 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {

 function ActionButton({ children, onClick, label, labelIsHidden }) {
  return (
-    <button className="hover:opacity-50" onClick={onClick} title={label}>
+    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
      {labelIsHidden !== true && label}
      {children}
    </button>
@@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
  const autoResetPatternOnChange = !isUdels();

  return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4 flex flex-col overflow-hidden max-h-full">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full h-full">
      <ButtonGroup
        value={patternFilter}
        onChange={(value) => settingsMap.setKey('patternFilter', value)}
@@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
        </div>
      )}

-      <section className="flex overflow-y-scroll max-h-full flex-col">
+      <section className="flex overflow-y-auto max-h-full flex-grow flex-col">
        {patternFilter === patternFilterName.user && (
          <PatternButtons
            onClick={(id) =>
@@ -25,36 +25,41 @@ export function Reference() {
  }, [search]);

  return (
-    <div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
-      <div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
-        <div class="w-full ml-2 mb-2 top-0 sticky">
+    <div className="flex h-full w-full p-2 text-foreground overflow-hidden">
+      <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
+        <div class="w-full flex">
          <input
-            className="w-full p-1 bg-background rounded-md"
+            className="w-full p-1 bg-background rounded-md border-none"
            placeholder="Search"
            value={search}
            onInput={(event) => setSearch(event.target.value)}
          />
        </div>
-        {visibleFunctions.map((entry, i) => (
-          <a
-            key={i}
-            className="cursor-pointer block hover:bg-lineHighlight py-1 px-4"
-            onClick={() => {
-              const el = document.getElementById(`doc-${i}`);
-              const container = document.getElementById('reference-container');
-              container.scrollTo(0, el.offsetTop);
-            }}
-          >
-            {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
-          </a>
-        ))}
+        <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">
+          {visibleFunctions.map((entry, i) => (
+            <a
+              key={i}
+              className="cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden  px-1 text-ellipsis"
+              onClick={() => {
+                const el = document.getElementById(`doc-${i}`);
+                const container = document.getElementById('reference-container');
+                container.scrollTo(0, el.offsetTop);
+              }}
+            >
+              {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
+            </a>
+          ))}
+        </div>
      </div>
-      <div className="break-normal w-full h-full overflow-auto pl-4 flex relative" id="reference-container">
-        <div className="prose dark:prose-invert max-w-full pr-4">
+      <div
+        className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative"
+        id="reference-container"
+      >
+        <div className="prose dark:prose-invert min-w-full px-1 ">
          <h2>API Reference</h2>
          <p>
-            This is the long list functions you can use! Remember that you don't need to remember all of those and that
-            you can already make music with a small set of functions!
+            This is the long list of functions you can use. Remember that you don't need to remember all of those and
+            that you can already make music with a small set of functions!
          </p>
          {visibleFunctions.map((entry, i) => (
            <section key={i}>
@@ -94,6 +94,8 @@ export function SettingsTab({ started }) {
    isAutoCompletionEnabled,
    isTooltipEnabled,
    isFlashEnabled,
+    isButtonRowHidden,
+    isCSSAnimationDisabled,
    isSyncEnabled,
    isLineWrappingEnabled,
    fontSize,
@@ -101,11 +103,12 @@ export function SettingsTab({ started }) {
    panelPosition,
    audioDeviceName,
    audioEngineTarget,
+    togglePanelTrigger,
  } = useSettings();
  const shouldAlwaysSync = isUdels();
  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
  return (
-    <div className="text-foreground p-4 space-y-4">
+    <div className="text-foreground p-4 space-y-4 w-full">
      {canChangeAudioDevice && (
        <FormItem label="Audio Output Device">
          <AudioDeviceSelector
@@ -170,7 +173,32 @@ export function SettingsTab({ started }) {
          items={{ bottom: 'Bottom', right: 'Right' }}
        ></ButtonGroup>
      </FormItem>
-      <FormItem label="Code Settings">
+      <FormItem label="Open Panel on:                       ">
+        <ButtonGroup
+          value={togglePanelTrigger}
+          onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}
+          items={{ click: 'Click', hover: 'Hover' }}
+        ></ButtonGroup>
+        {/* <Checkbox
+          label="Click"
+          onChange={(cbEvent) => {
+            if (cbEvent.target.checked) {
+              settingsMap.setKey('togglePanelTrigger', 'click');
+            }
+          }}
+          value={togglePanelTrigger != 'hover'}
+        />
+        <Checkbox
+          label="Hover"
+          onChange={(cbEvent) => {
+            if (cbEvent.target.checked) {
+              settingsMap.setKey('togglePanelTrigger', 'hover');
+            }
+          }}
+          value={togglePanelTrigger == 'hover'}
+        /> */}
+      </FormItem>
+      <FormItem label="More Settings">
        <Checkbox
          label="Enable bracket matching"
          onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}
@@ -230,6 +258,16 @@ export function SettingsTab({ started }) {
          disabled={shouldAlwaysSync}
          value={isSyncEnabled}
        />
+        <Checkbox
+          label="Hide top buttons"
+          onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}
+          value={isButtonRowHidden}
+        />
+        <Checkbox
+          label="Disable CSS Animations"
+          onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}
+          value={isCSSAnimationDisabled}
+        />
      </FormItem>
      <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
      <FormItem label="Reset Settings">
@@ -1,7 +1,7 @@
 import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
@@ -52,15 +52,14 @@ export function SoundsTab() {
  });

  return (
-    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="w-full ml-2 mb-2 top-0 sticky">
-        <input
-          className="w-full p-1 bg-background rounded-md"
-          placeholder="Search"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full  dark:text-white text-stone-900">
+      <input
+        className="w-full p-1 bg-background rounded-md my-2"
+        placeholder="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+
      <div className="pb-2 flex shrink-0 flex-wrap">
        <ButtonGroup
          value={soundsFilter}
@@ -74,7 +73,8 @@ export function SoundsTab() {
        ></ButtonGroup>
        <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
      </div>
-      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal pb-2">
        {soundEntries.map(([name, { data, onTrigger }]) => {
          return (
            <span
@@ -5,10 +5,8 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL

 export function WelcomeTab({ context }) {
  return (
-    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
-      <h3>
-        <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
-      </h3>
+    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 ">
+      <h3>꩜ welcome</h3>
      <p>
        You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
        pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
@@ -30,7 +28,7 @@ export function WelcomeTab({ context }) {
        </a>{' '}
        to ask any questions, give feedback or just say hello.
      </p>
-      <h3>about</h3>
+      <h3>꩜ about</h3>
      <p>
        strudel is a JavaScript version of{' '}
        <a href="https://tidalcycles.org/" target="_blank">
@@ -81,6 +81,7 @@ export function loadModules() {
    import('@strudel/soundfonts'),
    import('@strudel/csound'),
    import('@strudel/tidal'),
+    import('@strudel/mqtt'),
  ];
  if (isTauri()) {
    modules = modules.concat([
@@ -30,10 +30,16 @@ export const defaultSettings = {
  isZen: false,
  soundsFilter: 'all',
  patternFilter: 'community',
+  // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
  panelPosition: 'right',
+  isPanelPinned: false,
+  isPanelOpen: true,
+  togglePanelTrigger: 'click', //click | hover
  userPatterns: '{}',
  audioDeviceName: defaultAudioDeviceName,
  audioEngineTarget: audioEngineTargets.webaudio,
+  isButtonRowHidden: false,
+  isCSSAnimationDisabled: false,
 };

 let search = null;
@@ -66,17 +72,23 @@ export function useSettings() {
    isActiveLineHighlighted: parseBoolean(state.isActiveLineHighlighted),
    isAutoCompletionEnabled: parseBoolean(state.isAutoCompletionEnabled),
    isPatternHighlightingEnabled: parseBoolean(state.isPatternHighlightingEnabled),
+    isButtonRowHidden: parseBoolean(state.isButtonRowHidden),
+    isCSSAnimationDisabled: parseBoolean(state.isCSSAnimationDisabled),
    isTooltipEnabled: parseBoolean(state.isTooltipEnabled),
    isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled),
    isFlashEnabled: parseBoolean(state.isFlashEnabled),
    isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled),
    fontSize: Number(state.fontSize),
    panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
+    isPanelPinned: parseBoolean(state.isPanelPinned),
+    isPanelOpen: parseBoolean(state.isPanelOpen),
    userPatterns: userPatterns,
  };
 }

 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
+export const setPanelPinned = (bool) => settingsMap.setKey('isPanelPinned', bool);
+export const setIsPanelOpened = (bool) => settingsMap.setKey('isPanelOpen', bool);

 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);

@@ -52,6 +52,7 @@
 }
 :root {
  --app-height: 100vh;
+  --app-width: 100vw;
 }

 #console-tab {
@@ -34,6 +34,7 @@ module.exports = {
      },
      spacing: {
        'app-height': 'var(--app-height)',
+        'app-width': 'var(--app-width)',
      },
      typography(theme) {
        return {
Author	SHA1	Message	Date
Felix Roos	7b8d83c548	add snapshot	2025-01-18 15:23:00 +01:00
Felix Roos	345ef2276f	fix: codeformat	2025-01-18 15:19:33 +01:00
superdirtspatz	2c880e2596	added lowpass filter lfo	2025-01-18 15:06:07 +01:00
Felix Roos	f61916fffa	Merge pull request #1226 from heerman/binary Add binary and binaryN	2025-01-17 19:27:00 +01:00
Alex McLean	00b0341839	Fix sometimes (#1243 ) * test and fix for sometimes bug	2025-01-16 11:18:33 +00:00
Jade (Rose) Rowland	d5ab391a98	Merge pull request #1237 from daslyfe/origin/daslyfe/subcycle onSubCycle function for "step sequencer" style rhythm notation	2025-01-15 23:55:46 -05:00
Jade (Rose) Rowland	d2a9b9b750	format	2025-01-15 23:51:57 -05:00
Jade (Rose) Rowland	2348023b22	merge main	2025-01-15 23:35:36 -05:00
Jade (Rose) Rowland	6e5d8eed19	Merge branch 'main' into origin/daslyfe/subcycle	2025-01-15 23:35:06 -05:00
Jade (Rose) Rowland	c33c8b5469	remove possibly not needed alt	2025-01-15 23:30:56 -05:00
Jade (Rose) Rowland	7b6074ccef	update function	2025-01-15 23:30:19 -05:00
Alex McLean	55c226cda6	Add stepBind, and some toplevel aliases for binds and withValue (#1241 ) * Add toplevel withValue function * add stepBind, and add toplevel aliases for this and other binds	2025-01-14 13:39:14 +00:00
Jade (Rose) Rowland	c5de21ef61	Merge pull request #1235 from daslyfe/orgin/daslyfe/keydown Add onKey function for custom key commands for patterns	2025-01-14 00:11:10 -05:00
Jade (Rose) Rowland	36374fb3fb	format	2025-01-14 00:06:57 -05:00
Jade (Rose) Rowland	570c7a0d6b	_keyDown	2025-01-14 00:03:44 -05:00
Sarah Gillespie	c3be21e6e5	Update value-modifiers.mdx (#1238 ) Revises outdated documentation in light of PR #1030	2025-01-12 10:32:24 +00:00
Jade (Rose) Rowland	7410ac5cec	snapshot	2025-01-08 00:44:40 -05:00
Jade (Rose) Rowland	f5127147de	channge function name	2025-01-08 00:43:02 -05:00
Jade (Rose) Rowland	1d144faed7	update snapshot	2025-01-02 22:39:56 -05:00
Jade (Rose) Rowland	7b914e7f22	working	2025-01-02 22:33:04 -05:00
Jade (Rose) Rowland	052addd67e	add doc link	2025-01-02 22:16:46 -05:00
Jade (Rose) Rowland	3d162536aa	add keyDown	2025-01-02 22:12:48 -05:00
Jade (Rose) Rowland	2443aad01b	key alias and breakout	2024-12-31 11:58:32 -05:00
Jade (Rose) Rowland	08f6c1ad5e	fix test	2024-12-30 23:19:37 -05:00
Jade (Rose) Rowland	974376d404	fix conflict	2024-12-30 22:03:51 -05:00
Jade (Rose) Rowland	1da80db048	merge main	2024-12-30 21:59:40 -05:00
Jade (Rose) Rowland	42519581c1	add func	2024-12-30 21:49:59 -05:00
Alex McLean	1e3bbc57cc	Documentation for all/each, and bugfix for each (#1233 ) * bugfix for each(), and documentation for each() and all() * had to hide each/all examples from tests	2024-12-29 12:16:08 +00:00
Alex McLean	9bf0f624f5	Make `all()` post-stack again, and add `each()` for pre-stack (#1229 ) * Rename `all` to `each`, re-instating old `all`	2024-12-29 10:29:52 +00:00
Luke Heerman	c6418789c4	Fix lint	2024-12-27 21:49:56 -05:00
Luke Heerman	8b909c54db	Merge branch 'main' into binary	2024-12-27 15:15:54 -05:00
Luke Heerman	9d029ac914	Add binary and binaryN to learn pages	2024-12-27 15:14:58 -05:00
Luke Heerman	8644b3d163	Fix accidental multi-line jsdoc name	2024-12-27 15:14:31 -05:00
Luke Heerman	426c5edf25	Update tests snapshot	2024-12-27 07:43:41 -05:00
Felix Roos	26cc7e2920	Merge pull request #1213 from tidalcycles/spectrum add basic spectrum function	2024-12-23 11:53:11 +01:00
Alex McLean	04eac3e7c5	Fix regression for d1, p1, p(n) (#1227 ) * fix for `d1` and `.p(1)`	2024-12-22 20:04:45 +00:00
Luke Heerman	7cf7575e6d	Make the docs friendlier	2024-12-17 08:49:49 -05:00
Luke Heerman	111cea2381	Fix lint	2024-12-16 21:31:21 -05:00
Felix Roos	896a3828f6	fix: spectrum example test	2024-12-16 23:19:57 +01:00
Felix Roos	eb02997836	spectrum doc	2024-12-16 23:18:20 +01:00
Felix Roos	8a33c171f5	spectrum widget	2024-12-16 23:11:01 +01:00
Luke Heerman	f87f279198	Support those who prefer no left padding	2024-12-10 23:51:32 -05:00
Luke Heerman	4cc019f038	Rename variable	2024-12-10 23:51:32 -05:00
Luke Heerman	34f4afad01	Rework binary to binaryN	2024-12-10 23:51:32 -05:00
Luke Heerman	947b263b9c	Add tests	2024-12-10 23:51:32 -05:00
Luke Heerman	0a408e464a	Make example more concise	2024-12-10 23:51:32 -05:00
Luke Heerman	0d660277f6	Put msb on the right	2024-12-10 23:51:32 -05:00
Luke Heerman	33fef379ad	Get a basic version of binary working	2024-12-10 23:51:32 -05:00
eefano	0531369613	Make cps patternable (#1001 ) Supports e.g. `note("c d e f g a").cps("<1 1.2 1.3 1.4 1.5 1.6>")`	2024-11-30 09:09:36 +00:00
Alex McLean	c66f19108c	MQTT support (#1224 ) * Add mqtt() method and documentation * Documentation clarifications for MIDI and OSC	2024-11-30 09:07:55 +00:00
Alex McLean	ef53367ba9	Apply `all` function to individual patterns rather than final stack (#1209 )	2024-11-30 08:46:13 +00:00
Felix Roos	726abf76ce	Merge pull request #1214 from bthj/main REPL: solo and sync configuration	2024-11-20 16:32:51 +01:00
Björn Þór Jónsson	a7d74ed6d6	REPL: solo and sync configuration; codeformat	2024-11-20 16:28:07 +01:00
Felix Roos	648fbf99fa	add basic spectrum function	2024-11-09 20:57:09 +01:00
Björn Þór Jónsson	b913e1c50d	REPL: solo and sync configuration	2024-11-09 15:13:24 +01:00
Alex McLean	ae335ac40c	Add s_zip for 'cat'-ing patterns together step-by-step (#1208 ) Fix tactus returned by 'step' Fix name of toplevel s_extend (was 's_cycles')	2024-10-30 21:29:43 +01:00
Alex McLean	9ecad810b1	Preserve tactus for 'degrade' and friends, and tidy up 'pick' and friends (#1205 ) * separate pick methods into their own module * preserve tactus in degrade and friends	2024-10-30 21:28:31 +01:00
Felix Roos	f18cf76dde	Merge pull request #1206 from ChinoUkaegbu/chore/edit-setup-instructions chore: Edit run locally instructions in README.md	2024-10-30 17:11:52 +01:00
ChinoUkaegbu	08c918f13e	edit run locally instructions in README.md	2024-10-29 11:20:05 +01:00
Felix Roos	2e72c7f4ed	Merge pull request #1203 from tidalcycles/console-colors colorize console + tweak header	2024-10-23 23:08:14 +02:00
Felix Roos	614f393a5d	more cleanup	2024-10-23 23:05:17 +02:00
Felix Roos	75f7f4deac	cleanup	2024-10-23 23:03:48 +02:00
Felix Roos	2a67698616	- remove header icons (except play/stop button) - use unicode spiral instead of emoji spiral - fix header height on mobile	2024-10-23 02:29:23 +02:00
Felix Roos	801879bddf	use fontFamily + fontSize from settings in console	2024-10-23 01:17:18 +02:00
Felix Roos	7d8984b706	fix: lint	2024-10-23 01:11:03 +02:00
Felix Roos	1a2847d953	- move console logic to console tab - colorize logs when color is set	2024-10-23 01:08:32 +02:00
Felix Roos	e71db24073	Merge pull request #1202 from tidalcycles/markcss markcss	2024-10-22 22:54:59 +02:00
Felix Roos	f61de0c47c	use color inherit in monochrome themes (to be able to set color in markcss)	2024-10-22 22:48:36 +02:00
Felix Roos	53b8bbb732	snapshot + add markcss in test runtime	2024-10-22 22:27:57 +02:00
Felix Roos	aeaf447142	add doc	2024-10-22 22:27:14 +02:00
Felix Roos	1e6e0a61b3	feat: markcss	2024-10-22 22:23:48 +02:00
Felix Roos	dd696ba663	Merge pull request #1200 from tidalcycles/more-settings add 2 new ui settings	2024-10-21 22:56:37 +02:00
Felix Roos	be4c8cbdce	hide docs link when embedded	2024-10-21 22:47:05 +02:00
Felix Roos	b6b54a8553	add 2 new settings - disable css animations - hide buttons - add docs link to left (to use when buttons are hidden)	2024-10-21 21:50:40 +02:00
Jade (Rose) Rowland	1d05051fd6	Merge pull request #1199 from tidalcycles/origin/daslyfe/panel_fixes Make panel hover behavior optional	2024-10-21 11:22:52 -07:00
Jade (Rose) Rowland	6bca8e2a2f	Merge branch 'origin/daslyfe/panel_fixes' of github.com:tidalcycles/strudel into origin/daslyfe/panel_fixes	2024-10-21 11:18:35 -07:00
Jade (Rose) Rowland	630ba62cc3	prettier	2024-10-21 11:18:08 -07:00
Jade (Rose) Rowland	8ac98262bc	Delete website/.astro/types.d.ts	2024-10-21 11:17:00 -07:00
Jade (Rose) Rowland	6057e9ada1	Delete website/.astro/astro/content.d.ts	2024-10-21 11:16:40 -07:00
Jade (Rose) Rowland	94e8b18ffa	remove astro	2024-10-21 11:15:37 -07:00
Jade (Rose) Rowland	2ec20c4ed4	gitignore	2024-10-21 08:39:11 -07:00
Jade (Rose) Rowland	c4fe2c7497	fix horizontal button	2024-10-20 23:33:02 -07:00
Jade (Rose) Rowland	df2d28f0e5	panel options	2024-10-20 21:54:33 -07:00
Felix Roos	d9bd6f9e7d	hotfix: alt+dot breakage	2024-10-20 21:04:18 +02:00
Felix Roos	1e0cc2ab17	hotfix: ignore .astro folder + delete files from git	2024-10-20 20:45:49 +02:00
Jade (Rose) Rowland	835c7b6879	Merge pull request #1193 from daslyfe/orgin/daslyfe/feat/pinmenu Menu Panel Improvements!	2024-10-18 22:28:35 -04:00
Felix Roos	721e7f06b8	Merge pull request #1198 from tidalcycles/patchday2 update lockfile + minor versions	2024-10-19 01:10:06 +02:00
Felix Roos	a46bbeaa10	fix: format + ignore samples	2024-10-19 01:05:23 +02:00
Felix Roos	e3a3c0c5f9	Revert "failing to upgrade eslint" This reverts commit `67964c7e23`.	2024-10-19 00:56:55 +02:00
Felix Roos	67964c7e23	failing to upgrade eslint	2024-10-19 00:31:52 +02:00
Felix Roos	9e5f9d37ef	update vitest from 1 to 2	2024-10-18 23:45:54 +02:00
Felix Roos	0c1234a35f	update minor versions	2024-10-18 23:38:35 +02:00
Felix Roos	c6cc487fc6	update lockfile version from 6 to 9	2024-10-18 23:35:19 +02:00
Jade (Rose) Rowland	dd171f8320	panel position height dependent	2024-10-15 13:33:37 -04:00
Jade (Rose) Rowland	c22c786cf2	welcome width	2024-10-14 15:19:16 -04:00
Jade (Rose) Rowland	c191471e1e	better width calc	2024-10-14 15:12:32 -04:00
Jade (Rose) Rowland	0d0cb3fd93	fix: tiny vertical menu	2024-10-14 15:05:10 -04:00
Jade (Rose) Rowland	bb4b7dc533	fix: vertical breakpoints on mobile	2024-10-14 15:01:05 -04:00
Jade (Rose) Rowland	8440fa42ea	remove unessecary hover logic	2024-10-14 13:51:14 -04:00
Jade (Rose) Rowland	61f070744a	fix: lint	2024-10-14 13:09:24 -04:00
Jade (Rose) Rowland	2e6a561184	remove spillover	2024-10-14 13:08:39 -04:00
Jade (Rose) Rowland	8703d684c4	fix: lint	2024-10-14 13:01:02 -04:00
Jade (Rose) Rowland	b0d2115f43	feat: mobile responsiveness	2024-10-14 12:45:55 -04:00
Jade (Rose) Rowland	96802a271c	feat: menu pinning	2024-10-13 23:24:54 -04:00
Jade (Rose) Rowland	a91f4576f3	Merge branch 'main' of github.com:daslyfe/strudel	2024-10-13 00:01:12 -04:00
Jade (Rose) Rowland	07bcaa65a9	create meta params	2024-09-06 00:16:30 -04:00