Merge branch 'main' into show12

Reviewed-on: https://codeberg.org/uzu/strudel/pulls/2149

eslint.config.mjs

@@ -42,7 +42,6 @@ export default [
       '**/hydra.mjs',
       '**/jsdoc-synonyms.js',
       'packages/hs2js/src/hs2js.mjs',
-      'packages/supradough/dough-export.mjs',
       '**/samples',
     ],
   },

packages/codemirror/block_utilities.mjs

@@ -1,51 +0,0 @@
-// Block-based evaluation utilities
-
-export function getBlockRegions(code) {
-  const chars = code.split('');
-  let i = 0,
-    blanks = [],
-    blockStart = 0,
-    regions = [];
-  while (i < chars.length) {
-    const isBlank = chars[i] === '\n';
-    if (isBlank) {
-      blanks.push(i);
-    } else if (chars[i].trim() !== '') {
-      if (blanks.length > 1) {
-        regions.push([blockStart, blanks[0]]);
-        blockStart = i;
-      }
-      blanks = [];
-    }
-    i++;
-  }
-  regions.push([blockStart, blanks.length ? blanks[0] : i]);
-  return regions;
-}
-
-export function getBlockAt(code, cursor) {
-  const regions = getBlockRegions(code);
-  for (const [start, end] of regions) {
-    if (cursor >= start && cursor <= end) {
-      return [start, end];
-    }
-  }
-  return null;
-}
-
-export const evalBlock = (strudelMirror) => {
-  const { state } = strudelMirror.editor;
-  const code = state.doc.toString();
-  const cursor = state.selection.main.head;
-  const range = getBlockAt(code, cursor);
-  if (range) {
-    const [a, b] = range;
-    const block = code.slice(a, b);
-    if (block) {
-      // Flash the block being evaluated
-      strudelMirror.flash(200, { from: a, to: b });
-      strudelMirror.repl.evaluateBlock(block, true, { range });
-    }
-  }
-  return true;
-};

packages/codemirror/codemirror.mjs

