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

.gitignore

@@ -131,6 +131,3 @@ fabric.properties
 samples/*
 !samples/README.md
 .idea/
-
-.vscode
-!settings.json

CONTRIBUTING.md

@@ -2,10 +2,6 @@
 
 Thanks for wanting to contribute!!! There are many ways you can add value to this project
 
-## Humane interaction
-
-Please read [POLICY.md](POLICY.md) for important details of our Code of Conduct, and policy around AI/LLM use.
-
 ## Move to codeberg
 
 Along with many other live coding projects, we have moved from Microsoft's Github platform to Codeberg for ethical reasons. Please don't fork the project back to github.
@@ -38,7 +34,7 @@ Use one of the Communication Channels listed above.
 
 ## Improve the Docs
 
-If you find some weak spots in the [docs](https://strudel.cc/workshop/getting-started/), you can edit each file directly on codeberg. There are "Edit this page" links in the right sidebar that take you to the right place. If you're unfamiliar with codeberg/git, please ask questions.
+If you find some weak spots in the [docs](https://strudel.cc/workshop/getting-started/), you can edit each file directly on codeberg. There are "Edit this page" links in the right sidebar that take you to the right place.
 
 ## Propose a Feature
 
@@ -52,7 +48,11 @@ At the time of writing we have a PR backlog, and generally prioritise bugfixes a
 
 ### AI/LLM policy
 
-Strudel is a project handmade by humans, with thought and nuance. See [Policy](POLICY.md) for our policy on LLM use.
+Strudel is a project handmade by humans, with thought and nuance. 
+
+If you have used LLMs (so called 'AI'), please detail that in the pull request. We are still developing our response to the onslaught of LLM technology, but for practical and legal reasons are currently not accepting wholly LLM-generated code. We are also not accepting PRs that add LLM features to strudel itself.
+
+There are #llm-chat and #llm-share channels on [our discord](https://discord.com/invite/HGEdXmRkzT). Please do not discuss or share LLM-related things outside of those channels.
 
 ## Creating and sharing a new project using strudel
 
@@ -254,4 +254,3 @@ ORDER BY created_at ASC;
 ## Have Fun
 
 Remember to have fun, and that this project is driven by the passion of volunteers!
-

POLICY.md

@@ -1,41 +0,0 @@
-# Code of Conduct
-
-## The Short Version
-
-We are dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), technology choices, and so on. This applies both in person or via online media.
-
-## The Less Short Version
-
-Harassment includes offensive verbal comments related to gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion, technology choices, deliberate intimidation, stalking, following, disruption of performances, inappropriate physical contact, and unwelcome sexual attention.
-
-If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact an admin immediately.
-
-If you report an incident of harassment you can expect to be listened to and taken seriously. The admin will take action they deem appropriate in response depending on the scale and severity of the incident. For example:
-
-1. Discuss the perpetrator's behaviour with them and ask them to stop. Explain what they have done and why it is unacceptable. Remind the perpetrator of the code of conduct. Monitor the perpetrator's behaviour and if it improves then they will continue to be welcome.
-2. Temporarily exclude the perpetrator from the forum for a cool-off period. Explain what they have done and why it is unacceptable and remind them of the code of conduct. Monitor the person's behaviour and if it improves then they will continue to be welcome.
-3. Remove the perpetrator from the forum. Explain what they have done and why it is unacceptable and remind them of the code of conduct.
-
-# Post-AI humane policy for live coding development
-
-Please follow the following policy on AI/LLM use.
-
-## Community
-
-All community members should be treated with respect and kindness. We welcome contributors to the community who are ready to follow this policy as well as the above code of conduct.
-
-## Principles
-
-* We wish to protect the humanity of our communities and projects, to support the motivation and well-being of all of its contributors and users.
-* To this end, contributors and other users of our projects should not have to engage with LLM-generated code and text as part of their community work.
-* We recognise that LLM-based scraping and generation of (A)GPL code shared by ourselves and others is of questionable legality. For example, under many juristictions, LLM-generated work does not have a copyright holder and can therefore not be licensed under the (A)GPL.
-* A contributor's personal use of LLMs and related technology is their own business, whether for research, analysis, bug discovery or other assistive technology, so long as the output is not included in any contributions to our projects.
-
-## In practice
-
-* Contributions including LLM-generated content will be declined.
-* LLM-generated text (e.g. commit messages, issue comments, forum posts etc) generated by LLMs will be flagged, and ultimately deleted.
-* We encourage asking each other questions and working through problems to promote collective knowledge and creative ideas (never telling each other to "just google it").
-* We strongly discourage others from forking/importing our projects into corporate AI platforms, including Microsoft Github.
-* All contributions must be submitted by a person who understands the changes, is happy to answer questions about them, and where possible, help maintain the code in the future.
-* In community discussion channels (at the time of writing, this refers to the uzu discord server), all discussion (including criticism) of LLM technology and use should be kept to designated channels.

README.md

@@ -43,10 +43,10 @@ There are many ways to contribute to this project! See [contribution guide](./CO
 
 ## Community
 
-Strudel is a member of the 'Uzu' family of pattern-based live coding languages, along with TidalCycles and friends.
+There is a #strudel channel on the TidalCycles discord: <https://discord.com/invite/HGEdXmRkzT>
 
-There are a range of strudel channels on the Uzu discord: <https://discord.com/invite/HGEdXmRkzT>
+You can also ask questions and find related discussions on the tidal club forum: <https://club.tidalcycles.org/>
 
-You can also ask questions and find related discussions on the Uzu web forum: <https://uzu.lurk.org/>
+The discord and forum is shared with the haskell (tidal) and python (vortex) siblings of this project.
 
 We also have a mastodon account: <a rel="me" href="https://social.toplap.org/@strudel">social.toplap.org/@strudel</a>

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/controls.mjs

@@ -2702,32 +2702,7 @@ export const { seconds } = registerControl('seconds');
 export const { songPtr } = registerControl('songPtr');
 export const { uid } = registerControl('uid');
 export const { val } = registerControl('val');
-
-/**
- * Plays the pattern at the given cycles per second. The cps can be patterned. This changes the global tempo, so it generally
- * makes sense to have either `cps` (or `cpm` - cycles per minute) set by only one of your patterns.
- * Note that this currently does not work when the 'Sync across Browser Tabs / Windows' setting is switched on.
- * @tags temporal
- * @example
- * s("bd hh sd hh").cps(0.5) // = 1 cycle every 2 seconds
- * @example
- * // a smooth change over 4 cycles
- * s("bd hh sd hh").cps(sine.slow(4).range(0.5,1.5))
- */
 export const { cps } = registerControl('cps');
