Remove PicoGL dependency

Improve the API when using a frame modifier
Remove uniform pattern function and expose the shader instance
2026-07-21 20:55:12 -04:00 · 2024-12-22 08:04:07 -05:00 · 2024-10-27 11:46:49 -04:00 · 2024-10-27 10:17:41 -04:00 · 2024-10-21 10:20:50 -04:00 · 2024-10-21 09:23:31 -04:00
55 changed files with 902 additions and 1376 deletions
@@ -138,18 +138,6 @@ 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,16 +14,10 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w

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

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

 ## Using Strudel In Your Project

@@ -29,6 +29,7 @@ const editor = new StrudelMirror({
      import('@strudel/core'),
      import('@strudel/draw'),
      import('@strudel/mini'),
+      import('@strudel/shader'),
      import('@strudel/tonal'),
      import('@strudel/webaudio'),
    );
@@ -13,7 +13,7 @@ import {
  lineNumbers,
  drawSelection,
 } from '@codemirror/view';
-import { repl, registerControl } from '@strudel/core';
+import { Pattern, repl } from '@strudel/core';
 import { Drawer, cleanupDraw } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
@@ -133,7 +133,6 @@ export class StrudelMirror {
      autodraw,
      prebake,
      bgFill = true,
-      solo = true,
      ...replOptions
    } = options;
    this.code = initialCode;
@@ -144,7 +143,6 @@ 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,14 +159,12 @@ export class StrudelMirror {
        replOptions?.onToggle?.(started);
        if (started) {
          this.drawer.start(this.repl.scheduler);
-          if (this.solo) {
-            // stop other repls when this one is started
-            document.dispatchEvent(
-              new CustomEvent('start-repl', {
-                detail: this.id,
-              }),
-            );
-          }
+          // stop other repls when this one is started
+          document.dispatchEvent(
+            new CustomEvent('start-repl', {
+              detail: this.id,
+            }),
+          );
        } else {
          this.drawer.stop();
          updateMiniLocations(this.editor, []);
@@ -223,7 +219,7 @@ export class StrudelMirror {

    // stop this repl when another repl is started
    this.onStartRepl = (e) => {
-      if (this.solo && e.detail !== this.id) {
+      if (e.detail !== this.id) {
        this.stop();
      }
    };
@@ -358,12 +354,3 @@ function s4() {
    .toString(16)
    .substring(1);
 }
-
-/**
- * Overrides the css of highlighted events. Make sure to use single quotes!
- * @name markcss
- * @example
- * note("c a f e")
- * .markcss('text-decoration:underline')
- */
-export const markcss = registerControl('markcss');
@@ -93,7 +93,6 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
    if (haps.has(id)) {
      const hap = haps.get(id);
      const color = hap.value?.color ?? 'var(--foreground)';
-      const style = hap.value?.markcss || `outline: solid 2px ${color}`;
      // Get explicit channels for color values
      /* 
      const swatch = document.createElement('div');
@@ -115,7 +114,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
        to,
        Decoration.mark({
          // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
-          attributes: { style },
+          attributes: { style: `outline: solid 2px ${color}` },
        }),
      );
    }
@@ -18,25 +18,25 @@ export default createTheme({
  theme: 'light',
  settings,
  styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
-    { tag: [t.unit, t.punctuation], color: 'inherit' },
+    { 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' },
  ],
 });
@@ -15,25 +15,25 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
-    { tag: [t.unit, t.punctuation], color: 'inherit' },
+    { tag: t.labelName, color: 'white' },
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
  ],
 });
@@ -18,25 +18,25 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
-    { tag: [t.unit, t.punctuation], color: 'inherit' },
+    { tag: t.labelName, color: 'white' },
+    { tag: t.keyword, color: 'white' },
+    { tag: t.operator, color: 'white' },
+    { tag: t.special(t.variableName), color: 'white' },
+    { tag: t.typeName, color: 'white' },
+    { tag: t.atom, color: 'white' },
+    { tag: t.number, color: 'white' },
+    { tag: t.definition(t.variableName), color: 'white' },
+    { tag: t.string, color: 'white' },
+    { tag: t.special(t.string), color: 'white' },
+    { tag: t.comment, color: 'white' },
+    { tag: t.variableName, color: 'white' },
+    { tag: t.tagName, color: 'white' },
+    { tag: t.bracket, color: 'white' },
+    { tag: t.meta, color: 'white' },
+    { tag: t.attributeName, color: 'white' },
+    { tag: t.propertyName, color: 'white' },
+    { tag: t.className, color: 'white' },
+    { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
  ],
 });
@@ -14,24 +14,24 @@ export default createTheme({
  theme: 'dark',
  settings,
  styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
+    { tag: t.labelName, color: '#41FF00' },
+    { tag: t.keyword, color: '#41FF00' },
+    { tag: t.operator, color: '#41FF00' },
+    { tag: t.special(t.variableName), color: '#41FF00' },
+    { tag: t.typeName, color: '#41FF00' },
+    { tag: t.atom, color: '#41FF00' },
+    { tag: t.number, color: '#41FF00' },
+    { tag: t.definition(t.variableName), color: '#41FF00' },
+    { tag: t.string, color: '#41FF00' },
+    { tag: t.special(t.string), color: '#41FF00' },
+    { tag: t.comment, color: '#41FF00' },
+    { tag: t.variableName, color: '#41FF00' },
+    { tag: t.tagName, color: '#41FF00' },
+    { tag: t.bracket, color: '#41FF00' },
+    { tag: t.meta, color: '#41FF00' },
+    { tag: t.attributeName, color: '#41FF00' },
+    { tag: t.propertyName, color: '#41FF00' },
+    { tag: t.className, color: '#41FF00' },
+    { tag: t.invalid, color: '#41FF00' },
  ],
 });
@@ -16,24 +16,24 @@ export default createTheme({
  theme: 'light',
  settings,
  styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
+    { tag: t.labelName, color: 'black' },
+    { tag: t.keyword, color: 'black' },
+    { tag: t.operator, color: 'black' },
+    { tag: t.special(t.variableName), color: 'black' },
+    { tag: t.typeName, color: 'black' },
+    { tag: t.atom, color: 'black' },
+    { tag: t.number, color: 'black' },
+    { tag: t.definition(t.variableName), color: 'black' },
+    { tag: t.string, color: 'black' },
+    { tag: t.special(t.string), color: 'black' },
+    { tag: t.comment, color: 'black' },
+    { tag: t.variableName, color: 'black' },
+    { tag: t.tagName, color: 'black' },
+    { tag: t.bracket, color: 'black' },
+    { tag: t.meta, color: 'black' },
+    { tag: t.attributeName, color: 'black' },
+    { tag: t.propertyName, color: 'black' },
+    { tag: t.className, color: 'black' },
+    { tag: t.invalid, color: 'black' },
  ],
 });
@@ -133,10 +133,3 @@ registerWidget('_pitchwheel', (id, options = {}, pat) => {
  const ctx = getCanvasWidget(id, options).getContext('2d');
  return pat.pitchwheel({ ...options, ctx, id });
 });
-
-registerWidget('_spectrum', (id, options = {}, pat) => {
-  let _size = options.size || 200;
-  options = { width: _size, height: _size, ...options, size: _size / 5 };
-  const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.spectrum({ ...options, ctx, id });
-});
@@ -546,18 +546,6 @@ 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,10 +68,6 @@ 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,7 +14,6 @@ export * from './controls.mjs';
 export * from './hap.mjs';
 export * from './pattern.mjs';
 export * from './signal.mjs';
-export * from './pick.mjs';
 export * from './state.mjs';
 export * from './timespan.mjs';
 export * from './util.mjs';
@@ -1023,7 +1023,6 @@ 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)],
@@ -1492,14 +1491,6 @@ 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));
@@ -2548,10 +2539,6 @@ 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(
@@ -2606,7 +2593,7 @@ export const steps = register('steps', function (targetTactus, pat) {
    // avoid divide by zero..
    return nothing;
  }
-  return pat._fast(Fraction(targetTactus).div(pat.tactus)).setTactus(targetTactus);
+  return pat.fast(Fraction(targetTactus).div(pat.tactus));
 });

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

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

@@ -2895,13 +2882,6 @@ 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
@@ -3113,25 +3093,3 @@ 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()),
-);
@@ -1,214 +0,0 @@
-/*
-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,13 +63,11 @@ export function repl({
  let pPatterns = {};
  let anonymousIndex = 0;
  let allTransform;
-  let eachTransform;

  const hush = function () {
    pPatterns = {};
    anonymousIndex = 0;
    allTransform = undefined;
-    eachTransform = undefined;
    return silence;
  };

@@ -86,42 +84,15 @@ 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 (typeof id === 'string' && (id.startsWith('_') || id.endsWith('_'))) {
+      if (id.startsWith('_') || id.endsWith('_')) {
        // allows muting a pattern x with x_ or _x
        return silence;
      }
@@ -160,7 +131,6 @@ export function repl({
    });
    return evalScope({
      all,
-      each,
      hush,
      cpm,
      setCps,
@@ -182,14 +152,7 @@ export function repl({
      shouldHush && hush();
      let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
      if (Object.keys(pPatterns).length) {
-        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);
+        pattern = stack(...Object.values(pPatterns));
      }
      if (allTransform) {
        pattern = allTransform(pattern);
@@ -1,14 +1,13 @@
 /*
-signal.mjs - continuous patterns
-Copyright (C) 2024 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/signal.mjs>
+signal.mjs - <short description TODO>
+Copyright (C) 2022 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, pure, register, reify, silence, stack } from './pattern.mjs';
+import { Pattern, fastcat, reify, silence, stack, register } from './pattern.mjs';
 import Fraction from './fraction.mjs';
-
-import { id, keyAlias, getCurrentKeyboardState } from './util.mjs';
+import { id, _mod, clamp, objectMap } from './util.mjs';

 export function steady(value) {
  // A continuous value
@@ -160,37 +159,6 @@ 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,...
@@ -285,6 +253,211 @@ 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) {
@@ -423,11 +596,8 @@ 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)),
-  true,
-  true,
+export const degradeByWith = register('degradeByWith', (withPat, x, pat) =>
+  pat.fmap((a) => (_) => a).appLeft(withPat.filterValues((v) => v > x)),
 );

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

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

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

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

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

 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();
 });

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

 import { steady } from '../signal.mjs';
@@ -960,18 +958,6 @@ 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(
@@ -1267,13 +1253,4 @@ 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,38 +434,6 @@ 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, { willReadFrequently: true });
+  return canvas.getContext(contextType);
 };

 let animationFrames = {};
@@ -1,3 +0,0 @@
-# @strudel/serial
-
-This package adds webserial functionality to strudel Patterns, for e.g. sending messages to arduino microcontrollers.
@@ -1,87 +0,0 @@
-/*
-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 });
-  });
-};
@@ -12,6 +12,7 @@ export async function prebake() {
    import('@strudel/webaudio'),
    import('@strudel/codemirror'),
    import('@strudel/hydra'),
+    import('@strudel/shader'),
    import('@strudel/soundfonts'),
    import('@strudel/midi'),
    // import('@strudel/xen'),
@@ -10,8 +10,6 @@ if (typeof HTMLElement !== 'undefined') {
    static observedAttributes = ['code'];
    settings = codemirrorSettings.get();
    editor = null;
-    sync = false;
-    solo = true;
    constructor() {
      super();
    }
@@ -51,8 +49,6 @@ if (typeof HTMLElement !== 'undefined') {
          });
          this.dispatchEvent(event);
        },
-        solo: this.solo,
-        sync: this.sync,
      });
      // init settings
      this.editor.updateSettings(this.settings);
@@ -0,0 +1,16 @@
+# @strudel/shader
+
+Helpers for drawing shader.
+
+## Todos
+
+Here are the things that needs to be implemented:
+
+- [ ] Shader compilation error reporting, e.g. to show the line number
+- [ ] Shader import from url, like shadertoy or git
+- [ ] Display shader author attribution, e.g. to respect CC-BY
+- [ ] Handle WebGL context lost by restoring the objects.
+- [ ] Multiple instances and custom canvas positions
+- [ ] Multiple programs, to be swapped like a pattern
+- [ ] Texture inputs
+- [ ] Buffer inputs, e.g. to generate a texture
@@ -0,0 +1 @@
+export * from './shader.mjs';
@@ -1,8 +1,8 @@
 {
-  "name": "@strudel/mqtt",
-  "version": "1.1.0",
-  "description": "MQTT API for strudel",
-  "main": "mqtt.mjs",
+  "name": "@strudel/shader",
+  "version": "1.0.0",
+  "description": "Helpers for drawing shader",
+  "main": "index.mjs",
  "type": "module",
  "publishConfig": {
    "main": "dist/index.mjs"
@@ -20,9 +20,10 @@
    "strudel",
    "pattern",
    "livecoding",
-    "algorave"
+    "algorave",
+    "shader"
  ],
-  "author": "Alex McLean <alex@slab.org>",
+  "author": "Felix Roos <flix91@gmail.com>",
  "license": "AGPL-3.0-or-later",
  "bugs": {
    "url": "https://github.com/tidalcycles/strudel/issues"
@@ -30,9 +31,10 @@
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
    "@strudel/core": "workspace:*",
-    "paho-mqtt": "^1.1.0"
+    "picogl": "^0.17.9"
  },
  "devDependencies": {
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vitest": "^2.1.3"
  }
 }
@@ -0,0 +1,347 @@
+/*
+shader.mjs - implements the `loadShader` function
+Copyright (C) 2024 Strudel contributors
+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/>.
+*/
+
+/*
+/// Here is a feature demo
+// Setup a shader
+let truchetFTW = fetch('https://raw.githubusercontent.com/TristanCacqueray/shaders/refs/heads/main/shaders/Truchet%20%2B%20Kaleidoscope%20FTW.glsl').then((res) => res.text())
+// This shader provides the following uniforms:
+// uniform float icolor;
+// uniform float moveFWD;
+// uniform float rotations[4];
+// uniform float modulations[6];
+
+// Start the instance and binds the uniforms
+let {uniforms} = await loadShader(truchetFTW)
+
+setcpm(96)
+
+// A smoothing function that is called for each frame
+let smooth = (desired, speed) => (value) => value + ((desired - value) / speed)
+
+// Each kick updates a different rotation value.
+let rotationIndex = 0
+$: s("bd").bank("RolandTR808")
+   .gain(2).dist("<1 .7 .7 .7>")
+   .mask("<1@30 0@2>")
+   .onTrigger(() => uniforms.rotations.set(
+     cur => smooth(cur + 1, 20), rotationIndex++),
+     false)
+
+// Each hat increase the icolor value.
+$: sound("hh*4").bank("RolandTR808")
+   .room(.3).gain(".25 .3 .4")
+   .mask("<0@8 1@32>")
+   .onTrigger(() => uniforms.icolor.incr(0.1), false)
+
+// The snare smoothly increase the moveFWD value
+$: s("cp/8").bank("RolandTR808")
+   .hpf(500).hpa(.8).hpenv("<-3 -2 -3 -2 -1>/8")
+   .room(0.5).roomsize(7).rlp(5000).gain(.2)
+   .onTrigger(() => uniforms.moveFWD.set(cur => smooth(cur + 1, 30)), false)
+
+// Each piano note updates a different modulations value
+let pianoPitches = {}
+$: note("<C D G A Bb D C A G D Bb A>*[2,2.02]")
+  .clip(1.1)
+  .transpose("<-12 -24 -12 0>/8")
+  // .sound("sawtooth")
+  .sound("triangle")
+  .cutoff(perlin.slow(5).range(20,1200))
+  .room(.8).roomsize(.6)
+  .gain(.4)
+  .onTrigger((_, hap) => {
+    const n = hap.value.note
+    // assign unique array position for each new notes
+    if (!pianoPitches[n]) pianoPitches[n] = Object.keys(pianoPitches).length + 1
+    const idx = pianoPitches[n]
+    uniforms.modulations.set(cur => smooth(cur + .5, 55), idx)
+  }, false)
+*/
+
+import { logger } from '@strudel/core';
+
+// The standard fullscreen vertex shader.
+const vertexShader = `#version 300 es
+precision highp float;
+layout(location=0) in vec2 position;
+void main() {
+  gl_Position = vec4(position, 1, 1);
+}
+`;
+
+// Make the fragment source, similar to the one from shadertoy.
+function mkFragmentShader(code) {
+  return `#version 300 es
+precision highp float;
+out vec4 oColor;
+uniform float iTime;
+uniform vec2 iResolution;
+
+#define STRUDEL 1
+
+${code}
+
+void main(void) {
+  mainImage(oColor, gl_FragCoord.xy);
+}
+`;
+}
+
+// Helper class to handle uniform updates
+class UniformValue {
+  constructor(count, draw) {
+    this.draw = draw;
+    this.value = new Array(count).fill(0);
+    this.frameModifier = new Array(count).fill(null);
+  }
+
+  // Helper to perform a simple increment
+  incr(value, pos = 0) {
+    const idx = pos % this.value.length;
+    this.value[idx] += value;
+    this.frameModifier[idx] = null;
+    this.draw();
+  }
+
+  // The value can be a function that will be called for each rendering frame
+  set(value, pos = 0) {
+    const idx = pos % this.value.length;
+    if (typeof value === 'function') {
+      this.frameModifier[idx] = value(this.value[idx]);
+    } else {
+      this.value[idx] = value;
+      this.frameModifier[idx] = null;
+    }
+    this.draw();
+  }
+
+  get(pos = 0) {
+    return this.value[pos % this.value.length];
+  }
+
+  // This function is called for every frame, allowing to run a smooth modifier
+  _frameUpdate(elapsed) {
+    this.value = this.value.map((value, idx) =>
+      this.frameModifier[idx] ? this.frameModifier[idx](value, elapsed) : value,
+    );
+    return this.value;
+  }
+
+  // When the shader is update, this function adjust the number of values, preserving the current one
+  _resize(count) {
+    if (count != this.count) {
+      count = Math.max(1, count);
+      resizeArray(this.value, count, 0);
+      resizeArray(this.frameModifier, count, null);
+    }
+  }
+}
+
+// Shrink or extend an array
+function resizeArray(arr, size, defval) {
+  if (arr.length > size) arr.length = size;
+  else arr.push(...new Array(size - arr.length).fill(defval));
+}
+
+// Setup the instance's uniform after shader compilation.
+function setupUniforms(instance) {
+  const newUniforms = new Set();
+  const draw = () => {
+    // Start the drawing loop
+    instance.age = 0;
+    if (!instance.drawing) {
+      instance.drawing = requestAnimationFrame(instance.update);
+    }
+  };
+
+  // Collect every available uniforms
+  let gl = instance.gl;
+  const numUniforms = instance.gl.getProgramParameter(instance.program, gl.ACTIVE_UNIFORMS);
+  for (let i = 0; i < numUniforms; ++i) {
+    const inf = gl.getActiveUniform(instance.program, i);
+
+    // Arrays have a `[0]` suffix in their name, drop that
+    const name = inf.name.replace('[0]', '');
+
+    // Figure out how many values is this uniform, and how to update it.
+    let count = inf.size;
+    let updateFunc = 'uniform1fv';
+    switch (inf.type) {
+      case gl.FLOAT_VEC2:
+        count *= 2;
+        updateFunc = 'uniform2fv';
+        break;
+      case gl.FLOAT_VEC3:
+        count *= 3;
+        updateFunc = 'uniform3fv';
+        break;
+      case gl.FLOAT_VEC4:
+        count *= 4;
+        updateFunc = 'uniform4fv';
+        break;
+    }
+
+    // This is a new uniform
+    if (!instance.uniforms[name]) instance.uniforms[name] = new UniformValue(count, draw);
+    // This is a known uniform, make sure it's size is correct
+    else instance.uniforms[name]._resize(count);
+
+    // Record it's location for the 'updateUniforms' below.
+    instance.uniforms[name].loc = gl.getUniformLocation(instance.program, inf.name);
+    instance.uniforms[name].updateFunc = updateFunc;
+
+    // Record the name so that unused uniform can be deleted below
+    newUniforms.add(name);
+  }
+
+  // Remove deleted uniforms
+  Object.keys(instance.uniforms).forEach((name) => {
+    if (!newUniforms.has(name)) delete instance.uniforms[name];
+  });
+}
+
+// Update the uniforms for a given drawFrame call.
+function updateUniforms(gl, now, elapsed, uniforms) {
+  Object.entries(uniforms).forEach(([name, uniform]) => {
+    try {
+      if (name == 'iTime') {
+        gl.uniform1f(uniform.loc, now);
+      } else if (name == 'iResolution') {
+        gl.uniform2f(uniform.loc, gl.canvas.width, gl.canvas.height);
+      } else {
+        const value = uniform._frameUpdate(elapsed);
+        // Send the value to the GPU
+        // console.log('updateUniforms:', name, uniform.updateFunc, value);
+        gl[uniform.updateFunc](uniform.loc, value);
+      }
+    } catch (err) {
+      console.warn('uniform error');
+      console.error(err);
+    }
+  });
+}
+
+// Setup the canvas and return the WebGL context.
+function setupCanvas(name) {
+  // TODO: support custom size
+  const width = 400;
+  const height = 300;
+  const canvas = document.createElement('canvas');
+  canvas.id = 'cnv-' + name;
+  canvas.width = width;
+  canvas.height = height;
+  const top = 60 + Object.keys(_instances).length * height;
+  canvas.style = `pointer-events:none;width:${width}px;height:${height}px;position:fixed;top:${top}px;right:23px`;
+  document.body.append(canvas);
+  return canvas.getContext('webgl2');
+}
+
+function createProgram(gl, vertex, fragment) {
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!success) {
+      const err = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      throw err;
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const err = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw err;
+  }
+  gl.useProgram(program);
+  return program;
+}
+
+// Setup the shader instance
+function initializeShaderInstance(name, code) {
+  const gl = setupCanvas(name);
+
+  // Two triangle to cover the whole canvas
+  const mkPositionArray = () => {
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(buf, 2, gl.FLOAT, false, 0, 0);
+    return vao;
+  };
+
+  try {
+    let array = mkPositionArray();
+    let program = createProgram(gl, vertexShader, code);
+    const instance = { gl, code, program, array, uniforms: {} };
+    setupUniforms(instance);
+    // Render frame logic
+    let prev = performance.now() / 1000;
+    instance.age = 0;
+    instance.update = () => {
+      const now = performance.now() / 1000;
+      const elapsed = instance.age == 0 ? 1 / 60 : now - prev;
+      prev = now;
+      // console.log('drawing!');
+
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+      // Clear the canvas
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.bindVertexArray(array);
+
+      // Send the uniform values to the GPU
+      updateUniforms(instance.gl, now, elapsed, instance.uniforms);
+
+      // Draw the quad
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+      // After sometime, if no update happened, stop the animation loop to save cpu cycles
+      if (instance.age++ < 100) requestAnimationFrame(instance.update);
+      else instance.drawing = false;
+    };
+    instance.update();
+    return instance;
+  } catch (err) {
+    gl.canvas.remove();
+    throw err;
+  }
+}
+
+// Update the instance program
+function reloadShaderInstanceCode(instance, code) {
+  const program = createProgram(instance.gl, vertexShader, code);
+  instance.gl.deleteProgram(instance.program);
+  instance.program = program;
+  instance.code = code;
+  setupUniforms(instance);
+}
+
+// Keep track of the running shader instances
+let _instances = {};
+export function loadShader(code = '', name = 'default') {
+  if (code) {
+    code = mkFragmentShader(code);
+  }
+  if (!_instances[name]) {
+    _instances[name] = initializeShaderInstance(name, code);
+    logger('[shader] ready');
+  } else if (_instances[name].code != code) {
+    reloadShaderInstanceCode(_instances[name], code);
+    logger('[shader] reloaded');
+  }
+  return _instances[name];
+}
@@ -7,7 +7,7 @@ export default defineConfig({
  plugins: [],
  build: {
    lib: {
-      entry: resolve(__dirname, 'mqtt.mjs'),
+      entry: resolve(__dirname, 'index.mjs'),
      formats: ['es'],
      fileName: (ext) => ({ es: 'index.mjs' })[ext],
    },
@@ -112,27 +112,11 @@ 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,
-  flfo,
-) {
+export function createFilter(context, type, frequency, Q, att, dec, sus, rel, fenv, start, end, fanchor, model, drive) {
  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, detuneParam;
+  let frequencyParam;
  if (model === 'ladder') {
    filter = getWorklet(context, 'ladder-processor', { frequency, q: Q, drive });
    frequencyParam = filter.parameters.get('frequency');
@@ -142,7 +126,6 @@ export function createFilter(
    filter.Q.value = Q;
    filter.frequency.value = frequency;
    frequencyParam = filter.frequency;
-    detuneParam = filter.detune;
  }

  // envelope is active when any of these values is set
@@ -157,10 +140,7 @@ export function createFilter(
    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);
-  }
-  const hasLFO = detuneParam && flfo !== undefined;
-  if (hasLFO !== undefined) {
-    let lfo = getVibratoOscillator(detuneParam, { vib: flfo, vibmod: 4 }, start);
+    return filter;
  }
  return filter;
 }
@@ -270,12 +270,11 @@ function getReverb(orbit, duration, fade, lp, dim, ir) {
 export let analysers = {},
  analysersData = {};

-export function getAnalyserById(id, fftSize = 1024, smoothingTimeConstant = 0.5) {
+export function getAnalyserById(id, fftSize = 1024) {
  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);
@@ -357,7 +356,6 @@ export const superdough = async (value, t, hapDuration) => {
    lpdecay,
    lpsustain,
    lprelease,
-    lplfo,
    resonance = getDefaultValue('resonance'),
    // high pass
    hpenv,
@@ -476,7 +474,6 @@ export const superdough = async (value, t, hapDuration) => {
        fanchor,
        ftype,
        drive,
-        lplfo,
      );
    chain.push(lp());
    if (ftype === '24db') {
@@ -6,5 +6,4 @@ 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';
@@ -1,69 +0,0 @@
-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));
-}
@@ -331,19 +331,6 @@ importers:
        specifier: ^2.1.3
        version: 2.1.3(@types/node@22.7.6)(@vitest/ui@2.1.3)(terser@5.36.0)

-  packages/mqtt:
-    dependencies:
-      '@strudel/core':
-        specifier: workspace:*
-        version: link:../core
-      paho-mqtt:
-        specifier: ^1.1.0
-        version: 1.1.0
-    devDependencies:
-      vite:
-        specifier: ^5.0.10
-        version: 5.4.9(@types/node@22.7.6)(terser@5.36.0)
-
  packages/osc:
    dependencies:
      '@strudel/core':
@@ -419,6 +406,22 @@ importers:
        specifier: ^5.0.10
        version: 5.4.9(@types/node@22.7.6)(terser@5.36.0)

+  packages/shader:
+    dependencies:
+      '@strudel/core':
+        specifier: workspace:*
+        version: link:../core
+      picogl:
+        specifier: ^0.17.9
+        version: 0.17.9
+    devDependencies:
+      vite:
+        specifier: ^5.0.10
+        version: 5.4.9(@types/node@22.7.6)(terser@5.36.0)
+      vitest:
+        specifier: ^2.1.3
+        version: 2.1.3(@types/node@22.7.6)(@vitest/ui@2.1.3)(terser@5.36.0)
+
  packages/soundfonts:
    dependencies:
      '@strudel/core':
@@ -636,15 +639,15 @@ importers:
      '@strudel/mini':
        specifier: workspace:*
        version: link:../packages/mini
-      '@strudel/mqtt':
-        specifier: workspace:*
-        version: link:../packages/mqtt
      '@strudel/osc':
        specifier: workspace:*
        version: link:../packages/osc
      '@strudel/serial':
        specifier: workspace:*
        version: link:../packages/serial
+      '@strudel/shader':
+        specifier: workspace:*
+        version: link:../packages/shader
      '@strudel/soundfonts':
        specifier: workspace:*
        version: link:../packages/soundfonts
@@ -6007,9 +6010,6 @@ packages:
    engines: {node: ^16.14.0 || >=18.0.0}
    hasBin: true

-  paho-mqtt@1.1.0:
-    resolution: {integrity: sha512-KPbL9KAB0ASvhSDbOrZBaccXS+/s7/LIofbPyERww8hM5Ko71GUJQ6Nmg0BWqj8phAIT8zdf/Sd/RftHU9i2HA==}
-
  parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@@ -6103,6 +6103,9 @@ packages:
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

+  picogl@0.17.9:
+    resolution: {integrity: sha512-TfqB7jlD5FTO4a/Rp9wnMhVjPA0XZ/xbtLS2f8eHtOmVtIOhFD7Wf0jUL6kDjww3bgF/REEV9oPreBeGvWFlUQ==}
+
  picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}
@@ -14706,8 +14709,6 @@ snapshots:
      - bluebird
      - supports-color

-  paho-mqtt@1.1.0: {}
-
  parent-module@1.0.1:
    dependencies:
      callsites: 3.1.0
@@ -14811,6 +14812,8 @@ snapshots:

  picocolors@1.1.1: {}

+  picogl@0.17.9: {}
+
  picomatch@2.3.1: {}

  picomatch@4.0.2: {}
@@ -954,24 +954,6 @@ 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 ]",
@@ -985,60 +967,6 @@ 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 ]",
@@ -4137,8 +4065,6 @@ 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 ]",
@@ -4496,27 +4422,6 @@ 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 ]",
@@ -4646,27 +4551,6 @@ 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 ]",
@@ -7603,75 +7487,6 @@ 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 ]",
@@ -8927,8 +8742,6 @@ 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,7 +8,6 @@ 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 ]",
@@ -18,20 +17,22 @@ 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 ]",
@@ -6905,10 +6906,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 ]",
@@ -6916,6 +6917,7 @@ 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,12 +134,6 @@ 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,
@@ -33,9 +33,9 @@
    "@strudel/hydra": "workspace:*",
    "@strudel/midi": "workspace:*",
    "@strudel/mini": "workspace:*",
