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 { logger, registerControl, repl } from '@strudel/core';
 import { cleanupDraw, cleanupDrawContext, Drawer } from '@strudel/draw';
@@ -20,11 +21,16 @@ import { evalBlock } from './block_utilities.mjs';
 import { flash, isFlashEnabled } from './flash.mjs';
 import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
 import { keybindings } from './keybindings.mjs';
-import { jumpToCharacter } from './labelJump.mjs';
 import { getSliderWidgets, sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { activateTheme, initTheme, theme } from './themes.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
 import { getActiveWidgets, updateWidgets, widgetPlugin } from './widget.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()]));
@@ -75,6 +81,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, strudelMirror }) {
   const settings = codemirrorSettings.get();
@@ -102,6 +112,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([
           {
@@ -138,12 +149,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/midi/midi.mjs

@@ -21,7 +21,7 @@ import {
 } from '@strudel/core';
 import { noteToMidi, getControlName } from '@strudel/core';
 import { Note } from 'webmidi';
-import { getAudioContext } from '@strudel/webaudio';
+import { getAudioContext, getClockBridge } from '@strudel/webaudio';
 import { scheduleAtTime, ensureMinimalOutput } from '../superdough/helpers.mjs';
 import { getMidiDeviceNamesString, getDevice } from './util.mjs';
 import { MidiInput } from './input.mjs';
@@ -177,7 +177,11 @@ const isFirefox = navigator?.userAgent?.includes('Firefox');
 // firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=2062997
 function timedSend(timeMs, fn) {
   if (isFirefox) {
-    const audioTime = getAudioContext().currentTime + (timeMs - performance.now()) / 1000;
+    const audioTime = getClockBridge().getAudioContextTime(timeMs);
+    if (!audioTime) {
+      logger('[midi]: skip event, not ready');
+      return;
+    }
     scheduleAtTime(() => fn(undefined), audioTime);
   } else {
     fn(timeMs);
@@ -281,11 +285,6 @@ function sendNote(note, velocity, duration, device, midichan, timeMs) {
   timedSend(timeMs + duration, (timeMs) => device.sendNoteOff(midiNote, { channels: midichan, time: timeMs }));
 }
 
-// thanks freya https://youtu.be/LSNQuFEDOyQ?si=ukZI2IGgWV_NDZzP&t=2979
-function expDecay(a, b, decay, dt) {
-  return b + (a - b) * Math.exp(-decay * dt);
-}
-
 /**
  * MIDI output: Opens a MIDI output port.
  * @tags external_io
@@ -343,26 +342,16 @@ Pattern.prototype.midi = function (midiport, options = {}) {
 
   ensureMinimalOutput();
 
-  let p; // filtered clock offset
-  let lastTime;
-
   return this.sortHapsByPart().onTrigger((hap, _currentTime, cps, targetTime) => {
     if (!WebMidi.enabled) {
       logger('Midi not enabled');
       return;
     }
-    const { contextTime, performanceTime } = getAudioContext().getOutputTimestamp();
-    if (!contextTime || !performanceTime) {
-      logger('[midi] skip midi event: not ready yet?');
+    const timeMs = getClockBridge().getPerformanceTime(targetTime);
+    if (!timeMs) {
+      logger('[midi] clockbridge not ready');
       return;
     }
-    // time conversion from audio context time (targetTime) to performance time (what midi needs)
-    const offset = performanceTime - contextTime * 1000; // clock offset in ms
-    const dt = performanceTime - (lastTime ?? performanceTime); // delta time since last midi hap
-    const decay = 1 / 10000; // how fast offset changes have an effect
-    p = expDecay(p ?? offset, offset, decay, dt); // smooth clock offset
-    lastTime = performanceTime;
-    const timeMs = targetTime * 1000 + p; // this is now correct in performance time
 
     hap.ensureObjectValue();
 

packages/osc/osc.mjs

@@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { logger, parseNumeral, register, isNote, noteToMidi, ClockCollator } from '@strudel/core';
+import { logger, parseNumeral, register, isNote, noteToMidi } from '@strudel/core';
+import { ensureMinimalOutput, getClockBridge } from '@strudel/webaudio';
 
 let connection; // Promise<OSC>
 function connect() {
@@ -54,13 +55,18 @@ export function parseControlsFromHap(hap, cps) {
   return controls;
 }
 
-const collator = new ClockCollator({});
-
 export async function oscTrigger(hap, currentTime, cps = 1, targetTime) {
   const ws = await connect();
+
+  const timeMs = getClockBridge().getPerformanceTime(targetTime);
+  if (!timeMs) {
+    logger('[osc] clockbridge not ready');
+    return;
+  }
+  const ts = performance.timeOrigin + timeMs;
+
   const controls = parseControlsFromHap(hap, cps);
   const keyvals = Object.entries(controls).flat();
-  const ts = collator.calculateTimestamp(currentTime, targetTime) * 1000;
   const msg = { address: '/dirt/play', args: keyvals, timestamp: ts };
 
   if ('oschost' in hap.value) {
@@ -82,4 +88,7 @@ export async function oscTrigger(hap, currentTime, cps = 1, targetTime) {
  * @memberof Pattern
  * @returns Pattern
  */
-export const osc = register('osc', (pat) => pat.onTrigger(oscTrigger));
+export const osc = register('osc', (pat) => {
+  ensureMinimalOutput();
+  return pat.onTrigger(oscTrigger);
+});

packages/osc/package.json

@@ -38,6 +38,7 @@
   "homepage": "https://codeberg.org/uzu/strudel#readme",
   "dependencies": {
     "@strudel/core": "workspace:*",
+    "@strudel/webaudio": "workspace:*",
     "osc": "^2.4.5",
     "ws": "^8.18.3"
   },

packages/superdough/audioContext.mjs

@@ -8,8 +8,9 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { clearNodePool } from './nodePools.mjs';
+import { ClockBridge } from './clockbridge.mjs';
 
-let audioContext;
+let audioContext, clockBridge;
 
 export const setDefaultAudioContext = () => {
   return setAudioContext(new AudioContext());
@@ -23,6 +24,7 @@ export const setAudioContext = (context) => {
     audioContext.close();
   }
   audioContext = context;
+  clockBridge = new ClockBridge(audioContext);
   return audioContext;
 };
 
@@ -34,6 +36,13 @@ export const getAudioContext = () => {
   return audioContext;
 };
 
+export function getClockBridge() {
+  if (!clockBridge) {
+    getAudioContext(); // creates clockBridge
+  }
+  return clockBridge;
+}
+
 export function getAudioContextCurrentTime() {
   return getAudioContext().currentTime;
 }

packages/superdough/clockbridge.mjs

@@ -0,0 +1,41 @@
+/*
+clockbridge.mjs
+Copyright (C) 2022 Strudel contributors - see <https://codeberg.org/uzu/strudel/src/branch/main/packages/superdough/index.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// thanks freya https://youtu.be/LSNQuFEDOyQ?si=ukZI2IGgWV_NDZzP&t=2979
+export function expDecay(a, b, decay, dt) {
+  return b + (a - b) * Math.exp(-decay * dt);
+}
+
+// translates between audio and performance clock
+export class ClockBridge {
+  p; // smoothed clock offset
+  lastTime;
+  audioContext;
+  constructor(audioContext) {
+    this.audioContext = audioContext;
+  }
+  // delta between audio and performance time in ms
+  getOffset() {
+    const { contextTime, performanceTime } = this.audioContext.getOutputTimestamp();
+    if (!contextTime || !performanceTime) {
+      return;
+    }
+    const offset = performanceTime - contextTime * 1000; // clock offset in ms
+    const dt = performanceTime - (this.lastTime ?? performanceTime); // delta time since last hap
+    const decay = 1 / 10000; // how fast offset changes have an effect
+    this.p = expDecay(this.p ?? offset, offset, decay, dt); // smooth clock offset
+    this.lastTime = performanceTime;
+    return this.p;
+  }
+  getPerformanceTime(audioContextTime) {
+    const offset = this.getOffset();
+    return audioContextTime * 1000 + offset; // this is now correct in performance time (ms)
+  }
+  getAudioContextTime(performanceTime) {
+    const offset = this.getOffset();
+    return (performanceTime - offset) / 1000; // this is now correct in audio context time (seconds)
+  }
+}

packages/superdough/index.mjs

@@ -14,3 +14,4 @@ export * from './modulators.mjs';
 export * from './dspworklet.mjs';
 export * from './audioContext.mjs';
 export * from './wavetable.mjs';
+export * from './clockbridge.mjs';

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) {
@@ -55,8 +62,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 };
 }
 
@@ -179,7 +187,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);
@@ -390,3 +403,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`

pnpm-lock.yaml

@@ -486,6 +486,9 @@ importers:
       '@strudel/core':
         specifier: workspace:*
         version: link:../core
+      '@strudel/webaudio':
+        specifier: workspace:*
+        version: link:../webaudio
       osc:
         specifier: ^2.4.5
         version: 2.4.5

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.
@@ -86,6 +91,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 {