-
-/**
- * Plays the pattern at the given cycles per minute. The cpm can be patterned. This changes the global tempo, so it generally
- * makes sense to have either `cpm` (or `cps` - cycles per second) set by only one of your patterns.
- * Note that this currently does not work when the 'Sync across Browser Tabs / Windows' setting is switched on.
- * @tags temporal
- * @example
- * s("bd hh sd hh").cpm(90) // = feels like 180 bpm
- * // a smooth change over 4 cycles
- * s("bd hh sd hh").cpm(sine.slow(4).range(30,70))
- */
-export const { cpm } = registerControl('cpm');
-
 /**
  * Multiplies the duration with the given number. Also cuts samples off at the end if they exceed the duration.
  *

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,81 +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 || a.value.cpm !== undefined) {
-                    return b.value.cps !== undefined || b.value.cpm !== undefined ? 0 : -1;
-                  }
-                  if (b.value.cps !== undefined || b.value.cpm !== 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;
-              let hapCps = hap.value.cps;
-              hapCps ??= hap.value.cpm != null ? hap.value.cpm / 60 : undefined;
-              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, hapCps ?? this.cps);
-              if (hapCps !== undefined && this.cps != hapCps) {
-                cpsChanged = true;
-                this.cps = hapCps;
-                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;
+          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) {
+                this.cps = hap.value.cps;
+                this.num_ticks_since_cps_change = 0;
               }
             }
-          } while (cpsChanged);
+          });
         } catch (e) {
           errorLogger(e);
           onError?.(e);
@@ -165,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.');
     }
@@ -199,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/pattern.mjs

@@ -2476,6 +2476,18 @@ export const apply = register('apply', function (func, pat) {
   return func(pat);
 });
 
+/**
+ * Plays the pattern at the given cycles per minute.
+ * @tags temporal
+ * @deprecated
+ * @example
+ * s("<bd sd>,hh*2").cpm(90) // = 90 bpm
+ */
+// this is redefined in repl.mjs, using the current cps as divisor
+export const cpm = register('cpm', function (cpm, pat) {
+  return pat._fast(cpm / 60 / 1);
+});
+
 /**
  * Nudge a pattern to start earlier in time. Equivalent of Tidal's <~ operator
  *

packages/core/repl.mjs

@@ -217,10 +217,14 @@ export function repl({
     } catch (err) {
       console.warn('injectPatternMethods: error:', err);
     }
+    const cpm = register('cpm', function (cpm, pat) {
+      return pat._fast(cpm / 60 / scheduler.cps);
+    });
     return evalScope({
       all,
       each,
       hush,
+      cpm,
       setCps,
       setcps: setCps,
       setCpm,

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

@@ -1,68 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`runs examples > example "" example index 0 1`] = `
-[
-  "[ 0/1 → 1/4 | s:bd cps:0.5 ]",
-  "[ 1/4 → 1/2 | s:hh cps:0.5 ]",
-  "[ 1/2 → 3/4 | s:sd cps:0.5 ]",
-  "[ 3/4 → 1/1 | s:hh cps:0.5 ]",
-  "[ 1/1 → 5/4 | s:bd cps:0.5 ]",
-  "[ 5/4 → 3/2 | s:hh cps:0.5 ]",
-  "[ 3/2 → 7/4 | s:sd cps:0.5 ]",
-  "[ 7/4 → 2/1 | s:hh cps:0.5 ]",
-  "[ 2/1 → 9/4 | s:bd cps:0.5 ]",
-  "[ 9/4 → 5/2 | s:hh cps:0.5 ]",
-  "[ 5/2 → 11/4 | s:sd cps:0.5 ]",
-  "[ 11/4 → 3/1 | s:hh cps:0.5 ]",
-  "[ 3/1 → 13/4 | s:bd cps:0.5 ]",
-  "[ 13/4 → 7/2 | s:hh cps:0.5 ]",
-  "[ 7/2 → 15/4 | s:sd cps:0.5 ]",
-  "[ 15/4 → 4/1 | s:hh cps:0.5 ]",
-]
-`;
-
-exports[`runs examples > example "" example index 0 2`] = `
-[
-  "[ 0/1 → 1/4 | s:bd cpm:50 ]",
-  "[ 1/4 → 1/2 | s:hh cpm:57.6536686473018 ]",
-  "[ 1/2 → 3/4 | s:sd cpm:64.14213562373095 ]",
-  "[ 3/4 → 1/1 | s:hh cpm:68.47759065022574 ]",
-  "[ 1/1 → 5/4 | s:bd cpm:70 ]",
-  "[ 5/4 → 3/2 | s:hh cpm:68.47759065022574 ]",
-  "[ 3/2 → 7/4 | s:sd cpm:64.14213562373095 ]",
-  "[ 7/4 → 2/1 | s:hh cpm:57.6536686473018 ]",
-  "[ 2/1 → 9/4 | s:bd cpm:50 ]",
-  "[ 9/4 → 5/2 | s:hh cpm:42.34633135269821 ]",
-  "[ 5/2 → 11/4 | s:sd cpm:35.85786437626905 ]",
-  "[ 11/4 → 3/1 | s:hh cpm:31.52240934977427 ]",
-  "[ 3/1 → 13/4 | s:bd cpm:30 ]",
-  "[ 13/4 → 7/2 | s:hh cpm:31.522409349774268 ]",
-  "[ 7/2 → 15/4 | s:sd cpm:35.85786437626905 ]",
-  "[ 15/4 → 4/1 | s:hh cpm:42.34633135269819 ]",
-]
-`;
-
-exports[`runs examples > example "" example index 1 1`] = `
-[
-  "[ 0/1 → 1/4 | s:bd cps:1 ]",
-  "[ 1/4 → 1/2 | s:hh cps:1.1913417161825448 ]",
-  "[ 1/2 → 3/4 | s:sd cps:1.3535533905932737 ]",
-  "[ 3/4 → 1/1 | s:hh cps:1.4619397662556435 ]",
-  "[ 1/1 → 5/4 | s:bd cps:1.5 ]",
-  "[ 5/4 → 3/2 | s:hh cps:1.4619397662556435 ]",
-  "[ 3/2 → 7/4 | s:sd cps:1.3535533905932737 ]",
-  "[ 7/4 → 2/1 | s:hh cps:1.1913417161825448 ]",
-  "[ 2/1 → 9/4 | s:bd cps:1 ]",
-  "[ 9/4 → 5/2 | s:hh cps:0.8086582838174552 ]",
-  "[ 5/2 → 11/4 | s:sd cps:0.6464466094067263 ]",
-  "[ 11/4 → 3/1 | s:hh cps:0.5380602337443567 ]",
-  "[ 3/1 → 13/4 | s:bd cps:0.5 ]",
-  "[ 13/4 → 7/2 | s:hh cps:0.5380602337443567 ]",
-  "[ 7/2 → 15/4 | s:sd cps:0.6464466094067262 ]",
-  "[ 15/4 → 4/1 | s:hh cps:0.8086582838174547 ]",
-]
-`;
-
 exports[`runs examples > example "_euclidRot" example index 0 1`] = `
 [
   "[ 0/1 → 1/5 | note:c3 ]",
@@ -2503,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 ]",
@@ -2852,6 +2752,29 @@ exports[`runs examples > example "cosine" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "cpm" example index 0 1`] = `
+[
+  "[ 0/1 → 1/3 | s:hh ]",
+  "[ 0/1 → 2/3 | s:bd ]",
+  "[ 1/3 → 2/3 | s:hh ]",
+  "[ 2/3 → 1/1 | s:hh ]",
+  "[ 2/3 → 4/3 | s:sd ]",
+  "[ 1/1 → 4/3 | s:hh ]",
+  "[ 4/3 → 5/3 | s:hh ]",
+  "[ 4/3 → 2/1 | s:bd ]",
+  "[ 5/3 → 2/1 | s:hh ]",
+  "[ 2/1 → 7/3 | s:hh ]",
+  "[ 2/1 → 8/3 | s:sd ]",
+  "[ 7/3 → 8/3 | s:hh ]",
+  "[ 8/3 → 3/1 | s:hh ]",
+  "[ 8/3 → 10/3 | s:bd ]",
+  "[ 3/1 → 10/3 | s:hh ]",
+  "[ 10/3 → 11/3 | s:hh ]",
+  "[ 10/3 → 4/1 | s:sd ]",
+  "[ 11/3 → 4/1 | s:hh ]",
+]
+`;
+
 exports[`runs examples > example "crush" example index 0 1`] = `
 [
   "[ 0/1 → 1/6 | s:hh crush:16 ]",
@@ -8804,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 {