Merge branch 'main' into show12

Resolves conflicts in packages/superdough/sampler.mjs (merged imports and
getSampleInfo/getDuration additions from main) and website/src/settings.mjs
(non-overlapping additions auto-merged).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01559pA7fMAMyY9H91PaewXz

packages/codemirror/codemirror.mjs

@@ -11,6 +11,7 @@ import {
   keymap,
   lineNumbers,
 } from '@codemirror/view';
+import {repeatCharKeymap} from './repeatcharacter.mjs';
 import { persistentAtom } from '@nanostores/persistent';
 import { registerControl, repl } from '@strudel/core';
 import { cleanupDraw, Drawer } from '@strudel/draw';
@@ -24,7 +25,12 @@ import { sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { activateTheme, initTheme, theme } from './themes.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
 import { updateWidgets, widgetPlugin } from './widget.mjs';
-import { jumpToCharacter } from './labelJump.mjs';
+import {
+  deleteAllInlineBeforeCharacter,
+  InsertCharBeforeChar,
+  jumpToCharacter,
+  jumpToNextCharacter,
+} from './labelJump.mjs';
 
 export { toggleBlockComment, toggleBlockCommentByLine, toggleComment, toggleLineComment } from '@codemirror/commands';
 
@@ -44,9 +50,9 @@ export const extensions = {
   isMultiCursorEnabled: (on) =>
     on
       ? [
-          EditorState.allowMultipleSelections.of(true),
-          EditorView.clickAddsSelectionRange.of((ev) => ev.metaKey || ev.ctrlKey),
-        ]
+        EditorState.allowMultipleSelections.of(true),
+        EditorView.clickAddsSelectionRange.of((ev) => ev.metaKey || ev.ctrlKey),
+      ]
       : [],
 };
 export const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
@@ -74,6 +80,10 @@ export const codemirrorSettings = persistentAtom('codemirror-settings', defaultS
   decode: JSON.parse,
 });
 