-    "@strudel/mqtt": "workspace:*",
    "@strudel/osc": "workspace:*",
    "@strudel/serial": "workspace:*",
+    "@strudel/shader": "workspace:*",
    "@strudel/soundfonts": "workspace:*",
    "@strudel/tonal": "workspace:*",
    "@strudel/transpiler": "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">
-    <div class="flex items-center text-2xl space-x-2">
+    <a href={`${baseNoTrailing}/`} class="flex items-center text-2xl space-x-2">
      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
-        <span class="block rotate-90 text-blue-500">꩜</span>
-        <div class="flex space-x-2 items-baseline">
+        <span>🌀</span>
+        <div class="flex space-x-1 items-baseline">
          <span class="">strudel</span>
-          <span class="text-sm font-medium">DOCS</span>
+          <span class="text-sm">DOCS</span>
        </div>
      </h1>
-    </div>
+    </a>
  </div>
  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
  <div class="search-item h-10">
@@ -82,7 +82,18 @@ 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()`} />

-Remember the execution of the chained functions goes from left to right.
+- 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.

 # Operators

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

 ## run

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

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

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

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

-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).
+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.

-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.
+# MIDI API

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

 ## midi(outputName?)

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

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

-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)
+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.

 ## Prequisites

-To get SuperDirt to work with Strudel, you need to
+Getting [SuperDirt](https://github.com/musikinformatik/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 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
+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

 Now you're all set!

@@ -89,67 +86,3 @@ 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,11 +98,3 @@ 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,4 +1,8 @@
+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';
@@ -11,19 +15,24 @@ 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, isButtonRowHidden, isCSSAnimationDisabled } = useSettings();
+  const { isZen } = useSettings();

  return (
    <header
      id="header"
      className={cx(
-        'flex-none text-black  z-[100] text-lg select-none h-20 md:h-14',
+        'flex-none text-black  z-[100] text-lg select-none',
        !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', ''));
@@ -34,46 +43,31 @@ export function Header({ context, embedded = false }) {
          )}
        >
          <div
-            className={cx(
-              'mt-[1px]',
-              started && !isCSSAnimationDisabled && 'animate-spin',
-              'cursor-pointer text-blue-500',
-              isZen && 'fixed top-2 right-4',
-            )}
+            className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer', isZen && 'fixed top-2 right-4')}
            onClick={() => {
              if (!isEmbedded) {
                setIsZen(!isZen);
              }
            }}
          >
-            <span className="block rotate-90">꩜</span>
+            🌀
          </div>
          {!isZen && (
-            <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 className={cx(started && 'animate-pulse')}>
+              <span className="">strudel</span> <span className="text-sm">REPL</span>
            </div>
          )}
        </h1>
      </div>
-      {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-1 md:px-2">
+      {!isZen && (
+        <div className="flex max-w-full overflow-auto text-foreground">
          <button
            onClick={handleTogglePlay}
            title={started ? 'stop' : 'play'}
-            className={cx(
-              !isEmbedded ? 'p-2' : 'px-2',
-              'hover:opacity-50',
-              !started && !isCSSAnimationDisabled && 'animate-pulse',
-            )}
+            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:opacity-50', !started && 'animate-pulse')}
          >
            {!pending ? (
-              <span className={cx('flex items-center space-x-2')}>
+              <span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
                {started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
                {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
              </span>
@@ -90,6 +84,8 @@ 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 && (
@@ -98,6 +94,7 @@ 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>
          )}
@@ -110,6 +107,7 @@ export function Header({ context, embedded = false }) {
              )}
              onClick={handleShare}
            >
+              <LinkIcon className="w-6 h-6" />
              <span>share</span>
            </button>
          )}
@@ -119,6 +117,7 @@ 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>
          )}
@@ -13,7 +13,7 @@ export default function ReplEditor(Props) {
  const { context } = Props;
  const { containerRef, editorRef, error, init, pending } = context;
  const settings = useSettings();
-  const { panelPosition, isZen } = settings;
+  const { panelPosition } = 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} />
-        {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+        {panelPosition === 'right' && <VerticalPanel context={context} />}
      </div>
      <UserFacingErrorMessage error={error} />
-      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {panelPosition === 'bottom' && <HorizontalPanel context={context} />}
    </div>
  );
 }
@@ -1,48 +1,18 @@
-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() {
-  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);
-      });
-    }, []),
-  );
+export function ConsoleTab({ log }) {
  return (
-    <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 }}
-    >
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-2">
+      <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
+██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
+███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
+╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
+███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
+╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
      {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')}
-            style={color ? { color } : {}}
-          >
+          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
            <span dangerouslySetInnerHTML={{ __html: message }} />
            {l.count ? ` (${l.count})` : ''}
          </div>
@@ -72,7 +42,3 @@ function linkify(inputText) {

  return replacedText;
 }
-
-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
-}
@@ -6,7 +6,6 @@ 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,5 +1,9 @@
+import { logger } from '@strudel/core';
+import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
-import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
+import { nanoid } from 'nanoid';
+import { useCallback, useState } from 'react';
+import { setPanelPinned, setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -7,31 +11,28 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
+import { ChevronLeftIcon } from '@heroicons/react/16/solid';

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

 export function HorizontalPanel({ context }) {
  const settings = useSettings();
-  const { isPanelOpen, activeFooter: tab } = settings;
+  const { isPanelPinned: pinned, activeFooter: tab } = settings;

  return (
    <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>
+      className={cx(
+        'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
+        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
      )}
-
-      <div className="absolute right-4 pt-4">
-        <PanelActionButton settings={settings} />
+    >
+      <div className="flex h-full overflow-auto ">
+        <PanelContent context={context} tab={tab} />
      </div>

-      <div className="flex  justify-between min-h-12 max-h-12 grid-cols-2 items-center">
-        <Tabs setTab={setTab} tab={tab} />
+      <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
+        <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+        <PinButton pinned={pinned} setPinned={setPanelPinned} />
      </div>
    </PanelNav>
  );
@@ -39,37 +40,28 @@ export function HorizontalPanel({ context }) {

 export function VerticalPanel({ context }) {
  const settings = useSettings();
-  const { activeFooter: tab, isPanelOpen } = settings;
+  const { isPanelPinned: pinned, activeFooter: tab } = 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>
+      className={cx(
+        'hover:min-w-[min(600px,80vw)] hover:max-w-[min(600px,80vw)]',
+        pinned ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-8',
      )}
+    >
+      <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
+        <div className="flex justify-between w-full ">
+          <Tabs setTab={setTab} tab={tab} pinned={pinned} />
+          <PinButton pinned={pinned} setPinned={setPanelPinned} />
+        </div>
+
+        <div className="overflow-auto h-full">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      </div>
+      <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
+        <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
+      </div>
    </PanelNav>
  );
 }
@@ -86,27 +78,11 @@ if (TAURI) {
  tabNames.files = 'files';
 }

-function PanelNav({ children, className, settings, ...props }) {
-  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
+function PanelNav({ children, className, ...props }) {
  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)}
+      aria-label="Settings Menu"
+      className={cx('bg-lineHighlight group transition-all overflow-x-auto', className)}
      {...props}
    >
      {children}
@@ -115,11 +91,33 @@ function PanelNav({ children, className, settings, ...props }) {
 }

 function PanelContent({ context, tab }) {
+  const [log, setLog] = useState([]);
+  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);
+      });
+    }, []),
+  );
+
  switch (tab) {
    case tabNames.patterns:
      return <PatternsTab context={context} />;
    case tabNames.console:
-      return <ConsoleTab />;
+      return <ConsoleTab log={log} />;
    case tabNames.sounds:
      return <SoundsTab />;
    case tabNames.reference:
@@ -136,7 +134,7 @@ function PanelContent({ context, tab }) {
 function PanelTab({ label, isSelected, onClick }) {
  return (
    <>
-      <button
+      <div
        onClick={onClick}
        className={cx(
          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
@@ -144,13 +142,13 @@ function PanelTab({ label, isSelected, onClick }) {
        )}
      >
        {label}
-      </button>
+      </div>
    </>
  );
 }
-function Tabs({ setTab, tab, className }) {
+function Tabs({ setTab, tab }) {
  return (
-    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
+    <div className={cx('flex select-none max-w-full overflow-auto pb-2')}>
      {Object.keys(tabNames).map((key) => {
        const val = tabNames[key];
        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
@@ -159,28 +157,15 @@ function Tabs({ setTab, tab, className }) {
  );
 }

-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 }) {
+function PinButton({ pinned, setPinned }) {
  return (
    <button
-      onClick={() => setPanelPinned(!pinned)}
+      onClick={() => setPinned(!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"
+      aria-label="Pin Settings Menu"
    >
      <svg
        stroke="currentColor"
@@ -197,16 +182,6 @@ function PinButton({ pinned }) {
  );
 }

-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>
-  );
+function useLogger(onTrigger) {
+  useEvent(logger.key, onTrigger);
 }
@@ -58,8 +58,8 @@ export function Reference() {
        <div className="prose dark:prose-invert min-w-full px-1 ">
          <h2>API Reference</h2>
          <p>
-            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!
+            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!
          </p>
          {visibleFunctions.map((entry, i) => (
            <section key={i}>
@@ -94,8 +94,6 @@ export function SettingsTab({ started }) {
    isAutoCompletionEnabled,
    isTooltipEnabled,
    isFlashEnabled,
-    isButtonRowHidden,
-    isCSSAnimationDisabled,
    isSyncEnabled,
    isLineWrappingEnabled,
    fontSize,
@@ -103,7 +101,6 @@ export function SettingsTab({ started }) {
    panelPosition,
    audioDeviceName,
    audioEngineTarget,
-    togglePanelTrigger,
  } = useSettings();
  const shouldAlwaysSync = isUdels();
  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -173,32 +170,7 @@ export function SettingsTab({ started }) {
          items={{ bottom: 'Bottom', right: 'Right' }}
        ></ButtonGroup>
      </FormItem>
-      <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">
+      <FormItem label="Code Settings">
        <Checkbox
          label="Enable bracket matching"
          onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}
@@ -258,16 +230,6 @@ 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">
@@ -52,9 +52,9 @@ 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 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"
+        className="w-full p-1 bg-background rounded-md pb-2"
        placeholder="Search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
@@ -6,7 +6,9 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 export function WelcomeTab({ context }) {
  return (
    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 ">
-      <h3>꩜ welcome</h3>
+      <h3>
+        <span className={cx('animate-spin inline-block select-none')}>🌀</span> 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:
@@ -28,7 +30,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">
@@ -78,10 +78,10 @@ export function loadModules() {
    import('@strudel/codemirror'),
    import('@strudel/hydra'),
    import('@strudel/serial'),
+    import('@strudel/shader'),
    import('@strudel/soundfonts'),
    import('@strudel/csound'),
    import('@strudel/tidal'),
-    import('@strudel/mqtt'),
  ];
  if (isTauri()) {
    modules = modules.concat([
@@ -30,16 +30,11 @@ 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
+  panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom',
+  isPanelPinned: true,
  userPatterns: '{}',
  audioDeviceName: defaultAudioDeviceName,
  audioEngineTarget: audioEngineTargets.webaudio,
-  isButtonRowHidden: false,
-  isCSSAnimationDisabled: false,
 };

 let search = null;
@@ -66,29 +61,25 @@ export function useSettings() {
  return {
    ...state,
    isZen: parseBoolean(state.isZen),
+    isPanelPinned: parseBoolean(state.isPanelPinned),
    isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
    isBracketClosingEnabled: parseBoolean(state.isBracketClosingEnabled),
    isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
    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 setPanelPinned = (isPinned) => settingsMap.setKey('isPanelPinned', isPinned);

 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
Author	SHA1	Message	Date
Tristan de Cacqueray	fc335c9930	Remove PicoGL dependency	2024-12-22 08:04:07 -05:00
Tristan de Cacqueray	0d67176a98	Improve the API when using a frame modifier	2024-10-27 11:46:49 -04:00
Tristan de Cacqueray	77bbb9626a	Remove uniform pattern function and expose the shader instance	2024-10-27 10:17:41 -04:00
Tristan de Cacqueray	65cc317382	Automatically set onTrigger when the hap value is not a number This change makes the following demo works: `s("bd").uniform("rot")`	2024-10-21 10:20:50 -04:00
Tristan de Cacqueray	36d4d89052	Fix lint error	2024-10-21 09:23:31 -04:00
Tristan de Cacqueray	f8a241401c	Add uniform pattern function doc	2024-10-20 22:06:41 -04:00
Tristan de Cacqueray	1baa6da370	Update uniform method to take an option object	2024-10-20 19:55:12 -04:00
Tristan de Cacqueray	9e0b840afd	Fix default uniformTrigger indexs	2024-10-20 15:13:49 -04:00
Felix Roos	e6fbef95f2	Merge branch 'main' into shader	2024-10-20 21:07:26 +02:00
Tristan de Cacqueray	cad11e1e48	Update uniform value and add tests	2024-10-20 13:46:33 -04:00
Tristan de Cacqueray	b85a5a9179	Use pat.withValue and add uniformTrigger	2024-10-20 09:58:10 -04:00
Tristan de Cacqueray	9b4675f1ce	Update the shader todos	2024-10-19 09:24:01 -04:00
Felix Roos	67c0ebaf54	snapshot	2024-10-19 15:17:09 +02:00
Felix Roos	8d1180f87a	fix: test runtime for uniform function	2024-10-19 15:15:25 +02:00
Felix Roos	fcd550b5bd	codeformat	2024-10-19 15:13:21 +02:00
Felix Roos	d3e624f673	Merge branch 'shader' of https://github.com/TristanCacqueray/strudel into shader	2024-10-19 15:12:02 +02:00
Tristan de Cacqueray	b0149f8190	Refactor the uniform function and add documentation	2024-10-19 09:08:33 -04:00
Felix Roos	bf3a095852	codeformat	2024-10-19 15:07:48 +02:00
Tristan de Cacqueray	5c983ceb8f	Extract the uniform helper to its own module	2024-10-19 06:43:50 -04:00
Tristan de Cacqueray	735d531cce	Move shader module into it's own package	2024-10-19 06:29:19 -04:00
Felix Roos	13168bb9bc	codeformat	2024-10-19 01:15:26 +02:00
Felix Roos	46b4aff0ef	Merge remote-tracking branch 'origin/main' into shader	2024-10-19 01:14:06 +02:00
Tristan de Cacqueray	1b8998ac14	Fix shader reload The attribute for the draw call is called drawFrame, not draw.	2024-10-18 18:15:15 -04:00
Tristan de Cacqueray	f0ddb2d595	Add initial shader module This change adds the `loadShader` and `shader` function, to be used like this: ```strudel await loadShader` // The modulation targets uniform float iColor; void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord / iResolution.xy; vec3 col = 0.5 + 0.5*cos(iColor+uv.xyx+vec3(0,2,4)); fragColor = vec4(col, 0); } ` $: s("bd").shader({uniform: 'iColor'}) ```	2024-10-18 11:40:09 -04:00