@@ -1,5 +1,5 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-import { indentWithTab, toggleLineComment } from '@codemirror/commands';
+import { indentWithTab } from '@codemirror/commands';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -11,20 +11,26 @@ 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';
+import { registerControl, repl } from '@strudel/core';
+import { cleanupDraw, Drawer } from '@strudel/draw';
+
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { basicSetup } from './basicSetup.mjs';
-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 { 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 { 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()]));
@@ -64,7 +70,6 @@ export const defaultSettings = {
   isLineWrappingEnabled: false,
   isTabIndentationEnabled: false,
   isMultiCursorEnabled: false,
-  isBlockBasedEvalEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -75,8 +80,12 @@ 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 }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root, mondo }) {
   const settings = codemirrorSettings.get();
   const initialSettings = Object.keys(compartments).map((key) =>
     compartments[key].of(extensions[key](parseBooleans(settings[key]))),
@@ -102,30 +111,16 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       syntaxHighlighting(defaultHighlightStyle),
       EditorView.updateListener.of((v) => onChange(v)),
       drawSelection({ cursorBlinkRate: 0 }),
+      repeatCharKeymap,
       Prec.highest(
         keymap.of([
           {
             key: 'Ctrl-Enter',
-            run: () => {
-              // issue with referencing settings, this works more reliably
-              if (strudelMirror?.isBlockBasedEvalEnabled) {
-                evalBlock(strudelMirror);
-                return true;
-              } else {
-                return onEvaluate?.();
-              }
-            },
+            run: () => onEvaluate?.(),
           },
           {
             key: 'Alt-Enter',
-            run: () => {
-              if (strudelMirror?.isBlockBasedEvalEnabled) {
-                evalBlock(strudelMirror);
-                return true;
-              } else {
-                return onEvaluate?.();
-              }
-            },
+            run: () => onEvaluate?.(),
           },
           {
             key: 'Ctrl-.',
@@ -138,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?.()),
@@ -187,7 +244,6 @@ export class StrudelMirror {
     this.onDraw = onDraw || this.draw;
     this.id = id || s4();
     this.solo = solo;
-    this.isBlockBasedEvalEnabled = false; // Will be updated via updateSettings()
 
     this.drawer = new Drawer((haps, time, _, painters) => {
       const currentFrame = haps.filter((hap) => hap.isActive(time));
@@ -218,12 +274,8 @@ export class StrudelMirror {
           cleanupDraw(true, id);
         }
       },
-      beforeEval: async ({ blockBased } = {}) => {
-        // Only clean up all drawings for full evaluation
-        // Block-based eval should preserve animations (like .scope()) from other blocks
-        if (!blockBased) {
-          cleanupDraw(true, id);
-        }
+      beforeEval: async () => {
+        cleanupDraw(true, id);
         await this.prebaked;
         await replOptions?.beforeEval?.();
       },
@@ -233,13 +285,10 @@ export class StrudelMirror {
         this.widgets = options.meta?.widgets || [];
 
         const sliders = this.widgets.filter((w) => w.type === 'slider');
+        updateSliderWidgets(this.editor, sliders);
         const widgets = this.widgets.filter((w) => w.type !== 'slider');
-        // range-aware update for block-based evaluation
-        const range = options.range && options.range.length >= 2 ? options.range : null;
-
-        updateSliderWidgets(this.editor, sliders, range);
-        updateWidgets(this.editor, widgets, range);
-        updateMiniLocations(this.editor, this.miniLocations, range);
+        updateWidgets(this.editor, widgets);
+        updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
         // if no painters are set (.onPaint was not called), then we only need
         // the present moment (for highlighting)
@@ -247,14 +296,8 @@ export class StrudelMirror {
         this.drawer.setDrawTime(drawTime);
         // invalidate drawer after we've set the appropriate drawTime
         this.drawer.invalidate(this.repl.scheduler);
-
-        // Clean up draw context if a non-inline widget was removed
-        if (options.widgetRemoved) {
-          cleanupDrawContext(id);
-        }
       },
     });
-    this.cleanupDrawContext = () => cleanupDrawContext(id);
     this.editor = initEditor({
       root,
       initialCode,
@@ -267,9 +310,7 @@ export class StrudelMirror {
       onEvaluate: () => this.evaluate(),
       onStop: () => this.stop(),
       mondo: replOptions.mondo,
-      strudelMirror: this,
     });
-
     const cmEditor = this.root.querySelector('.cm-editor');
     if (cmEditor) {
       this.root.style.display = 'block';
@@ -289,39 +330,6 @@ export class StrudelMirror {
       }
     };
     document.addEventListener('start-repl', this.onStartRepl);
-
-    // Handle global evaluation requests (e.g., from Vim :w)
-    this.onEvaluateRequest = (e) => {
-      try {
-        if (e.detail.view !== this.editor) {
-          return; // ignore events from other editors
-        }
-        // Evaluate current editor on repl-evaluate
-        logger('[repl] evaluate via event');
-        this.evaluate();
-        e?.cancelable && e.preventDefault?.();
-      } catch (err) {
-        console.error('Error handling repl-evaluate event', err);
-      }
-    };
-    document.addEventListener('repl-evaluate', this.onEvaluateRequest);
-    document.addEventListener('repl-stop', this.onStopRequest);
-
-    // Toggle comments requested from Vim (gc)
-    this.onToggleComment = (e) => {
-      try {
-        if (e.detail.view !== this.editor) {
-          return; // ignore events from other editors
-        }
-        // Honor selections; toggleLineComment handles both selections and
-        // single line
-        toggleLineComment(this.editor);
-        e?.cancelable && e.preventDefault?.();
-      } catch (err) {
-        console.error('Error handling repl-toggle-comment event', err);
-      }
-    };
-    document.addEventListener('repl-toggle-comment', this.onToggleComment);
   }
   draw(haps, time, painters) {
     painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
@@ -345,23 +353,10 @@ export class StrudelMirror {
     this.flash();
     await this.repl.evaluate(this.code, autostart);
   }
-
   async stop() {
-    this.repl.stop();
+    this.repl.scheduler.stop();
   }
 
-  // Listen for global stop requests (e.g., from Vim :q)
-  onStopRequest = (e) => {
-    try {
-      if (e.detail.view !== this.editor) {
-        return; // ignore events from other editors
-      }
-      this.stop();
-      e?.cancelable && e.preventDefault?.();
-    } catch (err) {
-      console.error('Error handling repl-stop event', err);
-    }
-  };
   async toggle() {
     if (this.repl.scheduler.started) {
       this.repl.stop();
@@ -369,8 +364,8 @@ export class StrudelMirror {
       this.evaluate();
     }
   }
-  flash(ms, range) {
-    flash(this.editor, ms, range);
+  flash(ms) {
+    flash(this.editor, ms);
   }
   highlight(haps, time) {
     highlightMiniLocations(this.editor, time, haps);
@@ -402,10 +397,6 @@ export class StrudelMirror {
   setLineWrappingEnabled(enabled) {
     this.reconfigureExtension('isLineWrappingEnabled', enabled);
   }
-
-  setBlockBasedEvalEnabled(enabled) {
-    this.reconfigureExtension('isBlockBasedEvalEnabled', enabled);
-  }
   setBracketMatchingEnabled(enabled) {
     this.reconfigureExtension('isBracketMatchingEnabled', enabled);
   }
@@ -427,10 +418,6 @@ export class StrudelMirror {
     for (let key in extensions) {
       this.reconfigureExtension(key, settings[key]);
     }
-    // Update block-based eval setting on the instance
-    if (settings.isBlockBasedEvalEnabled !== undefined) {
-      this.isBlockBasedEvalEnabled = parseBooleans(settings.isBlockBasedEvalEnabled);
-    }
     const updated = { ...codemirrorSettings.get(), ...settings };
     codemirrorSettings.set(updated);
   }
@@ -454,21 +441,8 @@ export class StrudelMirror {
   setCode(code) {
     this.replaceCode(code, 0, this.editor.state.doc.length);
   }
-  // used for debugging but could serve other purposes
-  getActiveWidgets() {
-    return getActiveWidgets(this.editor);
-  }
-  getSliderWidgets() {
-    return getSliderWidgets(this.editor);
-  }
-  getMiniLocations() {
-    return this.miniLocations;
-  }
   clear() {
     this.onStartRepl && document.removeEventListener('start-repl', this.onStartRepl);
-    this.onEvaluateRequest && document.removeEventListener('repl-evaluate', this.onEvaluateRequest);
-    this.onStopRequest && document.removeEventListener('repl-stop', this.onStopRequest);
-    this.onToggleComment && document.removeEventListener('repl-toggle-comment', this.onToggleComment);
   }
   getCursorLocation() {
     return this.editor.state.selection.main.head;

packages/codemirror/flash.mjs

@@ -14,8 +14,7 @@ export const flashField = StateField.define({
             const mark = Decoration.mark({
               attributes: { style: `background-color: rgba(255,255,255, .4); filter: invert(10%)` },
             });
-            const range = e.value.range || { from: 0, to: tr.newDoc.length };
-            flash = Decoration.set([mark.range(range.from, range.to)]);
+            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
           } else {
             flash = Decoration.set([]);
           }
@@ -30,9 +29,8 @@ export const flashField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-export const flash = (view, ms = 200, range) => {
-  const flashData = range ? { range } : true;
-  view.dispatch({ effects: setFlash.of(flashData) });
+export const flash = (view, ms = 200) => {
+  view.dispatch({ effects: setFlash.of(true) });
   setTimeout(() => {
     view.dispatch({ effects: setFlash.of(false) });
   }, ms);

packages/codemirror/highlight.mjs

@@ -3,9 +3,8 @@ import { Decoration, EditorView } from '@codemirror/view';
 
 export const setMiniLocations = StateEffect.define();
 export const showMiniLocations = StateEffect.define();
-export const displayMiniLocations = StateEffect.define();
-export const updateMiniLocations = (view, locations, range = null) => {
-  view.dispatch({ effects: setMiniLocations.of({ locations, range }) });
+export const updateMiniLocations = (view, locations) => {
+  view.dispatch({ effects: setMiniLocations.of(locations) });
 };
 export const highlightMiniLocations = (view, atTime, haps) => {
   view.dispatch({ effects: showMiniLocations.of({ atTime, haps }) });
@@ -22,54 +21,23 @@ const miniLocations = StateField.define({
 
     for (let e of tr.effects) {
       if (e.is(setMiniLocations)) {
-        //block-based eval case
-        if (e.value.range) {
-          const stateMiniLocations = getMiniLocationsFromDecorations(locations);
-
-          const normalized = e.value.locations
-            .filter(([from]) => from < tr.newDoc.length)
-            .map(([from, to]) => [from, Math.min(to, tr.newDoc.length)]);
-
-          const newIds = new Set(normalized.map((r) => r.join(':')));
-
-          const marks = normalized.map((range) => {
-            const id = range.join(':');
-            return Decoration.mark({
-              id,
-              // this green is only to verify that the decoration moves when the document is edited
-              // it will be removed later, so the mark is not visible by default
-              attributes: { style: `background-color: #00CA2880` },
-            }).range(...range); // -> Decoration
-          });
-
-          const previousMarks = stateMiniLocations
-            .filter(({ id }) => !newIds.has(id))
-            .map(({ from, to, id }) =>
+        // this is called on eval, with the mini locations obtained from the transpiler
+        // codemirror will automatically remap the marks when the document is edited
+        // create a mark for each mini location, adding the range to the spec to find it later
+        const marks = e.value
+          .filter(([from]) => from < tr.newDoc.length)
+          .map(([from, to]) => [from, Math.min(to, tr.newDoc.length)])
+          .map(
+            (range) =>
               Decoration.mark({
-                id,
+                id: range.join(':'),
+                // this green is only to verify that the decoration moves when the document is edited
+                // it will be removed later, so the mark is not visible by default
                 attributes: { style: `background-color: #00CA2880` },
-              }).range(from, to),
-            );
+              }).range(...range), // -> Decoration
+          );
 
-          locations = Decoration.set(previousMarks.concat(marks), true); // -> DecorationSet === RangeSet<Decoration>
-        } else {
-          // this is called on eval, with the mini locations obtained from the transpiler
-          // codemirror will automatically remap the marks when the document is edited
-          // create a mark for each mini location, adding the range to the spec to find it later
-          const marks = e.value.locations
-            .filter(([from]) => from < tr.newDoc.length)
-            .map(([from, to]) => [from, Math.min(to, tr.newDoc.length)])
-            .map(
-              (range) =>
-                Decoration.mark({
-                  id: range.join(':'),
-                  // this green is only to verify that the decoration moves when the document is edited
-                  // it will be removed later, so the mark is not visible by default
-                  attributes: { style: `background-color: #00CA2880` },
-                }).range(...range), // -> Decoration
-            );
-          locations = Decoration.set(marks, true); // -> DecorationSet === RangeSet<Decoration>
-        }
+        locations = Decoration.set(marks, true); // -> DecorationSet === RangeSet<Decoration>
       }
     }
 
@@ -107,83 +75,12 @@ const visibleMiniLocations = StateField.define({
   },
 });
 
-const displayMiniLocationsState = StateField.define({
-  create() {
-    return true; // default to showing miniLocations
-  },
-  update(display, tr) {
-    for (let e of tr.effects) {
-      if (e.is(displayMiniLocations)) {
-        display = e.value;
-      }
-    }
-    return display;
-  },
-});
-
 // // Derive the set of decorations from the miniLocations and visibleLocations
-const miniLocationHighlights = EditorView.decorations.compute(
-  [miniLocations, visibleMiniLocations, displayMiniLocationsState],
-  (state) => {
-    // Check if miniLocations display is disabled
-    const shouldDisplay = state.field(displayMiniLocationsState);
-    if (!shouldDisplay) {
-      return Decoration.none; // Return empty decorations if display is disabled
-    }
+const miniLocationHighlights = EditorView.decorations.compute([miniLocations, visibleMiniLocations], (state) => {
+  const iterator = state.field(miniLocations).iter();
+  const { haps } = state.field(visibleMiniLocations);
+  const builder = new RangeSetBuilder();
 
-    const iterator = state.field(miniLocations).iter();
-    const { haps } = state.field(visibleMiniLocations);
-    const builder = new RangeSetBuilder();
-
-    while (iterator.value) {
-      const {
-        from,
-        to,
-        value: {
-          spec: { id },
-        },
-      } = iterator;
-
-      if (haps.has(id)) {
-        const hap = haps.get(id);
-        const color = hap.value?.color ?? 'var(--foreground)';
-        const style = hap.value?.markcss || `outline: solid 2px ${color}`;
-        // Get explicit channels for color values
-        /* 
-    const swatch = document.createElement('div');
-    swatch.style.color = color;
-    document.body.appendChild(swatch);
-    let channels = getComputedStyle(swatch)
-      .color.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d*(?:\.\d+)?))?\)$/)
-      .slice(1)
-      .map((c) => parseFloat(c || 1));
-    document.body.removeChild(swatch);
-
-    // Get percentage of event
-    const percent = 1 - (atTime - hap.whole.begin) / hap.whole.duration;
-    channels[3] *= percent;
-    */
-
-        builder.add(
-          from,
-          to,
-          Decoration.mark({
-            // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
-            attributes: { style },
-          }),
-        );
-      }
-
-      iterator.next();
-    }
-
-    return builder.finish();
-  },
-);
-
-const getMiniLocationsFromDecorations = (decorations) => {
-  const iterator = decorations.iter();
-  const miniLocationsArray = [];
   while (iterator.value) {
     const {
       from,
@@ -192,48 +89,50 @@ const getMiniLocationsFromDecorations = (decorations) => {
         spec: { id },
       },
     } = iterator;
-    miniLocationsArray.push({
-      from,
-      to,
-      id,
-    });
+
+    if (haps.has(id)) {
+      const hap = haps.get(id);
+      const color = hap.value?.color ?? 'var(--foreground)';
+      const style = hap.value?.markcss || `outline: solid 2px ${color}`;
+      // Get explicit channels for color values
+      /* 
+      const swatch = document.createElement('div');
+      swatch.style.color = color;
+      document.body.appendChild(swatch);
+      let channels = getComputedStyle(swatch)
+        .color.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(\d*(?:\.\d+)?))?\)$/)
+        .slice(1)
+        .map((c) => parseFloat(c || 1));
+      document.body.removeChild(swatch);
+
+      // Get percentage of event
+      const percent = 1 - (atTime - hap.whole.begin) / hap.whole.duration;
+      channels[3] *= percent;
+      */
+
+      builder.add(
+        from,
+        to,
+        Decoration.mark({
+          // attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
+          attributes: { style },
+        }),
+      );
+    }
+
     iterator.next();
   }
-  return miniLocationsArray;
-};
 
-export const getMiniLocations = (state) => {
-  const decorations = state.field(miniLocations);
-  return getMiniLocationsFromDecorations(decorations);
-};
+  return builder.finish();
+});
 
-export const getActiveMiniLocations = (state) => {
-  const miniLocations = getMiniLocations(state);
-  const { haps } = state.field(visibleMiniLocations);
-
-  const activeMiniLocations = miniLocations.filter((location) => haps.has(location.id));
-  return activeMiniLocations;
-};
-
-export const highlightExtension = [
-  miniLocations,
-  visibleMiniLocations,
-  displayMiniLocationsState,
-  miniLocationHighlights,
-];
+export const highlightExtension = [miniLocations, visibleMiniLocations, miniLocationHighlights];
 
 export const isPatternHighlightingEnabled = (on, config) => {
-  // NOTE:
-  // Modified this function to always return the highlightExtension, and instead just toggle whether or not the miniLocations are displayed.
-  // This is because block based evaluation only updates regions of miniLocations, and those updates need to be kept track of constantly.
-  // The setTimeout was also removed because it conflicted with the range-specific updates required by
-  // block based evaluation.
-  // Not sure if this is the best approach, but for block based eval I can't think of a better way to do it.
-
-  if (config) {
-    // Toggle the display state for miniLocations
-    config.editor.dispatch({ effects: displayMiniLocations.of(on) });
-  }
-
-  return Prec.highest(highlightExtension);
+  on &&
+    config &&
+    setTimeout(() => {
+      updateMiniLocations(config.editor, config.miniLocations);
+    }, 100);
+  return on ? Prec.highest(highlightExtension) : [];
 };

packages/codemirror/keybindings.mjs

@@ -3,11 +3,9 @@ import { Prec, EditorState } from '@codemirror/state';
 import { keymap, ViewPlugin } from '@codemirror/view';
 // import { searchKeymap } from '@codemirror/search';
 import { emacs } from '@replit/codemirror-emacs';
-import { vim, Vim } from '@replit/codemirror-vim';
+import { vim } from '@replit/codemirror-vim';
 // import { vim } from './vim_test.mjs';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { helix, commands } from 'codemirror-helix';
-import { logger } from '@strudel/core';
 
 const vscodePlugin = ViewPlugin.fromClass(
   class {
@@ -21,166 +19,11 @@ const vscodePlugin = ViewPlugin.fromClass(
 );
 const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
 
-function replEval(view) {
-  try {
-    // Dispatch a dedicated evaluate event first
-    let handled = false;
-    try {
-      const ev = new CustomEvent('repl-evaluate', { detail: { source: 'vim', view }, cancelable: true });
-      handled = document.dispatchEvent(ev) === false; // false means preventDefault was called
-    } catch (e) {
-      console.error('Error dispatching repl-evaluate event', e);
-    }
-    if (handled) {
-      return;
-    }
-    // Try Ctrl+Enter first if not handled by custom event
-    const ctrlEnter = new KeyboardEvent('keydown', {
-      key: 'Enter',
-      code: 'Enter',
-      ctrlKey: true,
-      bubbles: true,
-      cancelable: true,
-    });
-    view?.dom?.dispatchEvent?.(ctrlEnter);
-    // If not handled (no handler called preventDefault), try Alt+Enter as
-    // fallback
-    if (!ctrlEnter.defaultPrevented) {
-      const altEnter = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        code: 'Enter',
-        altKey: true,
-        bubbles: true,
-        cancelable: true,
-      });
-      view?.dom?.dispatchEvent?.(altEnter);
-    }
-  } catch (e) {
-    console.error('Error dispatching repl evaluation event', e);
-  }
-}
-
-function replStop(view) {
-  try {
-    // First try dispatching our custom stop event, then fallback to Alt+.
-    let handled = false;
-    try {
-      const ev = new CustomEvent('repl-stop', { detail: { source: 'vim', view }, cancelable: true });
-      handled = document.dispatchEvent(ev) === false;
-    } catch (e) {
-      console.error('Error dispatching repl-stop event', e);
-    }
-    if (!handled) {
-      const altDot = new KeyboardEvent('keydown', {
-        key: '.',
-        code: 'Period',
-        altKey: true,
-        bubbles: true,
-        cancelable: true,
-      });
-      view?.dom?.dispatchEvent?.(altDot);
-    }
-  } catch (e) {
-    console.error('Error dispatching repl stop event', e);
-  }
-}
-
-// Map Vim :w to trigger the same action as evaluation. We dispatch a custom
-// event 'repl-evaluate' that the editor listens for, and also simulate
-// Ctrl+Enter/Alt+Enter as a fallback. We log to the Strudel logger so it
-// appears in the Console panel.
-try {
-  if (Vim && typeof Vim.defineEx === 'function') {
-    // Map gc to toggle line comments by dispatching a custom event that our
-    // CodeMirror integration listens to. This avoids depending on Vim's
-    // internal actions and works with current selections/visual mode.
-    try {
-      Vim.defineAction('strudelToggleComment', (cm) => {
-        const view = cm.cm6;
-        try {
-          const ev = new CustomEvent('repl-toggle-comment', { detail: { source: 'vim', view }, cancelable: true });
-          document.dispatchEvent(ev);
-        } catch (e) {
-          console.error('strudelToggleComment dispatch failed', e);
-        }
-      });
-      Vim.mapCommand('gc', 'action', 'strudelToggleComment', {}, { context: 'normal' });
-      Vim.mapCommand('gc', 'action', 'strudelToggleComment', {}, { context: 'visual' });
-    } catch (e) {
-      console.error('Vim gc mapping failed', e);
-    }
-
-    // :q to pause/stop
-    Vim.defineEx('quit', 'q', (cm) => {
-      const view = cm.cm6;
-      logger('[vim] :q — stopping repl');
-      replStop(view);
-    });
-
-    // :w to evaluate
-    Vim.defineEx('write', 'w', (cm) => {
-      const view = cm.cm6;
-      try {
-        view.focus?.();
-        // Let the app know this came from Vim :w
-        try {
-          logger('[vim] :w — evaluating code');
-        } catch (e) {
-          console.error('Error logging Vim :w evaluation', e);
-        }
-        replEval(view);
-      } catch (e) {
-        console.error('Error dispatching :w evaluation event', e);
-      }
-    });
-  }
-} catch (e) {
-  console.error('Vim ex command setup failed (defineEx missing or Vim unavailable)', e);
-}
-
-// Map Helix :w to trigger the same action as evaluation. We dispatch a custom
-// event 'repl-evaluate' that the editor listens for, and also simulate
-// Ctrl+Enter/Alt+Enter as a fallback. We log to the Strudel logger so it
-// appears in the Console panel.
-const helixCommands = commands.of([
-  {
-    // :w to evaluate
-    name: 'write',
-    aliases: ['w'],
-    help: 'Repl-eval',
-    handler(view, args) {
-      try {
-        view?.focus?.(); // Let the app know this came from Helix :w
-        logger('[helix] :w — evaluating code');
-        replEval(view);
-      } catch (e) {
-        console.error('Error dispatching helix :w evaluation event', e);
-      }
-    },
-  },
-  {
-    // :q to pause/stop
-    name: 'quit',
-    aliases: ['q'],
-    help: 'Repl-stop',
-    handler(view, args) {
-      try {
-        view?.focus?.(); // Let the app know this came from Helix :q
-        logger('[helix] :q — stopping repl');
-        replStop(view);
-      } catch (e) {
-        console.error('Error dispatching helix :q stop event', e);
-      }
-    },
-  },
-]);
-
 const keymaps = {
   vim,
   emacs,
   codemirror: () => keymap.of(defaultKeymap),
   vscode: vscodeExtension,
-  helix: () => [helix(), helixCommands],
 };
 
 export { Vim } from '@replit/codemirror-vim';

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/package.json

@@ -44,7 +44,6 @@
     "@replit/codemirror-emacs": "^6.1.0",
     "@replit/codemirror-vim": "^6.3.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
-    "codemirror-helix": "^0.5.0",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
     "@strudel/transpiler": "workspace:*",

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/codemirror/slider.mjs

@@ -2,11 +2,11 @@ import { ref, pure } from '@strudel/core';
 import { WidgetType, ViewPlugin, Decoration } from '@codemirror/view';
 import { StateEffect } from '@codemirror/state';
 
-// Global state storage for all widget types
 export let sliderValues = {};
+const getSliderID = (from) => `slider_${from}`;
 
 export class SliderWidget extends WidgetType {
-  constructor(value, min, max, from, to, step, view, id) {
+  constructor(value, min, max, from, to, step, view) {
     super();
     this.value = value;
     this.min = min;
@@ -16,21 +16,10 @@ export class SliderWidget extends WidgetType {
     this.to = to;
     this.step = step;
     this.view = view;
-    this.id = id || `${from}:${to}`; // Range-based ID for stability
   }
 
-  eq(other) {
-    if (!(other instanceof SliderWidget)) {
-      return false;
-    }
-    return (
-      this.id === other.id &&
-      this.from === other.from &&
-      this.to === other.to &&
-      this.value === other.value &&
-      this.min === other.min &&
-      this.max === other.max
-    );
+  eq() {
+    return false;
   }
 
   toDOM() {
@@ -49,7 +38,6 @@ export class SliderWidget extends WidgetType {
     slider.from = this.from;
     slider.originalFrom = this.originalFrom;
     slider.to = this.to;
-    slider.id = this.id; // Store range-based ID in DOM element
     slider.style = 'width:64px;margin-right:4px;transform:translateY(4px)';
     this.slider = slider;
     slider.addEventListener('input', (e) => {
@@ -61,7 +49,7 @@ export class SliderWidget extends WidgetType {
       slider.originalValue = insert;
       slider.value = insert;
       this.view.dispatch({ changes: change });
-      const id = slider.id; // Use range-based ID
+      const id = getSliderID(slider.originalFrom); // matches id generated in transpiler
       window.postMessage({ type: 'cm-slider', value: Number(next), id });
     });
     return wrap;
@@ -74,60 +62,19 @@ export class SliderWidget extends WidgetType {
 
 export const setSliderWidgets = StateEffect.define();
 
-export const setSliderWidgetsInRange = StateEffect.define();
-
-export const updateSliderWidgets = (view, widgets, range = null) => {
-  if (range) {
-    // range argument passed for block-based evaluation
-    view.dispatch({ effects: setSliderWidgetsInRange.of({ widgets, range }) });
-  } else {
-    view.dispatch({ effects: setSliderWidgets.of(widgets) });
-  }
+export const updateSliderWidgets = (view, widgets) => {
+  view.dispatch({ effects: setSliderWidgets.of(widgets) });
 };
 
 function getSliders(widgetConfigs, view) {
-  return (
-    widgetConfigs
-      .filter((w) => w.type === 'slider')
-      // Deduplicate sliders that might appear multiple times (e.g., during paste operations)
-      .filter((slider, index, self) => index === self.findIndex((s) => s.from === slider.from && s.to === slider.to))
-      .sort((a, b) => a.from - b.from)
-      .map(({ from, to, value, min, max, step, id }) => {
-        return Decoration.widget({
-          widget: new SliderWidget(value, min, max, from, to, step, view, id),
-          side: 0,
-        }).range(from /* , to */);
-      })
-  );
-}
-
-export function getSliderWidgets(view) {
-  if (!view || !view.state) {
-    return [];
-  }
-
-  const sliderPluginInstance = view.plugin(sliderPlugin);
-  if (!sliderPluginInstance || !sliderPluginInstance.decorations) {
-    return [];
-  }
-
-  const sliderWidgets = [];
-
-  sliderPluginInstance.decorations.between(0, view.state.doc.length, (from, to, decoration) => {
-    if (decoration.widget instanceof SliderWidget) {
-      sliderWidgets.push({
-        type: 'slider',
-        from: decoration.widget.from,
-        to: decoration.widget.to,
-        value: decoration.widget.value,
-        min: decoration.widget.min,
-        max: decoration.widget.max,
-        step: decoration.widget.step,
-      });
-    }
-  });
-
-  return sliderWidgets;
+  return widgetConfigs
+    .filter((w) => w.type === 'slider')
+    .map(({ from, to, value, min, max, step }) => {
+      return Decoration.widget({
+        widget: new SliderWidget(value, min, max, from, to, step, view),
+        side: 0,
+      }).range(from /* , to */);
+    });
 }
 
 export const sliderPlugin = ViewPlugin.fromClass(
@@ -154,42 +101,7 @@ export const sliderPlugin = ViewPlugin.fromClass(
           }
         }
         for (let e of tr.effects) {
-          if (e.is(setSliderWidgetsInRange)) {
-            // Block-aware slider update logic
-            const { widgets, range } = e.value;
-            const [rangeStart, rangeEnd] = range;
-
-            // Get existing slider widgets that should be preserved
-            const existingSliders = [];
-            this.decorations.between(0, update.view.state.doc.length, (from, to, decoration) => {
-              if (decoration.widget instanceof SliderWidget) {
-                // Preserve sliders outside the evaluation range
-                // Use strict > for rangeEnd because when code is deleted, slider positions
-                // map to the deletion boundary (rangeEnd), and those should be removed, not preserved
-                if (from < rangeStart || from > rangeEnd) {
-                  existingSliders.push({
-                    from,
-                    to,
-                    value: decoration.widget.value,
-                    min: decoration.widget.min,
-                    max: decoration.widget.max,
-                    step: decoration.widget.step,
-                    id: decoration.widget.id || `${from}:${to}`,
-                    type: 'slider',
-                  });
-                }
-              }
-            });
-
-            // Merge preserved sliders with new widgets
-            const mergedWidgets = [...existingSliders, ...widgets]
-              .filter(
-                (slider, index, self) => index === self.findIndex((s) => s.type === 'slider' && s.id === slider.id),
-              )
-              .sort((a, b) => a.from - b.from);
-
-            this.decorations = Decoration.set(getSliders(mergedWidgets, update.view));
-          } else if (e.is(setSliderWidgets)) {
+          if (e.is(setSliderWidgets)) {
             this.decorations = Decoration.set(getSliders(e.value, update.view));
           }
         }
@@ -220,7 +132,6 @@ export let sliderWithID = (id, value, min, max) => {
   sliderValues[id] = value; // sync state at eval time (code -> state)
   return ref(() => sliderValues[id]); // use state at query time
 };
-
 // update state when sliders are moved
 if (typeof window !== 'undefined') {
   window.addEventListener('message', (e) => {
@@ -229,7 +140,7 @@ if (typeof window !== 'undefined') {
         // update state when slider is moved
         sliderValues[e.data.id] = e.data.value;
       } else {
-        console.error(`slider with id "${e.data.id}" is not registered. Only ${Object.keys(sliderValues)}`);
+        console.warn(`slider with id "${e.data.id}" is not registered. Only ${Object.keys(sliderValues)}`);
       }
     }
   });

packages/codemirror/widget.mjs

@@ -1,111 +1,55 @@
 import { StateEffect, StateField } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType, ViewPlugin } from '@codemirror/view';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 import { getWidgetID, registerWidgetType } from '@strudel/transpiler';
 import { Pattern } from '@strudel/core';
 
-export const setWidgets = StateEffect.define();
+export const addWidget = StateEffect.define({
+  map: ({ from, to }, change) => {
+    return { from: change.mapPos(from), to: change.mapPos(to) };
+  },
+});
 
-export const setWidgetsInRange = StateEffect.define();
-
-export const updateWidgets = (view, widgets, range = null) => {
-  if (range) {
-    // range argument passed for block-based evaluation
-    view.dispatch({ effects: setWidgetsInRange.of({ widgets, range }) });
-  } else {
-    view.dispatch({ effects: setWidgets.of(widgets) });
-  }
+export const updateWidgets = (view, widgets) => {
+  view.dispatch({ effects: addWidget.of(widgets) });
 };
 
-function getWidgets(widgetConfigs, view) {
-  const filtered = widgetConfigs
-    // Filter to widget configs only (exclude sliders)
-    .filter((w) => w && w.type && w.type !== 'slider')
-    // Deduplicate widgets by ID, matching slider behavior for stable widget identity
-    .filter((widget, index, self) => index === self.findIndex((w) => w.type === widget.type && w.id === widget.id));
-
-  // Filter out widgets whose range is encompassed by another widget
-  // const nonEncompassed = filterEncompassedWidgets(filtered);
-
-  return filtered
-    .sort((a, b) => (a.to || 0) - (b.to || 0))
-    .map((widgetConfig) => {
-      try {
+function getWidgets(widgetConfigs) {
+  return (
+    widgetConfigs
+      // codemirror throws an error if we don't sort
+      .sort((a, b) => a.to - b.to)
+      .map((widgetConfig) => {
         return Decoration.widget({
-          widget: new BlockWidget(widgetConfig, view),
+          widget: new BlockWidget(widgetConfig),
           side: 0,
-        }).range(widgetConfig.to || widgetConfig.from || 0);
-      } catch (error) {
-        console.error('error creating widget', error);
-        return null;
-      }
-    })
-    .filter(Boolean); // Remove any null results from failed creations
+          block: true,
+        }).range(widgetConfig.to);
+      })
+  );
 }
 
-export const widgetPlugin = ViewPlugin.fromClass(
-  class {
-    decorations; //: DecorationSet
-
-    constructor(view /* : EditorView */) {
-      this.decorations = Decoration.set([]);
-    }
-
-    update(update /* : ViewUpdate */) {
-      update.transactions.forEach((tr) => {
-        if (tr.docChanged) {
-          this.decorations = this.decorations.map(tr.changes);
-          const iterator = this.decorations.iter();
-          // Apply changes to iterator.from and iterator.to if docChanged
-          while (iterator.value) {
-            // when the widgets are moved, we need to tell the dom node the current position
-            // this is important because the widget functions have to work with the dom node
-            if (iterator.value?.widget instanceof BlockWidget) {
-              iterator.value.widget.from = iterator.from;
-              iterator.value.widget.to = iterator.to;
-            }
-            iterator.next();
-          }
-        }
-        for (let e of tr.effects) {
-          if (e.is(setWidgetsInRange)) {
-            // Block-aware widget update logic
-            const { widgets, range } = e.value;
-            const [rangeStart, rangeEnd] = range;
-
-            // Get existing widget widgets that should be preserved
-            const existingWidgets = [];
-            this.decorations.between(0, update.view.state.doc.length, (from, to, decoration) => {
-              if (decoration.widget instanceof BlockWidget) {
-                // Preserve widgets outside the evaluation range
-                // Use strict > for rangeEnd because when code is deleted, widget positions
-                // map to the deletion boundary (rangeEnd), and those should be removed, not preserved
-                if (from < rangeStart || from > rangeEnd) {
-                  existingWidgets.push({
-                    from: decoration.widget.from,
-                    to: decoration.widget.to,
-                    type: decoration.widget.type,
-                    index: decoration.widget.index,
-                    id: decoration.widget.id,
-                  });
-                }
-              }
+const widgetField = StateField.define(
+  /* <DecorationSet> */ {
+    create() {
+      return Decoration.none;
+    },
+    update(widgets, tr) {
+      widgets = widgets.map(tr.changes);
+      for (let e of tr.effects) {
+        if (e.is(addWidget)) {
+          try {
+            widgets = widgets.update({
+              filter: () => false,
+              add: getWidgets(e.value),
             });
-
-            // Merge preserved widgets with new widgets, deduplicating by ID
-            const mergedWidgets = [...existingWidgets, ...widgets].filter(
-              (widget, index, self) => index === self.findIndex((w) => w.type === widget.type && w.id === widget.id),
-            );
-
-            this.decorations = Decoration.set(getWidgets(mergedWidgets, update.view));
-          } else if (e.is(setWidgets)) {
-            this.decorations = Decoration.set(getWidgets(e.value, update.view));
+          } catch (error) {
+            console.log('err', error);
           }
         }
-      });
-    }
-  },
-  {
-    decorations: (v) => v.decorations,
+      }
+      return widgets;
+    },
+    provide: (f) => EditorView.decorations.from(f),
   },
 );
 
@@ -116,116 +60,24 @@ export function setWidget(id, el) {
 }
 
 export class BlockWidget extends WidgetType {
-  constructor(widgetConfig, view) {
+  constructor(widgetConfig) {
     super();
-
-    // Graceful handling of invalid configs like sliders
-    if (!widgetConfig || typeof widgetConfig !== 'object') {
-      widgetConfig = { type: 'unknown', from: 0, to: 0 };
-    }
-
-    this.from = widgetConfig.from || 0;
-    this.originalFrom = widgetConfig.from || 0;
-    this.to = widgetConfig.to || this.from;
-    this.originalTo = widgetConfig.to || this.from;
-    this.type = widgetConfig.type || 'unknown';
-    this.index = widgetConfig.index || 0;
-    this.view = view;
-
-    // Use range-based ID for stability, similar to sliders
-    this.id = widgetConfig.id || getWidgetID?.(widgetConfig);
     this.widgetConfig = widgetConfig;
   }
-
-  eq(other) {
-    if (!(other instanceof BlockWidget)) {
-      return false;
-    }
-    return (
-      this.id === other.id &&
-      this.from === other.from &&
-      this.to === other.to &&
-      this.type === other.type &&
-      this.index === other.index
-    );
+  eq() {
+    return true;
   }
-
   toDOM() {
-    let wrap = document.createElement('span');
-    wrap.setAttribute('aria-hidden', 'true');
-    wrap.className = 'cm-widget-container';
-
-    let el = widgetElements[this.id];
-    if (el) {
-      // Ensure the element has the correct ID
-      el.id = this.id;
-      wrap.appendChild(el);
-    } else {
-      // Create a placeholder element if the widget element doesn't exist
-      // This prevents CodeMirror errors when widget is missing
-      const placeholder = document.createElement('span');
-      placeholder.setAttribute('aria-hidden', 'true');
-      placeholder.className = 'cm-widget-placeholder';
-      placeholder.style.cssText = 'display: none;'; // Hide placeholder
-      placeholder.id = this.id;
-      wrap.appendChild(placeholder);
-    }
-
-    return wrap;
+    const id = getWidgetID(this.widgetConfig);
+    const el = widgetElements[id];
+    return el;
   }
-
   ignoreEvent(e) {
     return true;
   }
 }
 
-export function getActiveWidgets(view) {
-  if (!view || !view.state) {
-    return [];
-  }
-
-  const widgetPluginInstance = view.plugin(widgetPlugin);
-  if (!widgetPluginInstance || !widgetPluginInstance.decorations) {
-    return [];
-  }
-
-  const widgets = [];
-
-  widgetPluginInstance.decorations.between(0, view.state.doc.length, (from, to, decoration) => {
-    if (decoration.widget instanceof BlockWidget) {
-      widgets.push({
-        type: decoration.widget.type,
-        from: decoration.widget.from,
-        to: decoration.widget.to,
-        index: decoration.widget.index,
-        id: decoration.widget.id,
-      });
-    }
-  });
-
-  return widgets;
-}
-
-export function getAllWidgetIds(view) {
-  if (!view || !view.state) {
-    return [];
-  }
-
-  const widgetPluginInstance = view.plugin(widgetPlugin);
-  if (!widgetPluginInstance || !widgetPluginInstance.decorations) {
-    return [];
-  }
-
-  const widgetIds = [];
-
-  widgetPluginInstance.decorations.between(0, view.state.doc.length, (from, to, decoration) => {
-    if (decoration.widget instanceof BlockWidget) {
-      widgetIds.push(decoration.widget.id);
-    }
-  });
-
-  return widgetIds;
-}
+export const widgetPlugin = [widgetField];
 
 // widget implementer API to create a new widget type
 export function registerWidget(type, fn) {

packages/core/controls.mjs

@@ -446,7 +446,7 @@ export const { accelerate } = registerControl('accelerate');
  * Sets the velocity from 0 to 1. Is multiplied together with gain.
  *
  * @name velocity
- * @tags amplitude, superdough, supradough
+ * @tags amplitude, superdough
  * @synonyms vel
  * @example
  * s("hh*8")
@@ -458,7 +458,7 @@ export const { velocity, vel } = registerControl('velocity', 'vel');
  * Controls the gain by an exponential amount.
  *
  * @name gain
- * @tags amplitude, superdough, supradough
+ * @tags amplitude, superdough
  * @param {number | Pattern} amount gain.
  * @example
  * s("hh*8").gain(".4!2 1 .4!2 1 .4 1").fast(2)
@@ -469,7 +469,7 @@ export const { gain } = registerControl('gain');
  * Gain applied after all effects have been processed.
  *
  * @name postgain
- * @tags amplitude, superdough, supradough
+ * @tags amplitude, superdough
  * @example
  * s("bd sd [~ bd] sd,hh*8")
  * .compressor("-20:20:10:.002:.02").postgain(1.5)
@@ -499,7 +499,7 @@ export const { amp } = registerControl('amp');
  * any of the 8 individual FMs (e.g. `fmh2`)
  *
  * @name fmh
- * @tags fm, superdough, supradough
+ * @tags fm, superdough
  * @param {number | Pattern} harmonicity
  * @example
  * note("c e g b g e")
@@ -520,7 +520,7 @@ export const { fmh, fmh1, fmh2, fmh3, fmh4, fmh5, fmh6, fmh7, fmh8 } = registerM
  * `fm3`
  *
  * @name fm
- * @tags fm, superdough, supradough
+ * @tags fm, superdough
  * @param {number | Pattern} brightness modulation index
  * @synonyms fmi
  * @example
@@ -544,7 +544,7 @@ export const { fmi, fmi1, fmi2, fmi3, fmi4, fmi5, fmi6, fmi7, fmi8, fm, fm1, fm2
  * any of the 8 individual FMs (e.g. `fmenv4`)
  *
  * @name fmenv
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough
  * @param {number | Pattern} type lin | exp
  * @synonyms fme
  * @example
@@ -569,7 +569,7 @@ export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fm
  * any of the 8 individual FMs (e.g. `fmatt5`)
  *
  * @name fmattack
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough
  * @synonyms fmatt
  * @param {number | Pattern} time attack time
  * @synonyms fmatt
@@ -608,7 +608,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmwave6`)
  *
  * @name fmwave
- * @tags fm, superdough, supradough
+ * @tags fm, superdough
  * @param {number | Pattern} wave waveform
  * @example
  * n("0 1 2 3".fast(4)).scale("d:minor").s("sine").fmwave("<sine square sawtooth crackle>").fm(4).fmh(2.01)
@@ -628,7 +628,7 @@ export const { fmwave, fmwave1, fmwave2, fmwave3, fmwave4, fmwave5, fmwave6, fmw
  * any of the 8 individual FMs (e.g. `fmdec6`)
  *
  * @name fmdecay
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough
  * @synonyms fmdec
  * @param {number | Pattern} time decay time
  * @synonyms fmdec
@@ -668,7 +668,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmsus7`)
  *
  * @name fmsustain
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough
  * @synonyms fmsus
  * @param {number | Pattern} level sustain level
  * @synonyms fmsus
@@ -708,7 +708,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmrel8`)
  *
  * @name fmrelease
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough
  * @synonyms fmrel
  * @param {number | Pattern} time release time
  *
@@ -778,7 +778,7 @@ export const { fft } = registerControl('fft');
  * Amplitude envelope attack time: Specifies how long it takes for the sound to reach its peak value, relative to the onset.
  *
  * @name attack
- * @tags amplitude, envelope, superdough, supradough
+ * @tags amplitude, envelope, superdough
  * @param {number | Pattern} attack time in seconds.
  * @synonyms att
  * @example
@@ -792,7 +792,7 @@ export const { attack, att } = registerControl('attack', 'att');
  * Note that the decay is only audible if the sustain value is lower than 1.
  *
  * @name decay
- * @tags amplitude, envelope, superdough, supradough
+ * @tags amplitude, envelope, superdough
  * @param {number | Pattern} time decay time in seconds
  * @synonyms dec
  * @example
@@ -804,7 +804,7 @@ export const { decay, dec } = registerControl('decay', 'dec');
  * Amplitude envelope sustain level: The level which is reached after attack / decay, being sustained until the offset.
  *
  * @name sustain
- * @tags amplitude, envelope, superdough, supradough
+ * @tags amplitude, envelope, superdough
  * @param {number | Pattern} gain sustain level between 0 and 1
  * @synonyms sus
  * @example
@@ -816,7 +816,7 @@ export const { sustain, sus } = registerControl('sustain', 'sus');
  * Amplitude envelope release time: The time it takes after the offset to go from sustain level to zero.
  *
  * @name release
- * @tags amplitude, envelope, superdough, supradough
+ * @tags amplitude, envelope, superdough
  * @param {number | Pattern} time release time in seconds
  * @synonyms rel
  * @example
@@ -831,7 +831,7 @@ export const { hold } = registerControl('hold');
  * can also optionally supply the 'bpq' parameter separated by ':'.
  *
  * @name bpf
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} frequency center frequency
  * @synonyms bandf, bp
  * @example
@@ -844,7 +844,7 @@ export const { bandf, bpf, bp } = registerControl(['bandf', 'bandq', 'bpenv'], '
  * Sets the **b**and-**p**ass **q**-factor (resonance).
  *
  * @name bpq
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} q q factor
  * @synonyms bandq
  * @example
@@ -923,7 +923,7 @@ export const { loopEnd, loope } = registerControl('loopEnd', 'loope');
  * Bit crusher effect.
  *
  * @name crush
- * @tags superdough, supradough
+ * @tags superdough
  * @param {number | Pattern} depth between 1 (for drastic reduction in bit-depth) to 16 (for barely no reduction).
  * @example
  * s("<bd sd>,hh*3").fast(2).crush("<16 8 7 6 5 4 3 2>")
@@ -935,7 +935,7 @@ export const { crush } = registerControl('crush');
  * Fake-resampling for lowering the sample rate. Caution: This effect seems to only work in chromium based browsers
  *
  * @name coarse
- * @tags superdough, supradough
+ * @tags superdough
  * @param {number | Pattern} factor 1 for original 2 for half, 3 for a third and so on.
  * @example
  * s("bd sd [~ bd] sd,hh*8").coarse("<1 4 8 16 32>")
@@ -1294,7 +1294,7 @@ export const { cut } = registerControl('cut');
  * When using mininotation, you can also optionally add the 'lpq' parameter, separated by ':'.
  *
  * @name lpf
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms cutoff, ctf, lp
  * @example
@@ -1308,7 +1308,7 @@ export const { cutoff, ctf, lpf, lp } = registerControl(['cutoff', 'resonance',
 /**
  * Sets the lowpass filter envelope modulation depth.
  * @name lpenv
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} modulation depth of the lowpass filter envelope between 0 and _n_
  * @synonyms lpe
  * @example
@@ -1322,7 +1322,7 @@ export const { lpenv, lpe } = registerControl('lpenv', 'lpe');
 /**
  * Sets the highpass filter envelope modulation depth.
  * @name hpenv
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} modulation depth of the highpass filter envelope between 0 and _n_
  * @synonyms hpe
  * @example
@@ -1336,7 +1336,7 @@ export const { hpenv, hpe } = registerControl('hpenv', 'hpe');
 /**
  * Sets the bandpass filter envelope modulation depth.
  * @name bpenv
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} modulation depth of the bandpass filter envelope between 0 and _n_
  * @synonyms bpe
  * @example
@@ -1350,7 +1350,7 @@ export const { bpenv, bpe } = registerControl('bpenv', 'bpe');
 /**
  * Sets the attack duration for the lowpass filter envelope.
  * @name lpattack
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} attack time of the filter envelope
  * @synonyms lpa
  * @example
@@ -1364,7 +1364,7 @@ export const { lpattack, lpa } = registerControl('lpattack', 'lpa');
 /**
  * Sets the attack duration for the highpass filter envelope.
  * @name hpattack
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} attack time of the highpass filter envelope
  * @synonyms hpa
  * @example
@@ -1378,7 +1378,7 @@ export const { hpattack, hpa } = registerControl('hpattack', 'hpa');
 /**
  * Sets the attack duration for the bandpass filter envelope.
  * @name bpattack
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} attack time of the bandpass filter envelope
  * @synonyms bpa
  * @example
@@ -1392,7 +1392,7 @@ export const { bpattack, bpa } = registerControl('bpattack', 'bpa');
 /**
  * Sets the decay duration for the lowpass filter envelope.
  * @name lpdecay
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} decay time of the filter envelope
  * @synonyms lpd
  * @example
@@ -1406,7 +1406,7 @@ export const { lpdecay, lpd } = registerControl('lpdecay', 'lpd');
 /**
  * Sets the decay duration for the highpass filter envelope.
  * @name hpdecay
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} decay time of the highpass filter envelope
  * @synonyms hpd
  * @example
@@ -1421,7 +1421,7 @@ export const { hpdecay, hpd } = registerControl('hpdecay', 'hpd');
 /**
  * Sets the decay duration for the bandpass filter envelope.
  * @name bpdecay
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} decay time of the bandpass filter envelope
  * @synonyms bpd
  * @example
@@ -1436,7 +1436,7 @@ export const { bpdecay, bpd } = registerControl('bpdecay', 'bpd');
 /**
  * Sets the sustain amplitude for the lowpass filter envelope.
  * @name lpsustain
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} sustain amplitude of the lowpass filter envelope
  * @synonyms lps
  * @example
@@ -1451,7 +1451,7 @@ export const { lpsustain, lps } = registerControl('lpsustain', 'lps');
 /**
  * Sets the sustain amplitude for the highpass filter envelope.
  * @name hpsustain
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} sustain amplitude of the highpass filter envelope
  * @synonyms hps
  * @example
@@ -1466,7 +1466,7 @@ export const { hpsustain, hps } = registerControl('hpsustain', 'hps');
 /**
  * Sets the sustain amplitude for the bandpass filter envelope.
  * @name bpsustain
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} sustain amplitude of the bandpass filter envelope
  * @synonyms bps
  * @example
@@ -1481,7 +1481,7 @@ export const { bpsustain, bps } = registerControl('bpsustain', 'bps');
 /**
  * Sets the release time for the lowpass filter envelope.
  * @name lprelease
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} release time of the filter envelope
  * @synonyms lpr
  * @example
@@ -1497,7 +1497,7 @@ export const { lprelease, lpr } = registerControl('lprelease', 'lpr');
 /**
  * Sets the release time for the highpass filter envelope.
  * @name hprelease
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} release time of the highpass filter envelope
  * @synonyms hpr
  * @example
@@ -1513,7 +1513,7 @@ export const { hprelease, hpr } = registerControl('hprelease', 'hpr');
 /**
  * Sets the release time for the bandpass filter envelope.
  * @name bprelease
- * @tags filter, envelope, superdough, supradough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} release time of the bandpass filter envelope
  * @synonyms bpr
  * @example
@@ -1558,7 +1558,7 @@ export const { fanchor } = registerControl('fanchor');
  * When using mininotation, you can also optionally add the 'hpq' parameter, separated by ':'.
  *
  * @name hpf
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms hp, hcutoff
  * @example
@@ -1781,7 +1781,7 @@ export const { hpskew } = registerControl('hpskew');
  * Applies a vibrato to the frequency of the oscillator.
  *
  * @name vib
- * @tags pitch, lfo, superdough, supradough
+ * @tags pitch, lfo, superdough
  * @synonyms vibrato, v
  * @param {number | Pattern} frequency of the vibrato in hertz
  * @example
@@ -1799,7 +1799,7 @@ export const { vib, vibrato, v } = registerControl(['vib', 'vibmod'], 'vibrato',
  * Adds pink noise to the mix
  *
  * @name noise
- * @tags generators, superdough, supradough
+ * @tags generators, superdough
  * @param {number | Pattern} wet wet amount
  * @example
  * sound("<white pink brown>/2")
@@ -1809,7 +1809,7 @@ export const { noise } = registerControl('noise');
  * Sets the vibrato depth in semitones. Only has an effect if `vibrato` | `vib` | `v` is is also set
  *
  * @name vibmod
- * @tags pitch, lfo, superdough, supradough
+ * @tags pitch, lfo, superdough
  * @synonyms vmod
  * @param {number | Pattern} depth of vibrato (in semitones)
  * @example
@@ -1828,7 +1828,7 @@ export const { hcutoff, hpf, hp } = registerControl(['hcutoff', 'hresonance', 'h
  * Controls the **h**igh-**p**ass **q**-value.
  *
  * @name hpq
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} q resonance factor between 0 and 50
  * @synonyms hresonance
  * @example
@@ -1840,7 +1840,7 @@ export const { hresonance, hpq } = registerControl('hresonance', 'hpq');
  * Controls the **l**ow-**p**ass **q**-value.
  *
  * @name lpq
- * @tags filter, superdough, supradough
+ * @tags filter, superdough
  * @param {number | Pattern} q resonance factor between 0 and 50
  * @synonyms resonance
  * @example
@@ -1870,7 +1870,7 @@ export const { djf } = registerControl('djf');
  *
  *
  * @name delay
- * @tags orbit, superdough, supradough
+ * @tags orbit, superdough
  * @param {number | Pattern} level between 0 and 1
  * @example
  * s("bd bd").delay("<0 .25 .5 1>")
@@ -1884,7 +1884,7 @@ export const { delay } = registerControl(['delay', 'delaytime', 'delayfeedback']
  * Caution: Values >= 1 will result in a signal that gets louder and louder! Don't do it
  *
  * @name delayfeedback
- * @tags orbit, superdough, supradough
+ * @tags orbit, superdough
  * @param {number | Pattern} feedback between 0 and 1
  * @synonyms delayfb, dfb
  * @example
@@ -1893,24 +1893,11 @@ export const { delay } = registerControl(['delay', 'delaytime', 'delayfeedback']
  */
 export const { delayfeedback, delayfb, dfb } = registerControl('delayfeedback', 'delayfb', 'dfb');
 
-/**
- * Sets the time of the delay effect.
- *
- * @name delayspeed
- * @tags supradough
- * @param {number | Pattern} delayspeed controls the pitch of the delay feedback
- * @synonyms delayt, dt
- * @example
- * note("d d a# a".fast(2)).s("sawtooth").delay(.8).delaytime(1/2).delayspeed("<2 .5 -1 -2>")
- *
- */
-export const { delayspeed } = registerControl('delayspeed');
-
 /**
  * Sets the time of the delay effect in seconds.
  *
  * @name delaytime
- * @tags orbit, superdough, supradough
+ * @tags orbit, superdough
  * @param {number | Pattern} delay in seconds
  * @synonyms delayt, dt
  * @example
@@ -1918,7 +1905,6 @@ export const { delayspeed } = registerControl('delayspeed');
  * .s("sawtooth")
  * .delay(.8)
  * .delaytime(1/2)
- * .delayspeed("<2 .5 -1 -2>")
  */
 export const { delaytime, delayt, dt } = registerControl('delaytime', 'delayt', 'dt');
 
@@ -2026,7 +2012,7 @@ export const { freq } = registerControl('freq');
  * Attack time of pitch envelope.
  *
  * @name pattack
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough
  * @synonyms patt
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2038,7 +2024,7 @@ export const { pattack, patt } = registerControl('pattack', 'patt');
  * Decay time of pitch envelope.
  *
  * @name pdecay
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough
  * @synonyms pdec
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2052,7 +2038,7 @@ export const { psustain, psus } = registerControl('psustain', 'psus');
  * Release time of pitch envelope
  *
  * @name prelease
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough
  * @synonyms prel
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2067,7 +2053,7 @@ export const { prelease, prel } = registerControl('prelease', 'prel');
  * If you don't set other pitch envelope controls, `pattack:.2` will be the default.
  *
  * @name penv
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough
  * @param {number | Pattern} semitones change in semitones
  * @example
  * note("c")
@@ -2248,7 +2234,7 @@ export const { overshape } = registerControl('overshape');
  * Sets position in stereo.
  *
  * @name pan
- * @tags superdough, supradough
+ * @tags superdough
  * @param {number | Pattern} pan between 0 and 1, from left to right (assuming stereo), once round a circle (assuming multichannel)
  * @example
  * s("[bd hh]*2").pan("<.5 1 .5 0>")
@@ -2506,7 +2492,7 @@ export const { shape } = registerControl(['shape', 'shapevol']);
  * Most useful values are usually between 0 and 10 (depending on source gain). If you are feeling adventurous, you can turn it up to 11 and beyond ;)
  *
  * @name distort
- * @tags distortion, superdough, supradough
+ * @tags distortion, superdough
  * @synonyms dist
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
@@ -2526,7 +2512,7 @@ export const { distort, dist } = registerControl(['distort', 'distortvol', 'dist
  *
  * @name distortvol
  * @synonyms distortion, distvol
- * @tags superdough, supradough
+ * @tags superdough
  * @param {number | Pattern} volume linear postgain of the distortion
  * @example
  * s("bd*4").bank("tr909").distort(2).distortvol(0.8)
@@ -2537,7 +2523,7 @@ export const { distortvol } = registerControl('distortvol', 'distvol');
  * Type of waveshaping distortion to apply.
  *
  * @name distorttype
- * @tags distortion, superdough, supradough
+ * @tags distortion, superdough
  * @synonyms disttype
  * @param {number | string | Pattern} type type of distortion to apply
  * @example

packages/core/evaluate.mjs

@@ -5,34 +5,6 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 export const strudelScope = {};
-// Make strudelScope available globally so transpiled code can access it
-globalThis.strudelScope = strudelScope;
-
-// Track user-defined keys (from block-based eval) so we can clear them without removing strudel functions
-export const userDefinedKeys = new Set();
-globalThis.userDefinedKeys = userDefinedKeys;
-
-/**
- * Clears all user-defined variables and functions from the scope.
- * This removes variables created during block-based evaluation.
- * @name clearScope
- * @example
- * // After defining variables in blocks:
- * // let myVar = 5
- * // function myFunc() { return 10; }
- * clearScope() // removes myVar and myFunc from scope
- */
-export const clearScope = () => {
-  for (const key of userDefinedKeys) {
-    delete strudelScope[key];
-    delete globalThis[key];
-  }
-  userDefinedKeys.clear();
-  // Return silence if available (for use in pattern expressions), otherwise undefined
-  return globalThis.silence;
-};
-// Make clearScope available globally
-globalThis.clearScope = clearScope;
 
 export const evalScope = async (...args) => {
   const results = await Promise.allSettled(args);

packages/core/repl.mjs

@@ -45,7 +45,6 @@ export function repl({
     pattern: undefined,
     miniLocations: [],
     widgets: [],
-    sliders: [],
     pending: false,
     started: false,
   };
@@ -87,132 +86,11 @@ export function repl({
   let allTransform;
   let eachTransform;
 
-  // Block-based evaluation state
-  let codeBlocks = {};
-  let lastActiveVisualizerLabel = null;
-  // Track which patterns belong to which blocks: { blockRange: [patternKeys] }
-  let blockPatterns = new Map();
-
-  // Helper function to collect properties from all code blocks (handles both labeled and anonymous blocks)
-  function collectFromBlocks(property) {
-    return Object.entries(codeBlocks).flatMap(([key, block]) => {
-      if (key === '$') {
-        // Anonymous blocks are stored as an array of block objects
-        return Array.isArray(block) ? block.flatMap((b) => b[property] || []) : [];
-      }
-      // Labeled blocks are stored as single block objects
-      return block[property] || [];
-    });
-  }
-
-  // Helper function to process a single labeled block
-  function processLabeledBlock(labels, i, code, options, meta) {
-    const label = labels[i];
-    const nextLabel = labels[i + 1] || { index: code.length, end: code.length };
-
-    const labelCode = code.slice(label.index, nextLabel.index);
-    const labelRange = [label.index + options.range[0], label.end + options.range[0]];
-
-    // Calculate the full block range (from label start to next label start)
-    const blockStart = label.index + options.range[0];
-    const blockEnd = nextLabel.index + options.range[0];
-
-    const blockWidgets = (meta?.widgets || []).filter((widget) => {
-      const widgetPos = widget.from ?? widget.index ?? 0;
-      return widgetPos >= blockStart && widgetPos < blockEnd;
-    });
-
-    const blockSliders = (meta?.sliders || []).filter((slider) => {
-      const sliderPos = slider.from ?? slider.index ?? 0;
-      return sliderPos >= blockStart && sliderPos < blockEnd;
-    });
-
-    const blockMiniLocations = (meta?.miniLocations || []).filter((loc) => {
-      // const locStart = loc.start ?? loc.from ?? 0;
-      // mini locations can be either [start, end] arrays or objects with start/from
-      const locStart = Array.isArray(loc) ? loc[0] : (loc.start ?? loc.from ?? 0);
-      return locStart >= blockStart && locStart < blockEnd;
-    });
-
-    handleSingleLabelBlock(
-      label,
-      labelCode,
-      { ...options, range: labelRange },
-      { widgets: blockWidgets, sliders: blockSliders, miniLocations: blockMiniLocations },
-    );
-  }
-
-  // helper
-  function cleanupConflictingRanges(codeBlocks, currentKey, newRange) {
-    for (const [existingKey, existingBlock] of Object.entries(codeBlocks)) {
-      if (existingKey === currentKey) continue;
-      if (!existingBlock.range) continue;
-
-      const [existingStart, existingEnd] = existingBlock.range;
-      const [newStart, newEnd] = newRange;
-
-      // If ranges overlap (not just touch), remove the stale block
-      if (!(newEnd <= existingStart || newStart >= existingEnd)) {
-        delete codeBlocks[existingKey];
-      }
-    }
-  }
-
-  // helper
-  function handleSingleLabelBlock(label, code, options, meta) {
-    // Detect if this block contains a non-inline widget
-    // The activeVisualizer is now provided by the transpiler for all labels
-    const activeVisualizer = label.activeVisualizer || null;
-
-    if (activeVisualizer !== null) {
-      lastActiveVisualizerLabel = label.name;
-    }
-
-    // Store the entire code block under the label name
-    codeBlocks[label.name] = {
-      code: code,
-      range: options.range,
-      labels: [label.name],
-      miniLocations: meta?.miniLocations || [],
-      widgets: meta?.widgets || [],
-      sliders: meta?.sliders || [],
-      activeVisualizer: activeVisualizer, // Store the widget type if present, null otherwise
-    };
-
-    // Clean up any blocks with conflicting ranges (including declaration blocks)
-    cleanupConflictingRanges(codeBlocks, label.name, options.range);
-  }
-
-  // helper
-  // These blocks return silence but may contain mini notation strings that need highlighting
-  function handleDeclarationBlock(code, options, meta) {
-    const range = options.range || [];
-    if (range.length < 2) return;
-
-    const blockKey = `_decl:${range[0]}:${range[1]}`;
-
-    codeBlocks[blockKey] = {
-      code: code,
-      range: range,
-      labels: [],
-      miniLocations: meta?.miniLocations || [],
-      widgets: meta?.widgets || [],
-      sliders: meta?.sliders || [],
-      activeVisualizer: null,
-    };
-
-    // Clean up any overlapping declaration blocks
-    cleanupConflictingRanges(codeBlocks, blockKey, range);
-  }
-
   const hush = function () {
     pPatterns = {};
     anonymousIndex = 0;
     allTransform = undefined;
     eachTransform = undefined;
-    codeBlocks = {};
-    blockPatterns.clear();
-    lastActiveVisualizerLabel = null; // Reset 'all' visualizer tracking
     return silence;
   };
 
@@ -233,60 +111,7 @@ export function repl({
   setTime(() => scheduler.now()); // TODO: refactor?
   setClockTime(() => scheduler.getTime()); // TODO: refactor?
 
-  // Helper function to apply pattern transformations (solo, each, all)
-  // this should be abstracted more
-  function applyPatternTransforms(pattern) {
-    const allPatterns = Object.values(pPatterns);
-
-    if (allPatterns.length) {
-      let patterns = [];
-      let soloActive = false;
-      for (const [key, value] of Object.entries(pPatterns)) {
-        // handle soloed patterns ex: S$: s("bd!4")
-        const isSolod = key.length > 1 && key.startsWith('S');
-        if (isSolod && soloActive === false) {
-          // first time we see a soloed pattern, clear existing patterns
-          patterns = [];
-          soloActive = true;
-        }
-        if (!soloActive || (soloActive && isSolod)) {
-          const valWithState = value.withState((state) => state.setControls({ id: key }));
-          patterns.push(valWithState);
-        }
-      }
-      if (eachTransform) {
-        // Explicit lambda so only element (not index and array) are passed
-        patterns = patterns.map((x) => eachTransform(x));
-      }
-      pattern = stack(...patterns);
-    } else if (eachTransform) {
-      pattern = eachTransform(pattern);
-    }
-    if (allTransforms.length) {
-      for (const transform of allTransforms) {
-        pattern = transform(pattern);
-      }
-    }
-
-    if (!isPattern(pattern)) {
-      pattern = silence;
-    }
-
-    return pattern;
-  }
-
-  const stop = () => {
-    codeBlocks = {};
-    blockPatterns.clear();
-    pPatterns = {};
-    lastActiveVisualizerLabel = null; // Reset 'all' visualizer tracking
-    updateState({
-      miniLocations: [],
-      widgets: [],
-      sliders: [],
-    });
-    scheduler.stop();
-  };
+  const stop = () => scheduler.stop();
   const start = () => scheduler.start();
   const pause = () => scheduler.pause();
   const toggle = () => scheduler.toggle();
@@ -407,7 +232,7 @@ export function repl({
     });
   };
 
-  const evaluate = async (code, autostart = true) => {
+  const evaluate = async (code, autostart = true, shouldHush = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
@@ -416,132 +241,47 @@ export function repl({
       await injectPatternMethods();
       setTime(() => scheduler.now()); // TODO: refactor?
       setClockTime(() => scheduler.getTime()); // TODO: refactor?
-      await beforeEval?.({ code, blockBased: false });
+      await beforeEval?.({ code });
       allTransforms = []; // reset all transforms
-
-      codeBlocks = {};
-      hush();
+      shouldHush && hush();
 
       if (mondo) {
         code = `mondolang\`${code}\``;
       }
-
       let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
-
-      pattern = applyPatternTransforms(pattern);
-
-      logger(`[eval] code updated`);
-      pattern = await setPattern(pattern, autostart);
-      updateState({
-        miniLocations: meta?.miniLocations || [],
-        widgets: meta?.widgets || [],
-        sliders: meta?.sliders || [],
-        activeCode: code,
-        pattern,
-        evalError: undefined,
-        schedulerError: undefined,
-        pending: false,
-      });
-
-      afterEval?.({ code, pattern, meta, range: undefined, widgetRemoved: false });
-      return pattern;
-    } catch (err) {
-      logger(`[eval] error: ${err.message}`, 'error');
-      console.error(err);
-      updateState({ evalError: err, pending: false });
-      onEvalError?.(err);
-    }
-  };
-
-  const evaluateBlock = async (code, autostart = true, options = {}) => {
-    if (!code) {
-      throw new Error('no code to evaluate');
-    }
-    try {
-      updateState({ code, pending: true });
-      await injectPatternMethods();
-      setTime(() => scheduler.now()); // TODO: refactor?
-      setClockTime(() => scheduler.getTime()); // TODO: refactor?
-      await beforeEval?.({ code, blockBased: true });
-      allTransforms = []; // reset all transforms
-
-      const transpilerOptionsWithBlock = {
-        ...transpilerOptions,
-        blockBased: true,
-        range: options.range || [],
-      };
-
-      if (mondo) {
-        code = `mondolang\`${code}\``;
-      }
-
-      let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptionsWithBlock);
-
-      // Track activeVisualizer cleanup: check if any block's visualizer was removed
-      let widgetRemoved = false;
-
-      const labels = meta.labels || [];
-
-      // Check for anonymous labels (labels starting with '$')
-      const hasAnonymousLabel = labels.some((label) => label.name.startsWith('$'));
-
-      // Store code blocks in dictionary using labels as keys
-      if (hasAnonymousLabel) {
-        // variable/function declarations that don't return patterns are allowed,
-        // but anonymous pattern blocks pose an issue for block-based evaluation
-        // if an anonymous pattern is evaluated multiple times it will just stack and get louder and louder
-
-        // it's very common for users to write code prefixed with '$'
-        // but to modify and override existing patterns, the patterns must be labeled,
-        // otherwise we'll have no idea of which pattern is being overridden
-
-        // (we probably need to update the docs on this)
-        // we could easily enable it, but it would confuse a lot of people
-
-        throw new Error(
-          'anonymous labels disabled for block based evaluation (see https://strudel.cc/blog/#label-notation)',
-        );
-      } else if (labels.length > 0) {
-        for (let i = 0; i < labels.length; i++) {
-          // processing transpiler output instead of code is simply to avoid
-          // extra regex in detecting whether or not an inline widget has been commented out
-          processLabeledBlock(labels, i, meta.output, options, meta);
-        }
-      } else {
-        // Declaration block (variable/function that returns silence)
-        // Store it so its miniLocations are preserved for highlighting patterns stored in variables
-        handleDeclarationBlock(code, options, meta);
-      }
-
-      meta.miniLocations = collectFromBlocks('miniLocations');
-      meta.widgets = collectFromBlocks('widgets');
-      meta.sliders = collectFromBlocks('sliders');
-
-      // Track activeVisualizer cleanup: check if any block's visualizer was removed
-      const blocksToUpdate = labels.map((label) => label.name);
-
-      // this is the hackiest bit
-      for (const [key, block] of Object.entries(codeBlocks)) {
-        if (blocksToUpdate.includes(key)) {
-          // This block was just updated
-          if (block.activeVisualizer !== null) {
-            // Block now has a visualizer, update tracking
-            lastActiveVisualizerLabel = key;
-          } else if (lastActiveVisualizerLabel === key) {
-            // This block lost its visualizer, trigger cleanup
-            widgetRemoved = true;
-            lastActiveVisualizerLabel = null;
+      if (Object.keys(pPatterns).length) {
+        let patterns = [];
+        let soloActive = false;
+        for (const [key, value] of Object.entries(pPatterns)) {
+          // handle soloed patterns ex: S$: s("bd!4")
+          const isSolod = key.length > 1 && key.startsWith('S');
+          if (isSolod && soloActive === false) {
+            // first time we see a soloed pattern, clear existing patterns
+            patterns = [];
+            soloActive = true;
+          }
+          if (!soloActive || (soloActive && isSolod)) {
+            const valWithState = value.withState((state) => state.setControls({ id: key }));
+            patterns.push(valWithState);
           }
         }
+        if (eachTransform) {
+          // Explicit lambda so only element (not index and array) are passed
+          patterns = patterns.map((x) => eachTransform(x));
+        }
+        pattern = stack(...patterns);
+      } else if (eachTransform) {
+        pattern = eachTransform(pattern);
+      }
+      if (allTransforms.length) {
+        for (const transform of allTransforms) {
+          pattern = transform(pattern);
+        }
       }
 
-      pPatterns = Object.fromEntries(
-        Object.entries(pPatterns).filter(([key]) => {
-          return Object.keys(codeBlocks).includes(key);
-        }),
-      );
-
-      pattern = applyPatternTransforms(pattern);
+      if (!isPattern(pattern)) {
+        pattern = silence;
+      }
 
       logger(`[eval] code updated`);
       pattern = await setPattern(pattern, autostart);
@@ -556,7 +296,7 @@ export function repl({
         pending: false,
       });
 
-      afterEval?.({ code, pattern, meta, range: options.range, widgetRemoved });
+      afterEval?.({ code, pattern, meta });
       return pattern;
     } catch (err) {
       logger(`[eval] error: ${err.message}`, 'error');
@@ -567,7 +307,7 @@ export function repl({
   };
 
   const setCode = (code) => updateState({ code });
-  return { scheduler, evaluate, evaluateBlock, start, stop, pause, setCps, setPattern, setCode, toggle, state };
+  return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle, state };
 }
 
 export const getSchedule =

packages/draw/draw.mjs

@@ -78,16 +78,6 @@ export const cleanupDraw = (clearScreen = true, id) => {
   stopAllAnimations(id);
 };
 
-export const cleanupDrawContext = (replID) => {
-  const ctx = getDrawContext();
-  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-  // clear the big canvas context, ignore inline widgets
-  Object.keys(animationFrames).forEach(
-    (id) => (!replID || id.startsWith(replID)) && !id.startsWith('_') && stopAnimationFrame(id),
-  );
-};
-
 Pattern.prototype.onPaint = function (painter) {
   return this.withState((state) => {
     if (!state.controls.painters) {

packages/hs2js/package.json

@@ -29,10 +29,10 @@
   },
   "homepage": "https://codeberg.org/uzu/strudel/",
   "dependencies": {
-    "web-tree-sitter": "^0.24.7"
+    "web-tree-sitter": "^0.24.7",
+    "tree-sitter-haskell": "^0.23.1"
   },
   "devDependencies": {
-    "tree-sitter-haskell": "^0.23.1",
     "vite": "^6.0.11"
   },
   "engines": {

packages/hs2js/src/parser.mjs

@@ -1,6 +1,8 @@
 import Parser from 'web-tree-sitter';
+import treeSitterWasm from 'web-tree-sitter/tree-sitter.wasm?url';
+import grammarWasm from 'tree-sitter-haskell/tree-sitter-haskell.wasm?url';
 
-let base = '/';
+let base;
 export function setBase(path) {
   base = path;
 }
@@ -10,11 +12,15 @@ let isReady = false,
 async function _loadParser() {
   await Parser.init({
     locateFile(scriptName, scriptDirectory) {
-      return `${base}${scriptName}`;
+      if (base) {
+        return `${base}${scriptName}`;
+      }
+      return treeSitterWasm;
     },
   });
   parser = new Parser();
-  const Lang = await Parser.Language.load(`${base}tree-sitter-haskell.wasm`);
+  let grammarUrl = base ? `${base}tree-sitter-haskell.wasm` : grammarWasm;
+  const Lang = await Parser.Language.load(grammarUrl);
   parser.setLanguage(Lang);
   isReady = true;
   return parser;

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/supradough/.gitignore

@@ -1 +0,0 @@
-pattern.wav

packages/supradough/README.md

@@ -1,3 +0,0 @@
-# supradough
-
-platform agnostic synth and sampler intended for live coding. a reimplementation of superdough.

packages/supradough/dough-export.mjs

@@ -1,123 +0,0 @@
-// this is a poc of how a pattern can be rendered as a wav file using node
-// run via: node dough-export.mjs
-import fs from 'node:fs';
-import WavEncoder from 'wav-encoder';
-import { evalScope } from '@strudel/core';
-import { miniAllStrings } from '@strudel/mini';
-import { Dough } from './dough.mjs';
-
-await evalScope(
-  import('@strudel/core'),
-  import('@strudel/mini'),
-  import('@strudel/tonal'),
-  // import('@strudel/tonal'),
-);
-
-miniAllStrings(); // allows using single quotes for mini notation / skip transpilation
-
-let sampleRate = 48000,
-  cps = 0.4;
-
-/* await doughsamples('github:eddyflux/crate');
-await doughsamples('github:eddyflux/wax'); */
-
-let pat = note('c,eb,g,<bb c4 d4 eb4>')
-  .s('sine')
-  .press()
-  .add(note(24))
-  .fmi(3)
-  .fmh(5.01)
-  .dec(0.4)
-  .delay('.6:<.12 .22>:.8')
-  .jux(press)
-  .rarely(add(note('12')))
-  .lpf(400)
-  .lpq(0.2)
-  .lpd(0.4)
-  .lpenv(3)
-  .fmdecay(0.4)
-  .fmenv(1)
-  .postgain(0.6)
-  .stack(s('<pink white>*8').dec(0.07).rarely(ply('2')).delay(0.5).hpf(sine.range(200, 2000).slow(4)).hpq(0.2))
-  .stack(
-    s('[- white@3]*2')
-      .dec(0.4)
-      .hpf('<2000!3 <4000 8000>>*4')
-      .hpq(0.6)
-      .ply('<1 2>*4')
-      .postgain(0.5)
-      .delay(0.5)
-      .jux(rev)
-      .lpf(5000),
-  )
-  .stack(
-    note('<c2 - [- f1] ->*2')
-      .s('square')
-      .lpf(sine.range(100, 300).slow(4))
-      .lpe(1)
-      .segment(8)
-      .lpd(0.3)
-      .lpq(0.2)
-      .dec(0.2)
-      .speed('<1 2>')
-      .ply('<1 2>')
-      .postgain(1),
-  )
-  .stack(
-    chord('<Cm Cm7 Cm9 Cm11 Fm Fm7 Fm9 Fm11>')
-      .voicing()
-      .s('<sine>')
-      .clip(1)
-      .rel(0.4)
-      .vib('4:.2')
-      .gain(0.7)
-      .hpf(1200)
-      .fm(0.5)
-      .att(1)
-      .lpa(0.5)
-      .lpf(200)
-      .lpenv(4)
-      .chorus(0.8),
-  )
-  .slow(1 / cps);
-
-let cycles = 30;
-let seconds = cycles + 1; // 1s release tail
-const haps = pat.queryArc(0, cycles);
-
-const dough = new Dough(sampleRate);
-
-console.log('spawn voices...');
-haps.forEach((hap) => {
-  hap.value._begin = Number(hap.whole.begin);
-  hap.value._duration = hap.duration /*  / cps */;
-  dough.scheduleSpawn(hap.value);
-});
-console.log(`render ${seconds}s long buffer, each dot is 1 second:`);
-const buffers = [new Float32Array(seconds * sampleRate), new Float32Array(seconds * sampleRate)];
-let t = performance.now();
-while (dough.t <= buffers[0].length) {
-  dough.update();
-  buffers[0][dough.t] = dough.out[0];
-  buffers[1][dough.t] = dough.out[1];
-  if (dough.t % sampleRate === 0) {
-    process.stdout.write('.');
-  }
-}
-const took = (performance.now() - t) / 1000;
-const load = (took / seconds) * 100;
-const speed = (seconds / took).toFixed(2);
-console.log('');
-console.log(`done!
-rendered ${seconds}s in ${took.toFixed(2)}s 
-speed: ${speed}x
-load: ${load.toFixed(2)}%`);
-
-const patternAudio = {
-  sampleRate,
-  channelData: buffers,
-};
-
-WavEncoder.encode(patternAudio).then((buffer) => {
-  fs.writeFileSync('pattern.wav', new Float32Array(buffer));
-});

packages/supradough/dough-worklet.mjs

@@ -1,39 +0,0 @@
-import { Dough } from './dough.mjs';
-
-const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-
-class DoughProcessor extends AudioWorkletProcessor {
-  constructor() {
-    super();
-    this.dough = new Dough(sampleRate, currentTime);
-    this.port.onmessage = (event) => {
-      if (event.data.spawn) {
-        this.dough.scheduleSpawn(event.data.spawn);
-      } else if (event.data.sample) {
-        this.dough.loadSample(event.data.sample, event.data.channels, event.data.sampleRate);
-      } else if (event.data.samples) {
-        event.data.samples.forEach(([name, channels, sampleRate]) => {
-          this.dough.loadSample(name, channels, sampleRate);
-        });
-      } else {
-        console.log('unrecognized event type', event.data);
-      }
-    };
-  }
-  process(inputs, outputs, params) {
-    if (this.disconnected) {
-      return false;
-    }
-    const output = outputs[0];
-    for (let i = 0; i < output[0].length; i++) {
-      this.dough.update();
-      for (let c = 0; c < output.length; c++) {
-        //prevent speaker blowout via clipping if threshold exceeds
-        output[c][i] = clamp(this.dough.out[c], -1, 1);
-      }
-    }
-    return true; // keep the audio processing going
-  }
-}
-
-registerProcessor('dough-processor', DoughProcessor);

packages/supradough/index.mjs

@@ -1,5 +0,0 @@
-// import _workletUrl from './dough-worklet.mjs?url'; // only for dev (breaks for production build)
-import _workletUrl from './dough-worklet.mjs?audioworklet'; // only for prod (breaks in development?!)
-
-export * from './dough.mjs';
-export const workletUrl = _workletUrl;

packages/supradough/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "supradough",
-  "version": "1.2.4",
-  "description": "platform agnostic synth and sampler intended for live coding. a reimplementation of superdough.",
-  "main": "index.mjs",
-  "type": "module",
-  "publishConfig": {
-    "main": "dist/index.mjs"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://codeberg.org/uzu/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://codeberg.org/uzu/strudel/issues"
-  },
-  "homepage": "https://codeberg.org/uzu/strudel#readme",
-  "devDependencies": {
-    "vite": "^6.0.11",
-    "vite-plugin-bundle-audioworklet": "workspace:*",
-    "wav-encoder": "^1.3.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}

packages/supradough/vite.config.js

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import bundleAudioWorkletPlugin from 'vite-plugin-bundle-audioworklet';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [bundleAudioWorkletPlugin()],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'index.mjs'),
-      formats: ['es'],
-      fileName: (ext) => ({ es: 'index.mjs' })[ext],
-    },
-    target: 'esnext',
-  },
-});

packages/tidal/package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "description": "Experimental Tidal Code interpreter",
+  "main": "tidal.mjs",
   "module": "tidal.mjs",
   "repository": {
     "type": "git",

packages/transpiler/plugin-widgets.mjs

@@ -39,15 +39,11 @@ const sliderTranspilerPlugin = {
       if (!isSliderFunction(node)) return;
       context.widgets ??= [];
       context.sliders ??= [];
-      const { options, widgets, sliders, nodeOffset } = context;
+      const { options, widgets, sliders } = context;
       const { emitWidgets } = options;
-      const from = node.arguments[0].start + nodeOffset;
-      const to = node.arguments[0].end + nodeOffset;
-      const id = `${from}:${to}`; // Range-based ID for stability
       const sliderConfig = {
-        from,
-        to,
-        id,
+        from: node.arguments[0].start,
+        to: node.arguments[0].end,
         value: node.arguments[0].raw, // don't use value!
         min: node.arguments[1]?.value ?? 0,
         max: node.arguments[2]?.value ?? 1,
@@ -56,7 +52,7 @@ const sliderTranspilerPlugin = {
       };
       emitWidgets && widgets.push(sliderConfig);
       sliders.push(sliderConfig);
-      return this.replace(sliderWithLocation(node, nodeOffset));
+      return this.replace(sliderWithLocation(node));
     },
   }),
 };
@@ -73,13 +69,8 @@ function isWidgetMethod(node) {
   return node.type === 'CallExpression' && widgetMethods.includes(node.callee.property?.name);
 }
 
-function sliderWithLocation(node, nodeOffset = 0) {
-  // Apply nodeOffset for block-based evaluation to generate correct range
-  const from = node.arguments[0].start + nodeOffset;
-  const to = node.arguments[0].end + nodeOffset;
-
-  // Use range-based ID for stability during block evaluation
-  const id = `${from}:${to}`;
+function sliderWithLocation(node) {
+  const id = 'slider_' + node.arguments[0].start; // use loc of first arg for id
 
   // add loc as identifier to first argument
   // the sliderWithID function is assumed to be sliderWithID(id, value, min?, max?)
@@ -95,19 +86,10 @@ function sliderWithLocation(node, nodeOffset = 0) {
 export function getWidgetID(widgetConfig) {
   // the widget id is used as id for the dom element + as key for eventual resources
   // for example, for each scope widget, a new analyser + buffer (large) is created
-  // Update: use range-based ID generation for better stability during block evaluation
-  // When we have both from and to, use them together for stability
-  // Otherwise fall back to position-based ID for backward compatibility
-  let uniqueIdentifier;
-  if (widgetConfig.from !== undefined && widgetConfig.to !== undefined) {
-    // Use range for more stable identification
-    uniqueIdentifier = `${widgetConfig.from}-${widgetConfig.to}`;
-  } else {
-    // Fallback to single position (for backward compatibility)
-    uniqueIdentifier = widgetConfig.to || widgetConfig.from || 0;
-  }
-  const baseId = `${widgetConfig.id || ''}_widget_${widgetConfig.type}`;
-  return `${baseId}_${widgetConfig.index}_${uniqueIdentifier}`;
+  // that means, if we use the index index of line position as id, less garbage is generated
+  // return `widget_${widgetConfig.to}`; // more gargabe
+  //return `widget_${widgetConfig.index}_${widgetConfig.to}`; // also more garbage
+  return `${widgetConfig.id || ''}_widget_${widgetConfig.type}_${widgetConfig.index}`; // less garbage
 }
 
 function widgetWithLocation(node, widgetConfig) {

packages/transpiler/transpiler.mjs

@@ -35,12 +35,10 @@ export function transpiler(input, options = {}) {
     addReturn: true,
     emitMiniLocations: true,
     emitWidgets: true,
-    blockBased: false,
-    range: [],
     ...options,
   };
 
-  const { wrapAsync, addReturn, emitMiniLocations, emitWidgets, blockBased, range } = options;
+  const { wrapAsync, addReturn, emitMiniLocations, emitWidgets } = options;
 
   const comments = [];
   let ast = parse(input, {
@@ -52,67 +50,21 @@ export function transpiler(input, options = {}) {
 
   let miniDisableRanges = findMiniDisableRanges(comments, input.length);
 
-  // Position offset for block-based evaluation
-  let nodeOffset = range && range.length > 0 ? range[0] : 0;
-
-  // Track declarations to add to strudelScope for block-based eval
-  let scopeDeclarations = [];
-
   let labels = [];
 
-  const context = { options, input, nodeOffset, miniDisableRanges, labels };
+  const context = { options, input, miniDisableRanges, labels };
   const plugins = getPlugins().map((plugin) => plugin.walk?.(context));
 
   walk(ast, {
     enter(node, parent, prop, index) {
-      // Apply position offset for block-based evaluation
-      if (blockBased && node.start !== undefined) {
-        node.start = node.start + nodeOffset;
-        node.end = node.end + nodeOffset;
-      }
-      // Collect variable and function declarations for strudelScope (block-based eval)
-      if (blockBased && parent?.type === 'Program') {
-        if (node.type === 'VariableDeclaration') {
-          for (const declarator of node.declarations) {
-            if (declarator.id?.name) {
-              scopeDeclarations.push(declarator.id.name);
-            }
-          }
-        } else if (node.type === 'FunctionDeclaration' && node.id?.name) {
-          scopeDeclarations.push(node.id.name);
-        }
-      }
-
       for (const plugin of plugins) {
         if (!plugin?.enter?.call(this, node, parent, prop, index)) continue;
         return;
       }
 
       if (isLabelStatement(node)) {
-        // Collect label info for block-based evaluation
-        // Store positions WITHOUT offset so repl can slice the transpiler output correctly
-        if (blockBased) {
-          labels.push({
-            name: node.label.name,
-            index: node.start - nodeOffset,
-            end: node.label.end - nodeOffset,
-            fullMatch: input.slice(node.start - nodeOffset, node.label.end - nodeOffset),
-            activeVisualizer: findVisualizerInSubtree(node.body),
-          });
-        }
         return this.replace(labelToP(node));
       }
-      // Detect all() calls as special labels for block management
-      // Store positions WITHOUT offset so repl can slice the transpiler output correctly
-      if (blockBased && isAllCall(node)) {
-        labels.push({
-          name: 'all',
-          index: node.start - nodeOffset,
-          end: node.end - nodeOffset,
-          fullMatch: input.slice(node.start - nodeOffset, node.end - nodeOffset),
-          activeVisualizer: node.arguments[0] ? findVisualizerInSubtree(node.arguments[0]) : null,
-        });
-      }
     },
 
     leave(node, parent, prop, index) {
@@ -141,14 +93,6 @@ export function transpiler(input, options = {}) {
     body.push(silenceExpression);
   }
 
-  // For block-based eval, add scope assignments before the return statement
-  // This allows variables/functions defined in one block to be used in other blocks
-  if (blockBased && scopeDeclarations.length > 0) {
-    const scopeAssignments = scopeDeclarations.flatMap((name) => createScopeAssignment(name));
-    // Insert scope assignments before the last statement (which will become the return)
-    body.splice(body.length - 1, 0, ...scopeAssignments);
-  }
-
   // add return to last statement
   if (addReturn) {
     const { expression } = body[body.length - 1];
@@ -166,7 +110,7 @@ export function transpiler(input, options = {}) {
   }
 
   let pluginContext;
-  ({ options, input, miniDisableRanges, nodeOffset, ...pluginContext } = context);
+  ({ options, input, miniDisableRanges, ...pluginContext } = context);
 
   return { output, ...pluginContext };
 }

packages/webaudio/index.mjs

@@ -7,5 +7,4 @@ This program is free software: you can redistribute it and/or modify it under th
 export * from './webaudio.mjs';
 export * from './scope.mjs';
 export * from './spectrum.mjs';
-export * from './supradough.mjs';
 export * from 'superdough';

packages/webaudio/package.json

@@ -35,8 +35,7 @@
   "dependencies": {
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
-    "superdough": "workspace:*",
-    "supradough": "workspace:*"
+    "superdough": "workspace:*"
   },
   "devDependencies": {
     "vite": "^6.0.11"

packages/webaudio/supradough.mjs

@@ -1,130 +0,0 @@
-import { Pattern } from '@strudel/core';
-import { connectToDestination, getAudioContext, getWorklet } from 'superdough';
-
-let doughWorklet;
-
-function initDoughWorklet() {
-  const ac = getAudioContext();
-  doughWorklet = getWorklet(
-    ac,
-    'dough-processor',
-    {},
-    {
-      outputChannelCount: [2],
-    },
-  );
-  connectToDestination(doughWorklet); // channels?
-}
-
-const soundMap = new Map();
-const loadedSounds = new Map();
-
-Pattern.prototype.supradough = function () {
-  return this.onSchedule((hap, begin, cps) => {
-    hap.value._begin = begin;
-    hap.value._duration = hap.duration / cps;
-    !doughWorklet && initDoughWorklet();
-    const s = (hap.value.bank ? hap.value.bank + '_' : '') + hap.value.s;
-    const n = hap.value.n ?? 0;
-    const soundKey = `${s}:${n}`;
-    if (soundMap.has(s)) {
-      hap.value.s = soundKey; // dough.mjs is unaware of bank and n (only maps keys to buffers)
-    }
-    if (soundMap.has(s) && !loadedSounds.has(soundKey)) {
-      const urls = soundMap.get(s);
-      const url = urls[n % urls.length];
-      console.log(`load ${soundKey} from ${url}`);
-      const loadSample = fetchSample(url);
-      loadedSounds.set(soundKey, loadSample);
-      loadSample.then(({ channels, sampleRate }) =>
-        doughWorklet.port.postMessage({
-          sample: soundKey,
-          channels,
-          sampleRate,
-        }),
-      );
-    }
-
-    doughWorklet.port.postMessage({ spawn: hap.value });
-  }, 1);
-};
-
-function githubPath(base, subpath = '') {
-  if (!base.startsWith('github:')) {
-    throw new Error('expected "github:" at the start of pseudoUrl');
-  }
-  let [_, path] = base.split('github:');
-  path = path.endsWith('/') ? path.slice(0, -1) : path;
-  if (path.split('/').length === 2) {
-    // assume main as default branch if none set
-    path += '/main';
-  }
-  return `https://raw.githubusercontent.com/${path}/${subpath}`;
-}
-export async function _fetchSampleMap(url) {
-  if (url.startsWith('github:')) {
-    url = githubPath(url, 'strudel.json');
-  }
-  if (url.startsWith('local:')) {
-    url = `http://localhost:5432`;
-  }
-  if (url.startsWith('shabda:')) {
-    let [_, path] = url.split('shabda:');
-    url = `https://shabda.ndre.gr/${path}.json?strudel=1`;
-  }
-  if (url.startsWith('shabda/speech')) {
-    let [_, path] = url.split('shabda/speech');
-    path = path.startsWith('/') ? path.substring(1) : path;
-    let [params, words] = path.split(':');
-    let gender = 'f';
-    let language = 'en-GB';
-    if (params) {
-      [language, gender] = params.split('/');
-    }
-    url = `https://shabda.ndre.gr/speech/${words}.json?gender=${gender}&language=${language}&strudel=1'`;
-  }
-  if (typeof fetch !== 'function') {
-    // not a browser
-    return;
-  }
-  const base = url.split('/').slice(0, -1).join('/');
-  if (typeof fetch === 'undefined') {
-    // skip fetch when in node / testing
-    return;
-  }
-  const json = await fetch(url)
-    .then((res) => res.json())
-    .catch((error) => {
-      console.error(error);
-      throw new Error(`error loading "${url}"`);
-    });
-  return [json, json._base || base];
-}
-
-// for some reason, only piano and flute work.. is it because mp3??
-
-async function fetchSample(url) {
-  const buffer = await fetch(url)
-    .then((res) => res.arrayBuffer())
-    .then((buf) => getAudioContext().decodeAudioData(buf));
-  let channels = [];
-  for (let i = 0; i < buffer.numberOfChannels; i++) {
-    channels.push(buffer.getChannelData(i));
-  }
-  return { channels, sampleRate: buffer.sampleRate };
-}
-
-export async function supradoughsamples(sampleMap, baseUrl) {
-  if (typeof sampleMap === 'string') {
-    const [json, base] = await _fetchSampleMap(sampleMap);
-    // console.log('json', json, 'base', base);
-    return supradoughsamples(json, base);
-  }
-  Object.entries(sampleMap).map(async ([key, urls]) => {
-    if (key !== '_base') {
-      urls = urls.map((url) => baseUrl + url);
-      // console.log('set', key, urls);
-      soundMap.set(key, urls);
-    }
-  });
-}

packages/webaudio/webaudio.mjs

@@ -17,10 +17,7 @@ import {
   resetGlobalEffects,
   errorLogger,
 } from 'superdough';
-import './supradough.mjs';
-import { workletUrl } from 'supradough';
 import { SuperdoughAudioController } from 'superdough/superdoughoutput.mjs';
-registerWorklet(workletUrl);
 
 const { Pattern, logger, repl } = strudel;
 

pnpm-lock.yaml

@@ -245,9 +245,6 @@ importers:
       '@strudel/transpiler':
         specifier: workspace:*
         version: link:../transpiler
-      codemirror-helix:
-        specifier: ^0.5.0
-        version: 0.5.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)
       nanostores:
         specifier: ^0.11.3
         version: 0.11.3
@@ -362,13 +359,13 @@ importers:
 
   packages/hs2js:
     dependencies:
+      tree-sitter-haskell:
+        specifier: ^0.23.1
+        version: 0.23.1(tree-sitter@0.21.1)
       web-tree-sitter:
         specifier: ^0.24.7
         version: 0.24.7
     devDependencies:
-      tree-sitter-haskell:
-        specifier: ^0.23.1
-        version: 0.23.1(tree-sitter@0.21.1)
       vite:
         specifier: ^6.0.11
         version: 6.0.11(@types/node@22.10.10)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0)
@@ -609,18 +606,6 @@ importers:
         specifier: workspace:*
         version: link:../vite-plugin-bundle-audioworklet
 
-  packages/supradough:
-    devDependencies:
-      vite:
-        specifier: ^6.0.11
-        version: 6.0.11(@types/node@22.10.10)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0)
-      vite-plugin-bundle-audioworklet:
-        specifier: workspace:*
-        version: link:../vite-plugin-bundle-audioworklet
-      wav-encoder:
-        specifier: ^1.3.0
-        version: 1.3.0
-
   packages/tidal:
     dependencies:
       '@strudel/core':
@@ -732,9 +717,6 @@ importers:
       superdough:
         specifier: workspace:*
         version: link:../superdough
-      supradough:
-        specifier: workspace:*
-        version: link:../supradough
     devDependencies:
       vite:
         specifier: ^6.0.11
@@ -3651,15 +3633,6 @@ packages:
     resolution: {integrity: sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  codemirror-helix@0.5.0:
-    resolution: {integrity: sha512-hI56hf9VGz53H1YvL6H1GC7HtP6te8vX+MsIHaE9J7Q3PQ6KFapKtIRg6lqSH898ikHWpMCPu42r6HJN0IfVLA==}
-    peerDependencies:
-      '@codemirror/commands': ^6.0.0
-      '@codemirror/language': ^6.0.0
-      '@codemirror/search': ^6.0.0
-      '@codemirror/state': ^6.0.0
-      '@codemirror/view': ^6.0.0
-
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -7794,9 +7767,6 @@ packages:
   walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
 
-  wav-encoder@1.3.0:
-    resolution: {integrity: sha512-FXJdEu2qDOI+wbVYZpu21CS1vPEg5NaxNskBr4SaULpOJMrLE6xkH8dECa7PiS+ZoeyvP7GllWUAxPN3AvFSEw==}
-
   wav@1.0.2:
     resolution: {integrity: sha512-viHtz3cDd/Tcr/HbNqzQCofKdF6kWUymH9LGDdskfWFoIy/HJ+RTihgjEcHfnsy1PO4e9B+y4HwgTwMrByquhg==}
 
@@ -11414,14 +11384,6 @@ snapshots:
 
   cmd-shim@6.0.3: {}
 
-  codemirror-helix@0.5.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2):
-    dependencies:
-      '@codemirror/commands': 6.8.0
-      '@codemirror/language': 6.10.8
-      '@codemirror/search': 6.5.8
-      '@codemirror/state': 6.5.1
-      '@codemirror/view': 6.36.2
-
   collapse-white-space@2.1.0: {}
 
   color-convert@2.0.1:
@@ -16385,8 +16347,6 @@ snapshots:
 
   walk-up-path@3.0.1: {}
 
-  wav-encoder@1.3.0: {}
-
   wav@1.0.2:
     dependencies:
       buffer-alloc: 1.2.0

test/__snapshots__/examples.test.mjs.snap

@@ -3138,43 +3138,6 @@ exports[`runs examples > example "delayfeedback" example index 0 1`] = `
 ]
 `;
 
-exports[`runs examples > example "delayspeed" example index 0 1`] = `
-[
-  "[ 0/1 → 1/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/8 → 1/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/4 → 3/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 3/8 → 1/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/2 → 5/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 5/8 → 3/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 3/4 → 7/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 7/8 → 1/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/1 → 9/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 9/8 → 5/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 5/4 → 11/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 11/8 → 3/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 3/2 → 13/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 13/8 → 7/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 7/4 → 15/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 15/8 → 2/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 2/1 → 17/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 17/8 → 9/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 9/4 → 19/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 19/8 → 5/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 5/2 → 21/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 21/8 → 11/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 11/4 → 23/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 23/8 → 3/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 3/1 → 25/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 25/8 → 13/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 13/4 → 27/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 27/8 → 7/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 7/2 → 29/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 29/8 → 15/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 15/4 → 31/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 31/8 → 4/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-]
-`;
-
 exports[`runs examples > example "delaysync" example index 0 1`] = `
 [
   "[ 0/1 → 1/2 | s:bd delay:0.25 delaysync:0.125 ]",
@@ -3190,38 +3153,38 @@ exports[`runs examples > example "delaysync" example index 0 1`] = `
 
 exports[`runs examples > example "delaytime" example index 0 1`] = `
 [
-  "[ 0/1 → 1/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/8 → 1/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/4 → 3/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 3/8 → 1/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/2 → 5/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 5/8 → 3/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 3/4 → 7/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 7/8 → 1/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:2 ]",
-  "[ 1/1 → 9/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 9/8 → 5/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 5/4 → 11/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 11/8 → 3/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 3/2 → 13/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 13/8 → 7/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 7/4 → 15/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 15/8 → 2/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:0.5 ]",
-  "[ 2/1 → 17/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 17/8 → 9/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 9/4 → 19/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 19/8 → 5/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 5/2 → 21/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 21/8 → 11/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 11/4 → 23/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 23/8 → 3/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-1 ]",
-  "[ 3/1 → 25/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 25/8 → 13/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 13/4 → 27/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 27/8 → 7/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 7/2 → 29/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 29/8 → 15/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 15/4 → 31/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
-  "[ 31/8 → 4/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 delayspeed:-2 ]",
+  "[ 0/1 → 1/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 1/8 → 1/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 1/4 → 3/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 3/8 → 1/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 1/2 → 5/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 5/8 → 3/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 3/4 → 7/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 7/8 → 1/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 1/1 → 9/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 9/8 → 5/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 5/4 → 11/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 11/8 → 3/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 3/2 → 13/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 13/8 → 7/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 7/4 → 15/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 15/8 → 2/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 2/1 → 17/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 17/8 → 9/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 9/4 → 19/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 19/8 → 5/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 5/2 → 21/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 21/8 → 11/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 11/4 → 23/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 23/8 → 3/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 3/1 → 25/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 25/8 → 13/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 13/4 → 27/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 27/8 → 7/2 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 7/2 → 29/8 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 29/8 → 15/4 | note:d s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 15/4 → 31/8 | note:a# s:sawtooth delay:0.8 delaytime:0.5 ]",
+  "[ 31/8 → 4/1 | note:a s:sawtooth delay:0.8 delaytime:0.5 ]",
 ]
 `;
 

test/examples.test.mjs

@@ -20,7 +20,6 @@ const skippedExamples = [
   'accelerationX',
   'defaultmidimap',
   'midimaps',
-  'clearScope',
   'bmod',
 ];
 

website/astro.config.mjs

@@ -10,11 +10,8 @@ import bundleAudioWorkletPlugin from 'vite-plugin-bundle-audioworklet';
 import tailwind from '@astrojs/tailwind';
 import AstroPWA from '@vite-pwa/astro';
 
-import process from 'node:process';
-
-const site = process.env.SITE_URL || `https://strudel.cc/`; // root url without a path
-const base = process.env.BASE_PATH || ''; // base path of the strudel site
-
+const site = process.env.STRUDEL_SITE || `https://strudel.cc/`; // root url without a path
+const base = process.env.STRUDEL_BASE || '/'; // base path of the strudel site
 const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 
 // this rehype plugin fixes relative links

website/src/pages/technical-manual/helix.mdx

@@ -1,85 +0,0 @@
----
-title: Helix Keybindings
-layout: ../../layouts/MainLayout.astro
----
-
-# Helix Keybindings in the REPL
-
-The Strudel REPL supports [Helix editor](https://helix-editor.com/) keybindings through the `codemirror-helix` extension. Helix is a post-modern modal text editor with a focus on selection-first editing and multiple cursors.
-
-## Enabling Helix Mode
-
-1. Open the Settings panel in the REPL (click the settings icon or use the keyboard shortcut)
-2. Find the "Keybindings" section
-3. Select "Helix" from the available options
-
-## Key Differences from Vim
-
-Helix uses a selection-first approach, which means:
-
-- **Selection → Action** (Helix) vs **Action → Motion** (Vim)
-- For example, to delete a word in Helix: `w` (select word) → `d` (delete)
-- In Vim, it would be: `dw` (delete word)
-
-## Common Helix Commands
-
-### Normal Mode
-
-- `i` — Enter insert mode before selection
-- `a` — Enter insert mode after selection
-- `v` — Enter visual/select mode
-- `w` — Select next word
-- `e` — Select to end of word
-- `b` — Select previous word
-- `x` — Select/extend line
-- `d` — Delete selection
-- `c` — Change selection (delete and enter insert mode)
-- `y` — Yank (copy) selection
-- `p` — Paste after selection
-- `u` — Undo
-- `U` — Redo
-- `/` — Search
-- `n` — Select next search match
-- `N` — Select previous search match
-
-### Movement
-
-- `h, j, k, l` — Move left, down, up, right
-- `gg` — Go to start of document
-- `ge` — Go to end of document
-- `{` / `}` — Move to previous/next paragraph
-- `%` — Match bracket
-
-### Multi-cursor
-
-- `C` — Duplicate cursor to line below
-- `Alt-C` — Duplicate cursor to line above
-- `,` — Remove primary cursor
-- `Alt-,` — Remove all secondary cursors
-
-## Strudel-Specific Features
-
-Currently, Helix mode in Strudel provides standard Helix keybindings. Unlike Vim mode, there are no custom Strudel-specific commands (like `:w` to evaluate) yet.
-
-To evaluate code while in Helix mode, use the standard shortcuts:
-
-- `Ctrl+Enter` or `Alt+Enter` — Evaluate code
-- `Alt+.` — Stop playback
-
-## Resources
-
-- [Helix Documentation](https://docs.helix-editor.com/)
-- [Helix Keymap](https://docs.helix-editor.com/keymap.html)
-- [codemirror-helix on npm](https://www.npmjs.com/package/codemirror-helix)
-- [codemirror-helix on GitLab](https://gitlab.com/_rvidal/codemirror-helix)
-
-## Notes
-
-- The `codemirror-helix` extension is described as an "initial version" and may not implement all Helix features
-- Behavior may differ slightly from the native Helix editor
-- If you encounter issues, you can switch back to other keybinding modes in Settings
-- The keybinding preference is saved in your browser's local storage
-
-## Contributing
-
-If you'd like to add Strudel-specific Helix commands (similar to Vim's `:w` for evaluate), contributions are welcome! See the implementation in `/packages/codemirror/keybindings.mjs` for reference.

website/src/pages/technical-manual/repl.mdx

@@ -117,10 +117,6 @@ Here's an example AST for `c3 [e3 g3]`
 
 which translates to `seq(c3, seq(e3, g3))`
 
-## Vim Keybindings
-
-See the separate page on Vim shortcuts for a quick reference: [/technical-manual/vim](/technical-manual/vim)
-
 ## Scheduling Events
 
 After an instance of `Pattern` is obtained from the user code,

website/src/pages/technical-manual/vim.mdx

@@ -1,58 +0,0 @@
----
-title: Vim Shortcuts
-layout: ../../layouts/MainLayout.astro
----
-
-# Vim Shortcuts in the REPL
-
-When the REPL editor (CodeMirror) is configured to use Vim keybindings, the following commands are available:
-
-- :w — Evaluate the current code
-
-  - Triggers the same evaluation as Ctrl+Enter / Alt+Enter
-  - You'll see messages in the Console panel such as:
-    - [vim] :w — evaluating code
-    - [repl] evaluate via event
-    - [eval] code updated
-
-- :q — Stop/pause playback
-
-  - Triggers the same stop action as Alt+.
-  - Useful to quickly stop scheduling without leaving Vim mode
-
-- gc — Toggle line comments for the current selection(s)
-
-  - Works in normal and visual mode
-  - If there's a selection, all selected lines are toggled
-
-Notes
-
-- Behavior respects the current language mode in the editor for comment syntax.
-- If multiple REPL editors are open, commands target the active editor. The implementation dispatches custom events handled by the editor.
-- If you don't see the Console panel, open the right panel in the REPL UI.
-
-Troubleshooting
-
-- If :w logs but evaluation doesn't apply, ensure Vim keybindings are active and try again. You can also use Ctrl+Enter as a fallback.
-- For :q / gc, ensure focus is inside the editor. If an error occurs, reload the page to reset editor state and try again.
-
-## Adding custom keybindings
-
-To add custom keybindings the `Vim` object can be used (either from within a pattern or in a prebake script)
-
-Example:
-
-```javascript
-// Map 'jk' to Escape in normal mode
-Vim.map('jk', '<Esc>', 'insert');
-// Map 'U' to :w (Evaluate the current code)
-Vim.map('U', ':w<CR>', 'normal');
-// Map 'Q' to :q — Stop/pause playback
-Vim.map('Q', ':q<CR>', 'normal');
-// Map 'J' to find next '$' (jump to next label)
-Vim.map('J', '/\\$<CR>', 'normal');
-// Map 'K' to find previous '$' (jump to previous label)
-Vim.map('K', '?\\$<CR>', 'normal');
-```
-
-For more information on how to use the `Vim` object see [CodeMirror Vim](https://github.com/replit/codemirror-vim)

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/components/panel/Reference.jsx

@@ -5,9 +5,8 @@ import { Textbox } from '@src/repl/components/panel/SettingsTab';
 import { settingsMap, useSettings } from '@src/settings.mjs';
 
 const isValid = ({ name, description, tags = [] }) => {
-  const isSupradoughOnly = tags.includes('supradough') && !tags.includes('superdough');
   const isSuperdirtOnly = tags.includes('superdirt') && !tags.includes('superdough');
-  return name && !name.startsWith('_') && !!description && !isSupradoughOnly && !isSuperdirtOnly;
+  return name && !name.startsWith('_') && !!description && !isSuperdirtOnly;
 };
 
 const availableFunctions = (() => {
@@ -38,7 +37,7 @@ const availableFunctions = (() => {
 })();
 
 const tagCounts = {};
-const ignoredTags = ['supradough', 'superdirt'];
+const ignoredTags = ['superdirt'];
 // const tagOptions = { all: `all (${availableFunctions.length})` };
 const tagOptions = { all: `all` };
 for (const doc of availableFunctions) {

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

@@ -9,7 +9,7 @@ import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
 import { ActionButton } from '../button/action-button.jsx';
 import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import cx from '@src/cx.mjs';
 
 const inputClass =
@@ -147,7 +147,6 @@ function MainSettingsContent({ started }) {
     isTabIndentationEnabled,
     isMultiCursorEnabled,
     patternAutoStart,
-    isBlockBasedEvalEnabled,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -235,7 +234,7 @@ function MainSettingsContent({ started }) {
         <ButtonGroup
           value={keybindings}
           onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', helix: 'Helix', vscode: 'VSCode' }}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
         ></ButtonGroup>
       </FormItem>
       <FormItem label="Panel Position">
@@ -296,11 +295,6 @@ function MainSettingsContent({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isMultiCursorEnabled', cbEvent.target.checked)}
           value={isMultiCursorEnabled}
         />
-        <Checkbox
-          label="Enable Block-based Evaluation (EXPERIMENTAL)"
-          onChange={(cbEvent) => settingsMap.setKey('isBlockBasedEvalEnabled', cbEvent.target.checked)}
-          value={isBlockBasedEvalEnabled}
-        />
         <Checkbox
           label="Enable flashing on evaluation"
           onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
@@ -356,11 +350,6 @@ function MainSettingsContent({ started }) {
 function PrebakeSettingsContent() {
   const { fontFamily, includePrebakeScriptInShare, prebakeScript } = useSettings();
   const editorRef = useRef();
-  useEffect(() => {
-    return () => {
-      editorRef.current?.cleanup();
-    };
-  });
 
   return (
     <div className="flex flex-col h-full text-foreground w-full overflow-auto" style={{ fontFamily }}>

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/repl/prebakeCodeMirror.mjs

@@ -1,4 +1,3 @@
-import { toggleLineComment } from '@codemirror/commands';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -63,28 +62,6 @@ export class PrebakeCodeMirror {
       state,
       parent: container,
     });
-
-    const handleSaveEvent = async (e) => {
-      if (e.detail.view !== this.view) {
-        return; // ignore events from other editors
-      }
-      await this.savePrebake();
-      e?.cancelable && e.preventDefault?.();
-    };
-    const handleToggleComment = (e) => {
-      if (e.detail.view !== this.view) {
-        return; // ignore events from other editors
-      }
-      this.toggleComment();
-      e?.cancelable && e.preventDefault?.();
-    };
-
-    document.addEventListener('repl-evaluate', handleSaveEvent);
-    document.addEventListener('repl-toggle-comment', handleToggleComment);
-    this.cleanup = () => {
-      document.removeEventListener('prebake-evaluate', handleSaveEvent);
-      document.removeEventListener('prebake-toggle-comment', handleToggleComment);
-    };
   }
 
   async savePrebake() {
@@ -94,16 +71,6 @@ export class PrebakeCodeMirror {
     logger('[prebake] prebake saved');
   }
 
-  toggleComment() {
-    try {
-      // Honor selections; toggleLineComment handles both selections and
-      // single line
-      toggleLineComment(this.view);
-    } catch (err) {
-      console.error('Error handling repl-toggle-comment event', err);
-    }
-  }
-
   setCode(code) {
     const changes = {
       from: 0,

website/src/repl/useReplContext.jsx

@@ -107,24 +107,21 @@ export function useReplContext() {
         //post to iframe parent (like Udels) if it exists...
         window.parent?.postMessage(code);
 
-        // Get the full buffer content from the editor instead of just the evaluated block
-        const fullBufferCode = editorRef.current?.code || code;
-        setLatestCode(fullBufferCode);
-
+        setLatestCode(code);
         try {
-          window.location.hash = '#' + code2hash(fullBufferCode);
+          window.location.hash = '#' + code2hash(code);
         } catch (e) {
           console.warn('[useReplContext] Failed to update hash:', e.message);
         }
-        setDocumentTitle(fullBufferCode);
+        setDocumentTitle(code);
         const viewingPatternData = getViewingPatternData();
-        setVersionDefaultsFrom(fullBufferCode);
-        const data = { ...viewingPatternData, code: fullBufferCode };
+        setVersionDefaultsFrom(code);
+        const data = { ...viewingPatternData, code };
         let id = data.id;
         const isExamplePattern = viewingPatternData.collection !== userPattern.collection;
 
         if (isExamplePattern) {
-          const codeHasChanged = fullBufferCode !== viewingPatternData.code;
+          const codeHasChanged = code !== viewingPatternData.code;
           if (codeHasChanged) {
             // fork example
             const newPattern = userPattern.duplicate(data);
@@ -176,8 +173,9 @@ export function useReplContext() {
   useEffect(() => {
     let editorSettings = {};
     Object.keys(defaultSettings).forEach((key) => {
-      // Don't use hasOwnProperty - nanostore uses proxies so values may not be own properties
-      editorSettings[key] = _settings[key];
+      if (Object.prototype.hasOwnProperty.call(_settings, key)) {
+        editorSettings[key] = _settings[key];
+      }
     });
     editorRef.current?.updateSettings(editorSettings);
   }, [_settings]);

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.
@@ -47,7 +52,6 @@ export const defaultSettings = {
   isPatternHighlightingEnabled: true,
   isTabIndentationEnabled: false,
   isMultiCursorEnabled: false,
-  isBlockBasedEvalEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -86,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 {
@@ -105,7 +110,6 @@ export const $settings = computed(settingsMap, (state) => {
     isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled),
     isTabIndentationEnabled: parseBoolean(state.isTabIndentationEnabled),
     isMultiCursorEnabled: parseBoolean(state.isMultiCursorEnabled),
-    isBlockBasedEvalEnabled: parseBoolean(state.isBlockBasedEvalEnabled),
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
     isPanelPinned: parseBoolean(state.isPanelPinned),