+const ANON_LABEL = '$';
+const SOLO_LABEL = 'S';
+const MUTE_LABEL = '_';
+
 // https://codemirror.net/docs/guide/
 export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root, mondo }) {
   const settings = codemirrorSettings.get();
@@ -101,6 +111,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       syntaxHighlighting(defaultHighlightStyle),
       EditorView.updateListener.of((v) => onChange(v)),
       drawSelection({ cursorBlinkRate: 0 }),
+      repeatCharKeymap,
       Prec.highest(
         keymap.of([
           {
@@ -122,12 +133,74 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
           },
           {
             key: 'Alt-w',
-            run: (view) => jumpToCharacter(view, '$', 1),
+            run: (view) => jumpToNextCharacter(view, ANON_LABEL, 1),
           },
           {
             key: 'Alt-q',
-            run: (view) => jumpToCharacter(view, '$', -1),
+            run: (view) => {
+              return jumpToNextCharacter(view, ANON_LABEL, -1);
+            },
           },
+          // clear all muted
+          {
+            key: `Alt-Ctrl-0`,
+            run: (view) => {
+              return deleteAllInlineBeforeCharacter(view, MUTE_LABEL + ANON_LABEL);
+            },
+          },
+          // clear all solod
+          {
+            key: `Alt-Shift-0`,
+            run: (view) => {
+              return deleteAllInlineBeforeCharacter(view, SOLO_LABEL + ANON_LABEL);
+            },
+          },
+          // clear all solo and mute
+          {
+            key: `Ctrl-Shift-0`,
+            run: (view) => {
+              return deleteAllInlineBeforeCharacter(view, ANON_LABEL);
+            },
+          },
+          ...Array.from({ length: 9 }).map((_, i) => {
+            let num = i + 1;
+            return {
+              key: `Alt-${num}`,
+              run: (view) => {
+                return jumpToCharacter(view, ANON_LABEL, i);
+              },
+            };
+          }),
+          // handle solo toggles 1-9
+          ...Array.from({ length: 9 }).map((_, i) => {
+            let num = i + 1;
+            return {
+              key: `Alt-Shift-${num}`,
+              run: (view) => {
+                return InsertCharBeforeChar(view, ANON_LABEL, SOLO_LABEL, i);
+              },
+            };
+          }),
+          // handle mute toggles 1-9
+          ...Array.from({ length: 9 }).map((_, i) => {
+            let num = i + 1;
+            return {
+              key: `Alt-Ctrl-${num}`,
+              run: (view) => {
+                return InsertCharBeforeChar(view, ANON_LABEL, MUTE_LABEL, i);
+              },
+            };
+          }),
+          // Handle clearing mutes and solos 1-9
+          ...Array.from({ length: 9 }).map((_, i) => {
+            let num = i + 1;
+            return {
+              key: `Ctrl-Shift-${num}`,
+              run: (view) => {
+                return InsertCharBeforeChar(view, ANON_LABEL, '', i);
+              },
+            };
+          }),
           /* {
             key: 'Ctrl-Shift-.',
             run: () => (onPanic ? onPanic() : onStop?.()),

packages/codemirror/labelJump.mjs

@@ -1,18 +1,54 @@
 import { EditorSelection } from '@codemirror/state';
 import { SearchCursor } from '@codemirror/search';
+import { EditorView } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
 
-export function jumpToCharacter(view, character, direction = 1) {
+/**
+ * gets all of the positions of a character in a document, excluding commented out lines
+ * @param { EditorState} state 
+ * @param {String} character 
+ * @returns {number[]}
+ */
+function getCharacterPositions(state, character) {
+  const cursor = new SearchCursor(state.doc, character);
+ 
+  const characterPositions = [];
+  while (!cursor.next().done) {
+
+    const linestartpos = state.doc.lineAt(cursor.value.to).from
+    if (!isLineCommentedOut(state, linestartpos)) {
+
+      characterPositions.push(cursor.value.to);
+    }
+  }
+  return characterPositions;
+}
+
+function isLineCommentedOut(state, pos) {
+
+  const line = state.doc.lineAt(pos);
+  // remove white space
+  pos = line.from + line.text.search(/\S/)
+
+  const tree = syntaxTree(state);
+  const node = tree.resolveInner(pos, 1)
+  return node.name.includes("Comment")
+}
+
+/**
+ * jump to the next character in a document
+ * @param {EditorView} view 
+ * @param {String} character 
+ * @param {number} direction 0 or 1
+ * @returns {boolean}
+ */
+export function jumpToNextCharacter(view, character, direction = 1) {
   const { state, dispatch } = view;
   const pos = state.selection.main.head;
-  const cursor = new SearchCursor(state.doc, character);
-
-  let characterPositions = [];
   let jumpPos;
-  while (!cursor.next().done) {
-    characterPositions.push(cursor.value.to);
-  }
+  const characterPositions = getCharacterPositions(state, character);
   if (!characterPositions.length) {
-    return false;
+    return true;
   }
   if (direction > 0) {
     jumpPos = characterPositions.find((x) => x > pos + 1) ?? characterPositions.at(0); // Loop back around for convenience
@@ -21,11 +57,97 @@ export function jumpToCharacter(view, character, direction = 1) {
   }
 
   if (jumpPos == null) {
-    return false;
+    return true;
   }
+  const selection = EditorSelection.cursor(jumpPos - 1);
   dispatch({
-    selection: EditorSelection.cursor(jumpPos - 1),
-    scrollIntoView: true,
+    selection,
+    effects: EditorView.scrollIntoView(
+      selection.head,
+      { y: "start" }
+    )
   });
   return true;
 }
+/**
+ * 
+ * @param {EditorView} view 
+ * @param {String} character 
+ * @param {number} index the instance of the character  
+ * @returns {true}
+ */
+export function jumpToCharacter(view, character, index) {
+  const { state, dispatch } = view;
+  const characterPositions = getCharacterPositions(state, character);
+  const pos = characterPositions.at(index) ?? characterPositions.at(-1);
+  if (pos == null) {
+    return true;
+  }
+
+  const selection = EditorSelection.cursor(pos - 1);
+  dispatch({
+    selection,
+    effects: EditorView.scrollIntoView(
+      selection.head,
+      { y: "start" }
+    )
+  });
+  return true;
+}
+/**
+ * 
+ * @param {EditorView} view 
+ * @param {String} character 
+ * @returns {true}
+ */
+export function deleteAllInlineBeforeCharacter(view, character) {
+  const { state, dispatch } = view;
+  const characterPositions = getCharacterPositions(state, character);
+
+  const changes = [];
+  characterPositions.forEach((pos) => {
+    const line = state.doc.lineAt(pos);
+    if (state.doc.sliceString(line.from, line.from + 2) === COMMENT_STRING) {
+      return;
+    }
+    changes.push({
+      from: line.from,
+      to: pos - 1,
+      insert: '',
+    });
+  });
+  dispatch({ changes });
+  return true;
+}
+
+/**
+ * 
+ * @param {EditorView} view 
+ * @param {String} character 
+ * @param {String} character2 
+ * @param {number} index 
+ * @returns {true}
+ */
+export function InsertCharBeforeChar(view, character, character2, index) {
+  const { state, dispatch } = view;
+
+  const changes = [];
+  const characterPositions = getCharacterPositions(state, character);
+  const labelpos = characterPositions.at(index) ?? characterPositions.at(-1);
+  const line = state.doc.lineAt(labelpos);
+
+  //delete preceeding characters
+  changes.push({
+    from: line.from,
+    to: labelpos - 1,
+    insert: '',
+  });
+
+  changes.push({
+    insert: character2,
+    from: line.from,
+  });
+
+  dispatch({ changes });
+  return true;
+}

packages/codemirror/repeatcharacter.mjs

@@ -0,0 +1,55 @@
+import { Compartment } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+
+const repeatMode = new Compartment();
+
+function repeatPreviousChar(times) {
+  return ({ state, dispatch }) => {
+    const { from, empty } = state.selection.main;
+    if (!empty || from === 0) return false;
+
+    const prevChar = state.doc.sliceString(from - 1, from);
+    const text = Array(times).fill(prevChar).join(" ");
+
+    dispatch(state.update({
+      changes: {
+        from,
+        insert: " " + text
+      }
+    }));
+
+    return true;
+  };
+}
+
+function exitRepeatMode(view) {
+  view.dispatch({
+    effects: repeatMode.reconfigure([])
+  });
+}
+
+const digitBindings = Array.from({ length: 9 }, (_, i) => ({
+  key: String(i + 1),
+  run(view) {
+    repeatPreviousChar(i + 1)(view);
+    exitRepeatMode(view);
+    return true;
+  }
+}));
+
+export const repeatCharKeymap = [
+    
+  repeatMode.of([]),
+
+  keymap.of([
+    {
+      key: "Alt-r",
+      run(view) {
+        view.dispatch({
+          effects: repeatMode.reconfigure(keymap.of(digitBindings))
+        });
+        return true;
+      }
+    }
+  ])
+];

packages/core/cyclist.mjs

@@ -28,34 +28,31 @@ export class Cyclist {
     this.started = false;
     this.beforeStart = beforeStart;
     this.cps = 0.5;
-    this.checkpoint = {
-      // new checkpoints are created when there's a change in cps
-      cycles: 0, // number of cycles when cps was changed
-      seconds: 0, // clock phase when cps was changed
-    };
-    this.num_ticks_since_checkpoint = 0;
+    this.num_ticks_since_cps_change = 0;
     this.lastTick = 0; // absolute time when last tick (clock callback) happened
     this.lastBegin = 0; // query begin of last tick
     this.lastEnd = 0; // query end of last tick
     this.getTime = getTime; // get absolute time
+    this.num_cycles_at_cps_change = 0;
+    this.seconds_at_cps_change; // clock phase when cps was changed
     this.onToggle = onToggle;
     this.latency = latency; // fixed trigger time offset
     this.clock = createClock(
       getTime,
       // called slightly before each cycle
       (phase, duration, _, t) => {
-        if (this.num_ticks_since_checkpoint === 0) {
-          this.checkpoint = {
-            cycles: this.lastEnd,
-            seconds: phase,
-          };
+        if (this.num_ticks_since_cps_change === 0) {
+          this.num_cycles_at_cps_change = this.lastEnd;
+          this.seconds_at_cps_change = phase;
         }
-        this.num_ticks_since_checkpoint++;
+        this.num_ticks_since_cps_change++;
+        const seconds_since_cps_change = this.num_ticks_since_cps_change * duration;
+        const num_cycles_since_cps_change = seconds_since_cps_change * this.cps;
 
         try {
-          var begin = this.lastEnd;
+          const begin = this.lastEnd;
           this.lastBegin = begin;
-          var end = this.checkpoint.cycles + this.num_ticks_since_checkpoint * duration * this.cps;
+          const end = this.num_cycles_at_cps_change + num_cycles_since_cps_change;
           this.lastEnd = end;
           this.lastTick = phase;
 
@@ -65,79 +62,20 @@ export class Cyclist {
             return;
           }
 
-          const tickEndTime = phase + duration;
+          // query the pattern for events
+          const haps = this.pattern.queryArc(begin, end, { _cps: this.cps, cyclist: 'cyclist' });
 
-          var cpsChanged = false;
-          do {
-            cpsChanged = false;
-
-            // query the pattern for events
-            const haps = this.pattern
-              .queryArc(begin, end, { _cps: this.cps, cyclist: 'cyclist' })
-              .filter((hap) => hap.hasOnset())
-              // Sort the haps based on their onset, so cps changes within the
-              // tick duration happen in the correct order.
-              .sort((a, b) => {
-                const aBegin = a.whole.begin;
-                const bBegin = b.whole.begin;
-                // If haps happen at the same time, trigger the haps that cause
-                // cps changes first, so the durations of the simultaneous haps
-                // are adjusted accordingly.
-                if (aBegin.eq(bBegin)) {
-                  if (a.value.cps !== undefined) {
-                    return b.value.cps !== undefined ? 0 : -1;
-                  }
-                  if (b.value.cps !== undefined) {
-                    return 1;
-                  }
-                  return 0;
-                }
-                return aBegin.sub(bBegin);
-              });
-
-            haps.forEach((hap) => {
-              const targetTime = (hap.whole.begin - this.checkpoint.cycles) / this.cps + this.checkpoint.seconds;
-              if (tickEndTime < targetTime) {
-                // If the targetTime exceeds the tickEndTime, this means
-                // the cps has slowed down, and the latter haps from the query
-                // no longer fall within the window of the current tick.
-                // They'll be scheduled during the next tick.
-                return;
-              }
-              onSchedule?.(hap, targetTime + this.latency, hap.value.cps ?? this.cps);
+          haps.forEach((hap) => {
+            if (hap.hasOnset()) {
+              const targetTime =
+                (hap.whole.begin - this.num_cycles_at_cps_change) / this.cps + this.seconds_at_cps_change + latency;
+              onSchedule?.(hap, targetTime, this.cps);
               if (hap.value.cps !== undefined && this.cps != hap.value.cps) {
-                cpsChanged = true;
                 this.cps = hap.value.cps;
-                this.num_ticks_since_checkpoint = 0;
-                this.checkpoint = {
-                  cycles: hap.whole.begin,
-                  seconds: targetTime,
-                };
-              }
-            });
-
-            // If there are any haps in the query that trigger changes to the
-            // cps that result in the pattern speeding up, the current cycle end
-            // may not capture all the haps that need to be scheduled.
-            // If this is the case, we repeat the query + scheduling with a
-            // newly calculated end time.
-            // This process can repeat multiple times until no additional
-            // changes to the cps are triggered.
-            // In practice, this doesn't happen more than once during a tick.
-            if (cpsChanged) {
-              begin = end;
-              const remainingSecondsSinceCheckpoint = tickEndTime - this.checkpoint.seconds;
-              const remainingCycles = remainingSecondsSinceCheckpoint * this.cps;
-              end = this.checkpoint.cycles + remainingCycles;
-              this.lastEnd = end;
-              if (end < begin) {
-                // If the new end is before the old end this means the track
-                // slowed down, so we don't need to schedule additional haps.
-                // Otherwise, schedule the remaining events.
-                break;
+                this.num_ticks_since_cps_change = 0;
               }
             }
-          } while (cpsChanged);
+          });
         } catch (e) {
           errorLogger(e);
           onError?.(e);
@@ -163,11 +101,8 @@ export class Cyclist {
   }
   async start() {
     await this.beforeStart?.();
-    this.checkpoint = {
-      cycles: 0,
-      seconds: 0,
-    };
-    this.num_ticks_since_checkpoint = 0;
+    this.num_ticks_since_cps_change = 0;
+    this.num_cycles_at_cps_change = 0;
     if (!this.pattern) {
       throw new Error('Scheduler: no pattern set! call .setPattern first.');
     }
@@ -197,7 +132,7 @@ export class Cyclist {
       return;
     }
     this.cps = cps;
-    this.num_ticks_since_checkpoint = 0;
+    this.num_ticks_since_cps_change = 0;
   }
   log(begin, end, haps) {
     const onsets = haps.filter((h) => h.hasOnset());

packages/core/signal.mjs

@@ -420,7 +420,7 @@ export const binaryNL = (n, nBits = 16) => {
  *   .partials(randL(8))
  */
 export const randL = (n) => {
-  return signal((t, controls) => (nVal) => getRandsAtTime(t, nVal, controls.randSeed).map(Math.abs)).appLeft(reify(n));
+  return signal((t) => (nVal) => getRandsAtTime(t, nVal).map(Math.abs)).appLeft(reify(n));
 };
 
 export const randrun = (n) => {
@@ -1143,26 +1143,3 @@ export const perx = new Pattern(function (state) {
   const n = Fraction(1).div(state.span.duration);
   return [new Hap(undefined, state.span, Math.log(n) / Math.log(2) + 1)];
 });
-
-/**
- * A signal that goes from `0` to `1` over one cycle, and then stays at `1` forever.
- * Mainly useful in combination with other functions that reset the cycle. See also
- * `close`.
- * @tags temporal
- * @example
- * sound("bd sd [- bd] sd".fast(2))
- *   .lpf(open.slow(4).range(300,3000)) // close envelope over 4 cycles
- *   .restart("x/4") // restart every 4 cycles
- */
-export const open = signal((t) => t.min(1));
-
-/**
- * The same as `open`, but goes from `1` to `0` over one cycle, and then
- * stays on `0` forever.
- * @tags temporal
- * @example
- * sound("bd sd [- bd] sd".fast(2))
- *   .lpf(close.slow(4).range(300,3000)) // close envelope over 4 cycles
- *   .restart("x/4") // restart every 4 cycles
- */
-export const close = signal((t) => Fraction(1).sub(t).max(0));

packages/superdough/sampler.mjs

@@ -1,4 +1,4 @@
-import { getBaseURL, getCommonSampleInfo } from './util.mjs';
+import { BASE_MIDI_NOTE, getBaseURL, getCommonSampleInfo, noteToFreq, noteToMidi } from './util.mjs';
 import { registerSound, registerWaveTable, soundMap } from './index.mjs';
 import { getAudioContext } from './audioContext.mjs';
 import {
@@ -14,6 +14,13 @@ import { logger } from './logger.mjs';
 const bufferCache = {}; // string: Promise<ArrayBuffer>
 const loadCache = {}; // string: Promise<ArrayBuffer>
 
+/**
+ *
+ * @typedef {Object} SampleMetaData
+ * @property {string} url
+ * @property {midi} number
+ */
+
 export const getCachedBuffer = (url) => bufferCache[url];
 
 function humanFileSize(bytes, si) {
@@ -56,8 +63,9 @@ export const getDur = getDuration;
 
 export function getSampleInfo(hapValue, bank) {
   const { speed = 1.0 } = hapValue;
-  const { transpose, url, index, midi, label } = getCommonSampleInfo(hapValue, bank);
-  let playbackRate = Math.abs(speed) * Math.pow(2, transpose / 12);
+  const { transpose, url, index, midi, label, baseFrequency } = getCommonSampleInfo(hapValue, bank);
+
+  const playbackRate = Math.abs(speed) * Math.pow(2, transpose / 12);
   return { transpose, url, index, midi, label, playbackRate };
 }
 
@@ -180,7 +188,12 @@ export const processSampleMap = (sampleMap, fn, baseUrl = sampleMap._base || '')
     if (baseUrl.startsWith('github:')) {
       baseUrl = githubPath(baseUrl, '');
     }
-    const fullUrl = (v) => baseUrl + v;
+    /**
+     *
+     * @param {string} v
+     * @returns {SampleMetaData}
+     */
+    const fullUrl = (v) => ({ url: baseUrl + v, midi: extractMidiNoteFromString(v) });
     if (Array.isArray(value)) {
       //return [key, value.map(replaceUrl)];
       value = value.map(fullUrl);
@@ -391,3 +404,16 @@ export function registerSampleSource(key, bank, params) {
     registerSample(key, bank, params);
   }
 }
+
+export function extractMidiNoteFromString(str) {
+  const regex = /_([a-gA-G])([#b])?([1-9])?\b/;
+  const match = str.match(regex);
+  if (match == null) {
+    return BASE_MIDI_NOTE;
+  }
+  const base = match[1].toUpperCase();
+  const accidental = match[2] ?? '';
+  const octave_str = match[3] ?? '';
+  const parsedVal = base + accidental + octave_str;
+  return noteToMidi(parsedVal);
+}

packages/superdough/util.mjs

@@ -19,7 +19,12 @@ const accs = { '#': 1, b: -1, s: 1, f: -1 };
 export const getAccidentalsOffset = (accidentals) => {
   return accidentals?.split('').reduce((o, char) => o + accs[char], 0) || 0;
 };
-
+/**
+ *
+ * @param {string} note
+ * @param {number} defaultOctave
+ * @returns {number}
+ */
 export const noteToMidi = (note, defaultOctave = 3) => {
   const [pc, acc, oct = defaultOctave] = tokenizeNote(note);
   if (!pc) {
@@ -29,6 +34,11 @@ export const noteToMidi = (note, defaultOctave = 3) => {
   const offset = getAccidentalsOffset(acc);
   return (Number(oct) + 1) * 12 + chroma + offset;
 };
+/**
+ *
+ * @param {number} n
+ * @returns {number}
+ */
 export const midiToFreq = (n) => {
   return Math.pow(2, (n - 69) / 12) * 440;
 };
@@ -38,7 +48,17 @@ export const freqToMidi = (freq) => {
   return (12 * Math.log(freq / 440)) / Math.LN2 + 69;
 };
 
-export const valueToMidi = (value, fallbackValue) => {
+/**
+ *
+ * @param {string} note
+ * @param {number} defaultOctave
+ * @returns {number}
+ */
+
+export const noteToFreq = (note, defaultOctave = 3) => {
+  return midiToFreq(noteToMidi(note, defaultOctave));
+};
+function __valueToMidi(value) {
   if (typeof value !== 'object') {
     throw new Error('valueToMidi: expected object value');
   }
@@ -52,10 +72,15 @@ export const valueToMidi = (value, fallbackValue) => {
   if (typeof note === 'number') {
     return note;
   }
-  if (!fallbackValue) {
+  return;
+}
+
+export const valueToMidi = (value, fallbackValue) => {
+  const parsedValue = __valueToMidi(value) ?? fallbackValue;
+  if (parsedValue == null) {
     throw new Error('valueToMidi: expected freq or note to be set');
   }
-  return fallbackValue;
+  return parsedValue;
 };
 
 export function nanFallback(value, fallback = 0, silent) {
@@ -84,15 +109,18 @@ export function secondsToCycle(t, cps) {
 // deduces relevant info for sample loading from hap.value and sample definition
 // it encapsulates the core sampler logic into a pure and synchronous function
 // hapValue: Hap.value, bank: sample bank definition for sound "s" (values in strudel.json format)
+export const BASE_MIDI_NOTE = 36;
+
 export function getCommonSampleInfo(hapValue, bank) {
   const { s, n = 0 } = hapValue;
-  let midi = valueToMidi(hapValue, 36);
-  let transpose = midi - 36; // C3 is middle C;
-  let url;
+  const maybeMidiNote = __valueToMidi(hapValue);
+  const midi = maybeMidiNote ?? BASE_MIDI_NOTE;
+  let transpose = midi - BASE_MIDI_NOTE; // C3 is middle C;
   let index = 0;
+  let samplemeta;
   if (Array.isArray(bank)) {
     index = getSoundIndex(n, bank.length);
-    url = bank[index];
+    samplemeta = bank[index];
   } else {
     const midiDiff = (noteA) => noteToMidi(noteA) - midi;
     // object format will expect keys as notes
@@ -104,10 +132,14 @@ export function getCommonSampleInfo(hapValue, bank) {
       );
     transpose = -midiDiff(closest); // semitones to repitch
     index = getSoundIndex(n, bank[closest].length);
-    url = bank[closest][index];
+    samplemeta = bank[closest][index];
   }
   const label = `${s}:${index}`;
-  return { transpose, url, index, midi, label };
+  if (maybeMidiNote != null) {
+    transpose = transpose + (BASE_MIDI_NOTE - samplemeta.midi);
+  }
+
+  return { transpose, index, midi, label, url: samplemeta.url };
 }
 
 /** Selects entries from `source` and renames them via `map`

packages/transpiler/plugin-widgets.mjs

@@ -94,6 +94,9 @@ export function getWidgetID(widgetConfig) {
 
 function widgetWithLocation(node, widgetConfig) {
   const id = getWidgetID(widgetConfig);
+  // Store the unique ID back into the config so it's available for widget management
+  // This is critical for block-based evaluation to match existing widgets with new ones
+  widgetConfig.id = id;
   // add loc as identifier to first argument
   // the sliderWithID function is assumed to be sliderWithID(id, value, min?, max?)
   node.arguments.unshift({

test/__snapshots__/examples.test.mjs.snap

@@ -2440,43 +2440,6 @@ exports[`runs examples > example "clip" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "close" example index 0 1`] = `
-[
-  "[ 0/1 → 1/8 | s:bd cutoff:3000 ]",
-  "[ 1/8 → 1/4 | s:sd cutoff:2915.625 ]",
-  "[ 5/16 → 3/8 | s:bd cutoff:2789.0625 ]",
-  "[ 3/8 → 1/2 | s:sd cutoff:2746.875 ]",
-  "[ 1/2 → 5/8 | s:bd cutoff:2662.5 ]",
-  "[ 5/8 → 3/4 | s:sd cutoff:2578.125 ]",
-  "[ 13/16 → 7/8 | s:bd cutoff:2451.5625 ]",
-  "[ 7/8 → 1/1 | s:sd cutoff:2409.375 ]",
-  "[ 1/1 → 9/8 | s:bd cutoff:2325 ]",
-  "[ 9/8 → 5/4 | s:sd cutoff:2240.625 ]",
-  "[ 21/16 → 11/8 | s:bd cutoff:2114.0625 ]",
-  "[ 11/8 → 3/2 | s:sd cutoff:2071.875 ]",
-  "[ 3/2 → 13/8 | s:bd cutoff:1987.5 ]",
-  "[ 13/8 → 7/4 | s:sd cutoff:1903.125 ]",
-  "[ 29/16 → 15/8 | s:bd cutoff:1776.5625 ]",
-  "[ 15/8 → 2/1 | s:sd cutoff:1734.375 ]",
-  "[ 2/1 → 17/8 | s:bd cutoff:1650 ]",
-  "[ 17/8 → 9/4 | s:sd cutoff:1565.625 ]",
-  "[ 37/16 → 19/8 | s:bd cutoff:1439.0625 ]",
-  "[ 19/8 → 5/2 | s:sd cutoff:1396.875 ]",
-  "[ 5/2 → 21/8 | s:bd cutoff:1312.5 ]",
-  "[ 21/8 → 11/4 | s:sd cutoff:1228.125 ]",
-  "[ 45/16 → 23/8 | s:bd cutoff:1101.5625 ]",
-  "[ 23/8 → 3/1 | s:sd cutoff:1059.375 ]",
-  "[ 3/1 → 25/8 | s:bd cutoff:975 ]",
-  "[ 25/8 → 13/4 | s:sd cutoff:890.625 ]",
-  "[ 53/16 → 27/8 | s:bd cutoff:764.0625 ]",
-  "[ 27/8 → 7/2 | s:sd cutoff:721.875 ]",
-  "[ 7/2 → 29/8 | s:bd cutoff:637.5 ]",
-  "[ 29/8 → 15/4 | s:sd cutoff:553.125 ]",
-  "[ 61/16 → 31/8 | s:bd cutoff:426.5625 ]",
-  "[ 31/8 → 4/1 | s:sd cutoff:384.375 ]",
-]
-`;
-
 exports[`runs examples > example "coarse" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | s:hh coarse:1 ]",
@@ -8764,43 +8727,6 @@ exports[`runs examples > example "onTriggerTime" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "open" example index 0 1`] = `
-[
-  "[ 0/1 → 1/8 | s:bd cutoff:300 ]",
-  "[ 1/8 → 1/4 | s:sd cutoff:384.375 ]",
-  "[ 5/16 → 3/8 | s:bd cutoff:510.9375 ]",
-  "[ 3/8 → 1/2 | s:sd cutoff:553.125 ]",
-  "[ 1/2 → 5/8 | s:bd cutoff:637.5 ]",
-  "[ 5/8 → 3/4 | s:sd cutoff:721.875 ]",
-  "[ 13/16 → 7/8 | s:bd cutoff:848.4375 ]",
-  "[ 7/8 → 1/1 | s:sd cutoff:890.625 ]",
-  "[ 1/1 → 9/8 | s:bd cutoff:975 ]",
-  "[ 9/8 → 5/4 | s:sd cutoff:1059.375 ]",
-  "[ 21/16 → 11/8 | s:bd cutoff:1185.9375 ]",
-  "[ 11/8 → 3/2 | s:sd cutoff:1228.125 ]",
-  "[ 3/2 → 13/8 | s:bd cutoff:1312.5 ]",
-  "[ 13/8 → 7/4 | s:sd cutoff:1396.875 ]",
-  "[ 29/16 → 15/8 | s:bd cutoff:1523.4375 ]",
-  "[ 15/8 → 2/1 | s:sd cutoff:1565.625 ]",
-  "[ 2/1 → 17/8 | s:bd cutoff:1650 ]",
-  "[ 17/8 → 9/4 | s:sd cutoff:1734.375 ]",
-  "[ 37/16 → 19/8 | s:bd cutoff:1860.9375 ]",
-  "[ 19/8 → 5/2 | s:sd cutoff:1903.125 ]",
-  "[ 5/2 → 21/8 | s:bd cutoff:1987.5 ]",
-  "[ 21/8 → 11/4 | s:sd cutoff:2071.875 ]",
-  "[ 45/16 → 23/8 | s:bd cutoff:2198.4375 ]",
-  "[ 23/8 → 3/1 | s:sd cutoff:2240.625 ]",
-  "[ 3/1 → 25/8 | s:bd cutoff:2325 ]",
-  "[ 25/8 → 13/4 | s:sd cutoff:2409.375 ]",
-  "[ 53/16 → 27/8 | s:bd cutoff:2535.9375 ]",
-  "[ 27/8 → 7/2 | s:sd cutoff:2578.125 ]",
-  "[ 7/2 → 29/8 | s:bd cutoff:2662.5 ]",
-  "[ 29/8 → 15/4 | s:sd cutoff:2746.875 ]",
-  "[ 61/16 → 31/8 | s:bd cutoff:2873.4375 ]",
-  "[ 31/8 → 4/1 | s:sd cutoff:2915.625 ]",
-]
-`;
-
 exports[`runs examples > example "orbit" example index 0 1`] = `
 [
   "[ 0/1 → 1/6 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",

website/astro.config.mjs

@@ -80,7 +80,6 @@ export default defineConfig({
                 /^https:\/\/freesound\.org\/.*/i,
                 /^https:\/\/cdn\.freesound\.org\/.*/i,
                 /^https:\/\/shabda\.ndre\.gr\/.*/i,
-                /^https:\/\/felixroos\.github\.io\/webaudiofontdata\/.*/i,
               ].some((regex) => regex.test(url)),
             handler: 'CacheFirst',
             options: {

website/src/pages/learn/getting-started.mdx

@@ -14,7 +14,7 @@ These pages will introduce you to [Strudel](https://strudel.cc/), a web-based [l
 
 # What is Strudel?
 
-[Strudel](https://strudel.cc/) is a version of [Tidal Cycles](https://tidalcycles.org) written in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), initiated by [Alex McLean](https://slab.org) and [Felix Roos](https://froos.cc/) in 2022, quickly growing into a collective free/open source project with major [contributors and maintainers](https://codeberg.org/uzu/strudel/activity/contributors) including [Jade Rowland](https://www.instagram.com/_switch_angel/) and [Aria](https://www.instagram.com/gglossingg/).
+[Strudel](https://strudel.cc/) is a version of [Tidal Cycles](https://tidalcycles.org) written in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), initiated by [Alex McLean](https://slab.org) and [Felix Roos](https://froos.cc/) in 2022.
 Tidal Cycles, also known as Tidal, is a language for [algorithmic pattern](https://algorithmicpattern.org), and though it is most commonly used for [making music](https://tidalcycles.org/docs/showcase), it can be used for any kind of pattern making activity, including [weaving](https://www.youtube.com/watch?v=TfEmEsusXjU).
 
 Tidal was first implemented as a library written in the [Haskell](https://www.haskell.org/) functional programming language, and by itself it does not make any sound.

website/src/repl/components/panel/PatternsTab.jsx

@@ -9,9 +9,7 @@ import {
   userPattern,
 } from '../../../user_pattern_utils.mjs';
 import { useMemo, useRef } from 'react';
-import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
-import { parseJSON, isUdels } from '../../util.mjs';
 import { useSettings } from '../../../settings.mjs';
 import { ActionButton } from '../button/action-button.jsx';
 import { Pagination } from '../pagination/Pagination.jsx';
@@ -20,8 +18,13 @@ import { useDebounce } from '../usedebounce.jsx';
 import cx from '@src/cx.mjs';
 import { Textbox } from '@src/repl/components/panel/SettingsTab.jsx';
 
+const PATTERN_SORT = {
+  "NEWEST": "most recent",
+  "A-Z": "A-Z",
+}
+
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
-  const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
+  const meta = pattern.meta
 
   let title = meta.title;
   if (title == null) {
@@ -58,6 +61,10 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
   return (
     <div className="p-2">
       {Object.values(patterns)
+        .sort((a, b) => {
+          return (b.meta.title ?? "").localeCompare(a.meta.title ?? "")
+
+        })
         .reverse()
         .map((pattern) => {
           const id = pattern.id;
@@ -93,7 +100,7 @@ export function PatternsTab({ context }) {
     }
     return Object.fromEntries(
       Object.entries(userPatterns).filter(([_key, pattern]) => {
-        const meta = getMetadata(pattern.code);
+        const meta = pattern.meta;
 
         // Search for specific meta keys
         const searchLowercaseTrimmed = search.trim().toLowerCase();

website/src/repl/idbutils.mjs

@@ -1,4 +1,4 @@
-import { registerSampleSource } from '@strudel/webaudio';
+import { extractMidiNoteFromString, registerSampleSource } from '@strudel/webaudio';
 import { isAudioFile } from './files.mjs';
 import { logger } from '@strudel/core';
 
@@ -47,7 +47,7 @@ export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete =
       Promise.all(
         [...soundFiles]
           .sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
-          .map((soundFile, i) => {
+          .map((soundFile) => {
             const title = soundFile.title;
             if (!isAudioFile(title)) {
               return;
@@ -58,25 +58,26 @@ export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete =
               splitRelativePath[splitRelativePath.length - 2] ?? soundFile.id.split(/\W+/)[0] ?? 'user';
             const blob = soundFile.blob;
 
-            return blobToDataUrl(blob).then((soundPath) => {
-              const titlePathMap = sounds.get(parentDirectory) ?? new Map();
+            return blobToDataUrl(blob).then((path) => {
+              const sampleInfoMap = sounds.get(parentDirectory) ?? new Map();
+              const midi = extractMidiNoteFromString(title);
+              /** @type {import('@strudel/webaudio').SampleMetaData} */
+              const samplemetadata = { url: path, midi };
+              sampleInfoMap.set(title, samplemetadata);
 
-              titlePathMap.set(title, soundPath);
-
-              sounds.set(parentDirectory, titlePathMap);
+              sounds.set(parentDirectory, sampleInfoMap);
               return;
             });
           }),
       )
         .then(() => {
-          sounds.forEach((titlePathMap, key) => {
-            const value = Array.from(titlePathMap.keys())
+          sounds.forEach((sampleInfoMap, key) => {
+            const bank = Array.from(sampleInfoMap.keys())
               .sort((a, b) => {
                 return a.localeCompare(b);
               })
-              .map((title) => titlePathMap.get(title));
-
-            registerSampleSource(key, value, { prebake: false });
+              .map((title) => sampleInfoMap.get(title));
+            registerSampleSource(key, bank, { prebake: false });
           });
 
           logger('imported sounds registered!', 'success');

website/src/settings.mjs

@@ -3,6 +3,7 @@ import { useStore } from '@nanostores/react';
 import { register } from '@strudel/core';
 import { isUdels } from './repl/util.mjs';
 import { computed } from 'nanostores';
+import { getMetadata } from './metadata_parser';
 
 export const audioEngineTargets = {
   webaudio: 'webaudio',
@@ -18,6 +19,10 @@ export const soundFilterType = {
   ALL: 'all',
 };
 
+export const PATTERN_SORT = {
+  "NEWEST": "most recent",
+  "A-Z": "A-Z",
+}
 const initialPrebakeScript = `// Prebake script
 //
 // This is code that is loaded before your pattern is run.
@@ -85,6 +90,7 @@ export const $settings = computed(settingsMap, (state) => {
   Object.keys(userPatterns).forEach((key) => {
     const data = userPatterns[key];
     data.id = data.id ?? key;
+    data.meta = getMetadata(data.code)
     userPatterns[key] = data;
   });
   return {